/* sistema.css — la casa común de todas las pantallas del sistema.

   Los colores y la tipografía NO están acá: vienen de /<marca>/marca.css, que los genera
   marca.py desde restaurantes.json. Acá vive la FORMA, que es igual para todos los
   restaurantes; allá vive la ROPA, que es de cada uno.

   Orden de carga en cada pantalla:  marca.css  →  sistema.css  →  el estilo propio de la pantalla.

   ⚠️ POR QUÉ ESTE ARCHIVO CRECIÓ (24-sep-2026). Cada pantalla se estaba escribiendo su propio
      CSS: seis definiciones distintas de «tarjeta», cuatro tamaños distintos de letra chica,
      tres botones que no eran el mismo botón. Por eso el sistema parecía una plantilla aunque
      cada pantalla estuviera bien: no se parecían entre ellas. Lo que está acá NO se vuelve a
      escribir en una pantalla. Si falta una pieza, se agrega acá y la tienen todas.

   ⚠️ TODAS las clases llevan el prefijo `sis-` y cada regla declara su color y su tipografía.
      No se hereda nada: estos bloques se dibujan DENTRO de pantallas que tienen su propio CSS,
      y un `.chip` o un `h2` de la pantalla le pisaba el color a la intro sin que nadie lo
      notara hasta mirar la captura.

   ⚠️ 44 px de alto mínimo en todo lo que se toca. Medido el 24-sep: los botones de 7/30/90 días
      del tablero medían 28 px y el de pausar 37. En una tablet de cocina con las manos
      ocupadas, eso no se acierta.  */

*,*::before,*::after{box-sizing:border-box}

:root{
  /* Los que faltan si una pantalla carga sistema.css sin marca.css (no debería pasar, pero
     entonces se ve fea en vez de romperse). */
  --r:12px; --r-g:18px; --r-p:8px;
  --toque:44px;
  --sombra:0 1px 2px rgba(15,23,42,.04), 0 6px 18px rgba(15,23,42,.07);
  --sombra-alta:0 12px 34px rgba(15,23,42,.14);
  --barra:60px;
  --transicion:.18s cubic-bezier(.2,.7,.3,1);
}

