/* ============================================================
   SIPP Shell — v0.1
   Layout: sidebar (256px) + área principal
   Propuesta B: Minimalista cálido · sidebar blanca
   Fuente de verdad: docs/design-system.html
   ============================================================ */

/* ── Reset base ─────────────────────────────────────────────
   Cargado después de style.css. NO anulamos position/height del body
   ya que style.css usa position:absolute;height:100% que es el contexto
   correcto. Solo actualizamos fuente y suavizado. */
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

/* ── App Shell ──────────────────────────────────────────────
   height:100% hereda del body position:absolute;height:100%
   min-height:100vh como fallback cuando el body sea estático */
.sipp-app {
  display: flex;
  flex-direction: row;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--ink-100);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sipp-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  height: 100%;
  background: #fff;
  border-right: 1px solid var(--ink-200);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width .22s ease;
}

/* Brand */
.sipp-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 18px 16px;
  flex-shrink: 0;
}

.sipp-logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--teal-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sipp-wordmark-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  line-height: 1;
}

.sipp-wordmark-sub {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .15em;
  color: var(--ink-500);
  margin-top: 2px;
  text-transform: uppercase;
}

/* Search */
.sipp-sidebar-search {
  padding: 0 14px 10px;
  flex-shrink: 0;
}

.sipp-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ink-100);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  color: var(--ink-500);
  cursor: pointer;
  transition: background .1s;
}

.sipp-search-box:hover {
  background: var(--ink-150);
}

.sipp-search-box span {
  flex: 1;
  font-size: 12.5px;
  font-family: var(--font-sans);
}

.sipp-search-box kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  color: var(--ink-500);
}

/* Nav */
.sipp-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-200) transparent;
}

.sipp-sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sipp-sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--ink-200);
  border-radius: var(--r-full);
}

.sipp-nav-group {
  margin-bottom: 14px;
}

.sipp-nav-group-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 6px 10px;
  display: block;
}

.sipp-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin: 1px 0;
  border-radius: var(--r-sm);
  color: var(--ink-700);
  font-size: 13.5px;
  font-weight: 500;
  transition: background .1s, color .1s;
  cursor: pointer;
  line-height: 1.3;
}

.sipp-nav-item:hover {
  background: var(--ink-100);
  color: var(--ink-900);
}

.sipp-nav-item.active {
  background: var(--teal-50);
  color: var(--teal-700);
  font-weight: 600;
}

.sipp-nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sipp-nav-label {
  flex: 1;
}

.sipp-nav-item--sub {
  padding-left: 22px;
  font-size: 12.5px;
  color: var(--ink-500);
  margin-top: 0;
}
.sipp-nav-item--sub .sipp-nav-icon {
  width: 14px;
  height: 14px;
  color: var(--ink-400);
}
.sipp-nav-item--sub:hover { color: var(--ink-800); }
.sipp-nav-item--sub.active {
  color: var(--teal-700);
  background: var(--teal-50);
}

/* Year card */
.sipp-sidebar-year-card {
  padding: 10px 14px;
  flex-shrink: 0;
}

.sipp-year-card {
  background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-800) 100%);
  border-radius: var(--r-md);
  padding: 12px 14px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.sipp-year-card::before {
  content: '';
  position: absolute;
  right: -12px;
  top: -12px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  pointer-events: none;
}

.sipp-year-card::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 6px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.10);
  pointer-events: none;
}

.sipp-year-card-label {
  font-size: 10.5px;
  color: rgba(255,255,255,.7);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  position: relative;
}

.sipp-year-card-value {
  font-size: 22px;
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: -0.01em;
  position: relative;
}

.sipp-year-card-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,.75);
  margin-top: 2px;
  position: relative;
}

.sipp-year-card--planning {
  background: linear-gradient(135deg, var(--teal-600) 0%, var(--teal-700) 100%);
}

.sipp-year-card-nav {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 2px;
  z-index: 1;
}

.sipp-year-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-xs, 4px);
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  transition: background .15s;
  padding: 0;
}

.sipp-year-nav-btn:hover {
  background: rgba(255,255,255,.22);
}

.sipp-year-nav-btn--disabled {
  width: 22px;
  height: 22px;
  display: inline-block;
}

/* Banner de año de planificación */
.sipp-planning-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  color: #92400e;
  font-size: 13px;
  line-height: 1.4;
  flex-wrap: wrap;
}

.sipp-planning-banner svg {
  flex-shrink: 0;
  color: #d97706;
}

.sipp-planning-banner strong {
  font-weight: 600;
}

.sipp-planning-banner-btn {
  margin-left: auto;
  padding: 3px 12px;
  border-radius: var(--r-sm);
  border: 1px solid #d97706;
  background: transparent;
  color: #92400e;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}

.sipp-planning-banner-btn:hover {
  background: #fde68a;
}

/* Sidebar footer */
.sipp-sidebar-footer {
  padding: 8px 10px 14px;
  border-top: 1px solid var(--ink-150);
  flex-shrink: 0;
}

.sipp-sidebar-config {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--ink-700);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .1s;
  margin-bottom: 4px;
}

.sipp-sidebar-config:hover {
  background: var(--ink-100);
  color: var(--ink-900);
}

.sipp-sidebar-config.active {
  background: var(--teal-50);
  color: var(--teal-700);
}

.sipp-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
}

.sipp-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 12.5px;
  flex-shrink: 0;
  letter-spacing: 0;
}

.sipp-user-info {
  flex: 1;
  min-width: 0;
}

.sipp-user-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sipp-user-role {
  font-size: 10.5px;
  color: var(--ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.sipp-logout-btn {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--ink-400);
  cursor: pointer;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .1s, color .1s;
  flex-shrink: 0;
}

.sipp-logout-btn:hover {
  background: var(--ink-100);
  color: var(--ink-700);
}

/* ============================================================
   ÁREA PRINCIPAL
   ============================================================ */
.sipp-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.sipp-topbar {
  height: var(--topbar-h);
  background: #fff;
  border-bottom: 1px solid var(--ink-150);
  display: flex;
  align-items: center;
  padding: 0 var(--space-8);
  gap: var(--space-4);
  flex-shrink: 0;
}

.sipp-topbar-left {
  flex: 1;
  min-width: 0;
}

.sipp-page-eyebrow {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sipp-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.sipp-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Selector de versión en topbar */
.sipp-snapshot-select {
  height: 32px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 12.5px;
  width: auto;
  min-width: 130px;
  max-width: 220px;
}

.sipp-topbar-actions .sipp-btn {
  height: 32px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.sipp-topbar-actions form {
  display: flex;
  align-items: center;
}

/* Estado del POI en topbar */
.sipp-poi-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: var(--space-2);
  border-right: 1px solid var(--ink-150);
  margin-right: 2px;
}
.sipp-poi-status .sipp-badge {
  font-size: 12px;
  padding: 5px 10px;
}

/* Admin badge */
.sipp-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--r-full);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #2D1F12;
  color: #FBD89D;
  margin-right: var(--space-1);
}

.sipp-admin-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  background: #FBD89D;
  border-radius: var(--r-full);
}

/* ============================================================
   BANNER DE VERSIÓN HISTÓRICA
   ============================================================ */
.sipp-snapshot-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-8);
  background: var(--warning-bg);
  border-bottom: 1px solid #FBD89D;
  font-size: 13px;
  color: var(--warning);
  font-weight: 500;
  flex-shrink: 0;
}

.sipp-snapshot-banner strong {
  font-weight: 700;
}

/* ============================================================
   ÁREA DE CONTENIDO
   ============================================================ */
.sipp-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
  scrollbar-width: thin;
  scrollbar-color: var(--ink-200) transparent;
}

.sipp-content::-webkit-scrollbar {
  width: 6px;
}

.sipp-content::-webkit-scrollbar-thumb {
  background: var(--ink-200);
  border-radius: var(--r-full);
}

/* ============================================================
   LOGIN WRAPPER
   ============================================================ */
.sipp-login-wrapper {
  height: 100%;
  min-height: 100vh;
}

/* ============================================================
   BOTONES BASE (topbar y snapshot)
   ============================================================ */
.sipp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px 14px;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  transition: background .15s, border-color .15s;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.sipp-btn-sm {
  padding: 7px 11px;
  font-size: 12px;
  border-radius: var(--r-sm);
}

.sipp-btn-outline {
  background: #fff;
  color: var(--ink-700);
  border: 1px solid var(--ink-200);
}

.sipp-btn-outline:hover {
  background: var(--ink-50);
  border-color: var(--ink-300);
}

.sipp-btn-primary {
  background: var(--ink-900);
  color: #fff;
  border: 0;
}

.sipp-btn-primary:hover {
  background: var(--ink-700);
}

.sipp-btn-teal {
  background: var(--teal-700);
  color: #fff;
  border: 0;
}

.sipp-btn-teal:hover {
  background: var(--teal-800);
}

/* ============================================================
   UTILIDADES TIPOGRÁFICAS
   ============================================================ */
.sipp-mono {
  font-family: var(--font-mono);
}

.sipp-tnum {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

/* ============================================================
   LOGIN — Layout split: hero izq + formulario der
   Propuesta B · docs/design-system.html
   ============================================================ */

.sipp-login {
  display: flex;
  flex-direction: row;
  position: fixed;
  inset: 0;
  font-family: var(--font-sans);
}

/* ── Hero — panel izquierdo ─────────────────────────────── */
.sipp-login-hero {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: var(--teal-900);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 48px;
}

.sipp-login-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.sipp-login-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(0, 40, 38, .68) 0%,
    rgba(0, 65, 62, .58) 100%
  );
  pointer-events: none;
}

.sipp-login-hero-logo {
  height: 72px;
  width: auto;
  filter: brightness(0) invert(1);
  position: relative;
  z-index: 1;
}

.sipp-wordmark-logo {
  height: 36px;
  width: auto;
  flex-shrink: 0;
}

.sipp-login-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.sipp-hero-municipality {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sipp-hero-municipality-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-700);
  text-transform: uppercase;
}

.sipp-hero-municipality-city {
  font-size: 17px;
  font-weight: 700;
  color: var(--teal-900);
  letter-spacing: -0.015em;
  margin-top: 1px;
}

.sipp-hero-status {
  font-size: 12px;
  color: var(--ink-600);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sipp-status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--success);
  display: inline-block;
  flex-shrink: 0;
}

