/* ═══════════════════════════════════════════════════════════════════════════
   GPDS · CAPA DE SUPERFICIE — v1.2.0-alpha132.1
   ───────────────────────────────────────────────────────────────────────────
   Rediseño del sistema de tarjetas de TODO el panel.

   Por qué existe este archivo y no se reescribieron los componentes:
   el bundle usa estilos en línea de React. Reescribir 40 componentes para
   cambiar su piel sería un big-bang rewrite — prohibido, y con razón. Esta
   capa hace el trabajo desde CSS, acotada a #siade-portal-app, sin tocar
   wp-admin, el tema, ni la lógica de ningún componente.

   Tres decisiones de diseño, y por qué:

   1. FUERA LAS BARRAS DE ACENTO LATERALES.
      Una barra de 4-5 px de color en el costado es el tic visual de una
      plantilla de Bootstrap o de una diapositiva. Se conserva el borde
      capilar de 1 px que la tarjeta ya tenía en los otros tres lados —
      ninguna queda flotando.

   2. AGRUPAR, NO ANIDAR.
      Una lista es UNA superficie con divisiones capilares, no una tarjeta
      por fila. Es el patrón de las apps del sistema (iOS/Android), y es lo
      que separa "app nativa" de "presentación".

   3. EL COLOR ES SEÑAL, NO CAMPO.
      Un punto de 7 px o una cifra teñida. No un bloque pastel de fondo.

   Todo con `!important` porque compite contra estilos en línea de React.
   La verificación mide el estilo CALCULADO, no la hoja.
   ═══════════════════════════════════════════════════════════════════════════ */

#siade-portal-app {

  /* ── Tipografía ────────────────────────────────────────────────────────
     Altivo se declaraba 100 veces en el bundle pero NUNCA se sirvió en
     /panel/ (los .woff2 están en el tema, nadie los encola). Las 100
     declaraciones caían por accidente a system-ui.

     En vez de seguir invocando una fuente fantasma, se elige a propósito la
     fuente del sistema — que en cada plataforma ES la nativa:
        Windows 11 → Segoe UI Variable      Apple → SF Pro
        Windows 10 → Segoe UI               Android → Roboto
     Eso es exactamente la sensación nativa que se pidió, y no cuesta ni un
     kilobyte ni una petición de red.

     Cuando la licencia de Altivo se confirme: se antepone aquí y en ningún
     otro lugar. Una línea. */
  --gpds-ui: "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gpds-display: "Segoe UI Variable Display", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ── Superficie: UNA elevación, no tres ── */
  --gpds-hair: color-mix(in srgb, var(--line) 88%, transparent);
  --gpds-elev: 0 1px 1px rgba(11, 35, 69, .035), 0 10px 26px -20px rgba(11, 35, 69, .28);
  --gpds-elev-alta: 0 1px 2px rgba(11, 35, 69, .05), 0 18px 40px -26px rgba(11, 35, 69, .40);
  --gpds-r-lg: 14px;
  --gpds-r-md: 10px;
  --gpds-r-sm: 7px;

  font-family: var(--gpds-ui);
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
}

/* ══════════ 1. Fuera las barras de acento laterales, en todo el panel ══════════
   Se degradan de 3-5 px de color a la misma línea capilar de los otros tres
   lados. La tarjeta queda con un borde uniforme, que es como se ve un sistema
   y no una alerta de Bootstrap. */
#siade-portal-app [style*="border-left: 3px solid"],
#siade-portal-app [style*="border-left: 4px solid"],
#siade-portal-app [style*="border-left: 5px solid"],
#siade-portal-app [style*="border-left: 6px solid"],
#siade-portal-app [style*="border-left:3px solid"],
#siade-portal-app [style*="border-left:4px solid"],
#siade-portal-app [style*="border-left:5px solid"],
#siade-portal-app [style*="border-left:6px solid"] {
  border-left-width: 1px !important;
  border-left-color: var(--line) !important;
}

/* Lo mismo para las barras superiores, por si alguna quedó. */
#siade-portal-app [style*="border-top: 3px solid"],
#siade-portal-app [style*="border-top: 4px solid"],
#siade-portal-app [style*="border-top: 5px solid"],
#siade-portal-app [style*="border-top:3px solid"],
#siade-portal-app [style*="border-top:4px solid"],
#siade-portal-app [style*="border-top:5px solid"] {
  border-top-width: 1px !important;
  border-top-color: var(--line) !important;
}

/* ══════════ 2. Elevación coherente ══════════
   El sistema tenía sombras de tres capas apiladas. Una sola, muy sutil. */
#siade-portal-app .siade-kpis > div,
#siade-portal-app .siade-kpis > button,
#siade-portal-app .siade-atajos button,
#siade-portal-app .siade-inst-quick button {
  background: var(--card) !important;
  box-shadow: var(--gpds-elev) !important;
  border-color: var(--gpds-hair) !important;
}
#siade-portal-app .siade-kpis > div:hover,
#siade-portal-app .siade-kpis > button:hover,
#siade-portal-app .siade-atajos button:hover,
#siade-portal-app .siade-inst-quick button:hover {
  box-shadow: var(--gpds-elev-alta) !important;
  transform: translateY(-1px);
}

/* ══════════ 3. Iconografía: trazo fino, sin fondo teñido ══════════
   2 px de trazo a 18 px de tamaño se lee como clip-art. 1,75 px se lee como
   un sistema operativo. */
#siade-portal-app .siade-nav-icon,
#siade-portal-app svg[stroke="currentColor"] {
  stroke-width: 1.75 !important;
}

/* ══════════ 4. Cifras: numerales tabulares ══════════
   Los números de un tablero son datos, no prosa. Deben alinearse en columna
   y no bailar al cambiar de valor. */
#siade-portal-app .siade-mon-cifra,
#siade-portal-app .siade-mon-pulso-n,
#siade-portal-app .siade-mon-val,
#siade-portal-app .siade-mon-mod-n {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.02em;
}

/* ══════════ 5. Tema oscuro: coherencia de la capa ══════════ */
#siade-portal-app[data-theme="dark"] {
  --gpds-hair: color-mix(in srgb, var(--line) 70%, transparent);
  --gpds-elev: 0 1px 1px rgba(0, 0, 0, .30), 0 10px 26px -20px rgba(0, 0, 0, .70);
  --gpds-elev-alta: 0 1px 2px rgba(0, 0, 0, .40), 0 18px 40px -26px rgba(0, 0, 0, .85);
}

/* ══════════ 6. Que `position:sticky` funcione de verdad ══════════
   El tema declara `overflow-x:hidden` en `.siade-home`. Un ancestro con
   `overflow` distinto de `visible` crea un contenedor de scroll y ROMPE
   `position:sticky` en sus descendientes — por eso la barra de vistas se
   iba al desplazar. `overflow:clip` recorta igual, pero NO crea contenedor
   de scroll: sticky vuelve a funcionar. Acotado a la rama del panel. */
.siade-home:has(#siade-portal-app),
.siade-portal-shell,
.siade-contenido,
.siade-contenido main {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* ══════════ 7. Llamada a la acción dentro de un aviso ══════════ */
#siade-portal-app .siade-mon-aviso-cta {
  flex: none; align-self: center;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 36px; padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--mon-at) 42%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--mon-at) 12%, transparent);
  color: var(--mon-at);
  font: 800 11.6px/1 var(--gpds-ui);
  cursor: pointer; white-space: nowrap;
}
#siade-portal-app .siade-mon-aviso-cta:hover { background: color-mix(in srgb, var(--mon-at) 20%, transparent); }
#siade-portal-app .siade-mon-aviso-cta:focus-visible { outline: 2px solid var(--mon-at); outline-offset: 2px; }

/* ══════════ 8. Observatorio: tarjetas compactas ══════════
   Cada tarjeta de plataforma externa ocupaba media pantalla. Se compacta sin
   tocar el componente: menos relleno, descripcion a dos lineas, titulo menor. */
#siade-portal-app [style*="border-top: 3px solid"] {
  padding: 12px 14px !important;
  box-shadow: var(--gpds-elev) !important;
}
#siade-portal-app [style*="border-top: 3px solid"] p {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11.8px !important; line-height: 1.45 !important;
  margin: 6px 0 8px !important;
}
#siade-portal-app [style*="border-top: 3px solid"] h3,
#siade-portal-app [style*="border-top: 3px solid"] h4 {
  font-size: 14px !important; line-height: 1.25 !important; margin: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10 · EL MODAL — hoja inferior en móvil  (alpha133.0)
   ───────────────────────────────────────────────────────────────────────────
   El componente ahora tiene un PIE REAL (hermano del cuerpo, no hijo). Se
   acabó el `position: sticky` y el `:has()`: el botón de guardar ya no puede
   quedar flotando en medio del formulario, porque **está fuera del scroll**.

   Aquí queda solo lo que es piel.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El desbordamiento de 26 px del handoff 131.19, que seguía abierto. */
.siade-modal, .siade-modal * { box-sizing: border-box; }

/* Y NADA dentro del modal puede desbordar a lo ancho.
   `min-width: 0` en los inputs: sin él, un `input[type=date|time]` de iOS NO se
   encoge por debajo de su ancho intrínseco y rompe la fila. */
