/* ============================================================
   PANEL DE CONTROL ESTETICO
   Para cambiar el aspecto de TODA la app, tocá solo esto.
   ============================================================ */
:root{
  /* --- Los tres colores de la Agrupacion Simon Bolivar ---

     COMO SE REPARTEN, que es lo que hace que combinen:

     Amarillo pleno  -> ACENTO, en poca cantidad: el logo sobre el negro,
                        el chip elegido, la tarjeta de marca, resaltados.
     Amarillo suave  -> el fondo de toda la app. Es el mismo amarillo
                        rebajado al 28% sobre blanco. Se lee amarillo
                        pero no cansa.
     Celeste         -> LA ESTRUCTURA: bordes, barras, iconos, foco,
                        lo interactivo. Es el unico tono medio de la
                        paleta, y por eso es el que une lo claro con lo
                        oscuro. Sin el, los colores se pelean.
     Rojo            -> solo palabras resaltadas. En poca cantidad.
     Negro           -> el texto, y la banda de la cabecera, que es el
                        ancla de la pagina.

     Sobre el fondo suave: negro 16,2 · gris 5,9 · rojo 6,0 · celeste 3,3.
     Sobre el amarillo pleno el celeste cae a 2,8: ahi no va. */
  /* --- LOS COLORES DE MARCA. No cambian nunca, ni de dia ni de noche --- */
  --amarillo:  #F9E830;   /* acento de marca, en poca cantidad          */
  --celeste:   #0195B1;   /* la estructura: bordes, barras, iconos      */
  --rojo:      #B52625;   /* palabras resaltadas, urgente, eliminar     */
  --negro:     #1A1A1A;   /* la cabecera y los bloques de mucho peso    */
  --celeste-claro: #7FC9DA;
  /* El celeste de marca es para LÍNEAS: bordes, barras, iconos, donde
     la vara son 3:1. Como FONDO con texto encima no da: el negro
     encima queda en 4,92 y el blanco en 3,54, y no hay ningún color
     de texto que llegue a los 7:1 que pide el proyecto. Este es el
     mismo celeste bajado hasta que el blanco encima da 7,71. Existe
     por lo mismo que --rojo-solido: pintar CON un color y leer SOBRE
     ese color no son el mismo trabajo, y un solo valor no sirve para
     los dos. */
  --celeste-hondo: #015B6E;

  /* Estas dos TAMPOCO cambian de noche, y es a propósito:
     - sobre-color: texto oscuro cuando el fondo es amarillo o celeste.
     - sobre-negro: texto claro cuando el fondo es la banda negra.
     Si se dieran vuelta, el texto quedaría del mismo color que su fondo. */
  --sobre-color: #1A1A1A;
  --sobre-negro: #FFFFFF;

  /* El rojo se aclara de noche para que se LEA como texto. Pero como
     FONDO tiene que seguir siendo el oscuro: si no, el blanco encima
     cae a 3,2 y deja de leerse. Por eso son dos variables. */
  --rojo-solido: #B52625;

  /* --- LO QUE SI CAMBIA ENTRE DIA Y NOCHE ---
     Estas seis son las que se dan vuelta mas abajo, en el bloque de
     modo oscuro. En el resto de la hoja hay que usar SIEMPRE estas,
     nunca --blanco o --negro para texto: si no, de noche no se lee. */
  --fondo:       #FDF9C5;  /* el fondo de la pagina                     */
  /* Papel, no plastico. Un blanco puro sobre un amarillo calido no son
     el mismo material: la tarjeta parecia una calcomania pegada encima.
     Con este blanco apenas calido, la tarjeta y el fondo son la misma
     hoja. Es la unica variable que cambia para lograrlo. */
  --superficie:  #FDFCF7;  /* las tarjetas                              */
  --superficie-2:#F5F0E8;  /* superficies suaves sobre las tarjetas     */
  --texto:       #1A1A1A;  /* el texto principal                        */
  --texto-suave: #4E4E4E;  /* los textos secundarios                    */
  --linea:       #D8E5EA;  /* bordes y separadores                      */

  /* El tinte de fondo de los días marcados del calendario */
  --dia-mesa:   #FDECEB;
  --dia-asueto: #E6F4F8;
  --apagado:    #F3F0EA;   /* superficie de lo deshabilitado */
  --aviso-error:#FDEAEA;
  --aviso-ok:   #E6F8F5;

  /* Habia cinco nombres viejos que eran atajos a las variables de
     arriba: --blanco, --gris, --borde, --hueso y --amarillo-fondo. Se
     borraron. El problema no era estetico: eran DOS nombres para lo
     mismo, y el viejo se usaba tres veces mas que el bueno, asi que la
     documentacion apuntaba al que casi nadie usaba.

     Un color se llama por lo que HACE (--texto-suave, --linea) y no
     por como se ve (--gris), porque de noche se dan vuelta y "gris"
     deja de describirlo. */

  /* --- Los grises de las zonas que SIEMPRE son oscuras ---

     La cabecera, la fila de secciones y el menu lateral son negros de
     dia y de noche, asi que sus grises no se dan vuelta y no pueden
     salir de --texto-suave ni de --linea. Antes estaban escritos a
     mano y habia seis grises distintos para tres trabajos. Ahora son
     tres, con nombre. */
  --sobre-negro-suave: #B9B9B9;  /* texto secundario sobre el negro   */
  --sobre-negro-tenue: #A5A5A5;  /* letra chica y rotulos             */
  --linea-negro:       #383838;  /* separadores sobre el negro        */

  /* --- Colores por linea editorial --- */
  --linea-frente:   #1A1A1A;
  --linea-gremial:  #12B5AC;
  --linea-info:     #B52625;
  --linea-saberes:  #7FC9DA;

  /* Los mismos colores, pero para las MARCAS FINAS del calendario: las
     franjas de 4 píxeles que dicen qué cae cada día.
     Van aparte de los de arriba porque no hacen el mismo trabajo. La
     etiqueta de una tarjeta es un color de fondo con texto encima; la
     franja es una línea delgada contra el papel, y necesita más
     contraste para verse. De noche dos de estos cuatro desaparecen
     -el de «Frente político» es casi negro-, y se aclaran solo acá,
     sin tocar las etiquetas.

     De día pasa al revés que de noche: el turquesa daba 2,5 sobre el
     papel y el celeste 1,8, o sea que la franja estaba ahí y no se
     veía. Los dos se oscurecen hasta pasar 3, que es lo que pide la
     norma para algo que informa sin ser texto. Siguen siendo el mismo
     turquesa y el mismo celeste, un paso más abajo. */
  --marca-frente:   var(--linea-frente);   /* 16,9 sobre el papel */
  --marca-gremial:  #0D8C85;               /*  4,0 */
  --marca-info:     var(--linea-info);     /*  6,3 */
  --marca-saberes:  #3E8FA6;               /*  3,6 */

  /* --- Tipografias ---

     ARCHIVO BLACK es de Omnibus-Type, un taller tipografico de Buenos
     Aires. Es una grotesca de afiche: pesa como los titulos de las
     placas del Instagram de la agrupacion, que es donde la gente los
     conoce. Tiene un solo grosor, asi que NO sirve para textos chicos:
     por eso los subtitulos y los botones siguen en Montserrat.

     ROBOTO MONO es para los DATOS, no para la prosa: codigos de
     materia, fechas, notas, cantidades. Lo que se lee de un vistazo y
     se compara entre si. */
  --fuente-titulo:  'Archivo Black', 'Archivo', sans-serif;  /* titulos       */
  --fuente-sub:     'Montserrat', sans-serif;   /* subtitulos, botones        */
  --fuente-texto:   'Roboto', sans-serif;       /* cuerpo                     */
  --fuente-datos:   'Roboto Mono', ui-monospace, monospace;  /* datos y fechas */

  /* --- LA ESCALA DE LETRA ---

     Habia 28 tamanos distintos, ocho de ellos con medio pixel (9,5 ·
     10,5 · 11,5 · 12,5 · 13,5 · 14,5 · 15,5 · 16,5). Un medio pixel no
     es una decision: es un numero que se movio hasta que entro.

     Son ocho pasos y salen de los tamanos que la app ya usaba, no de
     una tabla de manual. LO NUEVO SE ESCRIBE CON ESTOS. Si hace falta
     un tamano que no esta, primero fijate si no sirve el de al lado:
     casi siempre sirve.

     El 4/9/2026 la escala subio un punto entera, de 11-20 a 12-21.
     Antes de moverla hubo que hacer otra cosa: de las 178 medidas de
     texto de la app, solo 55 usaban estas variables. Las otras 123
     repetian los mismos numeros a mano (veinte veces 14px, diecisiete
     veces 15px) y se habrian quedado chicas, dejando media app grande
     y media chica. Asi que primero pasaron todas por aca.

     El titulo NO subio. Ya era grande, y agrandar titulos no se lee
     mejor: se desborda. Lo mismo con los tamanos sueltos de 16px para
     arriba, que son numeros y titulares. */
  --letra-mini:   12px;  /* pastillas y etiquetas en mayusculas   */
  --letra-chica:  13px;  /* metadatos, leyendas                   */
  --letra-nota:   14px;  /* textos secundarios, pies              */
  --letra-densa:  15px;  /* listas apretadas                      */
  --letra-base:   16px;  /* el cuerpo del texto                   */
  --letra-guia:   18px;  /* la bajada de cada pantalla            */
  --letra-sub:    21px;  /* titulos de seccion                    */
  --letra-titulo: 30px;  /* el titulo de la pantalla              */
  /* La escala terminaba en el titulo de la pantalla, y por eso los
     numeros grandes —el promedio, la nota— estaban escritos a mano en
     34 y 32px. Un dato tiene que poder ser mas grande que un titulo:
     adentro de su ficha ES el titulo, y lo que lo rodea son rotulos de
     12px. Si el numero se queda en 30 la ficha no tiene jerarquia. */
  --letra-dato:   38px;  /* el numero solo de una ficha de dato   */

  /* --- LA ESCALA DE ESPACIO ---

     Habia 27 valores distintos: TODOS los enteros del 1 al 16. O sea
     que cada vez que alguien tuvo que separar dos cosas, eligio un
     numero nuevo.

     Estos seis son para lo que se escriba de ahora en adelante. Lo que
     ya estaba NO se cambio de una: reescribir los 27 valores movia la
     densidad de toda la app, y eso es una decision de diseno aparte,
     no una limpieza. Se va migrando cuando se toca cada componente. */
  --e1:  4px;
  --e2:  8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;

  /* --- Medidas ---

     LA SEGUNDA TINTA. Antes habia una sombra difusa, que dice "esto
     flota sobre una superficie": es una metafora de ventanas de
     escritorio. Las placas de la agrupacion no flotan: estan impresas,
     con el borde de tinta a la vista. La sombra ahora es un
     desplazamiento solido, como cuando la segunda tinta queda corrida.

     Va en NEGRO y no en celeste porque asi es el Instagram: amarillo
     con negro, y el rojo como acento. El celeste no aparece en ninguna
     placa; adentro de la app se queda como el color de lo que se toca,
     que es otro trabajo. */
  --radio:       10px;   /* redondeo de tarjetas    */
  --radio-chico: 6px;
  --radio-pastilla: 99px;  /* lo que es una pildora: chips, botones redondos */
  --ancho-max:   680px;  /* ancho maximo de lectura */
  --tinta-borde: #1A1A1A;                /* el borde de las tarjetas */
  --sombra:      2px 2px 0 #1A1A1A;      /* la segunda tinta corrida */
  /* Ya no hay barra fija abajo: la navegacion vive arriba. */

  /* --- EL MOVIMIENTO ---

     Las curvas de la app. Antes cada animación traía la suya escrita a
     mano y había cinco maneras distintas de decir lo mismo. Ahora son
     tres, y cada una tiene un trabajo:

     --sale    algo que APARECE o SE VA. Arranca rápido y frena suave.
               Es la curva por defecto: si dudás, usá esta. Las curvas
               que vienen con el navegador (ease, ease-out) son
               demasiado flojas y se sienten pastosas.
     --ambos   algo que SE MUEVE de un lado a otro estando ya en
               pantalla, como el carrusel o el subrayado de la pestaña.
     --cajon   el cajón lateral y las hojas que suben desde abajo. Es
               la curva de los paneles de iOS: entra decidida y se
               asienta sin rebote.

     Y las duraciones. La regla es que nada de interfaz pasa de 300 ms.
     Un menú de 180 ms se siente más rápido que uno de 400, y no es una
     impresión: la persona ya empezó a leer mientras el otro sigue
     abriéndose. */
  --sale:  cubic-bezier(0.23, 1, 0.32, 1);
  --ambos: cubic-bezier(0.77, 0, 0.175, 1);
  --cajon: cubic-bezier(0.32, 0.72, 0, 1);

  --t-toque:  140ms;  /* la devolución de apretar algo        */
  --t-chico:  180ms;  /* globos, subrayados, cambios de color */
  --t-medio:  220ms;  /* menús, pestañas, el botón flotante   */
  --t-hoja:   260ms;  /* hojas y cajones: recorren más camino */
}

/* ============================================================
   MODO OSCURO

   Hay tres opciones, en el menú ☰: automático, claro y oscuro.
   Automático sigue lo que tenga configurado el teléfono, y es lo que
   viene puesto.

   OJO CON CÓMO SE PRENDE. Acá NO hay un @media (prefers-color-scheme):
   quien decide es un atributo, data-tema="oscuro", que pone un script
   de tres renglones en el <head> de cada pantalla. Se hizo así a
   propósito: con un @media harían falta DOS copias de estos quince
   valores —una para el modo del teléfono y otra para el botón— y a la
   primera que alguien toque una sola de las dos, los modos dejan de
   coincidir. Con el atributo hay una sola copia.

   Solo se dan vuelta las seis variables de superficie y texto. Los
   colores de marca no se tocan: el amarillo sigue siendo el amarillo.

   El fondo NO es negro puro. Un #000 con texto blanco encima genera
   halo y cansa en lecturas largas, que es justo lo que se hace de
   noche. Es un gris muy oscuro apenas cálido, para que convive con
   el amarillo de la marca.

   Contrastes de noche: texto 15,3 · texto suave 7,1 · amarillo 12,6
   · celeste 4,4 sobre el fondo.
   ============================================================ */
:root[data-tema="oscuro"]{
    --fondo:        #17160F;
    --superficie:   #232219;
    --superficie-2: #2E2C21;
    --texto:        #F2EFE2;
    --texto-suave:  #C0BBA8;
    --linea:        #3A3830;
    --dia-mesa:   #3A211F;
    --dia-asueto: #16323A;
    --apagado:    #201F17;
    --aviso-error:#33201F;
    --aviso-ok:   #16302B;

    /* De noche el rojo puro pierde contraste sobre el fondo oscuro
       (3,4). Se aclara para que las palabras resaltadas sigan
       leyéndose sin dejar de ser el rojo de la marca. */
    --rojo: #E56B62;

    /* Por lo mismo, las franjas del calendario. El rojo de «Info
       importante» daba 2,5 contra la tarjeta oscura y el de «Frente
       político», que de día es casi negro, directamente no se veía.
       Los otros dos ya eran claros y quedan como están. */
    --marca-info:   #E56B62;
    --marca-frente: #C8C3AE;

    /* La segunda tinta, de noche. Un negro sobre un fondo casi negro no
       se ve, así que el desplazamiento es más oscuro que el fondo de la
       página, no que la tarjeta. Y el borde de tinta pasa a ser claro:
       de noche la tinta es la que ilumina. */
    --tinta-borde: #4A4739;
    --sombra: 2px 2px 0 #0B0A06;
}
/* Las ilustraciones de la facultad son de trazo fino sobre claro:
   de noche se apagan un poco para no encandilar. */
:root[data-tema="oscuro"] .carrusel img,
:root[data-tema="oscuro"] .zona-fondo::before{filter:brightness(.86) saturate(.92)}

/* ============================================================
   BASE
   ============================================================ */
[hidden]{display:none !important}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--fuente-texto);
  background:var(--fondo);
  color:var(--texto);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding-bottom:24px;
}
a{color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit;font-size:inherit;cursor:pointer}
h1,h2,h3{margin:0;font-weight:400}

.envoltura{max-width:var(--ancho-max);margin:0 auto;padding:0 16px}

/* ============================================================
   SALTAR AL CONTENIDO

   Invisible hasta que se lo enfoca con el tabulador. Sin esto, quien
   navega con teclado tiene que pasar por el menú, la marca, el perfil
   y las siete secciones —diez paradas— en cada pantalla, antes de
   llegar a lo que vino a leer.
   ============================================================ */
.saltar{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--amarillo);color:var(--sobre-color);
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-densa);
  padding:12px 18px;border-radius:0 0 var(--radio) 0;text-decoration:none
}
.saltar:focus{left:0}

/* Se lee con lector de pantalla pero no se ve. Sirve para el título de
   la portada: la marca de la cabecera ya lo dice a la vista, pero una
   imagen y un texto de marca no son un encabezado de página. */
.solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0
}
/* Al saltar al contenido no queremos el contorno del foco alrededor de
   media pantalla: se enfoca para que el lector siga desde ahí, nada más. */
#contenido:focus{outline:none}

/* ============================================================
   FOCO DEL TECLADO, UNO SOLO PARA TODO

   Antes casi todo se quedaba con el contorno naranja que pone el
   navegador por su cuenta, que sobre el amarillo de la app casi no se
   ve. Este es el mismo en todos lados y siempre contrasta.
   ============================================================ */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--celeste);
  outline-offset:2px;
  border-radius:4px
}
/* Sobre la cabecera negra el celeste se apaga, ahí manda el amarillo */
.cabecera a:focus-visible,
.cabecera button:focus-visible,
.secciones-fila a:focus-visible,
.menu-lateral a:focus-visible,
.menu-lateral button:focus-visible{
  outline-color:var(--amarillo)
}

/* ============================================================
   EL ESTADO APRETADO

   Un celular no tiene "pasar por encima": el dedo toca y listo. Así
   que :active es la ÚNICA devolución táctil que existe, y es la que
   dice «te registré el toque» mientras la pantalla todavía carga. La
   hoja tenía trece reglas de :hover, que en un teléfono no se disparan
   nunca, y cero de :active.

   El gesto sigue el lenguaje de la serigrafía: la pieza baja los 2 px
   del desplazamiento y la segunda tinta desaparece. Se lee como el
   papel apoyándose sobre la mesa. */
.tarjeta:active, .tarjeta-cuadro:active, .tarjeta-kit:active,
.boton-cuadro:active, .boton:active, .chip:active,
.mi-cursada:not(.pregunta):active, .alarma:active{
  transform:translate(2px, 2px);
  box-shadow:none
}
/* Los que no tienen sombra corrida se hunden apenas */
.boton-icono:active, .cal-dia:active, .secciones-fila a:active,
.menu-lista a:active, .pestana:active, .tema-opciones button:active,
.pregunta-opcion:active{
  transform:scale(.94)
}
.avisanos:active{transform:scale(.94);box-shadow:0 2px 8px rgba(0,0,0,.3)}

@media (prefers-reduced-motion:reduce){
  /* Sin movimiento, pero la devolución no se pierde: se apaga. */
  .tarjeta:active, .tarjeta-cuadro:active, .tarjeta-kit:active,
  .boton-cuadro:active, .boton:active, .chip:active,
  .mi-cursada:not(.pregunta):active, .alarma:active,
  .boton-icono:active, .cal-dia:active, .secciones-fila a:active,
  .menu-lista a:active, .pestana:active, .tema-opciones button:active,
  .pregunta-opcion:active, .avisanos:active{
    transform:none;opacity:.7
  }
}

/* Un botón es un botón, no un párrafo: al tocarlo con el pulgar y
   correrse un milímetro, se marcaba la palabra en azul en vez de
   activarse. */
.boton,.boton-cuadro,.boton-icono,.chip,.tarjeta,.tarjeta-cuadro,
.cal-dia,.avisanos,.secciones-fila a,.menu-lista a,.carrusel-puntos button,
.pregunta-opcion{
  -webkit-user-select:none;user-select:none
}

/* ============================================================
   ENCABEZADO
   ============================================================ */
/* La banda negra de arriba es el ancla de la pagina: le da un techo y
   es donde el amarillo trabaja mejor (sobre negro llega a 13,8). */
/* La trama de puntos de las serigrafias, la misma de la banda oscura de
   «¿Quienes somos?». Vive en la cabecera de TODAS las pantallas: es el
   unico lugar que ya era negro, asi que la textura del lenguaje entra
   sin discutirle nada a la lectura. */
.cabecera{
  background:var(--negro);color:var(--sobre-negro);padding:12px 0;
  position:relative;overflow:hidden
}
.cabecera::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--amarillo) 1px, transparent 1.1px);
  background-size:10px 10px;opacity:.10
}
.cabecera > .envoltura{position:relative;z-index:1}

/* Tres columnas: menu, marca, cuenta. Los costados miden lo mismo,
   asi la marca del medio queda centrada de verdad y no a ojo. */
.barra-superior{
  display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px
}
/* El logo y la marca, juntos y centrados. Sobre el negro de la cabecera
   el logo va en amarillo, que es donde mejor se lee (13,8). */
.marca-centro{
  display:flex;align-items:center;justify-content:center;gap:9px;
  text-decoration:none;color:inherit;min-width:0
}
.marca-logo{width:auto;height:38px;flex:0 0 auto}
.marca-texto{min-width:0;text-align:left}
/* Sin nowrap: al lado del logo, en un celular angosto, "LA BOLÍVAR CON
   VOS" en una sola línea no entra y se cortaba. Partido en dos renglones
   queda a la altura del logo y arma un conjunto. */
.marca{
  font-family:var(--fuente-titulo);font-size:16px;font-weight:400;
  line-height:1.04;letter-spacing:-.01em;display:block
}
.marca em{font-style:normal;color:var(--amarillo)}
/* En un celular angosto esto no entra y se cortaba con puntos
   suspensivos: «AGRUPACIÓN SIMÓN BOLÍVAR · FTS…». Un texto cortado
   ensucia y no dice nada que el logo no diga ya, así que abajo de
   420 px no se muestra. */
.marca-centro small{
  display:none;font-family:var(--fuente-texto);font-size:var(--letra-mini);font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--sobre-negro-tenue);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
@media (min-width:420px){ .marca-centro small{display:block} }
.boton-icono{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:50%;
  font-size:var(--letra-sub);line-height:1;color:var(--sobre-negro);text-decoration:none;padding:0
}
@media (hover:hover) and (pointer:fine){
  .boton-icono:hover{background:rgba(255,255,255,.12)}
}

/* Los iconos de Phosphor. No traen color propio: toman el del texto
   que los rodea (fill:currentColor), asi el mismo dibujo sirve en
   blanco sobre la cabecera negra y en celeste sobre una tarjeta. */
svg.ico{width:1em;height:1em;display:block;flex:0 0 auto}
.boton-icono svg.ico{width:22px;height:22px}
.secciones-fila a svg.ico{width:20px;height:20px}
.menu-lista a svg.ico{width:22px;height:22px}
.boton-cuadro svg.ico{width:28px;height:28px;color:var(--celeste)}
.boton-cuadro.destacado svg.ico{color:var(--sobre-color)}

/* --- Las secciones, debajo de la cabecera --- */
/* Siete secciones no entran en un celular: la fila se desliza, y como
   ademas traemos al centro la seccion donde estas parada, casi siempre
   hay algo cortado de LOS DOS lados. Habia degradado solo a la derecha:
   del lado izquierdo la seccion quedaba partida al medio de la palabra
   —«CIO» por INICIO— y eso no se lee como «hay mas», se lee como roto.

   Ahora hay uno en cada borde y aparecen solo cuando de ese lado
   realmente queda algo escondido. Hasta que el guion mide, se muestra
   el de la derecha: es el caso de siempre y asi no hay un parpadeo. */
.secciones{background:var(--negro);border-top:1px solid var(--linea-negro);position:relative}
.secciones::before,
.secciones::after{
  content:'';position:absolute;top:0;bottom:0;width:30px;
  pointer-events:none;opacity:0;transition:opacity .15s ease
}
.secciones::before{
  left:0;background:linear-gradient(to left, rgba(26,26,26,0), var(--negro))
}
.secciones::after{
  right:0;background:linear-gradient(to right, rgba(26,26,26,0), var(--negro))
}
.secciones:not(.medida)::after{opacity:1}
.secciones.hay-izq::before{opacity:1}
.secciones.hay-der::after{opacity:1}
@media (prefers-reduced-motion:reduce){
  .secciones::before,.secciones::after{transition:none}
}
.secciones-fila{display:flex;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.secciones-fila::-webkit-scrollbar{display:none}
.secciones-fila a{
  flex:1 0 auto;min-width:72px;padding:9px 10px 11px;text-decoration:none;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:var(--fuente-sub);font-size:var(--letra-mini);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--sobre-negro-suave);
  border-bottom:3px solid transparent
}
.secciones-fila a .icono{font-size:18px;line-height:1}
.secciones-fila a[aria-current="page"]{color:var(--amarillo);border-bottom-color:var(--amarillo)}
/* Cambio de color, no de posición: la curva que corresponde es la
   blanda del navegador, y 180 ms alcanza. Es lo único que separa
   «cambió algo» de «siempre estuvo así». */