/* ── base ──────────────────────────────────────────────────────────────────── */
.sis-papel{background:var(--papel);color:var(--tinta);font-family:var(--tipo-cuerpo);
  font-size:var(--t-m);line-height:1.5;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
.sis-hondo{background:var(--fondo);color:var(--sobre-fondo);font-family:var(--tipo-cuerpo);
  font-size:var(--t-m);line-height:1.5;-webkit-font-smoothing:antialiased}

/* El titular de la marca: familia, peso, interletrado y la escala que compensa que una
   condensada y una serif no ocupan lo mismo a la misma medida. */
.sis-titular{font-family:var(--tipo-titular);font-weight:var(--peso-titular);
  letter-spacing:var(--titular-tracking);line-height:1.06}
.sis-t1{font-size:calc(var(--t-4xl) * var(--titular-escala))}
.sis-t2{font-size:calc(var(--t-3xl) * var(--titular-escala))}
.sis-t3{font-size:calc(var(--t-2xl) * var(--titular-escala))}
.sis-t4{font-size:calc(var(--t-xl)  * var(--titular-escala))}

/* ── la barra de arriba: la misma en todas las pantallas ─────────────────── */
.sis-barra{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:var(--e3);
  min-height:var(--barra);padding:0 var(--e4);background:var(--fondo);color:var(--sobre-fondo)}
.sis-barra .sis-logo{height:28px;width:auto;display:block}
.sis-barra .sis-nombre{font-family:var(--tipo-titular);font-weight:var(--peso-titular);
  font-size:var(--t-l);letter-spacing:var(--titular-tracking);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;color:var(--sobre-fondo)}
.sis-barra .sis-nombre small{display:block;font-family:var(--tipo-cuerpo);font-weight:500;
  font-size:var(--t-xs);color:var(--gris-fondo);letter-spacing:0;margin-top:1px}
.sis-barra .sis-sep{flex:1}

/* el conmutador de pantallas: es la navegación del sistema */
.sis-nav{display:flex;gap:2px;background:rgba(255,255,255,.10);border-radius:var(--r);padding:3px}
.sis-nav a{display:flex;align-items:center;gap:7px;padding:0 var(--e3);min-height:var(--toque);
  border-radius:var(--r-p);color:var(--sobre-fondo);text-decoration:none;font-size:var(--t-s);
  font-weight:700;opacity:.8;white-space:nowrap;transition:background var(--transicion),opacity var(--transicion)}
.sis-nav a:hover{opacity:1;background:rgba(255,255,255,.10)}
.sis-nav a[aria-current="page"]{background:var(--color);color:var(--sobre-color);opacity:1}
.sis-nav a svg{width:17px;height:17px;flex:none}
.sis-nav a .sis-punto{width:8px;height:8px;border-radius:50%;background:var(--color);flex:none}
@media (max-width:900px){
  .sis-nav a span{display:none}
  .sis-nav a{padding:0 11px}
}

/* el menú de abajo, en teléfono: la mano llega al pulgar, no al borde de arriba */
.sis-pie{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
  background:var(--fondo);color:var(--sobre-fondo);padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 20px rgba(0,0,0,.25)}
.sis-pie .sis-nav{background:transparent;padding:0;justify-content:space-around;width:100%}
.sis-pie .sis-nav a{flex-direction:column;gap:3px;font-size:10.5px;letter-spacing:.02em;
  padding:6px 4px;min-height:var(--toque);min-width:56px;justify-content:center}
.sis-pie .sis-nav a span{display:block}
.sis-pie .sis-nav a svg{width:21px;height:21px}
@media (max-width:640px){
  .sis-pie{display:flex}
  .sis-barra .sis-nav{display:none}
  body{padding-bottom:78px}
}

/* ── superficie ───────────────────────────────────────────────────────────── */
.sis-carta{background:var(--papel2);border-radius:var(--r-g);padding:var(--e5);
  box-shadow:var(--sombra);border:1px solid var(--linea)}
.sis-carta.sis-plana{box-shadow:none}
.sis-carta.sis-oscura{background:var(--fondo);color:var(--sobre-fondo);border-color:transparent}
.sis-carta.sis-oscura .sis-titulo{color:var(--gris-fondo)}

.sis-titulo{margin:0 0 var(--e3);font-size:var(--t-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--gris);font-weight:700;font-family:var(--tipo-cuerpo);
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--e3)}
.sis-titulo .sis-nota{font-weight:500;letter-spacing:0;text-transform:none;color:var(--gris)}

/* ── cifras ───────────────────────────────────────────────────────────────── */
.sis-cifra{font-family:var(--tipo-titular);font-weight:var(--peso-titular);
  font-size:calc(var(--t-4xl) * var(--titular-escala));letter-spacing:var(--titular-tracking);
  line-height:1;color:var(--tinta);font-variant-numeric:tabular-nums}
/* La cifra es TEXTO: usa el token medido para texto grande, no el de rellenos. */
.sis-cifra.sis-acento{color:var(--acento-cifra)}

.sis-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e2)}
.sis-kpis.sis-tres{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.sis-kpis,.sis-kpis.sis-tres{grid-template-columns:repeat(2,1fr)}}
.sis-kpi{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  padding:var(--e3) var(--e3)}
.sis-kpi b{display:block;font-family:var(--tipo-titular);font-weight:var(--peso-titular);
  font-size:calc(var(--t-xl) * var(--titular-escala));color:var(--tinta);
  letter-spacing:var(--titular-tracking);font-variant-numeric:tabular-nums;line-height:1.1}
.sis-kpi small{display:block;font-size:var(--t-xs);color:var(--gris);margin-top:2px;line-height:1.3}