.siade-modal-b > * { max-width: 100%; }
.siade-modal input,
.siade-modal select,
.siade-modal textarea {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (min-width: 901px) {
  .siade-modal { max-height: 88vh !important; max-height: min(88dvh, 100%) !important; }
}

/* ═══════════════ MÓVIL: LA HOJA INFERIOR ═══════════════ */
@media (max-width: 900px) {

  .siade-modal-ov {
    align-items: flex-end !important;
    padding: 0 !important;
    /* SIN `height`. El componente recorta el fondo con `bottom: <alto del
       teclado>` (visualViewport). Un `height` forzado haría que el navegador
       IGNORE ese `bottom`, y la hoja se quedaría detrás del teclado — que es
       exactamente lo que pasaba. */
    height: auto !important;
  }

  .siade-modal {
    width: 100% !important;
    max-width: 100% !important;
    /* 92 % del HUECO que deja el fondo, no de la pantalla. Con el teclado
       abierto, el hueco es menor y la hoja se ajusta sola. */
    max-height: 92% !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -20px 60px rgba(11, 35, 69, .35) !important;
    animation: siadeHoja .26s cubic-bezier(.32, .72, 0, 1);
  }

  /* El asa. Le dice a la persona que esto es una hoja. */
  .siade-modal-h {
    position: relative;
    padding: 24px 18px 14px !important;
    border-radius: 22px 22px 0 0 !important;
  }
  .siade-modal-h::before {
    content: "";
    position: absolute;
    top: 9px; left: 50%;
    transform: translateX(-50%);
    width: 38px; height: 5px;
    border-radius: 999px;
    background: var(--line);
    transition: background .15s, width .15s;
  }
  /* El asa responde al tacto: se oscurece y se ensancha. Es lo que le dice a la
     persona «esto se arrastra». */
  .siade-modal-h:active::before {
    background: var(--muted);
    width: 46px;
  }
  .siade-modal-h { cursor: grab; user-select: none; -webkit-user-select: none; }
  .siade-modal-h:active { cursor: grabbing; }

  /* Más compacto: 18 px de lados, y arriba/abajo menos. El propietario pidió que
     no se desperdiciara espacio, y tiene razón: en un móvil cada píxel cuenta. */
  .siade-modal-b { padding: 14px 18px 8px !important; }
  /* Y los campos, con menos aire entre sí. */
  #siade-portal-app .siade-modal-b > div[style*="margin-bottom: 13px"],
  .siade-modal-b > div[style*="margin-bottom: 13px"] { margin-bottom: 10px !important; }

  /* ── LA FRANJA AZUL: LA CAUSA ESTABA EN LA RAÍZ ──
     Intenté un pseudoelemento (lo recortaba el `overflow: hidden` del modal) y
     luego una sombra sólida (no llegaba). Los dos atacaban el síntoma.

     La causa está en el TEMA:

         html.gobchi-panel-native, html…native body { background: #203A88 !important }
         <meta name="theme-color" content="#203A88">

     **#203A88 es exactamente el azul de la franja.** Y iOS pinta el área segura
     del iPhone con el `theme-color`. **El color venía de la raíz del documento**,
     no del modal. Ninguna caja podía taparlo.

     Se resuelve en el componente (`Ee`): mientras la hoja está abierta, la raíz
     es del color de la hoja, y el `theme-color` también. Se restaura al cerrar.

     Aquí solo queda la sombra de elevación, que es lo que le toca. */
  .siade-modal { position: relative; }

  /* ── «TODO EL DÍA» COMO UNA CELDA MÁS ──
     Entra en la fila de las horas, con su misma proporción y su misma altura. Al
     marcarlo, las horas desaparecen y él ocupa su sitio. Cero espacio en blanco. */
  #siade-portal-app .siade-todoeldia,
  .siade-todoeldia {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 46px;
    padding: 12px 10px;
    box-sizing: border-box;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: var(--card-soft);
    color: var(--text);
    font: 700 13.5px/1 var(--gpds-ui);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background .16s, border-color .16s, color .16s, box-shadow .16s;
  }
  #siade-portal-app .siade-todoeldia:hover { border-color: #325DD1; }
  #siade-portal-app .siade-todoeldia.on,
  .siade-todoeldia.on {
    border-color: #325DD1;
    background: color-mix(in srgb, #325DD1 9%, var(--card));
    color: #2748AA;
    box-shadow: 0 8px 20px -14px rgba(50, 93, 209, .7);
  }
  #siade-portal-app .siade-todoeldia input[type="checkbox"] { margin: 0; }

  /* EL PIE. Área segura del iPhone respetada: el indicador de inicio ya no lo tapa. */
  .siade-modal-f {
    position: relative;
    /* El área segura del iPhone, respetada — pero sin regalar espacio: 10 px de
       relleno propio, no 14, y el resto lo pone el sistema si hace falta. */
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -12px 26px -18px rgba(11, 35, 69, .5);
  }
  /* La nota bajo el botón, más ajustada. */
  #siade-portal-app .siade-modal-f > div > div,
  .siade-modal-f > div > div { margin-top: 6px !important; line-height: 1.35; }
  /* El botón, de ancho completo: se pulsa con el pulgar, no se apunta. */
  /* El tema declara `#siade-portal-app button { min-height: 42px }` — un selector
     de ID gana a uno de clase. Aquí se iguala la especificidad y se sube el
     objetivo táctil a 50 px: es el botón principal de un formulario en un móvil. */
  #siade-portal-app .siade-modal-f button,
  .siade-modal-f button {
    width: 100% !important;
    min-height: 50px !important;
  }

  /* La fila de fecha y horas: rejilla de 2, con `minmax(0,1fr)` — sin eso, los
     items de rejilla tampoco se encogen por debajo de su contenido. */
  #siade-portal-app .siade-modal-b > div[style*="flex-wrap"],
  .siade-modal-b > div[style*="flex-wrap"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  /* Y sus celdas se pueden encoger de verdad. */
  #siade-portal-app .siade-modal-b > div[style*="flex-wrap"] > *,
  .siade-modal-b > div[style*="flex-wrap"] > * {
    min-width: 0 !important;
    flex: none !important;
  }

  /* ── LOS INPUTS DE FECHA Y HORA ──
     En iOS son controles NATIVOS con un ancho intrínseco propio. `width: 100%`
     NO basta, y `min-width: 0` en el contenedor tampoco: el control se niega a
     encogerse y se sale de la caja. Hay que quitarles la apariencia nativa Y
     forzarles el ancho. Es la causa de que «las cajitas de horario sigan fuera
     de margen». */
  #siade-portal-app .siade-modal input[type="date"],
  #siade-portal-app .siade-modal input[type="time"],
  #siade-portal-app .siade-modal input[type="datetime-local"],
  .siade-modal input[type="date"],
  .siade-modal input[type="time"],
  .siade-modal input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: left;
  }
  /* iOS mete un contenedor interno con su propio ancho. Se neutraliza. */
  #siade-portal-app .siade-modal input[type="date"]::-webkit-date-and-time-value,
  #siade-portal-app .siade-modal input[type="time"]::-webkit-date-and-time-value,
  .siade-modal input[type="date"]::-webkit-date-and-time-value,
  .siade-modal input[type="time"]::-webkit-date-and-time-value {
    text-align: left;
    min-width: 0;
    width: 100%;
  }

  /* 16 px es el mínimo con el que iOS NO hace zoom al enfocar. */
  .siade-modal input,
  .siade-modal select,
  .siade-modal textarea {
    font-size: 16px !important;
    min-height: 46px;
  }
  .siade-modal textarea { min-height: 78px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUE SE SIENTA APP · alpha133.2
   ───────────────────────────────────────────────────────────────────────────
   No es una cosa. Son siete, y ninguna se nota por separado — se notan todas
   juntas. Es la diferencia entre «una web con esquinas redondeadas» y «una app».
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* 1 · EL BOTÓN RESPONDE AL DEDO. En iOS todo se hunde un poco al tocarlo.
        Sin eso, la interfaz se siente muerta. */
  .siade-modal-f button:active,
  #siade-portal-app .siade-modal-f button:active {
    transform: scale(.975);
    filter: brightness(.94);
  }
  .siade-modal-f button {
    transition: transform .12s cubic-bezier(.32,.72,0,1), filter .12s;
  }

  /* 2 · Y LA X TAMBIÉN. */
  .siade-modal-x { transition: transform .12s, background .15s; }
  .siade-modal-x:active { transform: scale(.9); }

  /* 3 · LOS CAMPOS, COMO EN AJUSTES DE iOS: relleno suave, sin borde duro, y el
        foco se marca con el color de acción, no con un contorno del navegador. */
  #siade-portal-app .siade-modal input,
  #siade-portal-app .siade-modal select,
  #siade-portal-app .siade-modal textarea {
    background: var(--card-soft) !important;
    border-color: transparent !important;
    border-radius: 12px !important;
    transition: background .15s, box-shadow .15s;
  }
  #siade-portal-app .siade-modal input:focus,
  #siade-portal-app .siade-modal select:focus,
  #siade-portal-app .siade-modal textarea:focus {
    background: var(--card) !important;
    box-shadow: 0 0 0 2px #325DD1 !important;
    outline: none !important;
  }

  /* 4 · LAS ETIQUETAS, más discretas. En una app no gritan. */
  #siade-portal-app .siade-modal-b label {
    letter-spacing: .04em !important;
    opacity: .78;
  }

  /* 5 · LA CABECERA se separa del cuerpo solo cuando hay contenido debajo, con
        una línea capilar, no con un borde grueso. */
  .siade-modal-h {
    border-bottom-color: var(--mon-hair, var(--line)) !important;
  }

  /* 6 · El desplazamiento del cuerpo, con inercia de iOS y sin barra visible.
        Una hoja nativa no enseña la barra de scroll. */
  .siade-modal-b::-webkit-scrollbar { width: 0; height: 0; }
  .siade-modal-b { scrollbar-width: none; }
}

/* 7 · LA ANIMACIÓN. Curva de muelle — la de iOS. Una hoja no aparece: SUBE. */
@keyframes siadeHoja {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
/* Y el fondo se funde, no aparece de golpe. */
@keyframes siadeFondo {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (max-width: 900px) {
  .siade-modal-ov { animation: siadeFondo .2s ease-out; }
}

@media (prefers-reduced-motion: reduce) {
  .siade-modal,
  .siade-modal-ov { animation: none !important; }
  .siade-modal-f button:active,
  .siade-modal-x:active { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   11 · BOTONES Y FORMULARIOS — EN LAS DOS VERSIONES  (alpha133.3)
   ───────────────────────────────────────────────────────────────────────────
   El propietario preguntó si esto también se aplica en escritorio. Antes NO:
   casi todo estaba dentro de `@media (max-width: 900px)`. Ahora lo que es de
   FONDO —el tacto, el foco, la forma de los campos— vale en las dos. Lo que
   cambia entre móvil y escritorio es la DISPOSICIÓN, no la calidad.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El tacto: todo se hunde un poco al pulsarlo. En una app, nada está muerto. */
#siade-portal-app .siade-modal button:active:not(:disabled),
#siade-portal-app .siade-modal-f button:active:not(:disabled) {
  transform: scale(.975);
  filter: brightness(.94);
}
#siade-portal-app .siade-modal button {
  transition: transform .12s cubic-bezier(.32, .72, 0, 1), filter .12s, background .15s, border-color .15s;
}

/* Los campos: relleno suave, sin borde duro, y el foco con el color de ACCIÓN —
   no con el contorno azul del navegador, que es de otro sistema de diseño. */
#siade-portal-app .siade-modal input,
#siade-portal-app .siade-modal select,
#siade-portal-app .siade-modal textarea {
  background: var(--card-soft) !important;
  border: 1.5px solid transparent !important;
  border-radius: 12px !important;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
#siade-portal-app .siade-modal input:hover,
#siade-portal-app .siade-modal select:hover,
#siade-portal-app .siade-modal textarea:hover {
  border-color: var(--line) !important;
}
#siade-portal-app .siade-modal input:focus,
#siade-portal-app .siade-modal select:focus,
#siade-portal-app .siade-modal textarea:focus {
  background: var(--card) !important;
  border-color: #325DD1 !important;
  box-shadow: 0 0 0 3px rgba(50, 93, 209, .14) !important;
  outline: none !important;
}
#siade-portal-app .siade-modal input::placeholder,
#siade-portal-app .siade-modal textarea::placeholder {
  color: var(--muted);
  opacity: .62;
}

/* Las casillas, al tamaño de un dedo y con el color de acción. */
#siade-portal-app .siade-modal input[type="checkbox"] {
  width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  min-width: 22px !important;
  flex: none;
  accent-color: #325DD1;
  border-radius: 6px !important;
  cursor: pointer;
}

/* «Requiere presencia del Gobernador»: cuando está activo, se ve. */
#siade-portal-app .siade-gobernador input[type="checkbox"] { accent-color: #8A5200; }
#siade-portal-app .siade-gobernador.on { position: relative; }
#siade-portal-app .siade-gobernador:hover { border-color: #E0A030 !important; }

/* «Todo el día»: cuando está activo, también. */
#siade-portal-app .siade-todoeldia:hover { border-color: #325DD1 !important; }

/* El botón de WhatsApp, con su color — pero sobrio. */
#siade-portal-app button[style*="128C7E"]:hover {
  background: #E8F8EF !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   13 · PRESENTACIÓN — el nivel «premium» que se pidió  (alpha133.4)
   ───────────────────────────────────────────────────────────────────────────
   Nada de esto se nota por separado. Todo junto, sí. Es la diferencia entre un
   formulario y un instrumento de gobierno.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La cabecera de la hoja: el título respira, y el peso lo sostiene. */
#siade-portal-app .siade-modal-t {
  font-size: 19px !important;
  letter-spacing: -.022em !important;
  line-height: 1.2 !important;
}

/* Las etiquetas: discretas, con aire, y sin gritar. */
#siade-portal-app .siade-modal-b label > span:first-child,
#siade-portal-app .siade-modal-b > div > label:first-child {
  font-size: 10.4px !important;
  letter-spacing: .07em !important;
  color: var(--muted) !important;
  margin-bottom: 7px !important;
}

/* Las notas de ayuda: en su sitio, no compitiendo con el campo. */
#siade-portal-app .siade-modal-b > div > div[style*="font-size: 11.5px"],
#siade-portal-app .siade-modal-b div[style*="fontSize: 11.5"] {
  line-height: 1.45 !important;
  opacity: .82;
}

/* El aviso de la institución responsable: una superficie, no una caja suelta. */
#siade-portal-app .siade-modal-b div[style*="Institución responsable"],
#siade-portal-app .siade-modal-b > div[style*="background"][style*="border-radius"] {
  border-radius: 12px !important;
}

/* El botón principal: peso, no ruido. */
#siade-portal-app .siade-modal-f button {
  border-radius: 13px !important;
  font-size: 15px !important;
  letter-spacing: -.005em;
  box-shadow: 0 12px 26px -14px rgba(50, 93, 209, .75);
}
#siade-portal-app .siade-modal-f button:disabled {
  box-shadow: none;
  opacity: .55;
}

/* La nota del pie: pequeña, y sin robar atención. */
#siade-portal-app .siade-modal-f > div > div {
  font-size: 10.6px !important;
  opacity: .72;
  margin-top: 7px !important;
}

/* Las fichas de invitados: superficie, no borde. */
#siade-portal-app .siade-modal-b button[style*="border-radius: 10px"],
#siade-portal-app .siade-modal-b button[style*="borderRadius: 10"] {
  transition: transform .12s, border-color .15s, background .15s;
}

