/* ═══════════════════════════════════════════════════════════════════════
   ATMA — sistema visual
   ═══════════════════════════════════════════════════════════════════════

   La identidad viene de la plantilla de reportes: azul profundo, un haz de
   luz prismático, serif de editorial y oro usado con cuentagotas.

   Tres reglas que sostienen todo:

   · LA LUZ ES EL MOTIVO. No hay ilustraciones ni iconos decorativos: el
     único elemento gráfico es la luz (haces, resplandores, halos). Es lo
     que la plantilla ya hacía, y lo que hace que ATMA no parezca un panel
     de software cualquiera.

   · EL ORO SE GANA. Solo lo llevan los niveles de conciencia y la marca.
     Si el oro está en todas partes deja de significar algo.

   · LA APP CRECE POR MÓDULOS. "Nivel de Consciencia" es el primero, no el
     único. La navegación está armada para que sumar módulos no obligue a
     rediseñar nada.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── LA MARCA DE ATMA, no un estilo inventado ─────────────────────────
     Los valores salen de su propia página (atmaconciencia.com), sacados por
     frecuencia de uso, no a ojo. Antes la app tenía un violeta parecido pero
     no el suyo, y una serif que la marca no usa en ningún sitio.

       fondo    #060420   negro azulado, no violeta
       turquesa #3fd0c8 / #5ff2d6   el acento principal
       violeta  #7a4eff / #6f4def   el secundario
       textos   #d9d9d9 · #8a8a9e · #8fa3f2

     Cambiar esto cambia la app entera, y es a propósito: que se parezca a
     ATMA y no a cualquier otra app oscura. */
  --plano-0:#030110;
  --plano-1:#060420;
  --plano-2:#0a0730;
  --plano-3:#120c40;
  --linea:#1e1a52;
  --linea-viva:#332a80;

  --tinta:#e9e9f2;
  --tinta-media:#b6bad4;
  --tinta-tenue:#8a8a9e;

  /* El oro: reservado para los niveles de conciencia y la marca */
  --oro:#e8c789;
  --oro-hondo:#a8823f;

  /* ── El espectro de la luz ─────────────────────────────────────────────
     Violeta → azul → cian, el degradado del haz. Se usa en ese orden
     siempre: violeta abajo (la base), cian arriba (la punta). */
  --luz:#7a4eff;         /* el violeta de ATMA */
  --luz-viva:#8f6bff;    /* el violeta que quema, para los focos */
  --luz-fria:#6f4def;    /* el violeta hondo del medio */
  --luz-punta:#3fd0c8;   /* el turquesa de ATMA — su acento principal */
  --luz-menta:#5ff2d6;   /* el turquesa que quema */
  --luz-magenta:#b9a5ff; /* el lila claro de los remates */

  --halo:rgba(122,78,255,.55);
  --halo-frio:rgba(63,208,200,.4);

  --bien:#3ecf8e;
  --ojo:#e0b843;
  --mal:#f0554d;

  /* Series de la gráfica — validadas contra el fondo: banda de luminosidad,
     croma mínimo, separación para daltonismo (ΔE 25+) y contraste */
  --serie-general:#c08a1e;
  --serie-prevalente:#4f7dff;

  /* Las de la marca. Sora para los titulares —geométrica, con carácter— y
     Jost para el texto, que la app ya compartía con ellos. La serif que había
     antes (Playfair) no aparece en ningún sitio de ATMA. */
  --display:'Sora', ui-sans-serif, system-ui, sans-serif;
  --texto:'Jost', ui-sans-serif, system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;

  --curva:cubic-bezier(.22,.61,.36,1);
  --curva-suave:cubic-bezier(.4,0,.2,1);
}

/* Quien prefiera menos movimiento, que lo tenga. La atmósfera se queda
   quieta y el panel sigue funcionando igual. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

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

/* `hidden` tiene que ocultar de verdad.
   El navegador lo aplica como `display:none`, pero CUALQUIER regla nuestra con
   `display` lo pisa —y aquí había varias—. El resultado: elementos "ocultos"
   que seguían ocupando sitio y descuadrando la pantalla, y un botón que se
   veía cuando no debía. Con `!important` no hay forma de que se escape. */
[hidden]{ display:none !important }
html{scroll-behavior:smooth}

body{
  background:var(--plano-0);
  color:var(--tinta);
  font-family:var(--texto);
  font-weight:300;
  font-size:15px;
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Grano finísimo sobre todo: le quita el plástico a los degradados */
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.022; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:var(--luz-fria); text-decoration:none}
a:hover{color:#7a9bff}
::selection{background:rgba(139,110,240,.3); color:#fff}

/* ── El haz de luz ──────────────────────────────────────────────────────
   El elemento gráfico de la casa: el cono de la portada del reporte,
   recreado en CSS para poder ponerlo en cualquier pantalla. */
.haz{
  position:absolute; left:50%; top:-14%;
  transform:translateX(-50%);
  width:min(62vw, 700px); height:150%;
  background:linear-gradient(180deg,
    rgba(255,255,255,.5) 0%,
    rgba(160,125,250,.30) 16%,
    rgba(105,80,215,.13) 46%,
    transparent 82%);
  clip-path:polygon(49.5% 0, 50.5% 0, 100% 100%, 0 100%);
  filter:blur(24px);
  pointer-events:none;
}

/* ═══ Pantallas de acceso ═══════════════════════════════════════════════ */

.acceso{
  position:relative; overflow:hidden;
  min-height:100vh; display:grid; place-items:center; padding:28px;
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(90,66,190,.26) 0%, transparent 62%),
    radial-gradient(70% 45% at 84% 96%, rgba(52,78,190,.20) 0%, transparent 66%),
    var(--plano-0);
}

.tarjeta-acceso{
  position:relative; z-index:2;
  width:100%; max-width:410px;
  background:linear-gradient(168deg, rgba(22,27,46,.90), rgba(10,12,24,.95));
  border:1px solid var(--linea);
  border-radius:20px;
  padding:44px 38px 38px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  animation:surgir .7s var(--curva) both;
}

@keyframes surgir{
  from{opacity:0; transform:translateY(14px) scale(.985)}
  to{opacity:1; transform:none}
}

/* ── La marca ───────────────────────────────────────────────────────────
   Las lambdas en vez de las A vienen del logo original. El interletrado
   ancho es lo que la hace reconocible: no se toca. */
.marca{text-align:center}
.marca .sobre{
  display:block; font-size:8.5px; letter-spacing:.5em; text-transform:uppercase;
  color:var(--tinta-tenue); margin-bottom:9px;
}
.marca .logo{
  display:block; font-size:23px; letter-spacing:.5em; font-weight:400;
  color:var(--tinta); text-indent:.5em;   /* compensa el interletrado final */
}

.tarjeta-acceso .marca{margin-bottom:30px}
.tarjeta-acceso h1{
  font-family:var(--display); font-size:27px; font-weight:600;
  text-align:center; line-height:1.2; margin-bottom:9px;
}
.tarjeta-acceso .entradilla{
  text-align:center; color:var(--tinta-media); font-size:14px;
  line-height:1.55; margin-bottom:28px;
}

/* ═══ Formularios ═══════════════════════════════════════════════════════ */

label{
  display:block; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--tinta-tenue); margin-bottom:8px;
}

input, textarea, select{
  width:100%;
  background:var(--plano-1);
  border:1px solid var(--linea);
  border-radius:11px;
  padding:12px 14px;
  color:var(--tinta);
  font-family:inherit; font-size:15px; font-weight:300;
  transition:border-color .18s var(--curva), background .18s var(--curva);
}
input::placeholder, textarea::placeholder{color:#5a5872}
input:hover, textarea:hover, select:hover{border-color:var(--linea-viva)}
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--luz); background:var(--plano-2);
  box-shadow:0 0 0 3px rgba(139,110,240,.13);
}
textarea{min-height:104px; resize:vertical; line-height:1.62}

.campo{margin-bottom:19px}
.pista{font-size:12.5px; color:var(--tinta-tenue); margin-top:7px; line-height:1.5}

button{
  font-family:inherit; font-size:14.5px; font-weight:400;
  border:none; border-radius:11px; padding:12px 22px;
  cursor:pointer; transition:all .18s var(--curva);
}
button:disabled{opacity:.45; cursor:not-allowed}