.sipp-login-hero-bottom {
  position: relative;
  z-index: 1;
  max-width: 540px;
}

.sipp-hero-eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .75);
  letter-spacing: .22em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.sipp-hero-eyebrow::before {
  content: '';
  width: 28px;
  height: 1.5px;
  background: rgba(255, 255, 255, .75);
  flex-shrink: 0;
}

.sipp-hero-title {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 16px;
}

.sipp-hero-title--lg {
  font-size: 54px;
  margin: 0;
}

.sipp-hero-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, .75);
  line-height: 1.55;
  max-width: 460px;
  margin: 0;
}

/* Tarjeta flotante decorativa (PIM) */
.sipp-hero-card {
  position: absolute;
  right: -20px;
  top: -160px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  box-shadow: var(--shadow-lg);
  width: 210px;
}

.sipp-hero-card-label {
  font-size: 11px;
  color: var(--ink-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.sipp-hero-card-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-900);
  margin-top: 4px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.sipp-hero-card-delta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--success);
  font-weight: 600;
  margin-top: 5px;
}

.sipp-hero-card-chart {
  margin-top: 8px;
}

.sipp-login-hero-footer {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .45);
  position: relative;
  z-index: 1;
}

/* ── Panel del formulario — lado derecho ─────────────────── */
.sipp-login-panel {
  flex: 0 0 clamp(380px, 36vw, 520px);
  background: var(--ink-50);
  display: flex;
  flex-direction: column;
  padding: 48px 56px;
  overflow-y: auto;
}

.sipp-login-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.sipp-login-wordmark {
  display: flex;
  align-items: center;
  gap: 11px;
}

.sipp-login-help {
  font-size: 12px;
  color: var(--ink-500);
}

.sipp-login-help a {
  color: var(--teal-700);
  font-weight: 600;
}

.sipp-login-form-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 380px;
  padding: 32px 0;
}

.sipp-login-heading {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.sipp-login-sub {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--ink-500);
  line-height: 1.55;
}

.sipp-login-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--ink-400);
  margin-top: auto;
}

.sipp-login-footer-ssl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ── Componentes de formulario (reutilizables en toda la app) ── */
.sipp-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}

.sipp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sipp-field-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700);
  display: block;
}

.sipp-field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sipp-field-help {
  font-size: 11.5px;
  color: var(--ink-500);
}

.sipp-field-error {
  font-size: 11.5px;
  color: var(--danger);
}

.sipp-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  background: #fff;
  transition: border-color .15s, box-shadow .15s, padding .15s;
}

.sipp-input:focus-within {
  border-color: var(--teal-700);
  border-width: 2px;
  padding: 10px 13px;
  box-shadow: 0 0 0 4px rgba(0,113,112,.10);
}

.sipp-input.sipp-input--error {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(180,35,24,.08);
}

.sipp-input-field {
  flex: 1;
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink-900);
  min-width: 0;
}

.sipp-input-field::placeholder {
  color: var(--ink-400);
}

.sipp-input-icon {
  color: var(--ink-400);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color .1s;
}

.sipp-input-icon:hover {
  color: var(--ink-600);
}

/* Checkbox */
.sipp-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-700);
  cursor: pointer;
}

.sipp-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: var(--r-xs);
  accent-color: var(--teal-700);
  cursor: pointer;
  flex-shrink: 0;
}

/* Botón de submit del login */
.sipp-login-submit {
  margin-top: 8px;
  padding: 13px 14px;
  border-radius: var(--r-md);
  border: 0;
  background: var(--ink-900);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  transition: background .15s;
  box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 4px 12px rgba(14,24,22,.18);
}

.sipp-login-submit:hover {
  background: var(--ink-700);
}

/* ============================================================
   KPI BAR — sub_header redesign (dashboard y páginas POI)
   ============================================================ */

#sub-header {
  background: var(--ink-50);
  border-bottom: 1px solid var(--ink-150);
  padding: 14px 24px;
}

.sipp-kpi-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.sipp-kpi-card {
  background: #fff;
  border: 1px solid var(--ink-150);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sipp-kpi-card--dark {
  background: linear-gradient(135deg, var(--teal-900) 0%, var(--teal-800) 100%);
  border-color: var(--teal-800);
  box-shadow: 0 4px 14px rgba(0,58,58,.22);
}

.sipp-kpi-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-500);
}

.sipp-kpi-card--dark .sipp-kpi-label {
  color: rgba(255,255,255,.6);
}

.sipp-kpi-value {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.sipp-kpi-card--dark .sipp-kpi-value {
  color: #fff;
}

.sipp-kpi-sub {
  font-size: 11.5px;
  color: var(--ink-500);
}

.sipp-kpi-card--dark .sipp-kpi-sub {
  color: rgba(255,255,255,.55);
}

/* ============================================================
   DASHBOARD — Hero, layout y componentes
   ============================================================ */

.sipp-db-hero {
  margin: -24px -24px 0;
  padding: 28px 24px 22px;
  background: #fff;
  border-bottom: 1px solid var(--ink-150);
}

.sipp-db-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--teal-700);
  text-transform: uppercase;
  letter-spacing: .13em;
  margin-bottom: 8px;
}

.sipp-db-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.sipp-db-subtitle {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--ink-500);
  line-height: 1.55;
}

.sipp-db-content {
  padding: 0;
}

/* Tarjeta genérica de dashboard */
.sipp-db-card {
  background: #fff;
  border: 1px solid var(--ink-150);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* Header de actividad/POI (info/actividad.htm) */
.sipp-db-act-header {
  margin: 0 -24px;
  background: #fff;
  border-top: 1px solid var(--ink-150);
  border-bottom: 1px solid var(--ink-150);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sipp-db-act-right form {
  margin: 0;
}

.sipp-db-act-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--teal-700);
  background: var(--teal-50);
  border: 1px solid var(--teal-200);
  border-radius: 99px;
  padding: 3px 10px;
  margin-bottom: 6px;
}

.sipp-db-act-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.015em;
}

.sipp-db-act-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-500);
}

.sipp-db-act-sep {
  color: var(--ink-300);
}

/* Sección label estilo propuesta B */
.sipp-db-section {
  padding: 20px 24px 0;
}

.sipp-db-section-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-500);
  margin-bottom: 2px;
}

.sipp-db-section-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.015em;
}

/* ── Dashboard: charts row ── */
.sipp-db-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.sipp-db-chart-card {
  background: #fff;
  border: 1px solid var(--ink-150);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* ── Dashboard: info row (actividades + progress) ── */
.sipp-db-info-row {
  display: flex;
  gap: 24px;
  margin-top: 16px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--ink-150);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* ── Dashboard: actividades list ── */
.sipp-db-activlist {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.sipp-db-activ-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ink-100);
}
.sipp-db-activ-row:last-of-type { border-bottom: none; }
.sipp-db-activ-amount {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.01em;
  min-width: 128px;
}
.sipp-db-activ-name {
  font-size: 12px;
  color: var(--ink-500);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── Dashboard: pagination ── */
#pagination ul {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  gap: 4px;
}
#pagination ul li { margin: 0; }
#pagination ul .pagination-item {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--ink-200);
  background: #fff;
  color: var(--ink-700);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background .1s;
}
#pagination ul .pagination-item:hover { background: var(--ink-100); }
#pagination ul .pagination-item.active {
  background: var(--teal-700);
  border-color: var(--teal-700);
  color: #fff;
  font-weight: 600;
}

/* ── Dashboard: progress rings ── */
.dashboard-progress {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.sipp-progress-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.sipp-progress-ring {
  position: relative;
  width: 96px;
  height: 96px;
}
.sipp-progress-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.progress-subtitle {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.sipp-progress-unit {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-500);
  margin-top: 4px;
}
.sipp-progress-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-500);
}
.progress-ring__circle {
  transition: stroke-dashoffset .6s ease;
}

/* ── KPI cards: semáforo ── */
.sipp-kpi-card--green { border-left: 3px solid var(--teal-500); }
.sipp-kpi-card--yellow { border-left: 3px solid #e6a817; }
.sipp-kpi-card--red { border-left: 3px solid #dc5f3a; }
.sipp-kpi-card--dark.sipp-kpi-card--green { border-left-color: var(--teal-300); }
.sipp-kpi-card--dark.sipp-kpi-card--yellow { border-left-color: #f0c059; }
.sipp-kpi-card--dark.sipp-kpi-card--red { border-left-color: #f08070; }

/* ============================================================
   PÁGINAS DE LISTA
   ============================================================ */

/* Page header */
.sipp-ph {
  background: #fff;
  border: 1px solid var(--ink-150);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-xs);
}

#items-tableform,
#tareas-tableform {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-150);
}

.sipp-ph-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-500);
}

.sipp-ph-crumb b {
  color: var(--ink-900);
  font-weight: 600;
}

.sipp-ph-crumb-sep {
  color: var(--ink-300);
}

.sipp-ph-title {
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.sipp-ph-desc {
  font-size: 13px;
  color: var(--ink-500);
  margin: 4px 0 0;
}

/* Tabla */
.sipp-tbl-wrap {
  background: #fff;
  border: 1px solid var(--ink-150);
  border-radius: 12px;
  overflow: hidden;
  overflow-x: auto;
  box-shadow: var(--shadow-xs);
}

.sipp-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.sipp-tbl th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-500);
  padding: 10px 14px;
  background: var(--ink-50);
  border-bottom: 1px solid var(--ink-200);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

.sipp-tbl td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ink-150);
  color: var(--ink-700);
  vertical-align: middle;
}

.sipp-tbl tbody tr:last-child td {
  border-bottom: 0;
}

.sipp-tbl tbody tr:hover td {
  background: var(--ink-50);
}

.sipp-tbl-primary {
  font-weight: 600;
  color: var(--ink-900);
}

.sipp-tbl-truncate {
  display: block;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badges */
.sipp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  letter-spacing: .02em;
}

.sipp-badge-neutral {
  background: var(--ink-100);
  color: var(--ink-600);
  border: 1px solid var(--ink-200);
}

.sipp-badge-teal {
  background: var(--teal-50);
  color: var(--teal-700);
}

.sipp-badge-success {
  background: var(--success-bg);
  color: var(--success);
}

.sipp-badge-warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.sipp-badge-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Botón icono */
.sipp-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--ink-200);
  background: #fff;
  color: var(--ink-500);
  cursor: pointer;
  transition: all .15s;
  padding: 0;
  flex-shrink: 0;
}