@media (max-width: 900px) {
  /* Menos aire vertical: el propietario no quiere espacios en blanco, y tiene
     razón — en un teléfono cada píxel cuenta. */
  #siade-portal-app .siade-modal-b > div { margin-bottom: 11px !important; }
  #siade-portal-app .siade-modal-b > div:last-child { margin-bottom: 0 !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   14 · LA REUNIÓN — la minuta y los acuerdos  (alpha133.5)
   ───────────────────────────────────────────────────────────────────────────
   «La minuta es importante, pero LO MÁS RELEVANTE son LOS ACUERDOS.»

   Así que la minuta va PLEGADA, y los acuerdos ocupan la pantalla. Cada uno es
   una línea con lo suyo: su texto, su institución, su fecha y su prioridad.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La cabecera: lo que ya se sabe, no se vuelve a pedir. */
#siade-portal-app .siade-reu-cab {
  padding: 11px 13px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: var(--card-soft);
  border: 1px solid var(--line);
}
#siade-portal-app .siade-reu-cab b {
  display: block;
  font: 750 14px/1.3 var(--gpds-display);
  color: var(--heading);
  letter-spacing: -.012em;
}
#siade-portal-app .siade-reu-cab span {
  display: block;
  margin-top: 3px;
  font: 550 11.5px/1.35 var(--gpds-ui);
  color: var(--muted);
}

/* La minuta: plegada. Es el resumen, no el protagonista. */
#siade-portal-app .siade-reu-min-t {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 46px;
  padding: 12px 13px;
  margin-bottom: 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font: 650 12.5px/1 var(--gpds-ui);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, color .15s, background .15s;
}
#siade-portal-app .siade-reu-min-t:hover {
  border-color: var(--mon-ac, #2748AA);
  color: var(--heading);
}
#siade-portal-app .siade-reu-min {
  padding: 13px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--card-soft);
}

/* EL TÍTULO DE LOS ACUERDOS. Aquí empieza lo que importa. */
#siade-portal-app .siade-reu-tit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
  color: var(--heading);
}
#siade-portal-app .siade-reu-tit > span {
  font: 800 16px/1 var(--gpds-display);
  letter-spacing: -.02em;
}
#siade-portal-app .siade-reu-tit small {
  margin-left: auto;
  font: 550 10.6px/1 var(--gpds-ui);
  color: var(--muted);
}
#siade-portal-app .siade-reu-tit svg { color: var(--mon-ok, #177A55); }

#siade-portal-app .siade-reu-prev {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  margin-bottom: 11px;
  border-radius: 10px;
  background: var(--mon-ok-bg, #E4F3EC);
  color: var(--mon-ok, #177A55);
  font: 600 11.6px/1.3 var(--gpds-ui);
}
#siade-portal-app .siade-reu-prev small { margin-left: auto; opacity: .8; font-size: 10.4px; }

/* ── CADA ACUERDO: una línea, con lo suyo ── */
#siade-portal-app .siade-reu-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#siade-portal-app .siade-acu {
  position: relative;
  padding: 12px 13px 11px 40px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  transition: border-color .15s, box-shadow .15s;
}
#siade-portal-app .siade-acu:focus-within {
  border-color: #325DD1;
  box-shadow: 0 0 0 3px rgba(50, 93, 209, .12);
}
#siade-portal-app .siade-acu-n {
  position: absolute;
  left: 11px;
  top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
#siade-portal-app .siade-acu-n > span {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--mon-ac-bg, #EAF1FB);
  color: var(--mon-ac, #2748AA);
  font: 800 11px/1 var(--gpds-display);
  font-variant-numeric: tabular-nums;
}
#siade-portal-app .siade-acu-x {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color .15s, background .15s;
}
#siade-portal-app .siade-acu-x:hover {
  color: var(--mon-rg, #9F0B30);
  background: var(--mon-rg-bg, #FBE9EC);
}

/* El texto del acuerdo: es lo primero y lo más grande. */
#siade-portal-app .siade-acu-t {
  width: 100%;
  min-height: 52px;
  padding: 9px 11px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: var(--card-soft) !important;
  color: var(--text);
  font: 600 14px/1.45 var(--gpds-ui) !important;
  resize: vertical;
  box-sizing: border-box;
}
#siade-portal-app .siade-acu-t:focus {
  background: var(--card) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

/* Los metadatos: responsable, fecha, prioridad. Discretos, pero ahí. */
#siade-portal-app .siade-acu-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}
#siade-portal-app .siade-acu-meta label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font: 700 9.6px/1 var(--gpds-ui);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
#siade-portal-app .siade-acu-meta select,
#siade-portal-app .siade-acu-meta input {
  min-height: 40px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 8px 9px !important;
  border-radius: 9px !important;
  font-size: 12.6px !important;
  font-weight: 600;
  box-sizing: border-box;
}
#siade-portal-app .siade-acu-nota {
  margin: 8px 0 0;
  font: 550 10.6px/1.4 var(--gpds-ui);
  color: var(--mon-at, #8A5200);
}

#siade-portal-app .siade-acu-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 46px;
  margin-top: 11px;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--mon-ac, #2748AA);
  font: 750 13px/1 var(--gpds-ui);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
#siade-portal-app .siade-acu-add:hover {
  border-color: #325DD1;
  background: var(--mon-ac-bg, #EAF1FB);
}

#siade-portal-app .siade-reu-pie {
  margin: 14px 0 0;
  font: 500 10.8px/1.5 var(--gpds-ui);
  color: var(--muted);
}

/* En un teléfono, los tres metadatos bajan a dos filas: caben, y se leen. */
@media (max-width: 640px) {
  #siade-portal-app .siade-acu-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #siade-portal-app .siade-acu-meta label:first-child {
    grid-column: 1 / -1;
  }
  #siade-portal-app .siade-acu {
    padding: 11px 11px 10px 38px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   15 · LOS ACUERDOS SE VEN — y la matriz se lee por actividad  (alpha133.6)
   ───────────────────────────────────────────────────────────────────────────
   «Si hay ya registrados, deberían poder verse.»  ·  «En la matriz debería
    desplegarse por actividad: dos acuerdos, tres acuerdos.»

   Las dos cosas son la misma: **un acuerdo no existe suelto — nace en una
   reunión.** Verlo fuera de ella es perder la mitad del sentido.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Los acuerdos ya registrados ── */
#siade-portal-app .siade-acu-reg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 9px 0 14px;
}
#siade-portal-app .siade-acu-reg-i {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border: 1px solid var(--mon-hair, var(--line));
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
#siade-portal-app .siade-acu-reg-i:hover {
  border-color: var(--mon-ac, #2748AA);
  background: var(--card-soft);
}
#siade-portal-app .siade-acu-reg-p {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
}
#siade-portal-app .siade-acu-reg-c {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#siade-portal-app .siade-acu-reg-c b {
  font: 650 12.8px/1.4 var(--gpds-ui);
  color: var(--heading);
}
#siade-portal-app .siade-acu-reg-c small {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font: 550 10.6px/1.3 var(--gpds-ui);
  color: var(--muted);
}
#siade-portal-app .siade-acu-reg-i > svg { flex: none; margin-top: 5px; color: var(--line); }
#siade-portal-app .siade-acu-ven { color: var(--mon-rg, #9F0B30); font-weight: 750; }

/* El botón de exportar: sobrio, y siempre a mano. */
#siade-portal-app .siade-reu-exp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid currentColor;
  border-radius: 9px;
  background: transparent;
  color: var(--mon-ok, #177A55);
  font: 750 11px/1 var(--gpds-ui);
  cursor: pointer;
  transition: background .15s;
}
#siade-portal-app .siade-reu-exp:hover { background: var(--card); }

#siade-portal-app .siade-reu-sub {
  margin: 4px 0 9px;
  font: 700 10.4px/1 var(--gpds-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── LA MATRIZ, POR ACTIVIDAD ── */
#siade-portal-app .siade-mtz {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
#siade-portal-app .siade-mtz-g {
  border: 1px solid var(--mon-hair, var(--line));
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
  transition: border-color .15s;
}
#siade-portal-app .siade-mtz-g.alerta {
  border-color: color-mix(in srgb, var(--mon-rg, #9F0B30) 34%, var(--line));
}
#siade-portal-app .siade-mtz-h {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 58px;
  padding: 12px 13px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .14s;
}
#siade-portal-app .siade-mtz-h:hover { background: var(--card-soft); }
#siade-portal-app .siade-mtz-n {
  flex: none;
  min-width: 32px;
  height: 32px;
  padding: 0 7px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--mon-ac-bg, #EAF1FB);
  color: var(--mon-ac, #2748AA);
  font: 800 14px/1 var(--gpds-display);
  font-variant-numeric: tabular-nums;
}
#siade-portal-app .siade-mtz-g.alerta .siade-mtz-n {
  background: var(--mon-rg-bg, #FBE9EC);
  color: var(--mon-rg, #9F0B30);
}
#siade-portal-app .siade-mtz-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#siade-portal-app .siade-mtz-c b {
  font: 700 13.4px/1.32 var(--gpds-ui);
  color: var(--heading);
}
#siade-portal-app .siade-mtz-c small {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 9px;
  font: 550 10.6px/1.3 var(--gpds-ui);
  color: var(--muted);
}
#siade-portal-app .siade-mtz-b {
  padding: 2px 13px 13px;
  border-top: 1px solid var(--mon-hair, var(--line));
  background: var(--card-soft);
}
#siade-portal-app .siade-mtz-exp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 42px;
  border: 1px dashed var(--line);
  border-radius: 11px;
  background: transparent;
  color: var(--mon-ac, #2748AA);
  font: 700 12px/1 var(--gpds-ui);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
#siade-portal-app .siade-mtz-exp:hover {
  border-color: var(--mon-ac, #2748AA);
  background: var(--card);
}


/* ═══════════════════════════════════════════════════════════════════════════
   16 · CORRESPONSABLES  (alpha134.0)
   ───────────────────────────────────────────────────────────────────────────
   La PRINCIPAL responde por el acuerdo — lleva estrella. Las demás lo ACOMPAÑAN.
   Un acuerdo con un solo responsable, en un gabinete departamental, es una
   ficción cómoda: la cloración del agua es MSPAS + INFOM + la municipalidad.
   ═══════════════════════════════════════════════════════════════════════════ */

#siade-portal-app .siade-corr {
  margin: 4px 0 14px;
  padding: 13px;
  border: 1px solid var(--mon-hair, var(--line));
  border-radius: 13px;
  background: var(--card-soft);
}
#siade-portal-app .siade-corr-t {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--heading);
  font: 750 12.4px/1 var(--gpds-ui);
}
#siade-portal-app .siade-corr-t small {
  margin-left: auto;
  font: 550 10.4px/1 var(--gpds-ui);
  color: var(--muted);
}
#siade-portal-app .siade-corr-t svg { color: var(--mon-ac, #2748AA); }

#siade-portal-app .siade-corr-l {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
#siade-portal-app .siade-corr-c {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  max-width: 100%;
}
/* La PRINCIPAL: la que responde. Se ve. */
#siade-portal-app .siade-corr-c.ppal {
  border-color: #E0A030;
  background: #FDF6E7;
}
#siade-portal-app .siade-corr-c.ppal svg { color: #8A5200; }
#siade-portal-app .siade-corr-c b {
  font: 750 11.8px/1.2 var(--gpds-ui);
  color: var(--heading);
  min-width: 0;
}
#siade-portal-app .siade-corr-c.ppal b { color: #8A5200; }
#siade-portal-app .siade-corr-c small {
  font: 550 9.8px/1.2 var(--gpds-ui);
  color: var(--muted);
}
#siade-portal-app .siade-corr-x {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color .15s, background .15s;
}
#siade-portal-app .siade-corr-x:hover {
  color: var(--mon-rg, #9F0B30);
  background: var(--mon-rg-bg, #FBE9EC);
}

#siade-portal-app .siade-corr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  margin-top: 10px;
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--mon-ac, #2748AA);
  font: 700 12px/1 var(--gpds-ui);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
#siade-portal-app .siade-corr-btn:hover {
  border-color: #325DD1;
  background: var(--card);
}

#siade-portal-app .siade-corr-add {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 11px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
}
#siade-portal-app .siade-corr-add label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font: 700 9.6px/1 var(--gpds-ui);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
#siade-portal-app .siade-corr-cancel {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: 650 12px/1 var(--gpds-ui);
  cursor: pointer;
}
#siade-portal-app .siade-corr-cancel:hover { color: var(--heading); border-color: var(--muted); }

#siade-portal-app .siade-corr-n {
  margin: 10px 0 0;
  font: 500 10.4px/1.45 var(--gpds-ui);
  color: var(--muted);
}