/* ── el semáforo: un punto que dice la verdad medida ─────────────────────── */
.sis-luz{width:12px;height:12px;border-radius:50%;background:var(--verde);flex:none;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--verde) 25%, transparent)}
.sis-luz[data-e="aviso"]{background:var(--ambar);box-shadow:0 0 0 4px color-mix(in srgb, var(--ambar) 25%, transparent)}
.sis-luz[data-e="mal"]{background:var(--rojo);box-shadow:0 0 0 4px color-mix(in srgb, var(--rojo) 25%, transparent);
  animation:sis-latir 1s infinite}
@keyframes sis-latir{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.sis-luz[data-e="mal"]{animation:none}}

/* ── botones ──────────────────────────────────────────────────────────────── */
.sis-boton{appearance:none;border:0;border-radius:var(--r);padding:0 var(--e4);
  min-height:var(--toque);display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--tipo-cuerpo);font-weight:700;font-size:var(--t-s);cursor:pointer;
  background:var(--color);color:var(--sobre-color);transition:filter var(--transicion),
  transform var(--transicion);text-decoration:none;line-height:1}
.sis-boton:hover{filter:brightness(1.06)}
.sis-boton:active{transform:translateY(1px)}
.sis-boton:focus-visible{outline:3px solid color-mix(in srgb,var(--color) 55%,transparent);outline-offset:2px}
.sis-boton.sis-grande{min-height:54px;font-size:var(--t-l);padding:0 var(--e5);border-radius:var(--r-g)}
.sis-boton.sis-fantasma{background:transparent;color:inherit;border:1.5px solid currentColor;opacity:.9}
.sis-boton.sis-suave{background:var(--papel);color:var(--tinta);border:1px solid var(--linea)}
.sis-boton.sis-peligro{background:var(--rojo);color:#fff}
/* Un boton apagado se apaga con COLOR, no con opacidad: la opacidad deshace el
   calculo del token y lo dejaba en 2.34. Sigue leyendose, y sigue pareciendo apagado. */
.sis-boton[disabled],.sis-boton[aria-disabled="true"]{cursor:default;filter:none;
  background:color-mix(in srgb,var(--color) 18%,var(--papel));color:var(--gris)}
.sis-boton svg{width:17px;height:17px;flex:none}
/* Un boton que solo lleva icono tiene que seguir siendo cuadrado y tocable. */
.sis-boton.sis-icono{min-width:var(--toque);padding:0}

/* un grupo de opciones (7 / 30 / 90 días): son botones, y se tocan */
.sis-grupo{display:inline-flex;background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--r);padding:3px;gap:2px}
.sis-grupo button{appearance:none;border:0;background:transparent;color:var(--gris);
  font-family:var(--tipo-cuerpo);font-weight:700;font-size:var(--t-xs);cursor:pointer;
  border-radius:var(--r-p);padding:0 var(--e3);min-height:var(--toque);min-width:56px;
  transition:background var(--transicion),color var(--transicion)}
.sis-grupo button[aria-pressed="true"],.sis-grupo button.on{background:var(--papel2);
  color:var(--tinta);box-shadow:var(--sombra)}

/* ── formularios ──────────────────────────────────────────────────────────── */
.sis-campo{display:block;margin-bottom:var(--e4)}
.sis-campo > span{display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gris);margin-bottom:6px}
.sis-input,.sis-campo input,.sis-campo select,.sis-campo textarea{
  width:100%;font-family:var(--tipo-cuerpo);font-size:var(--t-l);min-height:var(--toque);
  padding:11px var(--e3);border-radius:var(--r);border:1.5px solid var(--linea);
  background:var(--papel2);color:var(--tinta);outline:none;transition:border-color var(--transicion),
  box-shadow var(--transicion)}
.sis-input:focus,.sis-campo input:focus,.sis-campo select:focus,.sis-campo textarea:focus{
  border-color:var(--color);box-shadow:0 0 0 3px color-mix(in srgb,var(--color) 30%,transparent)}
