/* =========================================================================
   CR AGENCY — SISTEMA DE DISENO COMPARTIDO
   =========================================================================

   Una sola fuente de verdad para la marca. La usan tanto la landing
   publica (index.html) como la app (cr-agency-app.html).

   Antes cada pagina traia su propia copia de los tokens, los botones y la
   barra de navegacion. Cambiar un color implicaba acordarse de editar dos
   archivos, y ya habian empezado a separarse entre si.

   REGLA: si un estilo lo usan las dos paginas, va aqui. Si es de una sola
   pagina, se queda en esa pagina.

   -------------------------------------------------------------------------
   LA IDENTIDAD, EN CORTO
   -------------------------------------------------------------------------
   La metafora es un expediente: papel (parchment) sobre tinta azul marino
   (ink). Fraunces para titulos, Public Sans para texto, JetBrains Mono para
   etiquetas y datos.

   PALETA v2 (2026-09-20) — azul universidad + oro de accion:
     - Azul marino de fondo y azul claro de acento: confianza.
     - Oro SOLO en lo que se puede apretar para avanzar (boton principal,
       plan recomendado) y en las estrellas. Si algo no es accion, no es oro.
     - Rojo solo para avisos. Verde solo para "hecho / contesto".
   Todos los textos pasan el contraste minimo de lectura (WCAG AA, 4.5:1).

   No cambies los colores sueltos: cambia el token y se propaga.
   Para transparencias usa los canales: rgba(var(--acento-rgb), .2).
   ========================================================================= */

:root {
  /* --- Superficies, de mas oscura a mas clara ---
     Azul marino y no negro: el azul es el color que la gente asocia con
     "competente, confiable" (Labrecque y Milne, 2012). Para una familia que
     le va a pagar a alguien por el futuro de su hijo, eso es lo primero. */
  --ink:      #0A1428;
  --ink-2:    #0F1D36;
  --ink-3:    #162843;
  --ink-4:    #1F3456;   /* superficie elevada: hover, seleccionado */

  /* --- Texto --- */
  --parchment:     #F6F1E4;
  --parchment-dim: #D9D2BE;
  --muted:         #9AA6BD;

  /* --- Acento de marca: azul claro ---
     Para TODO lo que no es un boton: etiquetas, pestanas, bordes activos,
     foco, iconos. Menos saturado que el oro a proposito, para no competirle. */
  --acento:      #9CB8E2;
  --acento-alto: #BCD0EE;
  --acento-soft: rgba(156, 184, 226, .14);

  /* --- Oro: SOLO acciones ---
     El boton principal, el plan recomendado y las estrellas. Nada mas.
     Un boton vende por contraste con lo que lo rodea (efecto de
     aislamiento / Von Restorff), no por el color en si: si el oro esta
     en todos lados, el boton deja de resaltar. */
  --oro:      #F2B84B;
  --oro-alto: #F7CA6E;
  --oro-soft: rgba(242, 184, 75, .14);

  /* --- Estados --- */
  --stamp:      #E36B4E;   /* avisos y errores (antes #C65235: no pasaba el contraste minimo) */
  --stamp-soft: rgba(227, 107, 78, .14);
  --green:      #5BC08A;   /* hecho, contesto, si */
  --green-soft: rgba(91, 192, 138, .14);

  /* Canales sueltos, para transparencias: rgba(var(--ink-rgb), .8) */
  --ink-rgb:       10, 20, 40;
  --ink-2-rgb:     15, 29, 54;
  --parchment-rgb: 246, 241, 228;
  --muted-rgb:     154, 166, 189;
  --acento-rgb:    156, 184, 226;
  --oro-rgb:       242, 184, 75;
  --stamp-rgb:     227, 107, 78;
  --green-rgb:     91, 192, 138;

  /* --- Tintas para texto sobre PAPEL claro (pasaporte, carta de ejemplo) ---
     Los acentos de arriba estan hechos para fondo oscuro: sobre papel el
     rojo daba 2.9:1 y el azul claro menos de 2. Estas pasan 4.5:1. */
  --papel-sello: #A8361F;   /* 5.8:1 */
  --papel-azul:  #1F4E8C;   /* 7.4:1 */
  --papel-gris:  #555C69;   /* 6.0:1 */

  --line:      rgba(246, 241, 228, .12);
  --line-alto: rgba(246, 241, 228, .22);

  /* --- Tipografia --- */
  --fuente-titulo: 'Fraunces', Georgia, serif;
  --fuente-texto:  'Public Sans', system-ui, -apple-system, sans-serif;
  --fuente-mono:   'JetBrains Mono', ui-monospace, monospace;

  /* --- Elevacion --- */
  --sombra-1: 0 2px 8px -2px rgba(0, 0, 0, .4);
  --sombra-2: 0 12px 28px -18px rgba(0, 0, 0, .7);
  --sombra-3: 0 20px 45px -25px rgba(0, 0, 0, .6);
  --sombra-4: 0 28px 60px -30px rgba(0, 0, 0, .75);

  /* --- Movimiento ---
     Que todo se mueva igual es la mitad de la sensacion de "fluido". Lo que
     hace que un sitio se vea hecho a la carrera no es que le falte animacion:
     es que cada cosa use una duracion distinta y la curva "ease" de fabrica.
     Aqui hay TRES duraciones y tres curvas, y nada deberia usar otra.

     Las curvas, y por que cada una:
       curva    entrada y salida parejas. Para lo que cambia de estado:
                color de un boton, borde de un campo.
       salida   arranca rapido y frena suave. Para lo que APARECE: un panel,
                un menu, una tarjeta. Se siente como que llega a su lugar.
       entrada  arranca suave y acelera. Para lo que SE VA, para que no
                parezca que se quedo trabado a medio camino.

     Las duraciones:
       rapido   .14s  lo que responde al dedo: hover, foco, color
       normal   .24s  lo que se mueve de verdad: una tarjeta que sube
       lento    .42s  lo que entra o sale de la pantalla
     Arriba de ~.5s el ojo lo lee como lentitud, no como elegancia. */
  --curva:   cubic-bezier(.4, 0, .2, 1);
  --salida:  cubic-bezier(.16, 1, .3, 1);
  --entrada: cubic-bezier(.7, 0, .84, 0);
  --rapido: .14s var(--curva);
  --normal: .24s var(--curva);
  --lento:  .42s var(--salida);

  --radio:   8px;
  --radio-s: 5px;
}