@media (max-width: 640px) {
  #siade-portal-app .siade-corr-add { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   17 · OBJETIVOS TÁCTILES — WCAG 2.5.5  (alpha134.8)
   ───────────────────────────────────────────────────────────────────────────
   44 × 44. No 42. La suite de QA móvil encontró cinco por debajo, y eran los que
   más se tocan: la campana, el avatar, el toggle de tema, «Cerrar sesión».

   El dedo tiene ~9 mm. 42 px son ~7 mm. Dos píxeles que parecen nada, y son la
   diferencia entre pulsar y fallar.

   (Esto vive también en el plugin, no solo en el tema: si algún día el panel se
   monta sin el tema hijo, los objetivos táctiles no pueden degradarse.)
   ═══════════════════════════════════════════════════════════════════════════ */

#siade-portal-app button,
#siade-portal-app a[href] {
  min-height: 44px;
}
#siade-portal-app .siade-theme-toggle,
#siade-portal-app .siade-hdr-avatar,
#siade-portal-app .siade-hdr-bell,
#siade-portal-app .siade-appbar button {
  min-width: 44px !important;
  min-height: 44px !important;
}
/* Los iconos decorativos DENTRO de un botón no necesitan 44: el botón ya lo tiene. */
#siade-portal-app button svg,
#siade-portal-app a svg {
  min-height: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   18 · «SIN DATO» NO ES «CERO»  (alpha134.9)
   ───────────────────────────────────────────────────────────────────────────
   El documento 05 lo dice, y el mapa lo confundía:

       r2 = municipios.map(m => Number(m[campo] || 0));   // null → 0
       if (!v) return d2[0];                               // y 0 → el azul más claro

   Un municipio que no había reportado se pintaba con **el color más claro de la
   escala** —que significa «valor bajo»— y **además distorsionaba el máximo**.

   Desnutrición crónica: Jocotán no reporta → se pintaba 0% → **parecía que no hay
   desnutrición**. Y este mapa se le enseña al Presidente.

   Ahora se pinta RAYADO. Se ve distinto porque **es otra cosa**.
   ═══════════════════════════════════════════════════════════════════════════ */

#siade-portal-app .siade-mon-geo-sd {
  /* El rayado no es interactivo como un dato: no hay nada que consultar. */
  cursor: default;
}
#siade-portal-app .siade-mon-geo-sd:hover {
  filter: brightness(.97);
}

#siade-portal-app .siade-mon-mapa-aviso {
  margin: 8px 0 0;
  padding: 8px 11px;
  border-radius: 9px;
  background: var(--mon-at-bg, #FBF3E2);
  border: 1px solid color-mix(in srgb, var(--mon-at, #8A5200) 22%, transparent);
  color: var(--mon-at, #8A5200);
  font: 600 10.8px/1.45 var(--gpds-ui);
}

/* La leyenda gana su entrada de «Sin dato» — con el mismo rayado, para que se
   reconozca de un vistazo. */
#siade-portal-app .siade-mon-leyenda .sd {
  background: repeating-linear-gradient(
    45deg,
    #F1F4F8, #F1F4F8 2px,
    #C9D3E0 2px, #C9D3E0 4px
  ) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   19 · EL CATÁLOGO TERRITORIAL — FASE 0 del brief  (alpha135.0)
   ───────────────────────────────────────────────────────────────────────────
   «No reportó» y «no lo encontré» son cosas DISTINTAS, y el mapa las distingue:

     · RAYADO   → el municipio existe en el catálogo, pero no ha reportado.
     · AVISO ⚠  → un dato existe, pero su municipio NO está en el catálogo.
                   **Ese dato se está perdiendo, y hay que decirlo.**
   ═══════════════════════════════════════════════════════════════════════════ */

#siade-portal-app .siade-mon-mapa-huerfano {
  margin: 8px 0 0;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--mon-rg-bg, #FBE9EC);
  border: 1px solid color-mix(in srgb, var(--mon-rg, #9F0B30) 26%, transparent);
  color: var(--mon-rg, #9F0B30);
  font: 600 10.8px/1.45 var(--gpds-ui);
}
#siade-portal-app .siade-mon-mapa-huerfano b { font-weight: 800; }


/* ═══════════════════════════════════════════════════════════════════════════
   20 · EL CENTRO DE INTELIGENCIA TERRITORIAL  (alpha135.1)
   ───────────────────────────────────────────────────────────────────────────
   El Hub completo, en UNA portada.

   LA CABECERA ES COMPACTA. El título de dos líneas ocupaba **130 px** de un
   teléfono de 844. Ahora vive en **52 px**, junto al corte y a «Presentar».
   **78 px ganados** — que es una tarjeta entera de contenido.
   ═══════════════════════════════════════════════════════════════════════════ */

#siade-portal-app .siade-ci { display: flex; flex-direction: column; }

/* ── La cabecera compacta ── */
#siade-portal-app .siade-ci-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 2px 14px;
}
#siade-portal-app .siade-ci-hd .mk {
  width: 34px; height: 34px; flex: none;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--mon-ac-bg, #EAF1FB);
  color: var(--mon-ac, #2748AA);
}
#siade-portal-app .siade-ci-hd .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#siade-portal-app .siade-ci-hd .tx > b {
  font: 800 15px/1.15 var(--gpds-display);
  color: var(--heading);
  letter-spacing: -.025em;
}
#siade-portal-app .siade-ci-hd .tx > small {
  font: 600 10.4px/1.3 var(--gpds-ui);
  color: var(--muted);
  margin-top: 2px;
}
#siade-portal-app .siade-ci-hd .tx > small b { color: var(--text); font-weight: 750; }
#siade-portal-app .siade-ci-hd .pr {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none;
  min-height: 44px; padding: 0 13px;
  border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--card);
  color: var(--mon-ac, #2748AA);
  font: 750 12px/1 var(--gpds-ui);
  cursor: pointer;
}
#siade-portal-app .siade-ci-hd .pr:hover { border-color: #325DD1; }

#siade-portal-app .siade-ci-sec { margin-bottom: 20px; }
#siade-portal-app .siade-ci-sh {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
#siade-portal-app .siade-ci-sh h2 {
  font: 800 14.5px/1 var(--gpds-display);
  color: var(--heading);
  letter-spacing: -.022em;
}
#siade-portal-app .siade-ci-sh .n {
  min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: 7px;
  background: var(--mon-rg, #9F0B30); color: #fff;
  font: 850 10.5px/1 var(--gpds-ui);
  display: grid; place-items: center;
}
#siade-portal-app .siade-ci-sh .lk {
  margin-left: auto;
  font: 650 10.6px/1 var(--gpds-ui);
  color: var(--muted);
}

/* ── «Para ti» — las acciones ── */
#siade-portal-app .siade-ci-tar {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px;
  background: var(--card);
  border: 1px solid var(--mon-hair, var(--line));
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 8px;
  box-shadow: 0 5px 16px rgba(10, 38, 71, .05);
}
#siade-portal-app .siade-ci-tar .ic {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
}
#siade-portal-app .siade-ci-tar.rojo .ic { background: var(--mon-rg-bg, #FBE9EC); color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-ci-tar.ambar .ic { background: var(--mon-at-bg, #FBF3E2); color: var(--mon-at, #8A5200); }
#siade-portal-app .siade-ci-tar.azul .ic { background: var(--mon-ac-bg, #EAF1FB); color: var(--mon-ac, #2748AA); }
#siade-portal-app .siade-ci-tar .cu { min-width: 0; display: flex; flex-direction: column; }
#siade-portal-app .siade-ci-tar .e {
  font: 850 8.8px/1.2 var(--gpds-ui);
  letter-spacing: .09em; text-transform: uppercase;
}
#siade-portal-app .siade-ci-tar.rojo .e { color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-ci-tar.ambar .e { color: var(--mon-at, #8A5200); }
#siade-portal-app .siade-ci-tar.azul .e { color: var(--mon-ac, #2748AA); }
#siade-portal-app .siade-ci-tar .t {
  font: 750 13px/1.3 var(--gpds-ui);
  color: var(--heading);
  margin-top: 3px;
}
#siade-portal-app .siade-ci-tar .m {
  font: 600 10.2px/1.35 var(--gpds-ui);
  color: var(--muted);
  margin-top: 4px;
}
#siade-portal-app .siade-ci-tar .cta {
  display: inline-flex; align-items: center; gap: 5px;
  align-self: flex-start;
  margin-top: 9px; min-height: 44px; padding: 0 13px;
  border: 0; border-radius: 11px;
  background: #325DD1; color: #fff;
  font: 750 12px/1 var(--gpds-ui);
  cursor: pointer;
}
#siade-portal-app .siade-ci-tar.rojo .cta { background: var(--mon-rg, #9F0B30); }

/* ── El Panorama — seis celdas ── */
#siade-portal-app .siade-ci-pan {
  background: var(--card);
  border: 1px solid var(--mon-hair, var(--line));
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(10, 38, 71, .06);
}
#siade-portal-app .siade-ci-pan .ph {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 14px 11px;
  border-bottom: 1px solid var(--mon-hair, var(--line));
}
#siade-portal-app .siade-ci-pan .ph .pt {
  width: 7px; height: 7px; border-radius: 50%;
  background: #325DD1;
  box-shadow: 0 0 0 4px var(--mon-ac-bg, #EAF1FB);
}
#siade-portal-app .siade-ci-pan .ph b {
  font: 800 13px/1 var(--gpds-display);
  color: var(--heading);
  letter-spacing: -.015em;
}
#siade-portal-app .siade-ci-pan .pg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#siade-portal-app .siade-ci-pan .cel {
  padding: 13px 8px;
  border: 0;
  border-right: 1px solid var(--mon-hair, var(--line));
  border-bottom: 1px solid var(--mon-hair, var(--line));
  background: transparent;
  text-align: center;
  min-width: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background .14s;
}
#siade-portal-app .siade-ci-pan .cel:hover { background: var(--card-soft); }
#siade-portal-app .siade-ci-pan .cel:nth-child(3n) { border-right: 0; }
#siade-portal-app .siade-ci-pan .cel:nth-child(n+4) { border-bottom: 0; }
#siade-portal-app .siade-ci-pan .ci {
  width: 30px; height: 30px; margin: 0 auto;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--mon-ac-bg, #EAF1FB);
  color: var(--mon-ac, #2748AA);
}
#siade-portal-app .siade-ci-pan .ci.rojo { background: var(--mon-rg-bg, #FBE9EC); color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-ci-pan .ci.amb { background: var(--mon-at-bg, #FBF3E2); color: var(--mon-at, #8A5200); }
#siade-portal-app .siade-ci-pan .v {
  display: block;
  font: 850 20px/1.05 var(--gpds-display);
  color: var(--heading);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  margin-top: 7px;
}
#siade-portal-app .siade-ci-pan .v.rojo { color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-ci-pan .v.amb { color: var(--mon-at, #8A5200); }
#siade-portal-app .siade-ci-pan .k {
  display: block;
  font: 700 9.4px/1.25 var(--gpds-ui);
  color: var(--muted);
  margin-top: 4px;
}
#siade-portal-app .siade-ci-pan .p {
  display: inline-block;
  margin-top: 6px; padding: 2px 7px;
  border-radius: 20px;
  background: var(--card-soft);
  font: 750 8.4px/1.4 var(--gpds-ui);
  color: var(--muted);
}
#siade-portal-app .siade-ci-pan .p.rojo { background: var(--mon-rg-bg, #FBE9EC); color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-ci-pan .p.amb { background: var(--mon-at-bg, #FBF3E2); color: var(--mon-at, #8A5200); }

/* ── Las señales ── */
#siade-portal-app .siade-ci-sens { display: flex; flex-direction: column; gap: 9px; }
#siade-portal-app .siade-ci-sen {
  background: var(--card);
  border: 1px solid var(--mon-hair, var(--line));
  border-left: 4px solid;
  border-radius: 14px;
  padding: 13px;
  box-shadow: 0 5px 16px rgba(10, 38, 71, .05);
}
#siade-portal-app .siade-ci-sen.crit { border-left-color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-ci-sen.aten { border-left-color: var(--mon-at, #8A5200); }
#siade-portal-app .siade-ci-sen .top {
  display: flex; align-items: center; gap: 6px;
  font: 850 9.4px/1 var(--gpds-ui);
  letter-spacing: .08em; text-transform: uppercase;
}
#siade-portal-app .siade-ci-sen.crit .top { color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-ci-sen.aten .top { color: var(--mon-at, #8A5200); }
#siade-portal-app .siade-ci-sen .top span { color: var(--muted); font-weight: 700; letter-spacing: .04em; }
#siade-portal-app .siade-ci-sen h3 {
  font: 800 13.6px/1.28 var(--gpds-display);
  color: var(--heading);
  letter-spacing: -.012em;
  margin-top: 7px;
}
#siade-portal-app .siade-ci-sen .por {
  font: 500 11.4px/1.45 var(--gpds-ui);
  color: var(--muted);
  margin-top: 5px;
}
#siade-portal-app .siade-ci-sen .campos {
  display: grid; gap: 4px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--mon-hair, var(--line));
}
#siade-portal-app .siade-ci-sen .campo {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px;
}
#siade-portal-app .siade-ci-sen .campo .k {
  font: 800 8.8px/1.4 var(--gpds-ui);
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}
#siade-portal-app .siade-ci-sen .campo .v {
  font: 650 10.6px/1.35 var(--gpds-ui);
  color: var(--text);
  min-width: 0;
}
#siade-portal-app .siade-ci-sen .acc {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 44px;
  margin-top: 11px;
  border: 1.5px solid var(--line); border-radius: 11px;
  background: transparent;
  color: var(--mon-ac, #2748AA);
  font: 750 12.5px/1 var(--gpds-ui);
  cursor: pointer;
}
#siade-portal-app .siade-ci-sen.crit .acc { border-color: var(--mon-rg, #9F0B30); color: var(--mon-rg, #9F0B30); }