.btn-luz{
  background:linear-gradient(135deg, #6d4fe0, #4a63e8);
  color:#fff; width:100%; letter-spacing:.01em;
  box-shadow:0 8px 24px -10px rgba(109,79,224,.7);
}
.btn-luz:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 12px 30px -10px rgba(109,79,224,.85);
}
.btn-suave{background:var(--plano-3); color:var(--tinta); border:1px solid var(--linea)}
.btn-suave:hover:not(:disabled){border-color:var(--linea-viva); background:#1a2038}

.nota{
  border-radius:12px; padding:13px 16px; font-size:13.5px;
  line-height:1.55; margin-bottom:19px; border:1px solid;
}
.nota.mal{background:#25100f; border-color:#5c2724; color:#ffb8b2}
.nota.bien{background:#0d2a20; border-color:#1e5340; color:#8ee8c0}
.nota.ojo{background:#231c08; border-color:#4d3d13; color:#f2d68e}

/* ═══ Estructura de la aplicación ═══════════════════════════════════════ */

.app{display:grid; grid-template-columns:252px 1fr; min-height:100vh}

/* ── Barra lateral: la app por módulos ─────────────────────────────────── */
aside{
  background:linear-gradient(180deg, var(--plano-1), var(--plano-0));
  border-right:1px solid var(--linea);
  display:flex; flex-direction:column;
  padding:26px 0 0;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
aside .marca{padding:0 24px 8px; text-align:left}
aside .marca .logo{font-size:16px; letter-spacing:.42em}
aside .marca .sobre{font-size:7.5px; letter-spacing:.42em; margin-bottom:6px}

/* Un módulo es un bloque con nombre. Sumar módulos es añadir bloques. */
.modulo{margin-top:26px}
.modulo-nombre{
  display:flex; align-items:center; gap:9px;
  padding:0 24px 10px;
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-tenue);
}
.modulo-nombre::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, var(--linea), transparent);
}
.modulo.pronto .modulo-nombre{color:#4d4b63}

nav a{
  display:flex; align-items:center; gap:10px;
  padding:10px 24px; color:var(--tinta-media);
  font-size:14.5px; cursor:pointer;
  border-left:2px solid transparent;
  transition:all .16s var(--curva);
}
nav a:hover{color:var(--tinta); background:rgba(255,255,255,.035)}
nav a.aqui{
  color:var(--tinta); border-left-color:var(--luz);
  background:linear-gradient(90deg, rgba(139,110,240,.12), transparent);
}
nav a.dormido{color:#4d4b63; cursor:default}
nav a.dormido:hover{background:none; color:#4d4b63}

aside .pie{
  margin-top:auto; padding:18px 24px;
  border-top:1px solid var(--linea);
  font-size:12.5px; color:var(--tinta-media);
}
aside .pie .quien{display:block; margin-bottom:4px; color:var(--tinta)}
aside .pie a{font-size:12px; color:var(--tinta-tenue); cursor:pointer}
aside .pie a:hover{color:var(--tinta-media)}
aside .pie a.aqui{color:var(--tinta)}
aside .pie .sep{font-size:12px; color:var(--tinta-tenue); margin:0 5px}

main{min-width:0; padding-bottom:80px}
/* El chat es la excepción: ocupa el alto exacto de la ventana, así que el
   relleno de abajo lo empujaba fuera y dejaba el compositor medio cortado. */
main:has(.chat){
  padding-bottom:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column;
}

/* ── Cabecera de la vista ──────────────────────────────────────────────── */
.barra{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:17px 34px; border-bottom:1px solid var(--linea);
  background:rgba(5,6,16,.7); backdrop-filter:blur(14px);
  position:sticky; top:0; z-index:20;
}
.barra .donde{display:flex; align-items:baseline; gap:10px; min-width:0}
.barra .modulo-actual{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-tenue); white-space:nowrap;
}
.barra .modulo-actual::after{content:' /'; color:var(--linea-viva)}
.barra h1{font-size:15px; font-weight:400; white-space:nowrap}

/* ── Portada de cada vista ─────────────────────────────────────────────── */
.portada{
  position:relative; overflow:hidden;
  padding:44px 34px 40px;
  border-bottom:1px solid var(--linea);
  background:
    radial-gradient(80% 100% at 22% 0%, rgba(72,54,160,.24) 0%, transparent 64%),
    radial-gradient(60% 90% at 92% 100%, rgba(46,68,170,.18) 0%, transparent 62%),
    var(--plano-1);
}
.portada > *{position:relative; z-index:2}
.portada .encima{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tinta-tenue); margin-bottom:12px;
  animation:entrar .55s var(--curva) both;
}
.portada h2{
  font-family:var(--display); font-size:clamp(26px, 3.4vw, 36px);
  font-weight:600; line-height:1.12; letter-spacing:-.012em;
  margin-bottom:10px;
  animation:entrar .55s .06s var(--curva) both;
}
.portada .bajo{
  color:var(--tinta-media); font-size:14.5px; max-width:62ch;
  animation:entrar .55s .12s var(--curva) both;
}

@keyframes entrar{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:none}
}

/* ── Zonas y bloques ──────────────────────────────────────────────────── */
.zona{padding:30px 34px}
.zona + .zona{padding-top:0}

.titulo-zona{font-family:var(--display); font-size:20px; font-weight:600; margin-bottom:5px}
.sub-zona{color:var(--tinta-media); font-size:13.5px; margin-bottom:20px; max-width:70ch}

.bloque{
  background:var(--plano-2); border:1px solid var(--linea);
  border-radius:16px; padding:26px 28px; margin-bottom:20px;
}
.bloque-cabeza{margin-bottom:22px; padding-bottom:17px; border-bottom:1px solid var(--linea)}
.bloque-cabeza h3{font-family:var(--display); font-size:19px; font-weight:600; margin-bottom:4px}
.bloque-cabeza p{color:var(--tinta-media); font-size:13px; margin:0}

.pareja{display:grid; grid-template-columns:1fr 1fr; gap:19px}
@media (max-width:680px){ .pareja{grid-template-columns:1fr} }

/* ── Tarjetas de dato ─────────────────────────────────────────────────── */
.tira{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

.dato{
  position:relative; overflow:hidden;
  background:var(--plano-2); border:1px solid var(--linea);
  border-radius:15px; padding:19px 21px;
  transition:border-color .2s var(--curva);
}
.dato:hover{border-color:var(--linea-viva)}
.dato .rotulo{
  font-size:9.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--tinta-tenue); margin-bottom:11px;
}
.dato .cifra{
  font-family:var(--display); font-size:33px; font-weight:600;
  line-height:1; letter-spacing:-.02em;
}
.dato .cifra.oro{color:var(--oro)}
.dato .al-pie{color:var(--tinta-media); font-size:12.5px; margin-top:7px}

.dato.viva{
  background:linear-gradient(155deg, rgba(38,30,72,.85), var(--plano-2));
  border-color:#2f2757;
}
.dato.viva::before{
  content:''; position:absolute; right:-30%; top:-60%;
  width:70%; height:170%;
  background:radial-gradient(circle, rgba(232,199,137,.13) 0%, transparent 65%);
}

/* ── Insignias ────────────────────────────────────────────────────────── */
.sello{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; letter-spacing:.02em;
  padding:4px 11px; border-radius:99px;
  border:1px solid var(--linea); color:var(--tinta-media);
  white-space:nowrap;
}
.sello.si{color:var(--bien); border-color:#1e5340; background:#0d2a20}
.sello.ojo{color:var(--ojo); border-color:#4d3d13; background:#231c08}
.sello.no{color:#ffb8b2; border-color:#5c2724; background:#25100f}
.sello.oro{color:var(--oro); border-color:var(--oro-hondo); background:#211a0c}

/* ── Vacíos ───────────────────────────────────────────────────────────── */
.nada{
  padding:52px 32px; text-align:center;
  color:var(--tinta-media); font-size:14px; line-height:1.7;
  border:1px dashed var(--linea); border-radius:16px;
}
.nada strong{display:block; color:var(--tinta); font-weight:400; margin-bottom:6px}

/* ── Tablas ───────────────────────────────────────────────────────────── */
.marco-tabla{
  border:1px solid var(--linea); border-radius:15px;
  overflow:hidden; background:var(--plano-2);
}
.marco-tabla > div{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{
  text-align:left; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinta-tenue); font-weight:400;
  padding:13px 14px; background:var(--plano-3);
  border-bottom:1px solid var(--linea); white-space:nowrap;
}
td{padding:14px; border-bottom:1px solid rgba(31,37,64,.6); vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .14s}
tbody tr:hover{background:rgba(255,255,255,.022)}

code{
  background:rgba(0,0,0,.42); padding:2px 7px; border-radius:6px;
  font-size:12.5px; font-family:ui-monospace, SFMono-Regular, monospace;
  color:var(--tinta-media); word-break:break-all;
}

/* ═══ Módulos en el inicio ══════════════════════════════════════════════ */

.rejilla-modulos{display:grid; gap:19px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.tarjeta-modulo{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--plano-3), var(--plano-1));
  border:1px solid var(--linea); border-radius:18px;
  padding:28px 26px 24px;
  cursor:pointer; transition:all .24s var(--curva);
  animation:entrar .6s var(--curva) both;
}
.tarjeta-modulo:hover{
  transform:translateY(-3px); border-color:#343d68;
  box-shadow:0 22px 50px -24px rgba(0,0,0,.85);
}
.tarjeta-modulo::before{
  content:''; position:absolute; left:50%; top:-70%;
  transform:translateX(-50%);
  width:64%; height:150%;
  background:linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(150,118,245,.16) 22%, transparent 72%);
  clip-path:polygon(48.5% 0, 51.5% 0, 100% 100%, 0 100%);
  filter:blur(16px); opacity:.5;
  transition:opacity .3s var(--curva);
}
.tarjeta-modulo:hover::before{opacity:.9}
.tarjeta-modulo > *{position:relative; z-index:2}

.tarjeta-modulo .orden{
  font-family:var(--display); font-size:12px; color:var(--oro);
  letter-spacing:.1em; margin-bottom:14px;
}
.tarjeta-modulo h3{
  font-family:var(--display); font-size:23px; font-weight:600;
  line-height:1.2; margin-bottom:9px;
}
.tarjeta-modulo p{color:var(--tinta-media); font-size:13.5px; line-height:1.6; margin-bottom:17px}
.tarjeta-modulo .abrir{
  font-size:13px; color:var(--luz-fria);
  display:inline-flex; align-items:center; gap:7px;
}
.tarjeta-modulo:hover .abrir{gap:11px}
.tarjeta-modulo .abrir span{transition:all .2s var(--curva)}

/* El módulo que todavía no existe: se ve, pero apagado */
.tarjeta-modulo.pronto{
  cursor:default; opacity:.5;
  background:var(--plano-1); border-style:dashed;
}
.tarjeta-modulo.pronto::before{display:none}
.tarjeta-modulo.pronto:hover{transform:none; border-color:var(--linea); box-shadow:none}
.tarjeta-modulo.pronto .orden{color:var(--tinta-tenue)}

/* ═══ Gráfica ═══════════════════════════════════════════════════════════ */

.marco-grafica{
  position:relative;
  background:rgba(8,5,24,.72); backdrop-filter:blur(16px);
  border:1px solid var(--linea);
  border-radius:16px; padding:24px;
}
.leyenda{display:flex; gap:22px; margin-bottom:18px; flex-wrap:wrap}
.leyenda span{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--tinta-media)}
.leyenda i{width:15px; height:3px; border-radius:2px; display:inline-block}

.globo{
  position:absolute; pointer-events:none;
  background:rgba(5,6,16,.96); border:1px solid var(--linea-viva);
  border-radius:11px; padding:10px 13px;
  font-size:12.5px; line-height:1.65;
  opacity:0; transition:opacity .13s; z-index:10; white-space:nowrap;
  box-shadow:0 12px 34px rgba(0,0,0,.7);
}
.globo.ver{opacity:1}
.globo b{font-weight:400; color:var(--tinta)}

/* ═══ El reporte del alumno ═════════════════════════════════════════════ */

.anillo-nivel{display:flex; align-items:center; gap:26px; flex-wrap:wrap}
.anillo{position:relative; width:132px; height:132px; flex:none}
.anillo svg{transform:rotate(-90deg)}
.anillo .centro{position:absolute; inset:0; display:grid; place-items:center; text-align:center}
.anillo .centro .n{
  font-family:var(--display); font-size:34px; font-weight:600;
  line-height:1; color:var(--oro);
}
.anillo .centro .de{font-size:10px; color:var(--tinta-tenue); letter-spacing:.1em}
.nivel-texto h4{font-family:var(--display); font-size:26px; font-weight:600; margin-bottom:6px}
.nivel-texto p{color:var(--tinta-media); font-size:13.5px; max-width:44ch}

/* Reproductor del audio del mes */
.audio-mes{
  background:linear-gradient(150deg, rgba(36,29,66,.9), var(--plano-2));
  border:1px solid #2c2553; border-radius:16px; padding:24px 26px;
}
.audio-mes .quien-habla{display:flex; align-items:center; gap:11px; margin-bottom:16px; flex-wrap:wrap}
.audio-mes audio{
  width:100%; height:40px; border-radius:10px;
  filter:invert(.92) hue-rotate(180deg) saturate(.7);
}

/* Secciones del reporte escrito */
.seccion-reporte{padding:22px 0; border-bottom:1px solid var(--linea)}
.seccion-reporte:last-child{border-bottom:none; padding-bottom:0}
.seccion-reporte .cual{
  font-size:9.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--tinta-tenue); margin-bottom:8px;
}
.seccion-reporte .nivel{
  font-family:var(--display); font-size:19px; font-weight:600;
  color:var(--oro); margin-bottom:11px;
}
.seccion-reporte p{color:var(--tinta-media); font-size:14px; line-height:1.72; margin-bottom:11px}
.seccion-reporte p:last-child{margin-bottom:0}

/* ═══ Áreas como fichas ═════════════════════════════════════════════════ */

.fichas{display:flex; flex-wrap:wrap; gap:10px; margin-top:5px}
.ficha{position:relative; cursor:pointer; margin:0; text-transform:none; letter-spacing:0}
.ficha input{position:absolute; opacity:0; width:0; height:0}
.ficha span{
  display:block; padding:10px 18px; border-radius:99px;
  border:1px solid var(--linea); background:var(--plano-1);
  font-size:14px; color:var(--tinta-media);
  transition:all .16s var(--curva);
}
.ficha:hover span{border-color:var(--linea-viva); color:var(--tinta)}
.ficha.puesta span{
  border-color:var(--luz); color:#fff;
  background:linear-gradient(135deg, rgba(109,79,224,.28), rgba(74,99,232,.18));
  box-shadow:0 0 0 3px rgba(139,110,240,.1);
}
.ficha input:focus-visible + span{outline:2px solid var(--luz); outline-offset:3px}

.acciones{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:4px}
.acciones button{max-width:270px}
.acciones .pista{margin:0}

/* ═══ Errores ═══════════════════════════════════════════════════════════ */

.caso{
  background:var(--plano-2); border:1px solid var(--linea);
  border-left:3px solid var(--linea);
  border-radius:14px; padding:20px 22px; margin-bottom:15px;
}
.caso.corta{border-left-color:var(--mal)}
.caso.avisa{border-left-color:var(--ojo)}

.caso-arriba{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:11px}
.caso-arriba b{font-weight:400; font-size:15px}
.caso-arriba .flojo{font-size:12px; color:var(--tinta-tenue)}
.caso .porque{font-size:13.5px; line-height:1.6; margin-bottom:7px}
.caso .como{font-size:12.5px; color:var(--tinta-media); margin-bottom:15px}

.arreglo-tel{display:flex; gap:9px; flex-wrap:wrap}
.arreglo-tel input{font-size:14px; padding:9px 12px; min-width:200px; flex:1}
.arreglo-tel button{white-space:nowrap; padding:9px 14px; font-size:13px}

.otras{
  margin-top:15px; padding-top:15px; border-top:1px solid var(--linea);
  display:flex; flex-direction:column; gap:10px;
}
.otra{
  display:flex; align-items:center; gap:13px; flex-wrap:wrap;
  font-size:13.5px; background:var(--plano-1);
  border-radius:11px; padding:11px 14px;
}
.otra .flojo{color:var(--tinta-tenue); font-size:12px; flex:1}
.otra button{padding:8px 13px; font-size:12.5px; white-space:nowrap}

/* Casilla del área en la tabla de calibraciones */
.celda-area{display:flex; flex-direction:column; gap:6px}
.etiqueta-area{
  font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--oro); white-space:nowrap;
}

/* ═══ Teléfono ══════════════════════════════════════════════════════════ */

@media (max-width:860px){
  .app{grid-template-columns:1fr}
  aside{
    position:static; height:auto; flex-direction:row; align-items:center;
    overflow-x:auto; padding:14px 0; gap:8px;
  }
  aside .marca, aside .pie, .modulo-nombre{display:none}
  aside .modulo{margin:0; display:flex}
  nav{display:flex}
  nav a{border-left:none; border-bottom:2px solid transparent; padding:8px 15px; white-space:nowrap}
  nav a.aqui{border-bottom-color:var(--luz); background:none}
  .barra, .portada, .zona{padding-left:20px; padding-right:20px}
  .anillo-nivel{gap:18px}
}

/* Los dos botones de cada fila del panel: guardar la calibración y enviarle
   el reporte a ese alumno solo. En pantalla angosta se apilan. */
.acciones-fila {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.acciones-fila .btn-suave {
  padding: 8px 14px;
  font-size: 13px;
  white-space: nowrap;
}

/* El de enviar pesa más que el de guardar: es el que no tiene vuelta atrás. */
.acciones-fila .enviar-uno {
  border-color: color-mix(in oklab, var(--oro) 45%, transparent);
  color: var(--oro);
}

.acciones-fila .enviar-uno:hover:not(:disabled) {
  background: color-mix(in oklab, var(--oro) 12%, transparent);
  border-color: var(--oro);
}

/* ═══════════════════════════════════════════════════════════════════════
   LA ATMÓSFERA
   ═══════════════════════════════════════════════════════════════════════

   El fondo deja de ser un color y pasa a ser un lugar: nebulosa que respira,
   campo de estrellas y el haz de luz. Todo en CSS y sobre pseudo-elementos
   fijos, así que no añade ni un nodo al DOM ni una petición de red.

   Regla que sostiene esto: la atmósfera NUNCA compite con el contenido.
   Vive detrás (z-index negativo), se mueve muy lento y con poca opacidad.
   Donde hay que leer o cargar datos, manda el dato.
   ═══════════════════════════════════════════════════════════════════════ */

body{
  background:var(--plano-0);
  position:relative;
  isolation:isolate;
}

/* Capa 1 — EL FONDO REAL.
   Es la imagen de marca, no un degradado imitándola: pirámide de cristal,
   rayos y suelo reflectante. Pesa 62 KB en WebP y se queda fija mientras la
   app hace scroll, así que el lugar no se mueve, se mueve el contenido.
   Encima va un velo oscuro, porque sobre la imagen a plena luz no se lee
   una tabla de calibraciones. */
body::before{
  content:'';
  position:fixed; inset:-4%;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(3,1,9,.55) 0%, rgba(3,1,9,.66) 46%, rgba(3,1,9,.86) 100%),
    url('/img/panel.webp') center 30% / cover no-repeat;
  animation:fondo-respira 38s ease-in-out infinite alternate;
}

/* Un acercamiento lentísimo. No se ve moverse; se siente vivo. */
@keyframes fondo-respira{
  from{transform:scale(1)   translate3d(0,0,0)}
  to  {transform:scale(1.07) translate3d(0,-1.1%,0)}
}

@media (max-width:820px){
  body::before{background-image:
    linear-gradient(180deg, rgba(3,1,9,.68) 0%, rgba(3,1,9,.80) 48%, rgba(3,1,9,.93) 100%),
    url('/img/panel-mv.webp')}
}

/* Capa 2 — el polvo de estrellas. Son sombras de un punto: sin imágenes.
   Dos planos a velocidades distintas dan sensación de profundidad. */
body::after{
  content:'';
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.58;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 28% 62%, rgba(190,215,255,.75), transparent),
    radial-gradient(1.6px 1.6px at 47% 31%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 63% 74%, rgba(200,180,255,.8), transparent),
    radial-gradient(1.3px 1.3px at 78% 22%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 88% 58%, rgba(170,225,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 36% 88%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 8% 46%, rgba(220,200,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 70% 8%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 94% 84%, rgba(190,215,255,.65), transparent);
  background-size:100% 100%;
  animation:respirar-estrellas 9s ease-in-out infinite alternate;
}

@keyframes respirar-estrellas{
  from{opacity:.36}
  to  {opacity:.7}
}

/* ── El haz ──────────────────────────────────────────────────────────────
   La columna de luz de las referencias. Se pone donde haga falta con
   .con-haz; el pseudo-elemento hace la columna y el resplandor del pie. */
.con-haz{position:relative; overflow:hidden}

.con-haz::before{
  content:'';
  position:absolute; left:50%; top:-14%;
  width:2px; height:128%;
  transform:translateX(-50%);
  background:linear-gradient(180deg,
    transparent 0%,
    var(--luz-punta) 12%,
    #ffffff 34%,
    var(--luz-viva) 62%,
    rgba(139,92,246,.35) 88%,
    transparent 100%);
  filter:blur(.6px) drop-shadow(0 0 14px var(--halo)) drop-shadow(0 0 34px rgba(124,58,237,.5));
  opacity:.85;
  pointer-events:none;
  animation:latir-haz 4.2s ease-in-out infinite;
}

@keyframes latir-haz{
  0%,100%{opacity:.6; filter:blur(.6px) drop-shadow(0 0 12px var(--halo))}
  50%    {opacity:.95; filter:blur(.4px) drop-shadow(0 0 22px var(--halo)) drop-shadow(0 0 48px rgba(124,58,237,.55))}
}

/* ═══════════════════════════════════════════════════════════════════════
   LA PIRÁMIDE
   ═══════════════════════════════════════════════════════════════════════

   El emblema del sistema, tomado de las referencias de marca: prisma de
   cristal sobre un pedestal escalonado, con el haz saliendo de la punta.

   Es un SVG inline de un solo nodo — nada de imágenes que descargar — y
   toda la vida se la dan las animaciones de CSS. Aparece grande en la
   entrada y en miniatura como sello del panel.
   ═══════════════════════════════════════════════════════════════════════ */

.piramide{
  position:relative;
  width:clamp(190px, 34vw, 280px);
  aspect-ratio:1/1.15;
  margin:0 auto;
  display:grid; place-items:center;
  animation:piramide-entra 1.5s var(--curva) both;
}

@keyframes piramide-entra{
  from{opacity:0; transform:translateY(22px) scale(.9)}
  to  {opacity:1; transform:none}
}

/* El halo circular de las referencias, detrás del prisma */
.piramide::before{
  content:'';
  position:absolute; left:50%; top:52%;
  width:104%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(124,58,237,.34) 0%,
    rgba(67,97,255,.18) 38%,
    transparent 68%);
  filter:blur(16px);
  animation:halo-late 6s ease-in-out infinite;
  pointer-events:none;
}

@keyframes halo-late{
  0%,100%{opacity:.58; transform:translate(-50%,-50%) scale(.94)}
  50%    {opacity:1;   transform:translate(-50%,-50%) scale(1.06)}
}

.piramide svg{position:relative; z-index:2; width:100%; height:100%; overflow:visible}

/* El haz que sale de la punta hacia el infinito */
.haz-punta{
  animation:haz-punta-late 3.4s ease-in-out infinite;
  transform-origin:center bottom;
}
@keyframes haz-punta-late{
  0%,100%{opacity:.58; transform:scaleY(.92)}
  50%    {opacity:1;   transform:scaleY(1.06)}
}

/* El cuerpo de cristal: la luz interior sube y baja despacio */
.cristal-luz{animation:cristal-respira 5.5s ease-in-out infinite}
@keyframes cristal-respira{
  0%,100%{opacity:.5}
  50%    {opacity:.92}
}

/* Las aristas destellan una tras otra, no todas a la vez */
.arista{animation:arista-brilla 4.6s ease-in-out infinite}
.arista:nth-of-type(2){animation-delay:.5s}
.arista:nth-of-type(3){animation-delay:1.1s}
@keyframes arista-brilla{
  0%,100%{opacity:.45}
  50%    {opacity:1}
}

/* Los rayos ramificados de los costados */
.rayo{
  transform-origin:center;
  animation:rayo-vive 7s ease-in-out infinite;
  opacity:.35;
}
.rayo.b{animation-delay:2.3s}
.rayo.c{animation-delay:4.6s}
@keyframes rayo-vive{
  0%,86%,100%{opacity:.16}
  90%        {opacity:.75}
  93%        {opacity:.28}
  96%        {opacity:.6}
}

/* Las chispas que suben desde la base */
.chispa{animation:chispa-sube 4.8s ease-in-out infinite; opacity:0}
.chispa:nth-of-type(2){animation-delay:1.2s}
.chispa:nth-of-type(3){animation-delay:2.4s}
.chispa:nth-of-type(4){animation-delay:3.6s}
@keyframes chispa-sube{
  0%  {opacity:0; transform:translateY(0)}
  18% {opacity:.9}
  100%{opacity:0; transform:translateY(-58px)}
}

/* El sello chico: la misma pirámide en la barra superior */
.sello-piramide{
  width:26px; height:30px; flex:none;
  filter:drop-shadow(0 0 7px var(--halo));
}
.sello-piramide .cristal-luz{animation-duration:7s}

/* ── La entrada ─────────────────────────────────────────────────────────
   Deja de ser un formulario sobre un fondo y pasa a ser una portada: el
   emblema, la marca y debajo el acceso. Es lo primero que ve un alumno
   cuando abre su invitación, así que tiene que sostenerse solo. */
.acceso{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:34px; padding:44px 28px 56px;
}

.acceso-centro{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:20px;
}

.marca-grande{animation:entrar-marca 1.1s .5s var(--curva) both}
.marca-grande .sobre{font-size:9.5px; letter-spacing:.62em; margin-bottom:13px}
.marca-grande .logo{
  font-size:clamp(30px, 6.5vw, 44px); letter-spacing:.42em; font-weight:400;
  background:linear-gradient(96deg, #ffffff 0%, #d8cffd 34%, #8b9dff 64%, #22d3ee 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(139,92,246,.5));
}
.marca-grande .lema{
  display:block; margin-top:15px;
  font-size:10.5px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--tinta-media);
}
/* Los puntos que flanquean el lema, como en la portada de la marca */
.marca-grande .lema::before,
.marca-grande .lema::after{
  content:'·'; color:var(--luz); margin:0 12px; font-size:14px;
}

@keyframes entrar-marca{
  from{opacity:0; transform:translateY(16px); letter-spacing:.9em}
  to  {opacity:1; transform:none}
}

.tarjeta-acceso{
  background:linear-gradient(168deg, rgba(21,14,52,.86), rgba(8,5,24,.94));
  border:1px solid var(--linea);
  box-shadow:
    0 30px 90px -30px rgba(0,0,0,.95),
    0 0 0 1px rgba(139,92,246,.08),
    inset 0 1px 0 rgba(196,181,253,.10);
  animation:surgir .8s .3s var(--curva) both;
}

/* El borde de la tarjeta se enciende al escribir dentro */
.tarjeta-acceso:focus-within{
  border-color:var(--linea-viva);
  box-shadow:
    0 30px 90px -30px rgba(0,0,0,.95),
    0 0 34px -8px rgba(139,92,246,.35),
    inset 0 1px 0 rgba(196,181,253,.14);
  transition:border-color .4s var(--curva-suave), box-shadow .4s var(--curva-suave);
}

/* ═══════════════════════════════════════════════════════════════════════
   LA ENTRADA — el portal
   ═══════════════════════════════════════════════════════════════════════
   Acá la imagen va a plena potencia: es lo primero que ve un alumno cuando
   abre su invitación y no hay nada que leer todavía que la imagen estorbe. */

.acceso{
  position:relative; overflow:hidden;
  background:none;
}

.acceso::before{
  content:'';
  position:absolute; inset:-6%;
  z-index:0;
  background:
    radial-gradient(72% 60% at 50% 52%, rgba(3,1,9,.26) 0%, rgba(3,1,9,.72) 68%, rgba(3,1,9,.94) 100%),
    url('/img/entrada.webp') center center / cover no-repeat;
  animation:portal-acerca 26s ease-in-out infinite alternate;
}

@keyframes portal-acerca{
  from{transform:scale(1.02)}
  to  {transform:scale(1.13)}
}

/* El destello del haz de la imagen, reforzado: sube y baja como si la
   energía cargara. Va por encima de la foto y por debajo del contenido. */
.acceso::after{
  content:'';
  position:absolute; left:50%; top:0;
  width:min(52vw, 620px); height:100%;
  transform:translateX(-50%);
  z-index:1; pointer-events:none;
  background:radial-gradient(48% 62% at 50% 46%,
    rgba(167,139,250,.34) 0%,
    rgba(124,58,237,.16) 42%,
    transparent 72%);
  mix-blend-mode:screen;
  animation:portal-carga 5.2s ease-in-out infinite;
}

@keyframes portal-carga{
  0%,100%{opacity:.5}
  50%    {opacity:1}
}

@media (max-width:820px){
  .acceso::before{background-image:
    radial-gradient(72% 60% at 50% 52%, rgba(3,1,9,.30) 0%, rgba(3,1,9,.76) 68%, rgba(3,1,9,.95) 100%),
    url('/img/entrada-mv.webp')}
}

/* Con la foto detrás, el emblema dibujado sobraría: compite con la pirámide
   real. Se queda solo la marca, que es lo que la foto no trae. */
.acceso .piramide{display:none}
.acceso-centro{gap:0}

/* ── Ajustes del portal ──────────────────────────────────────────────────
   Sobre la foto, el texto fino desaparece: el haz es casi blanco justo
   detrás de donde va la marca. Se recupera con sombra, no subiendo el
   tamaño, para no romper el interletrado que hace reconocible al logo. */
.acceso .marca-grande .sobre{
  color:#cfc4f2;
  text-shadow:0 1px 14px rgba(0,0,0,.95), 0 0 26px rgba(0,0,0,.8);
}
.acceso .marca-grande .lema{
  color:#ded6f7;
  text-shadow:0 1px 14px rgba(0,0,0,.95), 0 0 26px rgba(0,0,0,.8);
}
.acceso .marca-grande .logo{
  filter:drop-shadow(0 0 26px rgba(0,0,0,.85)) drop-shadow(0 0 40px rgba(139,92,246,.45));
}

/* La tarjeta, de cristal: deja ver la pirámide por detrás en vez de taparla.
   El desenfoque mantiene legible el formulario aunque abajo haya rayos. */
.acceso .tarjeta-acceso{
  background:linear-gradient(168deg, rgba(24,16,58,.62), rgba(6,4,18,.78));
  backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  border:1px solid rgba(167,139,250,.22);
  box-shadow:
    0 40px 100px -34px rgba(0,0,0,.95),
    0 0 60px -18px rgba(124,58,237,.35),
    inset 0 1px 0 rgba(226,214,255,.16);
}
.acceso .tarjeta-acceso:focus-within{
  border-color:rgba(167,139,250,.45);
  box-shadow:
    0 40px 100px -34px rgba(0,0,0,.95),
    0 0 74px -14px rgba(139,92,246,.5),
    inset 0 1px 0 rgba(226,214,255,.22);
}

/* Los campos, translúcidos también: si son cajas negras opacas, la tarjeta
   deja de parecer cristal y vuelve a parecer un formulario pegado encima. */
.acceso input{
  background:rgba(6,4,20,.55);
  border-color:rgba(167,139,250,.20);
}
.acceso input:focus{
  background:rgba(10,6,30,.72);
  border-color:rgba(167,139,250,.55);
  box-shadow:0 0 0 3px rgba(124,58,237,.16);
}

/* ═══════════════════════════════════════════════════════════════════════
   EL INTERIOR — cristal sobre el lugar
   ═══════════════════════════════════════════════════════════════════════

   Con una foto detrás, los paneles opacos la tapan y vuelve a parecer una
   app cualquiera con un fondo pegado. La solución es que todo lo que va
   encima sea cristal: se ve el lugar a través, y el contenido se mantiene
   legible porque el desenfoque aplana lo que hay debajo.
   ═══════════════════════════════════════════════════════════════════════ */

/* La barra lateral */
.lateral, aside, nav.lateral{
  background:linear-gradient(180deg, rgba(8,5,24,.78), rgba(4,2,14,.88)) !important;
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border-right:1px solid rgba(139,92,246,.16) !important;
}

/* La barra superior */
.barra{
  background:linear-gradient(180deg, rgba(8,5,24,.80), rgba(6,3,20,.62)) !important;
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid rgba(139,92,246,.14) !important;
}

/* La portada de cada vista: acá el fondo se deja ver más, porque no hay
   datos que leer, solo el título. */
.portada{
  background:
    radial-gradient(70% 120% at 50% -10%, rgba(124,58,237,.22) 0%, transparent 62%),
    linear-gradient(180deg, rgba(8,5,24,.42), rgba(6,3,18,.74)) !important;
  border-bottom:1px solid rgba(139,92,246,.16) !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* El título de la portada, con la luz de la marca */
.portada h2{
  background:linear-gradient(96deg, #ffffff 0%, #ded5ff 46%, #a9b8ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 20px rgba(124,58,237,.35));
}

/* Bloques y tarjetas */
.bloque, .tarjeta-modulo, .tarjeta, .panel-caja{
  background:linear-gradient(168deg, rgba(21,14,52,.60), rgba(8,5,22,.74)) !important;
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid rgba(139,92,246,.16) !important;
  box-shadow:0 22px 60px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(196,181,253,.08);
  transition:border-color .45s var(--curva-suave), box-shadow .45s var(--curva-suave), transform .45s var(--curva);
}

/* Al pasar por encima, la tarjeta se enciende: el borde toma color y sale
   un resplandor. Es la misma idea del haz, aplicada al detalle. */
.tarjeta-modulo:hover{
  border-color:rgba(167,139,250,.42) !important;
  box-shadow:
    0 30px 70px -26px rgba(0,0,0,.92),
    0 0 46px -14px rgba(124,58,237,.42),
    inset 0 1px 0 rgba(196,181,253,.16);
  transform:translateY(-3px);
}

/* Tablas: el fondo detrás las haría ilegibles, así que acá el cristal es
   más cerrado. Manda el dato. */
table, .tabla, .tabla-alumnos{
  background:rgba(6,3,20,.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
thead th{
  background:rgba(21,14,52,.82) !important;
  border-bottom:1px solid rgba(139,92,246,.22) !important;
}
tbody tr{transition:background .3s var(--curva-suave)}
tbody tr:hover{background:rgba(124,58,237,.09)}

/* El botón principal: un gradiente del espectro, con resplandor propio */
.btn-luz{
  background:linear-gradient(96deg, #7c3aed 0%, #6366f1 48%, #22d3ee 130%) !important;
  border:none;
  box-shadow:0 10px 30px -10px rgba(124,58,237,.6), inset 0 1px 0 rgba(255,255,255,.22);
  transition:box-shadow .4s var(--curva-suave), transform .3s var(--curva), filter .4s;
}
.btn-luz:hover:not(:disabled){
  box-shadow:0 14px 40px -8px rgba(124,58,237,.8), 0 0 34px -6px rgba(34,211,238,.45), inset 0 1px 0 rgba(255,255,255,.3);
  transform:translateY(-1px);
  filter:brightness(1.08);
}

/* La entrada activa de la barra lateral, marcada con luz y no con relleno */
.lateral a.activo, nav a.activo, a[aria-current="page"]{
  background:linear-gradient(90deg, rgba(124,58,237,.26), transparent 88%) !important;
  box-shadow:inset 3px 0 0 var(--luz-viva);
}

/* El contenido entra en cascada, no de golpe */
.zona{animation:entrar .6s var(--curva) both}
.zona:nth-of-type(2){animation-delay:.07s}
.zona:nth-of-type(3){animation-delay:.14s}
.zona:nth-of-type(4){animation-delay:.21s}

/* La marca de la barra lateral, con el sello del prisma al lado */
.marca-barra .logo-fila{
  /* Sin `gap`: ya no hay pirámide al lado a la que separar. */
  display:flex; align-items:center; justify-content:center;
}
.marca-barra .logo{
  font-size:19px; letter-spacing:.36em; text-indent:.36em;
  background:linear-gradient(96deg, #ffffff 0%, #d5cbff 52%, #7fd7ee 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ── Donde se trabaja, manda el dato ─────────────────────────────────────
   La tabla de alumnos es donde Nico y Lucho cargan calibraciones una por
   una. Ahí el fondo deja de ser protagonista: el cristal se cierra hasta
   que las filas se lean sin esfuerzo, aunque justo detrás pase el haz. */
.marco-tabla{
  background:rgba(5,3,16,.88) !important;
  backdrop-filter:blur(20px) saturate(1.1);
  -webkit-backdrop-filter:blur(20px) saturate(1.1);
  border:1px solid rgba(139,92,246,.18) !important;
  box-shadow:0 24px 64px -30px rgba(0,0,0,.95);
}
.marco-tabla table, .marco-tabla .tabla{background:transparent}

/* Las tarjetas de cifras: el número es lo que se viene a mirar */
.tarjeta, .metrica, .cifra-caja{
  background:linear-gradient(168deg, rgba(23,15,56,.72), rgba(7,4,20,.82)) !important;
}

/* El formulario del alumno y las cajas de texto largo, también cerrados */
textarea, .caja-texto, .respuesta{
  background:rgba(5,3,16,.78) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   LOS RAYOS — responden al cursor
   ═══════════════════════════════════════════════════════════════════════
   Un lienzo a pantalla completa, detrás del contenido. Todo el dibujo lo
   hace `rayos.js`; acá solo se le da el sitio y el modo de mezcla, que es
   lo que hace que la luz se sume a la foto en vez de taparla. */

.rayos{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:1;
  pointer-events:none;
  mix-blend-mode:screen;
  display:block;
}

/* Sin cursor no hay efecto que valga, y los trazos cuestan batería. */
@media (max-width:700px), (hover:none){
  .rayos{display:none}
}

/* El aviso del correo de compra. Va marcado, no como pista suelta: es la
   causa número uno de "no puedo entrar" en cualquier plataforma vendida por
   fuera, y el alumno tiene que leerlo antes de escribir nada. */
.aviso-correo{
  margin-top:22px;
  padding:11px 14px;
  text-align:center;
  font-size:12.5px;
  line-height:1.5;
  color:#e5dcff;
  background:linear-gradient(96deg, rgba(124,58,237,.20), rgba(34,211,238,.10));
  border:1px solid rgba(167,139,250,.30);
  border-radius:11px;
}

/* ── Mapa de progreso ───────────────────────────────────────────────────
   Las once áreas contra la MISMA regla. El ancho del rótulo y el del dato
   son fijos para que todas las pistas empiecen y terminen igual: si cada
   fila tuviera su propia escala, comparar dos áreas sería mentira. */
:root{ --rotulo-mapa:170px; --dato-mapa:150px }

.marco-mapa{
  border:1px solid var(--linea); border-radius:16px;
  background:rgba(8,5,24,.72); backdrop-filter:blur(16px);
  padding:26px 24px 20px;
}

/* La regla: solo cuatro marcas. Más números serían ruido sobre un dato
   que ya lleva su nivel escrito al lado. */
.regla-mapa{
  position:relative; height:30px; margin-bottom:14px;
  margin-left:var(--rotulo-mapa); margin-right:var(--dato-mapa);
  border-bottom:1px solid var(--linea);
}
.regla-mapa .marca-regla{
  position:absolute; top:0; transform:translateX(-50%);
  font-size:10.5px; letter-spacing:.1em; color:var(--tinta-tenue);
  text-align:center; white-space:nowrap;
}
.regla-mapa .marca-regla i{
  display:block; font-style:normal; font-size:9px;
  letter-spacing:.12em; text-transform:uppercase; opacity:.62; margin-top:2px;
}
.regla-mapa .marca-regla.umbral{ color:var(--tinta-media) }

.mapa{ display:flex; flex-direction:column }

.fila-mapa{
  display:grid; grid-template-columns:var(--rotulo-mapa) 1fr var(--dato-mapa);
  align-items:center; gap:0;
  padding:9px 0; border-bottom:1px solid rgba(36,26,77,.5);
}
.fila-mapa:last-child{ border-bottom:none }

.area-nombre{ font-size:13.5px; color:var(--tinta); padding-right:16px; line-height:1.3 }
.area-nombre .cuando{
  display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-tenue); margin-top:3px;
}

/* La pista: las bandas de nivel de fondo, muy tenues —son el contexto, no
   el dato— y encima la marca del valor. */
.pista-mapa{ position:relative; height:26px }
.pista-mapa .bandas{
  position:absolute; inset:7px 0; border-radius:3px; opacity:.24;
}
.pista-mapa .rail-vacio{
  position:absolute; inset:12px 0; border-radius:2px;
  background:repeating-linear-gradient(90deg,
    var(--linea) 0 5px, transparent 5px 11px);
  opacity:.75;
}
/* El 200 cruza todas las filas: es la única línea que significa algo por sí sola. */
.pista-mapa .umbral{
  position:absolute; top:0; bottom:0; width:1px;   /* el left lo pone el guion */
  background:var(--tinta-tenue); opacity:.5;
}
.pista-mapa .hasta{
  position:absolute; inset:7px auto 7px 0; border-radius:3px;
  background:linear-gradient(90deg, transparent, rgba(139,92,246,.16));
}
.pista-mapa .marca{
  position:absolute; top:50%; width:11px; height:11px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--tono); border:1px solid rgba(255,255,255,.55);
  box-shadow:0 0 0 3px rgba(3,1,9,.75), 0 0 14px 2px var(--tono);
}

.area-dato{ text-align:right; padding-left:16px; white-space:nowrap }
.area-dato .cifra-area{
  font-family:var(--display); font-size:19px; color:var(--tinta); font-weight:600;
}
.area-dato .nivel-area{
  display:block; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--tinta-tenue); margin-top:1px;
}
.area-dato .delta{
  display:inline-block; margin-top:4px; font-size:10.5px;
  letter-spacing:.06em; color:var(--tinta-tenue);
}
.area-dato .delta.sube{ color:var(--bien) }
.area-dato .delta.baja{ color:var(--ojo) }

.fila-mapa.vacia .area-nombre{ color:var(--tinta-tenue) }
.area-dato .calibrar{
  font-size:11.5px; letter-spacing:.06em; color:var(--tinta-tenue);
  cursor:pointer; border-bottom:1px solid transparent;
}
.area-dato .calibrar:hover{ color:var(--luz-punta); border-bottom-color:var(--luz-punta) }

.lectura-mapa{ margin-top:26px }
.lectura-mapa h4{
  font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--tinta-tenue); margin-bottom:11px; font-weight:400;
}
.lectura-mapa ul{ list-style:none; display:flex; flex-direction:column; gap:9px }
.lectura-mapa li{
  font-size:13.5px; color:var(--tinta-media); line-height:1.55;
  padding-left:16px; position:relative; max-width:78ch;
}
.lectura-mapa li::before{
  content:''; position:absolute; left:0; top:9px;
  width:4px; height:4px; border-radius:50%; background:var(--luz); opacity:.7;
}
.lectura-mapa b{ color:var(--tinta); font-weight:400 }

/* En móvil el rótulo va arriba: 170px de nombre no caben al lado de la pista. */
@media (max-width:760px){
  .regla-mapa{ margin-left:0; margin-right:0 }
  .fila-mapa{ grid-template-columns:1fr auto; gap:4px 12px; padding:13px 0 }
  .area-nombre{ padding-right:0 }
  .area-dato{ padding-left:0 }
  .pista-mapa{ grid-column:1 / -1 }
}

/* ── La tira de meses ───────────────────────────────────────────────────
   El ritmo del programa: un formulario al mes. Ocho casillas fijas, para
   que la tira no cambie de tamaño según cuánta historia tenga cada uno. */
.tira-meses{
  border:1px solid var(--linea); border-radius:14px;
  background:rgba(8,5,24,.6); backdrop-filter:blur(14px);
  padding:16px 20px 18px; margin-bottom:26px;
}
.tira-meses-cabeza{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--tinta-tenue); margin-bottom:14px;
}
.tira-meses .meses{ display:grid; grid-template-columns:repeat(8,1fr); gap:8px }

.mes-casilla{ display:flex; flex-direction:column; align-items:center; gap:7px; cursor:default }
.mes-casilla .mes-punto{
  width:100%; height:4px; border-radius:2px; background:var(--linea);
  transition:background .3s var(--curva);
}
.mes-casilla .mes-nombre{
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-tenue);
}

/* Se distingue por color Y por relleno: el color solo dejaría fuera a quien
   no lo diferencia. */
.mes-casilla.reporte   .mes-punto{ background:var(--oro); box-shadow:0 0 10px rgba(232,199,137,.45) }
.mes-casilla.calibrado .mes-punto{ background:var(--luz) }
.mes-casilla.esperando .mes-punto{
  background:repeating-linear-gradient(90deg, var(--luz) 0 4px, transparent 4px 8px);
}
.mes-casilla.vacio     .mes-punto{ background:var(--linea); opacity:.6 }
.mes-casilla.ahora     .mes-punto{
  background:var(--luz-punta); box-shadow:0 0 12px rgba(34,211,238,.5);
}
.mes-casilla.hoy .mes-nombre{ color:var(--tinta) }
.mes-casilla.reporte .mes-nombre{ color:var(--tinta-media) }

@media (max-width:640px){
  .tira-meses .meses{ grid-template-columns:repeat(4,1fr); gap:10px 8px }
}

/* ── El rail del mes ────────────────────────────────────────────────────
   La misma pieza del mapa con varias marcas encima: general, prevalente y
   reto sobre la MISMA regla. Sustituye al anillo de "310 sobre 700", que
   llenaba media circunferencia sin decir nada: Hawkins no es un porcentaje. */
.rail-mes .regla-rail{
  position:relative; height:30px; margin-bottom:12px;
  border-bottom:1px solid var(--linea);
}
.rail-mes .regla-rail .marca-regla{
  position:absolute; top:0; transform:translateX(-50%);
  font-size:10.5px; letter-spacing:.1em; color:var(--tinta-tenue);
  text-align:center; white-space:nowrap;
}
.rail-mes .regla-rail .marca-regla i{
  display:block; font-style:normal; font-size:9px;
  letter-spacing:.12em; text-transform:uppercase; opacity:.62; margin-top:2px;
}
.rail-mes .regla-rail .marca-regla.umbral{ color:var(--tinta-media) }

.pista-mapa.alta{ height:40px }
.pista-mapa.alta .bandas{ inset:13px 0 }

/* Las tres marcas se distinguen por FORMA además de por posición: si dos
   valores caen cerca, el color solo no las separa. */
.marca.prevalente{ width:9px; height:9px; border-radius:2px; transform:translate(-50%,-50%) rotate(45deg) }
.marca.reto{ background:transparent; border:2px solid var(--tono); width:13px; height:13px }

.leyenda-rail{
  display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:14px;
  font-size:11.5px; color:var(--tinta-tenue); letter-spacing:.05em;
}
.leyenda-rail .pieza{ display:inline-flex; align-items:center; gap:7px }
.leyenda-rail b{ color:var(--tinta); font-weight:400 }
.leyenda-rail .punto{
  width:9px; height:9px; border-radius:50%; background:var(--tono);
  box-shadow:0 0 8px 1px var(--tono);
}
.leyenda-rail .punto.prevalente{ border-radius:2px; transform:rotate(45deg) }
.leyenda-rail .punto.reto{ background:transparent; border:2px solid var(--tono); box-shadow:none }

/* ── Los meses anteriores ───────────────────────────────────────────────
   Era una tabla con un reproductor metido en una celda. Como lista respira,
   y en móvil no obliga a desplazarse en horizontal. */
.lista-meses{ display:flex; flex-direction:column; gap:2px }
.mes-pasado{
  display:grid; grid-template-columns:130px 1fr auto; align-items:center; gap:18px;
  padding:13px 0; border-bottom:1px solid rgba(36,26,77,.5);
}
.mes-pasado:last-child{ border-bottom:none }
.mes-que{ display:flex; flex-direction:column; gap:3px }
.mes-que .mes-cual{ font-size:13.5px; color:var(--tinta) }
.mes-que .mes-voz{
  font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--tinta-tenue);
}
.mes-pasado audio{ height:34px; width:100%; max-width:340px }
.mes-pdf{ font-size:12px; letter-spacing:.05em; color:var(--tinta-tenue); white-space:nowrap }
.mes-pdf:hover{ color:var(--luz-punta) }

/* ── Los retos, mes a mes ───────────────────────────────────────────────── */
.lista-retos{ display:flex; flex-direction:column; gap:1px }
.reto-fila{
  display:grid; grid-template-columns:90px 14px 1fr auto; align-items:center; gap:12px;
  padding:11px 0; border-bottom:1px solid rgba(36,26,77,.45);
}
.reto-fila:last-child{ border-bottom:none }
.reto-mes{
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--tinta-tenue);
}
.reto-punto{
  width:8px; height:8px; border-radius:50%; background:var(--tono);
  box-shadow:0 0 9px 1px var(--tono);
}
.reto-nombre{ font-size:14px; color:var(--tinta) }
.reto-area{ font-size:11.5px; color:var(--tinta-tenue); letter-spacing:.05em }

@media (max-width:640px){
  .mes-pasado{ grid-template-columns:1fr auto; gap:10px 14px }
  .mes-pasado audio{ grid-column:1 / -1; max-width:none }
  .reto-fila{ grid-template-columns:78px 12px 1fr; gap:10px }
  .reto-area{ grid-column:3; font-size:11px }
}

/* ── La base de datos ───────────────────────────────────────────────────
   Sustituye al Google Sheet como sitio donde mirar. Densa a propósito: se
   viene aquí a encontrar a alguien entre cientos de filas, no a contemplar. */
.mando-datos{
  display:flex; justify-content:space-between; align-items:center;
  gap:18px; flex-wrap:wrap; margin-bottom:20px;
}
.pestanas{ display:flex; gap:4px; flex-wrap:wrap }
.pestana{
  padding:9px 17px; border-radius:99px; cursor:pointer;
  border:1px solid var(--linea); background:transparent;
  font-family:var(--texto); font-size:13px; color:var(--tinta-media);
  transition:all .16s var(--curva);
}
.pestana:hover{ border-color:var(--linea-viva); color:var(--tinta) }
.pestana.aqui{
  border-color:var(--luz); color:#fff;
  background:linear-gradient(135deg, rgba(109,79,224,.28), rgba(74,99,232,.18));
}

.filtros{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.buscador, .selector-mes{
  padding:9px 14px; border-radius:10px;
  border:1px solid var(--linea); background:var(--plano-1);
  font-family:var(--texto); font-size:13px; color:var(--tinta);
}
.buscador{ min-width:220px }
.buscador::placeholder{ color:var(--tinta-tenue) }
.buscador:focus, .selector-mes:focus{ outline:none; border-color:var(--luz) }

.marco-datos > div{ max-height:66vh; overflow:auto }
.tabla-datos{ font-size:12.5px; border-collapse:separate; border-spacing:0 }
/* La cabecera se queda pegada: con 400 filas, a mitad de la tabla ya no se
   sabe qué columna se está mirando. */
.tabla-datos thead th{
  position:sticky; top:0; z-index:3;
  background:var(--plano-2); border-bottom:1px solid var(--linea-viva);
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-tenue); white-space:nowrap; padding:11px 13px;
}
.tabla-datos td{
  padding:10px 13px; border-bottom:1px solid rgba(36,26,77,.42);
  color:var(--tinta-media); vertical-align:top;
}
.tabla-datos tbody tr:hover td{ background:rgba(139,92,246,.05) }
.tabla-datos td.corto, .tabla-datos th.corto{ white-space:nowrap; text-align:right }
.tabla-datos td.vacia{ color:var(--tinta-tenue); opacity:.5 }
/* Las respuestas del formulario son párrafos enteros: se recortan a un ancho
   legible y el texto completo queda en el título, al pasar el cursor. */
.tabla-datos td.largo{
  max-width:320px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tabla-datos td:nth-child(2){ color:var(--tinta) }

a.descargar{
  display:inline-block; padding:8px 16px; border-radius:99px;
  font-size:12.5px; letter-spacing:.04em; text-decoration:none;
}

@media (max-width:760px){
  .mando-datos{ flex-direction:column; align-items:stretch }
  .buscador{ min-width:0; flex:1 }
  .tabla-datos td.largo{ max-width:180px }
}

/* ── La ficha del alumno (admin) ────────────────────────────────────────
   Reemplaza a "abrir la fila de alguien en el Sheet". */
a.abrir-ficha{
  color:var(--tinta); cursor:pointer;
  border-bottom:1px solid transparent; transition:all .15s var(--curva);
}
a.abrir-ficha:hover{ color:var(--luz-punta); border-bottom-color:var(--luz-punta) }

.lista-escritos{ display:flex; flex-direction:column; gap:14px }
.escrito{
  border:1px solid var(--linea); border-radius:13px;
  background:rgba(8,5,24,.55); padding:16px 19px;
}
.escrito-cabeza{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-bottom:11px;
}
.escrito-mes{
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--tinta);
}
.escrito-origen{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-tenue); margin-left:auto;
}
.escrito p{
  font-size:13.5px; line-height:1.65; color:var(--tinta-media); margin-bottom:9px;
}
.escrito p:last-child{ margin-bottom:0 }
.escrito p b{ color:var(--tinta-tenue); font-weight:400; letter-spacing:.03em }