/* =========================================================================
   BASE
   ========================================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--fuente-texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Halos muy tenues arriba: le quitan el gris plano al fondo sin
     competir con el contenido. */
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(var(--acento-rgb), .07), transparent),
    radial-gradient(ellipse 60% 40% at 85% 0%,  rgba(156, 184, 226, .05), transparent);
  background-attachment: fixed;
}

input, select, textarea, button { font-family: inherit; }

::selection { background: var(--acento-soft); color: var(--parchment); }

/* Anillo de foco visible para quien navega con teclado. Antes se usaba
   outline:none y solo cambiaba el borde — invisible para el teclado. */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--radio-s);
}

/* Barra de scroll acorde al tema */
* { scrollbar-color: var(--ink-4) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 10px; border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Enlace para saltar al contenido con el teclado: invisible hasta que
   recibe el foco con Tab. */
.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--oro); color: var(--ink); font-weight: 600; font-size: .85rem;
  padding: .6rem 1rem; border-radius: var(--radio-s); text-decoration: none;
  transition: top var(--rapido);
}
.saltar:focus { top: 1rem; }

/* Solo para lectores de pantalla */
.solo-lector {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Aviso de cookies: informa, no pide una decisión falsa (ver aviso-cookies.js) */
.aviso-cookies {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 150;
  max-width: 44rem; margin: 0 auto;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--ink-3); border: 1px solid var(--line-alto); border-radius: var(--radio);
  padding: .9rem 1.1rem; box-shadow: var(--sombra-4);
}
.aviso-cookies p { flex: 1 1 18rem; font-size: .82rem; line-height: 1.55; color: var(--parchment-dim); }
.aviso-cookies strong { color: var(--parchment); }
.aviso-cookies a { color: var(--acento); }

/* Casillas de aceptación (términos, renovación) */
.acepta {
  display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem; cursor: pointer;
  font-size: .82rem; line-height: 1.55; color: var(--parchment-dim);
}
.acepta input { margin-top: .2rem; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--acento); }
.acepta a { color: var(--acento); }