/* ── EL CAMINO AL PRIMER SEMÁFORO ── */
#siade-portal-app .siade-ci-camino {
  margin-top: 9px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--mon-at, #8A5200) 22%, transparent);
  border-radius: 14px;
  background: var(--mon-at-bg, #FBF3E2);
}
#siade-portal-app .siade-ci-camino.ok {
  border-color: color-mix(in srgb, var(--mon-ok, #177A55) 22%, transparent);
  background: var(--mon-ok-bg, #E4F3EC);
}
#siade-portal-app .siade-ci-camino .h {
  display: flex; align-items: center; gap: 7px;
  color: var(--mon-at, #8A5200);
}
#siade-portal-app .siade-ci-camino.ok .h { color: var(--mon-ok, #177A55); }
#siade-portal-app .siade-ci-camino .h b { font: 800 12.4px/1.3 var(--gpds-ui); }
#siade-portal-app .siade-ci-camino > p {
  font: 600 10.8px/1.5 var(--gpds-ui);
  color: #6B4200;
  margin-top: 5px;
}
#siade-portal-app .siade-ci-camino.ok > p { color: #12503A; }
#siade-portal-app .siade-ci-camino .pasos {
  display: flex; flex-direction: column; gap: 7px;
  margin-top: 11px;
}
#siade-portal-app .siade-ci-camino .paso {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px;
  align-items: start;
  opacity: .55;
}
#siade-portal-app .siade-ci-camino .paso.listo,
#siade-portal-app .siade-ci-camino .paso.ahora { opacity: 1; }
#siade-portal-app .siade-ci-camino .paso .n {
  width: 22px; height: 22px;
  border-radius: 7px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .7);
  color: var(--mon-at, #8A5200);
  font: 800 10px/1 var(--gpds-display);
}
#siade-portal-app .siade-ci-camino .paso.listo .n {
  background: var(--mon-ok, #177A55); color: #fff;
}
#siade-portal-app .siade-ci-camino .paso.ahora .n {
  background: var(--mon-at, #8A5200); color: #fff;
  box-shadow: 0 0 0 3px rgba(138, 82, 0, .16);
}
#siade-portal-app .siade-ci-camino .paso .c { min-width: 0; display: flex; flex-direction: column; }
#siade-portal-app .siade-ci-camino .paso .c b {
  font: 800 11.5px/1.2 var(--gpds-ui);
  color: #6B4200;
}
#siade-portal-app .siade-ci-camino.ok .paso .c b { color: #12503A; }
#siade-portal-app .siade-ci-camino .paso .c small {
  font: 600 9.8px/1.3 var(--gpds-ui);
  color: #8A6534;
  margin-top: 2px;
}
#siade-portal-app .siade-ci-camino .paso .bar {
  display: block;
  height: 4px; margin-top: 5px;
  border-radius: 4px;
  background: rgba(138, 82, 0, .14);
  overflow: hidden;
}
#siade-portal-app .siade-ci-camino .paso .bar i {
  display: block; height: 100%;
  border-radius: 4px;
  background: var(--mon-at, #8A5200);
  transition: width .6s cubic-bezier(.2, .8, .2, 1);
}
#siade-portal-app .siade-ci-camino .paso.listo .bar i { background: var(--mon-ok, #177A55); }
#siade-portal-app .siade-ci-camino .cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 11px; min-height: 44px; padding: 0 13px;
  border: 0; border-radius: 11px;
  background: var(--mon-at, #8A5200); color: #fff;
  font: 750 12px/1 var(--gpds-ui);
  cursor: pointer;
}

/* ── Las herramientas ── */
#siade-portal-app .siade-ci-hg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
#siade-portal-app .siade-ci-hg .hr {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; min-height: 64px;
  background: var(--card);
  border: 1px solid var(--mon-hair, var(--line));
  border-radius: 13px;
  padding: 11px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(10, 38, 71, .04);
  transition: border-color .15s, transform .15s;
}
#siade-portal-app .siade-ci-hg .hr:hover { border-color: #325DD1; transform: translateY(-1px); }
#siade-portal-app .siade-ci-hg .hr.wide { grid-column: 1 / -1; }
#siade-portal-app .siade-ci-hg .hr .ic {
  width: 34px; height: 34px; flex: none;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--mon-ac-bg, #EAF1FB);
  color: var(--mon-ac, #2748AA);
}
#siade-portal-app .siade-ci-hg .hr .ic.v { background: var(--mon-ok-bg, #E4F3EC); color: var(--mon-ok, #177A55); }
#siade-portal-app .siade-ci-hg .hr .ic.amb { background: var(--mon-at-bg, #FBF3E2); color: var(--mon-at, #8A5200); }
#siade-portal-app .siade-ci-hg .hr .c { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#siade-portal-app .siade-ci-hg .hr .c b {
  font: 800 12.2px/1.2 var(--gpds-ui);
  color: var(--heading);
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
#siade-portal-app .siade-ci-hg .hr .c .n {
  font: 850 14px/1.15 var(--gpds-display);
  color: var(--mon-ac, #2748AA);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
#siade-portal-app .siade-ci-hg .hr .c .n.amb { color: var(--mon-at, #8A5200); }
#siade-portal-app .siade-ci-hg .hr .c small {
  font: 600 9.6px/1.28 var(--gpds-ui);
  color: var(--muted);
  margin-top: 2px;
  min-width: 0; overflow: hidden;
}
#siade-portal-app .siade-ci-hg .hr > svg { flex: none; color: var(--line); }

/* ── Vacío ── */
#siade-portal-app .siade-ci-vacio {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 16px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  text-align: center;
}
#siade-portal-app .siade-ci-vacio svg { color: var(--mon-ok, #177A55); }
#siade-portal-app .siade-ci-vacio b { font: 800 12.6px/1 var(--gpds-ui); color: var(--heading); }
#siade-portal-app .siade-ci-vacio span { font: 550 10.8px/1.45 var(--gpds-ui); color: var(--muted); max-width: 30ch; }

/* ── Escritorio (§14): dos columnas, sin cambiar el modelo mental ── */
@media (min-width: 1000px) {
  #siade-portal-app .siade-ci { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; }
  #siade-portal-app .siade-ci-hd { grid-column: 1 / -1; }
  #siade-portal-app .siade-ci-hg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #siade-portal-app .siade-ci-hg .hr.wide { grid-column: auto; }
  #siade-portal-app .siade-ci-sec:nth-of-type(4n+3) { grid-column: 1 / -1; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   21 · EL CENTRO, COMPACTO  (alpha135.2)
   ───────────────────────────────────────────────────────────────────────────
   «Luchamos contra barreras tecnológicas. A muchos les cuesta. Y entre mucho
    contenido de entrada, eso puede resultar en algo complejo.»

   Tenía razón. Lo medí: **2.6 pantallas de scroll** solo para la portada.
   Eso no es una portada: es un informe.

   LA REGLA: **el delegado entiende QUÉ HACER sin bajar la pantalla.**

   Tres bloques, uno por pregunta:
     1. ¿Qué tengo que hacer?   → UNA línea + un botón
     2. ¿Qué pasa en el depto?  → TRES cifras + UNA señal
     3. ¿A dónde voy?           → CUATRO accesos

   El resto **no desaparece: se ordena**. Un toque, y está.
   ═══════════════════════════════════════════════════════════════════════════ */

#siade-portal-app .siade-cc { display: flex; flex-direction: column; gap: 14px; }

/* La cabecera: 44 px. El botón «Presentar» es solo un icono en móvil. */
#siade-portal-app .siade-cc-hd {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px;
}
#siade-portal-app .siade-cc-hd .mk {
  width: 32px; height: 32px; flex: none;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--mon-ac-bg, #EAF1FB);
  color: var(--mon-ac, #2748AA);
}
#siade-portal-app .siade-cc-hd .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#siade-portal-app .siade-cc-hd .tx > b {
  font: 800 13.6px/1.15 var(--gpds-display);
  color: var(--heading);
  letter-spacing: -.025em;
}
#siade-portal-app .siade-cc-hd .tx > small {
  font: 600 9.8px/1.3 var(--gpds-ui);
  color: var(--muted);
}
#siade-portal-app .siade-cc-hd .pr {
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card);
  color: var(--mon-ac, #2748AA);
  display: grid; place-items: center;
  cursor: pointer;
}

/* ── 1 · «HAZLO» — una línea y un botón ── */
#siade-portal-app .siade-cc-hazlo {
  border: 1px solid var(--mon-hair, var(--line));
  border-left: 4px solid var(--mon-at, #8A5200);
  border-radius: 14px;
  background: var(--card);
  padding: 12px 13px;
  box-shadow: 0 5px 16px rgba(10, 38, 71, .05);
}
#siade-portal-app .siade-cc-hazlo.rojo { border-left-color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-cc-hazlo.azul { border-left-color: #325DD1; }
#siade-portal-app .siade-cc-hazlo .cab {
  display: flex; align-items: center; gap: 7px;
}
#siade-portal-app .siade-cc-hazlo .cab .ic { color: var(--mon-at, #8A5200); flex: none; }
#siade-portal-app .siade-cc-hazlo.rojo .cab .ic { color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-cc-hazlo.azul .cab .ic { color: #2748AA; }
#siade-portal-app .siade-cc-hazlo .cab b {
  font: 800 13.4px/1 var(--gpds-display);
  color: var(--heading);
  letter-spacing: -.018em;
}
#siade-portal-app .siade-cc-hazlo .cab .todo {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: auto;
  min-height: 44px; padding: 0 4px; margin-right: -4px;
  border: 0; background: none;
  color: var(--mon-ac, #2748AA);
  font: 700 10.6px/1 var(--gpds-ui);
  cursor: pointer;
}
#siade-portal-app .siade-cc-hazlo .cu { margin-top: 9px; }
#siade-portal-app .siade-cc-hazlo .cu .e {
  display: block;
  font: 850 8.8px/1.2 var(--gpds-ui);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}
#siade-portal-app .siade-cc-hazlo.rojo .cu .e { color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-cc-hazlo .cu .t {
  display: block;
  font: 700 13.6px/1.32 var(--gpds-ui);
  color: var(--heading);
  margin-top: 3px;
}
#siade-portal-app .siade-cc-hazlo .cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  margin-top: 11px; min-height: 46px;
  border: 0; border-radius: 12px;
  background: #325DD1; color: #fff;
  font: 750 13px/1 var(--gpds-ui);
  cursor: pointer;
  box-shadow: 0 8px 20px -12px rgba(50, 93, 209, .9);
}
#siade-portal-app .siade-cc-hazlo.rojo .cta { background: var(--mon-rg, #9F0B30); }

#siade-portal-app .siade-cc-ok {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 58px;
  border: 1px dashed var(--line); border-radius: 14px;
  color: var(--mon-ok, #177A55);
}
#siade-portal-app .siade-cc-ok b { font: 750 12.6px/1 var(--gpds-ui); }

/* ── 2 · TRES cifras y UNA señal ── */
#siade-portal-app .siade-cc-cif {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
#siade-portal-app .siade-cc-cif .cf {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-height: 58px; min-width: 0;
  border: 1px solid var(--mon-hair, var(--line));
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  font-family: inherit;
}
#siade-portal-app .siade-cc-cif .cf:hover { border-color: #325DD1; }
#siade-portal-app .siade-cc-cif .cf b {
  font: 850 18px/1 var(--gpds-display);
  color: var(--heading);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
#siade-portal-app .siade-cc-cif .cf b.rojo { color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-cc-cif .cf b.amb { color: var(--mon-at, #8A5200); }
#siade-portal-app .siade-cc-cif .cf small {
  font: 650 9.4px/1.2 var(--gpds-ui);
  color: var(--muted);
}

#siade-portal-app .siade-cc-sen {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 60px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--mon-hair, var(--line));
  border-left: 4px solid;
  border-radius: 13px;
  background: var(--card);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