/* ── Descargas del mes ─────────────────────────────────────────────────── */
.descargas{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px }
.descargas .descargar{ text-decoration:none }

/* ── El chat ────────────────────────────────────────────────────────────
   Ocupa el alto de la ventana menos la barra: un chat que hace crecer la
   página obliga a perseguir el cuadro de escribir hacia abajo. */
/* El chat se queda con lo que sobre bajo la barra, sea cual sea su alto.

   `grid-template-rows: minmax(0, 1fr)` no es decorativo: sin fila declarada,
   la fila es `auto` y crece con el contenido, así que el panel del chat medía
   más que su contenedor y el compositor se salía por debajo de la pantalla.
   Con `minmax(0, 1fr)` la fila mide exactamente lo que hay, y sus hijos
   pueden encogerse en vez de desbordar. */
.chat{
  display:grid;
  grid-template-columns:262px 1fr;
  grid-template-rows:minmax(0, 1fr);
  flex:1; min-height:0;
}
.chat-lado{
  border-right:1px solid var(--linea); padding:20px 16px;
  display:flex; flex-direction:column; gap:16px; min-height:0; height:100%;
  background:rgba(5,3,16,.5);
}
.chat-lado .btn-luz{ padding:11px 18px; font-size:13px }
.chat-lista{ overflow-y:auto; display:flex; flex-direction:column; gap:3px; min-height:0 }