.sipp-btn-icon:hover {
  background: var(--ink-100);
  color: var(--ink-900);
  border-color: var(--ink-300);
}

.sipp-btn-icon--danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: #F8C8C2;
}

.sipp-btn-icon--danger:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

/* Acciones de tabla */
.sipp-tbl-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sipp-tbl-actions form {
  margin: 0;
}

/* Estado vacío */
.sipp-tbl-empty {
  text-align: center;
  padding: 48px 24px !important;
}

.sipp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sipp-empty-ill {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--ink-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-400);
  margin-bottom: 14px;
}

.sipp-empty-ttl {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-700);
  margin: 0 0 6px;
}

.sipp-empty-msg {
  font-size: 13px;
  color: var(--ink-500);
  margin: 0;
  line-height: 1.5;
  max-width: 280px;
}

/* Override estilos legacy de style.css que sangran en sipp-tbl */
.sipp-tbl tbody tr,
.sipp-tbl tbody tr:nth-child(1),
.sipp-tbl tbody tr:nth-child(even) {
  background: unset;
  color: unset;
}

.sipp-tbl tbody td {
  background: #fff;
  color: var(--ink-700);
}

.sipp-tbl tbody tr:hover td {
  background: var(--ink-50) !important;
}

.sipp-tbl tbody tr:not(:first-child):hover {
  background: unset;
  cursor: default;
}

/* Fila total de tabla */
.sipp-tbl-total td {
  background: var(--teal-700) !important;
  color: #fff !important;
  font-weight: 700;
  border-top: 0;
  border-bottom: 0;
}

.sipp-tbl-total .sipp-tbl-num {
  color: #fff;
}

/* Celda numérica (cronograma) */
.sipp-tbl-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--ink-700);
}

.sipp-tbl-total .sipp-tbl-num {
  color: var(--ink-900);
}

/* ============================================================
   BOTONES
   ============================================================ */

.sipp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  transition: all .15s;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.sipp-btn-primary {
  background: var(--ink-900);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 1px 2px rgba(14,24,22,.18);
}
.sipp-btn-primary:hover { background: var(--ink-800); }

.sipp-btn-teal {
  background: var(--teal-700);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 1px 2px rgba(0,82,80,.2);
}
.sipp-btn-teal:hover { background: var(--teal-800); }

.sipp-btn-secondary {
  background: #fff;
  color: var(--ink-900);
  border: 1px solid var(--ink-200);
}
.sipp-btn-secondary:hover { background: var(--ink-50); border-color: var(--ink-300); }

.sipp-btn-ghost {
  background: transparent;
  color: var(--ink-700);
}
.sipp-btn-ghost:hover { background: var(--ink-100); }

.sipp-btn-danger {
  background: var(--danger);
  color: #fff;
}
.sipp-btn-danger:hover { filter: brightness(.9); }

.sipp-btn-danger-soft {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid #F8C8C2;
}
.sipp-btn-danger-soft:hover {
  background: #fee4e2;
  border-color: var(--danger);
}

/* ============================================================
   FIELDS / SELECTS
   ============================================================ */

.sipp-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sipp-field-lbl {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700);
}

.sipp-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 9px 32px 9px 12px;
  height: 38px;
  border: 1px solid var(--ink-200);
  border-radius: 9px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink-900);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}

.sipp-select:hover { border-color: var(--ink-300); }

.sipp-select:focus {
  outline: none;
  border-color: var(--teal-700);
  border-width: 1.5px;
  box-shadow: 0 0 0 4px rgba(0,113,112,.1);
}

.sipp-select--compact {
  font-size: 12.5px;
  padding: 7px 28px 7px 10px;
}

/* ============================================================
   FILTER BAR + TOOLBAR
   ============================================================ */

.sipp-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.sipp-filter-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 140px;
}

.sipp-filter-col--grow {
  flex: 1;
  min-width: 240px;
}

.sipp-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--ink-150);
  margin-bottom: 16px;
}

.sipp-toolbar-exports {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.sipp-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sipp-toolbar-actions form,
.sipp-toolbar-exports form {
  margin: 0;
}

/* ============================================================
   TOMSELECTE (select de búsqueda — centrocosto_id)
   ============================================================ */

.ts-wrapper {
  height: 38px;
  border: 1px solid var(--ink-200) !important;
  border-radius: 9px !important;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  font-family: var(--font-sans);
  padding: 0 !important;
}

.ts-wrapper:hover { border-color: var(--ink-300) !important; }

.ts-wrapper.focus {
  border-color: var(--teal-700) !important;
  box-shadow: 0 0 0 4px rgba(0,113,112,.1) !important;
  outline: none !important;
}

.ts-wrapper .ts-control {
  border: none !important;
  border-radius: 9px !important;
  padding: 0 32px 0 12px !important;
  height: 36px !important;
  min-height: unset !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  color: var(--ink-900) !important;
  cursor: pointer !important;
  flex-wrap: nowrap !important;
}

.ts-wrapper .ts-control input {
  font-family: var(--font-sans) !important;
  font-size: 13.5px !important;
  color: var(--ink-900) !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ts-wrapper .ts-control .item {
  font-size: 13.5px;
  color: var(--ink-900);
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-dropdown {
  border: 1px solid var(--ink-200) !important;
  border-radius: 9px !important;
  box-shadow: 0 4px 16px rgba(14,24,22,.1) !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  z-index: 10000 !important;
}

.ts-dropdown .ts-dropdown-content {
  padding: 4px !important;
}

.ts-dropdown .option {
  padding: 8px 10px !important;
  border-radius: 6px !important;
  color: var(--ink-700) !important;
  cursor: pointer !important;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background: var(--teal-50) !important;
  color: var(--teal-700) !important;
}

.ts-dropdown .highlight {
  background: transparent !important;
  font-weight: 700 !important;
  color: var(--teal-700) !important;
}

/* TomSelect — multi-select chips */
.ts-wrapper.multi {
  height: auto !important;
  min-height: 38px;
}
.ts-wrapper.multi .ts-control {
  flex-wrap: wrap !important;
  gap: 4px !important;
  height: auto !important;
  min-height: 28px !important;
  padding: 5px 36px 5px 8px !important;
  align-content: flex-start;
}
.ts-wrapper.multi .ts-control .item {
  background: var(--teal-50) !important;
  color: var(--teal-700) !important;
  border: 1px solid var(--teal-200) !important;
  border-radius: 6px !important;
  padding: 2px 6px 2px 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  max-width: unset !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.5;
}
.ts-wrapper.multi .ts-control .item .remove {
  color: var(--teal-500) !important;
  margin-left: 4px !important;
  padding: 0 2px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
.ts-wrapper.multi .ts-control .item .remove:hover { color: #dc5f3a !important; }

/* ============================================================
   ALERTAS / TOASTS
   ============================================================ */

.sipp-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 24px;
  margin: 0 -24px 16px;
  font-size: 13px;
  line-height: 1.5;
  border-top: 1px solid;
  border-bottom: 1px solid;
  flex-shrink: 0;
}

.sipp-alert svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.sipp-alert-title {
  font-weight: 700;
  margin-right: 6px;
}

.sipp-alert-danger {
  background: var(--danger-bg);
  border-color: #F8C8C2;
  color: var(--danger);
}

.sipp-alert-warning {
  background: var(--warning-bg);
  border-color: #FBD89D;
  color: var(--warning);
}

.sipp-alert-success {
  background: var(--success-bg);
  border-color: #BAE6CC;
  color: var(--success);
}

.sipp-alert-info {
  background: var(--info-bg);
  border-color: #C2D7EE;
  color: var(--info);
}

/* ============================================================
   CUADRO DE NECESIDADES — tabla jerárquica
   ============================================================ */

/* Grupo por actividad */
.sipp-needs-group {
  margin-bottom: 24px;
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  overflow: hidden;
}

/* Encabezado de actividad */
.sipp-needs-actividad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
  background: var(--ink-900);
}

.sipp-needs-actividad-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sipp-needs-actividad-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sipp-needs-actividad-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sipp-needs-actividad-total {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Badge sobre fondo oscuro */
.sipp-badge-ink {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  letter-spacing: .02em;
}

/* Encabezado de tarea */
.sipp-needs-tarea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 18px;
  background: var(--ink-50);
  border-top: 1px solid var(--ink-150);
}

.sipp-needs-tarea-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sipp-needs-tarea-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 480px;
}

.sipp-needs-tarea-right {
  flex-shrink: 0;
}

.sipp-needs-tarea-total {
  font-size: 13px;
  font-weight: 700;
  color: var(--teal-700);
  font-variant-numeric: tabular-nums;
}

/* Tabla de ítems (scroll horizontal) */
.sipp-needs-items-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--ink-150);
}

.sipp-tbl--needs {
  min-width: 1100px;
}

.sipp-tbl-th--check {
  width: 36px;
  text-align: center !important;
  padding-left: 12px !important;
  padding-right: 0 !important;
}

/* Tipo + dot */
.sipp-needs-tipo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Dot de estado de prerequerimientos */
.sipp-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  flex-shrink: 0;
  display: inline-block;
}

.sipp-status-dot--ok   { background: var(--success); }
.sipp-status-dot--half { background: var(--warning); }
.sipp-status-dot--full { background: var(--danger); }

/* Checkbox con color de marca */
.sipp-check {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--teal-700);
}

/* Botón icono deshabilitado */
.sipp-btn-icon--disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* ============================================================
   PRE-REQUERIMIENTOS
   ============================================================ */

.sipp-prereq-group {
  margin-bottom: 20px;
}

.sipp-prereq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--ink-900);
  border-radius: 10px 10px 0 0;
}

