/* ═══════════════════════════════════════════════════════════════
     TABLERO DE BODEGA — SENDYA
     Lienzo 1920×1080 lógicos · panel 55" 4K · lectura a 6 m
     Turno 08:00–17:00 · cierre de recepción 14:30 · una oleada

     Escala tipográfica por ángulo visual a 6 m:
       96 = 22′ · 80 = 20′ · 72 = 18′ · 56 = 14′ · 44 = 11′ · 32 = 9′ (mín.)

     CHASIS FIJO: barra arriba, alertas abajo — igual en los cinco actos.
     Todo se renderiza desde ESTADO, que es el contrato de GET /api/tablero.
     ═══════════════════════════════════════════════════════════════ */

  :root {
    --ground: #131215; --surface: #242424; --surface-2: #2C2A30;
    --line: rgba(255,255,255,.09); --line-strong: rgba(255,255,255,.18);

    --marca: #5B15BA;
    --marca-1: #2A1444; --marca-2: #3D1878; --marca-3: #5B15BA;
    --marca-4: #7B3AD9; --marca-5: #A277EE;

    --ok: #CFED40; --accion: #ECFE00; --critico: #FF3B30; --neutro: #FFFFFF;

    --txt: #FFFFFF; --txt-2: rgba(255,255,255,.58); --txt-3: rgba(255,255,255,.34);
    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  }

  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; background: var(--ground); color: var(--txt);
         font-family: var(--font); -webkit-font-smoothing: antialiased; }

  /* ─── Escenario ────────────────────────────────────────────────── */
  .stage-wrap { display: flex; justify-content: center; align-items: flex-start;
                padding: 20px; overflow: auto; }
  .stage-box { position: relative; overflow: hidden; }
  .stage { width: 1920px; height: 1080px; transform-origin: top left;
           background: var(--ground); display: grid;
           grid-template-rows: 84px 888px 108px; overflow: hidden; position: relative; }
  .stage > * { min-height: 0; overflow: hidden; }
  .stage-wrap:fullscreen { background: #000; padding: 0; align-items: center; }

  /* ─── Barra superior ───────────────────────────────────────────── */
  .topbar { display: flex; align-items: center; gap: 22px; padding: 0 44px;
            border-bottom: 1px solid var(--line); }
  .marca-chip { background: var(--marca); color: #fff; font-size: 32px; font-weight: 800;
                letter-spacing: .04em; padding: 10px 20px 12px; border-radius: 10px; line-height: 1; }
  .sede { font-size: 32px; font-weight: 600; letter-spacing: .1em; color: var(--txt-2);
          text-transform: uppercase; }
  .acto-chip { font-size: 32px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
               line-height: 1; padding: 10px 18px; border-radius: 8px;
               background: rgba(255,255,255,.10); color: var(--txt); }
  .topbar .spacer { flex: 1 1 auto; }
  .conexion { display: flex; align-items: center; gap: 12px; font-size: 32px; font-weight: 600;
              letter-spacing: .06em; color: var(--txt-2); }
  .conexion .punto { width: 14px; height: 14px; border-radius: 50%; background: var(--ok); }
  .conexion.caida { color: var(--critico); }
  .conexion.caida .punto { background: var(--critico); }
  .reloj { font-size: 56px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }

  /* ─── Escena ───────────────────────────────────────────────────── */
  .escena { padding: 22px 44px 0; display: grid; gap: 16px; }
  .seccion-label { font-size: 32px; font-weight: 700; letter-spacing: .16em;
                   text-transform: uppercase; color: var(--txt-3); line-height: 1; }

  .pill { display: inline-flex; align-items: center; font-size: 32px; font-weight: 700;
          letter-spacing: .04em; text-transform: uppercase; line-height: 1;
          padding: 6px 12px; border-radius: 7px; background: rgba(255,255,255,.08);
          color: var(--txt-2); white-space: nowrap; }
  .pill.ok { background: var(--ok); color: #16210A; }
  .pill.accion { background: var(--accion); color: #232400; }
  .pill.critico { background: var(--critico); color: #fff; }
  .pill.modo { background: transparent; border: 2px solid var(--line-strong); color: var(--txt-2); }

  /* ─── Cifras ───────────────────────────────────────────────────── */
  .cifras { display: flex; gap: 18px; }
  .cifra-box { flex: 1 1 0; background: var(--surface); border: 2px solid var(--line-strong);
               border-radius: 10px; padding: 16px 24px; display: grid; align-content: center;
               gap: 4px; min-width: 0; }
  .cifra-box .val { font-size: 96px; font-weight: 800; line-height: 1;
                    font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
  .cifra-box .cap { font-size: 32px; font-weight: 600; letter-spacing: .1em;
                    text-transform: uppercase; color: var(--txt-2);
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cifra-box.destacada { border-color: var(--ok); }
  .cifra-box.destacada .val { color: var(--ok); }

  /* ─── Choferes de retiro ───────────────────────────────────────── */
  .grid-retiro { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
                 grid-auto-rows: var(--fila-h, auto); gap: 18px; }
  .retiro-card { background: var(--surface); border: 2px solid var(--line-strong);
                 border-radius: 10px; padding: 16px 20px;
                 display: flex; flex-direction: column; gap: 10px;
                 min-width: 0; min-height: 0; overflow: hidden;
                 transition: border-color .4s ease, background .4s ease; }
  .retiro-card .nombre, .retiro-card .avance { flex: 0 0 auto; }
  .retiro-card .tiendas { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .retiro-card .nombre { font-size: 44px; font-weight: 700; line-height: 1;
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tiendas { display: grid; gap: 6px; align-content: start; }
  .tienda { display: flex; align-items: center; gap: 10px; font-size: 32px; font-weight: 500;
            color: var(--txt-2); line-height: 1.1; min-width: 0; }
  .tienda .marca-pt { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 4px;
                      background: var(--line-strong); transition: background .4s ease; }
  .tienda .nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tienda.hecho .marca-pt { background: var(--ok); }
  .tienda.hecho .nom { color: var(--txt); }
  .tienda.curso .marca-pt { background: var(--neutro); }
  .tienda.curso .nom { color: var(--txt); }
  .tienda.tentativa { color: var(--txt-3); align-items: flex-start; }
  .tienda.tentativa .nom { white-space: normal; }
  .tienda.tentativa .marca-pt { background: transparent; border: 2px dashed var(--line-strong); }

  .retiro-card .avance { display: flex; align-items: baseline; gap: 12px;
                         font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; }
  .retiro-card .avance .n { flex: 0 0 auto; font-size: 72px; font-weight: 800;
                            line-height: 1; letter-spacing: -.03em; }
  .retiro-card .avance .u { flex: 1 1 auto; min-width: 0; font-size: 32px; font-weight: 600;
                            color: var(--txt-2); text-transform: uppercase; letter-spacing: .04em;
                            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .retiro-card.llega { border-color: var(--ok); }
  .retiro-card.llega .avance .n { color: var(--ok); }
  .retiro-card.justo { border-color: var(--accion); background: #2A2907; }
  .retiro-card.justo .avance .n { color: var(--accion); }
  .retiro-card.no-llega { border-color: var(--critico); background: #2E1210; }
  .retiro-card.no-llega .avance .n { color: var(--critico); }

  .chips-conductores { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
                       grid-auto-rows: var(--fila-h, auto); gap: 14px; }
  .chip-cond { background: var(--surface); border: 2px solid var(--line-strong);
               border-radius: 10px; padding: 14px 20px; font-size: 44px; font-weight: 700;
               line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ─── Cuenta regresiva ─────────────────────────────────────────── */
  .cierre { background: var(--surface); border: 2px solid var(--line-strong); border-radius: 10px;
            padding: 14px 28px; display: grid; align-content: center; justify-items: start; gap: 2px;
            transition: border-color .5s ease, background .5s ease; }
  .cierre .cap { font-size: 32px; font-weight: 700; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--txt-2); }
  .cierre .t { font-size: 130px; font-weight: 800; line-height: .92;
               font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
  .cierre.holgado { border-color: var(--ok); } .cierre.holgado .t { color: var(--ok); }
  .cierre.apretado { border-color: var(--accion); background: #2A2907; }
  .cierre.apretado .t { color: var(--accion); }
  .cierre.vencido { border-color: var(--critico); background: #2E1210; }
  .cierre.vencido .t { color: var(--critico); }

  /* ─── Andén ────────────────────────────────────────────────────── */
  .anden-cards { display: flex; gap: 18px; align-items: stretch; }
  .manifiesto { flex: 1 1 0; background: var(--surface); border: 2px solid var(--line-strong);
                border-radius: 10px; padding: 14px 22px; display: grid;
                grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto;
                column-gap: 18px; row-gap: 6px; align-items: center; min-width: 0;
                overflow: hidden; transition: border-color .4s ease; }
  .manifiesto .quien { font-size: 44px; font-weight: 700; line-height: 1.05;
                       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .manifiesto .quien .lugar { font-size: 32px; font-weight: 500; color: var(--txt-2); margin-left: 12px; }
  .manifiesto .meta { grid-column: 1; display: flex; align-items: center; gap: 10px;
                      min-width: 0; overflow: hidden; }
  .manifiesto .meta .pill { flex: 0 0 auto; }
  .manifiesto .conteo { grid-column: 2; grid-row: 1 / span 2; font-size: 72px; font-weight: 800;
                        font-variant-numeric: tabular-nums; line-height: 1;
                        letter-spacing: -.02em; text-align: right; }
  .manifiesto .conteo .total { color: var(--txt-3); }
  .manifiesto.modo-manifiesto { background-image: repeating-linear-gradient(
      135deg, transparent 0 12px, rgba(255,255,255,.055) 12px 24px); }
  .manifiesto.cerrado { border-color: var(--ok); } .manifiesto.cerrado .conteo { color: var(--ok); }
  .manifiesto.sin-cuadrar { border-color: var(--accion); }
  .manifiesto.sin-cuadrar .conteo { color: var(--accion); }
  .manifiesto.faltante { border-color: var(--critico); }
  .manifiesto.faltante .conteo { color: var(--critico); }

  /* ─── Casillas de carga ────────────────────────────────────────── */
  .grid-carriles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
                   grid-auto-rows: var(--fila-h, 1fr); gap: 18px; }
  .carril { background: var(--surface); border: 2px solid var(--line-strong); border-radius: 10px;
            padding: 16px 22px; display: grid; grid-template-rows: auto minmax(0,1fr) auto;
            gap: 8px; min-width: 0; overflow: hidden;
            transition: border-color .45s ease, background .45s ease; }
  .carril-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .estante-badge { flex: 0 0 auto; width: 58px; height: 58px; display: grid; place-items: center;
                   background: var(--surface-2); border-radius: 8px; font-size: 44px;
                   font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
                   transition: background .45s ease, color .45s ease; }
  .carril .nombre { font-size: 44px; font-weight: 700; line-height: 1; min-width: 0;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .carril .cifra { font-size: 96px; font-weight: 800; font-variant-numeric: tabular-nums;
                   line-height: 1; letter-spacing: -.03em; align-self: center; }
  .carril .cifra .total { color: var(--txt-3); }
  .carril .barra { height: 14px; border-radius: 7px; background: rgba(255,255,255,.10); overflow: hidden; }
  .carril .barra span { display: block; height: 100%; background: var(--neutro); border-radius: 7px;
                        transition: width .6s cubic-bezier(.2,.8,.2,1), background .45s ease; }
  .carril .motivo { font-size: 32px; font-weight: 700; line-height: 1; color: var(--accion);
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .carril.esperando { border-style: dashed; border-color: var(--line); background: transparent; }
  .carril.esperando .estante-badge { background: transparent; border: 2px solid var(--line); color: var(--txt-3); }
  .carril.esperando .nombre { color: var(--txt-2); }
  .carril.esperando .cifra { color: var(--txt-3); }
  .carril.listo { border-color: var(--ok); } .carril.listo .cifra { color: var(--ok); }
  .carril.listo .barra span { background: var(--ok); }
  .carril.listo .estante-badge { background: var(--ok); color: #16210A; }
  .carril.critico { border-color: var(--critico); background: #2E1210; }
  .carril.critico .cifra { color: var(--critico); }
  .carril.critico .estante-badge { background: var(--critico); color: #fff; }
  .carril.critico .motivo { color: var(--critico); }

  /* ─── Mapa de tejas ────────────────────────────────────────────── */
  .mapa-tejas { display: grid; grid-template-columns: repeat(7, minmax(0,1fr));
                grid-template-rows: repeat(7, minmax(0,1fr)); gap: 8px; }
  .teja { border-radius: 8px; padding: 8px 10px; display: grid; align-content: space-between;
          background: var(--surface); border: 2px solid transparent; min-width: 0;
          overflow: hidden; transition: background .5s ease; }
  .teja .com { font-size: 24px; font-weight: 700; letter-spacing: .02em; line-height: 1;
               color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden;
               text-overflow: ellipsis; }
  .teja .np { font-size: 40px; font-weight: 800; line-height: 1;
              font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
  .teja.n1 { background: var(--marca-1); } .teja.n2 { background: var(--marca-2); }
  .teja.n3 { background: var(--marca-3); } .teja.n4 { background: var(--marca-4); }
  .teja.n5 { background: var(--marca-5); color: #1A0B2E; }
  .teja.n5 .com { color: rgba(26,11,46,.75); }
  .teja.gap { background: var(--critico); border-color: #fff; }
  .teja.gap .com { color: rgba(255,255,255,.85); }
  /* Lo terminado se APAGA: a 6 m lo más brillante debe ser el problema, no lo resuelto. */
  .teja.hecho { background: #2B3D10; color: var(--ok); }
  .teja.hecho .com { color: rgba(207,237,64,.6); }
  .teja.atras { background: var(--accion); color: #232400; }
  .teja.atras .com { color: rgba(35,36,0,.75); }
  .teja.vacia { background: transparent; border: 2px solid rgba(255,255,255,.05); }
  .teja.vacia .com, .teja.vacia .np { color: var(--txt-3); }

  /* ─── Panel lateral ────────────────────────────────────────────── */
  .panel { background: var(--surface); border: 2px solid var(--line-strong); border-radius: 10px;
           padding: 16px 20px; display: grid; gap: 12px; align-content: start;
           min-width: 0; overflow: hidden; }
  .fila { display: flex; align-items: center; gap: 14px; font-variant-numeric: tabular-nums; min-width: 0; }
  .fila .who { flex: 0 0 auto; font-size: 40px; font-weight: 700; line-height: 1; white-space: nowrap; }
  .fila .zonas { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 28px; font-weight: 500;
                 color: var(--txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fila .qty { flex: 0 0 auto; margin-left: auto; font-size: 44px; font-weight: 800; line-height: 1;
               letter-spacing: -.02em; min-width: 88px; text-align: right; }
  .fila .qty.ok { color: var(--ok); }
  .barra-zona { height: 12px; border-radius: 6px; background: rgba(255,255,255,.10); overflow: hidden; }
  .barra-zona span { display: block; height: 100%; background: var(--ok); border-radius: 6px;
                     transition: width .6s cubic-bezier(.2,.8,.2,1); }

  /* ─── Clima ────────────────────────────────────────────────────── */
  .clima { background: var(--surface); border: 2px solid var(--line-strong);
           border-left: 8px solid var(--accion); border-radius: 10px; padding: 12px 22px;
           display: flex; align-items: center; gap: 20px; font-size: 32px; font-weight: 600;
           color: var(--txt); min-width: 0; overflow: hidden; }
  .clima b { font-weight: 800; color: var(--accion); }
  .clima .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ─── Alertas ──────────────────────────────────────────────────── */
  .alertas { padding: 14px 44px 16px; border-top: 1px solid var(--line);
             display: flex; align-items: center; gap: 18px; }
  .alerta { flex: 1 1 0; display: flex; align-items: center; gap: 16px; padding: 14px 20px;
            border-radius: 9px; background: var(--surface); border-left: 8px solid var(--txt-3);
            font-size: 32px; font-weight: 600; line-height: 1.15; color: var(--txt-2); min-width: 0; }
  .alerta .texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .alerta.accion { border-left-color: var(--accion); color: var(--accion); background: #26260A; }
  .alerta.critico { border-left-color: var(--critico); color: #FFD9D6; background: #2A100E; }
  .alerta.vacia { justify-content: center; color: var(--txt-3);
                  border-left-color: transparent; background: transparent; }

  /* ═══ ANIMACIONES ═══════════════════════════════════════════════
     Regla: sutiles en lo cotidiano, imposibles de ignorar en lo grave.
     Nada de movimiento perpetuo — es una pantalla de 9 h/día y el
     movimiento constante se vuelve tapiz y arriesga retención de imagen. */

  @keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
  .late { animation: latido 1.8s ease-in-out infinite; }

  @keyframes entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .anima-entra { animation: entra .42s cubic-bezier(.2,.8,.2,1) both; }

  /* Destello al cambiar una cifra: dirige el ojo a lo que se movió. */
  @keyframes destello {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
    100% { box-shadow: 0 0 0 16px rgba(255,255,255,0); }
  }
  .destello { animation: destello .75s ease-out; }

  @keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(1.09); } 100% { transform: scale(1); } }
  .pop { animation: pop .5s cubic-bezier(.2,.8,.2,1); }

  /* ─── Anuncio de cambio de acto ────────────────────────────────── */
  .anuncio { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center;
             background: rgba(12,11,14,.94); }
  .anuncio .caja { text-align: center; display: grid; gap: 18px; justify-items: center; }
  .anuncio .kicker { font-size: 44px; font-weight: 700; letter-spacing: .22em;
                     text-transform: uppercase; color: var(--txt-3); }
  .anuncio .tit { font-size: 170px; font-weight: 800; letter-spacing: -.04em; line-height: .95; }
  .anuncio .sub { font-size: 56px; font-weight: 600; color: var(--txt-2); }
  @keyframes anuncioIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes anuncioCaja { from { opacity: 0; transform: translateY(26px) scale(.97); }
                           to { opacity: 1; transform: none; } }
  .anuncio { animation: anuncioIn .3s ease both; }
  .anuncio .caja { animation: anuncioCaja .5s cubic-bezier(.2,.8,.2,1) both; }
  .anuncio.saliendo { animation: anuncioIn .45s ease reverse both; }

  /* ─── Overlay de PAQUETE CRUZADO ───────────────────────────────
     El único elemento de toda la pantalla que interrumpe. Se gana ese
     derecho porque hoy esta reasignación pasa en SILENCIO y mueve plata. */
  .cruzado { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center;
             background: rgba(46,18,16,.93); }
  .cruzado .caja { width: 1500px; background: #1A0908; border: 6px solid var(--critico);
                   border-radius: 20px; padding: 46px 56px; display: grid; gap: 22px; }
  .cruzado .kicker { display: flex; align-items: center; gap: 20px;
                     font-size: 48px; font-weight: 800; letter-spacing: .16em;
                     text-transform: uppercase; color: var(--critico); }
  .cruzado .kicker .sig { width: 30px; height: 30px; border-radius: 50%; background: var(--critico); }
  .cruzado .frase { font-size: 84px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
  .cruzado .frase em { font-style: normal; color: var(--critico); }
  .cruzado .datos { display: flex; gap: 18px; flex-wrap: wrap; }
  .cruzado .dato { background: rgba(255,255,255,.07); border-radius: 12px; padding: 14px 24px;
                   display: grid; gap: 4px; }
  .cruzado .dato .k { font-size: 28px; font-weight: 700; letter-spacing: .12em;
                      text-transform: uppercase; color: var(--txt-3); }
  .cruzado .dato .v { font-size: 52px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
  .cruzado .accion-txt { font-size: 44px; font-weight: 700; color: var(--accion); }

  @keyframes cruzadoIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes cruzadoCaja {
    0%   { opacity: 0; transform: scale(.9); }
    60%  { opacity: 1; transform: scale(1.015); }
    100% { opacity: 1; transform: scale(1); }
  }
  @keyframes sacudir {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-16px); } 30% { transform: translateX(16px); }
    45% { transform: translateX(-10px); } 60% { transform: translateX(10px); }
    75% { transform: translateX(-4px); }
  }
  @keyframes pulsoBorde {
    0%, 100% { border-color: var(--critico); box-shadow: 0 0 0 0 rgba(255,59,48,.5); }
    50%      { border-color: #FF8A82;       box-shadow: 0 0 0 26px rgba(255,59,48,0); }
  }
  .cruzado { animation: cruzadoIn .22s ease both; }
  .cruzado .caja { animation: cruzadoCaja .42s cubic-bezier(.2,.8,.2,1) both,
                              sacudir .55s .42s ease-in-out,
                              pulsoBorde 1.5s 1s ease-in-out infinite; }
  .cruzado.saliendo { animation: cruzadoIn .4s ease reverse both; }

  /* Respeta al visor que pide menos movimiento: se conserva el color y el
     contenido, se apaga el movimiento. La información nunca depende de la animación. */
  @media (prefers-reduced-motion: reduce) {
    .late, .anima-entra, .destello, .pop,
    .anuncio, .anuncio .caja, .cruzado, .cruzado .caja { animation: none !important; }
    .carril .barra span, .barra-zona span, .teja, .carril, .manifiesto,
    .retiro-card, .cierre { transition: none !important; }
  }


  /* ═══ PAGINADOR ("marquesina por páginas") ═══════════════════════
     No hace scroll continuo a propósito: a 6 m el ojo no puede perseguir
     un blanco móvil. Los tableros de aeropuerto paginan por la misma razón.
     Pone PAGINA_CONTINUA=true en el script para el otro comportamiento. */
  .paginado { position: relative; overflow: hidden; min-height: 0; }
  .paginado-pista { display: grid; align-content: start;
                    transition: transform .75s cubic-bezier(.4,0,.2,1); }
  .paginado-idx { font-size: 26px; font-weight: 800; letter-spacing: .1em;
                  color: var(--txt-3); font-variant-numeric: tabular-nums; }
  .cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .paginado-wrap { display: grid; grid-template-rows: auto minmax(0,1fr);
                   gap: 12px; min-height: 0; }

  /* Filas de alto fijo: el paginador traslada por altura de contenedor y
     necesita que el ritmo vertical sea estable. */
  .panel .fila { height: 52px; }
  .zona-item { height: 82px; display: grid; align-content: center; gap: 8px; }

  /* Cifras que crecen: 412 → 2.480 → 12.400 sin romper la caja. */
  .cifra-box .val.d4 { font-size: 80px; }
  .cifra-box .val.d5 { font-size: 66px; }
  .cifra-box .val.d6 { font-size: 54px; }

  /* "y N más": lo que no cabe se declara, nunca se oculta en silencio. */
  .mas { font-size: 28px; font-weight: 700; letter-spacing: .06em;
         text-transform: uppercase; color: var(--txt-3); }
  .tienda.mas-fila { color: var(--txt-3); }


  /* ═══ VINCULACIÓN (RFC 8628) ═════════════════════════════════════
     Lo que se ve la primera vez que se enciende la pantalla, y cada vez
     que un admin la revoca. Se ve poco y en un momento tenso (día de
     instalación), así que tiene que explicarse sola. */
  .vincular { display: grid; grid-template-columns: 520px 1fr; gap: 56px;
              align-content: center; padding: 0 44px; height: 100%; }
  .vincular .qr-caja { background: #fff; border-radius: 20px; padding: 26px;
                       display: grid; place-items: center; align-self: center; }
  .vincular canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
  .vincular .lado { display: grid; align-content: center; gap: 26px; }
  .vincular h1 { font-size: 76px; font-weight: 800; letter-spacing: -.02em;
                 line-height: 1; margin: 0; }
  .pasos { display: grid; gap: 14px; }
  .paso { display: flex; align-items: center; gap: 18px; font-size: 40px;
          font-weight: 600; color: var(--txt-2); line-height: 1.15; }
  .paso .n { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%;
             background: var(--marca); color: #fff; display: grid; place-items: center;
             font-size: 28px; font-weight: 800; }
  .codigo-caja { background: var(--surface); border: 2px solid var(--line-strong);
                 border-radius: 14px; padding: 18px 28px; display: grid; gap: 8px; }
  .codigo-caja .lbl { font-size: 28px; font-weight: 700; letter-spacing: .1em;
                      text-transform: uppercase; color: var(--txt-3); }
  .codigo-caja .cod { font-size: 96px; font-weight: 800; letter-spacing: .1em;
                      line-height: 1; font-variant-numeric: tabular-nums; color: var(--ok); }
  .vincular .expira { font-size: 32px; font-weight: 600; color: var(--txt-3);
                      font-variant-numeric: tabular-nums; }