.chat-item{
  position:relative; padding:11px 30px 11px 13px; border-radius:10px;
  cursor:pointer; transition:background .15s var(--curva);
}
.chat-item:hover{ background:rgba(139,92,246,.09) }
.chat-item.aqui{ background:rgba(139,92,246,.16) }
.chat-titulo{
  display:block; font-size:13px; color:var(--tinta-media); line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chat-item.aqui .chat-titulo{ color:var(--tinta) }
.chat-cuando{
  display:block; margin-top:4px; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-tenue);
}
.chat-archivar{
  position:absolute; top:9px; right:7px; width:20px; height:20px;
  border:none; background:transparent; color:var(--tinta-tenue);
  font-size:17px; line-height:1; cursor:pointer; opacity:0;
  transition:opacity .15s;
}
.chat-item:hover .chat-archivar{ opacity:1 }
.chat-archivar:hover{ color:var(--mal) }

/* ── El orbe ────────────────────────────────────────────────────────────
   Un vórtice de plasma sobre NEGRO, sin más fondo. Se probaron un orbe
   dibujado, la imagen del póster y una esfera; el motivo de cada descarte
   está en ESTADO.md.

   Fondo negro y punto: cualquier lavado de color detrás le quitaba fuerza al
   vórtice, que es lo único que tiene que brillar aquí. */