.secciones-fila a{
  transition:color var(--t-chico) ease,
             border-bottom-color var(--t-chico) ease
}

/* --- El menu lateral que abre el boton de la izquierda ---

   ACÁ EL MOVIMIENTO NO ES ADORNO, ES LA EXPLICACIÓN.

   Este cajón se abría de golpe: aparecía tapando media pantalla sin
   decir de dónde había salido ni adónde vuelve. Un panel que entra
   desde el borde izquierdo está diciendo dos cosas al mismo tiempo:
   «estaba guardado de este lado» y «se cierra empujándolo para allá».
   Sin eso hay que aprender de memoria dónde está el botón de cerrar.

   Es, además, la superficie que más se toca de toda la app. Que ESTO
   no tuviera movimiento mientras la pantalla de apertura tenía casi
   tres segundos de coreografía era tener el presupuesto puesto al
   revés: todo el gasto en lo que se ve una vez por sesión, y nada en
   lo que se abre diez veces por día. */
.menu-fondo{
  position:fixed;inset:0;z-index:90;background:rgba(26,26,26,.55);
  opacity:1;
  transition:opacity var(--t-medio) var(--sale)
}
.menu-lateral{
  position:fixed;top:0;left:0;bottom:0;z-index:91;width:min(300px,84vw);
  background:var(--negro);color:var(--sobre-negro);
  display:flex;flex-direction:column;padding:14px 0 18px;
  box-shadow:4px 0 22px rgba(0,0,0,.3);
  transform:translateX(0);
  transition:transform var(--t-medio) var(--cajon)
}
@starting-style{
  .menu-fondo{opacity:0}
  .menu-lateral{transform:translateX(-100%)}
}
.menu-fondo.cerrando{opacity:0}
.menu-lateral.cerrando{transform:translateX(-100%)}

/* Menos movimiento: el cajón no se desliza, pero tampoco aparece de la
   nada. Se funde, que es la señal mínima de que hay algo nuevo encima. */
@media (prefers-reduced-motion:reduce){
  .menu-lateral{
    transform:none;opacity:1;
    transition:opacity var(--t-chico) var(--sale)
  }
  @starting-style{ .menu-lateral{transform:none;opacity:0} }
  .menu-lateral.cerrando{transform:none;opacity:0}
}
.menu-encabezado{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 10px 0 18px;margin-bottom:14px
}
.menu-lista{display:flex;flex-direction:column;overflow-y:auto}
.menu-lista a{
  display:flex;align-items:center;gap:13px;padding:14px 18px;
  text-decoration:none;color:var(--sobre-negro);
  font-family:var(--fuente-sub);font-size:16px;font-weight:700
}
.menu-lista a .icono{font-size:var(--letra-sub);line-height:1}
@media (hover:hover) and (pointer:fine){
  .menu-lista a:hover{background:rgba(255,255,255,.08)}
}
.menu-lista a[aria-current="page"]{color:var(--amarillo);box-shadow:inset 4px 0 0 var(--amarillo)}
/* --- Los colores de la pantalla, adentro del menú ---
   Va acá y no en la cabecera porque la cabecera tiene tres columnas y
   en un celular angosto la marca ya baja a dos renglones: un cuarto
   botón arriba le comía 44 px más. Y esto se toca una vez, no todos
   los días. El menú de este panel está siempre en oscuro, así que los
   colores de acá adentro son fijos y no salen de las variables. */
.menu-tema{
  margin-top:auto;padding:18px 18px 0;border-top:1px solid var(--linea-negro)
}
.menu-tema-rotulo{
  display:block;font-family:var(--fuente-sub);font-size:var(--letra-mini);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sobre-negro-tenue);margin-bottom:9px
}
.tema-opciones{
  display:flex;border:1px solid var(--linea-negro);border-radius:var(--radio-pastilla);overflow:hidden
}
.tema-opciones button{
  flex:1;appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-chica);
  letter-spacing:.03em;color:var(--sobre-negro-suave);padding:11px 6px;min-height:40px
}
.tema-opciones button + button{border-left:1px solid var(--linea-negro)}
.tema-opciones button[aria-pressed="true"]{
  background:var(--amarillo);color:var(--sobre-color)
}
.tema-opciones button:focus-visible{outline:2px solid var(--amarillo);outline-offset:-3px}

.menu-pie{
  padding:16px 18px 0;font-size:var(--letra-chica);line-height:1.5;color:var(--sobre-negro-tenue)
}

/* Titulo de pantalla interna */
/* El tamaño se acomoda al ancho porque hay títulos de una sola palabra
   muy larga: «ANATOMOFISIOLOGÍA» a 30 px medía 363 px en una pantalla
   de 343, y se llevaba la página entera de costado. El overflow-wrap
   es la red por si aparece una palabra todavía más larga. */
.titulo-pantalla{
  font-family:var(--fuente-titulo);font-size:clamp(23px, 7.4vw, 30px);
  line-height:1;text-transform:uppercase;margin:22px 0 4px;
  overflow-wrap:anywhere
}
.bajada{color:var(--texto-suave);font-size:var(--letra-base);margin:0 0 18px}

/* ============================================================
   BUSCADOR
   ============================================================ */
/* El buscador ya no va sobre el negro: con la cabecera y las secciones
   arriba, sumarle el buscador hacia un bloque oscuro demasiado alto. */
.caja-buscador{background:transparent;padding:16px 0 4px}
.buscador{position:relative}
.buscador input{
  width:100%;font-family:var(--fuente-texto);font-size:var(--letra-guia);
  padding:15px 15px 15px 46px;border:1px solid var(--linea);border-radius:var(--radio-pastilla);
  background:var(--superficie);color:var(--texto);outline:none;box-shadow:var(--sombra)
}
/* El foco va en celeste: sobre el amarillo, un halo amarillo no se veria */
.buscador input:focus{box-shadow:0 0 0 3px var(--celeste)}
.buscador .lupa{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  font-size:18px;opacity:.5;pointer-events:none;
  display:flex;align-items:center;color:var(--texto)
}
.buscador .lupa svg.ico{width:19px;height:19px}

/* El ícono de la categoría, adentro del chip y del título. La misma
   categoría tiene que verse igual en la portada y acá: antes en la
   portada era un ícono y acá el emoji de la base de datos. */
.chip-icono,.titulo-icono{
  display:inline-flex;align-items:center;vertical-align:-3px;margin-right:6px;
  color:var(--celeste)
}
.chip-icono svg.ico{width:16px;height:16px}
.titulo-icono svg.ico{width:20px;height:20px}
.chip[aria-pressed="true"] .chip-icono{color:inherit}

/* ============================================================
   CHIPS / CATEGORIAS
   ============================================================ */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--radio-pastilla);padding:8px 14px;font-family:var(--fuente-sub);
  font-size:var(--letra-densa);letter-spacing:.02em;white-space:nowrap;color:var(--texto)
}
/* Sobre el fondo suave, el amarillo pleno del chip elegido resalta */
.chip[aria-pressed="true"]{background:var(--amarillo);border-color:var(--amarillo);color:var(--sobre-color);font-weight:700}


/* ============================================================
   SECCIONES
   ============================================================ */
/* EL ROTULO BAJA LA VOZ.

   Estaba en la misma tipografia negra que los titulos de las tarjetas
   que tiene debajo, con dos puntos de diferencia: no separaba, sumaba
   peso. Ahora usa la voz de datos, chica y espaciada —la misma ceja que
   ya usan las pantallas de lectura antes del titular—, y la separacion
   la hace el aire de arriba, no el tamano.

   Es lo que hace que una seccion tenga UNA cosa fuerte y no dos. */
.titulo-seccion{
  font-family:var(--fuente-datos);font-weight:700;font-size:var(--letra-chica);
  letter-spacing:.16em;text-transform:uppercase;color:var(--texto-suave);
  margin:38px 0 12px;display:flex;align-items:baseline;justify-content:space-between;gap:10px
}
/* El primero de la pantalla no necesita tanto aire arriba: ya lo separa
   la bajada. */
.titulo-seccion:first-child{margin-top:22px}
/* Medían 19 px de alto: por debajo del mínimo de 24 que pide la norma
   para algo que se toca con el dedo. El padding agranda lo tocable sin
   mover el texto de lugar. */
.titulo-seccion a{
  font-family:var(--fuente-sub);font-size:var(--letra-chica);text-transform:uppercase;
  letter-spacing:.06em;color:var(--texto-suave);text-decoration:none;flex:0 0 auto;
  padding:6px 2px;margin:-6px -2px;display:inline-flex;align-items:center;min-height:24px
}
@media (hover:hover) and (pointer:fine){
  .titulo-seccion a:hover{color:var(--texto)}
}

/* --- Grupos plegables ---
   Ocho títulos apilados entran juntos en la pantalla de un celular;
   ocho rejillas de cuadraditos, no: había que barrer con el pulgar
   para saber qué existía. Cerrados de entrada, se abre lo que
   interesa, y el índice completo se lee de un vistazo.

   Es <details>, no un div con JavaScript: el teclado ya lo abre con
   Enter, el lector de pantalla ya dice si está abierto o cerrado, y
   el navegador ya lo encuentra al buscar dentro de la página. */
.grupo{border-bottom:1px solid var(--linea)}
.grupo > summary{
  font-family:var(--fuente-titulo);font-weight:400;font-size:var(--letra-guia);
  text-transform:uppercase;line-height:1.15;
  display:flex;align-items:center;gap:9px;
  padding:14px 2px;cursor:pointer;list-style:none
}
.grupo > summary::-webkit-details-marker{display:none}
.grupo > summary::marker{content:''}
.grupo > summary .nombre-grupo{flex:1;min-width:0}
/* La flecha no es decorado: sin ella un título suelto no se lee como
   algo que se toca. Gira para decir en qué estado quedó. */
.grupo > summary .flecha{
  flex:0 0 auto;font-size:var(--letra-nota);color:var(--texto-suave);
  transition:transform .18s ease
}
.grupo[open] > summary .flecha{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){
  .grupo > summary:hover{color:var(--celeste)}
}
.grupo > summary:focus-visible{outline:3px solid var(--celeste);outline-offset:2px}
.grupo .cuerpo-grupo{padding-bottom:12px}
@media (prefers-reduced-motion:reduce){
  .grupo > summary .flecha{transition:none}
}

/* ============================================================
   LOS OBJETOS IMPRESOS

   Todo lo que en la app es una "pieza" —tarjetas, cuadros, el
   calendario, la portada— lleva borde de tinta y la segunda tinta
   corrida. Es el mismo lenguaje de las placas del Instagram: fondo
   amarillo, pieza con el borde a la vista.

   Va acá, en una sola regla, y NO cambiando --borde: esa variable
   también pinta el riel de la barra de progreso, el fondo de las
   pastillas y el color de los días apagados del calendario. Si se la
   vuelve negra, esas tres cosas se convierten en manchas.

   Solo se toca el COLOR del borde, nunca el grosor: así ninguna pieza
   cambia de tamaño y no se mueve nada de lugar.
   ============================================================ */
.tarjeta, .tarjeta-cuadro, .tarjeta-kit, .boton-cuadro, .ficha,
.calendario, .carrusel, .alarma, .mi-cursada, .progreso-barra, .ficha-dato,
.mapa-marco, .bloque-texto, .buscador input{
  border-color:var(--tinta-borde);
}

/* ============================================================
   TARJETAS DE CONTENIDO
   ============================================================ */
.lista{display:flex;flex-direction:column;gap:10px}

.tarjeta{
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);
  padding:14px;box-shadow:var(--sombra);text-align:left;width:100%;
  display:block;text-decoration:none;border-left:4px solid var(--celeste);
  /* Cuando la tarjeta es un <button>, el navegador le pone texto negro por
     su cuenta. En modo oscuro eso queda negro sobre negro. Lo decimos nosotros. */
  color:var(--texto)
}
.tarjeta h3{
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-guia);line-height:1.15;
  text-transform:uppercase;margin-bottom:3px
}
.tarjeta p{margin:0;color:var(--texto-suave);font-size:var(--letra-densa);line-height:1.35}
.tarjeta .meta{
  font-size:var(--letra-chica);color:var(--texto-suave);letter-spacing:.04em;text-transform:uppercase;
  margin-top:8px;display:flex;gap:10px;flex-wrap:wrap
}

/* Etiqueta de linea editorial */
.etiqueta{
  display:inline-block;font-family:var(--fuente-texto);font-size:var(--letra-mini);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:var(--radio-pastilla);
  margin-bottom:7px;color:var(--sobre-negro);background:var(--negro)
}
.etiqueta.frente  {background:var(--linea-frente);color:var(--amarillo)}
.etiqueta.gremial {background:var(--linea-gremial);color:var(--sobre-color)}
.etiqueta.info    {background:var(--linea-info);color:var(--sobre-negro)}
.etiqueta.saberes {background:var(--linea-saberes);color:var(--sobre-color)}

.tarjeta.frente  {border-left-color:var(--linea-frente)}
.tarjeta.gremial {border-left-color:var(--linea-gremial)}
.tarjeta.info    {border-left-color:var(--linea-info)}
.tarjeta.saberes {border-left-color:var(--linea-saberes)}

/* Fecha en formato calendario */
.tarjeta-fecha{display:flex;gap:13px;align-items:flex-start}
.cubo-fecha{
  flex:0 0 54px;background:var(--amarillo);color:var(--sobre-color);
  border-radius:var(--radio-chico);padding:7px 0;text-align:center;line-height:1
}
.cubo-fecha .dia{font-family:var(--fuente-titulo);font-size:24px;display:block}
.cubo-fecha .mes{
  font-family:var(--fuente-sub);font-size:var(--letra-mini);text-transform:uppercase;
  letter-spacing:.08em;display:block;margin-top:3px;font-weight:700
}

/* ============================================================
   DETALLE DE TRAMITE
   ============================================================ */
.pasos{list-style:none;counter-reset:paso;margin:16px 0 0;padding:0}
.pasos li{counter-increment:paso;position:relative;padding:0 0 18px 42px}
.pasos li::before{
  content:counter(paso);position:absolute;left:0;top:0;
  width:28px;height:28px;border-radius:50%;background:var(--amarillo);
  font-family:var(--fuente-titulo);font-size:var(--letra-base);
  display:flex;align-items:center;justify-content:center
}
.pasos li::after{
  content:'';position:absolute;left:13.5px;top:32px;bottom:2px;width:1px;background:var(--linea)
}
.pasos li:last-child::after{display:none}
.pasos .paso-titulo{font-family:var(--fuente-sub);font-weight:700;font-size:16px;line-height:1.2}
.pasos .paso-detalle{color:var(--texto-suave);font-size:var(--letra-base);margin-top:2px;white-space:pre-wrap}

.ficha{
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);
  padding:14px;margin:16px 0;box-shadow:var(--sombra)
}
.ficha dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:var(--letra-base)}
.ficha dt{
  font-family:var(--fuente-sub);font-size:var(--letra-chica);text-transform:uppercase;
  letter-spacing:.07em;color:var(--texto-suave);padding-top:2px
}
.ficha dd{margin:0;white-space:pre-wrap}

/* ============================================================
   BOTONES
   ============================================================ */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-base);
  text-transform:uppercase;letter-spacing:.05em;
  padding:13px 20px;border-radius:var(--radio-pastilla);border:none;text-decoration:none;
  background:var(--amarillo);color:var(--sobre-color);
  /* La segunda tinta del boton va en turquesa y no en negro. No es
     adorno: .boton ya estaba en el grupo de :active que baja 2 px «y la
     segunda tinta desaparece», pero no tenia ninguna sombra, asi que al
     apretarlo desaparecia algo que no existia. Y el turquesa es, en
     esta app, el color de lo que se toca. */
  box-shadow:2px 2px 0 var(--celeste)
}
@media (hover:hover) and (pointer:fine){
  .boton:hover{filter:brightness(.94)}
}
.boton.oscuro{background:var(--negro);color:var(--amarillo)}
/* El botón de contorno hereda el color del texto de la página, no el
   negro fijo: sobre fondo transparente, de noche quedaba oscuro sobre
   oscuro y no se leía (1,09). */
.boton.borde{background:transparent;border:1.5px solid var(--texto);color:var(--texto)}
.boton.peligro{background:var(--rojo-solido);color:var(--sobre-negro)}
.boton.ancho{width:100%}
.boton:disabled{opacity:.5;cursor:default}

/* ============================================================
   FORMULARIOS
   ============================================================ */
.campo{margin-bottom:14px}
.campo label{
  display:block;font-family:var(--fuente-sub);font-size:var(--letra-chica);text-transform:uppercase;
  letter-spacing:.07em;color:var(--texto-suave);margin-bottom:5px
}
.campo input,.campo textarea,.campo select{
  width:100%;font-family:var(--fuente-texto);font-size:16px;
  padding:11px 12px;border:1px solid var(--linea);border-radius:var(--radio-chico);
  background:var(--superficie);color:var(--texto);outline:none
}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--texto)}
.campo textarea{min-height:96px;resize:vertical}
.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ============================================================
   AVISOS Y ESTADOS
   ============================================================ */
.aviso{
  border-radius:var(--radio-chico);padding:11px 13px;font-size:var(--letra-base);margin:12px 0;
  background:var(--superficie);border-left:4px solid var(--texto-suave)
}
.aviso.error{border-left-color:var(--rojo);background:var(--aviso-error)}
.aviso.ok{border-left-color:var(--celeste);background:var(--aviso-ok)}

.vacio{text-align:center;color:var(--texto-suave);padding:34px 16px;font-size:var(--letra-base)}

/* ============================================================
   EL AVISO DE LO GUARDADO

   Aparece cuando la pantalla se pinto con lo de la visita anterior
   mientras busca lo de ahora. Tiene dos formas y la diferencia
   importa:

   .buscando  dura lo que tarde la red y no esta pasando nada malo,
              asi que es un renglon fino y gris que no compite con
              el contenido.
   .sin-red   la red no contesto y lo que hay en pantalla es lo unico
              que va a haber. Ahi se agranda y se queda.

   Nada de esto lleva opacity: el color que se ve es el que esta
   escrito, asi que el contraste que se mide es el de verdad. Sobre
   --apagado da 7,4:1 en claro y 8,6:1 en oscuro.
   ============================================================ */
.aviso-guardado{
  font-size:var(--letra-chica);line-height:1.4;
  padding:7px 16px;text-align:center;
  background:var(--apagado);color:var(--texto-suave);
  border-bottom:1px solid var(--linea)
}
.aviso-guardado.sin-red{
  font-size:var(--letra-nota);padding:11px 16px;
  background:var(--aviso-error);color:var(--texto);
  border-bottom:2px solid var(--rojo)
}
/* Vacia no ocupa lugar: la caja se crea antes de tener texto, para
   que el lector de pantalla la vea cambiar. */
.aviso-guardado:empty{display:none}

/* ============================================================
   CALENDARIO
   ============================================================ */
.calendario{
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);
  padding:12px 12px 10px;box-shadow:var(--sombra)
}
.cal-cabecera{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.cal-mes{
  font-family:var(--fuente-titulo);font-size:19px;text-transform:uppercase;
  line-height:1;text-align:center;flex:1
}
.cal-flecha{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--linea);background:var(--superficie);
  font-size:18px;line-height:1;color:var(--texto);
  display:flex;align-items:center;justify-content:center
}
@media (hover:hover) and (pointer:fine){
  .cal-flecha:hover{background:var(--superficie-2)}
}

.cal-grilla{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-nombre-dia{
  text-align:center;font-family:var(--fuente-sub);font-size:var(--letra-mini);font-weight:700;
  letter-spacing:.06em;color:var(--texto-suave);text-transform:uppercase;padding-bottom:4px
}

/* La celda cuadrada: el ancho lo pone la grilla, el alto lo iguala */
.cal-dia{
  aspect-ratio:1/1;border:none;background:transparent;border-radius:9px;
  font-family:var(--fuente-datos);font-size:var(--letra-base);color:var(--texto);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:0;position:relative
}
.cal-dia.vacio{visibility:hidden;pointer-events:none}
.cal-dia.apagado{color:var(--linea)}
.cal-dia.con-cosas{font-weight:700}
@media (hover:hover) and (pointer:fine){
  .cal-dia.con-cosas:hover{background:var(--superficie-2)}
}
.cal-dia.hoy{box-shadow:inset 0 0 0 1.5px var(--negro)}
.cal-dia[aria-pressed="true"]{background:var(--amarillo);color:var(--sobre-color)}
.cal-dia[aria-pressed="true"].hoy{box-shadow:inset 0 0 0 1.5px var(--negro)}

.cal-puntos{display:flex;gap:2px;height:5px;align-items:center}
.cal-punto{width:5px;height:5px;border-radius:50%;background:var(--negro)}
.cal-punto.frente  {background:var(--marca-frente)}
.cal-punto.gremial {background:var(--marca-gremial)}
.cal-punto.info    {background:var(--marca-info)}
.cal-punto.saberes {background:var(--marca-saberes)}

.cal-referencia{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--linea);font-size:var(--letra-chica);color:var(--texto-suave)
}
.cal-referencia span{display:flex;align-items:center;gap:5px}

/* En «Fechas» el calendario no es un módulo más de una columna: es el
   índice de la lista que va abajo. Va centrado y con ancho propio, así
   en una pantalla ancha no se estira hasta que los días quedan
   nadando lejos unos de otros. */
.calendario-centro{max-width:400px;margin:0 auto 24px}

/* La tarjeta del día que se tocó arriba. Anillo de tinta, no un color
   de fondo: en las placas de la agrupación lo que se resalta se
   encierra. Y así funciona igual con las cuatro líneas editoriales,
   que ya traen su propio color en el borde izquierdo. */
.tarjeta.destacada{outline:2px solid var(--texto);outline-offset:2px}

/* ============================================================
   PASAR UNA FECHA AL CALENDARIO
   ============================================================ */

/* Va separado por una línea porque no es parte de la publicación: es
   lo que se puede HACER con ella. Sin la línea se leía como un pie de
   la nota. */
.agendarlo{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--linea)
}
.agendarlo .titulo-seccion{margin-top:0}

/* Dos botones al lado, uno abajo del otro cuando no entran. El amarillo
   es el de Google y no por preferencia de marca: es el único de los dos
   que anda seguro adentro del navegador de Instagram, que es donde esta
   app se usa de verdad. */
.botones-agenda{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.botones-agenda .boton{flex:1 1 190px;min-height:48px}

/* ============================================================
   BARRA DE NAVEGACION INFERIOR
   ============================================================ */

/* ============================================================
   PIE
   ============================================================ */
/* El padding de abajo deja lugar para el botón flotante: sin esto, el
   último renglón del pie queda debajo del botón y no se puede leer. */
/* ============================================================
   ORGANIZADOR DE CURSADAS  (carrera/)
   Los tres colores que ordenan toda la pantalla:
     turquesa = la promocionás    amarillo = la cursás sin promoción
     gris     = todavía no podés  celeste  = final pendiente
   ============================================================ */

/* --- Barra de progreso ---

   ANTES ERA UNA SOLA CAJA con todo adentro: la barra, «8 de 31
   materias aprobadas», el promedio y «te quedan 2 finales» apilados
   como renglones de un parrafo. Los cuatro datos pesaban lo mismo, o
   sea que ninguno se leia primero.

   Ahora son piezas separadas —una por dato— y adentro de cada una hay
   tres tamanos bien distintos: rotulo de 12, numero de 38, pie de 13.
   La jerarquia sale del TAMANO y no del color: la app tiene cuatro
   colores contados y ninguno sobra para teñir fichas. */
.progreso{ margin-bottom:18px }
.progreso-barra{
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);
  padding:12px 13px;box-shadow:var(--sombra)
}
.progreso-barra .barra{margin-top:10px}
.barra{background:var(--linea);border-radius:var(--radio-pastilla);height:10px;overflow:hidden}
/* LA BARRA SE DIBUJA, NO APARECE DIBUJADA.

   Dos cosas cambiaron acá y las dos importan.

   La primera: antes decía `transition:width .3s` y esa línea NUNCA se
   ejecutó. Las cuatro barras de la app se pintan con innerHTML, o sea
   que el elemento nace ya con su ancho puesto: no hay estado anterior
   del que transicionar. Era una animación escrita que nadie vio nunca.
   Con @starting-style el navegador sí sabe de dónde venir —de cero— y
   la barra se dibuja sola al aparecer.

   La segunda: se dibuja con transform y no con width. El ancho es una
   medida de la página: tocarlo obliga a recalcular la posición de todo
   lo que está alrededor, cuadro por cuadro. La escala no toca la
   página, la resuelve la placa de video.

   Los 420 ms se salen del techo de 300 que rige para el resto de la
   app, y es a propósito. Esto no es una interfaz respondiendo a un
   toque: es un dato —cuánto llevás de la carrera— y el recorrido de la
   barra ES la información. Que la barra viaje hasta el 62% se lee
   distinto que encontrarla ya puesta en 62. Pasa una vez por pantalla,
   no se interrumpe nada, y nadie está esperando para tocar algo. */