.sipp-prereq-num {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.sipp-prereq-total {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.sipp-prereq-table {
  border-radius: 0 0 10px 10px !important;
  border-top: 0 !important;
}

/* Fila eliminada */
.sipp-tbl-row--deleted td {
  opacity: .45;
  text-decoration: line-through;
}

.sipp-tbl-muted {
  font-size: 12px;
  color: var(--ink-500);
  font-style: italic;
}

/* Input precio inline */
.sipp-price-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sipp-input-sm {
  width: 88px;
  padding: 5px 8px;
  border: 1px solid var(--ink-200);
  border-radius: 7px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  text-align: right;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}

.sipp-input-sm:focus {
  outline: none;
  border-color: var(--teal-700);
  box-shadow: 0 0 0 3px rgba(0,113,112,.1);
}

.sipp-input-sm[readonly] {
  background: var(--ink-50);
  color: var(--ink-500);
  cursor: pointer;
}

/* Glosa / sustento */
.sipp-prereq-glosa {
  padding: 14px 18px;
  background: var(--ink-50);
  border: 1px solid var(--ink-150);
  border-top: 0;
  font-size: 13px;
  color: var(--ink-700);
  line-height: 1.6;
}

.sipp-prereq-sustento {
  border-radius: 0 !important;
  border-top: 0 !important;
  margin: 0 !important;
}

/* ============================================================
   LOGROS / DIFICULTADES
   ============================================================ */

/* Tabla de tareas dentro del panel (sin radio arriba — conecta al header) */
.sipp-logros-tbl-wrap {
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

/* Input ejecutado centrado */
.sipp-input-center {
  text-align: center;
  width: 72px;
}

/* Programado — texto muted */
.sipp-logros-programado {
  color: var(--ink-400) !important;
}

/* "No aplica" */
.sipp-logros-no-aplica {
  font-size: 12px;
  color: var(--ink-300);
}

/* Avance superior a programado */
.sipp-logros-superado {
  font-size: 11px;
  color: var(--info);
  margin-left: 2px;
}

/* Readonly narrativo */
.sipp-logros-readonly {
  background: var(--ink-50);
  border: 1px solid var(--ink-150);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-700);
  min-height: 52px;
  line-height: 1.6;
}

.sipp-logros-readonly em {
  color: var(--ink-300);
}

/* Sin tareas */
.sipp-logros-empty {
  padding: 20px 24px;
  font-size: 13px;
  color: var(--ink-400);
}

/* Sección de fotos */
.sipp-logros-fotos-wrap {
  padding: 12px 0 4px;
}

/* Botón de eliminar foto — posicionamiento */
.logro-foto-del-btn {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
}

/* Fila de upload de foto */
.sipp-logros-foto-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
}

.sipp-logros-file-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700);
  cursor: pointer;
  background: #fff;
  transition: all .15s;
  white-space: nowrap;
}

.sipp-logros-file-label:hover {
  border-color: var(--ink-300);
  background: var(--ink-50);
}

.sipp-logros-file-input {
  display: none;
}

.sipp-logros-desc-input {
  flex: 1;
  min-width: 160px;
  padding: 7px 12px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-900);
  background: #fff;
  transition: border-color .15s;
}

.sipp-logros-desc-input:focus {
  outline: none;
  border-color: var(--teal-700);
  box-shadow: 0 0 0 3px rgba(0,113,112,.1);
}

.sipp-logros-desc-input::placeholder {
  color: var(--ink-400);
}

/* Mensaje máximo de fotos */
.sipp-logros-foto-max {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-500);
  margin-top: 8px;
}

/* ============================================================
   LOGROS ADMIN — PDF bar + tablas lm-*
   ============================================================ */

.sipp-logros-pdf-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 12px 0 16px;
  border-top: 1px solid var(--ink-150);
  margin-bottom: 16px;
}

.sipp-logros-pdf-bar form {
  margin: 0;
}

.sipp-logros-mes-sel {
  width: auto;
  min-width: 120px;
}

.sipp-logros-pdf-sep {
  width: 1px;
  height: 22px;
  background: var(--ink-200);
  margin: 0 4px;
  flex-shrink: 0;
}

/* Scroll horizontal para tablas densas */
.lm-scroll { overflow-x: auto; }

/* Tabla principal */
.lm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.lm-table thead tr.lm-head-1 th,
.lm-table thead tr.lm-head-2 th {
  background: var(--ink-50) !important;
  color: var(--ink-500) !important;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 7px 6px;
  border-bottom: 1px solid var(--ink-200);
  border-right: 1px solid var(--ink-150);
  white-space: nowrap;
}

.lm-table thead tr.lm-head-1 th:last-child,
.lm-table thead tr.lm-head-2 th:last-child {
  border-right: 0;
}

/* Override legacy first-row dark rule */
.lm-table tbody tr:nth-child(1),
.lm-table tbody tr:nth-child(1) td {
  background: #fff !important;
  color: var(--ink-700) !important;
}
.lm-table tbody tr:nth-child(1) td.lm-ejec-val {
  background: var(--success-bg) !important;
  color: var(--success) !important;
  font-weight: 700;
}

.lm-table td {
  padding: 6px 7px;
  border-bottom: 1px solid var(--ink-150);
  border-right: 1px solid var(--ink-100);
  vertical-align: middle;
  color: var(--ink-700);
}

.lm-table td:last-child { border-right: 0; }
.lm-table tbody tr:last-child td { border-bottom: 0; }
.lm-table tbody tr:hover td { background: var(--ink-50) !important; }

/* Columnas */
.lm-col-tarea      { min-width: 220px; text-align: left; }
.lm-col-tarea-body { font-size: 12px; min-width: 220px; color: var(--ink-900); font-weight: 500; }
.lm-col-resumen    { min-width: 140px; }

/* Headers de mes — sem1 teal suave, sem2 ink */
.lm-mes-hdr   { text-align: center; }
.lm-sem1      { background: var(--teal-50) !important; color: var(--teal-700) !important; }
.lm-sem2      { background: var(--ink-100) !important; color: var(--ink-600) !important; }
.lm-total-hdr { text-align: center; background: var(--ink-100) !important; color: var(--ink-600) !important; }
.lm-ejec-hdr  { background: var(--success-bg) !important; color: var(--success) !important; }
.lm-sub-prog  { text-align: center; font-weight: 500; background: var(--ink-50) !important; color: var(--ink-400) !important; }
.lm-sub-ejec  { text-align: center; font-weight: 700; background: var(--success-bg) !important; color: var(--success) !important; }

/* Celdas de datos */
.lm-cell-prog  { text-align: center; color: var(--ink-400); }
.lm-cell-ejec  { text-align: center; background: var(--ink-50); color: var(--ink-300); }
.lm-cell-pct   { text-align: center; background: var(--ink-50); }
.lm-ejec-val   { color: var(--success) !important; font-weight: 700; background: var(--success-bg) !important; }
.lm-cell-total { text-align: center; font-weight: 600; background: var(--ink-100); color: var(--ink-700); }
.lm-ejec-total { background: var(--success-bg) !important; color: var(--success) !important; }

/* Fila totales — teal como sipp-tbl-total */
.lm-row-totales td    { background: var(--teal-700) !important; color: #fff !important; border-color: var(--teal-700) !important; }
.lm-total-label       { font-weight: 700; }
.lm-total-prog-cell   { font-weight: 600; }
.lm-total-ejec-cell   { font-weight: 600; }
.lm-grand-total       { font-weight: 700; }
.lm-row-ejec-summary td { background: var(--success-bg); }

/* Labels tabla resumen */
.lm-label-row  { font-size: 12px; color: var(--ink-500); font-weight: 500; }
.lm-label-ejec { color: var(--success) !important; font-weight: 700; }
.lm-label-pct  { color: var(--ink-400); font-style: italic; }

/* Colores % avance */
.lm-pct-verde    { color: var(--success); font-weight: 600; }
.lm-pct-amarillo { color: var(--warning); font-weight: 600; }
.lm-pct-rojo     { color: var(--danger);  font-weight: 600; }

/* ============================================================
   TEXTO INPUT — input nativo estilizado (equivalente a sipp-select)
   ============================================================ */
.sipp-text-input {
  width: 100%;
  padding: 9px 12px;
  height: 38px;
  border: 1px solid var(--ink-200);
  border-radius: 9px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink-900);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.sipp-text-input:hover { border-color: var(--ink-300); }
.sipp-text-input:focus {
  outline: none;
  border-color: var(--teal-700);
  box-shadow: 0 0 0 3px rgba(0,113,112,.08);
}
textarea.sipp-text-input { height: auto; }
.sipp-text-input[disabled] {
  background: var(--ink-50);
  color: var(--ink-500);
  cursor: not-allowed;
}
.sipp-text-input[readonly] {
  background: var(--ink-50);
  color: var(--ink-500);
  cursor: default;
  border-color: var(--ink-150);
}
.sipp-text-input[readonly]:hover,
.sipp-text-input[readonly]:focus {
  border-color: var(--ink-200);
  box-shadow: none;
}
.sipp-trim-year { width: 72px; text-align: center; }

/* ============================================================
   CRONOGRAMA — tabla de 12 meses para tareas e items
   ============================================================ */
.sipp-cron-wrap {
  overflow-x: auto;
  border: 1px solid var(--ink-150);
  border-radius: 10px;
  background: #fff;
  margin-top: 16px;
}

.sipp-cron {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
}

.sipp-cron th {
  padding: 7px 6px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--ink-50);
  color: var(--ink-400);
  border-bottom: 2px solid var(--ink-200);
  white-space: nowrap;
}

.sipp-cron th.sipp-cron-on {
  background: var(--teal-50);
  color: var(--teal-700);
  border-bottom-color: var(--teal-300);
}

/* Override legacy first-row dark rule */
.sipp-cron tbody tr:nth-child(1),
.sipp-cron tbody tr:nth-child(1) td { background: #fff !important; color: var(--ink-700) !important; }

.sipp-cron td {
  padding: 6px 4px;
  text-align: center;
  border-right: 1px solid var(--ink-100);
}
.sipp-cron td:last-child { border-right: 0; }

.sipp-cron-num {
  width: 54px;
  text-align: center;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  padding: 5px 4px;
  font-size: 13px;
  color: var(--ink-800);
  background: #fff;
  font-family: inherit;
  -moz-appearance: textfield;
}
.sipp-cron-num::-webkit-inner-spin-button,
.sipp-cron-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sipp-cron-num:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 2px rgba(0,113,112,.1);
}

/* Celda activa en tabla de resumen */
.sipp-cron-cell-on {
  color: var(--teal-700) !important;
  font-weight: 600;
  background: var(--teal-50) !important;
}

/* ============================================================
   TRIMESTRE — tabla de resumen trimestral
   ============================================================ */
.sipp-trim-wrap {
  overflow-x: auto;
  border: 1px solid var(--ink-150);
  border-radius: 10px;
  background: #fff;
  margin-top: 8px;
}

.sipp-trim {
  border-collapse: collapse;
  width: 100%;
}