.chat-caja{
  position:relative; display:flex; flex-direction:column;
  min-height:0; min-width:0; height:100%; overflow:hidden;
  background:var(--plano-0);
}

.chat-caja > .orbe-escena{
  position:absolute; z-index:0; pointer-events:none;
  left:50%; top:27%; transform:translate(-50%,-50%);
  aspect-ratio:1 / 1;
  /* Grande a propósito: el vórtice ocupa la parte de dentro y el resto es el
     sitio por donde salen las ondas del sonido. Con el lienzo justo, las ondas
     chocaban contra el borde y dejaban un corte recto a los lados. */
  width:min(100%, 1070px); max-height:100%;
  /* Y por si acaso: lo que llegue al borde se desvanece en vez de cortarse.
     `closest-side` para que el 100% sea la mitad del ancho y no la esquina. */
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%, #000 88%, transparent 100%);
  mask-image:radial-gradient(circle closest-side at 50% 50%, #000 88%, transparent 100%);
  /* Ni a pleno pulmón: el saludo va justo encima y con el vórtice al 100% no
     se leía. Aquí ya es un fondo, no un cuadro. */
  opacity:.58;
  /* Y se atenúa más en cuanto hay conversación: manda el texto, no el vórtice.
     La transición es lenta a propósito — si baja de golpe, se nota el truco. */
  transition:opacity .7s var(--curva);
}
.chat-caja > .orbe-escena.tenue{ opacity:.13 }
.chat-caja > .orbe-escena canvas{ width:100%; height:100%; display:block }

/* ── La columna del chat ────────────────────────────────────────────────
   Ancho máximo y centrada. Ocupando la pantalla entera, las líneas salen
   larguísimas y en un monitor ancho la conversación queda desparramada por
   los bordes. El truco del `max()` en el padding centra la columna sin
   añadir un div de por medio. */
:root{ --columna-chat:740px }

.chat-hilo,
.chat-escribir,
.chat-sugerencias,
.chat-pie{
  padding-left:max(20px, calc((100% - var(--columna-chat)) / 2));
  padding-right:max(20px, calc((100% - var(--columna-chat)) / 2));
}

.chat-hilo{
  position:relative; z-index:1;
  flex:1; overflow-y:auto; padding-top:30px; padding-bottom:24px;
  display:flex; flex-direction:column; gap:22px;
}

/* ── Las burbujas ───────────────────────────────────────────────────────── */
.burbuja{ display:flex; flex-direction:column; gap:6px; max-width:min(100%, 62ch) }
.burbuja.alumno{ align-self:flex-end; align-items:flex-end }
.burbuja-quien{
  font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--tinta-tenue);
}
.burbuja-texto{
  /* white-space preservado: el modelo separa en párrafos con saltos de línea,
     y sin esto la respuesta llega como un ladrillo. */
  white-space:pre-wrap; font-size:14.5px; line-height:1.72; color:var(--tinta-media);
  padding:14px 18px; border-radius:15px;
  border:1px solid var(--linea);
  /* Casi opaca a propósito: el vórtice es precioso, pero un chat que no se lee
     no sirve. Donde hay texto, manda el texto. */
  background:rgba(6,4,18,.82); backdrop-filter:blur(12px);
}
.burbuja.alumno .burbuja-texto{
  color:var(--tinta); border-color:var(--linea-viva);
  background:linear-gradient(135deg, rgba(76,52,168,.92), rgba(46,62,158,.88));
}
.burbuja.fallo .burbuja-texto{ border-color:#5c2724; color:#ffb8b2 }
/* Un punto que late mientras escribe: sin señal, un stream lento parece colgado. */
.burbuja.escribiendo .burbuja-texto::after{
  content:''; display:inline-block; width:7px; height:7px; margin-left:5px;
  border-radius:50%; background:var(--luz-punta); vertical-align:baseline;
  animation:latir 1.1s ease-in-out infinite;
}
@keyframes latir{ 0%,100%{opacity:.25} 50%{opacity:1} }

/* ── La bienvenida ──────────────────────────────────────────────────────── */
.chat-vacio{
  margin:0 auto; text-align:center; max-width:560px; padding:6px 10px 18px;
  position:relative; z-index:1;
}
.chat-vacio h3{
  font-family:var(--display); font-size:31px; font-weight:600; margin-bottom:8px;
  text-shadow:0 2px 12px rgba(3,1,9,1), 0 2px 34px rgba(3,1,9,.95);
}
.chat-vacio p{
  color:var(--tinta-media); font-size:15px; line-height:1.6;
  text-shadow:0 1px 10px rgba(3,1,9,1), 0 1px 24px rgba(3,1,9,.95);
}

/* ── El compositor ──────────────────────────────────────────────────────
   Una sola tarjeta con el texto arriba y las acciones abajo, como en la app
   de referencia. Antes eran una caja y un botón sueltos al lado, y se leían
   como dos cosas en vez de como un sitio donde escribir. */
.chat-escribir{ position:relative; z-index:1; padding-top:14px; padding-bottom:0 }

.compositor{
  border:1px solid var(--linea); border-radius:26px;
  background:rgba(8,5,24,.88); backdrop-filter:blur(18px);
  /* Holgado a propósito: el cuadro de escribir es lo que más se usa de toda la
     pantalla, y apretado invita menos a escribir. */
  padding:20px 20px 13px;
  box-shadow:0 22px 60px -28px rgba(0,0,0,.95);
  transition:border-color .18s var(--curva), box-shadow .18s var(--curva);
}
.compositor:focus-within{
  border-color:var(--luz); box-shadow:0 0 0 3px rgba(139,92,246,.12);
}
.compositor textarea{
  width:100%; resize:none; outline:none; display:block;
  /* Hay una regla global para TODOS los textarea de la app que les pone fondo,
     borde y esquinas redondeadas —y con !important—. Aquí estorba: dibujaba un
     cuadro dentro del cuadro. Se anula entera, no a medias. */
  background:transparent !important;
  border:none; border-radius:0; padding:0; box-shadow:none;
  min-height:54px; max-height:190px;
  font-family:var(--texto); font-size:15.5px; line-height:1.6; color:var(--tinta);
}
.compositor textarea:hover, .compositor textarea:focus{
  border:none; box-shadow:none; background:transparent !important;
}
.compositor textarea::placeholder{ color:var(--tinta-tenue) }
.compositor-pie{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-top:12px;
}
.compositor-nota{
  font-size:11px; letter-spacing:.04em; color:var(--tinta-tenue);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── Los mandos del compositor ──────────────────────────────────────────
   Iconos, no palabras: la fila de abajo tiene que leerse de un vistazo y
   sin que el idioma estorbe. */
.compositor-mandos{ display:flex; align-items:center; gap:6px; flex:none }
.mando{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border:none; border-radius:12px; cursor:pointer;
  background:transparent; color:var(--tinta-tenue);
  transition:all .16s var(--curva);
}
.mando svg{ width:20px; height:20px; display:block }
.mando:hover:not(:disabled){ background:rgba(255,255,255,.07); color:var(--tinta) }
.mando:disabled{ opacity:.35; cursor:default }

/* Sin recuadro de color. El cuadro morado marcaba un borde tan definido que
   cualquier desajuste del avión dentro de él saltaba a la vista — y un avión
   en diagonal SIEMPRE va a tirar hacia su punta. Sin caja no hay nada dentro
   de lo que descentrarse. Que sea el principal se nota por el color del
   trazo, que es blanco, frente al micrófono que va apagado. */
.mando-enviar{ background:transparent; color:#fff }
.mando-enviar:hover:not(:disabled){ background:rgba(255,255,255,.09) }
.mando-enviar:disabled{ background:transparent; color:var(--tinta-tenue) }
/* Mientras responde, el avión late en vez de cambiar a texto: la fila de
   iconos no se puede mover de sitio a media conversación. */
.mando-enviar.pensando svg{ animation:latir 1.1s ease-in-out infinite }

/* Dictando: el micrófono se enciende para que se vea que está escuchando. */
.mando.oyendo{
  background:rgba(168,85,247,.22); color:#e9d5ff;
  box-shadow:0 0 0 1px rgba(168,85,247,.5);
}
.mando.oyendo svg{ animation:latir 1.3s ease-in-out infinite }

/* ── Las sugerencias, debajo del compositor ─────────────────────────────── */
.chat-sugerencias{
  position:relative; z-index:1;
  display:flex; gap:9px; flex-wrap:wrap; justify-content:center; padding-top:14px;
}
.chat-sugerencias:empty{ display:none }
.idea{
  padding:10px 16px; border-radius:99px; cursor:pointer; text-align:left;
  border:1px solid var(--linea); background:rgba(6,4,18,.82); backdrop-filter:blur(10px);
  font-family:var(--texto); font-size:12.5px; color:var(--tinta-media);
  transition:all .16s var(--curva);
}
.idea:hover{ border-color:var(--luz); color:var(--tinta) }

.chat-pie{
  position:relative; z-index:1;
  padding-top:12px; padding-bottom:22px; margin:0; text-align:center;
}

/* ── Sin conversación: todo al centro ───────────────────────────────────
   El compositor va en medio de la pantalla, no pegado abajo. Es lo que hace
   que la primera pantalla invite a escribir en vez de parecer un chat vacío
   esperando turno. En cuanto hay charla, baja y el hilo se queda el espacio. */
.chat-caja.sin-charla{ justify-content:center }
.chat-caja.sin-charla .chat-hilo{ flex:0 0 auto; overflow:visible; padding-bottom:4px }
.chat-caja.sin-charla .chat-pie{ opacity:.7 }

@media (max-width:820px){
  main:has(.chat){ height:auto; overflow:visible; display:block }
  .chat{ grid-template-columns:1fr; height:auto }
  .chat-lado{ border-right:none; border-bottom:1px solid var(--linea) }
  .chat-lista{ max-height:170px }
  .chat-hilo{ padding-top:22px; min-height:40vh }
  .burbuja{ max-width:100% }
  .chat-caja.sin-charla .chat-hilo{ min-height:0 }
}

/* ── Elegir con quién hablar ────────────────────────────────────────────
   No es un ajuste escondido: se elige antes de escribir, porque cambia
   cómo suena todo lo que viene después. */
.elige-voz{
  margin-top:22px;
  /* Una plancha oscura debajo. Sin ella el bloque se pierde contra la
     nebulosa: el texto tenue sobre un fondo que brilla y se mueve no se lee,
     por mucho contraste que tenga el color en teoría. */
  display:inline-block; padding:18px 26px 20px; border-radius:20px;
  background:rgba(4,2,14,.72); backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(168,85,247,.16);
  box-shadow:0 18px 50px -20px rgba(0,0,0,.9);
}
.elige-voz-rotulo{
  display:block; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tinta); margin-bottom:12px;
}
.voces{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap }
.voz{
  padding:9px 20px; border-radius:99px; cursor:pointer;
  border:1px solid var(--linea-viva); background:rgba(10,6,26,.92);
  font-family:var(--texto); font-size:13px; color:var(--tinta);
  transition:all .16s var(--curva);
}
.voz:hover{ border-color:var(--linea-viva); color:var(--tinta) }
.voz.puesta{
  border-color:var(--luz); color:#fff;
  background:linear-gradient(135deg, rgba(109,79,224,.3), rgba(74,99,232,.2));
}


.compositor-nota.nota-fallo{ color:#ffb8b2 }

/* ── Hablar con ATMA · vista previa ─────────────────────────────────────
   El chat se aparta y el orbe pasa a ser la cara de la conversación: es lo
   único que se mueve mientras nadie escribe. */
/* Aquí no queda NADA del chat. Atenuarlo no bastaba: el saludo y los botones
   de voz seguían asomando por detrás de la nebulosa y la pantalla parecía dos
   cosas apiladas. En modo voz solo está el vórtice. */
.chat-caja.en-voz .chat-escribir,
.chat-caja.en-voz .chat-sugerencias,
.chat-caja.en-voz .chat-pie,
.chat-caja.en-voz .chat-hilo{ display:none }

/* El orbe sube al frente, a pleno brillo y al centro: ahora es lo único. */
.chat-caja.en-voz > .orbe-escena{ opacity:.95 !important; top:44% }

/* Solo el botón de salir, abajo del todo. Ni carteles ni rótulos: la nebulosa
   se explica sola, y cualquier cosa escrita encima le quita el sitio. */
.voz-escena{
  position:relative; z-index:2;
  display:flex; justify-content:center;
  margin:auto auto 40px; padding:0 20px;
  animation:asomar .38s var(--curva) both;
}
@keyframes asomar{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* Que se sepa que todavía no conversa. Un demo que se hace pasar por lo real
   es una promesa que alguien va a creerse. */
.voz-escena[data-estado="escuchando"] @keyframes respira{ 0%,100%{opacity:.55} 50%{opacity:1} }

.btn-salir-voz{
  margin-top:6px; padding:8px 22px; border-radius:99px; cursor:pointer;
  border:1px solid var(--linea); background:transparent;
  font-family:var(--texto); font-size:12px; letter-spacing:.05em;
  color:var(--tinta-tenue); transition:all .16s var(--curva);
}
.btn-salir-voz:hover{ border-color:#5c2724; color:#ffb8b2 }

@media (prefers-reduced-motion:reduce){
  .voz-escena{ animation:none }
  .voz-escena[data-estado="escuchando"] }

/* ── Las tres voces, dentro del compositor ──────────────────────────────
   Antes vivían en un bloque enorme sobre el saludo, que se comía media
   pantalla para una decisión de un segundo. Aquí están a mano, pequeñas, y
   se ven durante toda la conversación. */
.compositor-izq{ display:flex; align-items:center; min-width:0; flex:1 }
.voces-mini{ display:flex; align-items:center; gap:4px; flex-wrap:wrap }
.voz-mini{
  padding:4px 11px; border-radius:99px; cursor:pointer;
  border:1px solid transparent; background:transparent;
  font-family:var(--texto); font-size:11.5px; letter-spacing:.02em;
  color:var(--tinta-tenue); transition:all .15s var(--curva);
}
.voz-mini:hover:not(:disabled){ color:var(--tinta); background:rgba(255,255,255,.06) }
.voz-mini.puesta{
  color:var(--tinta); border-color:rgba(168,85,247,.42);
  background:rgba(168,85,247,.14);
}
/* Bloqueadas al empezar: se sigue viendo quién contesta, pero no se puede
   cambiar — el servidor fija la voz al abrir y la ignora después. */
.voz-mini:disabled{ cursor:default }
.voz-mini:disabled:not(.puesta){ opacity:.4 }
/* El selector de mes al enviar. Sin él solo se podía enviar el mes en curso, y
   las calibraciones del siguiente se cargan antes de que empiece. */
.elegir-mes{
  display:inline-flex; align-items:center; gap:9px; margin-top:14px;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-tenue);
}
.elegir-mes select{
  width:auto; padding:7px 14px; border-radius:99px; cursor:pointer;
  font-size:13px; letter-spacing:0; text-transform:none; color:var(--tinta);
}

/* ── La barra de la corrida ─────────────────────────────────────────────
   Un solo riel con tres tramos: lo entregado, lo que se torció, y lo que
   queda. De un vistazo se ve cómo va sin leer un número. */
.corrida-barra{ margin:18px 0 26px }
.corrida-cima{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:12px;
}
.corrida-pct{
  font-family:var(--display); font-size:44px; line-height:1; font-weight:600;
  background:linear-gradient(96deg, #ffffff 0%, #d5cbff 46%, #7fd7ee 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* El % con color propio: heredando el degradado recortado del número se
   perdía por completo y quedaba una cifra suelta sin unidad. */
.corrida-pct i{
  font-size:19px; font-style:normal; margin-left:3px;
  -webkit-text-fill-color:var(--tinta-media); color:var(--tinta-media);
}
.corrida-glosa{ font-size:13.5px; color:var(--tinta-media); flex:1; min-width:180px }
.corrida-falta{
  padding:5px 14px; border-radius:99px; white-space:nowrap;
  border:1px solid rgba(168,85,247,.35); background:rgba(168,85,247,.12);
  font-size:11.5px; letter-spacing:.05em; color:#d6bbff;
}

.corrida-riel{
  position:relative; display:flex; height:12px; border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.05); border:1px solid var(--linea);
}
.corrida-hecho{
  background:linear-gradient(90deg, #6d4fe0, #8b5cf6 55%, #7fd7ee);
  box-shadow:0 0 22px -4px rgba(139,92,246,.9);
  transition:width .6s var(--curva);
}
.corrida-malo{
  background:linear-gradient(90deg, #7a2b26, #c0453c);
  transition:width .6s var(--curva);
}

/* El barrido de luz: solo mientras corre. Cuando termina se para, y esa
   quietud es la señal de que ya está. */
.corrida-brillo{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  width:34%; animation:barrer 1.9s var(--curva) infinite;
}
@keyframes barrer{ from{ transform:translateX(-120%) } to{ transform:translateX(400%) } }

.corrida-barra.viva .corrida-pct{ animation:latir-suave 2.4s var(--curva) infinite }
@keyframes latir-suave{ 0%,100%{opacity:1} 50%{opacity:.72} }

.dato.mala .cifra{ color:#ffb8b2 }

@media (prefers-reduced-motion:reduce){
  .corrida-brillo{ animation:none; opacity:.25 }
  .corrida-barra.viva .corrida-pct{ animation:none }
}

/* ═══════════════ Los créditos de las voces (pantalla de Enviar) ═══════════
   Eran una línea de letra pequeña bajo el número de alumnos, y es el dato que
   decide si la corrida del mes sale entera o se corta a la mitad. */
.creditos{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:12px; margin-bottom:26px; max-width:760px;
}
.credito{
  padding:14px 16px 13px; border-radius:13px;
  border:1px solid var(--linea); background:var(--plano-2);
}
/* Cuando no alcanzan, la tarjeta lo dice sin tener que leerla. */
.credito.corto{
  border-color:rgba(192,69,60,.45);
  background:linear-gradient(180deg, rgba(192,69,60,.10), var(--plano-2) 60%);
}
.credito.sin-dato{ opacity:.72 }

.credito-cabeza{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:7px;
}
.credito-voz{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-media);
}
.credito-cuando{ font-size:10.5px; color:var(--tinta-tenue); white-space:nowrap }

.credito-cifra{
  font-family:var(--display); font-size:24px; font-weight:600;
  line-height:1; letter-spacing:-.02em;
  color:var(--tinta); margin-bottom:9px;
}
.credito-cifra i{
  display:block; font-family:var(--texto); font-style:normal; font-weight:400;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-tenue); margin-top:5px;
}

.credito-riel{
  position:relative; display:flex; height:6px; border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.05); border:1px solid var(--linea);
}
.credito-usado{
  background:linear-gradient(90deg, #6d4fe0, #8b5cf6 55%, #7fd7ee);
  box-shadow:0 0 18px -5px rgba(139,92,246,.9);
  transition:width .6s var(--curva);
}
.credito.corto .credito-usado{ background:linear-gradient(90deg, #7a2b26, #c0453c) }

.credito-glosa{
  margin-top:6px; font-size:11.5px; color:var(--tinta-tenue);
}
.credito-pie{
  margin:7px 0 0; font-size:12.5px; line-height:1.45; color:var(--tinta-media);
}
.credito-pie b{ color:var(--tinta); font-weight:400 }
.credito-pie b.mal{ color:#ffb8b2 }

/* La fila de quien no ha llenado su formulario: se dice por qué no hay
   casillas, en vez de dejarlas puestas y rechazarlo al guardar. */
.sin-formulario{
  color:var(--tinta-tenue); font-size:13px; line-height:1.5;
  font-style:italic; padding-top:14px; padding-bottom:14px;
}

/* ═══════════════════ El reproductor de la nota de voz ═══════════════════
   Un núcleo de luz con la onda saliendo a los lados, no una caja con una
   barra. La forma sale de la referencia que pasó Pedro y es la misma familia
   visual que el orbe del chat: luz que respira sobre negro. */
.rep{
  position:relative;
  max-width:640px; margin-inline:auto;
  padding:10px 0 0;
}

.rep-escena{ position:relative; display:grid; place-items:center }
.rep-onda{ display:block; width:100%; height:124px; cursor:pointer }
.rep-onda:focus-visible{ outline:2px solid var(--luz-punta); outline-offset:6px; border-radius:12px }

/* El núcleo va ENCIMA del lienzo, centrado. El anillo de progreso lo dibuja
   el canvas justo por fuera, así que el botón no lo tapa. */
.rep-nucleo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; border-radius:50%;
  border:1px solid rgba(255,255,255,.16); cursor:pointer;
  background:
    radial-gradient(60% 60% at 35% 30%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(150deg, var(--luz-viva), var(--luz-fria) 55%, var(--luz-punta));
  box-shadow:
    0 0 40px -6px var(--halo),
    0 0 90px -20px rgba(34,211,238,.65),
    inset 0 1px 0 rgba(255,255,255,.3);
  color:#fff; display:grid; place-items:center;
  transition:transform .2s var(--curva), box-shadow .2s var(--curva);
}
.rep-nucleo:hover{ transform:translate(-50%,-50%) scale(1.06) }
.rep-nucleo:active{ transform:translate(-50%,-50%) scale(.97) }
.rep-nucleo:focus-visible{ outline:2px solid var(--luz-punta); outline-offset:5px }
.rep-icono{ width:30px; height:30px; margin-left:2px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)) }

/* Mientras suena, el núcleo late muy despacio: está vivo, no encendido. */
[data-sonando] .rep-nucleo{ animation:latir 2.6s var(--curva-suave) infinite }
@keyframes latir{
  0%,100%{ box-shadow:0 0 40px -6px var(--halo), 0 0 90px -20px rgba(34,211,238,.65), inset 0 1px 0 rgba(255,255,255,.3) }
  50%    { box-shadow:0 0 54px -4px var(--halo), 0 0 120px -18px rgba(34,211,238,.8), inset 0 1px 0 rgba(255,255,255,.3) }
}

/* Los tiempos, juntos y bajo el núcleo. Separados a los extremos flotaban
   sueltos: sin caja alrededor no hay nada que los sujete. */
.rep-tiempos{
  display:flex; justify-content:center; gap:7px; margin:2px 0 0;
  font-size:12px; color:var(--tinta-tenue); font-variant-numeric:tabular-nums;
}
.rep-tiempos i{ font-style:normal; opacity:.4 }

/* Los anillos del núcleo: dos halos concéntricos, muy tenues. Son lo que hace
   que el centro se lea como un objeto de luz y no como un botón redondo. */
.rep-escena::before,
.rep-escena::after{
  content:''; position:absolute; left:50%; top:50%; border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none;
  border:1px solid rgba(139,92,246,.22);
}
.rep-escena::before{ width:118px; height:118px }
.rep-escena::after{
  width:158px; height:158px; border-color:rgba(34,211,238,.10);
}
[data-sonando] .rep-escena::before{ animation:respirar-anillo 3.4s var(--curva-suave) infinite }
[data-sonando] .rep-escena::after{ animation:respirar-anillo 3.4s var(--curva-suave) infinite .5s }
@keyframes respirar-anillo{
  0%,100%{ opacity:1; transform:translate(-50%,-50%) scale(1) }
  50%    { opacity:.45; transform:translate(-50%,-50%) scale(1.07) }
}
.rep.compacto .rep-escena::before{ width:82px; height:82px }
.rep.compacto .rep-escena::after{ width:110px; height:110px }

/* En el historial van varios seguidos: el mismo objeto, más pequeño. */
.rep.compacto{ max-width:420px; margin-inline:0 }
.rep.compacto .rep-onda{ height:76px }
.rep.compacto .rep-nucleo{ width:50px; height:50px }
.rep.compacto .rep-icono{ width:21px; height:21px }

@media (max-width:620px){
  .rep-onda{ height:104px }
  .rep-nucleo{ width:66px; height:66px }
}

/* Cuando el navegador no puede con el audio: se le da el archivo, no un
   botón muerto. Pasa con Safari viejo y el OGG/Opus de las notas de voz. */
.rep.rep-caido{ display:block; padding:16px 18px; border:1px solid var(--linea); border-radius:16px }
.rep-aviso{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.rep-aviso p{ margin:0; font-size:13.5px; color:var(--tinta-media) }

/* ═══════════════════ La constelación de las once áreas ══════════════════
   El alumno en el centro y sus áreas alrededor, con el hilo más encendido
   cuanto más alta está el área. Sustituye a las once barras horizontales,
   que eran un gráfico de negocio dentro de una app sobre conciencia. */
.marco-constelacion{
  position:relative; border-radius:20px; overflow:hidden;
  border:1px solid var(--linea);
  background:
    radial-gradient(70% 90% at 50% 50%, rgba(46,32,102,.42), transparent 70%),
    var(--plano-2);
}
.marco-constelacion canvas{ display:block; width:100%; height:460px }

@media (max-width:820px){
  .marco-constelacion canvas{ height:400px }
}
@media (max-width:560px){
  /* En un móvil las etiquetas de los lados no caben en un óvalo ancho; se
     deja más alto para que el círculo se estire hacia arriba y abajo. */
  .marco-constelacion canvas{ height:440px }
}

/* ═══════════ El panel de instrumentos: "Mi reporte" ══════════════════════
 *
 * Idioma nuevo, estrenado el 1-sep-2026 en esta pantalla. Va acotado dentro
 * de `.panel` a propósito: el resto de la app conserva el suyo hasta que se
 * migre, para no cambiarlo todo a ciegas de una vez.
 *
 * Lo que lo define: fondo casi negro para que los acentos quemen, celdas que
 * se tocan separadas por una línea de un píxel, rótulos pequeños en
 * mayúsculas con letra espaciada, cifras monoespaciadas, y el color usado
 * como SEÑAL —verde lo que sube, coral lo que baja, cian lo que destaca—.
 */
.panel{
  --panel-fondo:#04030a;
  --celda:#0a0817;
  --celda-alta:#0e0b1e;
  --hilo:rgba(150,160,220,.14);
  --mono:'JetBrains Mono', ui-monospace, monospace;

  background:var(--panel-fondo);
  padding:30px 28px 34px;
  border-radius:16px;
  border:1px solid var(--hilo);
  margin:0 30px 30px;
  position:relative;
}
/* La retícula del instrumento: se intuye, no se mira. */
.panel::before{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:16px;
  background-image:
    linear-gradient(rgba(150,160,220,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,160,220,.045) 1px, transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}
.panel > *{ position:relative }

.panel .rotulo{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tinta-tenue); font-weight:500; margin:0;
}
.panel .rotulo.viva{ color:var(--luz-punta) }

.panel-cabeza{
  display:flex; align-items:flex-end; justify-content:space-between; gap:22px;
  padding-bottom:18px; margin-bottom:22px; border-bottom:1px solid var(--hilo);
  flex-wrap:wrap;
}
.panel-cabeza h1{
  font-family:var(--display); font-size:31px; font-weight:600; line-height:1.05;
  margin-top:6px;
}
.panel .chip{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px;
  border-radius:6px; border:1px solid rgba(150,160,220,.3);
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-media); white-space:nowrap;
}
.panel .chip::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--bien); box-shadow:0 0 8px var(--bien);
}

.panel .rejilla{
  display:grid; grid-template-columns:repeat(12,1fr); gap:1px; background:var(--hilo);
}
.panel .rejilla + .rejilla{ margin-top:1px }
.panel .celda{ background:var(--celda); padding:22px 24px }
.panel .celda.alta{ background:var(--celda-alta) }
.panel .g5{ grid-column:span 5 } .panel .g7{ grid-column:span 7 }
.panel .g12{ grid-column:span 12 }

.celda-audio{ padding:26px 28px 22px }

.cifra-linea{ display:flex; align-items:baseline; gap:20px; margin:16px 0 4px; flex-wrap:wrap }
.cifra-linea .valor{
  font-family:var(--mono); font-size:56px; font-weight:500; line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin:0;
}
.nivel-nombre{ font-family:var(--display); font-size:23px; font-weight:600; line-height:1.1 }
.panel .nombre{ font-size:13.5px; color:var(--tinta-media); margin-top:6px }
.area-nombre{
  font-family:var(--display); font-size:32px; font-weight:600; line-height:1.05;
  margin:14px 0 8px;
}
.explica{ color:var(--tinta-media); font-size:14.5px; line-height:1.65; margin-top:14px; max-width:52ch }

.delta{
  display:inline-flex; align-items:center; gap:5px; margin-top:10px;
  font-family:var(--mono); font-size:12px; font-weight:500; padding:3px 8px; border-radius:5px;
}
.delta.sube{ color:var(--bien); background:rgba(62,207,142,.10); border:1px solid rgba(62,207,142,.24) }
.delta.baja{ color:var(--mal); background:rgba(240,85,77,.10); border:1px solid rgba(240,85,77,.24) }
.delta.igual{ color:var(--tinta-tenue); border:1px solid var(--hilo) }
.delta span{ font-family:var(--texto); font-weight:300; color:var(--tinta-tenue); letter-spacing:0 }

/* La regla lleva escrita su referencia: un número sin referencia no se lee. */
.panel .riel{ height:3px; background:rgba(150,160,220,.12); margin-top:30px; position:relative }
.panel .riel i{ position:absolute; inset:0 auto 0 0; display:block }
.panel .riel .marca{
  position:absolute; top:-3px; width:2px; height:9px; background:var(--tinta);
  box-shadow:0 0 10px rgba(255,255,255,.7);
}
.panel .riel em{
  position:absolute; top:10px; transform:translateX(-50%); font-style:normal;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-tenue); white-space:nowrap;
}
.panel .riel em::before{
  content:''; position:absolute; left:50%; top:-11px; width:1px; height:8px;
  background:rgba(150,160,220,.3);
}

/* El reporte, en dos columnas: se lee en trozos, no en un muro. */
.lectura{ display:grid; grid-template-columns:1fr 1fr; gap:26px 40px }
.lectura .parte p:not(.rotulo){
  color:var(--tinta-media); font-size:14.5px; line-height:1.7; margin-top:10px;
}
.marcador{
  display:inline-block; width:20px; height:1px; background:var(--luz-punta);
  vertical-align:middle; margin-right:9px;
}

.acciones-panel{ display:flex; gap:1px; margin-top:1px; background:var(--hilo) }
.boton-panel{
  flex:1; background:var(--celda); padding:16px; text-align:center;
  color:var(--tinta-media); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  transition:color .18s, background .18s;
}
.boton-panel:hover{ color:var(--tinta); background:var(--celda-alta) }

/* ── El reproductor en forma lateral: núcleo a la izquierda ── */
.rep.lateral{ max-width:none; margin:14px 0 0; padding:0 }
.rep.lateral .rep-escena{ display:flex; align-items:center; gap:22px }
.rep.lateral .rep-onda{ height:62px; flex:1 }
.rep.lateral .rep-nucleo{ position:static; transform:none; width:78px; height:78px }
.rep.lateral .rep-nucleo:hover{ transform:scale(1.05) }
.rep.lateral .rep-escena::before,
.rep.lateral .rep-escena::after{ display:none }
.rep.lateral .rep-tiempos{ justify-content:flex-start; gap:7px; margin-top:10px; padding-left:100px }
.rep.compacto.lateral .rep-nucleo{ width:48px; height:48px }
.rep.compacto.lateral .rep-onda{ height:40px }
.rep.compacto.lateral .rep-tiempos{ padding-left:70px }

@media (max-width:900px){
  .panel{ margin:0 16px 24px; padding:22px 18px 26px }
  .panel .g5, .panel .g7{ grid-column:span 12 }
  .lectura{ grid-template-columns:1fr }
  .cifra-linea .valor{ font-size:46px }
}

/* ── El teléfono con su país (12-sep-2026) ───────────────────────────────
   La lista de países a la izquierda, el número a la derecha. La lista no se
   estira: ocupa lo que necesita el nombre más largo y deja el resto al número. */
.telefono{display:flex; gap:8px; align-items:stretch}
.telefono-pais{width:auto; max-width:46%; flex:0 0 auto; padding-right:30px}
.telefono-numero{flex:1; min-width:0}
@media (max-width:520px){
  .telefono{flex-wrap:wrap}
  .telefono-pais{max-width:none; width:100%}
}

/* ── La ventana emergente ───────────────────────────────────────────────── */
.ventana{
  /* El reset global le quita el margen al dialog y lo deja pegado arriba a la
     izquierda: se centra a mano. */
  position:fixed; inset:0; margin:auto;
  width:min(var(--ancho, 640px), calc(100vw - 32px));
  max-height:calc(100vh - 48px); height:fit-content;
  background:var(--plano-2); color:var(--tinta);
  border:1px solid var(--linea-viva); border-radius:18px;
  padding:0; overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(122,78,255,.15);
}
.ventana::backdrop{background:rgba(3,1,16,.72); backdrop-filter:blur(3px)}
.ventana-cabeza{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--linea);
}
.ventana-cabeza h3{margin:0; font-size:16px; font-weight:600}
.ventana-cerrar{
  background:transparent; color:var(--tinta-tenue); font-size:24px; line-height:1;
  padding:2px 8px; border-radius:8px;
}
.ventana-cerrar:hover{color:var(--tinta); background:var(--plano-3)}
.ventana-cuerpo{padding:18px 20px 20px; overflow:auto; max-height:calc(100vh - 130px)}
.ventana-cuerpo p{line-height:1.6; margin:0 0 10px}
.ventana-cuerpo .escrito p b{color:var(--tinta-tenue); font-weight:500; font-size:12.5px; letter-spacing:.02em}
.ventana .escrito{background:var(--plano-1)}
.clave-provisional{
  font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:22px;
  letter-spacing:.02em; color:var(--luz-menta); text-align:center;
  background:var(--plano-1); border:1px dashed var(--linea-viva);
  border-radius:12px; padding:16px; margin:14px 0 8px; user-select:all;
}

/* Un enlace pequeño dentro de una celda: "Abrir formulario" */
.enlace-chico{
  display:inline-block; margin-top:7px; font-size:12px;
  color:var(--luz-punta); cursor:pointer; text-decoration:none;
  border-bottom:1px solid transparent;
}
.enlace-chico:hover{border-bottom-color:var(--luz-punta)}
.otro-mes{color:var(--luz-punta); cursor:pointer}
.otra-acciones{display:flex; gap:8px; flex-wrap:wrap}
.otra-acciones .btn-suave{padding:8px 13px; font-size:12.5px; white-space:nowrap; cursor:pointer}
.acciones-fila .btn-suave{cursor:pointer}

/* ── Botones pegados (segmentos) ────────────────────────────────────────── */
.segmentos{display:inline-flex; border:1px solid var(--linea-viva); border-radius:9px; overflow:hidden}
.segmento{
  margin:0; padding:7px 14px; font-size:13px; text-transform:none; letter-spacing:0;
  color:var(--tinta-media); background:transparent; cursor:pointer; position:relative;
  border-right:1px solid var(--linea-viva); transition:background .15s var(--curva), color .15s var(--curva);
}
.segmento:last-child{border-right:none}
.segmento:hover{color:var(--tinta)}
.segmento.puesta{background:var(--luz); color:#fff}
.segmento input{position:absolute; opacity:0; width:0; height:0}

/* Un select pequeño dentro de una tabla */
.select-chico{width:auto; min-width:118px; padding:7px 30px 7px 11px; font-size:13px; border-radius:8px}

/* ── Mi nivel de conciencia (12-sep-2026) ──────────────────────────────── */
.pronto-mini{
  font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#4d4b63;
  margin-left:6px; opacity:.85;
}
.pestanas-nivel{
  display:flex; gap:4px; flex-wrap:wrap; padding:14px 40px 0;
}
@media (max-width:760px){ .pestanas-nivel{ padding:12px 18px 0 } }
.pestanas-nivel .pestana{ font-size:13.5px }

/* Mis reportes */
.elegir-reporte{ margin-top:4px }
.elegir-reporte select{
  width:auto; min-width:220px; font-family:var(--display); font-size:24px; font-weight:600;
  padding:6px 38px 6px 0; background:transparent; border:none; border-radius:0;
  border-bottom:1px solid var(--linea-viva); color:var(--tinta); cursor:pointer;
}
.elegir-reporte select:focus{ box-shadow:none; background:transparent; border-bottom-color:var(--luz) }
.chips{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.descargas-grandes{ gap:10px; padding:16px 0 4px; background:transparent; flex-wrap:wrap }
.descarga-grande{
  display:inline-block; padding:14px 26px; font-size:15px; text-decoration:none;
  border-radius:12px; cursor:pointer; border-color:var(--linea-viva);
}
.descarga-grande:hover{ color:#fff; border-color:var(--luz); background:linear-gradient(135deg, rgba(109,79,224,.28), rgba(74,99,232,.18)) }
.mes-descargas{ display:flex; flex-direction:column; gap:6px; align-items:flex-end }
.mes-pasado.abierto .mes-cual{ color:var(--luz-punta) }
.ver-reporte{ cursor:pointer }
.ver-reporte:hover{ color:var(--luz-punta) }

/* Mi evolución */
.evolucion-cabeza{
  display:flex; gap:28px; align-items:center; flex-wrap:wrap; margin-bottom:30px;
}
.anillo{
  width:150px; height:150px; border-radius:50%; flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.04), transparent 62%), var(--plano-1);
  border:2px solid var(--tono, var(--luz));
  box-shadow:0 0 0 6px rgba(122,78,255,.08), 0 0 34px -6px var(--tono, var(--luz));
}
.anillo-valor{ font-family:var(--display); font-size:44px; font-weight:700; line-height:1; color:var(--tinta) }
.anillo-nivel{ font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-tenue) }
.evolucion-datos{ flex:1 1 320px }
.evolucion-datos .tira{ margin-bottom:0 }

/* El diario del reto */
.reto-bloque{ border-bottom:1px solid rgba(36,26,77,.45) }
.reto-bloque:last-child{ border-bottom:none }
.reto-bloque .reto-fila{ grid-template-columns:90px 14px 1fr auto auto; border-bottom:none }
.reto-notas{ display:flex; flex-direction:column; gap:6px; padding:0 0 12px 116px }
.reto-nota{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start;
  background:var(--plano-1); border:1px solid var(--linea); border-radius:10px; padding:10px 12px;
}
.reto-nota p{ margin:0; font-size:14px; line-height:1.55; color:var(--tinta); white-space:pre-wrap }
.reto-nota-fecha{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-tenue); padding-top:3px; white-space:nowrap }
.borrar-nota{ color:var(--tinta-tenue); cursor:pointer; font-size:18px; line-height:1; padding:0 2px }
.borrar-nota:hover{ color:#ffb8b2 }
.reto-form{ padding:4px 0 16px 116px }
.reto-form label{ text-transform:none; letter-spacing:0; font-size:13.5px; color:var(--tinta-media); margin-bottom:8px }
.reto-form textarea{ min-height:80px; margin-bottom:10px }
.reto-form .btn-suave{ cursor:pointer }
@media (max-width:640px){
  .reto-bloque .reto-fila{ grid-template-columns:78px 12px 1fr auto }
  .reto-bloque .reto-fila .reto-area{ display:none }
  .reto-notas, .reto-form{ padding-left:0 }
  .anillo{ width:120px; height:120px }
  .anillo-valor{ font-size:36px }
}

/* ── Protocolos: la rutina diaria (12-sep-2026) ─────────────────────────── */
.resumen-rutina{
  display:flex; gap:28px; align-items:center; flex-wrap:wrap; margin-bottom:28px;
}
.aro{
  --pct:0;
  width:132px; height:132px; border-radius:50%; flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:
    conic-gradient(var(--luz-punta) calc(var(--pct) * 1%), rgba(36,26,77,.65) 0),
    var(--plano-1);
  position:relative; transition:background .35s var(--curva);
}
.aro::after{
  content:''; position:absolute; inset:9px; border-radius:50%; background:var(--plano-1);
}
.aro-valor, .aro-pie{ position:relative; z-index:1 }
.aro-valor{ font-family:var(--display); font-size:32px; font-weight:700; line-height:1; color:var(--tinta) }
.aro-valor i{ font-style:normal; font-size:15px; color:var(--tinta-tenue); margin-left:1px }
.aro-pie{ font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-tenue) }
.resumen-datos{ flex:1 1 320px; display:flex; flex-direction:column; gap:16px }

.barras-30{ display:flex; align-items:flex-end; gap:3px; height:46px }
.barra-dia{
  flex:1; height:100%; display:flex; align-items:flex-end; cursor:pointer;
  border-radius:3px; transition:background .15s var(--curva);
}
.barra-dia:hover{ background:rgba(122,78,255,.12) }
.barra-dia i{
  display:block; width:100%; border-radius:3px;
  background:linear-gradient(180deg, var(--luz-punta), var(--luz));
  transition:height .3s var(--curva);
}
.barra-dia.vacio i{ background:rgba(36,26,77,.9) }
.barra-dia.hoy i{ box-shadow:0 0 10px -1px var(--luz-punta) }

.prioridades-hoy{
  background:var(--plano-1); border:1px solid var(--linea); border-left:2px solid var(--luz-punta);
  border-radius:12px; padding:14px 18px; margin-bottom:26px;
}
.prioridades-hoy .rotulo{ margin-bottom:8px }
.prioridades-hoy ul{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px }
.prioridades-hoy li{ font-size:14.5px; color:var(--tinta); line-height:1.5 }

.rutina{
  background:var(--plano-1); border:1px solid var(--linea); border-radius:16px;
  padding:20px 22px; margin-bottom:16px;
}
.rutina-cabeza{
  display:flex; justify-content:space-between; align-items:flex-start; gap:18px;
  padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--linea);
}
.rutina-cabeza h3{ font-family:var(--display); font-size:18px; font-weight:600; margin:0 }
.rutina-cabeza p{ font-size:13px; color:var(--tinta-tenue); margin:5px 0 0; line-height:1.5; max-width:60ch }
.rutina-cuenta{
  font-family:var(--display); font-size:22px; font-weight:600; color:var(--tinta); white-space:nowrap;
}
.rutina-cuenta i{ font-style:normal; font-size:12px; color:var(--tinta-tenue); margin-left:5px }

.habitos{ display:flex; flex-direction:column }
.habito{
  display:grid; grid-template-columns:26px 1fr auto; gap:14px; align-items:center;
  padding:13px 0; border-bottom:1px solid rgba(36,26,77,.45);
  cursor:pointer; text-transform:none; letter-spacing:0; margin:0;
  transition:opacity .18s var(--curva);
}
.habito:last-child{ border-bottom:none }
.habito.bloqueado{ cursor:default; opacity:.6 }
.habito input{ position:absolute; opacity:0; width:0; height:0 }
.tilde{
  width:24px; height:24px; border-radius:8px; border:1.5px solid var(--linea-viva);
  display:flex; align-items:center; justify-content:center;
  transition:all .18s var(--curva);
}
.tilde::after{
  content:''; width:11px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(.4); opacity:0; transition:all .18s var(--curva);
  margin-top:-2px;
}
.habito:hover .tilde{ border-color:var(--luz) }
.habito.hecho .tilde{ background:var(--luz); border-color:var(--luz) }
.habito.hecho .tilde::after{ opacity:1; transform:rotate(-45deg) scale(1) }
.habito-texto{ display:flex; flex-direction:column; gap:3px }
.habito-nombre{ font-size:15px; color:var(--tinta); transition:color .18s var(--curva) }
.habito-pie{ font-size:12.5px; color:var(--tinta-tenue); line-height:1.45 }
.habito.hecho .habito-nombre{ color:var(--tinta-media) }
.habito-recurso{ font-size:12px; color:var(--luz-punta); white-space:nowrap }

.segmentos.animo .segmento{ min-width:46px; text-align:center }
#f-reflexion .prioridad{ font-size:14px }

@media (max-width:640px){
  .aro{ width:104px; height:104px }
  .aro-valor{ font-size:26px }
  .habito{ grid-template-columns:24px 1fr; gap:12px }
  .habito-recurso{ grid-column:2 }
}

/* Lo de hoy, arriba de la bienvenida del alumno */
.hoy-tarjeta{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap; cursor:pointer;
  background:var(--plano-1); border:1px solid var(--linea); border-radius:18px;
  padding:20px 24px; margin-bottom:24px;
  transition:border-color .18s var(--curva), background .18s var(--curva);
}
.hoy-tarjeta:hover{ border-color:var(--luz); background:var(--plano-2) }
.hoy-tarjeta .aro{ width:96px; height:96px }
.hoy-tarjeta .aro::after{ inset:7px }
.hoy-tarjeta .aro-valor{ font-size:24px }
.hoy-tarjeta .aro-valor i{ font-size:13px }
.hoy-texto{ flex:1 1 260px }
.hoy-texto h3{ font-family:var(--display); font-size:21px; font-weight:600; margin:6px 0 0 }
.hoy-racha{ font-size:12.5px; color:var(--oro); margin:6px 0 0; letter-spacing:.04em }
.hoy-tarjeta .abrir{ white-space:nowrap }

/* ── Personaje: el ciclo de 120 días (15-sep-2026) ─────────────────────── */
.personaje-escena{
  display:grid; grid-template-columns:minmax(240px, 320px) 1fr; gap:34px; align-items:start;
  margin-bottom:28px;
}
.personaje-figura{
  background:var(--plano-1); border:1px solid var(--linea); border-radius:20px;
  padding:22px 20px 20px; text-align:center; position:relative; overflow:hidden;
}
.personaje-figura::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 38%, rgba(122,78,255,.14), transparent 60%);
}