#siade-portal-app .siade-cc-sen.crit { border-left-color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-cc-sen.aten { border-left-color: var(--mon-at, #8A5200); }
#siade-portal-app .siade-cc-sen .ic { flex: none; }
#siade-portal-app .siade-cc-sen.crit .ic { color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-cc-sen.aten .ic { color: var(--mon-at, #8A5200); }
#siade-portal-app .siade-cc-sen .cu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#siade-portal-app .siade-cc-sen .cu b {
  font: 700 12.2px/1.3 var(--gpds-ui);
  color: var(--heading);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
#siade-portal-app .siade-cc-sen .cu small {
  font: 600 9.8px/1.3 var(--gpds-ui);
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#siade-portal-app .siade-cc-sen > svg { flex: none; color: var(--line); }

/* ── 3 · CUATRO accesos ── */
#siade-portal-app .siade-cc-h {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 9px;
}
#siade-portal-app .siade-cc-h h2 {
  font: 800 13.6px/1 var(--gpds-display);
  color: var(--heading);
  letter-spacing: -.022em;
}
#siade-portal-app .siade-cc-h .lk {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: auto;
  min-height: 44px; padding: 0 4px; margin-right: -4px;
  border: 0; background: none;
  color: var(--mon-ac, #2748AA);
  font: 700 10.6px/1 var(--gpds-ui);
  cursor: pointer;
}
#siade-portal-app .siade-cc-hg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
#siade-portal-app .siade-cc-hg .h4 {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 74px; min-width: 0;
  padding: 11px;
  border: 1px solid var(--mon-hair, var(--line));
  border-radius: 13px;
  background: var(--card);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color .15s, transform .15s;
}
#siade-portal-app .siade-cc-hg .h4:hover { border-color: #325DD1; transform: translateY(-1px); }
#siade-portal-app .siade-cc-hg .h4 .ic {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--mon-ac-bg, #EAF1FB);
  color: var(--mon-ac, #2748AA);
  margin-bottom: 5px;
}
#siade-portal-app .siade-cc-hg .h4 .t {
  font: 750 11.8px/1.2 var(--gpds-ui);
  color: var(--heading);
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
#siade-portal-app .siade-cc-hg .h4 .n {
  font: 800 11px/1.2 var(--gpds-ui);
  color: var(--mon-ac, #2748AA);
  font-variant-numeric: tabular-nums;
}

/* ═══ ESCRITORIO — dos columnas, sin cambiar el modelo mental (§14) ═══ */
@media (min-width: 900px) {
  #siade-portal-app .siade-cc {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 16px 18px;
    align-items: start;
  }
  #siade-portal-app .siade-cc-hd { grid-column: 1 / -1; min-height: 52px; }
  #siade-portal-app .siade-cc-hd .pr {
    width: auto; padding: 0 14px;
    gap: 7px;
    display: inline-flex; align-items: center;
    font: 750 12px/1 var(--gpds-ui);
  }
  #siade-portal-app .siade-cc-hd .pr::after {
    content: 'Presentar';
  }
  /* En escritorio caben los 4 accesos en fila, y la señal a plena anchura. */
  #siade-portal-app .siade-cc-hg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #siade-portal-app .siade-cc-b:nth-of-type(3) { grid-column: 1 / -1; }
  #siade-portal-app .siade-cc-cif { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #siade-portal-app .siade-cc-hazlo .cta { width: auto; padding: 0 18px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   22 · EL PANORAMA DE 6 · Y TODAS LAS HERRAMIENTAS  (alpha135.3)
   ───────────────────────────────────────────────────────────────────────────
   «Que se muestren TODAS las herramientas en cajitas: 2 columnas en móvil, 4 en
    computadora. Y el Panorama, 1 fila en computadora y 2 en móvil.»

   Y tenía razón, y me hace afinar la regla de ayer:

   **Los ACCESOS son baratos. El CONTENIDO, no.**

   Una cajita de 74 px con un icono y un nombre no abruma: **orienta**. Lo que
   abrumaba eran las tarjetas de 130 px llenas de texto. La regla no era «menos
   cosas»: era **menos cosas QUE LEER de entrada**.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── EL PANORAMA DE 6 ── */
#siade-portal-app .siade-cc-pan6 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* móvil: 3×2 */
  gap: 1px;
  background: var(--mon-hair, var(--line));
  border: 1px solid var(--mon-hair, var(--line));
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(10, 38, 71, .06);
}
#siade-portal-app .siade-cc-pan6 .c6 {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 0;
  min-height: 104px; min-width: 0;
  padding: 12px 7px;
  border: 0;
  background: var(--card);
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: background .14s;
}
#siade-portal-app .siade-cc-pan6 .c6:hover { background: var(--card-soft); }
#siade-portal-app .siade-cc-pan6 .c6 .ic {
  width: 28px; height: 28px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--mon-ac-bg, #EAF1FB);
  color: var(--mon-ac, #2748AA);
  flex: none;
}
#siade-portal-app .siade-cc-pan6 .c6 .ic.rojo { background: var(--mon-rg-bg, #FBE9EC); color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-cc-pan6 .c6 .ic.amb { background: var(--mon-at-bg, #FBF3E2); color: var(--mon-at, #8A5200); }
#siade-portal-app .siade-cc-pan6 .c6 .v {
  font: 850 19px/1.05 var(--gpds-display);
  color: var(--heading);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
  margin-top: 7px;
  min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#siade-portal-app .siade-cc-pan6 .c6 .v.rojo { color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-cc-pan6 .c6 .v.amb { color: var(--mon-at, #8A5200); }
#siade-portal-app .siade-cc-pan6 .c6 .k {
  font: 700 9.2px/1.25 var(--gpds-ui);
  color: var(--muted);
  margin-top: 3px;
  min-width: 0; max-width: 100%;
}
#siade-portal-app .siade-cc-pan6 .c6 .p {
  display: inline-block;
  margin-top: 5px; padding: 2px 6px;
  border-radius: 20px;
  background: var(--card-soft);
  font: 750 8px/1.4 var(--gpds-ui);
  color: var(--muted);
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#siade-portal-app .siade-cc-pan6 .c6 .p.rojo { background: var(--mon-rg-bg, #FBE9EC); color: var(--mon-rg, #9F0B30); }

/* ── TODAS LAS HERRAMIENTAS: 2 en móvil, 4 en computadora ── */
#siade-portal-app .siade-cc-hg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#siade-portal-app .siade-cc-hg .h4.wide { grid-column: auto; }

/* ── PREMIUM: el detalle que se nota sin verse ── */
#siade-portal-app .siade-cc-hg .h4 {
  position: relative;
  overflow: hidden;
}
#siade-portal-app .siade-cc-hg .h4::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(50, 93, 209, .05), transparent 55%);
  opacity: 0;
  transition: opacity .18s;
  pointer-events: none;
}
#siade-portal-app .siade-cc-hg .h4:hover::after { opacity: 1; }
#siade-portal-app .siade-cc-hg .h4:active { transform: scale(.985); }

#siade-portal-app .siade-cc-hazlo,
#siade-portal-app .siade-cc-sen,
#siade-portal-app .siade-cc-pan6 {
  /* Una sombra doble: la de contacto y la de elevación. Es lo que separa una
     tarjeta que flota de una que está apoyada. */
  box-shadow:
    0 1px 2px rgba(10, 38, 71, .05),
    0 10px 28px -12px rgba(10, 38, 71, .18);
}

/* ═══ ESCRITORIO ═══ */
@media (min-width: 900px) {
  /* El Panorama: UNA fila de 6. */
  #siade-portal-app .siade-cc-pan6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #siade-portal-app .siade-cc-pan6 .c6 { min-height: 116px; }
  /* Las herramientas: CUATRO columnas. */
  #siade-portal-app .siade-cc-hg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Y el Panorama ocupa las dos columnas. */
  #siade-portal-app .siade-cc-b:has(.siade-cc-pan6) { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  #siade-portal-app .siade-cc-pan6 .c6 .v { font-size: 22px; }
  #siade-portal-app .siade-cc-pan6 .c6 .k { font-size: 10px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   23 · LAS 10 HERRAMIENTAS, CON SU SUBTÍTULO  (alpha135.4)
   ───────────────────────────────────────────────────────────────────────────
   «La sección de Seguimiento es lo más cercano a lo que quiero conseguir.»

   Y tenía razón: `siadeMonSeguimiento` YA tenía las diez tarjetas, con sus cifras
   reales **y sus destinos correctos**. Yo creé seis vistas nuevas que las
   duplicaban — y por eso «todas llevaban al mismo lugar».
   ═══════════════════════════════════════════════════════════════════════════ */

#siade-portal-app .siade-cc-hg .h4 { min-height: 108px; padding: 13px 12px; }
#siade-portal-app .siade-cc-hg .h4 .ic { width: 34px; height: 34px; margin-bottom: 8px; }
#siade-portal-app .siade-cc-hg .h4 .ic.rojo { background: var(--mon-rg-bg, #FBE9EC); color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-cc-hg .h4 .ic.verde { background: var(--mon-ok-bg, #E4F3EC); color: var(--mon-ok, #177A55); }
#siade-portal-app .siade-cc-hg .h4 .n { font: 850 18px/1 var(--gpds-display); letter-spacing: -.03em; margin-bottom: 2px; }
#siade-portal-app .siade-cc-hg .h4 .n.rojo { color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-cc-hg .h4 .n.verde { color: var(--mon-ok, #177A55); }
#siade-portal-app .siade-cc-hg .h4 .col {
  display: flex; flex-direction: column;
  min-width: 0; max-width: 100%;
}
#siade-portal-app .siade-cc-hg .h4 .t { font: 750 12.6px/1.25 var(--gpds-ui); }
#siade-portal-app .siade-cc-hg .h4 .s {
  font: 500 10.2px/1.32 var(--gpds-ui);
  color: var(--muted);
  margin-top: 2px;
  min-width: 0; max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 900px) {
  #siade-portal-app .siade-cc-hg { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #siade-portal-app .siade-cc-hg .h4 { min-height: 122px; }
}
@media (min-width: 1280px) {
  #siade-portal-app .siade-cc-hg { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   24 · MONITOREO AVANZADO  (alpha135.5)
   ───────────────────────────────────────────────────────────────────────────
   «Las tarjetas me parecen aburridas: casi todo se ve blanco y azul. Quiero esa
    sensación de monitoreo avanzado.»

   Y tiene razón. Un panel donde TODO es azul no comunica nada: **si todo es igual
   de importante, nada lo es.**

   Lo que lo cambia (y no es decoración — es información):

     1. **COLOR SEMÁNTICO.** Verde = al día. Ámbar = atención. Rojo = urgente.
        El color deja de ser un adorno y pasa a ser **un dato**.
     2. **EL ANILLO DE LA RUTA.** Un donut SVG con el avance real. Se lee de un
        vistazo, sin leer el número.
     3. **EL LATIDO.** Si hay señales críticas, la celda respira. Un panel de
        monitoreo que no se mueve parece apagado.
     4. **LA BARRA DE TIEMPO** de cada acuerdo. Un plazo no se lee: **se siente.**
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · COLOR SEMÁNTICO en las celdas ── */
#siade-portal-app .siade-cc-pan6 .c6 {
  position: relative;
  overflow: hidden;
}
#siade-portal-app .siade-cc-pan6 .c6::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: currentColor;
  opacity: .9;
}
#siade-portal-app .siade-cc-pan6 .c6.t-verde { color: var(--mon-ok, #177A55); }
#siade-portal-app .siade-cc-pan6 .c6.t-amb   { color: var(--mon-at, #8A5200); }
#siade-portal-app .siade-cc-pan6 .c6.t-rojo  { color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-cc-pan6 .c6.t-ac    { color: var(--mon-ac, #2748AA); }

#siade-portal-app .siade-cc-pan6 .c6 .ic {
  background: color-mix(in srgb, currentColor 11%, var(--card));
  color: currentColor;
}
#siade-portal-app .siade-cc-pan6 .c6 .v { color: currentColor; }
#siade-portal-app .siade-cc-pan6 .c6.t-ac .v { color: var(--heading); }
#siade-portal-app .siade-cc-pan6 .c6 .k { color: var(--muted); }
#siade-portal-app .siade-cc-pan6 .c6 .p {
  background: color-mix(in srgb, currentColor 10%, var(--card));
  color: currentColor;
  font-weight: 800;
}
#siade-portal-app .siade-cc-pan6 .c6.t-ac .p { color: var(--muted); background: var(--card-soft); }

/* ── 2 · EL ANILLO DE LA RUTA ── */
#siade-portal-app .siade-cc-pan6 .c6.anillo .ring {
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--mon-ac, #2748AA);
}
#siade-portal-app .siade-cc-pan6 .c6.anillo .v {
  font-size: 15px;
  margin-top: 6px;
  color: var(--mon-ac, #2748AA);
}