.barra-llena{
  background:var(--celeste);height:100%;width:100%;
  border-radius:var(--radio-pastilla);
  transform:scaleX(calc(var(--llena,0) / 100));transform-origin:left center;
  transition:transform 420ms var(--sale)
}
@starting-style{ .barra-llena{transform:scaleX(0)} }
@media (prefers-reduced-motion:reduce){
  .barra-llena{transition:none}
  @starting-style{ .barra-llena{transform:scaleX(calc(var(--llena,0) / 100))} }
}
/* --- LAS FICHAS DE DATO ---

   Una ficha, un dato. Se dibujan solo las que tienen algo que decir:
   sin notas cargadas no hay ficha de promedio, y sin finales
   pendientes no hay ficha de finales. Una ficha con un cero adentro
   ocupa el mismo lugar que una con informacion y no dice nada.

   La grilla es auto-fit y no dos columnas fijas: en un telefono de
   375px entran dos y la tercera pasa abajo a lo ancho; en una tablet
   entran las tres. Si queda una sola, ocupa todo y no queda media
   fila vacia al lado. */
.fichas-dato{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));
  gap:10px;margin-top:10px
}
/* La que queda sola en la ultima fila ocupa el ancho entero. Sin esto,
   con tres fichas en un telefono, la tercera se queda en la columna de
   la izquierda y al lado queda un hueco del tamano de una ficha, que
   se lee como que algo falta. La regla vale solo mientras las columnas
   sean dos: mas arriba entran las tres y no sobra ninguna. */
@media (max-width:559px){
  .fichas-dato > :last-child:nth-child(odd){ grid-column:1 / -1 }
}
.ficha-dato{
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);
  padding:12px 13px;box-shadow:var(--sombra)
}
.ficha-rotulo{
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-mini);
  letter-spacing:.1em;text-transform:uppercase;color:var(--texto-suave);margin:0
}
.ficha-numero{
  font-family:var(--fuente-titulo);font-weight:400;font-size:var(--letra-dato);
  line-height:1;color:var(--texto);margin:7px 0 6px
}
/* El «%» y el «de 31» que acompanan al numero. Van adentro del numero
   y no en el pie porque se leen JUNTO con el, pero a la mitad de
   tamano: si fueran del mismo cuerpo, el dato dejaria de ser uno. */
.ficha-numero small{
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-sub);
  color:var(--texto-suave);margin-left:3px
}
.ficha-pie{
  font-size:var(--letra-chica);line-height:1.3;color:var(--texto-suave);margin:0
}

/* El campo de nota, adentro de la ficha de una materia aprobada */
/* --- La nota ya cargada, en el detalle de la materia --- */
.caja-nota{
  margin-top:14px;background:var(--superficie-2);border:1px solid var(--linea);
  border-radius:var(--radio-chico);padding:12px 13px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap
}
.nota-resumen{flex:1 1 140px;display:flex;align-items:center;gap:10px;min-width:0}
.nota-numero{
  font-family:var(--fuente-titulo);font-size:32px;line-height:1;
  color:var(--texto);flex:0 0 auto
}
.nota-detalle{font-size:var(--letra-nota);line-height:1.35;color:var(--texto-suave)}
.caja-nota .boton{flex:0 0 auto;padding:9px 14px;font-size:var(--letra-nota)}

/* --- La pantalla que pide la nota --- */
.hoja-volver{
  background:none;border:0;padding:6px 2px;margin:0 0 6px -2px;
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-nota);
  color:var(--texto-suave);min-height:24px;cursor:pointer
}
@media (hover:hover) and (pointer:fine){
  .hoja-volver:hover{color:var(--texto)}
}

.campos-nota{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.campo-nota{display:flex;flex-direction:column;gap:6px}
.campo-nota:first-child{flex:0 0 104px}
.campo-nota:last-child{flex:1 1 150px}
.campo-nota label{
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-chica);
  text-transform:uppercase;letter-spacing:.05em;color:var(--texto-suave)
}
.campo-nota input{
  width:100%;padding:12px 10px;border:1.5px solid var(--linea);
  border-radius:var(--radio-chico);background:var(--superficie);color:var(--texto);
  font-family:var(--fuente-datos);font-size:var(--letra-guia);min-height:48px
}
/* La nota es el dato principal: grande y centrada, como en una libreta */
.campo-nota:first-child input{
  font-family:var(--fuente-titulo);font-size:28px;text-align:center;padding:8px 6px
}
.campo-nota input:focus{outline:none;border-color:var(--celeste);
  box-shadow:0 0 0 3px var(--celeste)}
#nota-error{margin-top:10px}

/* «Saltar por ahora» es una salida legítima, no un castigo: se ve, pero
   no compite con el botón principal. */
.boton.texto{
  background:transparent;border:0;box-shadow:none;color:var(--texto-suave);
  text-decoration:underline;margin-top:6px;font-size:var(--letra-nota)
}
@media (hover:hover) and (pointer:fine){
  .boton.texto:hover{color:var(--texto)}
}
.boton.texto:active{transform:none;opacity:.6}

/* --- Pestañas --- */
/* Con la cuarta pestaña, «Preparar un final», las cuatro no entraban en
   343 px: se desbordaban 24 y arrastraban la página entera de costado.
   Se resolvió por las dos vías. Achicar para que entren, y dejar que se
   deslicen si algún día se suma otra, como ya hacen la fila de secciones
   y los chips. Así no puede volver a romper el ancho de la página. */
.pestanas{
  display:flex;gap:0;margin:0 0 14px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  position:relative
}
.pestanas::-webkit-scrollbar{display:none}

/* EL SUBRAYADO VIAJA.

   Antes el subrayado se apagaba en una pestaña y se prendía en la
   otra. Eso informa cuál quedó elegida, pero no informa lo otro que
   la persona necesita saber: de dónde vino y para qué lado se movió.
   Cuando la barra recorre el camino, la pantalla que aparece abajo se
   entiende como consecuencia del gesto y no como un cambio suelto.

   La barra es UN elemento —el ::after del contenedor— movido con
   transform. Las dos medidas se las pasa el JS de carrera/ en
   variables. Es la única forma de que esto no cueste nada: una barra
   que viaja con transform la resuelve la placa de video sola, mientras
   que animar el borde de cada pestaña obligaría a repintar las cuatro.

   Ojo con el detalle: las variables se ponen en el CONTENEDOR y mueven
   al ::after del contenedor, no a las pestañas. Poner una variable en
   un padre para mover a los hijos obliga al navegador a recalcular el
   estilo de todos los hijos en cada cuadro; acá el hijo es uno solo. */
/* La barra mide UN píxel y se estira con escala hasta el ancho de la
   pestaña. Podría medir el ancho real y animarse el ancho, pero eso es
   una medida de la página: el navegador tendría que recalcular la fila
   en cada cuadro del viaje. Con un píxel escalado, la barra se mueve y
   se estira en la misma propiedad —transform— y no toca el layout.
   El origen a la izquierda es lo que hace que estirar sea «crecer hacia
   la derecha» y no «crecer para los dos lados desde el centro». */
.pestanas::after{
  content:'';position:absolute;left:0;bottom:0;height:3px;width:1px;
  background:var(--texto);
  transform-origin:0 50%;
  transform:translateX(var(--pestana-x,0)) scaleX(var(--pestana-ancho,0));
  transition:transform var(--t-medio) var(--ambos);
  pointer-events:none
}
/* Antes de que el JS mida —o si no llega a correr— no hay barra
   flotante y manda el borde de la pestaña elegida, que sigue estando. */
.pestanas:not([style*="--pestana-ancho"])::after{display:none}

/* min-width:0 es lo que permite que se achiquen por debajo de su texto y
   partan en dos renglones. Sin eso, flex respeta el ancho del contenido
   y las cuatro se desbordan aunque digan flex:1. */
/* Las pestañas NO crecieron con el resto de la escala, y es a propósito:
   son cuatro repartiéndose 375 px y ya estaban al límite. Con un punto
   más, la palabra más larga dejaba de entrar y se cortaba. Quedan en
   --letra-nota, que son los mismos 14 px que tenían antes del 4/9/2026.

   Estuvo recortada por eso: «PLAN COMPLETO» era más ancha que su
   pestaña y se comía unos 2 px. `overflow-wrap` salía peor —partía la
   palabra y dejaba una «O» sola en un tercer renglón—, así que el
   arreglo fue acortar el texto: el 6/9/2026 esa pestaña pasó a decir
   «Plan». Medido con las cuatro a la vista: en 375 px cada una recibe
   78 px de texto y «Plan» ocupa 41; en 320 px, la pantalla más angosta
   que existe, reciben 64 y la más ancha pasa a ser «FINALES», que mide
   62,8. O sea que el margen que queda es un píxel: cualquier palabra
   nueva acá se mide antes, y no se mira si «entra en la pantalla» sino
   si entra en un cuarto de 288 px. */
.pestana{
  flex:1 1 0;min-width:0;
  background:transparent;border:none;border-bottom:3px solid var(--linea);
  padding:10px 4px;font-family:var(--fuente-sub);font-size:var(--letra-nota);
  line-height:1.15;text-transform:uppercase;letter-spacing:.01em;
  color:var(--texto-suave);
  transition:color var(--t-chico) ease
}
.pestana[aria-selected="true"]{border-bottom-color:var(--texto);color:var(--texto);font-weight:700}
/* Con la barra viajando, el borde de la elegida sobra: quedarían dos
   subrayados encima del mismo lugar. */
.pestanas[style*="--pestana-ancho"] .pestana[aria-selected="true"]{
  border-bottom-color:transparent
}
@media (prefers-reduced-motion:reduce){
  .pestanas::after{transition:none}
}

/* --- Las materias que se rinden libres, como texto --- */
/* Van en un renglón por año, separadas por puntos, en vez de una tarjeta
   cada una: son veinte de cuarenta y dos, y en tarjetas serían otras
   cinco pantallas de scroll. Acá lo que hace falta es recorrer la lista
   de un vistazo, no tocar cada materia: para eso está el listado de
   arriba, que sigue siendo de tarjetas. */
.lista-libres{
  margin:0 0 10px;font-size:var(--letra-nota);line-height:1.5;
  color:var(--texto)
}
.lista-libres strong{
  display:block;font-family:var(--fuente-sub);font-size:var(--letra-mini);
  font-weight:700;letter-spacing:.08em;color:var(--texto-suave);
  margin-bottom:2px
}

/* --- Interruptor de una linea --- */
.interruptor{
  display:flex;align-items:center;gap:10px;background:var(--superficie);
  border:1px solid var(--linea);border-radius:var(--radio-chico);
  padding:11px 13px;margin:6px 0 16px;font-size:var(--letra-base);line-height:1.3
}
.interruptor input{width:19px;height:19px;flex:0 0 auto;accent-color:var(--texto)}

.cuenta-grupo{
  background:var(--negro);color:var(--sobre-negro);border-radius:var(--radio-pastilla);
  font-size:var(--letra-chica);padding:2px 9px;letter-spacing:0
}

/* --- Tarjeta de materia --- */
.tarjeta.materia{border-left-color:var(--linea);cursor:pointer}
@media (hover:hover) and (pointer:fine){
  .tarjeta.materia:hover{border-color:var(--texto)}
}
.tarjeta.materia.promociona{border-left-color:var(--celeste)}
.tarjeta.materia.cursa     {border-left-color:var(--amarillo)}
.tarjeta.materia.trabada   {
  /* Trabada no se dice apagando el texto: el renglon que explica que te
     falta aprobar es justo el que hay que poder leer. Se dice con la
     superficie y con la barra cortada, que se ven igual en los dos temas. */
  border-left-color:var(--linea);border-left-style:dashed;
  background:var(--apagado)
}
/* EN EL PLAN COMPLETO, LO TRABADO PIERDE LA SEGUNDA TINTA.

   En «Mi cursada» las trabadas van juntas, abajo de su propio rótulo,
   y con la superficie apagada alcanza. En el plan van intercaladas con
   todo lo demás —dieciséis de treinta y una— y ahí ese gris es un
   susurro: quedaban idénticas a las que sí se pueden cursar.

   Lo que se apaga es la SOMBRA, no el texto. En serigrafía la segunda
   tinta corrida es lo que levanta la pieza del papel; sacarla la deja
   apoyada, que es exactamente «esta todavía no». Y cada palabra
   —empezando por la que dice cuántas correlativas faltan— se sigue
   leyendo con el mismo contraste que antes, que es la regla anotada
   acá arriba. */
#por-anio .tarjeta.materia.trabada{ box-shadow:none }

.tarjeta.materia.final     {border-left-color:var(--linea-saberes)}
.tarjeta.materia .motivo{margin:0;color:var(--texto-suave);font-size:var(--letra-densa);line-height:1.35}
.tarjeta.materia .motivo strong{color:var(--texto)}

.tarjeta.materia.estado-aprobada{border-left-color:var(--celeste)}
.tarjeta.materia.estado-cursada {border-left-color:var(--amarillo)}
.tarjeta.materia.estado-cursando{border-left-color:var(--linea-saberes)}

/* --- Pastilla de estado ---

   LA PASTILLA BASE HEREDA EL COLOR DEL TEXTO DE LA PÁGINA, NO UN
   NEGRO FIJO. Es el mismo error que ya se arregló en `.boton.borde`:
   el fondo de esta pastilla es --linea, que SÍ se da vuelta de noche
   (#D8E5EA de día, #3A3830 de noche), y encima llevaba --sobre-color,
   que NO se da vuelta nunca. De noche eso era #1A1A1A sobre #3A3830:
   contraste 1,48, o sea que la etiqueta «Pendiente» —la que llevan
   casi todas las materias— no se leía. Con --texto da 13,5 de día y
   10,2 de noche.

   En las tres variantes de abajo --sobre-color SÍ es el correcto,
   porque ahí el fondo es un color de marca que no cambia entre día y
   noche: el texto tampoco tiene por qué cambiar.

   Y «Aprobada» dejó de usar el celeste pleno. Sobre --celeste el
   negro da 4,92 y el blanco 3,54; ni un negro puro pasa de 5,94. O
   sea que NINGÚN color de texto llega a los 7:1 del proyecto sobre
   ese fondo, y era el mismo 4,92 de día y de noche: no lo arreglaba
   el modo oscuro. Aclarar el celeste tampoco servía: para llegar a 7
   con texto oscuro hay que subirlo tanto que queda igual al celeste
   claro de «Cursando» y los dos estados se confunden. Por eso va al
   otro lado, a --celeste-hondo con texto claro, que da 7,71 y de paso
   ordena los tres celestes por peso: cursando el más claro, aprobada
   el más hondo.

   Medido en el navegador componiendo las capas y la opacidad
   heredada, no a ojo: pendiente 13,5 de día / 10,2 de noche ·
   cursando 9,34 · cursada 13,77 · aprobada 7,71. */
.pastilla{
  display:inline-block;font-size:var(--letra-mini);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 8px;border-radius:var(--radio-pastilla);
  background:var(--linea);color:var(--texto)
}
.pastilla.cursando{background:var(--linea-saberes);color:var(--sobre-color)}
.pastilla.cursada {background:var(--amarillo);color:var(--sobre-color)}
.pastilla.aprobada{background:var(--celeste-hondo);color:var(--sobre-negro)}

/* --- Hoja de detalle ---

   LAS HOJAS ENTRAN Y SALEN POR LA MISMA PUERTA.

   Antes no. Entraban con un empujoncito de 14 píxeles y se iban
   deslizándose la altura entera hacia abajo. O sea que la salida
   prometía un origen —«vengo de abajo de la pantalla»— que la entrada
   nunca había mostrado. Es la clase de incoherencia que no se nota
   mirando, pero que hace que algo se sienta armado con partes de
   distintos lados. Ahora las dos recorren el mismo camino.

   Y SON TRANSICIONES, NO @keyframes. Un keyframe siempre arranca de
   cero: si alguien abre y cierra rápido, el movimiento se corta en
   seco y vuelve a empezar. Una transición se redirige desde donde
   está, así que abrir a mitad del cierre devuelve la hoja desde donde
   había quedado. Además, con @starting-style el navegador sabe solo
   de dónde entrar y desaparece el setTimeout que en el JS repetía a
   mano la duración escrita acá —dos números que tarde o temprano se
   desincronizan. Ahora el JS espera el transitionend y listo. */
.hoja-fondo{
  position:fixed;inset:0;z-index:80;background:rgba(26,26,26,.55);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:1;
  transition:opacity var(--t-chico) var(--sale)
}
.hoja{
  background:var(--superficie);width:100%;max-width:var(--ancho-max);
  max-height:88vh;overflow-y:auto;position:relative;
  border-radius:var(--radio) var(--radio) 0 0;padding:20px 16px 30px;
  transform:translateY(0);
  transition:transform var(--t-hoja) var(--cajon)
}
@starting-style{
  .hoja-fondo{opacity:0}
  .hoja{transform:translateY(100%)}
}
.hoja-fondo.cerrando{opacity:0}
.hoja-fondo.cerrando .hoja{transform:translateY(100%)}

/* Navegadores sin @starting-style (Safari viejo, Firefox anterior al
   129) no ven la entrada, pero SÍ la salida, y sobre todo ven la hoja:
   nunca queda una capa invisible tapando la pantalla. Degrada a que
   aparezca de una, que es exactamente lo que hacía antes de todo esto. */

/* El paso de una pantalla a la otra, adentro de la misma hoja, lo
   maneja carrera/index.html con element.animate(). No está acá porque
   necesita saber PARA QUÉ LADO va: al detalle → la nota entra desde la
   derecha; de la nota → el detalle vuelve desde la izquierda. El
   sentido dice en qué parte de la secuencia estás parada, y eso el CSS
   solo no lo sabe.
   Antes esto era un @keyframes que se reiniciaba con
   `void offsetWidth` —un recálculo de página entera cada vez que se
   cambiaba de pantalla, solo para volver a disparar la animación. */

/* MENOS MOVIMIENTO NO ES CERO MOVIMIENTO.
   Antes acá decía animation:none y la hoja se teletransportaba: sin
   ninguna señal de que había aparecido algo nuevo encima, que es
   justamente lo que la animación estaba diciendo. Lo que molesta del
   movimiento es el DESPLAZAMIENTO, no el hecho de aparecer. Así que se
   va el translate y se queda un fundido corto. */
@media (prefers-reduced-motion:reduce){
  .hoja{transition:opacity var(--t-chico) var(--sale);transform:none;opacity:1}
  @starting-style{ .hoja{opacity:0;transform:none} }
  .hoja-fondo.cerrando .hoja{transform:none;opacity:0}
}
.hoja-cerrar{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:var(--radio-pastilla);
  border:1px solid var(--linea);background:var(--superficie);font-size:var(--letra-base);line-height:1
}
.hoja-cod{
  font-family:var(--fuente-sub);font-size:var(--letra-chica);text-transform:uppercase;
  letter-spacing:.08em;color:var(--texto-suave)
}
.hoja h2{
  font-family:var(--fuente-titulo);font-size:25px;line-height:1.05;
  text-transform:uppercase;margin:4px 40px 12px 0
}
/* El título recibe el foco al volver del detalle, para que quien navega
   con teclado no quede en la nada. Pero no es algo que se toque, así que
   no lleva el recuadro del foco. */
.hoja h2:focus{outline:none}
.veredicto{
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-densa);
  text-transform:uppercase;letter-spacing:.05em;line-height:1.25;
  padding:11px 13px;border-radius:var(--radio-chico);background:var(--linea)
}
.veredicto.promociona{background:var(--celeste);color:var(--sobre-color)}
.veredicto.cursa     {background:var(--amarillo);color:var(--sobre-color)}
.veredicto.trabada   {background:var(--linea);color:var(--texto-suave)}

.opciones-estado{display:flex;flex-direction:column;gap:8px}
.opcion{
  background:var(--superficie);border:1.5px solid var(--linea);border-radius:var(--radio-chico);
  padding:12px 13px;text-align:left;font-size:var(--letra-base);line-height:1.25
}
.opcion.elegida{border-color:var(--texto);font-weight:700}
.opcion.elegida.cursando{background:var(--linea-saberes);color:var(--sobre-color)}
.opcion.elegida.cursada {background:var(--amarillo);color:var(--sobre-color)}
.opcion.elegida.aprobada{background:var(--celeste);color:var(--sobre-color)}

.lista-correl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lista-correl li{
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-chico);
  padding:10px 12px;font-size:var(--letra-base);line-height:1.3
}
.lista-correl li .pastilla{margin-right:7px;vertical-align:1px}
.lista-correl li small{color:var(--texto-suave)}

.letra-chica{color:var(--texto-suave);font-size:var(--letra-nota);line-height:1.45;margin:8px 0 0}

/* --- Puerta al organizador desde la pantalla de inicio --- */

/* --- Mapa de correlatividades --------------------------------
   Se lee de izquierda a derecha: una columna por año. Las lineas
   unen cada materia con las que le abren la puerta. Los colores son
   los mismos del resto del organizador: turquesa = promocion,
   amarillo = cursada.
   ------------------------------------------------------------ */
.mapa-leyenda{
  display:flex;flex-wrap:wrap;gap:7px 14px;margin:0 0 10px;
  font-size:var(--letra-nota);color:var(--texto-suave)
}
.mapa-leyenda span{display:flex;align-items:center;gap:6px}
.mapa-leyenda i{
  width:15px;height:15px;border-radius:4px;flex:0 0 auto;
  background:var(--superficie);border:1.5px solid var(--linea)
}
.mapa-leyenda i.aprobada  {background:var(--celeste);border-color:var(--celeste)}
.mapa-leyenda i.cursada   {background:var(--amarillo);border-color:var(--amarillo)}
.mapa-leyenda i.promociona{border-color:var(--celeste);border-width:2.5px}
.mapa-leyenda i.cursa     {border-color:var(--amarillo);border-width:2.5px}
.mapa-leyenda i.trabada   {background:var(--apagado)}

.mapa-marco{
  overflow:auto;-webkit-overflow-scrolling:touch;
  background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--radio);box-shadow:var(--sombra)
}
.mapa-lienzo{position:relative}
.mapa-lienzo svg{position:absolute;left:0;top:0;pointer-events:none}

.mapa-col-titulo{
  position:absolute;top:12px;
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-chica);
  text-transform:uppercase;letter-spacing:.06em;color:var(--texto-suave);white-space:nowrap
}