/* La figura: la estrella que nace, en un lienzo (`personaje.js`). */
.figura{
  width:100%; max-width:270px; aspect-ratio:200/300; margin:0 auto 4px; position:relative;
}
.figura canvas{ position:absolute; inset:0; width:100%; height:100%; display:block }

.personaje-estado{ position:relative; display:flex; flex-direction:column; gap:6px; align-items:center }
.personaje-estado h3{ font-family:var(--display); font-size:26px; font-weight:600; margin:0 }
.personaje-estado p{ font-size:13px; color:var(--tinta-tenue); line-height:1.55; max-width:30ch; margin:0 }
.personaje-promedio{
  font-family:var(--display); font-size:15px; font-weight:600; color:var(--luz-punta); margin-top:6px;
}
.personaje-promedio i{ font-style:normal; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-tenue); margin-left:5px }

.personaje-datos{ display:flex; flex-direction:column; gap:22px; min-width:0 }
.personaje-nivel{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.nivel-grande, .nivel-prevalente{
  background:var(--plano-1); border:1px solid var(--linea); border-radius:16px; padding:18px 20px;
  display:flex; flex-direction:column; gap:4px;
}
.nivel-grande{ border-left:2px solid var(--tono, var(--luz)) }
.nivel-cifra{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:4px 0 0 }
.nivel-cifra .n{ font-family:var(--display); font-size:46px; font-weight:700; line-height:1; color:var(--tinta) }
.nivel-prevalente .nivel-cifra .n{ font-size:34px; color:var(--tinta-media) }
.nivel-cifra .delta{ margin-top:0 }
.nivel-nombre{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-tenue); margin-top:2px }