/* =========================================================================
   UTILIDADES Y TIPOGRAFIA
   ========================================================================= */

.serif { font-family: var(--fuente-titulo); }
.mono  { font-family: var(--fuente-mono); }
.wrap  { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.hidden { display: none !important; }

h1 { font-family: var(--fuente-titulo); font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.1rem); line-height: 1.2; letter-spacing: -.01em; margin: .5rem 0 .6rem; }
h2 { font-family: var(--fuente-titulo); font-weight: 600; font-size: 1.3rem; line-height: 1.3; margin-bottom: .3rem; }
h3 { font-family: var(--fuente-titulo); font-weight: 600; }

.eyebrow {
  font-family: var(--fuente-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--acento);
}

p.muted, .muted { color: var(--muted); font-size: .9rem; line-height: 1.6; }

/* =========================================================================
   NAVEGACION
   ========================================================================= */

nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(var(--ink-rgb), .82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 0;
  transition: border-color var(--normal), background var(--normal);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo { font-family: var(--fuente-titulo); font-weight: 600; font-size: 1.1rem; letter-spacing: -.01em; }
.logo span { color: var(--stamp); }
.nav-right { display: flex; align-items: center; gap: 1rem; font-size: .82rem; color: var(--muted); }

.btn-link {
  background: none; border: none; color: var(--acento); cursor: pointer;
  font-family: var(--fuente-mono); font-size: .75rem;
  text-transform: uppercase; letter-spacing: .04em;
  transition: color var(--rapido);
}
.btn-link:hover { color: var(--acento-alto); }

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

.btn-brass, .btn-outline, .btn-stamp-outline {
  font-family: var(--fuente-mono); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer; border-radius: var(--radio-s);
  transition: background var(--rapido), color var(--rapido),
              border-color var(--rapido), transform var(--rapido),
              box-shadow var(--rapido);
}
.btn-brass:active, .btn-outline:active, .btn-stamp-outline:active { transform: translateY(1px); }

.btn-brass {
  font-size: .78rem;
  background: var(--oro); color: var(--ink); border: none;
  padding: .8rem 1.6rem; box-shadow: var(--sombra-1);
}
.btn-brass:hover { background: var(--oro-alto); box-shadow: 0 6px 18px -6px rgba(var(--oro-rgb), .5); }
.btn-brass:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-outline {
  font-size: .72rem;
  background: transparent; color: var(--acento); border: 1px solid var(--acento);
  padding: .55rem 1rem;
}
.btn-outline:hover { background: var(--acento-soft); }

.btn-stamp-outline {
  font-size: .72rem;
  background: transparent; color: var(--stamp); border: 1px solid var(--stamp);
  padding: .55rem 1rem;
}
.btn-stamp-outline:hover { background: var(--stamp-soft); }

/* =========================================================================
   TARJETAS Y CAMPOS
   ========================================================================= */

.card {
  background: linear-gradient(135deg, var(--ink-2), var(--ink-3));
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: 1.8rem;
  box-shadow: var(--sombra-3);
}

.form-field { margin-top: 1.2rem; text-align: left; }
.form-field label {
  display: block; font-size: .75rem; color: var(--muted);
  margin-bottom: .4rem; font-family: var(--fuente-mono);
}
.form-field input, .form-field select, .form-field textarea {
  width: 100%; background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radio-s); color: var(--parchment);
  padding: .75rem .9rem; font-size: .9rem;
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--line-alto); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-soft);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: rgba(var(--muted-rgb), .8); }  /* 5.2:1 */

/* =========================================================================
   ETIQUETAS DE ESTADO
   ========================================================================= */

.badge {
  display: inline-block;
  font-family: var(--fuente-mono); font-size: .65rem; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
  padding: .3rem .7rem; border-radius: 20px;
  border: 1px solid transparent;
}
.badge-pendiente  { background: var(--acento-soft); color: var(--acento); border-color: rgba(var(--acento-rgb), .3); }
.badge-aprobado   { background: rgba(var(--muted-rgb), .16); color: var(--muted); border-color: rgba(var(--muted-rgb), .28); }
.badge-rechazado  { background: var(--stamp-soft); color: var(--stamp); border-color: rgba(var(--stamp-rgb), .3); }
.badge-positiva   { background: var(--green-soft); color: var(--green); border-color: rgba(var(--green-rgb), .32); }
.badge-negativa   { background: var(--stamp-soft); color: var(--stamp); border-color: rgba(var(--stamp-rgb), .3); }
.badge-sin_respuesta { background: rgba(var(--muted-rgb), .16); color: var(--muted); border-color: rgba(var(--muted-rgb), .28); }
.badge-interesados_piden_mas_info { background: var(--acento-soft); color: var(--acento); border-color: rgba(var(--acento-rgb), .3); }