/* El texto de ejemplo de un campo tambien hay que poder leerlo. */
.sis-input::placeholder{color:var(--gris)}
.sis-ayuda{display:block;font-size:var(--t-xs);color:var(--gris);margin-top:5px;line-height:1.4}

/* ⚠️ El tinte de fondo va al 7 %: los tokens `-texto` están calculados contra el papel
   limpio, y sobre un fondo más teñido el mismo texto pierde contraste — el aviso rojo
   medía 3.98 donde hacen falta 4.5. Con el tinte suave, el cálculo sigue valiendo. */
/* ── avisos ───────────────────────────────────────────────────────────────── */
.sis-aviso{display:flex;gap:var(--e3);align-items:flex-start;border-radius:var(--r);
  padding:var(--e3) var(--e4);font-size:var(--t-s);line-height:1.45;border:1px solid}
.sis-aviso b{font-weight:700}
.sis-aviso.sis-bien{background:color-mix(in srgb,var(--verde) 7%,var(--papel2));
  border-color:color-mix(in srgb,var(--verde) 35%,transparent);color:var(--verde-texto)}
.sis-aviso.sis-ojo{background:color-mix(in srgb,var(--ambar) 7%,var(--papel2));
  border-color:color-mix(in srgb,var(--ambar) 35%,transparent);color:var(--ambar-texto)}
.sis-aviso.sis-mal{background:color-mix(in srgb,var(--rojo) 7%,var(--papel2));
  border-color:color-mix(in srgb,var(--rojo) 32%,transparent);color:var(--rojo-texto)}

/* ── chips y etiquetas ────────────────────────────────────────────────────── */
.sis-chip{display:inline-flex;align-items:center;gap:6px;background:var(--papel);
  border:1px solid var(--linea);border-radius:999px;padding:5px 12px;font-size:var(--t-xs);
  font-weight:700;color:var(--tinta);font-family:var(--tipo-cuerpo);line-height:1.2}
.sis-chip.sis-lleno{background:var(--color);color:var(--sobre-color);border-color:transparent}
.sis-chip svg{width:14px;height:14px}

/* ── tablas y listas ──────────────────────────────────────────────────────── */
.sis-tabla{width:100%;border-collapse:collapse;font-size:var(--t-s)}
.sis-tabla th{text-align:left;font-size:var(--t-xs);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gris);padding:0 var(--e2) var(--e2);border-bottom:1px solid var(--linea)}
.sis-tabla td{padding:var(--e3) var(--e2);border-bottom:1px solid var(--linea);color:var(--tinta)}
.sis-tabla tr:last-child td{border-bottom:0}
.sis-tabla .sis-num{text-align:right;font-variant-numeric:tabular-nums}

.sis-fila{display:flex;align-items:center;gap:var(--e3);padding:var(--e3) 0;
  border-bottom:1px solid var(--linea)}
.sis-fila:last-child{border-bottom:0}
.sis-fila .sis-cuerpo{flex:1;min-width:0}
.sis-fila b{display:block;font-size:var(--t-m);font-weight:700;color:var(--tinta)}
.sis-fila small{display:block;font-size:var(--t-xs);color:var(--gris);margin-top:2px}
.sis-fila .sis-num{font-variant-numeric:tabular-nums;font-weight:700;color:var(--tinta);white-space:nowrap}

/* ── el hueco: qué se ve cuando todavía no hay nada ───────────────────────── */
/* Una pantalla vacía sin explicación parece rota. Esto dice qué falta y qué hacer. */
.sis-hueco{text-align:center;padding:var(--e6) var(--e4);color:var(--gris)}
.sis-hueco .sis-icono{width:44px;height:44px;margin:0 auto var(--e3);opacity:.45;color:var(--tinta)}
.sis-hueco b{display:block;font-family:var(--tipo-titular);font-weight:var(--peso-titular);
  font-size:calc(var(--t-xl) * var(--titular-escala));color:var(--tinta);
  letter-spacing:var(--titular-tracking);margin-bottom:6px}