/* Override legacy first-row dark rule */
.sipp-trim tbody tr:nth-child(1),
.sipp-trim tbody tr:nth-child(1) td { background: #fff !important; color: var(--ink-700) !important; }

.sipp-trim th {
  padding: 7px 16px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--ink-50);
  color: var(--ink-500);
  border-bottom: 1px solid var(--ink-200);
  white-space: nowrap;
}
.sipp-trim th:first-child { text-align: left; min-width: 72px; }

.sipp-trim td {
  padding: 8px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
  border-right: 1px solid var(--ink-100);
}
.sipp-trim td:last-child {
  border-right: 0;
  color: var(--teal-700);
  font-weight: 700;
}

/* ============================================================
   TOGGLE SWITCH — sipp-sw
   ============================================================ */
.sipp-sw {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.sipp-sw-input { display: none; }

.sipp-sw-track {
  width: 36px;
  height: 20px;
  background: var(--ink-200);
  border-radius: 10px;
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}

.sipp-sw-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

.sipp-sw-input:checked + .sipp-sw-track { background: var(--teal-500); }
.sipp-sw-input:checked + .sipp-sw-track .sipp-sw-thumb { transform: translateX(16px); }

.sipp-sw-lbl {
  font-size: 13px;
  color: var(--ink-600);
}

/* Toggle wrapper genérico (items, centrocostos) */
.sipp-toggle-wrapper { padding: 8px 0; }

/* ============================================================
   CENTROCOSTOS — filas inactivas
   ============================================================ */
.sipp-row-inactivo { opacity: .35; display: none; }
.sipp-row-inactivo.sipp-row-inactivo-show { display: table-row; }

/* ============================================================
   ITEMS — cabecera de grupo por tarea
   ============================================================ */
.sipp-items-tarea-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--ink-900);
  border-radius: 10px 10px 0 0;
  margin-top: 16px;
  gap: 12px;
}

.sipp-items-tarea-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.sipp-items-tarea-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sipp-items-tarea-total {
  font-size: 13px;
  font-weight: 700;
  color: var(--teal-300);
}

.sipp-items-tarea-header + .sipp-tbl-wrap {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}

/* ============================================================
   VERSIONADO — resumen de cambios + fila actual
   ============================================================ */
.sipp-version-summary {
  font-size: 12.5px;
  color: var(--ink-700);
  display: block;
}

.sipp-version-fields {
  font-size: 11.5px;
  color: var(--ink-400);
  display: block;
  margin-top: 2px;
}

.sipp-row-current td {
  background: var(--teal-50) !important;
}
.lm-pct-none     { color: var(--ink-200); }

/* ============================================================
   CONSOLIDACIÓN — tabs + radio group
   ============================================================ */
.sipp-con-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--ink-150);
  margin-bottom: 16px;
  gap: 12px;
}

.sipp-con-tabs {
  display: flex;
  gap: 0;
}

.sipp-con-tab {
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-500);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.sipp-con-tab:hover { color: var(--ink-700); }

.sipp-con-tab--active {
  color: var(--teal-700);
  border-bottom-color: var(--teal-700);
}

.sipp-con-tabs-actions { flex-shrink: 0; }

/* Radio group */
.sipp-radio-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 4px;
}

.sipp-radio-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--ink-200);
  border-radius: 20px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ink-600);
  transition: border-color .15s, background .15s, color .15s;
  user-select: none;
}

.sipp-radio-opt input[type="radio"] { display: none; }

.sipp-radio-opt:has(input:checked) {
  border-color: var(--teal-700);
  background: var(--teal-50);
  color: var(--teal-700);
  font-weight: 600;
}

.sipp-radio-opt:hover { border-color: var(--ink-300); }

/* ============================================================
   CADENA ESTRATÉGICA — grid 3 paneles
   ============================================================ */
.sipp-cadena-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.sipp-cadena-panel {
  border: 1px solid var(--ink-150);
  border-radius: 10px;
  background: #fff;
  min-height: 300px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.sipp-cadena-header {
  background: var(--ink-900);
  color: #fff;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.sipp-cadena-header--oei { background: var(--teal-700); }
.sipp-cadena-header--aei { background: var(--ink-700); }

.sipp-cadena-header h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.sipp-cadena-header .sipp-btn-ghost {
  border-color: rgba(255,255,255,.4);
  color: #fff;
  background: rgba(255,255,255,.1);
}

.sipp-cadena-header .sipp-btn-ghost:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.7);
}

.sipp-cadena-table {
  width: 100%;
  border-collapse: collapse;
}

.sipp-cadena-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--ink-100);
  font-size: 13px;
  color: var(--ink-700);
  vertical-align: middle;
}

/* Override legacy first-row dark rule */
.sipp-cadena-table tr:nth-child(1),
.sipp-cadena-table tr:nth-child(1) td {
  background: #fff !important;
  color: var(--ink-700) !important;
}

.sipp-cadena-table tr:hover td { background: var(--ink-50); }
.sipp-cadena-table tr:last-child td { border-bottom: 0; }

.sipp-cadena-actions {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

.sipp-cadena-hint {
  padding: 20px 14px;
  color: var(--ink-400);
  font-size: 13px;
}

/* ============================================================
   CONSOLIDACIÓN — overrides con design system tokens
   ============================================================ */

/* Pills de mes */
.pill-btn {
  background: var(--ink-100) !important;
  border-color: var(--ink-200) !important;
  color: var(--ink-600) !important;
  font-family: var(--font-sans) !important;
  border-radius: 20px !important;
}
.pill-btn:hover {
  background: var(--teal-50) !important;
  border-color: var(--teal-300) !important;
  color: var(--teal-700) !important;
}
.pill-btn--active {
  background: var(--teal-700) !important;
  border-color: var(--teal-700) !important;
  color: #fff !important;
}

/* Cards de actividad */
.consolidacion-card {
  border-color: var(--ink-150) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-xs) !important;
}
.consolidacion-card-title {
  background: var(--ink-900) !important;
  color: #fff !important;
  font-family: var(--font-sans) !important;
}
.card-label-p { background: var(--teal-50) !important; color: var(--teal-700) !important; }
.card-label-g { background: var(--success-bg) !important; color: var(--success) !important; }
.card-label-r { background: var(--warning-bg) !important; color: var(--warning) !important; }

/* Vista segmented buttons */
.consolidacion-vista-toggle {
  border-color: var(--ink-200) !important;
  border-radius: 8px !important;
}
.vista-btn {
  background: var(--ink-50) !important;
  border-right-color: var(--ink-200) !important;
  color: var(--ink-500) !important;
  font-family: var(--font-sans) !important;
  font-size: 12.5px !important;
}
.vista-btn:hover {
  background: var(--teal-50) !important;
  color: var(--teal-700) !important;
}
.vista-btn--active {
  background: var(--ink-900) !important;
  color: #fff !important;
}

/* Toolbar layout */
.consolidacion-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 12px;
  gap: 12px;
}

/* Tabla — cabeceras */
.consolidacion-table .col-periodo {
  background: var(--ink-900) !important;
  color: #fff !important;
}
.consolidacion-table .col-financiero {
  background: var(--teal-700) !important;
  color: #fff !important;
}
.consolidacion-table .col-fisico-header {
  background: var(--ink-600) !important;
  color: #fff !important;
}

/* Tabla — celdas de datos */
.consolidacion-table .col-p { background: var(--teal-50) !important; }
.consolidacion-table .col-g { background: var(--success-bg) !important; }
.consolidacion-table .col-r { background: var(--warning-bg) !important; }
.consolidacion-table .col-f { background: var(--ink-50) !important; }
.consolidacion-table .col-e { background: var(--success-bg) !important; }

/* Tabla — filas de cabecera genérica y actividad */
.consolidacion-table .consolidacion-generica-header td {
  background: var(--ink-900) !important;
  color: #fff !important;
  font-family: var(--font-sans) !important;
}
.consolidacion-table .consolidacion-actividad-header td {
  background: var(--teal-700) !important;
  color: #fff !important;
  font-family: var(--font-sans) !important;
}

/* Gráficas — card override */
.grafico-card {
  border-color: var(--ink-150) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-xs) !important;
}
.grafico-card h3 {
  font-family: var(--font-sans) !important;
  color: var(--ink-500) !important;
  letter-spacing: .04em;
}

/* Separador de sección */
.consolidacion-section-label {
  font-family: var(--font-sans) !important;
  color: var(--ink-500) !important;
}
.consolidacion-section-label::after {
  background: var(--ink-150) !important;
}

/* ============================================================
   Drawer — panel lateral deslizante (formularios editar/crear)
   ============================================================ */

.sipp-scrim {
  position: fixed;
  inset: 0;
  background: rgba(14,24,22,.25);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.sipp-scrim--open {
  opacity: 1;
  pointer-events: auto;
}

.sipp-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  max-width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 32px rgba(14,24,22,.14);
  transform: translateX(100%);
  transition: transform 240ms ease;
}
.sipp-drawer--open {
  transform: translateX(0);
}

.sipp-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 22px 18px;
  border-bottom: 1px solid var(--ink-150);
  flex-shrink: 0;
}
.sipp-drawer-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0;
  line-height: 1.3;
}
.sipp-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink-500);
  margin-left: 12px;
  margin-top: -2px;
}
.sipp-drawer-close:hover {
  background: var(--ink-100);
  color: var(--ink-900);
}
.sipp-drawer-close svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.sipp-drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sipp-drawer-body > * {
  flex-shrink: 0;
}
.sipp-drawer-body .sipp-ph { display: none; }

/* Anula el width legacy de style.css — los hijos son position:fixed y no necesitan espacio */
#sidebar-form { width: 0; overflow: hidden; }

.sipp-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--ink-150);
  background: var(--ink-50);
  flex-shrink: 0;
}

/* ============================================================
   Modal centrado — confirmaciones destructivas
   ============================================================ */

.sipp-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14,24,22,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.sipp-modal-wrap--open {
  opacity: 1;
  pointer-events: auto;
}
.sipp-modal {
  background: #fff;
  border-radius: 14px;
  width: 420px;
  max-width: calc(100vw - 40px);
  box-shadow: var(--shadow-lg);
  padding: 28px 28px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.sipp-modal-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--danger-bg);
  color: var(--danger);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sipp-modal-icon svg {
  width: 22px;
  height: 22px;
  pointer-events: none;
}
.sipp-modal-title {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 6px 0 0;
}
.sipp-modal-msg {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-600);
  margin: 0;
}
.sipp-modal > form {
  width: 100%;
  display: contents;
}
.sipp-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  width: 100%;
  margin-top: 8px;
}