/* =========================================================================
   MOVIMIENTO
   =========================================================================
   Las animaciones son cortas a proposito: dan continuidad sin hacer
   esperar. Y se apagan por completo si el sistema pide menos movimiento. */

@keyframes aparecer {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.aparece { animation: aparecer var(--normal) both; }

@keyframes girar { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
  border: 2px solid var(--acento-soft); border-top-color: var(--acento);
  border-radius: 50%; animation: girar .7s linear infinite;
}

/* Esqueleto de carga: ocupa el lugar del contenido mientras llega, para
   que el layout no salte cuando aparece. */
@keyframes brillo { to { background-position-x: -200%; } }
.skeleton {
  background: linear-gradient(90deg, var(--ink-2) 40%, var(--ink-3) 50%, var(--ink-2) 60%);
  background-size: 200% 100%;
  animation: brillo 1.3s linear infinite;
  border-radius: var(--radio-s);
}

/* -------------------------------------------------------------------------
   APARICION AL HACER SCROLL
   -------------------------------------------------------------------------
   Sustituye a la libreria AOS, que se cargaba desde un CDN.

   Por que se quito: el CSS de AOS pone `[data-aos^=fade]{opacity:0}` y solo
   devuelve la opacidad cuando su JavaScript arranca. Si el CSS cargaba y el
   JS no —CDN caido, bloqueador, conexion lenta— la landing entera quedaba
   INVISIBLE, formulario de registro incluido.

   Aqui el orden esta invertido a proposito: el contenido es visible por
   defecto, y solo se oculta cuando el JavaScript ya confirmo que va a
   animarlo (poniendo la clase `reveal-on` en <html>). Si el JS falla, no
   pasa nada: se ve todo, sin animacion.

   Se conservan los atributos data-aos del HTML para no tener que tocar los
   14 elementos que ya los traian. */

html.reveal-on [data-aos] {
  opacity: 0;
  transition: opacity .7s var(--curva), transform .7s var(--curva);
  will-change: opacity, transform;
}
html.reveal-on [data-aos="fade-up"]    { transform: translateY(28px); }
html.reveal-on [data-aos="fade-down"]  { transform: translateY(-28px); }
html.reveal-on [data-aos="fade-right"] { transform: translateX(-28px); }
html.reveal-on [data-aos="fade-left"]  { transform: translateX(28px); }

html.reveal-on [data-aos].visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Sin movimiento: se muestra todo de inmediato, sin desplazamiento. */
  html.reveal-on [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* =========================================================================
   ESTADO VACIO
   ========================================================================= */

.empty-state {
  text-align: center; padding: 3rem 1rem;
  color: var(--muted); font-size: .88rem; line-height: 1.6;
}
.empty-state strong { color: var(--parchment-dim); }


/* ===== SELECTOR DE RUTA (atleta / estudiante / ambos) ===== */
.ruta-titulo { font-family: var(--fuente-titulo); font-size: 1.3rem; margin-bottom: .35rem; }
.ruta-sub { color: var(--muted); font-size: .88rem; margin-bottom: 1.3rem; }

.ruta-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem;
}
.ruta-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
  text-align: left; cursor: pointer;
  background: rgba(var(--parchment-rgb), .02); color: var(--parchment);
  border: 1px solid var(--line); border-radius: var(--radio);
  padding: 1.2rem 1.1rem; font: inherit;
  transition: border-color var(--rapido),
              background var(--rapido),
              transform var(--rapido);
}
.ruta-card:hover {
  border-color: var(--acento); background: rgba(var(--acento-rgb), .06);
  transform: translateY(-3px);
}
.ruta-card:active { transform: translateY(-1px); }
.ruta-card.elegida { border-color: var(--acento); background: rgba(var(--acento-rgb), .1); }
/* .ruta-icono se quito: el emoji repetia lo que dice el titulo. */
.ruta-card strong { font-family: var(--fuente-titulo); font-size: 1.08rem; }
.ruta-desc { font-size: .8rem; color: var(--muted); line-height: 1.45; }