/* ── 3 · EL LATIDO (solo si hay críticas) ── */
#siade-portal-app .siade-cc-pan6 .c6.late .ic::after {
  content: '';
  position: absolute;
  width: 30px; height: 30px;
  border-radius: 10px;
  border: 2px solid currentColor;
  opacity: .55;
  animation: siadeLate 2s ease-out infinite;
  pointer-events: none;
}
#siade-portal-app .siade-cc-pan6 .c6.late .ic { position: relative; }
@keyframes siadeLate {
  0%   { transform: scale(.9); opacity: .5; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ── 4 · LOS ACUERDOS VIVOS, con su barra de tiempo ── */
#siade-portal-app .siade-cc-vig .lista { display: flex; flex-direction: column; gap: 7px; }
#siade-portal-app .siade-cc-vig .ac {
  display: flex; align-items: stretch; gap: 11px;
  width: 100%; min-height: 58px;
  padding: 0 12px 0 0;
  border: 1px solid var(--mon-hair, var(--line));
  border-radius: 12px;
  background: var(--card);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}
#siade-portal-app .siade-cc-vig .ac:hover { transform: translateY(-1px); }
#siade-portal-app .siade-cc-vig .ac .bar { flex: none; width: 4px; }
#siade-portal-app .siade-cc-vig .ac.rojo  { border-left: 0; }
#siade-portal-app .siade-cc-vig .ac.rojo .bar   { background: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-cc-vig .ac.ambar .bar  { background: var(--mon-at, #8A5200); }
#siade-portal-app .siade-cc-vig .ac.verde .bar  { background: var(--mon-ok, #177A55); }
#siade-portal-app .siade-cc-vig .ac.sin_fecha .bar {
  background: repeating-linear-gradient(45deg, #C9D3E0, #C9D3E0 3px, #F1F4F8 3px, #F1F4F8 6px);
}
#siade-portal-app .siade-cc-vig .ac .cu {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 10px 0 10px 11px;
}
#siade-portal-app .siade-cc-vig .ac .cu b {
  font: 650 12.2px/1.32 var(--gpds-ui);
  color: var(--heading);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
#siade-portal-app .siade-cc-vig .ac .cu small {
  display: flex; gap: 8px; align-items: center;
  font: 600 10px/1.3 var(--gpds-ui);
  color: var(--muted);
}
#siade-portal-app .siade-cc-vig .ac .cd { font-weight: 800; }
#siade-portal-app .siade-cc-vig .ac.rojo .cd  { color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-cc-vig .ac.ambar .cd { color: var(--mon-at, #8A5200); }
#siade-portal-app .siade-cc-vig .ac.verde .cd { color: var(--mon-ok, #177A55); }

/* ── 5 · Las HERRAMIENTAS dejan de ser todas azules ── */
#siade-portal-app .siade-cc-hg .h4 .ic.rojo::after,
#siade-portal-app .siade-cc-hg .h4 .ic.verde::after { content: none; }
#siade-portal-app .siade-cc-hg .h4:nth-child(1) .ic { background: color-mix(in srgb, var(--mon-at, #8A5200) 12%, var(--card)); color: var(--mon-at, #8A5200); }
#siade-portal-app .siade-cc-hg .h4:nth-child(1) .n  { color: var(--mon-at, #8A5200); }
#siade-portal-app .siade-cc-hg .h4:nth-child(3) .ic { background: color-mix(in srgb, #123172 11%, var(--card)); color: #123172; }
#siade-portal-app .siade-cc-hg .h4:nth-child(4) .ic { background: color-mix(in srgb, #5486C9 15%, var(--card)); color: #2748AA; }

/* ── 6 · ESCRITORIO: «Nada pendiente» y los acuerdos vivos, lado a lado ── */
@media (min-width: 900px) {
  #siade-portal-app .siade-cc-vig { grid-column: auto; }
  #siade-portal-app .siade-cc-pan6 .c6 { min-height: 122px; }
  #siade-portal-app .siade-cc-pan6 .c6.anillo .v { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  #siade-portal-app .siade-cc-pan6 .c6.late .ic::after { animation: none; opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   25 · EL ESCRITORIO, COMPACTO Y LLENO  (alpha135.6)
   ───────────────────────────────────────────────────────────────────────────
   «En escritorio hay que corregir: debe verse compacta y completar la pantalla.»

   El problema no era el ancho: era que **el texto se cortaba** («Indicad… y metas»,
   «Cumpli…», «Evidenci…»). Cinco columnas de 180 px no caben con un título de dos
   palabras y un subtítulo.

   **La solución no es apretar más: es dar el ancho que el contenido pide.**
   Cuatro columnas, tarjetas horizontales, y el layout llena la pantalla.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {
  #siade-portal-app .siade-cc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 16px;
  }

  /* Las herramientas: CUATRO columnas, HORIZONTALES. El texto respira. */
  #siade-portal-app .siade-cc-hg {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
  }
  #siade-portal-app .siade-cc-hg .h4 {
    flex-direction: row;
    align-items: center;
    gap: 11px;
    min-height: 76px;
    padding: 12px 13px;
  }
  #siade-portal-app .siade-cc-hg .h4 .ic { margin-bottom: 0; flex: none; }
  /* El contenido a la derecha del icono. Sin `display:none` — **esconder texto
     es esconder un bug**, no arreglarlo. */
  #siade-portal-app .siade-cc-hg .h4 .col { flex: 1; min-width: 0; }

  /* El Panorama: SEIS en una fila, ocupando el ancho entero. */
  #siade-portal-app .siade-cc-b:has(.siade-cc-pan6) { grid-column: 1 / -1; }
  #siade-portal-app .siade-cc-pan6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #siade-portal-app .siade-cc-pan6 .c6 { min-height: 118px; padding: 13px 9px; }

  /* Herramientas a lo ancho. */
  #siade-portal-app .siade-cc-b:has(.siade-cc-hg) { grid-column: 1 / -1; }

  /* «Nada pendiente» y los acuerdos vivos, lado a lado y a la misma altura. */
  #siade-portal-app .siade-cc-vig .lista { gap: 8px; }
  #siade-portal-app .siade-cc-ok { min-height: 100%; }
}

@media (min-width: 1280px) {
  #siade-portal-app .siade-cc-hg { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #siade-portal-app .siade-cc-hg .h4 { min-height: 80px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   26 · LA TENDENCIA  (alpha135.7)
   ───────────────────────────────────────────────────────────────────────────
   «68.48 % está bien… ¿comparado con qué?»

   Un panel que no dice si algo **mejora o empeora** no monitorea: describe.

   Y la distinción que casi todos los paneles se saltan —y que hace que mientan con
   una flecha verde—:

       **«qué hizo el número» ≠ «si eso es bueno»**

   En desnutrición, BAJAR es mejorar. En agua, SUBIR es mejorar. Si la dirección de
   mejora no está declarada, **el cambio se muestra SIN juzgarlo**. Porque no lo
   sabemos, y suponerlo sería inventar.
   ═══════════════════════════════════════════════════════════════════════════ */

#siade-portal-app .siade-cc-tend .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
}
#siade-portal-app .siade-tend {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0; min-height: 92px;
  padding: 12px;
  border: 1px solid var(--mon-hair, var(--line));
  border-left: 3px solid var(--line);
  border-radius: 13px;
  background: var(--card);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(10,38,71,.04), 0 8px 22px -14px rgba(10,38,71,.2);
  transition: transform .15s, border-color .15s;
}
#siade-portal-app .siade-tend:hover { transform: translateY(-1px); }
#siade-portal-app .siade-tend.mejora  { border-left-color: var(--mon-ok, #177A55); }
#siade-portal-app .siade-tend.empeora { border-left-color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-tend.igual,
#siade-portal-app .siade-tend.neutro  { border-left-color: var(--mon-ac, #2748AA); }
#siade-portal-app .siade-tend.sinserie { border-left-color: var(--line); opacity: .78; }

#siade-portal-app .siade-tend .cab {
  display: flex; align-items: flex-start; gap: 8px;
  min-width: 0;
}
#siade-portal-app .siade-tend .cab b {
  flex: 1; min-width: 0;
  font: 700 11.4px/1.3 var(--gpds-ui);
  color: var(--heading);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
#siade-portal-app .siade-tend .ch {
  display: inline-flex; align-items: center; gap: 3px;
  flex: none;
  padding: 3px 7px;
  border-radius: 20px;
  font: 800 10px/1 var(--gpds-ui);
  font-variant-numeric: tabular-nums;
}
#siade-portal-app .siade-tend.mejora .ch  { background: var(--mon-ok-bg, #E4F3EC); color: var(--mon-ok, #177A55); }
#siade-portal-app .siade-tend.empeora .ch { background: var(--mon-rg-bg, #FBE9EC); color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-tend.neutro .ch,
#siade-portal-app .siade-tend.igual .ch   { background: var(--card-soft); color: var(--muted); }

#siade-portal-app .siade-tend .fila {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  min-width: 0;
}
#siade-portal-app .siade-tend .v {
  font: 850 21px/1 var(--gpds-display);
  color: var(--heading);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  display: inline-flex; align-items: baseline; gap: 2px;
}
#siade-portal-app .siade-tend .v small {
  font: 700 11px/1 var(--gpds-ui);
  color: var(--muted);
}
#siade-portal-app .siade-spark { flex: none; }
#siade-portal-app .siade-spark.mejora  { color: var(--mon-ok, #177A55); }
#siade-portal-app .siade-spark.empeora { color: var(--mon-rg, #9F0B30); }
#siade-portal-app .siade-spark.neutro,
#siade-portal-app .siade-spark.igual   { color: var(--mon-ac, #2748AA); }

#siade-portal-app .siade-tend .pie {
  font: 600 9.6px/1.35 var(--gpds-ui);
  color: var(--muted);
}
#siade-portal-app .siade-tend.mejora .pie  { color: var(--mon-ok, #177A55); }
#siade-portal-app .siade-tend.empeora .pie { color: var(--mon-rg, #9F0B30); }

@media (min-width: 900px) {
  #siade-portal-app .siade-cc-tend .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #siade-portal-app .siade-cc-b:has(.siade-cc-tend), 
  #siade-portal-app .siade-cc-tend { grid-column: 1 / -1; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   27 · LA ACREDITACIÓN, Y LA TARJETA COMPACTA  (alpha135.9)
   ═══════════════════════════════════════════════════════════════════════════ */

#siade-portal-app .siade-inst-acr {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--mon-ac, #2748AA);
  font: 900 10.2px/1 var(--gpds-ui);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
#siade-portal-app .siade-inst-acr:hover {
  border-color: #325DD1;
  background: var(--card-soft);
}


/* ═══════════════════════════════════════════════════════════════════════════
   28 · EL MODO OSCURO DEL HOME  (alpha136.0)
   ───────────────────────────────────────────────────────────────────────────
   MI ERROR DE MÉTODO: medí el contraste en el **Centro**, no en el **Home**.
   **Probé lo que no era.** Y el propietario lo vio en la pantalla que yo no miré.

   Los cinco ilegibles, medidos con WCAG sobre el DOM real:

       «Acreditación»      2.1:1   ← mi propio botón nuevo
       «Agenda próxima»    3.2:1
       «Monitoreo →»       3.2:1
       «CODEDE Ampliado»   1.0:1   ← INVISIBLE
       «Salón Rodeo…»      2.6:1

   LA CAUSA, y es conceptual:

   **Azul Territorio #325DD1 es un color de ACCIÓN sobre fondo CLARO.** Sobre un
   fondo oscuro **no llega a AA** — 3.2:1 contra el 4.5 que exige la norma.

   No se arregla «aclarando un poco»: **hace falta la versión clara del token.**
   ═══════════════════════════════════════════════════════════════════════════ */

/* Las versiones OSCURAS de MIS tokens. El tema define los suyos (`--card`, `--text`,
   `--muted`…), pero **los del Monitoreo los definí yo, y no les di versión oscura**.
   Sin esto, un fondo crema fijo con texto azul claro da 2.0:1. */
[data-theme="dark"],
.siade-portal-root[data-theme="dark"],
#siade-portal-app[data-theme="dark"],
[data-theme="dark"] #siade-portal-app {
  --terr-on-dark: #8FB2F5;
  --mon-ac: #8FB2F5;
  --mon-ac-bg: rgba(143, 178, 245, .14);
  --mon-at: #F3C04D;
  --mon-at-bg: rgba(243, 192, 77, .14);
  --mon-ok: #82CFB3;
  --mon-ok-bg: rgba(130, 207, 179, .14);
  --mon-rg: #FDA4B5;
  --mon-rg-bg: rgba(253, 164, 181, .14);
  --mon-hair: #334155;
}