.sis-hueco p{margin:0 auto;max-width:34ch;font-size:var(--t-s);line-height:1.5;color:var(--gris)}
.sis-hueco .sis-boton{margin-top:var(--e4)}

/* ── cargando: el hueso, no un reloj de arena ─────────────────────────────── */
.sis-hueso{background:linear-gradient(90deg,var(--linea) 25%,var(--papel) 37%,var(--linea) 63%);
  background-size:400% 100%;animation:sis-brillo 1.3s ease infinite;border-radius:var(--r-p);
  color:transparent!important}
@keyframes sis-brillo{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.sis-hueso{animation:none}}

/* ── la página de error ───────────────────────────────────────────────────── */
/* Existe porque hasta el 24-sep cualquier tropiezo le enseñaba al dueño de un restaurante un
   JSON en Courier sobre fondo blanco. Un error también es parte del producto. */
.sis-error{min-height:100vh;display:grid;place-items:center;padding:var(--e5);
  background:var(--fondo);color:var(--sobre-fondo)}
.sis-error .sis-caja{max-width:460px;width:100%;text-align:center}
.sis-error .sis-num{font-family:var(--tipo-titular);font-weight:var(--peso-titular);
  font-size:calc(var(--t-4xl) * var(--titular-escala) * 1.6);line-height:1;
  color:var(--acento-fondo);letter-spacing:var(--titular-tracking);opacity:.9}
.sis-error h1{font-family:var(--tipo-titular);font-weight:var(--peso-titular);
  font-size:calc(var(--t-2xl) * var(--titular-escala));letter-spacing:var(--titular-tracking);
  margin:var(--e4) 0 var(--e2);color:var(--sobre-fondo);line-height:1.1}
.sis-error p{margin:0 0 var(--e5);font-size:var(--t-m);line-height:1.55;color:var(--gris-fondo)}
.sis-error .sis-que{display:inline-block;font-size:var(--t-xs);color:var(--gris-fondo);
  border:1px dashed color-mix(in srgb,var(--sobre-fondo) 30%,transparent);
  border-radius:var(--r-p);padding:8px 12px;margin-top:var(--e5);text-align:left;line-height:1.5}

/* ── la intro del sistema ─────────────────────────────────────────────────── */
.sis-intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  background:color-mix(in srgb, var(--fondo) 88%, transparent);backdrop-filter:blur(3px)}
.sis-intro[hidden]{display:none}
.sis-intro .sis-caja{background:var(--papel2);color:var(--tinta);border-radius:var(--r-g);
  max-width:560px;width:100%;padding:var(--e5) var(--e5) var(--e4);box-shadow:var(--sombra-alta);
  position:relative;max-height:92vh;overflow:auto}
.sis-intro .sis-paso{display:none}
.sis-intro .sis-paso.on{display:block}
.sis-intro .sis-k{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--acento-texto);font-weight:800;font-family:var(--tipo-cuerpo)}
.sis-intro h2{font-family:var(--tipo-titular);font-weight:var(--peso-titular);
  font-size:calc(var(--t-2xl) * var(--titular-escala));line-height:1.1;
  letter-spacing:var(--titular-tracking);margin:var(--e2) 0 var(--e3);color:var(--tinta);
  text-transform:none}
.sis-intro p{font-family:var(--tipo-cuerpo);font-size:var(--t-l);line-height:1.5;
  color:var(--gris);margin:0 0 var(--e3)}
.sis-intro p b{color:var(--tinta)}
.sis-intro .sis-lista{list-style:none;margin:0 0 var(--e3);padding:0;display:grid;gap:10px}
.sis-intro .sis-lista li{display:grid;grid-template-columns:22px 1fr;gap:10px;
  font-size:var(--t-m);line-height:1.35;align-items:start;color:var(--tinta)}