/* Grupos de campos dentro del paso 2 */
.grupo-label {
  font-family: var(--fuente-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--acento);
  margin: 1.6rem 0 .8rem; padding-bottom: .45rem;
  border-bottom: 1px solid var(--line);
}
.opcional { color: var(--muted); font-weight: 400; font-size: .78em; }

.aviso-honesto {
  background: var(--stamp-soft); border-left: 2px solid var(--stamp);
  border-radius: var(--radio-s); padding: .8rem 1rem; margin-top: 1.1rem;
  font-size: .82rem; line-height: 1.55; color: var(--parchment-dim);
}

.form-botones { display: flex; gap: .7rem; margin-top: 1.5rem; flex-wrap: wrap; }
.form-botones .btn-brass { flex: 1; min-width: 180px; }
.btn-linea {
  font-family: var(--fuente-mono); font-size: .78rem; font-weight: 600;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--radio-s);
  padding: .8rem 1.1rem; cursor: pointer;
  transition: color var(--rapido), border-color var(--rapido);
}
.btn-linea:hover { color: var(--parchment); border-color: var(--line-alto); }


/* =========================================================================
   MODAL DE PLANTILLA
   ========================================================================= */
.modal-fondo {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: rgba(var(--ink-rgb), .72);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--normal);
}
.modal-fondo.visible { opacity: 1; }
.modal-caja {
  width: 100%; max-width: 680px; max-height: 86vh; overflow-y: auto;
  background: var(--ink-2); border: 1px solid var(--line-alto);
  border-radius: var(--radio); padding: 1.6rem;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.7);
  transform: translateY(14px) scale(.985);
  transition: transform var(--normal);
}
.modal-fondo.visible .modal-caja { transform: none; }
.modal-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.modal-cab h3 { font-family: var(--fuente-titulo); font-size: 1.25rem; margin-top: .2rem; }
.modal-cerrar {
  background: none; border: none; color: var(--muted);
  font-size: 1.7rem; line-height: 1; cursor: pointer; padding: 0 .3rem;
  transition: color var(--rapido);
}
.modal-cerrar:hover { color: var(--parchment); }
.modal-razon {
  background: rgba(var(--acento-rgb), .07); border-left: 2px solid var(--acento);
  border-radius: var(--radio-s); padding: .75rem .95rem; margin: 1rem 0;
  font-size: .84rem; line-height: 1.55; color: var(--parchment-dim);
}
.modal-razon strong { color: var(--acento); }
#plantilla-texto {
  width: 100%; font-family: var(--fuente-mono); font-size: .8rem; line-height: 1.6;
  background: var(--ink); color: var(--parchment);
  border: 1px solid var(--line); border-radius: var(--radio-s);
  padding: 1rem; resize: vertical;
}
.modal-pie { display: flex; gap: .7rem; justify-content: flex-end; margin-top: 1.1rem; }
.btn-brass.ok { background: var(--green); color: var(--ink); }

/* =========================================================================
   PULIDO DE MOVIMIENTO (tarea 4)
   =========================================================================
   Todo el sitio usa la misma curva y las mismas duraciones. Antes cada
   componente tenia la suya y el conjunto se sentia desparejo.
   ========================================================================= */

/* Los campos responden al foco, no solo al hover */
.form-field input,
.form-field select,
.form-field textarea {
  transition: border-color var(--rapido),
              background var(--rapido),
              box-shadow var(--rapido);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(var(--acento-rgb), .13);
  outline: none;
}

/* Los botones se hunden al presionar — da sensacion de que respondio */
.btn-brass, .btn-stamp, .btn-linea, .ruta-card, .admin-tab-btn {
  will-change: transform;
}
.btn-brass:active, .btn-stamp:active, .btn-linea:active { transform: translateY(1px); }

