/* ==========================================================================
   Checador de Jornada — v2 «homebanking»
   Colegio Nuevo Sol · SUMA Beneficios

   Paleta extraída de sumabeneficios.com (Elementor global kit, post-5.css).
   Tratamiento visual tomado del homebanking de Santander Argentina:
   degradé de cabecera, tarjeta principal flotando sobre el degradé,
   grilla de accesos rápidos, lista de movimientos, barra inferior.

   El rojo de Santander NO entra. Su azul marino institucional (#004169)
   es casi el mismo que el primario de SUMA (#0D436B), así que la
   estructura del banco cae sola sobre la marca sin pedir prestado el rojo.
   ========================================================================== */

:root{
  /* — Marca SUMA, valores exactos del sitio — */
  --azul-hondo:   #0D436B;   /* --e-global-color-primary   */
  --azul-medio:   #497FC3;   /* el más usado del home, 18× */
  --azul-vivo:    #1C94D0;   /* --e-global-color-accent    */
  --azul-bruma:   #E6EEFC;
  --azul-niebla:  #F4F9FF;
  --azul-papel:   #F0F6FF;

  --gris:         #898F9A;
  --texto:        #706F6F;
  --tinta:        #0A2233;
  --linea:        #E4EBF5;

  /* El degradé real del sitio de SUMA: linear-gradient(143deg, primary 31%, #497FC3 100%) */
  --degrade:       linear-gradient(143deg, #0D436B 31%, #497FC3 100%);
  --degrade-vivo:  linear-gradient(143deg, #0D436B 8%, #1C94D0 100%);
  --degrade-suave: linear-gradient(143deg, #497FC3 0%, #1C94D0 100%);

  /* — Acentos frescos, para que el color signifique algo — */
  --verde:      #00A878;
  --verde-piso: #E4F7F1;
  --ambar:      #E89611;
  --ambar-piso: #FDF3E2;
  --coral:      #E8555F;
  --coral-piso: #FDECEE;
  --violeta:    #6E62D6;
  --violeta-piso:#EEECFB;
  --piedra-piso:#EFF1F4;

  --sombra-baja:  0 1px 2px rgba(13,67,107,.05), 0 2px 8px rgba(13,67,107,.05);
  --sombra:       0 2px 4px rgba(13,67,107,.05), 0 8px 24px rgba(13,67,107,.09);
  --sombra-alta:  0 4px 10px rgba(13,67,107,.07), 0 18px 48px rgba(13,67,107,.16);

  /* Logos reales de SUMA, bajados del sitio y embebidos.
     Van en base64 porque las maquetas se publican como file-mounts de texto
     en EasyPanel: un <img src="logo.png"> no tendría de dónde cargarlo. */
  --logo-circulo: url('data:image/png;base64,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');
  --logo-horizontal: url('data:image/png;base64,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');

  --r-chico: 10px;
  --r: 16px;
  --r-grande: 22px;

  --sans:  'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --tit:   'Rubik', var(--sans);
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

body{
  background:var(--azul-papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

h1,h2,h3,h4{ font-family:var(--tit); font-weight:600; letter-spacing:-.015em; margin:0; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ==========================================================================
   1. Teléfono — el marco donde vive la pantalla del docente
   ========================================================================== */

.telefono{
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  background:var(--azul-papel);
  position:relative;
  overflow-x:hidden;
  box-shadow:0 0 0 1px var(--linea);
}
@media(min-width:860px){
  body.con-marco{ background:#dbe6f5; padding:26px 0 90px; }
  body.con-marco .telefono{
    min-height:auto; border-radius:34px; overflow:hidden;
    box-shadow:var(--sombra-alta), 0 0 0 9px #16202c, 0 0 0 11px #2b3947;
  }
}

/* ==========================================================================
   2. Cabecera con degradé — el gesto que define al homebanking
   ========================================================================== */

.cabecera{
  background:var(--degrade);
  color:#fff;
  padding:22px 20px 74px;      /* el sobrante de abajo es donde flota la tarjeta */
  position:relative;
  border-radius:0 0 26px 26px;
}
.cabecera::after{             /* brillo diagonal, el truco del banco */
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 90% at 88% -12%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 58%);
}
.cabecera > *{ position:relative; z-index:1; }

.barra-marca{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.marca{ display:flex; align-items:center; gap:9px; }
/* El isotipo va sobre chip blanco: el logo circular es azul marino y sobre el
   degradé de la cabecera se perdería contra el fondo. Es además cómo un banco
   pone su marca en la barra superior. */
.marca .isotipo{
  width:33px; height:33px; border-radius:10px;
  background:#fff var(--logo-circulo) center / 80% no-repeat;
  box-shadow:0 1px 3px rgba(10,34,51,.22);
  font-size:0; text-indent:-9999px; overflow:hidden; flex:0 0 auto;
}
.marca .nombre{ font-family:var(--tit); font-weight:500; font-size:.93rem; letter-spacing:.01em; }
.marca .nombre b{ font-weight:700; }

.avatar{
  width:37px; height:37px; border-radius:50%; background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3);
  display:grid; place-items:center; font-family:var(--tit); font-weight:600; font-size:.83rem;
  letter-spacing:.02em;
}

.saludo{ font-family:var(--tit); font-size:1.62rem; font-weight:600; line-height:1.15; margin-bottom:3px; }
.saludo-fecha{ font-size:.86rem; opacity:.78; }

/* ==========================================================================
   3. Tarjeta principal — flota sobre el degradé, patrón puro de banco
   ========================================================================== */

.lienzo{ padding:0 16px 30px; }

.tarjeta-principal{
  background:#fff;
  border-radius:var(--r-grande);
  box-shadow:var(--sombra-alta);
  padding:20px;
  margin-top:-58px;            /* la superposición: la mitad entra en el degradé */
  position:relative; z-index:3;
}

.tp-rotulo{
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris); margin-bottom:11px; display:flex; align-items:center; gap:7px;
}
.punto{ width:7px; height:7px; border-radius:50%; background:var(--gris); flex:0 0 auto; }
.punto.vivo{ background:var(--verde); box-shadow:0 0 0 0 rgba(0,168,120,.55); animation:latir 2.1s infinite; }
@keyframes latir{ 70%{ box-shadow:0 0 0 9px rgba(0,168,120,0);} 100%{ box-shadow:0 0 0 0 rgba(0,168,120,0);} }

.tp-dato{ font-family:var(--tit); font-size:2.35rem; font-weight:600; line-height:1.05; letter-spacing:-.03em; }
.tp-dato.mono{ font-family:var(--mono); font-weight:500; letter-spacing:-.02em; }
.tp-pie{ color:var(--texto); font-size:.89rem; margin-top:5px; }
.tp-pie b{ color:var(--tinta); font-weight:600; }

.tp-fila{ display:flex; gap:10px; margin-top:17px; padding-top:16px; border-top:1px solid var(--linea); }
.tp-fila > div{ flex:1; }
.tp-fila .k{ font-size:.67rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); }
.tp-fila .v{ font-size:.96rem; font-weight:600; margin-top:1px; }

/* ==========================================================================
   4. Botones
   ========================================================================== */

.boton{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; border:0; cursor:pointer;
  font-family:var(--sans); font-size:1rem; font-weight:600;
  padding:15px 20px; border-radius:14px;
  background:var(--degrade-vivo); color:#fff;
  box-shadow:0 4px 14px rgba(28,148,208,.30);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s;
}
.boton svg{ width:19px; height:19px; flex:0 0 auto; }
.boton:hover{ box-shadow:0 6px 20px rgba(28,148,208,.40); }
.boton:active{ transform:translateY(2px); box-shadow:0 2px 8px rgba(28,148,208,.30); }
.boton:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.boton.secundario{
  background:#fff; color:var(--azul-hondo); box-shadow:none;
  border:1.5px solid var(--linea);
}
.boton.secundario:hover{ border-color:var(--azul-medio); background:var(--azul-niebla); }
.boton.fantasma{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.42); box-shadow:none; }
.boton.fantasma:hover{ background:rgba(255,255,255,.12); }
.boton.cerrar{ background:linear-gradient(143deg,#0A3556 20%,#2E6FA8 100%); }
.boton + .boton{ margin-top:10px; }

/* ==========================================================================
   5. Accesos rápidos — la grilla de íconos del banco
   ========================================================================== */

.accesos{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:20px; }
.acceso{
  background:#fff; border-radius:var(--r); padding:14px 6px 11px;
  text-align:center; box-shadow:var(--sombra-baja); border:1px solid transparent;
  cursor:pointer; transition:transform .12s, border-color .12s;
}
.acceso:hover{ transform:translateY(-2px); border-color:var(--azul-bruma); }
.acceso .ico{
  width:38px; height:38px; margin:0 auto 7px; border-radius:12px;
  background:var(--azul-bruma); color:var(--azul-hondo);
  display:grid; place-items:center;
}
.acceso .ico svg{ width:19px; height:19px; }
.acceso span{ font-size:.68rem; font-weight:600; color:var(--texto); line-height:1.25; display:block; }

/* ==========================================================================
   6. Movimientos — la lista de checadas
   ========================================================================== */

.bloque{ margin-top:24px; }
.bloque-tit{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:11px; padding:0 3px;
}
.bloque-tit h3{ font-size:1.02rem; font-weight:600; }
.bloque-tit a{ font-size:.8rem; font-weight:600; color:var(--azul-vivo); text-decoration:none; }

.lista{ background:#fff; border-radius:var(--r); box-shadow:var(--sombra-baja); overflow:hidden; }
.mov{ display:flex; align-items:center; gap:12px; padding:13px 15px; border-bottom:1px solid var(--linea); }
.mov:last-child{ border-bottom:0; }
.mov .mico{
  width:39px; height:39px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; background:var(--azul-bruma); color:var(--azul-hondo);
}
.mov .mico svg{ width:17px; height:17px; }
.mov .mico.entrada{ background:var(--verde-piso); color:var(--verde); }
.mov .mico.salida{ background:var(--azul-bruma); color:var(--azul-medio); }
.mov .cuerpo{ flex:1; min-width:0; }
.mov .t{ font-weight:600; font-size:.93rem; }
.mov .s{ font-size:.79rem; color:var(--gris); margin-top:1px; }
.mov .hora{ font-family:var(--mono); font-size:.96rem; font-weight:500; text-align:right; }
.mov .hora small{ display:block; font-family:var(--sans); font-size:.7rem; color:var(--gris); font-weight:600; }

/* ==========================================================================
   7. Barra inferior
   ========================================================================== */

.barra-inferior{
  position:sticky; bottom:0; z-index:20;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px);
  border-top:1px solid var(--linea); padding:7px 4px calc(7px + env(safe-area-inset-bottom));
}
.bi{ text-align:center; padding:5px 2px; color:var(--gris); cursor:pointer; }
.bi svg{ width:21px; height:21px; display:block; margin:0 auto 3px; }
.bi span{ font-size:.63rem; font-weight:600; }
.bi.activo{ color:var(--azul-vivo); }

/* ==========================================================================
   8. Pantallas de paso — login, permiso, conectando
   ========================================================================== */

.pantalla-llena{
  min-height:100vh; background:var(--degrade); color:#fff;
  display:flex; flex-direction:column; padding:34px 24px calc(30px + env(safe-area-inset-bottom));
  position:relative; overflow:hidden;
}
body.con-marco .pantalla-llena{ min-height:720px; }
.pantalla-llena::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(105% 62% at 82% -8%, rgba(255,255,255,.19) 0%, rgba(255,255,255,0) 62%);
}
.pantalla-llena > *{ position:relative; z-index:1; }
.pll-centro{ flex:1; display:flex; flex-direction:column; justify-content:center; }
.pll-tit{ font-family:var(--tit); font-size:1.86rem; font-weight:600; line-height:1.16; margin-bottom:9px; }
.pll-sub{ font-size:.97rem; opacity:.82; line-height:1.5; max-width:34ch; }

.marca-grande{ display:flex; align-items:center; gap:11px; margin-bottom:auto; }
.marca-grande .isotipo{
  width:46px; height:46px; border-radius:14px;
  background:#fff var(--logo-circulo) center / 80% no-repeat;
  box-shadow:0 2px 6px rgba(10,34,51,.24);
  font-size:0; text-indent:-9999px; overflow:hidden; flex:0 0 auto;
}
.marca-grande .nombre{ font-family:var(--tit); font-size:1.06rem; font-weight:500; }
.marca-grande .nombre b{ font-weight:700; }
.marca-grande .nombre small{ display:block; font-family:var(--sans); font-size:.74rem; opacity:.72; font-weight:400; }

/* Elegir docente */
.docentes{ display:flex; flex-direction:column; gap:9px; margin:22px 0 4px; }
.docente-op{
  display:flex; align-items:center; gap:12px; width:100%;
  background:rgba(255,255,255,.11); border:1.5px solid rgba(255,255,255,.2);
  border-radius:14px; padding:13px 15px; cursor:pointer; color:#fff;
  font-family:var(--sans); font-size:1rem; text-align:left; transition:background .13s, border-color .13s;
}
.docente-op:hover{ background:rgba(255,255,255,.19); border-color:rgba(255,255,255,.42); }
.docente-op.elegido{ background:#fff; color:var(--azul-hondo); border-color:#fff; font-weight:600; }
.docente-op .ini{
  width:36px; height:36px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:rgba(255,255,255,.2); font-family:var(--tit); font-weight:600; font-size:.8rem;
}
.docente-op.elegido .ini{ background:var(--azul-bruma); color:var(--azul-hondo); }

/* Permiso de ubicación */
.icono-grande{
  width:88px; height:88px; border-radius:28px; margin:0 auto 24px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26);
  display:grid; place-items:center;
}
.icono-grande svg{ width:41px; height:41px; }

.puntos-permiso{ list-style:none; padding:0; margin:22px 0 0; }
.puntos-permiso li{ display:flex; gap:11px; align-items:flex-start; padding:9px 0; font-size:.92rem; opacity:.9; }
.puntos-permiso svg{ width:17px; height:17px; flex:0 0 auto; margin-top:3px; opacity:.85; }

/* Conectando */
.aro{
  width:74px; height:74px; margin:0 auto 26px; border-radius:50%;
  border:3px solid rgba(255,255,255,.2); border-top-color:#fff;
  animation:girar .95s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg); } }
.progreso{ height:4px; border-radius:3px; background:rgba(255,255,255,.2); overflow:hidden; margin-top:26px; }
.progreso i{ display:block; height:100%; width:0; border-radius:3px; background:#fff; transition:width .25s linear; }
.pasos-conexion{ margin-top:18px; font-size:.87rem; opacity:.8; min-height:1.4em; text-align:center; }

/* ==========================================================================
   9. Comprobante — el reemplazo bancario del sello
   ========================================================================== */

.comprobante{
  background:#fff; border-radius:var(--r-grande); box-shadow:var(--sombra-alta);
  padding:28px 22px 22px; margin-top:-58px; position:relative; z-index:3; text-align:center;
  overflow:hidden;
}
.comprobante::before{        /* muesca de papel troquelado, arriba */
  content:''; position:absolute; top:-11px; left:-11px; right:-11px; height:22px;
  background:radial-gradient(circle at 11px 11px, transparent 10px, #fff 10.5px);
  background-size:22px 22px;
}
.tilde{
  width:74px; height:74px; margin:0 auto 17px; border-radius:50%;
  background:var(--verde-piso); display:grid; place-items:center;
  animation:brotar .42s cubic-bezier(.34,1.56,.64,1) both;
}
.tilde svg{ width:36px; height:36px; color:var(--verde); }
.tilde svg path{ stroke-dasharray:34; stroke-dashoffset:34; animation:trazar .42s .2s ease-out forwards; }
@keyframes brotar{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }
@keyframes trazar{ to{ stroke-dashoffset:0; } }

.comprobante h2{ font-size:1.3rem; margin-bottom:5px; }
.comprobante .sub{ color:var(--texto); font-size:.9rem; margin-bottom:20px; }

.recibo{ border-top:1px dashed var(--linea); padding-top:15px; text-align:left; }
.recibo .r{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 0; font-size:.89rem; }
.recibo .r .k{ color:var(--gris); flex:0 0 auto; }
.recibo .r .v{ font-weight:600; text-align:right; }
.recibo .r .v.mono{ font-family:var(--mono); font-weight:500; }

/* ==========================================================================
   10. Sello de goma — se conserva para la variante «con sello»
   ========================================================================== */

.sello-caja{ display:grid; place-items:center; padding:16px 0 4px; }
.sello{
  --giro:-7deg;
  border:3.5px double var(--azul-hondo); color:var(--azul-hondo);
  border-radius:11px; padding:11px 20px 9px; text-align:center;
  font-family:var(--tit); text-transform:uppercase; letter-spacing:.11em;
  opacity:.87; transform:rotate(var(--giro));
  animation:estampar .5s cubic-bezier(.3,1.5,.5,1) both;
}
.sello .grande{ font-size:1.28rem; font-weight:700; line-height:1.1; }
.sello .chica{ font-size:.6rem; letter-spacing:.16em; margin-top:3px; opacity:.8; }
.sello .hora{ font-family:var(--mono); font-size:1.02rem; letter-spacing:.04em; margin-top:5px; font-weight:500; }
@keyframes estampar{
  0%{ transform:rotate(var(--giro)) scale(2.4); opacity:0; }
  62%{ transform:rotate(var(--giro)) scale(.94); opacity:.95; }
  100%{ transform:rotate(var(--giro)) scale(1); opacity:.87; }
}

/* ==========================================================================
   11. Banderas
   ========================================================================== */

.bandera{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.71rem; font-weight:600; padding:3px 9px; border-radius:999px;
  white-space:nowrap; line-height:1.5;
}
.bandera::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.b-ok       { background:var(--verde-piso);   color:#03875F; }
.b-fuera    { background:var(--coral-piso);   color:#C6323C; }
.b-sinubic  { background:var(--piedra-piso);  color:#5C6470; }
.b-precision{ background:var(--ambar-piso);   color:#A96A00; }
.b-dudoso   { background:var(--ambar-piso);   color:#A96A00; }
.b-abierta  { background:var(--violeta-piso); color:#4B3FB5; }
.b-mismodisp{ background:var(--coral-piso);   color:#C6323C; }

/* ==========================================================================
   12. Panel del administrador — escritorio, misma marca
   ========================================================================== */

body.panel{ background:var(--azul-papel); }

.panel-cabecera{
  background:var(--degrade); color:#fff; padding:17px 26px; position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.panel-cabecera::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 180% at 92% 0%, rgba(255,255,255,.17) 0%, rgba(255,255,255,0) 60%);
}
.panel-cabecera > *{ position:relative; z-index:1; }
.isotipo-panel{
  width:42px; height:42px; border-radius:12px; flex:0 0 auto;
  background:#fff var(--logo-circulo) center / 80% no-repeat;
  box-shadow:0 2px 6px rgba(10,34,51,.24);
}
.panel-cabecera .titulo{ font-family:var(--tit); font-size:1.12rem; font-weight:600; }
.panel-cabecera .titulo small{ display:block; font-family:var(--sans); font-size:.77rem; opacity:.75; font-weight:400; }

.panel-wrap{ max-width:1320px; margin:0 auto; padding:20px 26px 40px; }

.metricas{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:20px; }
.metrica{ background:#fff; border-radius:var(--r); padding:15px 17px; box-shadow:var(--sombra-baja); }
.metrica .k{ font-size:.67rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--gris); }
.metrica .v{ font-family:var(--tit); font-size:1.92rem; font-weight:600; line-height:1.15; margin-top:3px; letter-spacing:-.02em; }
.metrica .d{ font-size:.78rem; color:var(--texto); }
.metrica.alerta .v{ color:var(--coral); }

.columnas{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:16px; align-items:start; }

.panel-caja{ background:#fff; border-radius:var(--r); box-shadow:var(--sombra); overflow:hidden; }
.panel-caja > header{
  padding:14px 18px; border-bottom:1px solid var(--linea);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.panel-caja > header h3{ font-size:1rem; font-weight:600; }
.panel-caja > header p{ margin:1px 0 0; font-size:.78rem; color:var(--gris); }
.panel-cuerpo{ padding:16px 18px; }

#mapa{ height:390px; width:100%; background:var(--azul-bruma); }
.leaflet-container{ font-family:var(--sans); }

.control{ padding:14px 18px; border-top:1px solid var(--linea); background:var(--azul-niebla); }
.control label{ font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--gris); display:block; margin-bottom:8px; }
.control .fila{ display:flex; align-items:center; gap:13px; }
.control input[type=range]{ flex:1; accent-color:var(--azul-vivo); height:5px; }
.control .valor{ font-family:var(--mono); font-weight:600; font-size:.97rem; color:var(--azul-hondo); min-width:66px; text-align:right; }
.control .pista{ font-size:.77rem; color:var(--gris); margin-top:9px; }

table.checadas{ width:100%; border-collapse:separate; border-spacing:0; font-size:.87rem; }
table.checadas th{
  background:var(--azul-niebla); color:var(--gris);
  font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  text-align:left; padding:9px 12px; position:sticky; top:0; z-index:2;
  border-bottom:1px solid var(--linea);
}
table.checadas td{ padding:10px 12px; border-bottom:1px solid var(--linea); vertical-align:middle; }
table.checadas tr:last-child td{ border-bottom:0; }
table.checadas tbody tr{ transition:background .13s; }
table.checadas tbody tr:hover{ background:var(--azul-niebla); }
table.checadas .quien{ font-weight:600; }
table.checadas .mono{ font-family:var(--mono); }
/* Alto pensado para que la columna de la tabla termine a la par de la del mapa. */
.tabla-scroll{ max-height:648px; overflow:auto; }

tr.destello{ animation:destellar 1.5s ease-out; }
@keyframes destellar{ 0%{ background:#D7ECFB; } 100%{ background:transparent; } }

.chip-tipo{ font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:2px 8px; border-radius:6px; }
.chip-tipo.entrada{ background:var(--verde-piso); color:#03875F; }
.chip-tipo.salida{ background:var(--azul-bruma); color:var(--azul-hondo); }

/* ==========================================================================
   13. Barra de maqueta — el andamio para recorrer estados en la demo
   ========================================================================== */

.barra-maqueta{
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  background:#0A2233; color:#fff; padding:9px 14px calc(9px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:.76rem; box-shadow:0 -3px 18px rgba(10,34,51,.28);
}
.barra-maqueta .et{
  font-size:.6rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:#7FB4DD; margin-right:2px;
}
.barra-maqueta button{
  background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.17);
  border-radius:8px; padding:5px 11px; font:inherit; font-size:.76rem; font-weight:500; cursor:pointer;
  transition:background .12s, border-color .12s;
}
.barra-maqueta button:hover{ background:rgba(255,255,255,.21); border-color:rgba(255,255,255,.4); }
.barra-maqueta button.on{ background:var(--azul-vivo); border-color:var(--azul-vivo); font-weight:600; }
.barra-maqueta .sep{ width:1px; height:19px; background:rgba(255,255,255,.17); margin:0 3px; }
.barra-maqueta .lejos{ margin-left:auto; }
.barra-maqueta a{ color:#7FB4DD; text-decoration:none; font-weight:600; }
.barra-maqueta a:hover{ color:#fff; }
body{ padding-bottom:62px; }

/* ==========================================================================
   14. Portada
   ========================================================================== */

.portada{ max-width:920px; margin:0 auto; padding:0 22px 60px; }
.portada-hero{
  background:var(--degrade); color:#fff; border-radius:0 0 30px 30px;
  margin:0 -22px 30px; padding:38px 30px 44px; position:relative; overflow:hidden;
}
.portada-hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(78% 105% at 88% -10%, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 60%);
}
.portada-hero > *{ position:relative; z-index:1; }
.portada-hero h1{ font-size:2.6rem; font-weight:600; line-height:1.05; margin:20px 0 11px; max-width:15ch; }
.portada-hero p{ margin:0; font-size:1.02rem; opacity:.85; max-width:50ch; line-height:1.55; }
.pastilla{
  display:inline-block; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.26);
  border-radius:999px; padding:4px 13px; font-size:.68rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; margin-top:18px;
}

.puertas{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.puerta{
  background:#fff; border-radius:var(--r-grande); padding:24px; box-shadow:var(--sombra);
  text-decoration:none; color:inherit; display:block; border:1.5px solid transparent;
  transition:transform .14s, box-shadow .14s, border-color .14s;
}
.puerta:hover{ transform:translateY(-3px); box-shadow:var(--sombra-alta); border-color:var(--azul-bruma); }
.puerta .rol{ font-size:.64rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--azul-vivo); }
.puerta h2{ font-size:1.35rem; margin:7px 0 8px; }
.puerta p{ margin:0 0 15px; font-size:.9rem; color:var(--texto); line-height:1.5; }
.puerta .ir{ font-size:.88rem; font-weight:600; color:var(--azul-hondo); display:inline-flex; align-items:center; gap:6px; }
.puerta .variantes{ margin-top:13px; padding-top:13px; border-top:1px solid var(--linea); display:flex; gap:8px; flex-wrap:wrap; }
.puerta .variantes b{ font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); width:100%; }
.mini-liga{
  font-size:.79rem; font-weight:600; color:var(--azul-hondo); text-decoration:none;
  background:var(--azul-bruma); padding:5px 11px; border-radius:8px; transition:background .12s;
}
.mini-liga:hover{ background:var(--azul-vivo); color:#fff; }

.notas{ background:#fff; border-radius:var(--r); padding:20px 22px; box-shadow:var(--sombra-baja); margin-top:18px; }
.notas h3{ font-size:.68rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--azul-vivo); margin-bottom:11px; }
.notas ul{ margin:0; padding-left:19px; font-size:.9rem; color:var(--texto); line-height:1.65; }
.notas li{ margin-bottom:6px; }
.notas b{ color:var(--tinta); font-weight:600; }
.notas code{ font-family:var(--mono); font-size:.85em; background:var(--azul-bruma); padding:1px 6px; border-radius:5px; color:var(--azul-hondo); }

.pie{ margin-top:26px; padding-top:16px; border-top:1px solid var(--linea); font-size:.8rem; color:var(--gris); }
.pie b{ color:var(--azul-hondo); }

@media(max-width:720px){
  .puertas{ grid-template-columns:1fr; }
  .portada-hero h1{ font-size:2rem; }
  .metricas{ grid-template-columns:repeat(2,1fr); }
  .columnas{ grid-template-columns:1fr; }
}