.sis-intro .sis-lista li small{display:block;color:var(--gris);font-size:var(--t-s)}
.sis-intro .sis-pies{display:flex;align-items:center;gap:10px;margin-top:var(--e4)}
.sis-intro .sis-puntos{display:flex;gap:6px;flex:1}
.sis-intro .sis-puntos i{width:7px;height:7px;border-radius:50%;background:var(--linea);display:block}
.sis-intro .sis-puntos i.on{background:var(--color)}
.sis-intro .sis-saltar{background:none;border:0;color:var(--gris);font-family:var(--tipo-cuerpo);
  font-size:var(--t-s);cursor:pointer;text-decoration:underline;min-height:var(--toque);padding:0 10px}
.sis-intro .sis-ilustra{display:flex;gap:10px;margin:0 0 var(--e4);align-items:center;flex-wrap:wrap}
.sis-intro .sis-ilustra .sis-chip svg{width:15px;height:15px}


/* ── LA ENTRADA ───────────────────────────────────────────────────────────────
   Lo primero que ve el dueño cuando abre su sistema. Dura tres segundos y dice tres cosas:
   quién lo hizo, qué es, y que hay inteligencia artificial trabajando dentro.

   ⚠️ Por qué existe y por qué es de Promeseo y no del restaurante: el resto del producto va
      vestido con la marca del cliente —así tiene que ser, es SU sistema— y eso tiene un
      efecto secundario: a los tres días nadie se acuerda de quién lo construyó. Esta pantalla
      es el único momento de la sesión donde aparece Promeseo, y dura lo que tarda en entrar.

   ⚠️ Y no se repite: se ve la primera vez del día. Una animación que sale en cada recarga
      deja de ser una entrada y pasa a ser un obstáculo — sobre todo en la tablet de la cocina,
      que se recarga sola.  */

.sis-entrada{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:#080D1A;color:#fff;padding:var(--e5);
  font-family:var(--tipo-cuerpo);overflow:hidden}
.sis-entrada[hidden]{display:none!important}

/* La retícula de fondo: el motivo "tecnología" hecho con CSS, sin una imagen que cargar. */
/* pointer-events:none o el adorno se come el toque del boton: los pseudo-elementos se
   pintan DESPUES del contenido y quedan encima. Lo encontro el capturador, que no pudo
   apretar «Entrar a mi negocio» — en un telefono habria pasado lo mismo. */
.sis-entrada::before,.sis-entrada::after{pointer-events:none}
.sis-entrada .sis-centro{z-index:1}
.sis-entrada::before{content:"";position:absolute;inset:-40%;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(circle at 50% 45%,#000 0%,transparent 62%);
  -webkit-mask-image:radial-gradient(circle at 50% 45%,#000 0%,transparent 62%);
  animation:sis-reticula 26s linear infinite}
@keyframes sis-reticula{to{transform:translate3d(48px,48px,0)}}

/* El halo con el color de la marca: lo unico del cliente que entra en esta pantalla. */
.sis-entrada::after{content:"";position:absolute;width:min(78vw,620px);aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,
    color-mix(in srgb,var(--color) 34%,transparent) 0%,transparent 68%);
  filter:blur(14px);animation:sis-latido 4.5s ease-in-out infinite}
@keyframes sis-latido{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.07)}}

.sis-entrada .sis-centro{position:relative;text-align:center;max-width:560px;width:100%}

.sis-entrada .sis-firma{width:min(62vw,340px);margin:0 auto;position:relative}
.sis-entrada .sis-firma img{width:100%;height:auto;display:block}
/* El barrido de luz sobre la forma REAL del logotipo: se recorta con la propia imagen como
   máscara, así la luz pasa por encima de las letras y no por una caja rectangular. */
.sis-entrada .sis-firma::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,transparent 30%,
    color-mix(in srgb,var(--acento-fondo) 85%,#fff) 50%,transparent 70%);
  background-size:260% 100%;
  -webkit-mask:url(/app/promeseo-logo.svg) center/contain no-repeat;
  mask:url(/app/promeseo-logo.svg) center/contain no-repeat;
  animation:sis-brillo-firma 3.4s ease-in-out infinite;pointer-events:none}