.mapa-nodo{
  position:absolute;display:flex;flex-direction:column;gap:2px;
  text-align:left;overflow:hidden;cursor:pointer;
  background:var(--superficie);border:1.5px solid var(--linea);
  border-radius:var(--radio-chico);padding:6px 8px;
  font-family:var(--fuente-texto);line-height:1.14
}
.mapa-nodo .cod{
  font-family:var(--fuente-datos);font-size:var(--letra-mini);letter-spacing:.02em;color:var(--texto-suave);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.mapa-nodo .nom{
  font-size:var(--letra-chica);font-weight:700;color:var(--texto);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
.mapa-nodo.aprobada  {background:var(--celeste);border-color:var(--celeste);color:var(--sobre-color)}
.mapa-nodo.cursada   {background:var(--amarillo);border-color:var(--amarillo);color:var(--sobre-color)}
.mapa-nodo.cursando  {border-color:var(--linea-saberes);border-width:2.5px}
.mapa-nodo.promociona{border-color:var(--celeste);border-width:2.5px}
.mapa-nodo.cursa     {border-color:var(--amarillo);border-width:2.5px}
.mapa-nodo.trabada   {background:var(--apagado)}
.mapa-nodo.trabada .nom{color:var(--texto-suave)}
/* El nombre y el código tienen color propio, así que sobre el amarillo
   y el celeste hay que pisarlos: si no, de noche quedan claros sobre
   claro y el nodo se vuelve ilegible. */
.mapa-nodo.cursada .nom, .mapa-nodo.aprobada .nom,
.mapa-nodo.cursada .cod, .mapa-nodo.aprobada .cod{color:var(--sobre-color)}
@media (hover:hover) and (pointer:fine){
  .mapa-nodo:hover{box-shadow:0 0 0 2px var(--negro)}
}

.mapa-arista{fill:none;stroke:var(--linea);stroke-width:1.2}
.mapa-arista.promociona{stroke:var(--celeste);stroke-width:2.4}
.mapa-arista.cursa     {stroke:var(--amarillo);stroke-width:2.4}
.mapa-arista.resaltada {stroke:var(--negro);stroke-width:2.4}

/* ------------------------------------------------------------
   QUÉ PIDE Y QUÉ ABRE

   TRES ANILLOS Y NINGÚN COLOR NUEVO. El color de cada nodo ya está
   ocupado diciendo cómo venís con esa materia —aprobada, te falta el
   final, podés cursarla—: pintar encima la relación taparía el estado,
   que es el dato principal. Así que la relación se dibuja alrededor,
   con tinta, que es lo que hace esta app cuando algo se resalta.

   Y NO SE APAGA NADA. La primera versión bajaba a opacidad las
   materias sin relación, que es lo que hace todo el mundo y se ve muy
   bien en una captura. Pero apagar texto es bajarle el contraste: a
   .35 el nombre de una materia deja de leerse, y el mapa entero pasa a
   ser ilegible salvo cinco nodos. Los anillos alcanzan, porque además
   la dirección la da la posición: lo que la materia pide está siempre
   a su izquierda y lo que abre siempre a su derecha.

   El outline no ocupa lugar en la página, así que ninguno de los tres
   mueve el mapa ni un píxel al aparecer.

   EL DESPLAZAMIENTO NO ES ESTÉTICO. El outline se dibuja AFUERA del
   nodo, o sea sobre el fondo del mapa y no sobre el relleno del nodo, y
   eso es lo que salva la medición: la tinta contra el relleno amarillo
   de «te falta el final» da 1,1 de noche —invisible— y contra el fondo
   del mapa da 13,9. Con el desplazamiento en cero el anillo tocaría el
   relleno y volvería a perderse. Medido en los dos temas: 16,9 de día
   y 13,9 de noche, contra los 3 que pide la norma.

   Los 2 px de separación entran de sobra: entre dos filas de nodos hay
   12 px, y dos anillos vecinos ocupan 4 de cada lado.
   ------------------------------------------------------------ */
.mapa-nodo.elegida{outline:3px solid var(--texto);outline-offset:3px}
.mapa-nodo.pide   {outline:2px solid var(--texto);outline-offset:2px}
.mapa-nodo.abre   {outline:2px dashed var(--texto);outline-offset:2px}

/* El renglón que dice qué está marcado. Sin nada elegido es la única
   pista de que el mapa se puede tocar, así que no se esconde. */
.mapa-elegida{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 10px;padding:9px 12px;
  background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--radio);font-size:var(--letra-nota)
}
.mapa-elegida.con-materia{min-height:48px}
.mapa-elegida-guia{color:var(--texto-suave)}
/* Dos renglones y corta. Los nombres largos de verdad —«Teoría de las
   culturas y antropologías de las sociedades contemporáneas»— hacían
   un renglón de cuatro líneas que empujaba el mapa entero fuera de la
   pantalla del celular, y encima para repetir el nombre de la materia
   que la persona ACABA de tocar y que sigue teniendo ahí, con su
   anillo, tres dedos más abajo. Lo que este renglón tiene que decir
   son los dos números. */
.mapa-elegida-texto strong{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  font-family:var(--fuente-sub);font-size:var(--letra-densa);line-height:1.25
}
.mapa-elegida-cuentas{
  display:block;margin-top:3px;
  color:var(--texto-suave);font-size:var(--letra-chica)
}
.mapa-elegida .boton{
  flex:0 0 auto;min-height:48px;padding:9px 15px;font-size:var(--letra-chica)
}

/* Los dos números llevan puesto el anillo que hay que buscar en el
   mapa. Es la referencia, dicha con el ejemplo: una fila de
   referencias más abajo de la que ya está sería la tercera cosa que
   leer antes de mirar el mapa. */
.mapa-pide, .mapa-abre{
  display:inline-block;padding:0 6px;margin:0 1px;
  font-family:var(--fuente-datos);color:var(--texto)
}
.mapa-pide{border:2px solid var(--texto)}
.mapa-abre{border:2px dashed var(--texto)}

/* ============================================================
   APERTURA · la animacion de cuando abris la app
   Dura poco menos de un segundo y se va sola. Se ve una vez por
   visita, no cada vez que cambias de pantalla.
   ============================================================ */
/* El logo animado de la Agrupacion, traido del proyecto de Claude Design
   "Animación logo Simón Bolívar". Son tres capas apiladas (el contorno de
   Sudamerica, SIMON y BOLIVAR) sobre el amarillo de la marca. El dibujo
   completo mide 1080x1350, y la tinta ocupa 805x664 en el centro: por eso
   la escala se calcula contra esas medidas y no contra el lienzo.
   La coreografia (que capa entra cuando) esta en index.html. */
.apertura{
  position:fixed;inset:0;z-index:200;overflow:hidden;
  /* Amarillo PLENO, no el suave: es el fondo con el que fue dibujado
     el logo, y las tres capas estan hechas para ese amarillo. */
  background:var(--amarillo);
  display:flex;align-items:center;justify-content:center;
  transition:opacity var(--t-hoja) var(--sale)
}
.apertura::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 42%,
    rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 60%, rgba(182,39,37,.07) 100%)
}
.apertura.yendose{opacity:0}

.marca-escena{
  position:relative;flex:0 0 auto;
  width:1080px;height:1350px;transform-origin:50% 50%;
  /* Le avisamos al navegador que estas tres capas se van a mover y a
     enmascarar durante todo el splash, así les arma su propia capa de
     composición una sola vez en vez de decidirlo cuadro por cuadro. */
  will-change:transform
}
.marca-escena .capa{position:absolute;inset:0;overflow:hidden}
.marca-escena .capa img{
  position:absolute;left:0;top:0;width:1080px;height:1350px;
  user-select:none;-webkit-user-select:none;-webkit-user-drag:none
}
/* La cortina que tapa cada capa hasta que le toca. Es del amarillo del
   fondo, así que mientras cubre no se distingue del fondo que tiene al
   lado: se lee como si el dibujo todavía no estuviera, no como si
   hubiera algo encima.

   El borde de ataque va en degradado —los primeros 6% son translúcidos—
   para que el dibujo no aparezca cortado con una regla. Ese era el
   único motivo por el que antes esto era una máscara; con el degradado
   metido en la propia cortina, el efecto es el mismo y el costo es
   cero. Los degradados de CSS interpolan con alfa premultiplicada, así
   que ir de transparent al amarillo no pasa por ningún gris.

   Se estiran un 10% de más para los dos lados: al correrse, el borde
   blando tiene que terminar de salir DESPUÉS del límite de la capa, si
   no se ve la costura al final del recorrido. */
.marca-escena .cortina{
  position:absolute;background:var(--amarillo);
  will-change:transform
}
.marca-escena .hacia-abajo{
  left:0;right:0;top:-10%;height:120%;
  background:linear-gradient(to bottom,
    transparent 0%, var(--amarillo) 14%, var(--amarillo) 100%)
}
.marca-escena .hacia-derecha{
  top:0;bottom:0;left:-10%;width:120%;
  background:linear-gradient(to right,
    transparent 0%, var(--amarillo) 14%, var(--amarillo) 100%)
}
/* EL DESTELLO PERDIÓ EL mix-blend-mode.

   Tenía soft-light, que obliga al navegador a mezclar este elemento
   con TODO lo que tiene debajo —las tres capas del logo, a tamaño
   completo— y esa mezcla no la puede hacer la placa de video sola.
   Era la línea más cara de la apertura: por sí sola sacaba a la escena
   entera del camino rápido de composición, justo en el segundo en que
   el teléfono además está bajando las imágenes y las cuatro consultas.

   Un blanco translúcido encima del amarillo pleno da prácticamente el
   mismo brillo, y cuesta cero. La diferencia se ve con un medidor, no
   con el ojo; la diferencia de fluidez en un teléfono de gama media se
   ve sin medidor. */
.marca-escena .destello{
  position:absolute;top:-20%;left:0;width:26%;height:140%;opacity:0;
  transform:rotate(14deg);pointer-events:none;
  will-change:transform,opacity;
  background:linear-gradient(to right,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 100%)
}

/* ============================================================
   BIENVENIDA · solo la primera vez que alguien abre la app
   ============================================================ */
/* La apertura y la bienvenida no tienen barra de navegacion abajo, asi
   que hay que sacarles el hueco que el body le reserva. Si no, la
   pantalla queda 80px mas alta de lo que se ve y aparece scroll. */
body.antes-de-entrar{padding-bottom:0}  /* apertura y bienvenida a pantalla completa */

/* Tiene que entrar de una en la pantalla del telefono: si los botones
   quedan abajo del pliegue, la bienvenida no sirve para nada. Por eso
   el dibujo se mide en vh y encoge solo en pantallas cortas. */
/* Amarillo pleno, como la banda .sol de «¿Quiénes somos?». El color va
   fijo y NO cambia de noche: es un objeto impreso, y una placa no se
   apaga porque sea de noche. Negro sobre este amarillo da 13,5 y el
   rojo de las palabras destacadas da 5,2: los dos pasan AA. */
.bienvenida{
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  padding:clamp(20px,4vh,34px) 20px calc(20px + env(safe-area-inset-bottom));
  background:var(--amarillo);color:var(--sobre-color);
  text-align:left;position:relative;overflow:hidden
}
/* La trama de puntos de las serigrafías, la misma de la banda oscura.
   Acá la tinta es negra: sobre amarillo, puntos amarillos no se ven. */
.bienvenida::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(#1A1A1A 1px, transparent 1.1px);
  background-size:10px 10px;opacity:.09
}
.bienvenida-adentro{
  position:relative;z-index:1;flex:1;min-height:0;
  display:flex;flex-direction:column;
  width:100%;max-width:var(--ancho-max);margin:0 auto
}
.bienvenida .arriba{
  flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(6px,1.4vh,14px)
}
.bienvenida .dibujo{
  width:min(128px,29vw);height:auto;margin-bottom:clamp(2px,1.4vh,12px)
}
.bienvenida .ceja-lectura{margin:0}

/* Más chico que el grito de «¿Quiénes somos?»: allá la pantalla se
   scrollea, acá el lema Y los botones tienen que entrar junto con el
   titular en la pantalla de un teléfono. Si «Entrar» queda abajo del
   pliegue, la portada deja de funcionar. */
/* En mayúsculas, a diferencia de los gritos de «¿Quiénes somos?»: acá
   el titular es el NOMBRE de la app, y el nombre se escribe igual que
   en la cabecera. Un nombre en caja mixta y el mismo nombre en
   versalitas dos pantallas después no parecen la misma marca. */
.bienvenida .grito{
  font-size:clamp(38px,10.4vw,62px);max-width:15ch;text-transform:uppercase
}
.bienvenida .grito em{color:var(--rojo-solido)}

.bienvenida .bajada-lectura{margin:clamp(8px,1.8vh,18px) 0 0;max-width:36ch}

.bienvenida .abajo{
  flex:0 0 auto;display:flex;flex-direction:column;gap:10px;
  width:100%;max-width:420px;margin-top:clamp(14px,2.6vh,26px)
}
/* El color va atado a la banda, no al tema: --texto de noche es casi
   blanco y sobre el amarillo no se leería (1,3). */
.bienvenida .sin-cuenta{
  background:transparent;border:none;padding:12px;
  font-family:var(--fuente-sub);font-size:16px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--sobre-color);text-decoration:underline;text-underline-offset:3px
}

/* LO MISMO PARA «CREAR MI CUENTA», QUE SE HABÍA QUEDADO AFUERA.

   `.boton.borde` hereda --texto a propósito, para que sobre un fondo
   transparente se lea de día y de noche. Pero acá el fondo NO es
   transparente ni sigue al tema: es la placa amarilla, que es fija. De
   noche --texto es #F2EFE2 y el botón quedaba casi blanco sobre
   amarillo: contraste 1,10, medido. Invisible, igual que el renglón de
   abajo antes de que le pusieran el color fijo.

   El arreglo ya estaba escrito dos veces en esta hoja —`.banda.tinta
   .boton.borde` y `.banda.sol .boton.borde`— pero la bienvenida no es
   una banda, así que no lo heredaba. Con la tinta da 13,77. */
.bienvenida .boton.borde{color:var(--sobre-color);border-color:var(--sobre-color)}

/* Y EL ANILLO DEL FOCO, POR LA MISMA RAZÓN.

   El anillo general es celeste, y sobre este amarillo da 2,80: abajo
   del 3 que pide la norma para lo que no es texto. Sobre la placa
   manda la tinta, que da 13,77. Es exactamente lo que ya se hace
   sobre la cabecera negra, donde el que manda es el amarillo. */
.bienvenida a:focus-visible,
.bienvenida button:focus-visible{outline-color:var(--sobre-color)}

/* ============================================================
   INICIO · tarjeta grande y recuadros
   ============================================================ */
/* La tarjeta grande es el momento de marca dentro del contenido: va en
   amarillo PLENO. Sobre el fondo suave resalta, y con letra negra da 13,8. */


/* ============================================================
   QUIENES SOMOS
   ============================================================ */
.bloque-texto{
  background:var(--superficie);border:1px solid var(--linea);
  border-left:4px solid var(--celeste);border-radius:var(--radio);
  padding:16px;margin-bottom:10px;box-shadow:var(--sombra)
}
.bloque-texto h2{
  font-family:var(--fuente-titulo);font-weight:400;font-size:19px;line-height:1.1;
  text-transform:uppercase;margin-bottom:9px
}
.bloque-texto p{margin:0 0 10px;font-size:var(--letra-base);line-height:1.5}
.bloque-texto p:last-child{margin-bottom:0}

.redes{display:flex;flex-wrap:wrap;gap:8px}
.redes .boton{width:auto}

/* Lo que todavia no se completo se ve, pero apagado: asi no se
   publica un boton que no lleva a ningun lado. */
.red-pendiente{
  display:inline-block;font-size:var(--letra-densa);color:var(--texto-suave);font-style:italic;
  background:var(--superficie-2);border-radius:var(--radio-chico);padding:8px 11px
}

.bloque-sumate{
  background:var(--negro);color:var(--sobre-negro);
  border-radius:var(--radio);padding:18px;margin:16px 0 4px
}
.bloque-sumate h2{
  font-family:var(--fuente-titulo);font-weight:400;font-size:22px;
  text-transform:uppercase;color:var(--amarillo);margin-bottom:8px
}
.bloque-sumate p{margin:0 0 14px;font-size:var(--letra-base);line-height:1.5}
.bloque-sumate .boton.oscuro{background:var(--amarillo);color:var(--sobre-color)}
.bloque-sumate .red-pendiente{background:var(--linea-negro);color:var(--sobre-negro-suave)}

/* El enlace de "¿Quiénes somos?" en el pie y en el menú */
.menu-lista a.menu-aparte{
  margin-top:8px;padding-top:18px;border-top:1px solid var(--linea-negro)
}

/* ============================================================
   EL LOGO EN LA PORTADA
   Va en rojo, no en amarillo: sobre el fondo claro de la app el
   amarillo tiene contraste 1,3 y no se veria. El rojo da 6,0.
   ============================================================ */

/* ============================================================
   PORTADA: el carrusel de imagenes
   ============================================================ */
.carrusel{
  position:relative;margin:16px 0 8px;border-radius:var(--radio);
  overflow:hidden;background:var(--amarillo);box-shadow:var(--sombra)
}
/* DOS VELOCIDADES, PORQUE SON DOS COSAS DISTINTAS.

   El carrusel se mueve por dos motivos que no se parecen en nada.
   Cuando avanza solo es ambiente: nadie lo pidió, nadie está esperando,
   y puede tomarse 400 ms con una curva que arranca y frena suave.
   Cuando alguien toca un punto o arrastra con el dedo, eso es una
   RESPUESTA: la persona hizo algo y está mirando a ver si pasó. Ahí
   500 ms con curva blanda se sienten pegajosos, como si la app dudara.
   Antes las dos usaban la misma. */
.carrusel-pista{
  display:flex;
  transition:transform 400ms var(--ambos);
  will-change:transform;
  /* pan-y le dice al navegador: el desplazamiento vertical seguí
     manejándolo vos, el horizontal es mío. Sin esto, arrastrar de
     costado sobre el carrusel movía la página y el gesto se perdía. */
  touch-action:pan-y;
  /* Sin esto, arrastrar sobre una imagen dispara el «arrastrar imagen»
     del navegador y el gesto se corta a la mitad. */
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none
}
.carrusel-pista img{-webkit-user-drag:none;pointer-events:none}
.carrusel-pista.a-dedo{transition:transform var(--t-medio) var(--sale)}
/* Mientras el dedo está apoyado la lámina sigue al dedo sin retardo:
   cualquier transición acá se sentiría como arrastrar algo pegajoso. */
.carrusel-pista.arrastrando{transition:none}
.carrusel-lamina{flex:0 0 100%;position:relative}
/* Las dos ilustraciones no tienen exactamente la misma proporción, y
   como las láminas se estiran a la más alta, quedaban 87 px de amarillo
   vacío abajo. Con la proporción fija las dos miden igual y el bloque
   deja de pesar más que el contenido que tiene al lado. */
.carrusel-lamina img{
  width:100%;height:auto;display:block;
  aspect-ratio:900/358;object-fit:cover;object-position:center
}
.carrusel-pie{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;
  font-family:var(--fuente-sub);font-size:var(--letra-densa);font-weight:700;color:var(--sobre-color);
  background:linear-gradient(to top, rgba(249,232,48,.96) 40%, rgba(249,232,48,0))
}
.carrusel-puntos{
  position:absolute;bottom:2px;right:6px;display:flex;gap:0
}
/* El punto que se ve sigue midiendo 8 px, pero lo que se toca mide 24,
   que es el mínimo de la norma. Antes eran 8x8: imposible de acertar
   con el pulgar. El botón es transparente y el punto lo dibuja el
   ::before, así crece el área sin crecer el dibujo. */
.carrusel-puntos button{
  width:24px;height:24px;padding:0;border:none;background:transparent;
  display:flex;align-items:center;justify-content:center
}
/* El punto mide siempre 18 y se ESTIRA con escala hasta los 8 que se
   ven cuando no es el elegido. Al revés —creciendo el ancho de 8 a 18—
   el navegador tiene que recalcular la fila de puntos en cada cuadro,
   y son dos elementos moviéndose para dibujar un punto. */
.carrusel-puntos button::before{
  content:'';display:block;width:18px;height:8px;
  border-radius:var(--radio-pastilla);
  background:rgba(26,26,26,.3);
  transform:scaleX(.444);
  transition:transform var(--t-chico) var(--sale),
             background-color var(--t-chico) ease
}
.carrusel-puntos button[aria-current="true"]::before{
  background:var(--negro);transform:scaleX(1)
}
@media (prefers-reduced-motion:reduce){
  .carrusel-puntos button::before{transition:background-color var(--t-chico) ease}
}

/* ============================================================
   CALENDARIO CUADRADO DEL INICIO
   ============================================================ */
.calendario.cuadrado{
  background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--radio);padding:14px;box-shadow:var(--sombra);margin-bottom:8px
}
.calendario.cuadrado .cal-grilla{gap:4px}
.calendario.cuadrado .cal-dia{
  aspect-ratio:1;font-size:var(--letra-densa);position:relative;
  flex-direction:column;justify-content:center;gap:0;padding-bottom:9px
}
.cal-numero{line-height:1}

/* La barrita de abajo del día. Cuando dos días seguidos son de lo
   mismo, la barra se estira por encima del hueco de 4px de la grilla,
   así una mesa de dos semanas se lee como una franja y no como puntos. */
.cal-barra{
  position:absolute;left:5px;right:5px;bottom:5px;height:4px;border-radius:var(--radio-pastilla)
}
.cal-barra.mesa  {background:var(--rojo)}
.cal-barra.asueto{background:var(--celeste)}
.cal-barra.sigue-izq{left:-2px;border-top-left-radius:0;border-bottom-left-radius:0}
.cal-barra.sigue-der{right:-2px;border-top-right-radius:0;border-bottom-right-radius:0}
/* Las mismas franjas, pintadas por línea editorial: así las usa el
   calendario de «Fechas», que muestra toda la agenda y no solo las
   mesas y los asuetos como el del inicio. */
.cal-barra.frente {background:var(--marca-frente)}
.cal-barra.gremial{background:var(--marca-gremial)}
.cal-barra.info   {background:var(--marca-info)}
.cal-barra.saberes{background:var(--marca-saberes)}
/* Cuando en un día conviven dos líneas, la segunda va encima de la
   primera. Más de dos no se dibujan: se ven tocando el día. */
.cal-barra.segunda{bottom:11px}
.cal-dia.con-cosas.mesa  {background:var(--dia-mesa)}
.cal-dia.con-cosas.asueto{background:var(--dia-asueto)}

/* La leyenda: dice con letras lo que la grilla dice con colores */
.cal-leyenda{
  margin-top:12px;border-top:1px solid var(--linea);padding-top:11px;
  display:flex;flex-direction:column;gap:9px
}
.cal-leyenda.vacia{color:var(--texto-suave);font-size:var(--letra-densa);padding-top:12px}
.cal-leyenda-fila{display:flex;align-items:flex-start;gap:9px}
.cal-marca{
  flex:0 0 auto;width:14px;height:5px;border-radius:var(--radio-pastilla);margin-top:6px
}
.cal-marca.mesa  {background:var(--rojo)}
.cal-marca.asueto{background:var(--celeste)}
.cal-leyenda-texto{display:flex;flex-direction:column;line-height:1.25}
.cal-leyenda-texto strong{font-family:var(--fuente-sub);font-size:var(--letra-densa);font-weight:700}
.cal-leyenda-texto small{color:var(--texto-suave);font-size:var(--letra-nota)}

.cal-elegido{display:flex;flex-direction:column;gap:8px}
.cal-elegido:not(:empty){margin-top:12px;border-top:1px solid var(--linea);padding-top:12px}
.cal-elegido .vacio{padding:12px 0;font-size:var(--letra-densa)}

/* ============================================================
   PANEL 3x3 DE ACCESOS
   ============================================================ */
.rejilla-3x3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 10px}
.boton-cuadro{
  aspect-ratio:1;background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--radio);box-shadow:var(--sombra);text-decoration:none;
  color:var(--texto);padding:9px 7px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;overflow:hidden
}
.boton-cuadro .icono{font-size:26px;line-height:1}
/* Estas nueve etiquetas son la navegación principal de la portada.
   Estaban en 11,5 px, tamaño de nota al pie. */
.boton-cuadro .nombre{
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-nota);line-height:1.14;
  overflow-wrap:anywhere;
  text-transform:uppercase;letter-spacing:.01em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
@media (hover:hover) and (pointer:fine){
  .boton-cuadro:hover{border-color:var(--celeste)}
}
.boton-cuadro.destacado{background:var(--amarillo);border-color:var(--amarillo);color:var(--sobre-color)}

/* ============================================================
   EL FONDO DE CONTEXTO
   La ilustración de la facultad va POR DETRAS del contenido, desde
   "A dónde ir" hasta el piso de la página. Se apoya abajo, como si
   el contenido estuviera parado sobre el patio.
   ============================================================ */
.zona-fondo{position:relative;z-index:0;padding-top:2px}
.zona-fondo::before{
  content:'';position:absolute;left:0;right:0;bottom:0;z-index:-1;
  height:min(460px,64vw);pointer-events:none;
  background:url(imagenes/facultad-patio.webp) center bottom / contain no-repeat;
  opacity:.28
}

/* ============================================================
   LA ALARMA DE INSCRIPCION
   Aparece sola cuando abre la ventana para anotarse a una mesa, y
   desaparece cuando cierra. El resto del año no ocupa lugar.
   ============================================================ */
.alarma{
  background:var(--amarillo);color:var(--sobre-color);
  border-radius:var(--radio);padding:16px;margin:16px 0 4px;
  box-shadow:var(--sombra)
}
.alarma.urgente{background:var(--rojo-solido);color:var(--sobre-negro)}
.alarma-texto strong{
  font-family:var(--fuente-titulo);font-weight:400;font-size:var(--letra-sub);line-height:1.1;
  text-transform:uppercase;display:block;margin-bottom:5px
}
.alarma-texto p{margin:0 0 13px;font-size:var(--letra-base);line-height:1.4}
.alarma .boton.oscuro{background:var(--negro);color:var(--amarillo)}
.alarma.urgente .boton.oscuro{background:var(--sobre-negro);color:var(--rojo-solido)}

/* ============================================================
   MI CURSADA EN EL INICIO
   El organizador deja un resumen y el inicio lo lee: es lo que hace
   que la app sepa quien es cada quien.
   ============================================================ */
.mi-cursada{
  display:block;text-decoration:none;color:var(--sobre-color);
  background:var(--amarillo);border-radius:var(--radio);
  padding:15px;margin:14px 0 4px;box-shadow:var(--sombra)
}
.mi-cursada-rotulo{
  font-size:var(--letra-mini);letter-spacing:.14em;text-transform:uppercase;opacity:.85
}
.mi-cursada strong{
  font-family:var(--fuente-titulo);font-weight:400;font-size:21px;line-height:1.05;
  text-transform:uppercase;display:block;margin:5px 0 11px
}
.mi-cursada .barra{background:rgba(26,26,26,.18);height:8px}
.mi-cursada .barra-llena{background:var(--negro)}