/* ============================================================
   User picker — Centrocostos modal (cc-user-*)
   ============================================================ */

.cc-user-select { position: relative; width: 100%; }
.cc-user-dropdown {
  display: none;
  position: absolute;
  z-index: 9999;
  background: #fff;
  border: 1px solid var(--ink-150);
  border-radius: 8px;
  max-height: 240px;
  overflow-y: auto;
  width: 100%;
  box-shadow: var(--shadow-md);
  top: calc(100% + 4px);
  left: 0;
}
.cc-user-dropdown.open { display: block; }
.cc-user-option {
  padding: 9px 12px;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  border-bottom: 1px solid var(--ink-100);
  font-family: var(--font-sans);
}
.cc-user-option:last-child { border-bottom: none; }
.cc-user-option:hover { background: var(--ink-50); }
.cc-user-option.cc-selected { background: var(--teal-50); }
.cc-user-name { font-size: 13px; font-weight: 500; color: var(--ink-900); }
.cc-user-email { font-size: 11px; color: var(--ink-500); }
.cc-no-user { font-style: italic; color: var(--ink-500); font-weight: 400; }
.cc-badges { display: flex; align-items: center; gap: 5px; margin-left: auto; flex-shrink: 0; }
.cc-badge { font-size: 10px; font-weight: 600; border-radius: 4px; padding: 2px 7px; white-space: nowrap; }
.badge-asignado { background: #fef2f2; color: #b42318; border: 1px solid #fecaca; }
.badge-actual   { background: var(--teal-50); color: var(--teal-700); border: 1px solid var(--teal-200); }
.badge-libre    { background: var(--success-bg); color: var(--success); border: 1px solid #a5d6a7; }
.badge-centro   { background: var(--ink-100); color: var(--ink-600); border: 1px solid var(--ink-150); }
.cc-user-option.cc-hidden { display: none; }

/* ============================================================
   Versionado — drawer content (show + compare)
   ============================================================ */

/* Reset legacy modal-body width/height constraints.
   Especificidad (1,2,0) > legacy (1,1,0) — sin !important en height para no romper flex */
#versionado-compare-modal .sipp-drawer-body.modal-body,
#versionado-show-modal .sipp-drawer-body.modal-body {
  width: 100%;
  height: auto;
  padding: 20px 22px;
}

/* Section headers */
.sipp-drawer-body h4 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 20px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink-150);
}
.sipp-drawer-body h4:first-of-type { margin-top: 0; }

/* Table wrapper — scroll horizontal propio para tablas muy anchas (ítems con 12 meses) */
.sipp-drawer-body .table-container {
  border: 1px solid var(--ink-150);
  border-radius: 10px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-xs, 0 1px 3px rgba(14,24,22,.06));
  overflow-x: auto;
}

/* Tables */
.sipp-drawer-body table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 12.5px;
  background: #fff;
}
.sipp-drawer-body table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-500) !important;
  background: var(--ink-50) !important;
  border-bottom: 1px solid var(--ink-200) !important;
  padding: 9px 12px !important;
  white-space: nowrap;
}
.sipp-drawer-body table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--ink-100);
  color: var(--ink-700);
  vertical-align: middle;
}
.sipp-drawer-body table tbody tr:last-child td { border-bottom: none; }
.sipp-drawer-body table tbody tr:hover td { background: var(--ink-50); }

.sipp-drawer-body .sipp-cron th.sipp-cron-on {
  background: var(--teal-50) !important;
  color: var(--teal-700) !important;
  border-bottom-color: var(--teal-300) !important;
}

/* Sub-header rows (compare: tarea group) */
.sipp-drawer-body table tr.sub-header th {
  background: var(--teal-50) !important;
  color: var(--teal-700) !important;
}
/* Group header with colspan (items nested) */
.sipp-drawer-body table tr th[colspan] {
  background: var(--ink-900) !important;
  color: #fff !important;
  font-size: 11px;
}

/* Row states — compare modal */
.sipp-drawer-body table tbody tr.added td,
.sipp-drawer-body table tbody tr.row-added td {
  background: var(--success-bg) !important;
  border-top: 1px solid #b2f2bb !important;
  border-bottom: 1px solid #b2f2bb !important;
  color: var(--ink-900) !important;
}
.sipp-drawer-body table tbody tr.modified td,
.sipp-drawer-body table tbody tr.row-updated td {
  background: var(--warning-bg) !important;
  border-top: 1px solid #ffec99 !important;
  border-bottom: 1px solid #ffec99 !important;
  color: var(--ink-900) !important;
}
.sipp-drawer-body table tbody tr.deleted td,
.sipp-drawer-body table tbody tr.row-deleted td {
  background: var(--danger-bg) !important;
  border-top: 1px solid #ffc9c9 !important;
  border-bottom: 1px solid #ffc9c9 !important;
  color: var(--ink-900) !important;
}

/* Badge spans (Agregado / Modificado / Eliminado) */
.sipp-drawer-body table tbody tr span {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sipp-drawer-body table tbody tr.added span { background: var(--success); color: #fff; }
.sipp-drawer-body table tbody tr.modified span { background: var(--warning); color: #fff; }
.sipp-drawer-body table tbody tr.deleted span { background: var(--danger); color: #fff; }

/* Compare modal — filter bar */
.sipp-versionado-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--ink-50);
  border: 1px solid var(--ink-150);
  border-radius: 10px;
  margin-bottom: 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-600);
}
.sipp-versionado-filter select { min-width: 120px; }

/* Compare modal — summary boxes */
.sipp-drawer-body .summary-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.sipp-drawer-body .summary-box {
  padding: 10px 14px;
  border-radius: 8px;
  min-width: 130px;
  font-size: 12px;
  font-family: var(--font-sans);
  border-left-width: 3px;
  border-left-style: solid;
}
.sipp-drawer-body .summary-box strong { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sipp-drawer-body .summary-box ul { margin: 0; padding-left: 14px; }
.sipp-drawer-body .summary-box li { font-size: 11.5px; }
.sipp-drawer-body .summary-box.added  { background: var(--success-bg); border-color: var(--success);  color: var(--success); }
.sipp-drawer-body .summary-box.deleted { background: var(--danger-bg);  border-color: var(--danger);   color: var(--danger); }
.sipp-drawer-body .summary-box.updated { background: var(--warning-bg); border-color: var(--warning);  color: var(--warning); }
.sipp-drawer-body .summary-box.fields  { background: var(--ink-50);     border-color: var(--ink-300);  color: var(--ink-600); }

/* Compare modal — totals */
.sipp-drawer-body .summary-totals {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.sipp-drawer-body .summary-totals p {
  margin: 0;
  padding: 10px 14px;
  background: var(--ink-50);
  border: 1px solid var(--ink-150);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  flex: 1;
  white-space: nowrap;
}
.sipp-drawer-body .summary-totals .positive { color: var(--success); font-weight: 700; }
.sipp-drawer-body .summary-totals .negative { color: var(--danger);  font-weight: 700; }

/* Modal centrado — variante ancha (validación POI) */
.sipp-modal--lg {
  width: 520px;
}

/* Modal centrado — variante warning */
.sipp-modal-icon--warning {
  background: var(--warning-bg);
  color: var(--warning);
}

/* Info box dentro del modal (validación) */
.sipp-modal-infobox {
  width: 100%;
  background: var(--success-bg);
  border: 1px solid #BAE6CC;
  border-radius: 10px;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--success);
  align-self: stretch;
}
.sipp-modal-infobox p {
  margin: 0 0 6px;
  font-weight: 700;
}
.sipp-modal-infobox ul {
  margin: 0;
  padding-left: 18px;
}
.sipp-modal-infobox li {
  margin-bottom: 3px;
  line-height: 1.5;
}

/* Drawer — variante media (formularios con tabla de meses) */
.sipp-drawer--md {
  width: min(1000px, 96vw);
}
/* Drawer — variante ancha (versionado) */
.sipp-drawer--wide {
  width: min(940px, 96vw);
}

/* ============================================================
   SIDEBAR — COLAPSABLE
   ============================================================ */

/* Botón toggle */
.sipp-sidebar-toggle {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  color: var(--ink-400);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .1s, color .1s;
  flex-shrink: 0;
}
.sipp-sidebar-toggle:hover {
  background: var(--ink-100);
  color: var(--ink-700);
}

/* Iconos: el de colapsar se muestra por defecto, el de expandir solo en colapsado */
.sipp-sidebar-toggle .icon-expand { display: none; }
.sipp-sidebar-toggle .icon-collapse { display: block; }

/* Estado colapsado */
body.sipp-sidebar-collapsed .sipp-sidebar { width: 64px; }

body.sipp-sidebar-collapsed .sipp-sidebar-brand { justify-content: center; }
body.sipp-sidebar-collapsed .sipp-wordmark-logo { display: none; }
body.sipp-sidebar-collapsed .sipp-sidebar-brand > div { display: none; }
body.sipp-sidebar-collapsed .sipp-sidebar-toggle { margin-left: 0; }
body.sipp-sidebar-collapsed .sipp-sidebar-toggle .icon-expand { display: block; }
body.sipp-sidebar-collapsed .sipp-sidebar-toggle .icon-collapse { display: none; }

body.sipp-sidebar-collapsed .sipp-sidebar-search { display: none; }

body.sipp-sidebar-collapsed .sipp-nav-group { margin-bottom: 2px; }
body.sipp-sidebar-collapsed .sipp-nav-group-label { display: none; }
body.sipp-sidebar-collapsed .sipp-nav-item {
  justify-content: center;
  padding: 9px 0;
  gap: 0;
}
body.sipp-sidebar-collapsed .sipp-nav-label { display: none; }

body.sipp-sidebar-collapsed .sipp-sidebar-year-card { display: none; }

body.sipp-sidebar-collapsed .sipp-sidebar-footer { padding: 8px 0 14px; }
body.sipp-sidebar-collapsed .sipp-sidebar-config {
  justify-content: center;
  padding: 9px 0;
  gap: 0;
}
body.sipp-sidebar-collapsed .sipp-sidebar-config-label { display: none; }

body.sipp-sidebar-collapsed .sipp-sidebar-user {
  justify-content: center;
  padding: 8px 0;
  gap: 0;
}
body.sipp-sidebar-collapsed .sipp-user-info { display: none; }
body.sipp-sidebar-collapsed .sipp-logout-btn { display: none; }

/* ============================================================
   FONT SIZE CONTROLS — A- / A+
   ============================================================ */

.sipp-font-controls {
  display: flex;
  align-items: center;
  gap: 3px;
  padding-right: 12px;
  border-right: 1px solid var(--ink-150);
  margin-right: 4px;
}

.sipp-font-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 32px;
  padding: 0 7px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink-600);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .1s, border-color .1s, color .1s;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
}
.sipp-font-btn:hover:not(:disabled) {
  background: var(--ink-50);
  border-color: var(--ink-300);
  color: var(--ink-900);
}
.sipp-font-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.sipp-font-btn.active {
  border-color: var(--teal-300);
  color: var(--teal-700);
  background: var(--teal-50);
}