@keyframes sis-brillo-firma{0%,100%{background-position:100% 50%}50%{background-position:0% 50%}}}

.sis-entrada .sis-que{margin:var(--e3) 0 0;font-size:clamp(12px,3.2vw,14px);
  letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.62)}

.sis-entrada .sis-linea{width:64px;height:2px;margin:var(--e5) auto;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--acento-fondo),transparent);
  animation:sis-crece 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes sis-crece{from{width:0;opacity:0}to{width:64px;opacity:1}}

/* Las cuatro capas, apareciendo una detras de otra. Es la explicacion de que ES esto. */
.sis-entrada .sis-capas{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  text-align:left;max-width:380px;margin-inline:auto}
.sis-entrada .sis-capas li{display:grid;grid-template-columns:30px 1fr;gap:12px;
  align-items:center;font-size:var(--t-m);color:rgba(255,255,255,.9);
  opacity:0;transform:translateY(8px);animation:sis-sube .5s cubic-bezier(.2,.8,.2,1) forwards}
.sis-entrada .sis-capas li:nth-child(1){animation-delay:.35s}
.sis-entrada .sis-capas li:nth-child(2){animation-delay:.5s}
.sis-entrada .sis-capas li:nth-child(3){animation-delay:.65s}
.sis-entrada .sis-capas li:nth-child(4){animation-delay:.8s}
@keyframes sis-sube{to{opacity:1;transform:none}}
.sis-entrada .sis-capas i{width:30px;height:30px;border-radius:9px;display:grid;
  place-items:center;background:rgba(255,255,255,.08);color:var(--acento-fondo)}
.sis-entrada .sis-capas i svg{width:16px;height:16px}
.sis-entrada .sis-capas em{font-style:normal;color:rgba(255,255,255,.52);font-size:var(--t-xs);
  display:block}

.sis-entrada .sis-abrir{margin-top:var(--e6);opacity:0;
  animation:sis-sube .5s cubic-bezier(.2,.8,.2,1) 1s forwards}
.sis-entrada .sis-abrir .sis-boton{background:#fff;color:#0B1120;min-width:220px}
.sis-entrada .sis-firma-pie{margin:var(--e4) 0 0;font-size:11.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.62)}

/* Al cerrarse se va de una, sin ceremonia: nadie quiere esperar a su propia pantalla. */
.sis-entrada.sis-saliendo{animation:sis-salir .32s ease forwards}
@keyframes sis-salir{to{opacity:0;transform:scale(1.03)}}

@media (prefers-reduced-motion:reduce){
  .sis-entrada::before,.sis-entrada::after,.sis-entrada .sis-firma,
  .sis-entrada .sis-linea,.sis-entrada .sis-capas li,.sis-entrada .sis-abrir,
  .sis-entrada.sis-saliendo{animation:none}
  .sis-entrada .sis-capas li,.sis-entrada .sis-abrir{opacity:1;transform:none}
}

/* ── impresión ────────────────────────────────────────────────────────────── */
@media print{
  .sis-barra,.sis-pie,.sis-intro,.sis-boton,.sis-grupo{display:none!important}
  .sis-carta{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
  body{background:#fff!important;color:#000!important}
}

/* ── nombres viejos, para no romper lo que ya estaba ──────────────────────── */
/* Se mantienen mientras queden pantallas sin migrar. Cuando no quede ninguna, se borran. */
.sis-boton.fantasma{background:transparent;color:inherit;border:1.5px solid currentColor;opacity:.9}
.sis-kpis.tres{grid-template-columns:repeat(3,1fr)}
.sis-cifra.acento{color:var(--acento)}
.sis-titulo span{font-weight:500;letter-spacing:0;text-transform:none;color:var(--gris)}