.mi-cursada-datos{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:8px;font-size:var(--letra-densa)
}
.mi-cursada-datos b{font-family:var(--fuente-datos);font-weight:700;font-size:19px}
/* --- LA PORTADA PREGUNTA ---

   Mientras no haya nada que mostrar, en el lugar de la barra hay una
   pregunta. No es la tarjeta amarilla: el amarillo es el color de un
   dato tuyo —tu carrera, tu avance—, y acá todavía no hay ninguno.
   Sobre la tarjeta clara, lo que pesa es la pregunta y los botones,
   que es lo que hay que ver.

   El signo de arriba se conserva («¿Qué...», y no «Que...»): sin él la
   frase se lee como un título hasta la última palabra.

   Y esta tarjeta NO se hunde al tocarla: es la única «mi-cursada» que
   no es un enlace, y `:active` se contagia hacia arriba, así que al
   apretar un botón de adentro se movía la tarjeta entera además del
   botón. Por eso allá arriba, en el estado apretado, dice
   `.mi-cursada:not(.pregunta):active`. */
.mi-cursada.pregunta{
  background:var(--superficie);border:1px solid var(--linea);
  border-left:4px solid var(--celeste);color:var(--texto)
}
.mi-cursada.pregunta strong{font-size:20px;margin:0 0 7px}
.mi-cursada.pregunta .mi-cursada-rotulo{display:block;margin-bottom:6px;opacity:1;color:var(--texto-suave)}
.mi-cursada.pregunta .mi-cursada-rotulo + strong{margin-top:0}
.mi-cursada.pregunta > p{
  margin:0 0 13px;font-size:var(--letra-base);line-height:1.35;color:var(--texto-suave)
}

/* LAS TRES CARRERAS VAN UNA DEBAJO DE OTRA.
   En fila no entran: en un teléfono de 360 px «Gestión del Riesgo» se
   come media pantalla, y tres pastillas cortadas no se leen como tres
   opciones. Apiladas, además, entra el nombre largo abajo, que es el
   que distingue una licenciatura de una tecnicatura. */
.pregunta-opciones{display:grid;gap:8px}
.pregunta-opcion{
  display:block;width:100%;text-align:left;
  background:var(--superficie-2);border:1.5px solid var(--texto);
  border-radius:var(--radio);padding:10px 13px;color:var(--texto)
}
.pregunta-opcion b{
  display:block;font-family:var(--fuente-sub);font-weight:700;
  font-size:var(--letra-base);letter-spacing:.02em;line-height:1.2
}
.pregunta-opcion small{
  display:block;font-size:var(--letra-mini);line-height:1.3;
  color:var(--texto-suave);margin-top:2px
}
/* En el hover va el color del texto ENTERO, no solo el del renglón
   chico: de noche el texto es claro, y dejarlo heredado sobre el
   amarillo pleno daba 1,3 de contraste. El amarillo trae su propia
   tinta y hay que ponerla. */
@media (hover:hover) and (pointer:fine){
  .pregunta-opcion:hover{
    background:var(--amarillo);border-color:var(--amarillo);color:var(--sobre-color)
  }
  .pregunta-opcion:hover small{color:var(--sobre-color)}
}
/* La salida del toque errado. Va debajo del botón y pesa menos que él
   a propósito: es la respuesta menos probable de las dos. */
.pregunta-volver{
  display:block;width:100%;margin-top:10px;padding:6px;
  background:none;border:none;color:var(--texto-suave);
  font-size:var(--letra-densa);text-decoration:underline
}

/* ============================================================
   ESQUELETOS DE CARGA

   Reemplazan al texto "Cargando...". La diferencia no es estetica:
   un cartel que dice cargando obliga a esperar sin saber que viene,
   mientras que ver la forma del contenido antes de que llegue hace
   sentir la espera mas corta, aunque dure lo mismo.

   La regla: el esqueleto tiene que tener la MISMA forma que lo que
   va a aparecer. Si no, cuando llega el contenido la pantalla salta.

   POR QUÉ EL BRILLO SE MUEVE CON transform Y NO CON background-position.

   Esto no es un detalle de purista: era el error más caro de la app.
   Antes el brillo era un degradado al que se le movía la posición de
   fondo. Mover un fondo obliga al navegador a REPINTAR el elemento
   entero en cada cuadro, y no hay forma de mandar eso a la placa de
   video. En la pantalla de inicio hay veintitrés esqueletos a la vez:
   eran veintitrés repintados por cuadro, sesenta veces por segundo,
   justo en el momento en que el teléfono está bajando y armando cuatro
   consultas. O sea que la animación puesta para que la espera se
   sintiera más corta era lo que la hacía más larga.

   Ahora el degradado vive en un ::after que cruza el bloque con
   translateX. Eso lo resuelve el compositor solo, sin repintar nada, y
   el hilo principal queda libre para lo único que importa mientras se
   carga: traer el contenido.
   ============================================================ */
@keyframes esqueleto-brillo{
  from{transform:translateX(-100%)}
  to  {transform:translateX(100%)}
}
.esqueleto{
  position:relative;overflow:hidden;
  background:var(--superficie-2);
  border-radius:6px
}
.esqueleto::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,
    transparent 0%, var(--linea) 50%, transparent 100%);
  animation:esqueleto-brillo 1.6s linear infinite;
  will-change:transform
}
/* ESCALONADO. Veinte cajas latiendo en el mismo cuadro no se leen como
   una página cargando: se leen como un estroboscopio. Con 70 ms de
   diferencia entre una y la siguiente, el brillo baja en diagonal y el
   bloque se lee como una sola cosa que está llegando. */
.esqueleto:nth-child(2)::after{animation-delay:70ms}
.esqueleto:nth-child(3)::after{animation-delay:140ms}
.esqueleto:nth-child(4)::after{animation-delay:210ms}
.esqueleto:nth-child(5)::after{animation-delay:280ms}
.esqueleto:nth-child(6)::after{animation-delay:350ms}
.esqueleto:nth-child(7)::after{animation-delay:420ms}
.esqueleto:nth-child(7n+8)::after{animation-delay:70ms}
.esqueleto:nth-child(7n+9)::after{animation-delay:140ms}
.esqueleto:nth-child(7n+10)::after{animation-delay:210ms}

/* Quien pidio menos movimiento ve el bloque quieto, sin el brillo */
@media (prefers-reduced-motion:reduce){
  .esqueleto::after{animation:none;opacity:.5;transform:none}
}
.esq-linea{height:13px;margin-bottom:9px}
.esq-linea.corta{width:45%}
.esq-linea.media{width:72%}
.esq-linea.titulo{height:17px;width:60%;margin-bottom:12px}

.esq-tarjeta{
  background:var(--superficie);border:1px solid var(--linea);
  border-left:4px solid var(--linea);border-radius:var(--radio);
  padding:14px;margin-bottom:10px;box-shadow:var(--sombra)
}
/* El cuadro de acceso. Antes era un cajón blanco muerto al lado de
   catorce cajas que brillaban: dos idiomas de carga en la misma
   pantalla, y el que no se movía parecía roto. Ahora lleva adentro la
   misma barra que dice «esto está llegando», y el marco impreso
   —borde y segunda tinta— se queda afuera, que es lo que le da la
   forma exacta del botón que lo va a reemplazar. */
.esq-cuadro{
  position:relative;overflow:hidden;
  background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--radio);aspect-ratio:1;box-shadow:var(--sombra)
}
.esq-cuadro::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,
    transparent 0%, var(--superficie-2) 50%, transparent 100%);
  animation:esqueleto-brillo 1.6s linear infinite;
  will-change:transform
}
.esq-cuadro:nth-child(3n+2)::after{animation-delay:70ms}
.esq-cuadro:nth-child(3n)::after  {animation-delay:140ms}
@media (prefers-reduced-motion:reduce){
  .esq-cuadro::after{animation:none;opacity:.5;transform:none}
}
.esq-calendario{
  background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--radio);padding:14px;box-shadow:var(--sombra)
}
.esq-grilla{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:12px}
.esq-grilla .esqueleto{aspect-ratio:1;height:auto;margin:0}

/* ============================================================
   LA REJILLA DE FICHAS

   3 por fila en el celular, 4 desde 560px. Antes esto era una tira
   de 34 tarjetas, cinco pantallas de scroll sin un solo encabezado.
   ============================================================ */
.rejilla-fichas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
@media (min-width:560px){ .rejilla-fichas{grid-template-columns:repeat(4,1fr)} }

/* Cuadrados en pantalla grande. En el celular son un poco mas altos
   que anchos: con 109px de lado, titulos como "Plan de estudios:
   Licenciatura en Trabajo Social" se cortaban en el mismo lugar y
   tres fichas distintas quedaban identicas. */
.tarjeta-cuadro{
  aspect-ratio:1 / 1.22;background:var(--superficie);
  border:1px solid var(--linea);border-left:4px solid var(--celeste);
  border-radius:var(--radio);box-shadow:var(--sombra);
  padding:10px 9px;text-align:left;color:var(--texto);
  display:flex;flex-direction:column;justify-content:space-between;gap:6px;
  overflow:hidden;cursor:pointer
}
@media (min-width:560px){ .tarjeta-cuadro{aspect-ratio:1} }
@media (hover:hover) and (pointer:fine){
  .tarjeta-cuadro:hover{border-color:var(--celeste)}
}
.tarjeta-cuadro:focus-visible{outline:3px solid var(--celeste);outline-offset:2px}
.tarjeta-cuadro .nombre{
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-mini);line-height:1.16;
  text-transform:uppercase;letter-spacing:0;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;
  /* «FONOAUDIOLOGÍA» no entra en una columna de un tercio de pantalla:
     sin esto la palabra se sale de la tarjeta y se lee «FONOAUDIOLC».
     Corta solo cuando no hay más remedio, no en cada renglón. */
  overflow-wrap:anywhere
}
@media (min-width:560px){
  .tarjeta-cuadro .nombre{font-size:var(--letra-chica);-webkit-line-clamp:6}
}
/* Dice si adentro hay un paso a paso o si te manda afuera. Antes no
   se podia saber sin entrar, y de 31 fichas 18 son solo un enlace. */
.marca-tipo{
  flex:0 0 auto;font-family:var(--fuente-texto);font-size:var(--letra-mini);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  padding:3px 7px;border-radius:var(--radio-pastilla);align-self:flex-start;white-space:nowrap
}
.marca-tipo.guia   {background:var(--amarillo);color:var(--sobre-color)}
.marca-tipo.enlace {background:var(--superficie-2);color:var(--texto-suave)}

/* Las preguntas frecuentes, plegables */
details.tarjeta > summary{
  cursor:pointer;list-style:none;font-family:var(--fuente-sub);
  font-weight:700;font-size:16px;line-height:1.2
}
details.tarjeta > summary::-webkit-details-marker{display:none}
details.tarjeta .respuesta{margin-top:9px;color:var(--texto-suave);font-size:var(--letra-base)}

/* El resumen adentro de la ventanita */
.hoja-resumen{margin:8px 0 4px;color:var(--texto-suave);font-size:var(--letra-base);line-height:1.4}

/* ============================================================
   ESTUDIEMOS
   El material de los grupos de estudio, agrupado por materia.
   ============================================================ */
.material-tipo{
  display:inline-block;font-family:var(--fuente-texto);font-size:var(--letra-mini);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:var(--radio-pastilla);
  margin-bottom:7px;background:var(--superficie-2);color:var(--texto-suave)
}
.material-tipo.resumen {background:var(--amarillo);color:var(--sobre-color)}
.material-tipo.parcial {background:var(--rojo-solido);color:var(--sobre-negro)}
.material-tipo.guia    {background:var(--celeste);color:var(--sobre-color)}
.material-ir{
  display:block;margin-top:11px;font-family:var(--fuente-sub);font-weight:700;
  font-size:var(--letra-densa);text-transform:uppercase;letter-spacing:.04em;color:var(--celeste)
}

/* ============================================================
   KIT DE INGRESO
   Las primeras cosas que necesita alguien que recien llega.
   ============================================================ */
.kit{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.tarjeta-kit{
  display:flex;align-items:flex-start;gap:13px;
  background:var(--superficie);border:1px solid var(--linea);
  border-left:4px solid var(--celeste);border-radius:var(--radio);
  padding:15px;text-decoration:none;color:var(--texto);box-shadow:var(--sombra)
}
@media (hover:hover) and (pointer:fine){
  .tarjeta-kit:hover{border-color:var(--celeste)}
}
.tarjeta-kit .kit-numero{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:var(--amarillo);color:var(--sobre-color);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fuente-sub);font-weight:800;font-size:var(--letra-base)
}
.tarjeta-kit .kit-texto{min-width:0}
.tarjeta-kit h3{
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-guia);line-height:1.15;
  text-transform:uppercase;margin-bottom:3px
}
.tarjeta-kit p{margin:0;font-size:var(--letra-base);line-height:1.35;color:var(--texto-suave)}

/* ============================================================
   BOTON FLOTANTE "AVISANOS"
   ============================================================ */
/* Era una píldora de 140x52 fija abajo a la derecha: tapaba el
   calendario al abrir, un cuadro de «A dónde ir» al bajar y el pie al
   final. Ahora es un círculo de 56 —el tamaño de un botón flotante de
   toda la vida— y la palabra aparece solo cuando hay lugar (720 px
   para arriba, donde no tapa nada). */
.avisanos{
  position:fixed;right:14px;bottom:14px;z-index:70;
  width:56px;height:56px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:var(--radio-pastilla);border:2px solid var(--sobre-negro);
  background:var(--rojo-solido);color:var(--sobre-negro);text-decoration:none;
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-base);
  box-shadow:0 4px 16px rgba(0,0,0,.28);
  /* ASIMÉTRICO A PROPÓSITO. Irse es ambiente: el botón se corre porque
     la persona está leyendo otra cosa, y puede tomarse su tiempo.
     Volver es una RESPUESTA a «quiero volver a algo», y una respuesta
     se contesta seca. Por eso la vuelta es más corta que la ida. */
  transition:transform var(--t-chico) var(--sale),
             box-shadow var(--t-chico) var(--sale),
             opacity   var(--t-chico) var(--sale)
}
.avisanos.apartado{
  transition:transform var(--t-medio) var(--sale),
             box-shadow var(--t-medio) var(--sale),
             opacity   var(--t-medio) var(--sale)
}
.avisanos > span:not(.avisanos-globo){
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)
}
/* SE FUE EL ENCOGIDO AUTOMÁTICO.
   Antes el botón nacía con la palabra adentro y a los 4 segundos se
   encogía a círculo solo. Eran tres problemas en uno: cambiaba de forma
   sin que nadie se lo pidiera, lo hacía mientras la persona estaba
   leyendo, y el salto era seco porque width y padding no estaban —ni
   podían estar— en la transición: animar el ancho obliga a recalcular
   la página en cada cuadro.
   Ahora el botón nace círculo y se queda círculo. Para qué sirve lo
   dice el globo, que sale la primera vez que se sube —o sea cuando la
   persona ya terminó de leer y está buscando algo— y lo maneja app.js.
   Arriba de 720px, donde sobra lugar, la palabra va siempre. */
/* Mientras se baja se corre para afuera: es cuando la persona está
   leyendo. Vuelve apenas se sube, que es el gesto de «quiero volver a
   algo». Lo maneja app.js poniendo y sacando la clase. */
.avisanos.apartado{
  transform:translateX(calc(100% + 20px));opacity:0;pointer-events:none
}
.avisanos svg{width:24px;height:24px;flex:0 0 auto;fill:currentColor}
@media (min-width:720px){
  .avisanos{width:auto;height:auto;padding:13px 18px}
  .avisanos > span:not(.avisanos-globo){
    position:static;width:auto;height:auto;overflow:visible;clip-path:none
  }
}
/* El levantarse va SOLO con mouse y teclado. En una pantalla táctil el
   :hover se dispara al tocar y se queda pegado hasta que tocás otra
   cosa: el botón quedaba levantado sin que nadie lo estuviera tocando. */
@media (hover:hover) and (pointer:fine){
  .avisanos:hover{transform:translateY(-2px);box-shadow:0 7px 22px rgba(0,0,0,.34)}
}
.avisanos:focus-visible{
  transform:translateY(-2px);box-shadow:0 7px 22px rgba(0,0,0,.34);
  outline:3px solid var(--celeste);outline-offset:3px
}

/* El globo con la pregunta. Aparece al pasar por encima o al llegar
   con el teclado; en el celular, donde no hay hover, sale solo a los
   pocos segundos de abrir la pantalla y se va. */
.avisanos-globo{
  position:absolute;right:0;bottom:calc(100% + 10px);width:max-content;
  max-width:min(260px,72vw);padding:11px 14px;border-radius:var(--radio);
  background:var(--negro);color:var(--sobre-negro);
  font-family:var(--fuente-texto);font-weight:400;font-size:var(--letra-densa);line-height:1.35;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  opacity:0;transform:translateY(6px) scale(.96);
  transform-origin:calc(100% - 26px) 100%;pointer-events:none;
  transition:opacity var(--t-chico) var(--sale),
             transform var(--t-chico) var(--sale)
}
.avisanos-globo::after{
  content:'';position:absolute;right:26px;top:100%;
  border:7px solid transparent;border-top-color:var(--negro)
}
/* El globo crece DESDE la punta de la flecha, no desde su propio
   centro: es lo que lo ata al botón. Sin el transform-origin parece un
   cartel que apareció al lado, y no algo que salió de acá. */
@media (hover:hover) and (pointer:fine){
  .avisanos:hover .avisanos-globo{opacity:1;transform:none}
}
.avisanos:focus-visible .avisanos-globo{opacity:1;transform:none}
/* En el celular no hay hover. El globo sale UNA vez, la primera vez
   que la persona sube —o sea cuando ya terminó de leer y está buscando
   algo— y se va solo. Lo pone y lo saca app.js. */
.avisanos.dice .avisanos-globo{opacity:1;transform:none}

/* ============================================================
   PANTALLAS GRANDES
   ============================================================ */
@media (min-width:720px){
  .titulo-pantalla{font-size:38px}
  .marca{font-size:var(--letra-titulo)}
  /* Acá la hoja deja de ser hoja: se centra y pasa a ser un cuadro de
     diálogo. La física tiene que seguir al layout —un cuadro centrado
     no sube desde abajo de la pantalla, aparece donde está—, así que
     cambia el movimiento junto con la posición. Con el translate de
     abajo puesto, la hoja entraba deslizándose desde el pie en una
     pantalla donde nunca había estado ahí. */
  .hoja{
    align-self:center;border-radius:var(--radio);max-height:82vh;
    transform:scale(1);opacity:1;
    transition:transform var(--t-medio) var(--sale),
               opacity var(--t-medio) var(--sale)
  }
  @starting-style{ .hoja{transform:scale(.96);opacity:0} }
  .hoja-fondo.cerrando .hoja{transform:scale(.96);opacity:0}
  .hoja-fondo{align-items:center}
  @media (prefers-reduced-motion:reduce){
    .hoja{transform:none;transition:opacity var(--t-chico) var(--sale)}
    @starting-style{ .hoja{transform:none;opacity:0} }
    .hoja-fondo.cerrando .hoja{transform:none;opacity:0}
  }
  /* La fila de secciones ya entra entera: sobran los dos degradados */
  .secciones::before,.secciones::after{display:none}
  /* Desde la tablet para arriba los cuadros dejan de ser cuadrados: si
     no, un cuadrado de 211 px de lado da una grilla de 648 de alto. */
  .boton-cuadro{aspect-ratio:auto;min-height:124px;padding:12px 10px}
}

/* ------------------------------------------------------------
   EN LA COMPUTADORA

   La app se diseñó para el celular y está bien que así sea: ahí la usa
   casi todo el mundo. Pero en una pantalla de 1280 la columna medía
   680 px y quedaban 300 de amarillo vacío a cada lado —se usaba el 53%
   de la pantalla— con la portada estirada a lo largo de cuatro
   pantallazos.

   No la rediseñamos: le damos aire a la columna y ponemos en dos
   columnas lo que se lee de a pares. La portada pasa a entrar en poco
   más de una pantalla.
   ------------------------------------------------------------ */
@media (min-width:900px){
  .envoltura{max-width:1000px}

  /* El calendario y la portada, uno al lado del otro. Solos, cada uno
     quedaba flotando en el medio de una columna de mil píxeles. */
  #zona-normal{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;align-items:start}
  #zona-normal > #alarma,
  #zona-normal > #mi-cursada,
  #zona-normal > .titulo-seccion{grid-column:1 / -1}
  #zona-normal > .calendario{grid-column:1}
  #zona-normal > .carrusel{grid-column:2;margin-top:0}

  /* Los cuadros son cuadrados porque en un celular miden 100 px. Acá,
     con la columna ancha, un cuadrado da 310x310 y la grilla sola mide
     casi mil píxeles de alto. En pantalla grande dejan de ser
     cuadrados y pasan a ser fichas anchas. */
  .rejilla-3x3{gap:12px}
  .boton-cuadro{aspect-ratio:auto;min-height:132px;padding:14px 12px;gap:10px}
  .boton-cuadro .nombre{font-size:var(--letra-densa)}
  .boton-cuadro svg.ico{width:32px;height:32px}

  /* Las listas de tarjetas leen mejor en dos columnas que en una
     columna de mil píxeles de ancho */
  .lista,.kit{
    display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start
  }
}

/* ============================================================
   PREPARAR UN FINAL

   La firma de esta pantalla es EL PROGRAMA QUE SE TACHA. Un texto de la
   carrera no es "tarea 3": es Carballeda (2002), y así se lo nombra en
   clase y así se lo pide en la fotocopiadora. Por eso cada texto se
   escribe como una ficha bibliográfica, en la tipografía de datos, con
   el apellido adelante.

   Y marcarlo como leído no prende una casilla azul: lo TACHA, con una
   línea que cruza el renglón como cuando tachás el programa en papel.
   Es el gesto que la persona ya hace, en pantalla.
   ============================================================ */

.tarjeta-invita{
  background:var(--superficie);border:1.5px solid var(--tinta-borde);
  border-radius:var(--radio);box-shadow:var(--sombra);padding:18px 16px
}
.tarjeta-invita h3{
  font-family:var(--fuente-titulo);font-size:var(--letra-sub);line-height:1.1;
  margin:0 0 10px
}
.tarjeta-invita p{margin:0 0 12px;font-size:var(--letra-base);line-height:1.45}
.tarjeta-invita .boton{margin-top:6px}

/* --- La cabecera de la preparación --- */
.prep-cabecera{
  background:var(--amarillo);color:var(--sobre-color);
  border:1.5px solid var(--tinta-borde);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:15px;margin-bottom:6px
}
.prep-materia{
  font-family:var(--fuente-titulo);font-size:21px;line-height:1.05;
  margin:4px 0 11px
}
.prep-cuenta{
  display:inline-block;font-family:var(--fuente-datos);font-weight:700;
  font-size:var(--letra-chica);letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto-suave)
}
.prep-cabecera .prep-cuenta{color:var(--sobre-color);opacity:.88}
/* Cuando la mesa está encima, el dato deja de ser gris */
.prep-cuenta.cerca{
  background:var(--rojo-solido);color:var(--sobre-negro);opacity:1;
  padding:3px 8px;border-radius:var(--radio-pastilla)
}
.prep-cabecera .barra{background:rgba(26,26,26,.18);height:10px}
.prep-cabecera .barra-llena{background:var(--negro)}
.prep-datos{
  margin:8px 0 0;font-family:var(--fuente-datos);font-size:var(--letra-nota)
}
.prep-datos strong,.prep-datos b{font-size:var(--letra-guia)}

.tarjeta.prep{border-left-color:var(--celeste)}
.tarjeta.prep .barra{margin:8px 0 2px}

/* --- El programa --- */
.unidad{margin-bottom:16px}
.unidad h4{
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-densa);
  text-transform:uppercase;letter-spacing:.04em;line-height:1.25;
  margin:0 0 6px;display:flex;justify-content:space-between;gap:10px;align-items:baseline
}
.unidad-cuenta{
  font-family:var(--fuente-datos);font-size:var(--letra-chica);
  color:var(--texto-suave);flex:0 0 auto
}
.textos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}

.texto{
  width:100%;display:flex;gap:11px;align-items:flex-start;text-align:left;
  background:transparent;border:0;border-bottom:1px solid var(--linea);
  padding:11px 2px;min-height:48px;color:var(--texto);cursor:pointer
}
@media (hover:hover) and (pointer:fine){
  .texto:hover{background:var(--superficie-2)}
}
.marca-leido{
  flex:0 0 auto;width:19px;height:19px;margin-top:2px;
  border:1.5px solid var(--tinta-borde);border-radius:3px;position:relative
}
.ficha-texto{
  flex:1;font-family:var(--fuente-datos);font-size:var(--letra-nota);
  line-height:1.45;position:relative
}
.ficha-autor{font-weight:700;margin-right:5px}
.ficha-titulo{color:var(--texto-suave)}

/* El tachado: una línea que cruza el renglón, como en el papel. Se
   dibuja de izquierda a derecha, no aparece de golpe.
   «De izquierda a derecha» es literalmente lo que hace scaleX con el
   origen a la izquierda, y sin obligar al navegador a recalcular el
   renglón en cada cuadro, que es lo que pasaba animando el ancho. */
