/* Tablero Académico · Unidad Educativa Montessori
   Paleta extraída de sus activos reales. Ver DESIGN.md.
   El dorado y el verde de marca NO se usan para texto sobre blanco:
   miden 2,45:1 y 3,12:1 y reprueban AA. Sobre navy pasan sobrados. */

:root {
  --azul:        #03045E;
  --azul-logo:   #314A97;
  --dorado:      #DD9817;
  --verde:       #22A66C;
  --dorado-txt:  #9C6C10;   /* variante accesible sobre blanco */
  --verde-txt:   #1B8657;

  --tinta:       #1C1C1E;
  --tinta-suave: #6B6F76;
  --linea:       #D9DDE1;
  --fondo:       #FFFFFF;
  --fondo-suave: #F7F8FA;

  --ok:     #1B7F4F;
  --alerta: #8A5A00;
  --riesgo: #B3261E;
  --nada:   #6B6F76;

  --r: 12px;
  --sombra: 0 1px 2px rgba(3,4,94,.06), 0 4px 16px rgba(3,4,94,.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--tinta);
  background: var(--fondo-suave);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Las cifras no deben bailar cuando el dato se actualiza en vivo. */
.cifra, .num, .tabla td.num, .valor { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- barra */

.barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 18px 24px;
  background: var(--azul);
  color: #fff;
}
.marca { display: flex; align-items: center; gap: 14px; }
.arco { width: 44px; height: 26px; flex: none; }
.barra h1 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.barra .sub { margin: 2px 0 0; font-size: .82rem; color: #C7CBE8; }

.barra-der { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.trim {
  font-size: .82rem; font-weight: 600;
  color: var(--dorado);            /* 7,25:1 sobre navy */
  border: 1px solid rgba(221,152,23,.4);
  padding: 5px 11px; border-radius: 999px;
}
.frescura { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: #C7CBE8; }
.frescura .punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--verde); flex: none;
}
.frescura.viejo .punto { background: var(--nada); }
.frescura.viejo { color: #9AA0C4; }
.frescura.error .punto { background: #FF8A80; }

/* ----------------------------------------------------------------- main */

main { max-width: 1240px; margin: 0 auto; padding: 22px 20px 60px; }
.panel {
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: var(--r); box-shadow: var(--sombra);
  padding: 20px; margin-bottom: 20px;
}
.panel-cab { margin-bottom: 14px; }
.panel h2 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.nota { margin: 5px 0 0; font-size: .8rem; color: var(--tinta-suave); }

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ----------------------------------------------------------------- kpis */

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.kpi {
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: var(--r); box-shadow: var(--sombra); padding: 18px 20px;
}
.kpi.destacado { background: var(--azul); border-color: var(--azul); color: #fff; }
.kpi h2 { margin: 0; font-size: .76rem; font-weight: 600; text-transform: uppercase;
          letter-spacing: .06em; color: var(--tinta-suave); }
.kpi.destacado h2 { color: #C7CBE8; }
.cifra { margin: 8px 0 4px; font-size: 2.3rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.kpi.destacado .cifra { color: var(--dorado); }
.kpi .pie { margin: 0; font-size: .78rem; color: var(--tinta-suave); }
.kpi.destacado .pie { color: #C7CBE8; }

/* -------------------------------------------------------------- avisos */

.avisos:empty { display: none; }
.aviso {
  display: flex; gap: 9px; align-items: flex-start;
  background: #FFF8E6; border: 1px solid #F0DCA8;
  border-radius: 10px; padding: 11px 14px; margin-bottom: 10px; font-size: .84rem;
}
.aviso .ic { color: var(--dorado-txt); font-weight: 700; flex: none; }

/* ------------------------------------------------------------- cuellos */

.cuellos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cuello {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start;
  border: 1px solid var(--linea); border-radius: 10px; padding: 12px 14px;
  background: var(--fondo-suave);
}
/* La gravedad se NOMBRA, no solo se colorea: color + ícono + palabra, igual que
   el semáforo. Un directivo daltónico tiene que poder priorizar. */
.cuello .grav {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 4px;
}
.cuello.alta  .grav { color: var(--riesgo); }
.cuello.media .grav { color: var(--alerta); }
.cuello .tit { margin: 0; font-weight: 650; font-size: .9rem; }
.cuello .det { margin: 3px 0 0; font-size: .82rem; color: var(--tinta-suave); }
.cuello .cuenta {
  font-size: .74rem; font-weight: 700; color: var(--tinta-suave);
  white-space: nowrap; padding-top: 2px;
}

/* -------------------------------------------------------------- cursos */

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.curso { border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.curso-cab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 12px 14px; background: var(--azul); color: #fff;
}
.curso-cab h3 { margin: 0; font-size: .95rem; font-weight: 700; }
.curso-cab .ritmo { font-size: 1.05rem; font-weight: 700; color: var(--dorado); }
.curso-cuerpo { padding: 12px 14px; }
.lider {
  background: #F2F7F4; border: 1px solid #CFE4D8; border-radius: 8px;
  padding: 9px 11px; margin-bottom: 11px; font-size: .84rem;
}
.lider .quien { font-weight: 700; color: var(--verde-txt); }
.lider .prof { color: var(--tinta-suave); }
.lider.vacio { background: var(--fondo-suave); border-color: var(--linea); }

.par { display: flex; align-items: center; gap: 9px; margin: 7px 0; font-size: .83rem; }
.par .etq { width: 22px; font-weight: 700; }
.par .barra-p { flex: 1; height: 7px; border-radius: 4px; background: #ECEEF1; overflow: hidden; }
.par .barra-p i { display: block; height: 100%; border-radius: 4px; background: var(--azul-logo); }
.par .valor { width: 52px; text-align: right; color: var(--tinta-suave); }

/* --------------------------------------------------------------- podio */

.podio { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.podio li {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 11px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: .88rem;
}
.podio li:last-child { border-bottom: 0; }
.podio li::before {
  counter-increment: p; content: counter(p);
  font-size: .76rem; font-weight: 700; color: var(--tinta-suave);
  text-align: center;
}
.podio .nom { font-weight: 600; }
.podio .meta-p { font-size: .76rem; color: var(--tinta-suave); font-weight: 400; }
.podio .ind { font-weight: 700; text-align: right; }
.podio li.sindato .nom, .podio li.sindato .ind { color: var(--tinta-suave); font-weight: 500; }

/* --------------------------------------------------------------- tabla */

.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tabla th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-suave); font-weight: 700;
  padding: 8px 10px; border-bottom: 2px solid var(--linea); white-space: nowrap;
}
.tabla td { padding: 9px 10px; border-bottom: 1px solid var(--linea); }
.tabla .num { text-align: right; }
.tabla tbody tr:hover { background: var(--fondo-suave); }
.tabla .sinreportar td { color: var(--tinta-suave); }
.malplan { font-weight: 700; color: var(--riesgo); }
.buenplan { color: var(--tinta-suave); }

/* Semáforo: SIEMPRE color + ícono + texto. Nunca solo color. */
.estado { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 600; }
.estado .ic { font-size: .8em; }
.estado.en_ritmo     { color: var(--ok); }
.estado.alerta       { color: var(--alerta); }
.estado.riesgo       { color: var(--riesgo); }
.estado.sin_reportar { color: var(--nada); font-weight: 500; }

/* --------------------------------------------------------------- chips */

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-size: .78rem; padding: 5px 10px; border-radius: 999px;
  background: var(--fondo-suave); border: 1px solid var(--linea); color: var(--tinta-suave);
}

.pie-pagina { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linea); }
.pie-pagina p { margin: 0 0 6px; font-size: .8rem; }
.pie-pagina strong { color: var(--azul); }

.cargando { padding: 60px 20px; text-align: center; color: var(--tinta-suave); }

/* ---------------------------------------------------------- responsive */

@media (max-width: 960px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  /* minmax(0,1fr), no 1fr: el track 1fr nace en 'auto' y un panel con contenido
     de ancho mínimo alto (la lista trimestral) lo desborda. Es el mismo grid
     blowout que ya se corrigió en .disposicion. */
  .dos  { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr; }
  .cifra { font-size: 2rem; }
  main { padding: 16px 12px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   v2 · disposición de tres niveles y gráficas
   ══════════════════════════════════════════════════════════════════════ */

.disposicion { display: grid; grid-template-columns: 268px 1fr; align-items: start;
               max-width: 1500px; margin: 0 auto; }
.disposicion > main { max-width: none; padding: 22px 24px 60px; min-width: 0; }

/* ------------------------------------------------------ navegador años */

.lateral { position: sticky; top: 0; align-self: stretch; min-height: 100vh; max-height: 100vh; overflow-y: auto;
           padding: 20px 14px 40px; border-right: 1px solid var(--linea); background: var(--fondo); }
.nav-inicio { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
              font: inherit; font-size: .86rem; font-weight: 600; color: var(--tinta);
              background: none; border: 1px solid transparent; border-radius: 8px;
              padding: 9px 11px; cursor: pointer; }
.nav-inicio:hover { background: var(--fondo-suave); }
.nav-inicio.activo { background: var(--azul); color: #fff; border-color: var(--azul); }
.nav-ic { opacity: .7; }
.nav-tit { margin: 20px 0 7px 11px; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
           text-transform: uppercase; color: var(--tinta-suave); }
.nav-pie { margin: 20px 11px 0; font-size: .7rem; line-height: 1.45; color: var(--tinta-suave); }

.nav-grupo { border-bottom: 1px solid var(--linea); }
.nav-grupo:last-of-type { border-bottom: 0; }
.nav-grupo > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px;
                       padding: 9px 11px; cursor: pointer; list-style: none; border-radius: 8px; }
.nav-grupo > summary::-webkit-details-marker { display: none; }
.nav-grupo > summary:hover { background: var(--fondo-suave); }
.nav-sn { font-size: .8rem; font-weight: 650; }
.nav-sn-ritmo { font-size: .76rem; font-weight: 700; color: var(--azul-logo); font-variant-numeric: tabular-nums; }
.nav-sn-ritmo.apagado { color: var(--tinta-suave); font-weight: 500; font-size: .7rem; }

.nav-anio { display: flex; align-items: center; justify-content: space-between; gap: 8px;
            width: 100%; font: inherit; font-size: .8rem; text-align: left; cursor: pointer;
            background: none; border: 0; border-radius: 7px; padding: 7px 11px 7px 22px; color: var(--tinta); }
.nav-anio:hover { background: var(--fondo-suave); }
.nav-anio.activo { background: #EEF1FA; font-weight: 650; }
/* Preparatoria (= 1.º EGB): fila única, al nivel de los subniveles, no indentada
   como un hijo. Que se lea como una sola cosa. */
.nav-anio-solo { padding: 9px 11px; font-weight: 650; border-bottom: 1px solid var(--linea); }
.nav-anio-solo .nav-nom { font-weight: 650; }
.nav-anio .estado { font-size: .72rem; }
.nav-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------- vista año */

.migas { margin-bottom: 14px; }
.migas button { font: inherit; font-size: .82rem; font-weight: 600; color: var(--azul-logo);
                background: none; border: 0; cursor: pointer; padding: 4px 0; }
.migas button:hover { text-decoration: underline; }

.anio-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
            flex-wrap: wrap; background: var(--azul); color: #fff;
            border-radius: var(--r); padding: 20px 22px; margin-bottom: 20px; }
.anio-cab h2 { margin: 0; font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; }
.anio-cab .nota { color: #C7CBE8; }
.anio-cifras { display: flex; gap: 26px; }
.anio-cifra { display: flex; flex-direction: column; }
.anio-cifra .et { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: #C7CBE8; }
.anio-cifra .vl { font-size: 1.5rem; font-weight: 700; color: var(--dorado); font-variant-numeric: tabular-nums; }

.vacio-grande { text-align: center; padding: 40px 24px; }
.vacio-grande .tit { margin: 0 0 6px; font-weight: 650; }

/* --------------------------------------------------------------- barras */

.g-barras, .g-div { display: grid; gap: 9px; }
.g-fila { display: grid; grid-template-columns: 132px 1fr 62px; gap: 11px; align-items: center;
          font-size: .82rem; }
.g-fila:has(.g-nota) { grid-template-columns: 132px 1fr 62px minmax(0, 118px); }
.g-etq { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-pista { position: relative; height: 16px; background: #EFF1F4; border-radius: 4px; overflow: hidden; }
.g-barra { display: block; height: 100%; border-radius: 0 4px 4px 0; transition: width .3s cubic-bezier(.16,1,.3,1); }
.g-meta { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--tinta-suave);
          opacity: .55; z-index: 2; }
.g-vacio { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 8px;
           font-size: .7rem; color: var(--tinta-suave);
           background: repeating-linear-gradient(45deg, transparent, transparent 5px, #E4E7EB 5px, #E4E7EB 6px); }
.g-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta-suave); }
.g-nota { font-size: .72rem; color: var(--tinta-suave); overflow: hidden;
          text-overflow: ellipsis; white-space: nowrap; }
.g-sindato .g-etq { color: var(--tinta-suave); font-weight: 500; }

/* ---------------------------------------------------------- divergentes */

.g-pista-div { position: relative; height: 16px; background: #EFF1F4; border-radius: 4px; }
.g-cero { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--tinta-suave); opacity: .5; }
.g-barra-div { position: absolute; top: 0; height: 100%; border-radius: 3px; }
.g-barra-div.neg { background: #9C6C10; }
.g-barra-div.pos { background: #22A66C; }

/* ---------------------------------------------------------------- svg */

.g-svg { width: 100%; height: auto; display: block; }
.g-tick { font-size: 10px; fill: var(--tinta-suave); }
.g-rot { font-size: 11px; font-weight: 700; fill: var(--azul); }
.g-rot-gris { font-size: 11px; font-weight: 600; fill: var(--tinta-suave); }

/* --------------------------------------------------------- mapa de calor */

.g-calor-envoltura { overflow-x: auto; }
.g-calor { border-collapse: separate; border-spacing: 2px; font-size: .78rem; }
.g-calor th { font-weight: 600; color: var(--tinta-suave); font-size: .72rem; padding: 4px 8px;
              text-align: left; white-space: nowrap; }
.g-calor-lbl { text-align: right !important; }
.g-celda { width: 74px; height: 30px; text-align: center; border-radius: 4px;
           font-variant-numeric: tabular-nums; font-weight: 600; cursor: default; }
.g-celda.vacia { background: repeating-linear-gradient(45deg, #FAFBFC, #FAFBFC 5px, #EEF0F3 5px, #EEF0F3 6px);
                 border: 1px dashed var(--linea); }
.g-escala { display: flex; align-items: center; gap: 4px; margin-top: 12px;
            font-size: .72rem; color: var(--tinta-suave); }
.g-escala i { width: 26px; height: 10px; border-radius: 2px; }
.g-escala-vacia { margin-left: 6px; }

/* ------------------------------------------------------- tabla equivalente */

.tabla-eq { margin-top: 14px; }
.tabla-eq summary { font-size: .76rem; color: var(--tinta-suave); cursor: pointer; }
.tabla-eq table { width: 100%; border-collapse: collapse; font-size: .78rem; margin-top: 8px; }
.tabla-eq th, .tabla-eq td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--linea); }
.tabla-eq th { color: var(--tinta-suave); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }

/* ---------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  /* minmax(0,1fr) y no 1fr: con 1fr el carril nace en 'auto' y el hijo se
     dimensiona a su contenido, desbordando la pantalla. Es el clásico
     "grid blowout" y aquí lo provocaba el panorama. */
  .disposicion { grid-template-columns: minmax(0, 1fr); }
  .disposicion > main { max-width: 100%; }
  /* min-height: 0 es OBLIGATORIO aquí: el min-height:100vh del escritorio,
     si no se anula, estira la barra a la altura completa de la ventana y
     empuja TODO el tablero por debajo del pliegue. Pantalla en blanco. */
  .lateral { position: static; min-height: 0; max-height: none; border-right: 0;
             border-bottom: 1px solid var(--linea); }
  .g-fila, .g-fila:has(.g-nota) { grid-template-columns: 108px 1fr 58px; }
  .g-nota { display: none; }
}
@media (max-width: 560px) {
  .disposicion > main { padding: 16px 12px 40px; }
  .anio-cifras { gap: 16px; }
  .g-fila, .g-fila:has(.g-nota) { grid-template-columns: 88px 1fr 52px; font-size: .78rem; }
}

/* ------------------------------------------- programas de acompañamiento */

.prog-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.prog { border: 1px solid var(--linea); border-radius: 10px; padding: 14px 16px; }
.prog h3 { margin: 0 0 3px; font-size: .9rem; font-weight: 700; }
.prog-desc { margin: 0 0 10px; font-size: .78rem; color: var(--tinta-suave); }
.prog-cifra { margin: 0 0 7px; font-size: .82rem; }
.prog-cifra strong { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.prog-vacio .prog-cifra strong { color: var(--tinta-suave); }
.prog-cad { margin: 7px 0 0; font-size: .74rem; color: var(--tinta-suave); }
.prog-alerta { margin: 14px 0 0; padding: 11px 14px; font-size: .82rem;
               background: #FFF8E6; border: 1px solid #F0DCA8; border-radius: 10px; }

/* --------------------------------------------------------- cinta de demo */
/* Tiene que ser imposible de pasar por alto: alguien puede capturar la
   pantalla y creer que estos números son de la institución. */

.cinta-demo {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 11px 24px; font-size: .82rem; line-height: 1.45;
  background: #8A5A00; color: #FFF;
}
/* `display:flex` de arriba gana al `[hidden]{display:none}` del navegador, así
   que sin esto el banner de DEMO se queda visible sobre datos REALES: marca como
   falso lo verdadero, justo al revés de lo que debe. La regla con [hidden] tiene
   más especificidad y restablece el ocultado. */
.cinta-demo[hidden] { display: none; }
.cinta-demo strong { font-size: .74rem; letter-spacing: .1em; white-space: nowrap; }
.es-demo .barra { box-shadow: inset 0 3px 0 #DD9817; }
.avisos-mas summary { font-size: .78rem; color: var(--tinta-suave); cursor: pointer; padding: 4px 2px; }
.avisos-mas[open] summary { margin-bottom: 8px; }

/* ══════════════════════════════════════════════════════════════════════
   v4 · rediseño «audaz pero institucional»: logo, búsqueda, donut, KPIs
   ══════════════════════════════════════════════════════════════════════ */

/* ---- logo real en badge blanco (su texto azul no se lee sobre navy) ---- */
.logo-badge {
  display: inline-flex; align-items: center;
  background: #fff; border-radius: 12px; padding: 6px 11px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.logo-badge img { display: block; height: 44px; width: auto; }

/* ---- barra de búsqueda en la cabecera ---- */
.buscador {
  position: relative; display: flex; align-items: center; gap: 9px;
  flex: 1 1 260px; max-width: 440px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 0 15px;
  transition: border-color .15s, background .15s;
}
.buscador:focus-within { background: rgba(255,255,255,.16); border-color: rgba(221,152,23,.6); }
.buscador-ic { color: #C7CBE8; font-size: 1.05rem; flex: none; }
.buscador input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: #fff; font: inherit; font-size: .9rem; padding: 10px 0;
}
.buscador input::placeholder { color: #AAB0D6; }
.buscador-res {
  position: absolute; top: calc(100% + 7px); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--linea); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(3,4,94,.18); overflow: hidden;
}
.q-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 11px 15px; font: inherit;
}
.q-item:hover { background: var(--fondo-suave); }
.q-item-nom { font-weight: 650; color: var(--tinta); font-size: .92rem; }
.q-item-sub { font-size: .76rem; color: var(--tinta-suave); }
.q-vacio { padding: 11px 15px; font-size: .82rem; color: var(--tinta-suave); }

/* ---- KPIs más contundentes ---- */
.kpi { transition: box-shadow .15s, transform .15s; }
.kpi:hover { box-shadow: 0 6px 22px rgba(3,4,94,.10); transform: translateY(-1px); }
.cifra { font-size: 2.55rem; }
.kpi.destacado { box-shadow: 0 8px 26px rgba(3,4,94,.22); }

/* ---- donut de estados ---- */
.g-donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.g-donut { width: 168px; height: 168px; flex: none; }
.g-donut-num { font-size: 34px; font-weight: 700; fill: var(--azul); font-variant-numeric: tabular-nums; }
.g-donut-lbl { font-size: 11px; fill: var(--tinta-suave); text-transform: uppercase; letter-spacing: .07em; }
.g-leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; min-width: 160px; flex: 1; }
.g-leyenda li { display: flex; align-items: center; gap: 9px; font-size: .85rem; }
.g-leyenda i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.g-ley-et { flex: 1; }
.g-ley-val { color: var(--tinta-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 760px) {
  .buscador { order: 3; flex-basis: 100%; max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   v4.2 · movimiento y recompensa (dopamina) — TODO se apaga con
   prefers-reduced-motion (regla global al final del archivo)
   ══════════════════════════════════════════════════════════════════════ */

@keyframes subir      { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop-in     { from { opacity: 0; transform: scale(.92); }       to { opacity: 1; transform: none; } }
@keyframes barra-in   { from { transform: scaleX(0); }                     to { transform: scaleX(1); } }
@keyframes dibujar    { from { stroke-dashoffset: 1400; }                  to { stroke-dashoffset: 0; } }
@keyframes latir      { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes confeti    { to { transform: translateY(106vh) rotate(720deg); opacity: 0; } }

/* entrada escalonada de los KPIs */
.kpi { animation: subir .5s cubic-bezier(.16,1,.3,1) both; }
.kpi:nth-child(2) { animation-delay: .06s; }
.kpi:nth-child(3) { animation-delay: .12s; }
.kpi:nth-child(4) { animation-delay: .18s; }

/* las barras crecen desde la izquierda; el donut hace un pop; la línea se dibuja */
.g-barra { transform-origin: left center; animation: barra-in .6s cubic-bezier(.16,1,.3,1) both; }
.g-donut { animation: pop-in .55s cubic-bezier(.16,1,.3,1) both; }
.g-real  { stroke-dasharray: 1400; animation: dibujar 1.1s ease-out both; }

/* ---- recompensa: insignia de logro + confeti ---- */
.logro {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(34,166,108,.18); color: #fff;
  border: 1px solid rgba(34,166,108,.55); border-radius: 999px;
  padding: 5px 12px; font-size: .8rem; font-weight: 650;
  animation: pop-in .5s cubic-bezier(.16,1,.3,1) both;
}
.logro .ic { color: #7BE0AE; animation: latir 1.8s ease-in-out infinite; }

.confeti-capa { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confeti { position: absolute; top: -24px; width: 9px; height: 15px; border-radius: 2px;
           animation: confeti linear forwards; }

/* ---- portada de bienvenida (hero de Higgsfield) ---- */
.portada {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center;
  background: #F7F8FA url("/web/hero-portada.png") right center / cover no-repeat;
}
.portada::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(247,248,250,.97) 32%, rgba(247,248,250,.72) 58%, rgba(247,248,250,.10));
}
.portada-card { position: relative; max-width: 520px; padding: 0 min(7vw, 90px); animation: subir .6s cubic-bezier(.16,1,.3,1) both; }
.portada-logo { padding: 9px 13px; }
.portada-logo img { height: 60px; width: auto; }
.portada-card h1 { font-size: clamp(2rem, 4vw, 2.6rem); color: var(--azul); margin: 22px 0 6px; letter-spacing: -.02em; }
.portada-sub { color: var(--dorado-txt); font-weight: 650; margin: 0 0 14px; }
.portada-txt { color: var(--tinta-suave); margin: 0 0 28px; font-size: 1.02rem; max-width: 34ch; }
.portada-btn {
  background: var(--azul); color: #fff; border: 0; border-radius: 999px;
  padding: 14px 30px; font: inherit; font-size: 1rem; font-weight: 650; cursor: pointer;
  box-shadow: 0 8px 24px rgba(3,4,94,.26); transition: transform .15s, box-shadow .15s;
}
.portada-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(3,4,94,.34); }
.portada.saliendo { opacity: 0; pointer-events: none; transition: opacity .42s ease; }
/* MISMO gotcha que .cinta-demo: el `display:flex` de arriba gana al
   `[hidden]{display:none}` del navegador, y sin esto la portada se muestra
   SIEMPRE (incluso en deep-links). La regla con [hidden] restablece el ocultado. */
.portada[hidden] { display: none; }

/* ---- formulario de login (reusa el hero de la portada) ---- */
.login-form { display: grid; gap: 14px; margin-top: 10px; max-width: 340px; }
.login-form label { display: grid; gap: 5px; font-size: .82rem; font-weight: 600; color: var(--tinta); }
.login-form input {
  font: inherit; font-size: .95rem; padding: 11px 14px; background: #fff;
  border: 1px solid var(--linea); border-radius: 10px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.login-form input:focus { border-color: var(--azul-logo); box-shadow: 0 0 0 3px rgba(49,74,151,.16); }
.login-form .portada-btn { margin-top: 6px; justify-self: start; }
.login-error { display: none; margin: 2px 0 0; font-size: .82rem; font-weight: 600; color: var(--riesgo); }
.login-error.show { display: block; }

/* ---- toast de recompensa (ilustración de logro) ---- */
.toast-logro {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  display: flex; align-items: center; gap: 12px; max-width: 330px;
  background: #fff; border: 1px solid var(--linea); border-radius: 14px;
  box-shadow: 0 14px 36px rgba(3,4,94,.20); padding: 12px 18px 12px 12px;
  animation: subir .45s cubic-bezier(.16,1,.3,1) both;
}
.toast-logro img { width: 60px; height: 60px; border-radius: 10px; flex: none; }
.toast-logro span { font-weight: 600; font-size: .9rem; color: var(--tinta); }
.toast-logro.saliendo { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }

/* ---- ilustración de estado vacío ---- */
.vacio-grande .ilus { width: min(240px, 60%); height: auto; margin: 0 auto 14px; display: block; }

/* ---- selector de cursos y filas de curso clicables ---- */
.seg-cursos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.seg-btn {
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--tinta);
  background: var(--fondo); border: 1px solid var(--linea); border-radius: 999px;
  padding: 8px 16px; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.seg-btn:hover { background: var(--fondo-suave); }
.seg-btn.activo { background: var(--azul); color: #fff; border-color: var(--azul); }

.cursos-lista { display: grid; gap: 8px; }
.curso-row {
  display: grid; grid-template-columns: 40px 1fr 64px auto 20px; gap: 14px; align-items: center;
  width: 100%; text-align: left; font: inherit; background: var(--fondo);
  border: 1px solid var(--linea); border-radius: 10px; padding: 12px 14px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.curso-row:hover { border-color: var(--azul-logo); box-shadow: 0 4px 16px rgba(3,4,94,.08); transform: translateX(2px); }
.curso-letra { font-size: 1.2rem; font-weight: 700; color: var(--azul); text-align: center; }
.curso-mid { min-width: 0; }
.curso-mid .g-pista { height: 14px; }
.curso-docs { display: block; font-size: .74rem; color: var(--tinta-suave); margin-top: 5px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.curso-val { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; color: var(--tinta); }
.curso-ir { color: var(--tinta-suave); font-size: 1.1rem; text-align: center; }
.curso-row:hover .curso-ir { color: var(--azul-logo); }

@media (max-width: 560px) {
  .curso-row { grid-template-columns: 32px 1fr 54px; gap: 10px; }
  .curso-row .estado, .curso-ir { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Progreso trimestral
   ══════════════════════════════════════════════════════════════════════ */

.nav-inicio + .nav-inicio { margin-top: 4px; }

.trim-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
             flex-wrap: wrap; background: var(--azul); color: #fff;
             border-radius: var(--r); padding: 20px 22px; margin-bottom: 20px; }
.trim-hero-et { margin: 0; font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: #C7CBE8; }
.trim-hero h2 { margin: 2px 0 4px; font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; }
.trim-hero-sub { margin: 0; font-size: .82rem; color: #C7CBE8; }
/* El semáforo va en chip BLANCO: sus colores (verde/rojo AA) se leen sobre
   blanco, no sobre el navy del hero. */
.trim-hero-est .estado { background: #fff; padding: 8px 14px; border-radius: 999px; font-size: .92rem; }

/* ---- arco del año: tres tercios ---- */
.arco-pista { display: flex; gap: 4px; height: 34px; }
.arco-tramo { position: relative; flex: 1; background: var(--fondo-suave);
              border: 1px solid var(--linea); border-radius: 6px; overflow: hidden; }
/* cerrado sin histórico: rayado neutro, NO se rellena como si estuviera cubierto */
.arco-tramo.est-cerrado { background: repeating-linear-gradient(45deg, #F2F3F6, #F2F3F6 5px, #E7E9EE 5px, #E7E9EE 6px); }
.arco-tramo.actual { border-color: var(--azul-logo); box-shadow: 0 0 0 1px var(--azul-logo); }
.arco-relleno { position: absolute; inset: 0 auto 0 0; background: var(--azul);
                transition: width .3s cubic-bezier(.16,1,.3,1); }
.arco-hoy { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--dorado); z-index: 2; }
.arco-rotulos { display: flex; gap: 4px; margin-top: 8px; }
.arco-rot { flex: 1; display: flex; flex-direction: column; gap: 1px; padding: 0 2px; }
.arco-rot-tit { font-size: .8rem; font-weight: 650; }
.arco-rot.actual .arco-rot-tit { color: var(--azul); }
.arco-rot-est { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); }
.arco-rot-dato { font-size: .78rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

/* ---- proyección al cierre ---- */
.proy { margin: 12px 0 0; font-size: .84rem; padding: 10px 14px; border-radius: 10px;
        background: var(--fondo-suave); border: 1px solid var(--linea); }
.proy:empty { display: none; }
.proy.ok { background: #F2F7F4; border-color: #CFE4D8; color: var(--verde-txt); }
.proy.riesgo { background: #FCF3F2; border-color: #F0CFCB; color: var(--riesgo); }

/* ---- listas de filas (en riesgo / van al día) ---- */
.trim-cuenta { margin: 0 0 12px; font-size: .9rem; color: var(--tinta-suave); }
.trim-cuenta strong { font-size: 1.5rem; font-weight: 700; color: var(--tinta);
                      font-variant-numeric: tabular-nums; }
.trim-lista { list-style: none; margin: 0; padding: 0; }
.trim-lista li { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                 padding: 10px 0; border-bottom: 1px solid var(--linea); }
.trim-lista li:last-child { border-bottom: 0; }
.trim-lista-nom { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trim-lista-nom .nom { font-weight: 600; font-size: .86rem;
                       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trim-lista-nom .sub { font-size: .76rem; color: var(--tinta-suave);
                       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trim-lista-val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--azul); white-space: nowrap; }

@media (max-width: 560px) {
  .arco-rot-tit { font-size: .74rem; }
  .arco-rot-est, .arco-rot-dato { font-size: .68rem; }
}

/* El navegador de años se pliega en pantalla estrecha (ver tablero.js) */
#nav-caja > summary { display: flex; align-items: center; gap: 8px; cursor: pointer;
                      list-style: none; margin: 20px 0 7px; padding: 6px 11px;
                      border-radius: 8px; }
#nav-caja > summary::-webkit-details-marker { display: none; }
#nav-caja > summary:hover { background: var(--fondo-suave); }
.nav-cuenta { font-size: .66rem; font-weight: 700; color: #fff; background: var(--azul-logo);
              border-radius: 999px; padding: 1px 7px; letter-spacing: 0; }
#nav-caja > summary::after { content: "▸"; margin-left: auto; color: var(--tinta-suave);
                             font-size: .7rem; }
#nav-caja[open] > summary::after { content: "▾"; }