/* ── Escala grande (+2px en elementos clave) ──────────────── */
body.sipp-fs-large .sipp-nav-item         { font-size: 15.5px; }
body.sipp-fs-large .sipp-nav-item--sub    { font-size: 14px; }
body.sipp-fs-large .sipp-nav-group-label  { font-size: 12px; }
body.sipp-fs-large .sipp-search-box span  { font-size: 14px; }
body.sipp-fs-large .sipp-sidebar-config   { font-size: 15px; }
body.sipp-fs-large .sipp-user-name        { font-size: 14.5px; }
body.sipp-fs-large .sipp-user-role        { font-size: 12.5px; }
body.sipp-fs-large .sipp-page-eyebrow     { font-size: 19px; }
body.sipp-fs-large .sipp-btn              { font-size: 15px; }
body.sipp-fs-large .sipp-btn-sm           { font-size: 14px; }
body.sipp-fs-large .sipp-field-label      { font-size: 14.5px; }
body.sipp-fs-large .sipp-input-field      { font-size: 15.5px; }
body.sipp-fs-large .sipp-content          { font-size: 15px; }
body.sipp-fs-large .sipp-content td,
body.sipp-fs-large .sipp-content th,
body.sipp-fs-large .sipp-content label,
body.sipp-fs-large .sipp-content input:not([type=checkbox]):not([type=radio]),
body.sipp-fs-large .sipp-content select,
body.sipp-fs-large .sipp-content textarea,
body.sipp-fs-large .sipp-content button:not([class*=sipp-btn]) { font-size: 15px; }

/* ── Escala extra (+4px en elementos clave) ───────────────── */
body.sipp-fs-xlarge .sipp-nav-item        { font-size: 17.5px; }
body.sipp-fs-xlarge .sipp-nav-item--sub   { font-size: 16px; }
body.sipp-fs-xlarge .sipp-nav-group-label { font-size: 14px; }
body.sipp-fs-xlarge .sipp-search-box span { font-size: 16px; }
body.sipp-fs-xlarge .sipp-sidebar-config  { font-size: 17px; }
body.sipp-fs-xlarge .sipp-user-name       { font-size: 16.5px; }
body.sipp-fs-xlarge .sipp-user-role       { font-size: 14.5px; }
body.sipp-fs-xlarge .sipp-page-eyebrow    { font-size: 21px; }
body.sipp-fs-xlarge .sipp-btn             { font-size: 17px; }
body.sipp-fs-xlarge .sipp-btn-sm          { font-size: 16px; }
body.sipp-fs-xlarge .sipp-field-label     { font-size: 16.5px; }
body.sipp-fs-xlarge .sipp-input-field     { font-size: 17.5px; }
body.sipp-fs-xlarge .sipp-content         { font-size: 17px; }
body.sipp-fs-xlarge .sipp-content td,
body.sipp-fs-xlarge .sipp-content th,
body.sipp-fs-xlarge .sipp-content label,
body.sipp-fs-xlarge .sipp-content input:not([type=checkbox]):not([type=radio]),
body.sipp-fs-xlarge .sipp-content select,
body.sipp-fs-xlarge .sipp-content textarea,
body.sipp-fs-xlarge .sipp-content button:not([class*=sipp-btn]) { font-size: 17px; }

/* ── KPI cards — escala grande ────────────────────────────── */
body.sipp-fs-large .sipp-kpi-value        { font-size: 27px; }
body.sipp-fs-large .sipp-kpi-label        { font-size: 12.5px; }
body.sipp-fs-large .sipp-kpi-sub          { font-size: 13px; }
body.sipp-fs-large .sipp-db-activ-amount  { font-size: 17px; }
body.sipp-fs-large .sipp-db-activ-name    { font-size: 14px; }

/* ── KPI cards — escala extra ─────────────────────────────── */
body.sipp-fs-xlarge .sipp-kpi-value       { font-size: 30px; }
body.sipp-fs-xlarge .sipp-kpi-label       { font-size: 14px; }
body.sipp-fs-xlarge .sipp-kpi-sub         { font-size: 14.5px; }
body.sipp-fs-xlarge .sipp-db-activ-amount { font-size: 19px; }
body.sipp-fs-xlarge .sipp-db-activ-name   { font-size: 16px; }

/* ── Sidebar colapsado: overflow visible para tooltips ─────── */
body.sipp-sidebar-collapsed .sipp-sidebar {
  overflow: visible;
  position: relative;
  z-index: 10;
}
body.sipp-sidebar-collapsed .sipp-sidebar-nav { overflow: visible; }

/* ── Tooltips del nav en modo colapsado ────────────────────── */
body.sipp-sidebar-collapsed .sipp-nav-item { position: relative; }

body.sipp-sidebar-collapsed .sipp-nav-item::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink-900);
  color: #fff;
  padding: 5px 12px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-sans);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
  z-index: 200;
}
body.sipp-sidebar-collapsed .sipp-nav-item:hover::after { opacity: 1; }

/* ── Popup de usuario / cerrar sesión ─────────────────────── */
.sipp-user-popup {
  position: fixed;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  min-width: 200px;
  z-index: 500;
  display: none;
}
.sipp-user-popup.open { display: block; }