.texto .ficha-texto::after{
  content:'';position:absolute;left:0;top:52%;height:1.5px;width:100%;
  background:var(--rojo-solido);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-medio) var(--sale)
}
.texto.leido .ficha-texto{opacity:.72}
.texto.leido .ficha-texto::after{transform:scaleX(1)}
.texto.leido .marca-leido{background:var(--tinta-borde)}
.texto.leido .marca-leido::after{
  content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--superficie);border-width:0 2px 2px 0;transform:rotate(42deg)
}
@media (prefers-reduced-motion:reduce){
  .texto .ficha-texto::after{transition:none}
}

/* --- El reloj de estudio --- */
.pomo{
  background:var(--superficie);border:1.5px solid var(--tinta-borde);
  border-radius:var(--radio);box-shadow:var(--sombra);
  padding:16px;text-align:center
}
.pomo.descanso{background:var(--superficie-2)}
.pomo-rotulo{
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-chica);
  letter-spacing:.1em;text-transform:uppercase;color:var(--texto-suave)
}
.pomo-reloj{
  font-family:var(--fuente-datos);font-weight:700;font-size:52px;line-height:1;
  letter-spacing:-.01em;margin:6px 0 12px;font-variant-numeric:tabular-nums
}
.pomo-barra{
  height:6px;background:var(--linea);border-radius:var(--radio-pastilla);
  overflow:hidden;margin-bottom:14px
}
/* El JS le mueve --llena una vez por segundo. Sin transición, en un
   bloque de 25 minutos la barra avanza 0,2 píxeles por segundo: no se
   mueve, da un saltito cada cuatro segundos cuando por fin cruza un
   píxel. Con la transición de un segundo clavada al reloj, la barra
   deja de dar saltos y se lee como tiempo corriendo, que es lo que es.
   `linear` porque el tiempo no acelera ni frena. */
.pomo-barra div{
  height:100%;width:100%;background:var(--celeste);
  border-radius:var(--radio-pastilla);
  transform:scaleX(calc(var(--llena,0) / 100));transform-origin:left center;
  transition:transform 1s linear
}
.pomo.descanso .pomo-barra div{background:var(--texto-suave)}
@media (prefers-reduced-motion:reduce){
  .pomo-barra div{transition:none}
}
.pomo-botones{display:flex;gap:8px}
.pomo-botones .boton{flex:1}
.pomo .letra-chica{margin-top:10px}

/* Al terminar un bloque avisa la tarjeta entera. Nada de sonido: esto
   se usa en la biblioteca y en el aula.

   Antes era el borde titilando en rojo 2,4 segundos —tres vueltas de
   800 ms. Dos problemas. Uno: un borde de 1,5 px cambiando de color es
   casi invisible con el ojo puesto en otro lado, que es exactamente
   dónde está el ojo de alguien que estuvo veinticinco minutos leyendo.
   Dos: 2,4 segundos de titileo son largos como para ignorarlos y
   cortos como para atender, así que terminan molestando sin avisar.

   Ahora es un solo golpe: la tarjeta se levanta y se asienta, en
   400 ms. Un movimiento de la pieza completa se ve de reojo; un borde
   que cambia de color, no. Y el rojo se queda un momento más para que
   quien miró tarde entienda qué acaba de pasar.

   Es de los pocos lugares de la app donde el movimiento puede
   permitirse algo de gracia: pasa cada veinticinco minutos, es una
   pequeña celebración, y no hay nada que se esté interrumpiendo. */
@keyframes pomo-avisa{
  0%   {transform:scale(1)}
  38%  {transform:scale(1.025)}
  100% {transform:scale(1)}
}
.pomo.sono{
  animation:pomo-avisa 400ms var(--sale);
  border-color:var(--rojo-solido);
  transition:border-color var(--t-medio) ease
}
.pomo{transition:border-color 600ms ease}
/* Menos movimiento: se queda el aviso —el borde rojo, que es la
   información— y se va el salto, que es lo que molesta. */
@media (prefers-reduced-motion:reduce){
  .pomo.sono{animation:none}
}

/* --- El nexo de Estudiemos hacia el organizador de finales --- */
.nexo-final{
  display:flex;align-items:center;gap:12px;text-decoration:none;
  background:var(--amarillo);color:var(--sobre-color);
  border:1.5px solid var(--tinta-borde);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:14px 15px;margin:0 0 14px
}
.nexo-texto{flex:1;font-size:var(--letra-nota);line-height:1.4}
.nexo-texto strong{
  display:block;font-family:var(--fuente-titulo);font-size:var(--letra-guia);
  line-height:1.15;margin-bottom:3px
}
.nexo-flecha{
  flex:0 0 auto;font-family:var(--fuente-sub);font-weight:700;font-size:22px;
  line-height:1
}

/* ============================================================
   LAS DOS PANTALLAS QUE SE LEEN, NO SE USAN

   «¿Quiénes somos?» y «El Consejo Directivo» son las únicas dos
   pantallas de la app que se leen de arriba a abajo. El resto es una
   herramienta: entrás, resolvés algo y salís.

   Por eso rompen con el resto. El amarillo deja de ser acento y pasa a
   ser FONDO, entra el negro pleno por bandas, y el celeste desaparece:
   en las placas del Instagram el celeste no existe, y acá la página
   habla el idioma de las placas, no el de la app.

   La paleta es la misma de siempre. Lo que se rompe es la contención.
   ============================================================ */
.lectura{ --banda-aire:clamp(48px, 11vw, 96px) }

/* Las bandas van de borde a borde, sin la envoltura de 680 px: en una
   pantalla que se lee, el color tiene que llegar hasta el filo. */
.banda{ padding:var(--banda-aire) 0; position:relative }
.banda > .envoltura{ position:relative; z-index:1 }
.banda.tinta{ background:var(--negro); color:var(--sobre-negro) }
.banda.sol  { background:var(--amarillo); color:var(--sobre-color) }
.banda.papel{ background:var(--superficie); color:var(--texto) }

/* La trama de puntos: la misma que tienen las ilustraciones de la
   facultad, que son serigrafías. Es de donde sale todo el lenguaje. */
.banda.tinta::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--amarillo) 1px, transparent 1.1px);
  background-size:10px 10px;opacity:.10
}

/* ---- El grito ----
   Es lo único gigante de toda la app. Va acá y en ningún otro lado. */
.grito{
  font-family:var(--fuente-titulo);
  font-size:clamp(38px, 11.5vw, 92px);
  line-height:.92;letter-spacing:-.025em;
  margin:0;text-wrap:balance
}
.grito em{font-style:normal;color:var(--amarillo)}
.banda.sol .grito em{color:var(--rojo-solido)}

.ceja-lectura{
  font-family:var(--fuente-datos);font-size:var(--letra-chica);
  letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 18px;opacity:.85
}
.bajada-lectura{
  font-size:clamp(17px, 4.6vw, 21px);line-height:1.45;
  max-width:34ch;margin:22px 0 0
}

/* ---- El zigzag ----
   Texto e imagen alternando lados, como en la referencia. En el celular
   se apila solo: por eso no pesa nada. */
.zigzag{display:grid;gap:26px;margin-top:var(--banda-aire)}
.zigzag > article{display:grid;gap:18px;align-items:center}
.zigzag h3{
  font-family:var(--fuente-titulo);font-size:clamp(22px,6vw,32px);
  line-height:1.05;margin:0 0 10px
}
.zigzag p{margin:0 0 12px;font-size:var(--letra-base);line-height:1.55;max-width:46ch}
.zigzag p:last-child{margin-bottom:0}

/* La foto, montada sobre su segunda tinta corrida. Es el mismo gesto
   que la sombra de las tarjetas, pero grande. */
.zigzag figure{margin:0;position:relative}
.zigzag figure img{
  /* Las fotos las sube la agrupacion desde el celular y vienen en
     formas dispares: una apaisada al lado de una parada descomponia el
     zigzag. Se recortan todas a la misma proporcion, centradas. */
  width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;
  height:auto;display:block;border-radius:var(--radio);
  border:2px solid var(--tinta-borde);position:relative;z-index:1;
  background:var(--superficie-2)
}
.zigzag figure::before{
  content:'';position:absolute;inset:14px -14px -14px 14px;
  background:var(--amarillo);border-radius:var(--radio)
}
.banda.sol .zigzag figure::before{background:var(--negro)}
.zigzag figcaption{
  margin-top:16px;font-family:var(--fuente-datos);
  font-size:var(--letra-chica);opacity:.85
}

@media (min-width:760px){
  .zigzag > article{grid-template-columns:1fr 1fr;gap:44px}
  .zigzag > article:nth-child(even) figure{order:-1}
}

/* ---- La línea de tiempo de los logros ----
   Baja, y el año va en la tipografía de datos porque es un dato. El
   orden acá dice algo: se ve la acumulación. */
.linea-logros{list-style:none;margin:var(--banda-aire) 0 0;padding:0;position:relative}
.linea-logros::before{
  content:'';position:absolute;left:7px;top:10px;bottom:10px;width:2px;
  background:currentColor;opacity:.28
}
.linea-logros li{position:relative;padding:0 0 30px 34px}
.linea-logros li:last-child{padding-bottom:0}
.linea-logros li::before{
  content:'';position:absolute;left:0;top:7px;width:16px;height:16px;
  border-radius:50%;background:var(--amarillo);
  border:2px solid var(--negro)
}
.banda.sol .linea-logros li::before{background:var(--negro);border-color:var(--amarillo)}
.logro-anio{
  display:block;font-family:var(--fuente-datos);font-weight:700;
  font-size:var(--letra-chica);letter-spacing:.1em;opacity:.85;margin-bottom:3px
}
.logro-titulo{
  font-family:var(--fuente-titulo);font-size:clamp(19px,5vw,25px);
  line-height:1.1;margin:0 0 6px
}
.linea-logros p{margin:0;font-size:var(--letra-base);line-height:1.5;max-width:46ch}

/* ---- La puerta al Consejo ---- */
.puerta{
  display:flex;align-items:center;gap:16px;text-decoration:none;
  background:var(--negro);color:var(--sobre-negro);
  border:2px solid var(--negro);border-radius:var(--radio);
  padding:22px 20px;margin-top:var(--banda-aire)
}
.banda.tinta .puerta{background:var(--amarillo);color:var(--sobre-color);border-color:var(--amarillo)}
.puerta-texto{flex:1}
.puerta-texto strong{
  display:block;font-family:var(--fuente-titulo);
  font-size:clamp(20px,5.4vw,28px);line-height:1.05;margin-bottom:6px
}
.puerta-texto span{font-size:var(--letra-nota);line-height:1.4;opacity:.85}
.puerta-flecha{font-family:var(--fuente-sub);font-weight:700;font-size:28px;line-height:1}
.puerta:active{transform:translate(2px,2px)}

/* ---- La aparición al desplazar ----
   Sin librerías: un IntersectionObserver y dos propiedades que la placa
   de video puede animar sola (transform y opacity). Nada de height ni
   top, que obligan a recalcular la página en cada cuadro.

   POR QUÉ BAJÓ DE 550 A 260 MILISEGUNDOS.

   Este es el movimiento que más se ve en toda la app: cada párrafo de
   «Quiénes somos» y del Consejo pasa por acá. Y llega en el peor
   momento posible —después de que la persona ya esperó a que bajara el
   contenido. Medio segundo más de espera, encima de una espera, se
   siente como que la app está lenta, no como que es elegante.

   Había además un error de curva: la opacidad usaba `ease`, que empieza
   despacio. O sea que en el primer tercio del recorrido casi no pasaba
   nada visible, y recién ahí el texto empezaba a aparecer. Arrancando
   rápido y frenando suave, 260 ms se leen como más presentes que 550
   con la curva blanda. No es una impresión: es que la persona ya puede
   empezar a leer mientras el otro todavía está apareciendo.

   El desplazamiento también bajó, de 18 a 10 píxeles. Con la duración
   corta, 18 se sentían como un empujón.

   EL ESCALONADO SE FUE DEL CSS. Estaba escrito con :nth-child, que
   cuenta TODOS los hermanos, no solo los que se animan: en el Consejo
   los .aparece están mezclados con elementos que no lo son, así que
   los retardos caían en la pieza equivocada, y del quinto en adelante
   ninguno tenía retardo y disparaban todos juntos con el primero.
   Ahora lo pone lectura.js, contando de verdad y solo entre las piezas
   que entran en la misma pantallada. */
.aparece{
  opacity:0;transform:translateY(10px);
  transition:opacity var(--t-hoja) var(--sale),
             transform var(--t-hoja) var(--sale)
}
.aparece.visible{opacity:1;transform:none}

/* Menos movimiento: se queda el fundido, se va el desplazamiento. La
   pieza igual avisa que llegó, pero no se corre de lugar. */
@media (prefers-reduced-motion:reduce){
  .aparece{transform:none;transition:opacity var(--t-medio) var(--sale)}
  .aparece.visible{opacity:1}
}

/* Sin JavaScript la página tiene que leerse igual: si el observador no
   llega a correr, esto la deja visible. */
.sin-js .aparece{opacity:1;transform:none}

/* AL IMPRIMIR, TODO SE VE.
   Estas dos pantallas son las que alguien imprime o guarda como PDF
   para pegar en la cartelera del centro. Al imprimir, el navegador no
   corre el observador: lo que no se reveló sale en blanco. Se imprimían
   dos hojas vacías con la cabecera arriba. */
@media print{
  .aparece{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ============================================================
   EL GLOSARIO

   Once palabras que en la facultad se dicen como si todo el mundo las
   supiera, y que el primer día no sabe nadie. Reusa `.modulo`, que es
   la tarjeta de la guía de una materia: título arriba, cuerpo abajo.
   Lo único propio son dos cosas.

   LA PRIMERA ORACIÓN NO ES UN TÍTULO NI ES EL PÁRRAFO. Es la respuesta
   corta —«qué es», en una línea—, y el párrafo de abajo es el detalle.
   Quien busca una palabra suelta lee esa línea y se va; quien está
   perdido de verdad sigue. Por eso va más grande que el cuerpo y no en
   mayúsculas: es una respuesta, no una etiqueta.
   ============================================================ */
.glosario-corta{
  font-family:var(--fuente-sub);font-weight:700;
  font-size:var(--letra-base);line-height:1.4;
  margin:2px 0 10px
}
.modulo .glosario-corta + p{margin-top:0}

/* EL ENLACE A DONDE SE HACE LA COSA. La mitad de estas palabras nombran
   algo que en la app se puede hacer: anotarse, ver las fechas, mirar
   las correlativas. Un glosario que explica y no lleva es media
   respuesta. Va al pie de la tarjeta, separado por la línea, para que
   se lea como «y ahora, andá acá». */
.glosario-ir{
  margin:12px 0 0;padding-top:11px;border-top:1px solid var(--linea);
  font-size:var(--letra-nota)
}
.glosario-ir a{
  display:inline-flex;align-items:center;gap:7px;min-height:32px;
  font-family:var(--fuente-sub);font-weight:700;
  color:var(--texto);text-decoration:none;border-bottom:1.5px solid var(--celeste)
}
@media (hover:hover) and (pointer:fine){
  .glosario-ir a:hover{opacity:.75}
}

/* ============================================================
   EL TRAYECTO OPTATIVO

   La misma pantalla que el glosario —`.modulo` con la respuesta corta
   arriba— más una calculadora de las 120 horas. Sin celeste: no es
   color de marca, y la pantalla se dibujó mirando las placas.

   Lo que solo tiene sentido con script (la cuenta, el botón de borrar)
   lleva `.solo-js` y no se ve mientras el `<body>` tenga `.sin-js`: una
   cuenta que no cuenta es peor que ninguna.
   ============================================================ */
.sin-js .solo-js{display:none}

.trayecto-intro{margin:0;font-size:var(--letra-base);line-height:1.6;color:var(--texto-suave);max-width:46ch}
.trayecto-nota{margin:0 0 14px;font-size:var(--letra-nota);line-height:1.6;color:var(--texto-suave)}

/* La cuenta: el único bloque amarillo pleno de la sección, porque es
   el número que la persona vino a buscar. */
.trayecto-cuenta{
  background:var(--amarillo);color:var(--sobre-color);
  border:1.5px solid var(--tinta-borde);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:16px;margin:0 0 14px
}
.cuenta-ceja{
  margin:0 0 6px;font-family:var(--fuente-datos);font-size:var(--letra-mini);letter-spacing:.1em
}
.cuenta-total{
  margin:0;font-family:var(--fuente-titulo);font-size:clamp(38px,13vw,64px);
  line-height:.92;text-transform:uppercase
}
.cuenta-total small{font-size:.42em}
/* La barra se llena con scaleX y no con width: es transform, lo resuelve
   la placa de video sin recalcular la página. */
.cuenta-barra{
  height:14px;border:1.5px solid var(--sobre-color);border-radius:var(--radio-pastilla);
  margin:12px 0 8px;overflow:hidden
}
.cuenta-barra > div{
  height:100%;background:var(--sobre-color);
  transform:scaleX(0);transform-origin:left;transition:transform 250ms ease
}
.cuenta-falta{
  margin:0;font-family:var(--fuente-sub);font-weight:800;
  font-size:var(--letra-nota);line-height:1.45
}

/* Cada área se pliega. El resumen dice el nombre y cuánto lleva. */
details.area{padding:0}
details.area > summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;
  min-height:48px;padding:13px 15px
}
details.area > summary::-webkit-details-marker{display:none}
details.area > summary::after{
  content:'+';flex:0 0 auto;font-family:var(--fuente-datos);font-size:var(--letra-sub);
  line-height:1;transition:transform 200ms ease
}
details.area[open] > summary::after{transform:rotate(45deg)}
.area-nombre{
  flex:1 1 auto;min-width:0;font-family:var(--fuente-sub);font-weight:800;
  font-size:var(--letra-chica);letter-spacing:.06em;text-transform:uppercase;line-height:1.3
}
.area-cuenta{
  flex:0 0 auto;font-family:var(--fuente-datos);font-size:var(--letra-mini);
  letter-spacing:.06em;color:var(--texto-suave)
}
.area-lista{display:flex;flex-direction:column;gap:8px;padding:0 15px}
.area-aviso{margin:10px 0 0;padding:0 15px 15px;font-size:var(--letra-chica);line-height:1.45;color:var(--texto-suave)}
.area-aviso.lleno{font-family:var(--fuente-sub);font-weight:800;color:var(--rojo)}

.actividad{
  display:flex;gap:10px;align-items:flex-start;width:100%;min-height:48px;text-align:left;
  font:inherit;font-size:var(--letra-nota);line-height:1.45;cursor:pointer;
  background:var(--superficie);color:var(--texto);
  border:1.5px solid var(--tinta-borde);border-radius:var(--radio-chico);
  box-shadow:var(--sombra);padding:12px
}
.actividad[aria-pressed="true"]{background:var(--amarillo);color:var(--sobre-color)}
.actividad[aria-disabled="true"]{opacity:.5}
.actividad:active{transform:translate(2px,2px);box-shadow:none}
.actividad-marca{flex:0 0 auto;font-family:var(--fuente-datos);font-size:var(--letra-mini);padding-top:2px;min-width:2ch}
.actividad-nombre{flex:1 1 auto;min-width:0}
.actividad-hs{
  flex:0 0 auto;font-family:var(--fuente-datos);font-size:var(--letra-chica);
  font-weight:500;white-space:nowrap;padding-top:1px
}
/* Sin script los botones no hacen nada: que no parezcan tocables. */
.sin-js .actividad{cursor:default;box-shadow:none}

.trayecto-borrar{
  display:block;width:100%;min-height:48px;margin:2px 0 12px;text-align:left;cursor:pointer;
  font-family:var(--fuente-sub);font-weight:800;font-size:var(--letra-chica);
  letter-spacing:.04em;text-transform:uppercase;color:var(--texto);
  background:transparent;border:1.5px solid var(--tinta-borde);
  border-radius:var(--radio);box-shadow:var(--sombra);padding:14px 15px
}
.trayecto-borrar:active{transform:translate(2px,2px);box-shadow:none}

/* Las reglas llevan el borde grueso a la izquierda: se leen como
   artículos de un reglamento, no como una tarjeta más. */
.modulo.regla{border-left-width:6px}
.modulo.regla p{margin:6px 0 0;font-size:var(--letra-nota);line-height:1.6;color:var(--texto-suave)}

/* Lo que no sabemos va con borde punteado: se ve que falta. */
.trayecto-dudas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.trayecto-dudas li{
  border:1.5px dashed var(--tinta-borde);border-radius:var(--radio);
  padding:13px;font-size:var(--letra-nota);line-height:1.55
}

@media (prefers-reduced-motion:reduce){
  .cuenta-barra > div, details.area > summary::after{transition:none}
}

/* ============================================================
   EL PLAN DE ESTUDIOS, EN PAPEL

   El plan en PDF que dio la facultad pesa 3,6 MB y dice lo mismo que
   la pestaña «Plan» de `carrera/`, que ya viaja con la app y anda sin
   internet. Se decidió no publicar el archivo y hacer imprimible la
   pantalla: el mismo cuadro del navegador ofrece «Guardar como PDF»,
   así que de acá sale el papel Y el archivo, y el repositorio no
   engorda 3,6 MB para decir algo que ya sabía.

   Todo va colgado de `.pantalla-carrera`, que es la clase del `<body>`
   de esa pantalla y de ninguna otra: estas reglas apagan media app, y
   no pueden alcanzar a las otras once.
   ============================================================ */
.solo-impresion{display:none}

/* La fila de arriba de la pestaña «Plan»: el botón y qué hace. En
   pantalla angosta el texto se va abajo del botón en vez de quedar en
   una columna de cuatro palabras de ancho. */
.fila-imprimir{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  margin:0 0 18px
}
.fila-imprimir p{flex:1 1 210px;margin:0}

@media print{
  /* EN PAPEL SIEMPRE ES DE DÍA. Si el teléfono está en modo oscuro, la
     hoja saldría con fondo casi negro: tinta desperdiciada y, en la
     mayoría de las impresoras, un plan ilegible. Las variables se
     redefinen en el `<body>`, así que ganan sobre las del `:root`
     oscuro para todo lo que está adentro. */
  body.pantalla-carrera{
    --fondo:       #FFFFFF;
    --superficie:  #FFFFFF;
    --superficie-2:#F5F0E8;
    --texto:       #1A1A1A;
    --texto-suave: #4E4E4E;
    --linea:       #D8E5EA;
    --tinta-borde: #1A1A1A;
    --rojo:        #B52625;
    --apagado:     #F5F0E8;
    background:#FFFFFF;color:#1A1A1A
  }

  /* Lo que no va al papel: la navegación, las otras vistas, y los
     botones, que en una hoja no se pueden tocar. */
  .pantalla-carrera #cabecera,
  .pantalla-carrera #pie,
  .pantalla-carrera .pestanas,
  .pantalla-carrera .titulo-pantalla,
  .pantalla-carrera .bajada,
  .pantalla-carrera #bienvenida-anio,
  .pantalla-carrera #selector-carrera,
  .pantalla-carrera #progreso,
  .pantalla-carrera #vista-plan,
  .pantalla-carrera #vista-final,
  .pantalla-carrera #vista-mapa,
  .pantalla-carrera #respaldo,
  .pantalla-carrera .nexo-final,
  .pantalla-carrera .hoja-fondo,
  .pantalla-carrera .no-imprimir{display:none !important}

  /* EL PLAN SALE AUNQUE ESTÉS EN OTRA PESTAÑA. Quien hace Ctrl+P
     parado en «Mapa» espera el plan, no una hoja en blanco. El
     selector lleva el `[hidden]` adentro para ganarle en especificidad
     a `[hidden]{display:none !important}` de más arriba. */
  .pantalla-carrera #vista-todo,
  .pantalla-carrera #vista-todo[hidden]{display:block !important}

  .pantalla-carrera .solo-impresion{display:block;margin-bottom:14px}
  .pantalla-carrera #encabezado-impreso strong{
    display:block;font-family:'Archivo Black',system-ui,sans-serif;
    font-size:17pt;line-height:1.2
  }
  .pantalla-carrera #encabezado-impreso span{
    display:block;font-size:9pt;color:#4E4E4E;margin-top:3px
  }

  /* Una materia partida entre dos hojas no se lee. Y un «TERCER AÑO»
     solo al pie de la página tampoco sirve de nada. */
  .pantalla-carrera .tarjeta{box-shadow:none;break-inside:avoid}
  .pantalla-carrera .titulo-seccion{break-after:avoid}

  @page{margin:14mm}
}

/* Sobre la banda negra, los botones de borde tienen que invertirse: el
   --texto de la app es oscuro en modo claro, así que ahí quedaban
   negros sobre negro. Contraste 1,00: invisibles. */
.banda.tinta .boton.borde{
  color:var(--sobre-negro);border-color:var(--sobre-negro);background:transparent
}
@media (hover:hover) and (pointer:fine){
  .banda.tinta .boton.borde:hover{background:rgba(255,255,255,.1)}
}
.banda.tinta .red-pendiente{color:var(--sobre-negro);opacity:.7}
.banda.sol .boton.borde{color:var(--sobre-color);border-color:var(--sobre-color)}