/* Todo lo que use Azul Territorio como TEXTO, en oscuro, usa la versión clara. */
[data-theme="dark"] #siade-portal-app .siade-inst-acr,
.siade-portal-root[data-theme="dark"] .siade-inst-acr {
  color: var(--terr-on-dark, #8FB2F5);
  border-color: color-mix(in srgb, var(--terr-on-dark, #8FB2F5) 30%, transparent);
}

/* NOTA: NO se pisan los enlaces con un selector global. Mi primer intento lo hizo, y
   **rompió los enlaces que están sobre tarjetas claras** — que en modo oscuro siguen
   siendo claras. El azul claro sobre fondo claro da 2.1:1.

   **Un arreglo que rompe otra cosa no es un arreglo.**

   La solución correcta es la del ORIGEN: los colores del JS pasan a TOKEN, y el token
   cambia con el tema. Es lo que el GDS exige desde el principio: **cero HEX literales
   en los componentes.** */


/* ═══════════════════════════════════════════════════════════════════════════
   29 · LA TARJETA DEL REPRESENTANTE, COMPACTA  (alpha136.1)
   ───────────────────────────────────────────────────────────────────────────
   «Donde está Nombramiento debe ser más compacta: la tarjetita está muy alta.»
   ═══════════════════════════════════════════════════════════════════════════ */

#siade-portal-app .siade-inst-rep,
#siade-portal-app [class*="inst-rep"] {
  padding: 12px !important;
}
/* La foto: de 88 px a 64. Sigue reconociéndose, y la tarjeta baja 24 px. */
#siade-portal-app .siade-inst-rep img,
#siade-portal-app .siade-inst-rep [class*="avatar"] {
  width: 64px !important;
  height: 64px !important;
}
/* Los botones, en fila. Antes el lápiz se caía a otra línea. */
#siade-portal-app .siade-inst-rep .acciones,
#siade-portal-app .siade-inst-acr {
  min-height: 40px;
}
#siade-portal-app .siade-inst-acr { padding: 0 9px; font-size: 9.6px; }


/* ═══════════════════════════════════════════════════════════════════════════
   30 · LOS TRES QUE FALTABAN  (alpha136.2)
   ───────────────────────────────────────────────────────────────────────────
   «SEMANA» (1.3:1) · «CODEDE Ampliado» (1.0:1) · «Salón Rodeo Caporal» (2.6:1)

   Los perseguí en tres entregas. Están en tarjetas del Home cuyo fondo se pinta
   con un `style` inline que no puedo cambiar sin tocar el componente.

   **La regla es ACOTADA a propósito**: solo el Home, solo en oscuro, y solo los
   contenedores que de verdad se quedan claros. Una regla global rompería los que
   ya funcionan — ya me pasó, y no lo repito.
   ═══════════════════════════════════════════════════════════════════════════ */

/* En oscuro, cualquier tarjeta del Home con fondo claro inline se corrige. */
[data-theme="dark"] #siade-portal-app [style*="background: rgb(255, 255, 255)"],
[data-theme="dark"] #siade-portal-app [style*="background: #fff"],
[data-theme="dark"] #siade-portal-app [style*="background: #FFF"],
[data-theme="dark"] #siade-portal-app [style*="rgb(248, 250, 252)"],
[data-theme="dark"] #siade-portal-app [style*="#F8FAFC"],
[data-theme="dark"] #siade-portal-app [style*="#FFF7E5"],
[data-theme="dark"] #siade-portal-app [style*="#f8fafc"] {
  background: var(--card) !important;
  color: var(--text) !important;
}

/* Y sus hijos, que heredaban un texto pensado para fondo claro. */
[data-theme="dark"] #siade-portal-app [style*="background: rgb(255, 255, 255)"] *,
[data-theme="dark"] #siade-portal-app [style*="rgb(248, 250, 252)"] *,
[data-theme="dark"] #siade-portal-app [style*="#FFF7E5"] * {
  color: inherit;
}

/* Los textos secundarios mantienen su jerarquía — no todo en blanco. */
[data-theme="dark"] #siade-portal-app [style*="rgb(148, 163, 184)"],
[data-theme="dark"] #siade-portal-app [style*="#94A3B8"] {
  color: var(--text-soft, #CBD5E1) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   31 · EL CALENDARIO: EL HUECO Y EL BORDE  (alpha136.5)
   ───────────────────────────────────────────────────────────────────────────
   «El botón de agregar actividad se ve muy abajo, como que se pasó llevando una
    parte en blanco.»
   «Ese gris del borde del calendario está muy pronunciado.»

   Las dos, ciertas. Y las dos son de la misma familia: **espacio y peso que no
   comunican nada.** Un hueco no dice nada. Un borde grueso tampoco.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── El modal del DÍA, compacto ── */
#siade-portal-app .siade-modal-b:has(.siade-mon-vacio),
.siade-portal-root .siade-modal-b:has(.siade-mon-vacio) {
  padding-top: 6px;
  padding-bottom: 6px;
}
/* El estado vacío de un día sin actividades: es un mensaje breve, no una pantalla. */
#siade-portal-app .siade-modal-b > div[style*="text-align: center"]:first-child {
  padding: 14px 18px 10px !important;
}
/* Y el botón sube: pegado al mensaje, no al fondo del diálogo. */
#siade-portal-app .siade-modal-b > button:last-child,
#siade-portal-app .siade-modal-b > div > button:last-child {
  margin-top: 4px;
}

/* ── EL BORDE DEL CALENDARIO ──
   Era 1px sólido y opaco en cada celda: 42 líneas grises que compiten con el
   contenido. **La rejilla se lee por el ESPACIO, no por el trazo.** */
#siade-portal-app .siade-cal-grid,
.siade-portal-root .siade-cal-grid {
  gap: 3px !important;
  background: transparent !important;
  padding: 6px !important;
}
#siade-portal-app .siade-cal-cell,
#siade-portal-app .siade-cal-grid > div,
.siade-portal-root .siade-cal-cell {
  border: 1px solid color-mix(in srgb, var(--line) 55%, transparent) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}
/* Los días vacíos, aún más discretos: no hay nada que mirar ahí. */
#siade-portal-app .siade-cal-cell:empty,
#siade-portal-app .siade-cal-cell.is-empty {
  border-color: color-mix(in srgb, var(--line) 28%, transparent) !important;
  background: transparent !important;
}
/* Y la tarjeta del calendario: un borde, no dos. */
#siade-portal-app .siade-calendar-card,
.siade-portal-root .siade-calendar-card {
  border: 1px solid var(--line) !important;
  box-shadow: 0 1px 2px rgba(10,38,71,.04), 0 14px 34px -26px rgba(10,38,71,.35) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   31 · EL HUECO DEL MODAL DEL DÍA  (alpha136.5)
   ───────────────────────────────────────────────────────────────────────────
   «El botón de agregar actividad se ve muy abajo, como que se pasó llevando una
    parte en blanco.»

   La hoja del modal se estira siempre a su altura máxima, aunque el contenido
   sea «No hay actividades este día» + un botón. El resultado: **un hueco enorme**
   entre el mensaje y el botón.

   La hoja debe medir **lo que mide su contenido** — y solo llegar al máximo cuando
   de verdad lo necesita.
   ═══════════════════════════════════════════════════════════════════════════ */

#siade-portal-app .siade-modal-b {
  /* `flex: 1 1 auto` con `min-height: 0` estaba bien. Lo que faltaba: que el
     CONTENEDOR no imponga una altura mínima. */
  flex: 0 1 auto !important;
}
#siade-portal-app .siade-modal-b > * { flex: none; }

/* Y en móvil, la hoja se ajusta al contenido — hasta el 92 % de la pantalla. */
@media (max-width: 720px) {
  #siade-portal-app [class*="siade-modal"]:not(.siade-modal-ov) {
    height: auto !important;
    max-height: 92svh !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   32 · LA MATRIZ DE PERMISOS  (alpha136.6)
   ───────────────────────────────────────────────────────────────────────────
   Generada desde el CÓDIGO REAL. En móvil se lee un rol cada vez; en escritorio,
   los cinco a la vez.
   ═══════════════════════════════════════════════════════════════════════════ */

#siade-portal-app .siade-mx { display: flex; flex-direction: column; gap: 14px; }
#siade-portal-app .siade-mx-hd {
  display: flex; align-items: flex-start; gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
#siade-portal-app .siade-mx-hd .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#siade-portal-app .siade-mx-hd b { font: 800 16px/1.2 var(--gpds-display); color: var(--heading); letter-spacing: -.025em; }
#siade-portal-app .siade-mx-hd small { font: 550 11px/1.45 var(--gpds-ui); color: var(--muted); }
#siade-portal-app .siade-mx-hd .mio {
  flex: none;
  padding: 6px 10px; border-radius: 20px;
  background: var(--mon-ac-bg, #EAF1FB);
  color: var(--mon-ac, #2748AA);
  font: 650 10.6px/1.3 var(--gpds-ui);
}
#siade-portal-app .siade-mx-hd .mio b { font: 850 10.6px/1.3 var(--gpds-ui); color: inherit; }

/* Los roles: se tocan para filtrar. */
#siade-portal-app .siade-mx-roles {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
#siade-portal-app .siade-mx-roles .rol {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0; min-height: 76px;
  padding: 11px 12px;
  border: 1px solid var(--mon-hair, var(--line));
  border-left: 3px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  text-align: left; cursor: pointer; font-family: inherit;
  transition: border-color .15s, transform .15s;
}
#siade-portal-app .siade-mx-roles .rol:hover { transform: translateY(-1px); }
#siade-portal-app .siade-mx-roles .rol.on { border-left-color: #325DD1; border-color: #325DD1; }
#siade-portal-app .siade-mx-roles .rol.mio { border-left-color: var(--mon-ok, #177A55); }
#siade-portal-app .siade-mx-roles .rol b { font: 750 12.4px/1.2 var(--gpds-ui); color: var(--heading); }
#siade-portal-app .siade-mx-roles .rol small { font: 550 10px/1.35 var(--gpds-ui); color: var(--muted); }
#siade-portal-app .siade-mx-roles .rol .n {
  margin-top: auto;
  font: 800 9.6px/1 var(--gpds-ui);
  color: var(--mon-ac, #2748AA);
  font-variant-numeric: tabular-nums;
}

/* La tabla. */
#siade-portal-app .siade-mx-tabla { display: flex; flex-direction: column; gap: 16px; }
#siade-portal-app .siade-mx-tabla .grupo h3 {
  font: 800 9.6px/1 var(--gpds-ui);
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 8px;
}
#siade-portal-app .siade-mx-tabla table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--mon-hair, var(--line));
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
}
#siade-portal-app .siade-mx-tabla th,
#siade-portal-app .siade-mx-tabla td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--mon-hair, var(--line));
  text-align: center;
}
#siade-portal-app .siade-mx-tabla tr:last-child td { border-bottom: 0; }
#siade-portal-app .siade-mx-tabla th {
  background: var(--card-soft);
  font: 800 9.6px/1.25 var(--gpds-ui);
  color: var(--heading);
}
#siade-portal-app .siade-mx-tabla th.cap,
#siade-portal-app .siade-mx-tabla td.cap {
  text-align: left;
  font: 600 11px/1.35 var(--gpds-ui);
  color: var(--text);
  width: 44%;
}
#siade-portal-app .siade-mx-tabla td.v.si { color: var(--mon-ok, #177A55); }
#siade-portal-app .siade-mx-tabla td.v.no { color: var(--line); }
#siade-portal-app .siade-mx-tabla td.v .x { font: 700 12px/1 var(--gpds-ui); color: var(--muted); opacity: .45; }
#siade-portal-app .siade-mx-tabla th.mio,
#siade-portal-app .siade-mx-tabla td.mio { background: var(--mon-ok-bg, #E4F3EC); }

/* La nota. */
#siade-portal-app .siade-mx-nota {
  display: flex; gap: 11px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--mon-ac, #2748AA) 20%, transparent);
  border-radius: 13px;
  background: var(--mon-ac-bg, #EAF1FB);
}
#siade-portal-app .siade-mx-nota svg { flex: none; color: var(--mon-ac, #2748AA); margin-top: 1px; }
#siade-portal-app .siade-mx-nota b { font: 800 12px/1.3 var(--gpds-ui); color: var(--mon-ac, #2748AA); }
#siade-portal-app .siade-mx-nota p { font: 550 11px/1.5 var(--gpds-ui); color: var(--text); margin-top: 4px; }

@media (min-width: 900px) {
  #siade-portal-app .siade-mx-roles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #siade-portal-app .siade-mx-tabla th.cap,
  #siade-portal-app .siade-mx-tabla td.cap { width: 34%; }
}

/* ══════════ 34. Movimiento reducido ══════════ */
@media (prefers-reduced-motion: reduce) {
  #siade-portal-app * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}