.sipp-user-popup-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.3;
}
.sipp-user-popup-role {
  font-size: 11px;
  color: var(--ink-500);
  margin-top: 2px;
  margin-bottom: 10px;
}
.sipp-user-popup-sep {
  border: none;
  border-top: 1px solid var(--ink-100);
  margin: 0 0 8px;
}
.sipp-user-popup-logout {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--danger);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .1s;
  text-align: left;
}
.sipp-user-popup-logout:hover { background: #fef2f2; }

/* Avatar clickable en modo colapsado */
body.sipp-sidebar-collapsed .sipp-avatar { cursor: pointer; }

/* ============================================================
   DARK MODE — Transiciones y overrides para elementos con
   colores hardcodeados (los tokens se aplican en tokens.css)
   ============================================================ */

/* Transiciones suaves en los elementos principales */
.sipp-sidebar, .sipp-topbar, .sipp-app, .sipp-content,
.sipp-drawer, .sipp-modal, .sipp-user-popup,
.sipp-ph, .sipp-kpi-card, .sipp-db-hero, .sipp-db-card,
.sipp-db-act-header, .sipp-db-chart-card, .sipp-db-info-row,
.sipp-tbl-wrap, .sipp-trim-wrap, .sipp-input, .sipp-text-input,
.sipp-font-btn, .sipp-btn-secondary, .sipp-btn-icon,
.sipp-select, .ts-wrapper, .ts-dropdown, .cc-user-dropdown,
.sipp-planning-banner, .sipp-snapshot-banner,
.sipp-cadena-panel, .sipp-cadena-header,
.consolidacion-card, .grafico-card, .consolidacion-card-title,
.logros-table tbody tr td, .lm-table tbody tr td,
.lm-table thead th {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

/* Íconos del toggle dark mode — CSS driven para evitar FOUC */
#sipp-dark-icon-sun { display: none; }
body.sipp-dark-mode #sipp-dark-icon-moon { display: none; }
body.sipp-dark-mode #sipp-dark-icon-sun  { display: block; }

/* style.css define table { background: white } y tr:nth-child(2n) { background-color: rgb(246,246,246) } globalmente — anularlos para dark mode */
body.sipp-dark-mode table {
  background: transparent;
}
body.sipp-dark-mode tr:nth-child(2n) {
  background-color: transparent !important;
}

/* Card de título de módulo (breadcrumb + título) */
body.sipp-dark-mode .sipp-ph {
  background: var(--ink-200);
  border-color: var(--ink-300);
}

/* Input de texto nativo (sipp-text-input) */
body.sipp-dark-mode .sipp-text-input {
  background: var(--ink-200);
  border-color: var(--ink-300);
  color: var(--ink-900);
}
body.sipp-dark-mode .sipp-text-input:hover {
  border-color: var(--ink-400);
}
body.sipp-dark-mode .sipp-text-input[disabled],
body.sipp-dark-mode .sipp-text-input[readonly] {
  background: var(--ink-150);
  color: var(--ink-500);
  border-color: var(--ink-200);
}

/* Botones secundarios e ícono */
body.sipp-dark-mode .sipp-btn-secondary {
  background: var(--ink-200);
  border-color: var(--ink-300);
}
body.sipp-dark-mode .sipp-btn-secondary:hover {
  background: var(--ink-300);
  border-color: var(--ink-400);
}
body.sipp-dark-mode .sipp-btn-icon {
  background: var(--ink-200);
  border-color: var(--ink-300);
  color: var(--ink-600);
}
body.sipp-dark-mode .sipp-btn-icon:hover {
  background: var(--ink-300);
  border-color: var(--ink-400);
  color: var(--ink-900);
}

/* Tabla de logros (style.css — hardcoded) */
body.sipp-dark-mode .logros-table tbody tr td {
  background: var(--ink-200) !important;
  color: var(--ink-700) !important;
  border-bottom-color: var(--ink-300) !important;
}
body.sipp-dark-mode .logros-table tbody tr:nth-child(even) td {
  background: var(--ink-150) !important;
}
body.sipp-dark-mode .logros-table tbody tr:hover td {
  background: var(--ink-300) !important;
  color: var(--ink-900) !important;
}
body.sipp-dark-mode .logros-table input[type="number"] {
  background: var(--ink-200);
  color: var(--ink-900);
  border-color: var(--ink-300);
}

/* Sidebar */
body.sipp-dark-mode .sipp-sidebar {
  background: var(--ink-150);
}
body.sipp-dark-mode .sipp-search-box kbd {
  background: var(--ink-200);
  border-color: var(--ink-300);
}

/* Topbar */
body.sipp-dark-mode .sipp-topbar {
  background: var(--ink-150);
}

/* Botones */
body.sipp-dark-mode .sipp-font-btn {
  background: var(--ink-200);
  border-color: var(--ink-300);
}
body.sipp-dark-mode .sipp-font-btn:hover:not(:disabled) {
  background: var(--ink-300);
  border-color: var(--ink-400);
}
body.sipp-dark-mode .sipp-font-btn.active {
  background: var(--teal-100);
  border-color: var(--teal-200);
  color: var(--teal-700);
}
body.sipp-dark-mode .sipp-btn-outline {
  background: var(--ink-200);
  border-color: var(--ink-300);
}
body.sipp-dark-mode .sipp-btn-outline:hover {
  background: var(--ink-300);
  border-color: var(--ink-400);
}
body.sipp-dark-mode .sipp-btn-primary {
  background: var(--teal-700);
  color: #fff;
}
body.sipp-dark-mode .sipp-btn-primary:hover {
  background: var(--teal-800);
}

/* Inputs */
body.sipp-dark-mode .sipp-input {
  background: var(--ink-200);
  border-color: var(--ink-300);
}

/* Tabla */
body.sipp-dark-mode .sipp-tbl-wrap,
body.sipp-dark-mode .sipp-trim-wrap {
  background: var(--ink-200);
}
body.sipp-dark-mode .sipp-tbl tbody td {
  background: var(--ink-200);
}
body.sipp-dark-mode .sipp-tbl tbody tr:hover td {
  background: var(--ink-300) !important;
}
body.sipp-dark-mode .sipp-cron tbody tr:nth-child(1) td,
body.sipp-dark-mode .sipp-trim tbody tr:nth-child(1) td {
  background: var(--ink-200) !important;
  color: var(--ink-700) !important;
}

/* Select nativo */
body.sipp-dark-mode .sipp-select {
  background-color: var(--ink-200);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A0ADAB' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  border-color: var(--ink-300);
}
body.sipp-dark-mode .sipp-select:hover {
  border-color: var(--ink-400);
}

/* Cards y superficies de contenido */
body.sipp-dark-mode .sipp-kpi-card,
body.sipp-dark-mode .sipp-db-hero,
body.sipp-dark-mode .sipp-db-card,
body.sipp-dark-mode .sipp-db-act-header,
body.sipp-dark-mode .sipp-db-chart-card,
body.sipp-dark-mode .sipp-db-info-row {
  background: var(--ink-200);
  border-color: var(--ink-300);
}

/* Drawer y Modal */
body.sipp-dark-mode .sipp-drawer {
  background: var(--ink-150);
}
body.sipp-dark-mode .sipp-modal {
  background: var(--ink-150);
}
body.sipp-dark-mode .sipp-drawer-footer {
  background: var(--ink-100);
}

/* Popup de usuario */
body.sipp-dark-mode .sipp-user-popup {
  background: var(--ink-150);
  border-color: var(--ink-300);
}
body.sipp-dark-mode .sipp-user-popup-logout:hover {
  background: rgba(248,113,113,.10);
}

/* Tooltip del nav colapsado */
body.sipp-dark-mode.sipp-sidebar-collapsed .sipp-nav-item::after {
  background: var(--ink-200);
  color: var(--ink-900);
  border: 1px solid var(--ink-300);
}

/* Tom Select */
body.sipp-dark-mode .ts-wrapper {
  background: var(--ink-200);
  border-color: var(--ink-300) !important;
}
body.sipp-dark-mode .ts-wrapper:hover {
  border-color: var(--ink-400) !important;
}
body.sipp-dark-mode .ts-wrapper.focus {
  border-color: var(--teal-700) !important;
}
body.sipp-dark-mode .ts-dropdown {
  background: var(--ink-200);
  border-color: var(--ink-300) !important;
}
body.sipp-dark-mode .ts-dropdown .option {
  color: var(--ink-700) !important;
}
body.sipp-dark-mode .ts-dropdown .option:hover,
body.sipp-dark-mode .ts-dropdown .option.active {
  background: var(--teal-100) !important;
  color: var(--teal-700) !important;
}
body.sipp-dark-mode .ts-wrapper.multi .ts-control .item {
  background: var(--teal-100) !important;
  border-color: var(--teal-200) !important;
}

/* cc-user-dropdown */
body.sipp-dark-mode .cc-user-dropdown {
  background: var(--ink-200);
  border-color: var(--ink-300);
}
body.sipp-dark-mode .cc-user-option:hover {
  background: var(--ink-300);
}
body.sipp-dark-mode .cc-user-option.cc-selected {
  background: var(--teal-100);
}

/* Logros/Avances — lm-table (primera fila hardcoded #fff) */
body.sipp-dark-mode .lm-table tbody tr:nth-child(1),
body.sipp-dark-mode .lm-table tbody tr:nth-child(1) td {
  background: var(--ink-200) !important;
  color: var(--ink-700) !important;
}
body.sipp-dark-mode .lm-table tbody tr:hover td {
  background: var(--ink-300) !important;
}
body.sipp-dark-mode .lm-table thead tr.lm-head-1 th,
body.sipp-dark-mode .lm-table thead tr.lm-head-2 th {
  background: var(--ink-150) !important;
  border-bottom-color: var(--ink-300) !important;
}

/* Cadena Estratégica */
body.sipp-dark-mode .sipp-cadena-panel {
  background: var(--ink-200);
  border-color: var(--ink-300);
}
body.sipp-dark-mode .sipp-cadena-header {
  background: var(--ink-300);
}
body.sipp-dark-mode .sipp-cadena-header--oei {
  background: var(--teal-200);
}
body.sipp-dark-mode .sipp-cadena-header--aei {
  background: var(--ink-400);
}
body.sipp-dark-mode .sipp-cadena-table tr:nth-child(1),
body.sipp-dark-mode .sipp-cadena-table tr:nth-child(1) td {
  background: var(--ink-200) !important;
  color: var(--ink-700) !important;
}
body.sipp-dark-mode .sipp-cadena-table tr:hover td {
  background: var(--ink-300);
}
body.sipp-dark-mode .sipp-cadena-table td {
  border-bottom-color: var(--ink-300);
}

/* Consolidación — Bootstrap card base y cabeceras con ink-900 */
body.sipp-dark-mode .consolidacion-card {
  background: var(--ink-200) !important;
  border-color: var(--ink-300) !important;
}
body.sipp-dark-mode .grafico-card {
  background: var(--ink-200) !important;
  border-color: var(--ink-300) !important;
}
body.sipp-dark-mode .consolidacion-card-title {
  background: var(--ink-300) !important;
}
body.sipp-dark-mode .vista-btn {
  background: var(--ink-200) !important;
  border-right-color: var(--ink-300) !important;
}
body.sipp-dark-mode .vista-btn:hover {
  background: var(--teal-100) !important;
  color: var(--teal-700) !important;
}
body.sipp-dark-mode .vista-btn--active {
  background: var(--ink-400) !important;
  color: #fff !important;
}
body.sipp-dark-mode .consolidacion-table .col-periodo {
  background: var(--ink-400) !important;
  color: #fff !important;
}
body.sipp-dark-mode .consolidacion-table .col-financiero {
  background: var(--teal-200) !important;
  color: #fff !important;
}
body.sipp-dark-mode .consolidacion-table .col-fisico-header {
  background: var(--ink-300) !important;
  color: var(--ink-800) !important;
}
body.sipp-dark-mode .consolidacion-table .consolidacion-generica-header td {
  background: var(--ink-400) !important;
  color: #fff !important;
}
body.sipp-dark-mode .consolidacion-table .consolidacion-actividad-header td {
  background: var(--teal-200) !important;
  color: #fff !important;
}
body.sipp-dark-mode .consolidacion-table .col-p { background: rgba(94, 203, 198, .12) !important; }
body.sipp-dark-mode .consolidacion-table .col-g { background: rgba(52, 211, 153, .18) !important; }
body.sipp-dark-mode .consolidacion-table .col-r { background: rgba(252, 211, 77, .14) !important; }
body.sipp-dark-mode .consolidacion-table .col-f { background: rgba(255, 255, 255, .04) !important; }
body.sipp-dark-mode .consolidacion-table .col-e { background: rgba(52, 211, 153, .18) !important; }

/* Cuadro de Necesidades — BUG-07: encabezado de tarea ilegible */
body.sipp-dark-mode .sipp-items-tarea-header {
  background: var(--ink-300);
}
/* Cuadro de Necesidades — encabezado de actividad usa var(--ink-900) que en dark mode es muy claro */
body.sipp-dark-mode .sipp-needs-actividad {
  background: var(--ink-300);
}

/* Consolidación — BUG-08: texto negro sobre fondo oscuro en celdas de datos */
body.sipp-dark-mode .consolidacion-table td {
  color: var(--ink-800);
}

/* Planning banner — BUG-01: colores hardcodeados */
body.sipp-dark-mode .sipp-planning-banner {
  background: var(--warning-bg);
  border-bottom-color: rgba(252,211,77,.25);
  color: var(--warning);
}
body.sipp-dark-mode .sipp-planning-banner svg {
  color: var(--warning);
}
body.sipp-dark-mode .sipp-planning-banner-btn {
  border-color: var(--warning);
  color: var(--warning);
}
body.sipp-dark-mode .sipp-planning-banner-btn:hover {
  background: var(--warning-bg);
}

/* Snapshot banner — BUG-05: border hardcodeado */
body.sipp-dark-mode .sipp-snapshot-banner {
  border-bottom-color: rgba(252,211,77,.2);
}

/* Scrollbar — BUG-06: contraste bajo en dark mode */
body.sipp-dark-mode .sipp-content {
  scrollbar-color: var(--ink-400) transparent;
}
body.sipp-dark-mode .sipp-content::-webkit-scrollbar-thumb {
  background: var(--ink-400);
}

/* Impresión — nunca aplicar dark mode en print */
@media print {
  body.sipp-dark-mode,
  body.sipp-dark-mode * {
    background: #fff !important;
    color: #000 !important;
    border-color: #ccc !important;
  }
}