/* El enlace de volver, arriba de la pantalla del Consejo. Iba adentro
   de un párrafo y quedaba de 17 px de alto: por debajo del mínimo. */
.volver-lectura{
  display:inline-flex;align-items:center;min-height:32px;padding:6px 2px;
  color:inherit;text-decoration:none;border-bottom:1px solid currentColor
}
@media (hover:hover) and (pointer:fine){
  .volver-lectura:hover{opacity:.75}
}

/* ============================================================
   LA GUÍA DE UNA MATERIA

   Anatomofisiología es de primer año de Fonoaudiología y de las que
   más cuesta. Lo que más ayuda no es el 3D: es saber QUÉ estudiar, DE
   QUÉ LIBRO y PARA CUÁNDO. Por eso la pantalla es el programa
   ordenado, y el modelo 3D vive adentro del módulo que lo necesita.
   ============================================================ */
.modulo{
  background:var(--superficie);border:1.5px solid var(--tinta-borde);
  border-radius:var(--radio);box-shadow:var(--sombra);
  padding:16px 15px;margin-bottom:12px
}
.modulo-cabeza{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px
}
.modulo-numero{
  font-family:var(--fuente-datos);font-weight:700;font-size:var(--letra-chica);
  letter-spacing:.1em;color:var(--texto-suave);flex:0 0 auto
}
.modulo h3{
  font-family:var(--fuente-titulo);font-size:clamp(19px,5vw,24px);
  line-height:1.08;margin:0;flex:1 1 100%
}
/* Las fechas van en la tipografía de datos porque son datos: se leen de
   un vistazo y se comparan con el calendario. */
.modulo-fechas{
  display:inline-block;font-family:var(--fuente-datos);font-size:var(--letra-chica);
  background:var(--amarillo);color:var(--sobre-color);
  padding:3px 9px;border-radius:var(--radio-pastilla);margin-top:8px
}
.modulo h4{
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-chica);
  letter-spacing:.08em;text-transform:uppercase;color:var(--texto-suave);
  margin:18px 0 7px
}
.modulo ul{margin:0;padding-left:19px;font-size:var(--letra-nota);line-height:1.5}
.modulo li{margin-bottom:5px}
.modulo li:last-child{margin-bottom:0}
/* La bibliografía es una ficha, como los textos del organizador de
   finales: autor adelante, que es como se la busca en la fotocopiadora. */
.biblio{list-style:none;padding:0}
.biblio li{
  font-family:var(--fuente-datos);font-size:var(--letra-chica);line-height:1.45;
  padding:7px 0;border-bottom:1px solid var(--linea)
}
.biblio li:last-child{border-bottom:0}

/* ---- El modelo 3D, apagado hasta que lo pidan ----
   Pesa varios MB y viene de un servidor ajeno. Si cargara solo, se
   comería los datos de quien nunca lo va a abrir. */
.modelo3d{
  margin-top:16px;border:1.5px solid var(--tinta-borde);
  border-radius:var(--radio-chico);overflow:hidden;background:var(--superficie-2)
}
.modelo3d-tapa{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:26px 16px;background:transparent;border:0;cursor:pointer;
  color:var(--texto);text-align:center;min-height:120px;justify-content:center
}
@media (hover:hover) and (pointer:fine){
  .modelo3d-tapa:hover{background:var(--superficie)}
}
.modelo3d-tapa strong{
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-base)
}
/* El :not() es necesario: sin él esta regla también pinta el círculo
   del triángulo, porque tiene más peso que .modelo3d-cubo. Ya pasó:
   el triángulo quedaba gris sobre celeste, en 1,80. */
.modelo3d-tapa span:not(.modelo3d-cubo){
  font-family:var(--fuente-datos);font-size:var(--letra-chica);color:var(--texto-suave)
}
.modelo3d-cubo{
  width:46px;height:46px;border-radius:50%;background:var(--negro);
  color:var(--sobre-negro);display:flex;align-items:center;justify-content:center;
  font-size:var(--letra-sub);line-height:1;margin-bottom:4px
}
.modelo3d iframe{width:100%;height:min(72vw,420px);border:0;display:block}
/* La atribución es obligatoria por la licencia, así que no es opcional
   ni se esconde: va abajo del modelo, siempre. */
.modelo3d-credito{
  padding:10px 13px;font-family:var(--fuente-datos);
  font-size:var(--letra-chica);line-height:1.45;color:var(--texto-suave);
  border-top:1px solid var(--linea)
}
.modelo3d-credito a{color:inherit}

/* ---- Las fechas que no hay que perderse ---- */
.fechas-clave{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.fechas-clave li{
  display:flex;gap:12px;align-items:baseline;padding:10px 0;
  border-bottom:1px solid var(--linea)
}
.fechas-clave li:last-child{border-bottom:0}
.fechas-clave b{
  font-family:var(--fuente-datos);font-weight:700;font-size:var(--letra-base);
  flex:0 0 58px
}
.fechas-clave span{font-size:var(--letra-nota);line-height:1.4}

/* ---- El aviso de que hay que revisarlo ---- */
.aviso-transcripcion{
  font-size:var(--letra-nota);line-height:1.45;margin-top:22px;
  padding:12px 14px;border-radius:var(--radio-chico);
  background:var(--superficie-2);border-left:4px solid var(--texto-suave);
  color:var(--texto-suave)
}

.ceja-materia{
  font-family:var(--fuente-datos);font-size:var(--letra-chica);
  letter-spacing:.1em;text-transform:uppercase;color:var(--texto-suave);
  margin:22px 0 2px
}

/* El mail de la cátedra: era un enlace suelto adentro de un párrafo y
   quedaba de 17 px de alto, por debajo del mínimo para tocar. */
.contacto-catedra{
  display:inline-flex;align-items:center;min-height:32px;padding:6px 2px;
  font-family:var(--fuente-datos);font-size:var(--letra-nota)
}

/* ============================================================
   LA INVITACION A TENER LA APP A MANO

   Es la misma hoja que sube desde abajo que usa Mi año, para que no
   haya dos clases de ventana en la app. Lo unico propio es la ceja de
   arriba, que dice el motivo antes que el titulo: si alguien la cierra
   sin leer, que al menos haya leido por que aparecio.
   ============================================================ */
/* Se anima al aparecer, igual que la hoja de Mi año, y NO con una clase
   que agrega el guion. Con clase, si el cuadro no llega a dibujarse
   —pestaña de fondo, animaciones frenadas— quedaba una capa invisible
   tapando la pantalla entera. Así no puede pasar: sin animación, se ve. */
.invitacion-instalar{
  position:fixed;inset:0;z-index:90;background:rgba(26,26,26,.55);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:1;
  transition:opacity var(--t-chico) var(--sale)
}
.invitacion-hoja{
  background:var(--superficie);width:100%;max-width:var(--ancho-max);
  border-radius:var(--radio) var(--radio) 0 0;padding:22px 16px 26px;
  transform:translateY(0);
  transition:transform var(--t-hoja) var(--cajon)
}
@starting-style{
  .invitacion-instalar{opacity:0}
  .invitacion-hoja{transform:translateY(100%)}
}
.invitacion-instalar.cerrando{opacity:0}
.invitacion-instalar.cerrando .invitacion-hoja{transform:translateY(100%)}
.invitacion-ceja{
  margin:0;font-family:var(--fuente-datos);font-size:var(--letra-chica);
  letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave)
}
.invitacion-hoja h2{
  font-family:var(--fuente-titulo);font-size:clamp(24px,7vw,30px);
  line-height:1.03;text-transform:uppercase;margin:6px 0 10px
}
.invitacion-motivo{
  margin:0 0 18px;font-size:var(--letra-base);line-height:1.5;color:var(--texto-suave)
}
/* Los pasos de iOS SI son una secuencia: hay que hacer uno y despues el
   otro, asi que el numero dice algo y no es decoracion. */
.invitacion-pasos{
  margin:0 0 18px;padding-left:0;list-style:none;counter-reset:paso
}
.invitacion-pasos li{
  counter-increment:paso;display:flex;gap:11px;align-items:flex-start;
  padding:9px 0;font-size:var(--letra-base);line-height:1.4;
  border-top:1px solid var(--linea)
}
.invitacion-pasos li:last-child{border-bottom:1px solid var(--linea)}
.invitacion-pasos li::before{
  content:counter(paso);flex:0 0 24px;height:24px;border-radius:50%;
  background:var(--negro);color:var(--sobre-negro);
  font-family:var(--fuente-datos);font-size:var(--letra-chica);font-weight:700;
  display:flex;align-items:center;justify-content:center
}
.invitacion-hoja .boton.texto{margin-top:8px}

@media (prefers-reduced-motion:reduce){
  .invitacion-hoja{
    transform:none;opacity:1;
    transition:opacity var(--t-chico) var(--sale)
  }
  @starting-style{ .invitacion-hoja{transform:none;opacity:0} }
  .invitacion-instalar.cerrando .invitacion-hoja{transform:none;opacity:0}
}

/* ============================================================
   LA COPIA DE RESPALDO

   El codigo es lo unico que existe: no hay mail ni contrasena. Por eso
   se muestra como lo que es, un numero estampado, y no como un dato
   mas en una linea de texto. Es el unico lugar de la pantalla que
   levanta la voz, y levanta la voz para que se copie bien.
   ============================================================ */
.respaldo{
  margin-top:34px;padding-top:22px;border-top:2px solid var(--tinta-borde)
}
.codigo-caja{position:relative;margin:16px 0 18px}
.codigo{
  display:block;position:relative;z-index:1;
  background:var(--superficie);border:2px solid var(--tinta-borde);
  border-radius:var(--radio);padding:18px 10px;text-align:center;
  font-family:var(--fuente-datos);font-weight:700;
  /* Se achica solo en pantallas angostas: son 14 caracteres y no se
     puede permitir que corte en dos renglones. */
  font-size:clamp(17px, 6.2vw, 26px);
  letter-spacing:.12em;color:var(--texto);
  /* Que se pueda seleccionar con el dedo, al reves que el resto de la
     app: aca copiar a mano es una salida legitima. */
  user-select:all;-webkit-user-select:all
}
/* La segunda tinta corrida, el mismo gesto que la sombra de las
   tarjetas pero al servicio de una sola cosa. */
.codigo-caja::before{
  content:'';position:absolute;inset:10px -10px -10px 10px;
  background:var(--amarillo);border-radius:var(--radio)
}
.respaldo-botones{display:flex;gap:10px;flex-wrap:wrap}
.respaldo-botones .boton{flex:1 1 0;min-width:0}
.respaldo-estado{
  margin:14px 0 0;font-family:var(--fuente-datos);
  font-size:var(--letra-chica);line-height:1.45;color:var(--texto-suave)
}
.respaldo-estado.ok{color:var(--texto)}
.respaldo-estado.mal{color:var(--rojo-solido)}
.entrada-codigo{
  font-family:var(--fuente-datos);font-size:19px;letter-spacing:.1em;
  text-transform:uppercase;text-align:center
}

/* ---- Lo proximo de la agenda, en el inicio ----
   Ocupa el lugar de la alarma cuando no hay inscripcion abierta. Es un
   renglon y no una tarjeta a proposito: la alarma de inscripcion tiene
   que seguir siendo lo mas fuerte de la pantalla el dia que aparezca. */
.proximo{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;margin-bottom:16px;text-decoration:none;
  background:var(--superficie);color:var(--texto);
  border:1px solid var(--linea);border-left:4px solid var(--amarillo);
  border-radius:var(--radio);box-shadow:var(--sombra)
}
.proximo-cuando{
  flex:0 0 auto;font-family:var(--fuente-datos);font-weight:700;
  font-size:var(--letra-chica);text-transform:uppercase;letter-spacing:.07em;
  color:var(--texto-suave);white-space:nowrap
}
.proximo-que{
  flex:1 1 auto;min-width:0;font-size:var(--letra-base);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical
}
.proximo-flecha{flex:0 0 auto;font-family:var(--fuente-sub);font-weight:700}
.proximo:active{transform:translate(2px,2px);box-shadow:none}

/* ---- El subrayado de lo que se toca ----
   El turquesa sobre papel mide 3,3: no llega al minimo para texto, asi
   que el enlace se queda con la tinta del parrafo y el turquesa va en
   el subrayado, que no tiene que cumplir ese minimo. Se lee «esto se
   toca» sin pagarlo en legibilidad.

   Va solo en enlaces DENTRO de un texto corrido. Las tarjetas y los
   botones ya dicen que se tocan por su forma; subrayarlos ademas seria
   decir dos veces lo mismo. */
.respuesta a, .paso-detalle a, .bajada a, .letra-chica a,
.aviso a, .biblio a, .modelo3d-credito a, .vacio a,
.bajada-lectura a, .aviso-transcripcion a{
  text-decoration:underline;
  text-decoration-color:var(--celeste);
  text-decoration-thickness:2px;
  text-underline-offset:3px
}
@media (hover:hover) and (pointer:fine){
  .respuesta a:hover, .paso-detalle a:hover, .bajada a:hover,
  .letra-chica a:hover, .aviso a:hover, .biblio a:hover,
  .modelo3d-credito a:hover, .vacio a:hover,
  .bajada-lectura a:hover, .aviso-transcripcion a:hover{
    text-decoration-thickness:4px
  }
}

/* ============================================================
   EL CHAT DE «AVISANOS»

   Sale de la misma esquina que el botón que lo abre, y se lee como
   una conversación: lo que pregunta el estudiante a la derecha, en
   amarillo; lo que contesta la app a la izquierda, sobre papel.

   No hay avatar, ni nombre de bot, ni «escribiendo…» con carita. La
   app no simula ser una persona: cuando hace falta una persona, pasa
   a una persona de verdad.
   ============================================================ */
.chat-fondo{
  position:fixed;inset:0;z-index:90;background:rgba(26,26,26,.55);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:1;
  transition:opacity var(--t-chico) var(--sale)
}
.chat{
  background:var(--superficie);width:100%;max-width:var(--ancho-max);
  height:min(560px, 86vh);display:flex;flex-direction:column;
  border-radius:var(--radio) var(--radio) 0 0;
  border:1px solid var(--linea);border-bottom:none;
  transform:translateY(0);
  transition:transform var(--t-hoja) var(--cajon)
}
@starting-style{
  .chat-fondo{opacity:0}
  .chat{transform:translateY(100%)}
}
.chat-fondo.cerrando{opacity:0}
.chat-fondo.cerrando .chat{transform:translateY(100%)}

/* Arriba de 560px el chat deja de subir del pie y se planta en el
   medio. Un panel de 560 píxeles de alto centrado que igual entrara
   deslizándose desde abajo tendría que recorrer media pantalla para
   llegar a un lugar donde nunca estuvo: se lee como un salto, no como
   algo que llega. Centrado, la física correcta es crecer un poco desde
   donde ya está. */
@media (min-width:560px){
  .chat-fondo{align-items:center;padding:20px}
  .chat{
    border-radius:var(--radio);border-bottom:1px solid var(--linea);box-shadow:var(--sombra);
    transform:scale(1);opacity:1;
    transition:transform var(--t-medio) var(--sale),
               opacity var(--t-medio) var(--sale)
  }
  @starting-style{ .chat{transform:scale(.96);opacity:0} }
  .chat-fondo.cerrando .chat{transform:scale(.96);opacity:0}
}

.chat-cabecera{
  display:flex;align-items:flex-start;gap:10px;
  padding:15px 16px 12px;border-bottom:1px solid var(--linea)
}
.chat-cabecera h2{
  font-family:var(--fuente-titulo);font-weight:400;font-size:var(--letra-sub);
  text-transform:uppercase;margin:0;line-height:1
}
.chat-cabecera p{margin:4px 0 0;font-size:var(--letra-nota);color:var(--texto-suave);line-height:1.35}
.chat-cerrar{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--linea);background:var(--superficie);
  font-size:var(--letra-base);color:var(--texto);line-height:1
}
@media (hover:hover) and (pointer:fine){
  .chat-cerrar:hover{background:var(--superficie-2)}
}

.chat-hilo{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}

.chat-burbuja{
  max-width:88%;padding:10px 13px;border-radius:var(--radio-chico);
  font-size:var(--letra-base);line-height:1.45
}
.chat-burbuja.bot{
  align-self:flex-start;background:var(--superficie-2);
  border:1px solid var(--linea);border-bottom-left-radius:4px
}
.chat-burbuja.yo{
  align-self:flex-end;background:var(--amarillo);color:var(--sobre-color);
  border-bottom-right-radius:4px
}
.chat-burbuja a{color:inherit}
.chat-nota{display:block;margin-top:8px;font-size:var(--letra-nota);color:var(--texto-suave)}

/* Los tres puntitos mientras busca. Es la única animación del chat:
   dice «esto tarda» sin escribir «escribiendo…», que sería fingir
   que hay alguien tecleando del otro lado. */
.chat-puntos{display:inline-flex;gap:4px;padding:2px 0}
.chat-puntos i{
  width:6px;height:6px;border-radius:50%;background:var(--texto-suave);
  animation:chat-late 1s infinite ease-in-out
}
.chat-puntos i:nth-child(2){animation-delay:.15s}
.chat-puntos i:nth-child(3){animation-delay:.3s}
@keyframes chat-late{0%,60%,100%{opacity:.3}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  /* Los puntitos son opacidad pura, sin desplazamiento: eso se puede
     dejar. Lo que se saca es el latido, que a esta velocidad cansa. */
  .chat-puntos i{animation:none;opacity:.6}
  .chat{transform:none;opacity:1;transition:opacity var(--t-chico) var(--sale)}
  @starting-style{ .chat{transform:none;opacity:0} }
  .chat-fondo.cerrando .chat{transform:none;opacity:0}
}

.chat-opciones{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.chat-opcion{
  font-family:var(--fuente-sub);font-size:var(--letra-chica);text-transform:uppercase;letter-spacing:.05em;
  padding:7px 11px;border-radius:99px;border:1px solid var(--texto);
  background:var(--superficie);color:var(--texto);text-decoration:none;
  display:inline-flex;align-items:center;min-height:32px
}
@media (hover:hover) and (pointer:fine){
  .chat-opcion:hover{background:var(--amarillo);color:var(--sobre-color)}
}
/* LAS CUATRO PREGUNTAS DEL SALUDO NO SON PASTILLAS.

   La pastilla en mayúsculas está bien para «Trabajo Social» o
   «Gestión del Riesgo»: son rótulos de dos palabras. Una pregunta
   entera en mayúsculas y partida en dos renglones centrados se lee
   como un cartel, no como algo que alguien diría, y es justo lo
   contrario de lo que estas cuatro vienen a hacer.

   Un renglón entero cada una, alineadas a la izquierda y en caja
   normal: se barren de un vistazo y se leen como preguntas. Y a 48px,
   que es lo que mide todo lo tocable en esta app. */
.chat-opcion.pregunta{
  flex:1 1 100%;justify-content:flex-start;text-align:left;
  text-transform:none;letter-spacing:0;
  font-size:var(--letra-nota);line-height:1.3;
  min-height:48px;padding:10px 14px;border-radius:var(--radio)
}

/* Las fichas que encontró: la misma marca de «Paso a paso» o «Sitio
   oficial» que en Info útil, para que se entienda que es lo mismo. */
.chat-fichas{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.chat-ficha{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--superficie);border:1px solid var(--linea);
  border-left:4px solid var(--celeste);border-radius:var(--radio-chico);
  padding:9px 11px;text-decoration:none;color:var(--texto)
}
@media (hover:hover) and (pointer:fine){
  .chat-ficha:hover{border-color:var(--texto)}
}
.chat-ficha-titulo{font-weight:700;font-size:var(--letra-densa);line-height:1.25}

.chat-contactos{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.chat-contacto{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--radio-chico);padding:9px 11px;
  text-decoration:none;color:var(--texto)
}
@media (hover:hover) and (pointer:fine){
  .chat-contacto:hover{border-color:var(--texto)}
}
.chat-contacto-nombre{font-weight:700;font-size:var(--letra-densa)}
.chat-contacto-detalle{font-size:var(--letra-chica);color:var(--texto-suave);flex:1;min-width:0}
.chat-contacto-como{
  font-family:var(--fuente-sub);font-size:var(--letra-mini);text-transform:uppercase;letter-spacing:.05em;
  background:var(--superficie-2);color:var(--texto-suave);
  padding:3px 7px;border-radius:var(--radio-pastilla);white-space:nowrap
}

/* Un botón que se lee como un enlace dentro del texto. */
.chat-enlace{
  background:none;border:none;padding:0;font:inherit;color:var(--texto);
  text-decoration:underline;cursor:pointer
}

.chat-pie{display:flex;gap:8px;padding:11px 12px;border-top:1px solid var(--linea)}
.chat-pie input{
  flex:1;min-width:0;border:1px solid var(--linea);border-radius:99px;
  padding:11px 15px;font:inherit;font-size:var(--letra-base);
  background:var(--superficie-2);color:var(--texto)
}
.chat-pie input:focus-visible{outline:3px solid var(--celeste);outline-offset:1px}
.chat-enviar{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:none;
  background:var(--negro);color:var(--amarillo);font-size:19px;line-height:1
}
@media (hover:hover) and (pointer:fine){
  .chat-enviar:hover{background:var(--texto)}
}

/* Mientras se baja el archivo del chat, el botón dice que está
   haciendo algo. Sin esto parece que no respondió al toque. */
.avisanos.cargando{opacity:.65;pointer-events:none}

/* ============================================================
   EL PASO DE UNA PANTALLA A OTRA

   Esta app son siete páginas HTML separadas, no una sola con
   pestañas. Eso está bien: cada pantalla pesa poco, se guarda sola en
   el service worker y anda sin señal. Pero tenía un costo que se
   pagaba en cada toque de la fila de secciones: entre una página y la
   siguiente el navegador muestra un blanco. Un blanco de 200 ms es
   suficiente para que se lea como «se cerró la app y se abrió otra
   cosa», y es la razón principal por la que esto se sentía como siete
   páginas y no como una app.

   Con esto el navegador hace el cruce él mismo: guarda una foto de la
   pantalla que se va, la funde con la que llega, y de paso mantiene
   quieta la cabecera —que es idéntica en todas— en vez de hacerla
   parpadear.

   Son cuatro líneas y no cuesta un solo kilobyte de JavaScript. En los
   navegadores que todavía no lo entienden no pasa absolutamente nada:
   siguen viendo lo de antes.
   ============================================================ */
@view-transition{ navigation:auto }

/* La cabecera y la fila de secciones son las mismas en todas las
   pantallas: nombrándolas, el navegador entiende que no cambiaron y
   las deja quietas mientras se cruza lo de abajo. Sin esto se funden
   consigo mismas, que es un parpadeo sutil pero visible. */
.cabecera{view-transition-name:cabecera}
.secciones{view-transition-name:secciones}

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:var(--t-medio);
  animation-timing-function:var(--sale)
}

/* Menos movimiento: el cruce se acorta hasta ser casi un corte, pero
   no se apaga. Apagarlo devuelve el flash blanco, que es más brusco
   que el fundido que se quería evitar. */
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation-duration:90ms }
}

/* ============================================================
   ÚLTIMO REPASO DE «MENOS MOVIMIENTO»

   Cada componente ya resuelve lo suyo arriba, al lado de su código,
   que es donde se puede mantener. Acá quedan solo las dos cosas que no
   tienen dueño en ninguna sección.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  /* El carrusel deja de correrse solo: index.html tampoco le pone el
     reloj, esto es la red de seguridad por si alguien lo mueve a mano. */
  .carrusel-pista{transition:none}
  /* El desplazamiento suave al tocar un día del calendario lo decide
     agenda/index.html, que ya consulta la preferencia. Esto cubre
     cualquier scroll suave que se agregue más adelante sin acordarse. */
  html{scroll-behavior:auto}
}

/* ============================================================
   LA BANDA DE CIERRE

   Cada pantalla termina con la misma tinta y la misma trama con las
   que abre. Antes se cortaba: la lista se acababa y aparecia un
   parrafo chico centrado sobre el mismo papel.

   El orden dice algo. Primero lo unico que le pedimos a alguien —que
   avise si algo falta—, despues la puerta a quienes somos, y al final
   la firma. La firma es lo menos importante de las tres.
   ============================================================ */
/* Sin margen arriba: en el resto del lenguaje las bandas se TOCAN
   —negro, papel, sol, negro— y un hueco solo acá se leía como un
   descuido. Los 46 px de más abajo dejan pasar el botón flotante de
   Avisanos, que vive fijo en esa esquina. */