/* Las tarjetas de resultado entran escalonadas en vez de todas de golpe */
@keyframes entrar-suave {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.uni-escuela, .equipo-card {
  animation: entrar-suave .38s var(--curva) both;
}
.uni-escuela:nth-child(1) { animation-delay: .02s; }
.uni-escuela:nth-child(2) { animation-delay: .05s; }
.uni-escuela:nth-child(3) { animation-delay: .08s; }
.uni-escuela:nth-child(4) { animation-delay: .11s; }
.uni-escuela:nth-child(5) { animation-delay: .14s; }
.uni-escuela:nth-child(n+6) { animation-delay: .17s; }

/* La pestana activa marca su posicion con una linea que se desliza */
.admin-tab-btn { position: relative; }
.admin-tab-btn::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--acento);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--normal);
}
.admin-tab-btn.active::after { transform: scaleX(1); }

/* Scroll suave en toda la app, no solo en la portada */
html { scroll-behavior: smooth; }

/* Quien pidio menos movimiento no recibe NINGUNO de estos efectos.
   No es un detalle de accesibilidad opcional: para algunas personas el
   movimiento provoca mareo real. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===== PERSONALIZACION Y AVISOS EN EL MODAL ===== */
.pers-titulo {
  font-family: var(--fuente-mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--acento); margin: 1.1rem 0 .5rem;
}
.pers-lista { list-style: none; display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.pers-lista li {
  font-size: .81rem; color: var(--parchment-dim); line-height: 1.45;
  padding-left: 1.1rem; position: relative;
}
.pers-lista li::before { content: '\2713'; position: absolute; left: 0; color: var(--green); }
.modal-aviso {
  background: var(--stamp-soft); border-left: 2px solid var(--stamp);
  border-radius: var(--radio-s); padding: .65rem .9rem; margin-bottom: .5rem;
  font-size: .8rem; line-height: 1.5; color: var(--parchment-dim);
}

/* ===== EXPEDIENTE ===== */
.exp-barra {
  height: 7px; background: var(--ink); border-radius: 99px;
  overflow: hidden; margin: 1.1rem 0 .6rem;
}
.exp-barra-llena {
  height: 100%; border-radius: 99px; width: 0;
  transition: width .6s var(--curva), background var(--normal);
}
.exp-barra-llena.bien  { background: var(--green); }
.exp-barra-llena.medio { background: var(--acento); }
.exp-barra-llena.bajo  { background: var(--stamp); }
#exp-veredicto { font-size: .85rem; line-height: 1.55; color: var(--parchment-dim); }
#exp-veredicto strong { color: var(--parchment); }
.exp-resumen {
  background: rgba(var(--parchment-rgb), .03); border: 1px solid var(--line);
  border-radius: var(--radio-s); padding: .9rem 1rem; margin: 1.1rem 0;
  font-size: .86rem; line-height: 1.6; color: var(--parchment-dim);
}
.exp-accion {
  border-left: 2px solid var(--acento); padding: .1rem 0 .1rem 1rem;
  margin-bottom: 1.1rem;
}
.exp-accion h4 { font-family: var(--fuente-titulo); font-size: 1rem; margin-bottom: .35rem; }
.exp-porque, .exp-como { font-size: .81rem; line-height: 1.55; color: var(--muted); margin-bottom: .25rem; }
.exp-porque strong, .exp-como strong { color: var(--parchment-dim); }
.exp-listo {
  background: var(--green-soft); border-left: 2px solid var(--green);
  border-radius: var(--radio-s); padding: .8rem 1rem;
  font-size: .85rem; color: var(--parchment-dim);
}

/* =========================================================================
   ACABADO (2026-09-27) — lo mismo en la portada y en el panel
   ========================================================================= */

/* --- Grano de película sobre todo. Sin él, el azul se ve a plástico. ----- */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 900; pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* --- Botón principal: barrido de luz al pasar el cursor ------------------ */
.btn-brass {
  position: relative; overflow: hidden;
  background-image: linear-gradient(140deg, var(--oro-alto) 0%, var(--oro) 45%, #DB9F33 100%);
}
.btn-brass::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .65s var(--curva);
}
.btn-brass:hover::after { transform: translateX(130%); }
.btn-brass:hover { transform: translateY(-1px); }
.btn-brass:disabled::after { display: none; }
@media (prefers-reduced-motion: reduce) { .btn-brass::after { display: none; } }