.barras-personaje{
  background:var(--plano-1); border:1px solid var(--linea); border-radius:16px; padding:6px 22px;
}
.barra-p{ padding:15px 0; border-bottom:1px solid rgba(36,26,77,.45); animation:entrar .5s var(--curva) both }
.barra-p:last-child{ border-bottom:none }
.barra-p-cabeza{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:8px }
.barra-p-nombre{ font-family:var(--display); font-size:15px; font-weight:600; color:var(--tinta) }
.barra-p-valor{ font-family:var(--display); font-size:18px; font-weight:600; color:var(--tinta) }
.barra-p-valor i{ font-style:normal; font-size:11px; color:var(--tinta-tenue); margin-left:2px }
.barra-p-pista{ height:8px; border-radius:6px; background:rgba(36,26,77,.75); overflow:hidden }
.barra-p-pista i{
  display:block; height:100%; border-radius:6px; width:0;
  background:linear-gradient(90deg, var(--luz), var(--luz-punta));
  box-shadow:0 0 12px -2px var(--luz-punta);
  transition:width .9s var(--curva-suave);
}

.personaje-rutinas{
  display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin-bottom:24px;
  background:var(--plano-1); border:1px solid var(--linea); border-radius:16px; padding:20px 22px;
}
.personaje-ciclo{ flex:1 1 320px; min-width:0 }
.rutina-cuenta.oro{ color:var(--oro) }
.ciclo-linea{
  --dia:0; --dias:120; --carga:30;
  position:relative; height:10px; border-radius:6px; background:rgba(36,26,77,.75); overflow:visible;
}
.ciclo-lleno{
  display:block; height:100%; border-radius:6px;
  width:calc(min(var(--dia), var(--dias)) / var(--dias) * 100%);
  background:linear-gradient(90deg, var(--luz-fria), var(--luz), var(--luz-punta));
  box-shadow:0 0 14px -2px var(--luz-punta);
  transition:width .9s var(--curva-suave);
}
.ciclo-carga{
  position:absolute; top:-5px; bottom:-5px; width:2px; border-radius:2px;
  left:calc(var(--carga) / var(--dias) * 100%); background:var(--oro); opacity:.8;
}
.ciclo-marcas{ display:flex; justify-content:space-between; margin-top:8px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-tenue) }
.ciclo-marca-carga{ color:var(--oro) }

@media (max-width:860px){
  .personaje-escena{ grid-template-columns:1fr }
  .personaje-figura{ max-width:420px; margin:0 auto; width:100% }
}
@media (max-width:640px){
  .personaje-nivel{ grid-template-columns:1fr }
  .nivel-cifra .n{ font-size:38px }
  .personaje-rutinas{ justify-content:center }
}