.cierre{
  /* El aire de las bandas está declarado dentro de .lectura, y esta
     banda vive fuera de ahí en las nueve pantallas: sin esto quedaba
     con padding 0 y el texto pegado a los bordes. Es menor que el de
     una banda de lectura porque es un cierre, no una portada. */
  --banda-aire:clamp(38px, 9vw, 64px);
  padding-bottom:calc(var(--banda-aire) + 46px)
}
.cierre .ceja-lectura{margin-bottom:12px}
.cierre-pedido{
  font-size:clamp(17px, 4.4vw, 21px);line-height:1.45;
  margin:0 0 22px;max-width:34ch
}
.cierre-pedido strong{color:var(--amarillo)}
.cierre-puerta{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px;text-decoration:none;
  border:2px solid var(--sobre-negro);border-radius:var(--radio);
  color:var(--sobre-negro);font-family:var(--fuente-sub);font-weight:700;
  font-size:var(--letra-base);text-transform:uppercase;letter-spacing:.04em;
  max-width:360px
}
.cierre-puerta:active{transform:translate(2px,2px)}
.cierre-flecha{font-size:20px;line-height:1}

/* ---- EL ÍNDICE DEL PIE ----

   Texto plano, no tarjetas. Es a propósito: una lista de renglones se
   barre de arriba abajo de un vistazo, y una grilla de cajas obliga a
   mirar de a una. Acá abajo lo que se busca es una sección puntual,
   no que algo llame la atención.

   Una sola columna en el teléfono y dos desde los 200px por columna:
   los nombres son largos («Universidad Nacional de La Plata») y
   partidos en dos columnas angostas se cortan en tres renglones.

   Los renglones llegan a los 48px como todo lo tocable de la app,
   aunque la letra sea de 15: en el pie es donde más se toca al lado
   de lo que se quiso tocar. */
.cierre-indice{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:22px 26px;margin-top:34px
}
.indice-titulo{
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-mini);
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--sobre-negro-tenue);margin:0 0 4px
}
.indice-lista{list-style:none;margin:0;padding:0}
.indice-lista a{
  display:flex;align-items:center;gap:6px;min-height:48px;padding:4px 0;
  color:var(--sobre-negro);text-decoration:none;
  font-size:var(--letra-densa);line-height:1.3
}
.indice-lista a:hover{text-decoration:underline}
/* La sección donde estás parada. Sin color: el amarillo de esta banda
   ya está gastado en «decinos», que es lo único que le pedimos a
   alguien. Alcanza con el peso y la línea. */
.indice-lista a[aria-current="page"]{
  font-family:var(--fuente-sub);font-weight:700;
  text-decoration:underline;text-underline-offset:4px
}
.indice-fuera{font-size:var(--letra-chica);color:var(--sobre-negro-tenue)}
.cierre-firma{
  /* En la tipografia de texto y no en la de datos: es prosa, no un dato,
     y en mono a 13px «CEFTS» se caia solo a un renglon. */
  margin:24px 0 0;font-size:var(--letra-chica);line-height:1.6;
  color:var(--sobre-negro-tenue);max-width:40ch
}

/* ---- El renglon de las materias trabadas ----
   «Mi cursada» contesta «¿a que me anoto?», asi que lista solo lo que
   se puede hacer. Las trabadas —dieciocho de veinticinco en Trabajo
   Social— viven en la solapa Plan. Este renglon dice cuantas son y
   lleva hasta ahi.

   Es deliberadamente callado: si compitiera con las tarjetas de arriba
   volveriamos al problema que vino a resolver. Por eso no lleva borde
   ni sombra, solo la linea de arriba que lo separa. La cuenta usa la
   misma pastilla negra que los titulos de seccion porque es el mismo
   dato: cuantas hay. */
.nexo-trabadas{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  margin-top:28px;padding:16px 2px 4px;
  background:none;border:0;border-top:2px solid var(--tinta-borde);
  color:var(--texto);cursor:pointer;font:inherit
}
.nexo-cuenta{
  flex:0 0 auto;background:var(--negro);color:var(--sobre-negro);
  border-radius:var(--radio-pastilla);padding:3px 10px;
  font-family:var(--fuente-datos);font-weight:700;font-size:var(--letra-chica)
}
.nexo-texto{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.nexo-texto strong{font-size:var(--letra-nota);line-height:1.3}
.nexo-texto > span{
  font-family:var(--fuente-datos);font-size:var(--letra-chica);
  line-height:1.3;color:var(--texto-suave)
}
.nexo-flecha{
  flex:0 0 auto;font-family:var(--fuente-sub);font-weight:700;font-size:20px;
  color:var(--texto-suave)
}
.nexo-trabadas:active{transform:translate(2px,2px)}

/* ============================================================
   «MI CURSADA» PREGUNTA · el diálogo y el resumen

   La solapa dejó de abrir con el plan de estudios agrupado. Ahora
   pregunta —en qué año estás, cómo venís con lo de antes, qué cursás
   ahora— y recién después contesta. El listado entero vive en «Plan
   completo», que es la solapa que existe para eso.

   Todo lo de acá está hecho para una pregunta por pantalla: en el
   navegador de Instagram media vista se la lleva el teclado y la barra
   del propio Instagram, y una pantalla con dos preguntas es una
   pregunta que se saltea.
   ============================================================ */

/* --- La ceja del paso --- */
/* En la voz de datos, chica y espaciada, como el resto de los rótulos:
   «paso 2 de 3» es un dato, no un título. */
.paso-cuenta{
  font-family:var(--fuente-datos);font-weight:700;font-size:var(--letra-chica);
  letter-spacing:.16em;text-transform:uppercase;color:var(--texto-suave);
  margin:0 0 6px
}
.paso-volver{
  background:none;border:0;padding:6px 2px;margin:14px 0 8px -2px;
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-nota);
  color:var(--texto-suave);min-height:24px;cursor:pointer
}
@media (hover:hover) and (pointer:fine){
  .paso-volver:hover{color:var(--texto)}
}

/* La pregunta es lo más fuerte de la pantalla, por encima del título
   «Mi año»: es lo único que hay que leer para poder contestar. */
.paso-pregunta{
  font-family:var(--fuente-titulo);font-weight:400;
  font-size:clamp(21px, 6.4vw, 26px);line-height:1.05;
  text-transform:uppercase;margin:0 0 8px;overflow-wrap:anywhere
}
#dialogo-cursada .bajada{margin-bottom:20px}

/* --- Las tarjetas de respuesta (el año, la carrera) --- */
/* Más altas que una tarjeta de contenido: son botones de una pregunta,
   se tocan con el pulgar y son lo único que hay para tocar. */
.tarjeta.paso-opcion{padding:18px 16px;border-left-width:6px}
.tarjeta.paso-opcion h3{font-size:var(--letra-sub);margin-bottom:4px}
.tarjeta.paso-opcion.elegida{outline:2px solid var(--texto);outline-offset:2px}

/* --- El repaso de los años anteriores --- */
/* Un botón segmentado por materia, con la misma forma que el selector
   de tema del menú: tres opciones en una sola pieza, sin desplegables
   y sin nada que se abra encima. */
.repaso-fila{
  display:flex;flex-direction:column;gap:9px;
  padding:14px 0;border-bottom:1px solid var(--linea)
}
.repaso .repaso-fila:last-child{border-bottom:0}
.repaso-nombre{
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-densa);
  line-height:1.2;text-transform:uppercase
}
.repaso-opciones{
  display:flex;border:1.5px solid var(--tinta-borde);
  border-radius:var(--radio-chico);overflow:hidden;box-shadow:var(--sombra)
}
.repaso-opciones button{
  flex:1 1 0;min-width:0;background:var(--superficie);border:0;color:var(--texto);
  font-family:var(--fuente-sub);font-weight:700;font-size:var(--letra-mini);
  letter-spacing:.02em;line-height:1.15;padding:9px 4px;min-height:46px;cursor:pointer
}
.repaso-opciones button + button{border-left:1.5px solid var(--tinta-borde)}
.repaso-opciones button[aria-pressed="true"]{background:var(--amarillo);color:var(--sobre-color)}
.repaso-opciones button:focus-visible{outline:2px solid var(--texto);outline-offset:-4px}

/* --- El pie del paso --- */
/* Pegado abajo a propósito. El repaso de un tercer año puede ser doce
   materias: sin esto, «Seguir» queda a doce materias de distancia de
   la única mano que lo va a tocar. */
.paso-pie{
  position:sticky;bottom:0;z-index:2;background:var(--fondo);
  margin-top:24px;padding:14px 0 16px;border-top:2px solid var(--tinta-borde)
}
.paso-pie .paso-cuenta{margin:0 0 10px}

/* --- Paso 3: elegir qué estás cursando --- */
/* La tarjeta se marca con una casilla de verdad y no sólo con un
   borde: un color distinto no dice «esta la elegí yo», y el amarillo
   pleno de fondo dejaba la línea de metadatos en 6,6 contra 7. */
.tarjeta.materia.elegible{position:relative;padding-right:54px}
.tarjeta.materia.elegible::after{
  content:'';position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border:2px solid var(--tinta-borde);border-radius:50%;
  background:var(--superficie)
}
.tarjeta.materia.elegible[aria-pressed="true"]{
  background:var(--superficie-2);
  border-left-color:var(--linea-saberes);
  outline:2px solid var(--texto);outline-offset:2px
}
.tarjeta.materia.elegible[aria-pressed="true"]::after{
  content:'✓';background:var(--amarillo);color:var(--sobre-color);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fuente-sub);font-weight:700;font-size:15px;line-height:1
}

/* --- El resumen: la banda del año --- */
/* La misma pastilla negra que usan las cuentas de los rótulos, porque
   es el mismo tipo de dato. Y al lado, la salida para corregirlo: el
   año se contesta una vez, pero se cambia cuando haga falta. */
.anio-banda{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin:22px 0 2px
}
.anio-banda-dato{
  background:var(--negro);color:var(--sobre-negro);border-radius:var(--radio-pastilla);
  padding:5px 13px;font-family:var(--fuente-datos);font-weight:700;
  font-size:var(--letra-chica);letter-spacing:.12em
}
.anio-banda .boton.texto{margin:0}

/* El período al que te podés anotar. Va debajo del rótulo y en la voz
   de datos: es la aclaración de una cuenta, no un segundo título. */
.periodo-rotulo{
  font-family:var(--fuente-datos);font-size:var(--letra-chica);
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-suave);margin:-8px 0 14px
}

/* La salida del diálogo. Se ve —una salida escondida no es una
   salida— pero no compite con «Seguir»: está centrada, sin fondo y
   debajo del pie. */
.paso-salida{text-align:center;margin:6px 0 4px}

/* Los botones de texto de esta pantalla son FRASES, no rótulos:
   «Prefiero marcarlas yo», «Ver también 1 materia del 2° cuatrimestre».
   En la caja alta y con el interletrado de .boton se leían como
   titulares y le ganaban a lo que tenían al lado. El .boton.texto de la
   pantalla de la nota queda como está: ahí «Saltar por ahora» sí es un
   rótulo corto. */
.anio-banda .boton.texto,
#para-anotarse .boton.texto,
.paso-salida .boton.texto{
  text-transform:none;letter-spacing:0;padding:8px 2px;
  font-size:var(--letra-nota);text-align:left
}
.paso-salida .boton.texto{text-align:center}
/* La clase `.texto` sola, de otra pantalla, trae width:100%. Acá el
   botón va al lado de la pastilla del año, no debajo. */
.anio-banda .boton.texto{width:auto}
/* Y este ocupa el ancho, pero como un renglón: alineado a la
   izquierda, no centrado como un botón. */
#para-anotarse .boton.texto{justify-content:flex-start}
/* La pregunta recibe el foco al cambiar de paso, para que un lector de
   pantalla lea la pregunta nueva y no siga parado donde estaba. Ese
   foco lo mueve el programa, no la persona: sólo se dibuja si además
   llegó tabulando. */
.paso-pregunta:focus:not(:focus-visible){outline:none}

/* --- Empezar de nuevo, al pie de «Mi cursada» ---
   Separado del resumen por la misma línea de tinta que usa el renglón
   de las trabadas: no es una parte más de tu año, es la salida de
   emergencia. Y va al final porque se busca cuando se necesita, no se
   encuentra por accidente. */
.reinicio{
  margin-top:34px;padding-top:20px;border-top:2px solid var(--tinta-borde)
}
.reinicio .letra-chica{margin:10px 0 0;line-height:1.5;color:var(--texto-suave)}

/* --- «Te podés anotar»: los dos grupos plegables ---
   Reusa el <details> de Agenda y Trámites, pero NO su tipografía. Allá
   el summary es el título de una sección y va en Archivo Black; acá es
   un rótulo, y esta pantalla ya decidió que los rótulos bajan la voz y
   hablan en la tipografía de datos. Un Archivo Black de 18 px acá le
   ganaría a las tarjetas que tiene adentro.

   La diferencia con un rótulo común es el color: los que no se tocan
   van en --texto-suave, este va en --texto. Sumado a la flecha, es lo
   que lo hace leerse como algo que se abre.

   El interletrado baja de .16em a .10em porque «PODÉS CURSARLA Y
   RENDIR FINAL» son veintinueve caracteres y tiene que entrar en un
   renglón al lado de la cuenta y de la flecha. */
.grupo-anotarse{border-bottom:1px solid var(--linea)}
.grupo-anotarse:first-of-type{border-top:1px solid var(--linea)}
.grupo-anotarse > summary{
  font-family:var(--fuente-datos);font-weight:700;font-size:var(--letra-chica);
  letter-spacing:.10em;text-transform:uppercase;color:var(--texto);
  padding:15px 2px;min-height:48px
}
/* Las tarjetas de adentro necesitan aire arriba: pegadas al rótulo se
   leen como parte de él. */
.grupo-anotarse .cuerpo-grupo{padding:4px 0 16px}
@media (hover:hover) and (pointer:fine){
  .grupo-anotarse > summary:hover{color:var(--texto)}
}

/* ---- Lo ultimo de Instagram, en el inicio ----
   Cuadrados, porque asi es como se ven alla y asi los reconoce
   cualquiera. Llevan la misma segunda tinta corrida que las tarjetas:
   es contenido de la agrupacion, no un widget pegado encima.

   Van chicos a proposito. Son placas —imagen con el texto adentro— y
   no se pueden agrandar ni escuchar, asi que no pueden ocupar el lugar
   de las novedades escritas, que si se leen. */
.grilla-ig{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px
}
/* El cuadrado lo fija el RECUADRO, no la imagen. Si lo fijara la
   imagen, una que no carga —pasa: la red de la facultad, un archivo
   que se borro— dejaria el texto alternativo suelto y el bloque
   pasaria de 109 de alto a 304, rompiendo la grilla entera. Asi el
   hueco queda del tamano correcto pase lo que pase. */
.posteo-ig{
  display:block;position:relative;aspect-ratio:1;
  border-radius:var(--radio-chico);border:2px solid var(--tinta-borde);
  overflow:hidden;background:var(--superficie-2);box-shadow:var(--sombra)
}
.posteo-ig img{
  display:block;width:100%;height:100%;object-fit:cover;
  font-size:var(--letra-chica);color:var(--texto-suave);
  background:var(--superficie-2)
}
.posteo-ig:active{transform:translate(2px,2px);box-shadow:none}
@media (min-width:520px){
  .grilla-ig{grid-template-columns:repeat(6,1fr)}
}

/* ============================================================
   ESTUDIEMOS: LAS HERRAMIENTAS Y LA INVITACIÓN A COMPARTIR

   POR QUÉ EL AMARILLO SE FUE DE ARRIBA. Las tres puertas de Estudiemos
   —preparar un final, las fichas y Anatomofisiología— eran tres
   `.nexo-final` seguidos, y `.nexo-final` es amarillo. Tres bloques
   amarillos uno abajo del otro no jerarquizan nada: si todo grita, no
   grita nada, y el amarillo dejaba de querer decir «tocá acá».

   Ahora aparece UNA sola vez por pantalla, abajo del todo, en la
   invitación a compartir material, que es lo único que la pantalla le
   pide a quien entra. Las herramientas pasan a superficie con borde
   suave: se leen como estantes, no como carteles.
   ============================================================ */

.herramientas{
  display:grid;grid-template-columns:1fr;gap:12px;
  /* La insignia se sale de la tarjeta por arriba. Sin este respiro
     queda cortada contra el título de la sección de arriba. */
  padding-top:10px;margin:0 0 20px
}
@media (min-width:560px){ .herramientas{grid-template-columns:1fr 1fr} }

.herramienta{
  position:relative;display:flex;align-items:center;gap:12px;
  min-height:48px;              /* la medida del dedo, no la de la vista */
  padding:14px 15px;text-decoration:none;color:var(--texto);
  background:var(--superficie);
  border:1.5px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra);
  transition:transform .12s ease, box-shadow .12s ease
}
.herramienta:hover{ transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--tinta-borde) }
.herramienta:active{ transform:translate(1px,1px);box-shadow:1px 1px 0 var(--tinta-borde) }
/* El foco va en celeste, como el del buscador: sobre superficie clara
   un halo amarillo no se distingue del fondo. */
.herramienta:focus-visible{ outline:none;box-shadow:0 0 0 3px var(--celeste) }

/* El cajoncito del icono va en un gris de la casa y NO en amarillo.
   Con amarillo aca, la pantalla tenia cuatro amarillos: tres cajoncitos
   y la tarjeta de compartir. El amarillo deja de significar «toca aca»
   cuando esta en todos lados; aca solo tiene que separar el icono del
   texto, y para eso alcanza un tono. */
.herramienta-ico{
  flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;
  border-radius:var(--radio-chico);color:var(--texto);
  background:rgba(26,26,26,.07)
}
:root[data-tema="oscuro"] .herramienta-ico{ background:rgba(253,252,247,.10) }
.herramienta-ico svg.ico{width:21px;height:21px}
.herramienta-texto{ flex:1;min-width:0 }
.herramienta-texto strong{
  display:block;font-family:var(--fuente-titulo);font-size:var(--letra-densa);
  line-height:1.15;margin-bottom:3px
}
.herramienta-texto span{
  display:block;font-size:var(--letra-nota);line-height:1.4;opacity:.75
}
.herramienta-flecha{
  flex:0 0 auto;font-family:var(--fuente-sub);font-weight:700;font-size:20px;
  line-height:1;opacity:.4
}

/* La insignia. Va en negro con letra amarilla y no al revés: la tarjeta
   ya tiene amarillo en el ícono, y dos amarillos discutiendo a tres
   centímetros se leen como un error de impresión. */
.herramienta-insignia{
  position:absolute;top:-9px;right:-6px;
  font-family:var(--fuente-sub);font-weight:800;font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;
  background:var(--tinta-borde);color:var(--amarillo);
  border-radius:var(--radio-pastilla);padding:4px 9px;white-space:nowrap
}

/* ---------- La invitación a compartir ---------- */

.comunidad{
  background:var(--amarillo);color:var(--sobre-color);
  border:1.5px solid var(--tinta-borde);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:22px 18px;margin:24px 0 0
}
.comunidad svg.ico{ width:42px;height:42px;display:block;margin-bottom:12px }
.comunidad h2{
  font-family:var(--fuente-titulo);font-size:var(--letra-sub);
  line-height:1.1;margin:0 0 8px
}
.comunidad p{ font-size:var(--letra-nota);line-height:1.5;margin:0;max-width:44ch }

.comunidad-boton{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:48px;box-sizing:border-box;margin-top:18px;
  padding:13px 18px;text-decoration:none;
  font-family:var(--fuente-sub);font-weight:800;font-size:var(--letra-nota);
  letter-spacing:.05em;text-transform:uppercase;
  background:var(--tinta-borde);color:var(--amarillo);
  border:1.5px solid var(--tinta-borde);border-radius:var(--radio-pastilla);
  transition:transform .12s ease
}
.comunidad-boton:active{ transform:scale(.97) }
.comunidad-boton:focus-visible{ outline:3px solid var(--celeste);outline-offset:2px }
.comunidad-boton svg.ico{ width:18px;height:18px;margin:0 }

/* Quien pidió que no se mueva nada, que no se mueva nada. */
@media (prefers-reduced-motion:reduce){
  .herramienta,.comunidad-boton{ transition:none }
  .herramienta:hover,.herramienta:active,.comunidad-boton:active{ transform:none }
}

/* ============================================================
   LA BARRA DE SECCIONES, ABAJO

   Estaba arriba, con las siete secciones en una fila que se deslizaba.
   Deslizar para descubrir que una seccion existe es pedirle a alguien
   que adivine, y las tres de la derecha —Fechas, Perfil, Quienes
   somos— vivian escondidas ahi.

   Ahora son cuatro, fijas al pie, sin deslizar y del mismo ancho. Al
   pie porque es donde esta el pulgar cuando se sostiene el telefono con
   una mano, que es como se usa esta app caminando por la facultad.

   Se reusa la clase `secciones` para no reescribir el foco, el toque y
   el tamano de los iconos, que ya estaban resueltos. Esto de aca solo
   la cambia de lugar.
   ============================================================ */
.secciones.abajo{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  border-top:1px solid var(--linea-negro);border-bottom:none;
  /* El borde de abajo en los telefonos con muesca: sin esto la fila
     queda debajo de la barra del sistema y el ultimo renglon no se
     toca. */
  padding-bottom:env(safe-area-inset-bottom, 0px)
}
/* Cuatro entran enteras: no hay nada escondido y los degradados de los
   costados serian una mentira. */
.secciones.abajo .secciones-fila{ overflow-x:visible }
/* Las cuatro reparten el ancho en partes iguales. El cuerpo baja un
   punto y afloja el espaciado para que «Estudiemos» y «Mi perfil»
   entren en un renglon: partidos en dos, la barra queda despareja y se
   lee peor que con la letra un poco mas chica. */
.secciones.abajo .secciones-fila a{
  flex:1 1 0;min-width:0;
  font-size:11px;letter-spacing:.02em;white-space:nowrap
}
.secciones.abajo::before,
.secciones.abajo::after{ display:none }

/* La seccion en la que estas se marca ARRIBA del renglon y no abajo:
   abajo queda contra el borde de la pantalla y no se ve. */
.secciones.abajo .secciones-fila a{
  border-bottom:none;border-top:3px solid transparent
}
.secciones.abajo .secciones-fila a[aria-current="page"]{
  border-top-color:var(--amarillo)
}

/* Que la barra no tape el final de ninguna pantalla. La fila mide 63;
   los 17 de mas son para que la ultima linea no quede pegada al borde
   de la barra, que se lee como si estuviera cortada. */
body{ padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px)) }
/* Antes de entrar no hay barra, asi que tampoco hace falta el hueco. */
body.antes-de-entrar{ padding-bottom:0 }

/* El globo de «avisanos» sube por encima de la barra */
.avisanos{ bottom:calc(74px + env(safe-area-inset-bottom, 0px)) }

/* ============================================================
   LA ALERTA DE LA MESA

   Flota arriba del boton de Avisanos, en todas las pantallas. Antes era
   una tarjeta amarilla arriba de la portada, y ahi la veia solo quien
   entraba por la portada: la mitad de las visitas llegan directo a una
   seccion desde un link de Instagram.

   Es lo unico amarillo que flota. El amarillo esta reservado para la
   accion principal, y durante los cuatro dias que dura una inscripcion
   la accion principal de toda la app es esa.
   ============================================================ */
.alerta-mesa{
  position:fixed;right:14px;z-index:69;
  /* Arriba del boton de Avisanos: 74 de su base + 56 de alto + 12 de
     aire. Si se mueve el boton, se mueve esto. */
  bottom:calc(142px + env(safe-area-inset-bottom, 0px));
  display:flex;align-items:stretch;gap:0;
  max-width:min(300px, calc(100vw - 28px));
  background:var(--amarillo);color:var(--sobre-color);
  border:1.5px solid var(--tinta-borde);border-radius:var(--radio);
  box-shadow:0 4px 16px rgba(0,0,0,.28);
  overflow:hidden
}
/* La flechita que la ata al boton, como la del globo de Avisanos */
.alerta-mesa::after{
  content:'';position:absolute;right:26px;top:100%;
  border:7px solid transparent;border-top-color:var(--tinta-borde)
}
.alerta-mesa-ir{
  flex:1;min-width:0;display:block;padding:11px 12px;
  text-decoration:none;color:var(--sobre-color)
}
.alerta-mesa-ir strong{
  display:block;font-family:var(--fuente-titulo);font-size:var(--letra-densa);
  line-height:1.15;margin-bottom:2px
}
.alerta-mesa-ir span{
  display:block;font-size:var(--letra-nota);line-height:1.3;opacity:.8
}
.alerta-mesa-cerrar{
  flex:0 0 auto;width:38px;min-height:44px;
  background:transparent;border:none;border-left:1px solid var(--tinta-borde);
  color:var(--sobre-color);font-size:15px;line-height:1;cursor:pointer
}
.alerta-mesa-ir:focus-visible,
.alerta-mesa-cerrar:focus-visible{ outline:3px solid var(--celeste);outline-offset:-3px }

/* Cuando quedan un dia o menos, el borde se pone rojo. No cambia el
   fondo: el amarillo ya es lo mas fuerte que tiene la app, y un rojo
   entero ahi se lee como un error y no como un plazo. */
.alerta-mesa.urgente{ border-color:var(--rojo-solido);border-width:2.5px }
.alerta-mesa.urgente::after{ border-top-color:var(--rojo-solido) }