/* Propuesta recomendada «Ficha + Pizarra» · v5 (17-oct-2026): todo el portal ajustado a la propuesta de Stitch exportada el
   17-oct-2026 (stitch/export-2026-10-17), que es la guía de marca (stitch/GUIA-DE-MARCA.md): paleta brand verde azulado +
   ámbar + neutros slate, Plus Jakarta Sans para el texto y Outfit para títulos, marca y cifras, logo «SH» con degradado,
   franja de la jornada con degradado, tarjetas blancas de radio 16 con sombra, píldoras, garantías sobre brand-50 y pie
   slate-900. Se traduce a CSS propio con tokens (no Tailwind): la maqueta cambia el tamaño de la raíz para simular la letra
   al 130, 150 y 200 % y el modo oscuro responde a :root[data-theme] y a prefers-color-scheme.
   Base funcional: v4 (08-propuesta-v4.html). Fuentes de Google sin bloquear el pintado (media=print y cambio a all al
   cargar); en el portal van alojadas en el servidor. La barra de la maqueta y las notas van en px. */
:root{
  /* v5 · Paleta de la guía de marca (Stitch). Los nombres de los tokens de la v4 se conservan para no tocar cada regla:
     --caribe es ahora brand-700, --papel slate-50, --hoja blanco, --tinta slate-900. */
  --papel:#F8FAFC;--hoja:#FFFFFF;--hoja-2:#F1F5F9;--tonal:#F0FDFA;--tonal-2:#F0FDFA;
  --tinta:#0F172A;--tinta-2:#475569;--tinta-3:#5E6E84;--texto:#1E293B;
  /* Bordes de componentes ≥ 3:1 contra blanco (3,26) y slate-50 (3,12): el slate-200 de Stitch (1,23) oscurecido lo justo.
     --linea-2 son divisores internos (decoración, no delimitan un componente). */
  --linea:#7F8A9C;--linea-2:#CBD5E1;--divisor:#E2E8F0;--regla:#0F172A;
  --caribe:#0F766E;--caribe-hover:#115E59;--caribe-suave:#CCFBF1;--caribe-borde:#0D9488;--sobre-caribe:#FFFFFF;
  --boton:#134E4A;--boton-hover:#0F172A;--sobre-boton:#FFFFFF;--anillo-foco:#CCFBF1;
  --b50:#F0FDFA;--b100:#CCFBF1;--b500:#14B8A6;--b700:#0F766E;--b800:#115E59;--b900:#134E4A;--b-borde:#5EEAD4;
  --a50:#FFFBEB;--a100:#FEF3C7;--a500:#F59E0B;--a600:#D97706;--a700:#B45309;--a800:#92400E;--a900:#78350F;
  --s50:#F8FAFC;--s100:#F1F5F9;--s200:#E2E8F0;--s300:#CBD5E1;--s700:#334155;--s800:#1E293B;--s900:#0F172A;
  --ok:#065F46;--ok-suave:#ECFDF5;--ok-borde:#6EE7B7;--ok-ico:#059669;
  --pre:#78350F;--pre-suave:#FFFBEB;--pre-borde:#D97706;--pre-txt:#92400E;
  --esp:#475569;--esp-suave:#F1F5F9;
  --uni:#134E4A;--uni-suave:#F0FDFA;--uni-borde:#5EEAD4;
  --guayaba:#BE123C;--guayaba-suave:#FFE4E6;
  --mora:#5B21B6;--mora-suave:#EDE9FE;--guadua:#15803D;--guadua-suave:#DCFCE7;--mango:#B45309;--mango-suave:#FEF3C7;
  --ocre:#B45309;--ocre-deco:#F59E0B;--ocre-suave:#FFFBEB;
  /* Casillas por tipo: chance = slate-900 relleno; lotería = brand-800; Baloto y más = índigo */
  --ch:#0F172A;--sobre-ch:#FFFFFF;--ch-suave:#F1F5F9;--ch-tinta:#0F172A;
  --lot:#115E59;--sobre-lot:#FFFFFF;--lot-suave:#CCFBF1;--lot-tinta:#115E59;
  --nac:#4338CA;--sobre-nac:#FFFFFF;--nac-suave:#EEF2FF;--nac-tinta:#3730A3;
  --cas-vacia:#F8FAFC;--cas-vacia-borde:#7F8A9C;
  --t-fill:var(--ch);--t-sobre:var(--sobre-ch);--t-suave:var(--ch-suave);--t-tinta:var(--ch-tinta);
  --bola:#FFFFFF;--bola-borde:#0F172A;--quinta:#0F172A;--sobre-quinta:#FFFFFF;--acierto:#FEF3C7;
  --ficha:#0F172A;--sobre-ficha:#FFFFFF;
  --anillo-base:#E2E8F0;--anillo:#0F766E;
  /* Monogramas pastel (Stitch): fondo / letra / anillo */
  --m1-f:#FFE4E6;--m1-t:#9F1239;--m1-a:rgba(254,205,211,.6);
  --m2-f:#D1FAE5;--m2-t:#065F46;--m2-a:rgba(167,243,208,.6);
  --m3-f:#E0E7FF;--m3-t:#3730A3;--m3-a:rgba(199,210,254,.6);
  --m4-f:#E0F2FE;--m4-t:#075985;--m4-a:rgba(186,230,253,.6);
  --m5-f:#EDE9FE;--m5-t:#5B21B6;--m5-a:rgba(221,214,254,.6);
  --m6-f:#FEF3C7;--m6-t:#92400E;--m6-a:rgba(253,230,138,.6);
  /* Franja de la jornada: degradado brand-900 → 800 → 900 */
  --franja:#134E4A;--franja-g:linear-gradient(90deg,#134E4A,#115E59,#134E4A);--sobre-franja:#FFFFFF;--franja-2:#CCFBF1;
  --franja-chip:#FDE68A;--franja-nom:#FCD34D;--franja-chip-f:rgba(245,158,11,.2);--franja-chip-b:rgba(251,191,36,.3);
  --franja-pil-b:rgba(20,184,166,.3);--franja-pil-f:rgba(4,47,46,.4);--franja-ico:rgba(15,118,110,.8);--sobre-franja-chip:#FDE68A;--franja-anillo:rgba(255,255,255,.28);
  --logo-g:linear-gradient(135deg,#0F766E,#134E4A);
  --pie-fondo:#0F172A;--pie-texto:#FFFFFF;--pie-texto-2:#94A3B8;--pie-texto-3:#CBD5E1;--pie-enlace:#CBD5E1;--pie-linea:#1E293B;--pie-chip:#1E293B;--pie-chip-b:#334155;--pie-ambar:#FBBF24;
  --gar-fondo:#F0FDFA;--gar-borde:#CCFBF1;--gar-icono:#0F766E;--sobre-gar-icono:#FFFFFF;
  --ad-fondo:#F1F5F9;--ad-borde:#CBD5E1;--ad-forma:#CBD5E1;--ad-forma-2:#E2E8F0;--ad-texto:#475569;--ad-punteado:#94A3B8;
  --rec-fondo:#0B1120;--rec-texto:#EDF1F4;--rec-texto-2:#B9C3CB;--rec-forma:#2A3137;--rec-forma-2:#1D2328;--rec-barra:#5EEAD4;
  --img-papel:#FFFFFF;--img-tinta:#0F172A;--img-tenue:#475569;--img-franja:#F1F5F9;--img-ok:#065F46;--img-ok-suave:#ECFDF5;--img-pre:#78350F;--img-cab:#134E4A;--img-cab-2:#115E59;--img-sobre-cab:#FFFFFF;--img-caribe:#0F766E;--img-ocre:#FCD34D;--img-lot:#115E59;
  --velo:rgba(2,6,23,.55);--sombra:rgba(15,23,42,.16);
  --sh-xs:0 1px 2px 0 rgba(0,0,0,.05);--sh-sm:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
  --sh-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--sh-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  --sh-in:inset 0 2px 4px 0 rgba(0,0,0,.05);--sh-marca:0 1px 3px 0 rgba(19,78,74,.18),0 1px 2px -1px rgba(19,78,74,.18);
  --mq-fondo:#1F252C;--mq-texto:#EEF2F5;--mq-texto-2:#B5BEC7;--mq-boton:#313942;--mq-borde:#56606B;--mq-cinta:#FFD23F;--mq-cinta-texto:#1D2126;
  --mq-escenario:#D9E0E5;--mq-marco:#1A1E23;
  --mq-nota:#FFFFFF;--mq-nota-texto:#1C252D;--mq-nota-2:#4F5B66;--mq-nota-linea:#D6DDE2;--mq-codigo:#F1F4F6;
  --mq-zona:#B0166C;--mq-zona-texto:#FFFFFF;
  /* Colores de las balotas de ColorLOTO: son el DATO del sorteo (no colores de marca); van con su nombre abreviado debajo */
  --cl-amarillo:#F5C518;--cl-amarillo-t:#13212C;--cl-azul:#1D4E9E;--cl-azul-t:#FFFFFF;--cl-rojo:#B42318;--cl-rojo-t:#FFFFFF;
  --cl-verde:#1B6E35;--cl-verde-t:#FFFFFF;--cl-blanco:#FFFFFF;--cl-blanco-t:#13212C;--cl-negro:#13212C;--cl-negro-t:#FFFFFF;
  --f-titulo:"Outfit","Plus Jakarta Sans","Segoe UI",Roboto,Arial,sans-serif;
  --f-texto:"Plus Jakarta Sans","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mq:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papel:#020617;--hoja:#0F172A;--hoja-2:#1E293B;--tonal:#042F2E;--tonal-2:#06302D;
    --tinta:#F1F5F9;--tinta-2:#CBD5E1;--tinta-3:#94A3B8;--texto:#E2E8F0;
    --linea:#6B7A90;--linea-2:#334155;--divisor:#1E293B;--regla:#CBD5E1;
    --caribe:#5EEAD4;--caribe-hover:#99F6E4;--caribe-suave:#134E4A;--caribe-borde:#2DD4BF;--sobre-caribe:#042F2E;
    --boton:#0F766E;--boton-hover:#115E59;--sobre-boton:#FFFFFF;--anillo-foco:#134E4A;
    --b50:#042F2E;--b100:#134E4A;--b700:#5EEAD4;--b800:#99F6E4;--b900:#CCFBF1;--b-borde:#14B8A6;
    --a50:#2A1F07;--a100:#3A2A0A;--a600:#F59E0B;--a700:#FCD34D;--a800:#FDE68A;--a900:#FEF3C7;
    --s50:#0B1120;--s100:#1E293B;--s200:#334155;--s300:#475569;--s700:#CBD5E1;--s800:#E2E8F0;--s900:#F8FAFC;
    --ok:#6EE7B7;--ok-suave:#022C22;--ok-borde:#059669;--ok-ico:#34D399;
    --pre:#FCD34D;--pre-suave:#2A1F07;--pre-borde:#F59E0B;--pre-txt:#FDE68A;
    --esp:#CBD5E1;--esp-suave:#1E293B;
    --uni:#99F6E4;--uni-suave:#042F2E;--uni-borde:#14B8A6;
    --guayaba:#FDA4AF;--guayaba-suave:#4C0519;
    --mora:#C4B5FD;--mora-suave:#2E1065;--guadua:#86EFAC;--guadua-suave:#052E16;--mango:#FCD34D;--mango-suave:#3A2A0A;
    --ocre:#FCD34D;--ocre-deco:#F59E0B;--ocre-suave:#2A1F07;
    --ch:#E2E8F0;--sobre-ch:#0F172A;--ch-suave:#1E293B;--ch-tinta:#E2E8F0;
    --lot:#5EEAD4;--sobre-lot:#042F2E;--lot-suave:#134E4A;--lot-tinta:#5EEAD4;
    --nac:#A5B4FC;--sobre-nac:#1E1B4B;--nac-suave:#1E1B4B;--nac-tinta:#C7D2FE;
    --cas-vacia:#0B1120;--cas-vacia-borde:#6B7A90;
    --bola:#0F172A;--bola-borde:#E2E8F0;--quinta:#F1F5F9;--sobre-quinta:#0F172A;--acierto:#3A2A0A;
    --ficha:#E2E8F0;--sobre-ficha:#0F172A;
    --anillo-base:#334155;--anillo:#5EEAD4;
    --m1-f:#4C0519;--m1-t:#FECDD3;--m1-a:rgba(159,18,57,.6);
    --m2-f:#022C22;--m2-t:#A7F3D0;--m2-a:rgba(6,95,70,.6);
    --m3-f:#1E1B4B;--m3-t:#C7D2FE;--m3-a:rgba(55,48,163,.6);
    --m4-f:#082F49;--m4-t:#BAE6FD;--m4-a:rgba(7,89,133,.6);
    --m5-f:#2E1065;--m5-t:#DDD6FE;--m5-a:rgba(91,33,182,.6);
    --m6-f:#451A03;--m6-t:#FDE68A;--m6-a:rgba(146,64,14,.6);
    --pie-fondo:#0B1220;--pie-linea:#1E293B;--pie-chip:#1E293B;
    --gar-fondo:#042F2E;--gar-borde:#134E4A;--gar-icono:#0F766E;--sobre-gar-icono:#FFFFFF;
    --ad-fondo:#1E293B;--ad-borde:#334155;--ad-forma:#334155;--ad-forma-2:#273449;--ad-texto:#CBD5E1;--ad-punteado:#64748B;
    --velo:rgba(0,0,0,.65);--sombra:rgba(0,0,0,.5);
    --sh-xs:0 1px 2px 0 rgba(0,0,0,.4);--sh-sm:0 1px 3px 0 rgba(0,0,0,.5),0 1px 2px -1px rgba(0,0,0,.5);
    --sh-md:0 4px 6px -1px rgba(0,0,0,.45),0 2px 4px -2px rgba(0,0,0,.45);--sh-lg:0 10px 15px -3px rgba(0,0,0,.5),0 4px 6px -4px rgba(0,0,0,.5);
    --sh-in:inset 0 2px 4px 0 rgba(0,0,0,.35);--sh-marca:0 1px 3px 0 rgba(0,0,0,.5);
    --mq-fondo:#161B21;--mq-boton:#262D35;--mq-borde:#4A545F;
    --mq-escenario:#070A0D;--mq-marco:#2B3139;
    --mq-nota:#121820;--mq-nota-texto:#E2E8ED;--mq-nota-2:#A8B4BE;--mq-nota-linea:#28313A;--mq-codigo:#0C1116;
    --mq-zona:#FF6CBD;--mq-zona-texto:#1A0010;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --papel:#020617;--hoja:#0F172A;--hoja-2:#1E293B;--tonal:#042F2E;--tonal-2:#06302D;
    --tinta:#F1F5F9;--tinta-2:#CBD5E1;--tinta-3:#94A3B8;--texto:#E2E8F0;
    --linea:#6B7A90;--linea-2:#334155;--divisor:#1E293B;--regla:#CBD5E1;
    --caribe:#5EEAD4;--caribe-hover:#99F6E4;--caribe-suave:#134E4A;--caribe-borde:#2DD4BF;--sobre-caribe:#042F2E;
    --boton:#0F766E;--boton-hover:#115E59;--sobre-boton:#FFFFFF;--anillo-foco:#134E4A;
    --b50:#042F2E;--b100:#134E4A;--b700:#5EEAD4;--b800:#99F6E4;--b900:#CCFBF1;--b-borde:#14B8A6;
    --a50:#2A1F07;--a100:#3A2A0A;--a600:#F59E0B;--a700:#FCD34D;--a800:#FDE68A;--a900:#FEF3C7;
    --s50:#0B1120;--s100:#1E293B;--s200:#334155;--s300:#475569;--s700:#CBD5E1;--s800:#E2E8F0;--s900:#F8FAFC;
    --ok:#6EE7B7;--ok-suave:#022C22;--ok-borde:#059669;--ok-ico:#34D399;
    --pre:#FCD34D;--pre-suave:#2A1F07;--pre-borde:#F59E0B;--pre-txt:#FDE68A;
    --esp:#CBD5E1;--esp-suave:#1E293B;
    --uni:#99F6E4;--uni-suave:#042F2E;--uni-borde:#14B8A6;
    --guayaba:#FDA4AF;--guayaba-suave:#4C0519;
    --mora:#C4B5FD;--mora-suave:#2E1065;--guadua:#86EFAC;--guadua-suave:#052E16;--mango:#FCD34D;--mango-suave:#3A2A0A;
    --ocre:#FCD34D;--ocre-deco:#F59E0B;--ocre-suave:#2A1F07;
    --ch:#E2E8F0;--sobre-ch:#0F172A;--ch-suave:#1E293B;--ch-tinta:#E2E8F0;
    --lot:#5EEAD4;--sobre-lot:#042F2E;--lot-suave:#134E4A;--lot-tinta:#5EEAD4;
    --nac:#A5B4FC;--sobre-nac:#1E1B4B;--nac-suave:#1E1B4B;--nac-tinta:#C7D2FE;
    --cas-vacia:#0B1120;--cas-vacia-borde:#6B7A90;
    --bola:#0F172A;--bola-borde:#E2E8F0;--quinta:#F1F5F9;--sobre-quinta:#0F172A;--acierto:#3A2A0A;
    --ficha:#E2E8F0;--sobre-ficha:#0F172A;
    --anillo-base:#334155;--anillo:#5EEAD4;
    --m1-f:#4C0519;--m1-t:#FECDD3;--m1-a:rgba(159,18,57,.6);
    --m2-f:#022C22;--m2-t:#A7F3D0;--m2-a:rgba(6,95,70,.6);
    --m3-f:#1E1B4B;--m3-t:#C7D2FE;--m3-a:rgba(55,48,163,.6);
    --m4-f:#082F49;--m4-t:#BAE6FD;--m4-a:rgba(7,89,133,.6);
    --m5-f:#2E1065;--m5-t:#DDD6FE;--m5-a:rgba(91,33,182,.6);
    --m6-f:#451A03;--m6-t:#FDE68A;--m6-a:rgba(146,64,14,.6);
    --pie-fondo:#0B1220;--pie-linea:#1E293B;--pie-chip:#1E293B;
    --gar-fondo:#042F2E;--gar-borde:#134E4A;--gar-icono:#0F766E;--sobre-gar-icono:#FFFFFF;
    --ad-fondo:#1E293B;--ad-borde:#334155;--ad-forma:#334155;--ad-forma-2:#273449;--ad-texto:#CBD5E1;--ad-punteado:#64748B;
    --velo:rgba(0,0,0,.65);--sombra:rgba(0,0,0,.5);
    --sh-xs:0 1px 2px 0 rgba(0,0,0,.4);--sh-sm:0 1px 3px 0 rgba(0,0,0,.5),0 1px 2px -1px rgba(0,0,0,.5);
    --sh-md:0 4px 6px -1px rgba(0,0,0,.45),0 2px 4px -2px rgba(0,0,0,.45);--sh-lg:0 10px 15px -3px rgba(0,0,0,.5),0 4px 6px -4px rgba(0,0,0,.5);
    --sh-in:inset 0 2px 4px 0 rgba(0,0,0,.35);--sh-marca:0 1px 3px 0 rgba(0,0,0,.5);
    --mq-fondo:#161B21;--mq-boton:#262D35;--mq-borde:#4A545F;
    --mq-escenario:#070A0D;--mq-marco:#2B3139;
    --mq-nota:#121820;--mq-nota-texto:#E2E8ED;--mq-nota-2:#A8B4BE;--mq-nota-linea:#28313A;--mq-codigo:#0C1116;
    --mq-zona:#FF6CBD;--mq-zona-texto:#1A0010;
    color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:62.5%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html[data-letra="130"]{font-size:81.25%}
html[data-letra="150"]{font-size:93.75%}
html[data-letra="200"]{font-size:125%}
body{background:var(--mq-escenario);color:var(--tinta);font-size:14px}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--caribe);outline-offset:2px}
.mq-bar :focus-visible,.mq-notas :focus-visible{outline-color:var(--mq-cinta)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== Barra de la maqueta (fuera del portal) ===== */
.mq-bar{background:var(--mq-fondo);color:var(--mq-texto);font:13px/1.35 var(--f-mq);padding-top:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mq-bar::after{content:"";display:block;height:7px;margin:8px calc(-1 * max(16px,env(safe-area-inset-left,0px))) 0;background:repeating-linear-gradient(135deg,var(--mq-cinta) 0 14px,var(--mq-fondo) 14px 28px)}
.mq-fila{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.mq-cinta{flex:none;background:var(--mq-cinta);color:var(--mq-cinta-texto);font:800 12px/1 var(--f-mq);letter-spacing:.12em;padding:6px 8px;border-radius:3px}
.mq-id{display:flex;flex-direction:column;min-width:0;flex:1 1 260px}
.mq-titulo{font-weight:700;font-size:14px}
.mq-sub{color:var(--mq-texto-2);font-size:12px}
.mq-reloj{font-variant-numeric:tabular-nums;background:var(--mq-boton);border:1px solid var(--mq-borde);padding:6px 10px;border-radius:4px;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.mq-reloj i{width:8px;height:8px;border-radius:50%;background:var(--mq-cinta)}
.mq-controles{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:center}
.mq-b{color:var(--mq-texto);background:var(--mq-boton);border:1px solid var(--mq-borde);border-radius:4px;min-height:44px;padding:6px 11px;font:600 13px/1.2 var(--f-mq)}
.mq-b[aria-pressed="true"]{background:var(--mq-cinta);color:var(--mq-cinta-texto);border-color:var(--mq-cinta)}
.mq-b:disabled{opacity:.45;cursor:not-allowed}
.mq-seg{display:inline-flex;align-items:stretch;border:1px solid var(--mq-borde);border-radius:4px;overflow:hidden}
.mq-seg .mq-b{border:0;border-radius:0;border-left:1px solid var(--mq-borde)}
.mq-seg .mq-b:first-of-type{border-left:0}
.mq-seg-et{display:flex;align-items:center;padding:0 8px;color:var(--mq-texto-2);font-size:12px;border-right:1px solid var(--mq-borde)}
.mq-sel{min-height:44px;max-width:100%;background:var(--mq-boton);color:var(--mq-texto);border:1px solid var(--mq-borde);border-radius:4px;padding:6px 8px;font:600 13px var(--f-mq)}
.mq-medidas{flex:1 1 100%;font-size:12px;color:var(--mq-texto);background:var(--mq-boton);border:1px dashed var(--mq-zona);padding:6px 10px;border-radius:4px;font-variant-numeric:tabular-nums}
.mq-medidas b{color:var(--mq-cinta)}
.solo-ancho{display:inline}
@media (max-width:899px){
  .solo-ancho{display:none}
  .mq-reloj{min-height:40px;padding:4px 8px;font-size:12px;margin-right:auto}
  .mq-reloj i{display:none}
  .mq-b{padding:6px 9px;font-size:12px}
  .mq-cinta{display:none}
  .mq-bar{padding-top:6px}
  .mq-titulo{font-size:13px}
  .mq-sub{font:11.5px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
  .mq-reloj,.mq-fila .mq-b{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:12.5px}
  .mq-bar::after{margin-top:6px}
}

/* ===== Escena: teléfono + notas ===== */
.mq-escena{display:flex;gap:24px;justify-content:center;align-items:flex-start;padding-block:12px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mq-equipo{--tel-w:375px;--tel-h:812px;flex:0 0 auto;width:calc(var(--tel-w) + 16px);height:min(calc(var(--tel-h) + 16px),calc(100vh - var(--mq-bar-h,120px) - 24px));height:min(calc(var(--tel-h) + 16px),calc(100dvh - var(--mq-bar-h,120px) - 24px));min-height:420px;border:8px solid var(--mq-marco);border-radius:30px;background:var(--papel);overflow:hidden;position:relative;transform:translateZ(0);display:flex;flex-direction:column}
.mq-url{flex:none;display:flex;align-items:center;gap:6px;min-height:46px;padding:3px 8px;background:var(--hoja-2);border-bottom:1px solid var(--linea);font:13px/1.2 var(--f-mq);color:var(--tinta-2)}
.mq-url-b{flex:none;width:40px;height:40px;border:0;background:transparent;border-radius:6px;font-size:22px;line-height:1;color:var(--tinta)}
.mq-url-b:disabled{opacity:.35;cursor:default}
.mq-url-campo{flex:1 1 auto;min-width:0;background:var(--hoja);border:1px solid var(--linea);border-radius:18px;padding:7px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-url-campo b{color:var(--tinta);font-weight:700}
.mq-url-chip{flex:none;font-size:11px;border:1px dashed var(--mq-zona);color:var(--tinta-2);padding:3px 6px;border-radius:4px;white-space:nowrap}
.mq-pantalla{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;container-type:inline-size;container-name:pantalla;position:relative;background:var(--papel);overscroll-behavior:contain}
.mq-notas{flex:1 1 0;max-width:620px;min-width:0;height:min(844px,calc(100vh - var(--mq-bar-h,120px) - 24px));height:min(844px,calc(100dvh - var(--mq-bar-h,120px) - 24px));min-height:420px;overflow-y:auto;background:var(--mq-nota);color:var(--mq-nota-texto);border:1px solid var(--mq-nota-linea);border-radius:8px;font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.mq-velo{position:fixed;inset:0;background:var(--velo);z-index:65}
@media (min-width:900px){
  .mq.pequeno .mq-equipo{--tel-w:360px;--tel-h:640px;min-height:0}
  .mq.notas-ocultas:not(.escritorio) .mq-notas{display:none}
  .mq.escritorio .mq-equipo{flex:1 1 auto;width:auto;max-width:1500px;border-radius:12px}
  .mq.escritorio .mq-notas{display:none}
  .mq.escritorio .mq-notas.abierta{display:block;position:fixed;top:0;right:0;bottom:0;width:min(580px,92vw);max-width:none;height:auto;min-height:0;z-index:70;border-radius:0}
}
@media (max-width:899px){
  .mq-escena{display:block;padding:0}
  .mq-equipo{width:auto;height:auto;min-height:0;border:0;border-radius:0;overflow:visible;transform:none;display:block}
  .mq-url{min-height:40px;padding-block:2px}
  .mq-url-b{width:36px;height:36px}
  .mq-url-campo{padding:5px 10px}
  .mq-pantalla{overflow:visible}
  .mq-notas{display:none}
  .mq-notas.abierta{display:block;position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;min-height:0;max-height:86vh;max-height:86dvh;max-width:none;z-index:70;border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
}

/* ===== Notas ===== */
.nota-cab{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;background:var(--mq-nota);border-bottom:1px solid var(--mq-nota-linea);padding-block:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.nota-cab p{margin:0;font:700 13px/1.3 var(--f-mq);letter-spacing:.06em;text-transform:uppercase;flex:1}
.nota-cerrar{width:44px;height:44px;border:1px solid var(--mq-nota-linea);background:transparent;border-radius:6px;font-size:22px;line-height:1;color:var(--mq-nota-texto)}
.nota-cuerpo{padding-block:4px 32px;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.nota-cuerpo h2{font:700 12px/1.3 var(--f-mq);text-transform:uppercase;letter-spacing:.09em;color:var(--mq-nota-2);margin:26px 0 8px;padding-top:14px;border-top:1px solid var(--mq-nota-linea)}
.nota-cuerpo h2:first-child{border-top:0;margin-top:12px}
.nota-cuerpo h3{font-size:15px;margin:14px 0 4px}
.nota-cuerpo p{margin:0 0 10px;max-width:68ch}
.nota-cuerpo ul,.nota-cuerpo ol{margin:0 0 10px;padding-left:20px}
.nota-cuerpo li{margin-bottom:5px}
.nota-ir{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.nota-ir button{font:600 12px/1.2 var(--f-mq);min-height:44px;padding:6px 10px;border:1px solid var(--mq-nota-linea);background:var(--mq-codigo);color:var(--mq-nota-texto);border-radius:4px}
.nota-env{overflow-x:auto;margin:6px 0 12px;border:1px solid var(--mq-nota-linea);border-radius:6px}
.nota-env table{border-collapse:collapse;width:100%;font-size:13px;min-width:440px}
.nota-env th,.nota-env td{text-align:left;vertical-align:top;padding:7px 9px;border-bottom:1px solid var(--mq-nota-linea)}
.nota-env th{font:700 11px/1.3 var(--f-mq);text-transform:uppercase;letter-spacing:.05em;color:var(--mq-nota-2)}
.nota-env td{font-variant-numeric:tabular-nums}
.nota-env tr.gana td{font-weight:700}
.nota-cuerpo code{font:12px var(--f-mq)}
.nota-actual{font:12px var(--f-mq);color:var(--mq-nota-2)}
.nota-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:560px){.nota-par{grid-template-columns:1fr}}
.nota-par>div{border:1px solid var(--mq-nota-linea);border-radius:6px;padding:10px 12px;min-width:0}
.nota-par h3{margin-top:0}
.jsonld{font:12px/1.45 var(--f-mq);background:var(--mq-codigo);color:var(--mq-nota-texto);border:1px solid var(--mq-nota-linea);border-radius:6px;padding:12px;overflow:auto;max-height:340px;white-space:pre;margin:6px 0 10px}
.etiqueta{display:inline-block;font:700 11px/1.2 var(--f-mq);padding:3px 6px;border-radius:3px;background:var(--mq-codigo);border:1px solid var(--mq-nota-linea);white-space:nowrap}

/* ===== Portal: base ===== */
.p{position:relative;background:var(--papel);color:var(--tinta);font:400 1.7rem/1.5 var(--f-texto);min-height:100%;padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
.p a{color:var(--caribe)}
.p h1,.p h2,.p h3{text-wrap:balance}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));max-width:1232px;margin-inline:auto}
.cab{background:var(--hoja);border-bottom:1px solid var(--linea)}
/* Cabecera de la 04: marca con ícono de calendario «RESULTADOS / Loterías y chance» (visible también en el teléfono),
   Buscar y la píldora ¿Cayó?; debajo, el campo «Busca un juego» con el Menú al lado. La marca va en px (es el logotipo);
   los botones crecen con la letra y, si no caben, bajan de fila sin montarse. */
.cab-in{display:flex;align-items:center;gap:6px;min-height:56px;flex-wrap:wrap;padding-block:6px}
.marca{display:flex;align-items:center;gap:8px;min-width:0;min-height:44px;text-decoration:none;color:var(--tinta)!important;margin-right:auto}
.marca svg{width:32px;height:32px;flex:none}
.marca-t{display:flex;flex-direction:column;min-width:0;font:700 16px/1.1 var(--f-titulo);white-space:nowrap}
.marca-t small{font:800 10.5px/1.3 var(--f-texto);letter-spacing:.12em;text-transform:uppercase;color:var(--ocre)}
.cab-acc .solo-tel-cab{display:none}
.nav{display:none}
.cab-acc{display:flex;gap:6px;align-items:center;justify-content:flex-end;min-width:0;margin-left:auto}
.b-ico{min-width:44px;height:44px;border-radius:22px;border:1px solid var(--linea);background:var(--hoja);color:var(--tinta);display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 11px;font:600 1.5rem var(--f-texto)}
.b-ico svg{width:20px;height:20px;flex:none}
.b-ico .b-txt{display:none}
.b-ico[aria-expanded="true"]{border-color:var(--caribe);color:var(--caribe)}
#btn-buscar{padding:0;border-width:1.5px;color:var(--caribe)}
.b-cayo{min-height:44px;padding:0 1.1rem;border-radius:22px;background:var(--caribe);color:var(--sobre-caribe);border:2px solid var(--caribe);font:700 1.6rem/1 var(--f-texto);white-space:nowrap}
.b-cayo:hover{background:var(--caribe-hover);border-color:var(--caribe-hover)}
.b-prim:hover{background:var(--caribe-hover);border-color:var(--caribe-hover)}
.panel{padding-block:0 10px;display:flex;gap:8px;align-items:flex-start}
.panel .buscar-c{flex:1 1 auto;min-width:0;position:relative}
.panel .campo{min-height:44px;padding-block:8px;font-size:1.6rem;background:var(--papel)}
.panel #btn-menu{flex:none;border-radius:10px;min-height:44px}
.campo{display:block;width:100%;min-height:50px;padding:10px 14px;border:2px solid var(--linea);border-radius:10px;background:var(--hoja);color:var(--tinta);font:1.7rem/1.3 var(--f-texto)}
.campo:focus{border-color:var(--caribe);outline:none;box-shadow:0 0 0 2px var(--caribe-suave)}
.campo.num{font-variant-numeric:tabular-nums;letter-spacing:.14em;font-weight:700;font-size:2.2rem}
.campo.num::placeholder{color:var(--tinta-3);opacity:1;font-weight:600}
.sugerencias{list-style:none;margin:8px 0 0;padding:0;border:1px solid var(--linea);border-radius:10px;background:var(--hoja);overflow:hidden}
.sugerencias li+li{border-top:1px solid var(--linea-2)}
.sugerencias a,.sugerencias p{display:flex;gap:10px;align-items:center;min-height:48px;padding:6px 12px;margin:0;color:var(--tinta)!important;text-decoration:none;font-weight:600}
.sugerencias small{font-weight:400;color:var(--tinta-2);margin-left:auto;font-size:1.5rem;text-align:right}
.main{display:block;padding-block:8px}
.b-prim,.b-sec{min-height:48px;padding:10px 1.8rem;border-radius:10px;font:700 1.7rem/1.2 var(--f-texto);display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;text-align:center}
.b-prim{border:2px solid var(--caribe);background:var(--caribe);color:var(--sobre-caribe)!important}
.b-sec{border:2px solid var(--linea);background:var(--hoja);color:var(--tinta)!important;font-weight:600}
.b-sec[aria-pressed="true"]{border-color:var(--caribe);color:var(--caribe)!important;background:var(--caribe-suave)}
.b-sec svg,.b-prim svg{width:20px;height:20px;flex:none}
.b-ancho{width:100%}
.b-enl{border:0;background:transparent;color:var(--caribe);text-decoration:underline;text-underline-offset:3px;font:600 1.6rem/1.3 var(--f-texto);padding:10px 0;min-height:44px;display:inline-flex;align-items:center;gap:6px;text-align:left}
.b-enl svg{width:16px;height:16px;flex:none}
.fila-b{display:flex;flex-wrap:wrap;gap:10px}
.fila-b>*{flex:1 1 13rem;min-width:0;max-width:100%}
.od-fila>*{min-width:0;max-width:100%;flex-basis:20rem}
.ceja{display:block;font:700 1.5rem/1.3 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2);margin:0 0 4px}
.bajada{margin:-2px 0 12px;color:var(--tinta-2);font-size:1.6rem}
.nota-peq{font-size:1.5rem;color:var(--tinta-2);margin:10px 0 0}
.bloque h2,.h2{font:700 2.2rem/1.2 var(--f-titulo);margin:0 0 10px;color:var(--tinta)}
.bloque h3{font:700 1.8rem/1.25 var(--f-texto);margin:16px 0 8px}
.mod{background:var(--tonal-2);border:1px solid var(--linea-2);border-radius:16px;padding:1.4rem 1.6rem}
.mq-anot{font:13px/1.45 var(--f-mq);border:1.5px dashed var(--mq-zona);color:var(--tinta-2);padding:8px 10px;border-radius:4px;margin:10px 0 0;background:var(--hoja)}
.mq-anot::before{content:"Maqueta · ";font-weight:700;color:var(--tinta)}
.mq-anot button{font:600 13px var(--f-mq);min-height:44px;margin:6px 6px 0 0;border:1px solid var(--linea);background:var(--hoja-2);color:var(--tinta);border-radius:4px;padding:4px 10px}
.tag-ej{display:inline-block;font:600 12px/1.2 var(--f-mq);border:1px dashed var(--mq-zona);border-radius:4px;padding:3px 6px;color:var(--tinta-2);white-space:nowrap}
.ic{width:1em;height:1em;flex:none;vertical-align:-.12em}

.vista{max-width:776px;margin-inline:auto;min-width:0}
.col>.ad,.riel>.ad,.vista>.ad{margin-block:12px}
.ah-prox .anillo{width:4.4rem;height:4.4rem}
.f-cuenta .anillo{width:2.4rem;height:2.4rem}
.f-cuenta .ic{width:2rem;height:2rem}
.res .anillo{width:5.2rem;height:5.2rem}
.lista-mini a>.ic{margin-left:auto;color:var(--tinta-3);width:14px;height:14px}
.lista-mini a>.ic:first-child{margin-left:0;width:2rem;height:2rem;color:var(--caribe)}
.coinc-tu .ic{width:1.3rem;height:1.3rem}
.hoja .hoja-cab .b-ico{font-size:2.4rem;line-height:1}
.cy-form-w{margin:0}
/* Portada: columnas (en el teléfono se intercalan con order) */
.lienzo{display:flex;flex-direction:column;gap:2rem}
.col,.riel{display:contents}
.o1{order:1}.o2{order:2}.o3{order:3}.o4{order:4}.o5{order:5}.o6{order:6}.o7{order:7}.o8{order:8}.o9{order:9}.o10{order:10}.o11{order:11}.o12{order:12}.o13{order:13}.o14{order:14}
/* Portada: el H1 es una línea-rótulo de 17 px (2 líneas como máximo); el contador y la hora bajan a la cabecera de la pizarra */
.dia h1{font:700 1.7rem/1.25 var(--f-texto);margin:0;max-width:44ch}
.dia.grande h1{font:700 2.4rem/1.15 var(--f-titulo);letter-spacing:-.005em}
.dia-f{margin:.6rem 0 0;font-size:1.5rem;color:var(--tinta-2)}
.lienzo .dia{margin-bottom:-1.2rem}

/* Monogramas: círculo = chance, cuadrado redondeado = lotería, hexágono = nacionales */
.mono{flex:none;width:3.2rem;height:3.2rem;display:inline-grid;place-items:center;font:700 1.25rem/1 var(--f-texto);letter-spacing:.02em}
.mono-chance{border-radius:50%}
.mono-loteria{border-radius:.9rem;font-size:1.05rem}
.mono-nac{clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%)}
/* v4 · Un color por tipo de juego (variables --t-*): chance, lotería, Baloto y más. Lo usan casillas, balotas, monogramas,
   chips, filas de la tabla y la etiqueta de la tarjeta. */
.tipo-chance{--t-fill:var(--ch);--t-sobre:var(--sobre-ch);--t-suave:var(--ch-suave);--t-tinta:var(--ch-tinta)}
.tipo-loteria{--t-fill:var(--lot);--t-sobre:var(--sobre-lot);--t-suave:var(--lot-suave);--t-tinta:var(--lot-tinta)}
.tipo-nac{--t-fill:var(--nac);--t-sobre:var(--sobre-nac);--t-suave:var(--nac-suave);--t-tinta:var(--nac-tinta)}
.mono{background:var(--t-suave);color:var(--t-tinta);box-shadow:inset 0 0 0 1.5px var(--t-fill)}

/* Balotas, quinta, serie, signo */
/* Cifras en fichas sólidas (tinta con la cifra clara, esquinas de 10 px), SIN la raya de tablero; la quinta va en un círculo de contorno */
.bolas{display:inline-flex;gap:6px;flex:none}
.bola{--b:calc(36px + 1.6rem);position:relative;width:var(--b);height:var(--b);border-radius:10px;display:grid;place-items:center;background:var(--t-fill);border:2px solid var(--t-fill);color:var(--t-sobre);font:700 calc(14px + 1.6rem)/1 var(--f-texto);font-variant-numeric:tabular-nums}
.bolas.f .bola{--b:calc(28px + 1.6rem);font-size:calc(10px + 1.4rem);border-radius:9px}
.bolas.p .bola{--b:calc(22px + 1rem);font-size:calc(9px + 1rem);border-radius:7px}
.bolas.pre .bola{border-style:dashed;border-color:var(--pre-borde);background:var(--pre-suave);color:var(--pre)}
.bolas.uni .bola{box-shadow:inset 0 0 0 2.5px var(--hoja)}
.bolas.vacias .bola{border:1.5px solid var(--cas-vacia-borde);background:var(--cas-vacia)}
.bolas .bola.no{background:transparent;color:var(--tinta-2);border-color:var(--linea)}
.revelar .bola{animation:revelar .3s ease-out both;animation-delay:calc(var(--i) * 150ms)}
@keyframes revelar{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.grupo{display:inline-flex;flex-direction:column;gap:.4rem;min-width:0;flex:none}
.et{font:600 1.5rem/1.15 var(--f-texto);color:var(--tinta-2)}
.quinta{--b:calc(36px + 1.6rem);width:var(--b);height:var(--b);border-radius:50%;display:grid;place-items:center;background:var(--hoja);border:2px solid var(--tinta);color:var(--tinta);font:700 calc(14px + 1.6rem)/1 var(--f-texto);font-variant-numeric:tabular-nums}
.quinta.f{--b:calc(28px + 1.6rem);font-size:calc(10px + 1.4rem)}
.qg{display:inline-flex;flex-direction:column;align-items:center;gap:2px;flex:none}
.qx{display:inline-flex;align-items:center;gap:.6rem}
.signo{display:inline-flex;align-items:center;min-height:calc(28px + 1.6rem);border:2px solid var(--tinta);border-radius:999px;padding:0 1.2rem;font:700 1.6rem/1.1 var(--f-texto);background:var(--hoja)}
.serie{height:calc(36px + 1.6rem);min-width:8.8rem;padding:0 1.4rem;border-radius:6px;border:2px solid var(--tinta);display:grid;place-items:center;font:700 calc(12px + 1.6rem)/1 var(--f-texto);letter-spacing:.08em;font-variant-numeric:tabular-nums;background:var(--hoja-2);position:relative}
.serie::before,.serie::after{content:"";position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--hoja);border:2px solid var(--tinta)}
.serie::before{left:-8px;clip-path:inset(0 0 0 50%)}
.serie::after{right:-8px;clip-path:inset(0 50% 0 0)}
.serie.f{height:calc(28px + 1.6rem);min-width:7rem;font-size:calc(8px + 1.4rem)}
.guiones{font:700 2rem/1 var(--f-texto);letter-spacing:.18em;color:var(--tinta-3)}

/* Sellos de estado: forma de icono + rótulo + color */
/* Sello de 17 px: una línea a 375 px; con la letra grande pasa a 2 líneas sin cortarse */
.sello{display:inline-flex;align-items:center;gap:.6rem;font:600 1.7rem/1.25 var(--f-texto);padding:.4rem .9rem;border-radius:1.2rem;border:1.5px solid transparent;margin:0;font-variant-numeric:tabular-nums;max-width:100%;text-wrap:balance}
.sello svg{width:1.7rem;height:1.7rem;flex:none}
.s-ok{background:var(--ok-suave);color:var(--ok);border-color:var(--ok)}
.s-pre{background:var(--pre-suave);color:var(--pre);border:1.5px dashed var(--pre-borde)}
.s-pen,.s-curso{background:var(--esp-suave);color:var(--esp);border-color:var(--linea-2)}
.sello-nota{display:block;font-size:1.5rem;color:var(--tinta-2);margin-top:.4rem}
.pronto{color:var(--guayaba)!important;font-weight:700}

/* Anillo de cuenta regresiva */
.anillo{flex:none;display:block}
.anillo circle{fill:none;stroke-width:4.5}
.an-b{stroke:var(--anillo-base)}
.an-p{stroke:var(--anillo);stroke-linecap:round}
.anillo.cerca .an-p{stroke:var(--guayaba)}

/* Tarjeta «Ahora» (alto reservado: al cambiar no mueve nada) */
.ahora{background:var(--tonal);border:1px solid var(--linea-2);border-radius:22px;padding:1rem 1.4rem 1.2rem;display:grid;gap:.8rem;min-height:29rem;align-content:start}
.ah-ult{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.eti{display:flex;align-items:center;gap:8px;font:700 1.5rem/1.2 var(--f-texto);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2);margin:0}
.eti i{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none}
.ah-juego{margin:0}
.ah-juego a{display:flex;flex-direction:column;justify-content:center;min-height:44px;color:var(--tinta)!important;text-decoration:none}
.ah-nom{font:700 2.2rem/1.15 var(--f-titulo);text-decoration:underline;text-decoration-color:var(--caribe-borde);text-decoration-thickness:2px;text-underline-offset:5px}
.ah-nom svg{width:1.6rem;height:1.6rem;color:var(--caribe);vertical-align:-.1em;margin-left:.4rem}
.ah-meta{font:400 1.5rem/1.3 var(--f-texto);color:var(--tinta-2)}
.ah-num{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:flex-start;margin-top:.2rem}
.ah-prox{border-top:1px dashed var(--linea);padding-top:1rem;display:flex;align-items:center;gap:1rem}
.ah-prox p{margin:0;flex:1 1 0;min-width:0;font-size:1.6rem;line-height:1.35;font-variant-numeric:tabular-nums}
.ah-prox .b-sec{flex:none}
.ah-prox p b{font-size:1.7rem}
.ah-prox .b-sec{min-height:44px;padding:6px 1.4rem;font-size:1.6rem}

/* Barra ¿Cayó? */
.cayo-caja{background:var(--hoja);border:2px solid var(--caribe-borde);border-radius:16px;padding:1.2rem 1.4rem}
.cy-et{display:block;font:700 1.6rem/1.3 var(--f-texto);margin:0 0 .6rem}
.cy-et span{font-weight:400;color:var(--tinta-2)}
.cy-form{display:flex;gap:8px}
.cy-form .campo{flex:1 1 auto;min-width:0;min-height:56px}
.cy-form .b-prim{min-height:56px}
.cy-form-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.75fr);gap:8px;align-items:end}
.cy-form-2 label{display:flex;flex-direction:column;gap:4px;font-size:1.5rem;font-weight:600;min-width:0}
.cy-form-2 .b-prim{grid-column:1 / -1}
.cy-form-3{grid-template-columns:minmax(0,1fr) minmax(0,.8fr) auto}
.cy-form-3 .b-prim{grid-column:auto;padding-inline:1.4rem;min-height:56px}
.cy-lock{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;font-size:1.5rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cy-lock svg{width:1.6rem;height:1.6rem}

/* Respuesta de ¿Cayó? (sin anuncios) */
.resp{margin-top:1.2rem;display:flex;flex-direction:column;gap:1.2rem}
.resp:empty{display:none}
.resp-h{font:700 2.2rem/1.2 var(--f-titulo);margin:0}
.resp-sub{margin:.4rem 0 0;font-size:1.5rem;color:var(--tinta-2)}
.mcard{background:var(--hoja);border:1px solid var(--linea);border-radius:14px;padding:1.2rem 1.4rem;display:flex;flex-direction:column;gap:.9rem}
.mcard p{margin:0}
.mcard.m-pre{background:var(--pre-suave);border:2px dashed var(--pre-borde)}
.mcard.m-no{border-style:dashed}
.mtag{display:inline-flex;align-items:center;gap:.8rem;font:700 1.5rem/1.2 var(--f-texto);text-transform:uppercase;letter-spacing:.05em;color:var(--tinta)}
.tagn{display:inline-flex;gap:2px}
.tagn i{width:10px;height:14px;border:1.5px solid var(--tinta);border-radius:2px}
.tagn i.on{background:var(--tinta)}
.m-txt{font-size:1.7rem}
.m-fila{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.m-acc{display:flex;flex-wrap:wrap;gap:0 1.6rem}
.caja-aviso{display:flex;gap:.8rem;align-items:flex-start;background:var(--hoja-2);border-radius:10px;padding:1rem 1.2rem;font-size:1.5rem;margin:0}
.caja-aviso svg{width:1.8rem;height:1.8rem;flex:none;margin-top:.1rem}
.resp-acc{display:flex;flex-wrap:wrap;gap:10px}
.resp-acc .b-sec{flex:1 1 100%;min-height:44px;font-size:1.6rem}
.unas{border-top:1px solid var(--linea);padding-top:.4rem}
.unas summary{min-height:44px;display:flex;align-items:center;gap:.6rem;cursor:pointer;font-weight:600;color:var(--caribe);list-style:none}
.unas summary::-webkit-details-marker{display:none}
.unas summary::after{content:"▾";font-size:1.4rem}
.unas[open] summary::after{content:"▴"}
.unas ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.unas li{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--linea-2);font-size:1.6rem}
.recomp{border-top:3px double var(--linea);margin-top:.4rem;padding:1.4rem;background:var(--caribe-suave);border-radius:0 0 14px 14px}
.recomp p{margin:0 0 .6rem}
.recomp .b-enl{font-size:1.6rem}

/* Chips y conmutadores */
.ctl{display:flex;flex-direction:column;gap:10px;min-width:0}
.piz-cab h2{font:700 2.2rem/1.2 var(--f-titulo);margin:0}
.piz-cab p{margin:.2rem 0 0;font-size:1.5rem;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.elige{background:var(--tonal-2);border:1px solid var(--linea-2);border-radius:18px;padding:1.4rem 1.6rem}
.elige h2{font:700 2rem/1.2 var(--f-titulo);margin:0 0 .4rem}
.elige p{margin:0}
.elige-l{display:flex;gap:8px;margin:1.2rem 0;overflow-x:auto;scrollbar-width:none;padding:2px}
.elige-l::-webkit-scrollbar{display:none}
.elige .fila-b{margin-top:.4rem}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:44px;padding:0 1.4rem;border-radius:22px;border:1.5px solid var(--linea);background:var(--hoja);font:700 1.6rem var(--f-texto);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.chip span{font-weight:400;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.chip[aria-pressed="true"] span{color:var(--papel)}
.chip .sw-t{width:1.2rem;height:1.2rem;border-radius:3px;background:var(--t-fill);flex:none;box-shadow:0 0 0 1.5px var(--hoja)}
.chip.tipo-nac .sw-t{border-radius:50%}
.chip.tipo-chance .sw-t{border-radius:50%}
.chip.tipo-loteria[aria-pressed="true"],.chip.tipo-nac[aria-pressed="true"]{background:var(--t-fill);border-color:var(--t-fill);color:var(--t-sobre)}
.chip.tipo-loteria[aria-pressed="true"] span,.chip.tipo-nac[aria-pressed="true"] span{color:var(--t-sobre)}
.ctl-2{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.seg{display:inline-flex;border:1.5px solid var(--linea);border-radius:10px;overflow:hidden;background:var(--hoja)}
.seg button{min-height:44px;padding:0 1.1rem;border:0;border-left:1.5px solid var(--linea);background:transparent;font:600 1.6rem var(--f-texto);white-space:nowrap}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{background:var(--caribe-suave);color:var(--caribe);font-weight:700;box-shadow:inset 0 -3px 0 var(--caribe)}
.filtro-nota{margin:0;font-size:1.5rem;color:var(--tinta-2)}

/* ===== v3 · Portada: encabezado de la 04, selector de fecha y rejilla de tarjetas ===== */
.hero{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.h-pag{font:700 2.6rem/1.14 var(--f-titulo);letter-spacing:-.01em;margin:0;color:var(--tinta)}
.h-pag .ceja{color:var(--caribe);font-size:1.3rem;letter-spacing:.09em;margin-bottom:.4rem}
.hero-l{margin:0;font-size:1.6rem;line-height:1.35;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.hero-l b{color:var(--tinta)}
.hero-l b,.hero-l [data-cuenta]{white-space:nowrap}
.hero-tip{display:flex;gap:.6rem;align-items:flex-start;margin:0;font-size:1.5rem;line-height:1.4;color:var(--tinta-2)}
.hero-tip svg{width:1.8rem;height:1.8rem;flex:none;margin-top:.1rem;color:var(--caribe)}
.hero-tip a{white-space:nowrap}
.fecha-f{display:flex;flex-direction:column;gap:.4rem;margin:.2rem 0 0}
.fecha-f label{font-size:1.5rem;color:var(--tinta-2);line-height:1.3}
.fecha-f label b{color:var(--tinta)}
.fecha-f .cy-form .campo{min-height:48px;font-size:1.6rem;padding-block:6px;flex:1 1 13rem}
.fecha-f .cy-form{flex-wrap:wrap}
.fecha-f .cy-form .b-sec{min-height:48px;flex:1 1 auto}
.ctl-fila{display:flex;align-items:center;gap:8px;min-width:0}
.ctl-fila .chips{flex:1 1 auto;min-width:0;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);padding-right:24px}
.ctl-fila .seg{flex:none}
.seg-t{flex:none;min-height:44px;padding:6px 1.2rem;border-radius:22px;font-size:1.6rem;gap:.6rem}
.seg-t[aria-pressed="true"]{background:var(--tinta);color:var(--papel)!important;border-color:var(--tinta)}
.grupo-cab{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:2px 12px;border-bottom:3px solid var(--regla);padding-bottom:.3rem;margin:0 0 1rem}
.grupo-cab h2{font:700 1.6rem/1.2 var(--f-texto);letter-spacing:.12em;text-transform:uppercase;margin:0}
.grupo-cab p{margin:0;font-size:1.5rem;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.rejilla{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;list-style:none;margin:0;padding:0}
@container pantalla (min-width: 32rem){ .rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} }
@container pantalla (min-width: 60rem){ .rejilla{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} }
.rejilla>.hueco,.rejilla>.tras-1{grid-column:1 / -1}
.hueco{padding-block:20px}
.hueco:empty{display:none}
/* Tarjeta v4 (jerarquía de la referencia): etiqueta pequeña arriba (tipo · región o fecha · hora), nombre con la serie o el
   signo en píldora a la derecha, número grande en casillas y, abajo, el sello con «Ficha ›». Toda la tarjeta lleva a la ficha
   (enlace estirado); Compartir es un botón aparte, encima, a 2 toques. El borde tiene contraste ≥ 3:1 con el papel. */
.tj{position:relative;container:tarjeta / inline-size;background:var(--hoja);border:1px solid var(--linea);border-radius:14px;padding:1rem 1.1rem 1rem;min-width:0;color:var(--tinta)}
/* Rejilla interna. Mediana: monograma a la izquierda de la etiqueta y el nombre, Compartir a la derecha. Angosta (2 columnas
   en el teléfono): monograma y Compartir arriba, luego etiqueta (sin la región), nombre, número y pie. */
.tj-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"mono eti comp" "tit tit tit" "num num num" "pie pie pie" "coinc coinc coinc";gap:.1rem .9rem;align-items:center;min-width:0}
.tj-cab{display:contents}
.tj-cab .mono{grid-area:mono}
.tj-eti{grid-area:eti;align-self:center}
.tj-comp{grid-area:comp}
.tj-tit{grid-area:tit;align-self:start;margin-top:.5rem}
.tj-num,.tj-esp{grid-area:num;margin-top:.8rem}
.tj-pie{grid-area:pie;margin-top:.8rem}
.tj-in>.coinc-tu{grid-area:coinc;margin-top:.6rem}
@container tarjeta (max-width: 19rem){
  .tj-in{grid-template-areas:"mono . comp" "eti eti eti" "tit tit tit" "num num num" "pie pie pie" "coinc coinc coinc";row-gap:.15rem}
  .tj-eti{margin-top:.2rem}
  .tj-eti .e-r{display:none}
  .tj-tit{margin-top:0}
  .tj-num,.tj-esp{margin-top:.5rem}
  .tj .tj-pie{margin-top:.5rem;padding-top:.5rem}
  .tj-in{margin-block:-.15rem}
  .tj-num{min-height:4.6rem}
  .cas{height:4.6rem}
  .tj .tj-pie .sello{padding-block:.15rem;line-height:1.2}
  /* En la rejilla de 2 columnas del teléfono toda la tarjeta ya es el enlace: «Ficha ›» se omite para no sumar una línea */
  .tj-pie .tj-ir{display:none}
}
.tj:hover{border-color:var(--caribe-borde)}
.tj:focus-within{outline:3px solid var(--caribe);outline-offset:2px}
.tj.mia{background:var(--tonal-2);border-color:var(--caribe-borde)}
.tj-cab .mono{width:3.4rem;height:3.4rem;font-size:1.2rem}
.tj-eti{margin:0;font:600 1.5rem/1.25 var(--f-texto);color:var(--tinta-2);font-variant-numeric:tabular-nums;min-width:0}
.tj-eti>span{white-space:nowrap}
.tj-eti>.e-t,.tj-eti>.e-r{white-space:normal;overflow-wrap:anywhere}
.tj-eti i{font-style:normal}
/* Tarjeta mediana (rejilla de escritorio): tipo arriba y la hora debajo, al lado del monograma; la región va en la ficha */
@container tarjeta (min-width: 19.01rem) and (max-width: 29.99rem){ .tj-eti .e-r{display:none} .tj-eti .e-h{display:block} .tj-eti .e-h .e-s{display:none} }
/* La destacada del teléfono lleva la etiqueta en una sola línea («Chance · 8:00 p. m.»; con la región si cabe) */
.tj-dest .tj-eti .e-h{display:inline}
.tj-dest .tj-eti .e-h .e-s{display:inline}
.tj-eti .e-t{color:var(--t-tinta);font-weight:700}
.tj-comp{position:relative;z-index:2;flex:none;width:44px;height:44px;margin:-4px 0;justify-self:end;border-radius:22px;border:1px solid var(--linea);background:var(--hoja);color:var(--tinta);display:grid;place-items:center;padding:0}
.tj-comp svg{width:18px;height:18px}
.tj-tit{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .8rem;min-width:0}
.tj-nom{margin:0;font:700 1.7rem/1.2 var(--f-texto);min-width:0;flex:1 1 auto;overflow-wrap:break-word;hyphens:manual}
@container tarjeta (min-width: 19.01rem){ .tj-nom{font-size:1.8rem} }
.tj-a{color:var(--tinta)!important;text-decoration:none}
.tj-a::after{content:"";position:absolute;inset:0;border-radius:14px;z-index:1}
.tj-a:focus-visible{outline:none}
.tj-pil{flex:none;max-width:100%;flex-wrap:wrap;display:inline-flex;align-items:center;gap:0 .4rem;min-height:2.8rem;padding:.1rem .9rem;border:1.5px solid var(--linea);border-radius:999px;background:var(--hoja-2);font:600 1.5rem/1.2 var(--f-texto);color:var(--tinta-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.tj-pil b{color:var(--tinta);font-weight:800;letter-spacing:.05em;overflow-wrap:anywhere;white-space:normal}
.tj-num{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;min-width:0;min-height:4.8rem}
/* Casillas por estado: rellenas (confirmado), rellenas con anillo interior (fuente única), punteadas (preliminar), vacías */
.casillas{display:inline-flex;gap:4px;flex:none}
.cas{position:relative;width:3.1rem;height:4.8rem;display:grid;place-items:center;border:2px solid var(--t-fill);background:var(--t-fill);color:var(--t-sobre);border-radius:8px;font:800 2.7rem/1 var(--f-texto);font-variant-numeric:tabular-nums}
@container tarjeta (min-width: 19.01rem){ .casillas{gap:6px} .cas{width:3.7rem;height:5rem;font-size:3rem;border-radius:9px} }
.c-uni .cas{box-shadow:inset 0 0 0 2px var(--hoja)}
.casillas.c-pre .cas{border-style:dashed;border-color:var(--pre-borde);background:var(--pre-suave);color:var(--pre)}
.c-pen .cas{border:1.5px solid var(--cas-vacia-borde);background:var(--cas-vacia)}
@container tarjeta (max-width: 19rem){ .casillas.c-pen{gap:3px} .c-pen .cas{width:2.2rem;height:3.4rem} .tj-esp{gap:.6rem} .tj-esp .anillo{width:2.8rem;height:2.8rem} }
/* Revelado al llegar un resultado: cada casilla pasa de punteada a rellena (velo punteado que se desvanece + un leve ajuste
   de escala). Solo opacity/transform, 260 ms por casilla con 45 ms de escalón: termina en < 400 ms. */
.revelar .cas{animation:v4-pop .26s ease-out both;animation-delay:calc(var(--i) * 45ms)}
.revelar .cas::after{content:attr(data-d);position:absolute;inset:-2px;display:grid;place-items:center;border:2px dashed var(--pre-borde);border-radius:inherit;background:var(--pre-suave);color:var(--pre);animation:v4-velo .26s ease-out both;animation-delay:calc(var(--i) * 45ms)}
@keyframes v4-pop{from{transform:scale(.92)}to{transform:none}}
@keyframes v4-velo{from{opacity:1}to{opacity:0}}
/* La quinta va pegada al número, en círculo de contorno sólido (lo punteado es solo para lo preliminar) */
.tj-x{display:inline-flex;align-items:center;gap:.6rem;font-size:1.5rem;color:var(--tinta-2);white-space:nowrap}
.tj-x b{width:3.6rem;height:3.6rem;display:grid;place-items:center;border:2px solid var(--t-fill);border-radius:50%;background:var(--hoja);color:var(--tinta);font-size:1.8rem;font-variant-numeric:tabular-nums}
.tj-esp{display:flex;align-items:center;gap:.8rem;min-height:4.8rem;color:var(--tinta-3)}
.tj-esp .anillo{width:3.4rem;height:3.4rem}
.tj-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;padding-top:.8rem;border-top:1px solid var(--linea-2);min-width:0}
.tj .sello{font-size:1.5rem;line-height:1.25;padding:.3rem .8rem}
.tj-ir{display:inline-flex;align-items:center;gap:.2rem;margin-left:auto;font:700 1.5rem/1.2 var(--f-texto);color:var(--caribe);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.tj-ir svg{width:1.4rem;height:1.4rem}
.tj .coinc-tu{justify-self:start}
.tj-pen{background:var(--hoja-2)}
.tj-pen .tj-nom{color:var(--tinta)}
/* La más reciente va a lo ancho en el teléfono (como la tarjeta «Ahora» de antes): número y sello más arriba */
@container pantalla (max-width: 59.99rem){ .rejilla>.tj-dest{grid-column:1 / -1} }
.tj-dest .tj-nom{font-size:2rem}
/* Tarjeta ancha (una columna con letra grande): número y quinta en una fila, sello en una o dos líneas */
@container tarjeta (min-width: 30rem){ .tj-num{flex-wrap:nowrap} }
.b-mas{width:100%;min-height:52px;margin-top:1.2rem}
.vacio{margin:0;padding:1.4rem;border:1.5px dashed var(--linea);border-radius:12px;color:var(--tinta-2)}
/* Realce breve de la tarjeta que acaba de confirmarse: un marco verde que aparece en 150 ms y se va en 350 ms (opacity) */
.tj::before{content:"";position:absolute;inset:-1px;border:3px solid var(--ok);border-radius:14px;opacity:0;pointer-events:none;transition:opacity .35s ease-out}
.tj.llego::before{opacity:1;transition-duration:.15s}
.coinc-tu{display:inline-flex;align-items:center;gap:.4rem;font:700 1.5rem/1.2 var(--f-texto);color:var(--caribe);border:1.5px solid var(--caribe-borde);border-radius:999px;padding:.3rem .8rem}

/* Sello en piezas: «Confirmado» · «7:01 p. m.» · «4 fuentes». Cada pieza va entera; el corte de línea lo decide el ancho
   del contenedor (tarjeta, ficha, tabla), nunca a mitad de una hora ni pegado al número. */
.s-t{display:block;min-width:0}
.s-a{font-weight:700}
@container tarjeta (max-width: 32rem){ .s-t .s-c{display:block} .s-t .s-sep{display:none} }
@container tarjeta (max-width: 16.5rem){ .s-t .s-b{display:block} }
@container sl (max-width: 34rem){ .s-t .s-c{display:block} .s-t .s-sep{display:none} }
@container sl (max-width: 18rem){ .s-t .s-b{display:block} }
.s-uni{background:var(--uni-suave);color:var(--uni);border:3px double var(--uni)}

/* Llévate el día: imagen, impresión y descarga del día completo, con anuncio voluntario */
.llevate{background:var(--tonal-2);border:1px solid var(--linea-2);border-radius:16px;padding:1.4rem 1.6rem;display:flex;flex-direction:column;gap:1rem}
.llevate h2{font:700 2.1rem/1.2 var(--f-titulo);margin:0}
.llevate p{margin:0}
.llevate .fila-b>*{flex:1 1 15rem}
.llevate .chip-ok{margin:0}
.od-fila{display:flex;flex-wrap:wrap;gap:10px}
.od-fila>*{flex:1 1 20rem}

/* Riel de escritorio: próximos sorteos, loterías de la semana, horarios de mañana y un anuncio fijo al final */
.prox-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.prox-l li{border-bottom:1px solid var(--linea-2)}
.prox-l a{display:flex;align-items:center;gap:1rem;min-height:5.6rem;padding:.5rem 0;color:var(--tinta)!important;text-decoration:none}
.prox-l a>span{display:flex;flex-direction:column;min-width:0;flex:1}
.prox-l b{font-size:1.6rem;line-height:1.25}
.prox-l small{font-size:1.5rem;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.prox-l .anillo{width:3.2rem;height:3.2rem}
.riel-fijo{display:none}
.solo-esc{display:none}

/* Directorio A-Z dentro de la portada */
.dir-p{display:flex;flex-direction:column;gap:2.4rem}

/* Términos y privacidad */
.legal-doc{display:flex;flex-direction:column;gap:1.6rem}
.legal-doc section{scroll-margin-top:12px}
.legal-doc h2{font:700 2rem/1.25 var(--f-titulo);margin:0 0 .6rem}
.legal-doc p,.legal-doc li{max-width:68ch}
.legal-doc p{margin:0 0 .8rem}
.legal-doc ul,.legal-doc ol{margin:0 0 .8rem;padding-left:2.2rem}
.legal-doc li{margin-bottom:.5rem}
.indice-l{columns:2 24rem;column-gap:2rem;margin:0;padding-left:2.2rem}
.indice-l li{break-inside:avoid}
.borrador{border:2px dashed var(--pre-borde);background:var(--pre-suave);color:var(--pre);border-radius:12px;padding:1rem 1.2rem;font-weight:700;font-size:1.6rem;margin:0}
.version{font-size:1.5rem;color:var(--tinta-2);border-top:1px solid var(--linea);padding-top:1rem}

/* Secos en lista: número y serie del mismo tamaño, siempre a la vista (también con la letra al 200 %) */
.secos-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.secos-l li{display:grid;grid-template-columns:minmax(0,1fr) 9rem 7rem;align-items:center;gap:.4rem 1.2rem;padding:.8rem 0;border-bottom:1px solid var(--linea-2);min-height:5.6rem}
.secos-l .sc-p{font-size:1.6rem;font-weight:600;min-width:0}
.secos-l .sc-v{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;font-variant-numeric:tabular-nums}
.secos-l .sc-v small{font-size:1.3rem;color:var(--tinta-2);letter-spacing:.06em;text-transform:uppercase}
.secos-l .sc-v b{font:700 2.4rem/1.05 var(--f-texto);letter-spacing:.08em}
@container pantalla (max-width: 36rem){
  .secos-l li{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .secos-l .sc-p{grid-column:1 / -1}
}

/* Loterías de los últimos días */
.lot-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.lr{border-bottom:1px solid var(--linea-2)}
.lr-a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;min-height:5.6rem;padding:.4rem 0;color:var(--tinta)!important;text-decoration:none}
.lr-t{display:flex;flex-direction:column;min-width:0}
.lr-t b{font-size:1.6rem;line-height:1.2}
.lr-t small{font-size:1.5rem;color:var(--tinta-2);line-height:1.3}
.lr-n{display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums;white-space:nowrap}
.lr-n b{font:700 2.2rem/1.1 var(--f-texto);letter-spacing:.06em}
.lr-n span{font-size:1.5rem;color:var(--tinta-2)}
.lr-s{display:flex;align-items:center;flex-wrap:wrap;gap:0 .4rem;padding-left:4.2rem;margin-top:-.8rem;font-size:1.5rem;color:var(--tinta-2)}
.lr-s .b-enl{font-size:1.5rem;padding:0;min-height:44px}

/* Ficha */
.migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;font-size:1.5rem;color:var(--tinta-2)}
.migas li{display:flex;align-items:center}
.migas li+li::before{content:"›";padding:0 8px;color:var(--tinta-3)}
.migas a{display:inline-flex;align-items:center;min-height:44px}
.migas{min-height:44px;display:flex;align-items:center}
.h-ficha{font:700 2.4rem/1.15 var(--f-titulo);letter-spacing:-.01em;margin:.4rem 0 .6rem}
.h-ficha.largo{font-size:2.2rem}
.h-ficha>span{display:block;font:600 1.7rem/1.3 var(--f-texto);color:var(--tinta-2);letter-spacing:0;margin-top:.2rem}
.ficha-meta{margin:0 0 1rem;color:var(--tinta-2);font-size:1.6rem}
.fecha-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fecha-nav .b-sec{min-height:44px;padding:6px 12px;font-size:1.5rem;flex:1 1 12rem}
.res{background:var(--hoja);border:1px solid var(--linea);border-radius:20px;padding:1rem 1.4rem 1.2rem;display:flex;flex-direction:column;gap:.6rem;min-width:0;container:sl / inline-size}
.mcard,.tt-b>.c-e{container:sl / inline-size}
.res-enl{display:flex;flex-wrap:wrap;gap:0 2rem;margin:-.4rem 0 0}
.res-enl .b-enl{font-size:1.5rem;padding:0}
.ficha-cab{margin-top:-8px}
.res-linea{margin:0;font-size:1.5rem;line-height:1.3;color:var(--tinta-2)}
.res-fila{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;align-items:flex-start}
.res-p{margin:0;font-size:1.5rem;color:var(--tinta-2)}
.fuentes{border-top:1px solid var(--linea-2)}
.fuentes>button{min-height:44px;border:0;background:none;padding:0;color:var(--caribe);font:600 1.6rem var(--f-texto);display:inline-flex;align-items:center;gap:.6rem}
.fuentes ul{list-style:none;margin:0;padding:0}
.fuentes li{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-bottom:1px solid var(--linea-2);font-size:1.5rem;min-height:44px}
.fuentes li span{min-width:0}
.res-fijo{margin:0;font-size:1.5rem;color:var(--tinta-2);border-top:1px solid var(--linea-2);padding-top:.6rem}
.res-fijo a{font-family:var(--f-mq);font-size:1.5rem;display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere;word-break:break-all}
.acciones{display:flex;flex-wrap:wrap;gap:10px}
.acciones .b-sec{flex:1 1 auto;min-height:44px;padding:6px .6rem;font-size:1.5rem;gap:.4rem;white-space:nowrap}
.acciones .b-larga{white-space:normal;flex-basis:100%}
.b-sec:disabled{opacity:.6;cursor:not-allowed}
.b-dia{min-height:44px;padding:6px 1.2rem;font-size:1.6rem}
.tt-fu{list-style:none;margin:.2rem 0;padding:0}
.tt-fu li{display:flex;align-items:center;justify-content:space-between;gap:.8rem;min-height:44px;border-bottom:1px solid var(--linea-2)}
.dato{background:var(--tonal-2);border-radius:16px;padding:1.4rem 1.6rem;border:1px solid var(--linea-2)}
.dato p{margin:0}
.combi{margin:0;border-top:1px solid var(--linea)}
.combi>div{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;min-height:4.8rem;border-bottom:1px solid var(--linea-2)}
.combi dt{font-weight:600}
.combi dd{margin:0;font:700 2.2rem/1 var(--f-texto);letter-spacing:.1em;font-variant-numeric:tabular-nums;color:var(--caribe)}
.prox-cuando{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.prox-cuando b{font:700 1.9rem/1.25 var(--f-titulo)}
.prox-cuando .sello{align-self:flex-start}
.semana{list-style:none;margin:0;padding:0;border:1px solid var(--linea);border-radius:12px;background:var(--hoja);overflow:hidden}
.semana li{display:flex;justify-content:space-between;gap:12px;padding:1rem 1.2rem;font-variant-numeric:tabular-nums}
.semana li+li{border-top:1px solid var(--linea-2)}
.semana li.hoy{background:var(--tonal-2);font-weight:700}
.semana span{color:var(--tinta-2);text-align:right}
.semana.sem-v li{flex-direction:column;gap:.3rem}
.semana.sem-v li>span{display:flex;flex-direction:column;gap:.1rem;text-align:left;color:var(--tinta)}
.sl-l{display:flex;justify-content:space-between;flex-wrap:wrap;gap:0 1rem}
.sl-l small{color:var(--tinta-2);font-size:1.5rem;white-space:nowrap}
.semana.sem7{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:6px;border:0;background:none;overflow:visible}
.semana.sem7 li{flex-direction:column;justify-content:center;gap:0;padding:.5rem .9rem;border:1px solid var(--linea-2);border-radius:10px;background:var(--hoja)}
.semana.sem7 li.hoy{background:var(--tonal-2)}
.semana.sem7 span{text-align:left}
.lista-mini{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.lista-mini li{border-bottom:1px solid var(--linea-2)}
.lista-mini a{display:flex;align-items:center;gap:1rem;min-height:5.6rem;padding:.4rem 0;color:var(--tinta)!important;text-decoration:none}
.lista-mini a>span:not(.mono):not(.lm-n){display:flex;flex-direction:column;min-width:0;flex:1}
.lista-mini small{font-size:1.5rem;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.tr{white-space:nowrap}
.lista-mini .lm-n{font:700 1.9rem/1 var(--f-texto);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.tabla-env{border:1px solid var(--linea);border-radius:12px;background:var(--hoja);overflow-x:auto}
.tabla{border-collapse:collapse;width:100%;font-size:1.6rem;font-variant-numeric:tabular-nums}
.tabla th,.tabla td{padding:.6rem 1rem;text-align:left;border-bottom:1px solid var(--linea-2);vertical-align:middle}
.tabla th{padding-block:.8rem}
.tabla th{font:700 1.5rem/1.2 var(--f-texto);letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-2);background:var(--hoja-2)}
.tabla tbody tr:nth-child(even){background:var(--hoja-2)}
.tabla .n{font-weight:700;font-size:1.9rem;letter-spacing:.08em;white-space:nowrap}
.tabla small{display:block;font-size:1.5rem;color:var(--tinta-2);font-weight:400;letter-spacing:0}
.tabla a{display:inline-flex;align-items:center;min-height:44px;margin-block:-.6rem}
.tabla td:first-child{white-space:nowrap}
.tabla .tag-ej{white-space:normal;max-width:8.5em;text-align:center}
.mod .fila-b>*{flex-basis:22rem}
.lista-mini .lm-n.pre{color:var(--pre);text-decoration:underline dashed var(--pre-borde) 2px;text-underline-offset:5px}
.res .sello,.mcard .sello{white-space:normal}
.tabla tr.ej td{color:var(--tinta-2)}
.tabla tr.ej .n{font-style:italic;font-weight:600}
.ok-mini{display:inline-flex;gap:5px;align-items:center;color:var(--ok);font-weight:600;font-size:1.5rem;white-space:nowrap}
.ok-mini svg{width:1.5rem;height:1.5rem}
.descargo{display:inline-block;margin:0 0 12px;font-weight:700;font-size:1.5rem;border:2px solid var(--tinta-2);border-radius:8px;padding:6px 10px}
.barras{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.barras li{display:grid;grid-template-columns:10.4rem minmax(0,1fr) 3rem;gap:10px;align-items:center;font-variant-numeric:tabular-nums}
.b-et{font-size:1.5rem;color:var(--tinta-2)}
.b-et b{color:var(--tinta);font-size:1.7rem}
.b-pista{height:20px;background:var(--hoja-2);border-radius:3px;overflow:hidden}
.b-barra{display:block;height:100%;background:var(--caribe)}
.b-val{font-weight:700;text-align:right}
.candado{border:2px dashed var(--caribe-borde);border-radius:16px;padding:1.6rem;background:var(--hoja)}
.candado h2{display:flex;gap:8px;align-items:center}
.candado h2 svg{width:2.2rem;height:2.2rem;flex:none;color:var(--caribe)}
.candado ul{margin:0 0 14px;padding-left:20px}
.chip-ok{align-self:flex-start;display:inline-flex;gap:6px;align-items:center;background:var(--ok-suave);color:var(--ok);font-weight:700;font-size:1.5rem;border-radius:8px;padding:6px 10px;margin:0 0 10px}
.chip-ok svg{width:1.6rem;height:1.6rem}
.faq{border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea-2)}
.faq summary{min-height:52px;padding:12px 28px 12px 0;font-weight:700;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:10px;font-size:2.2rem;line-height:1;color:var(--caribe)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 14px;color:var(--tinta-2)}
.legal-f{font-size:1.5rem;color:var(--tinta-2);margin:12px 0 0}
.secos-filtro{display:flex;gap:8px;align-items:center;margin:0 0 8px}
.secos-filtro .campo{min-height:44px;font-size:1.7rem;letter-spacing:.1em}
.muro{background:var(--hoja);border:2px solid var(--caribe-borde);border-radius:20px;padding:1.8rem;max-width:64rem}
.muro h2{font:700 2.3rem/1.2 var(--f-titulo);margin:0 0 8px}
.muro ul{margin:0 0 14px;padding-left:20px}
.muro li{margin-bottom:5px}
.muro-gratis{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--linea-2);font-size:1.5rem;color:var(--tinta-2)}
.meses{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin:0 0 10px}
.meses button{flex:none;min-height:44px;padding:6px 12px;border-radius:22px;border:1px solid var(--linea);background:var(--hoja);font:600 1.5rem var(--f-texto)}
.meses button[aria-pressed="true"]{background:var(--caribe);border-color:var(--caribe);color:var(--sobre-caribe)}
.dir-g{border-top:3px solid var(--regla);padding-top:.6rem}
.dir-g h2{font:700 2.2rem/1.2 var(--f-titulo);margin:0 0 .4rem}
.dir-dia{font:700 1.5rem/1.3 var(--f-texto);color:var(--tinta-2);margin:1.4rem 0 0;text-transform:uppercase;letter-spacing:.08em}
.guia ol{padding-left:22px}
.guia li{margin-bottom:8px}
.aviso-legal{border:2px dashed var(--pre-borde);background:var(--pre-suave);color:var(--pre);border-radius:12px;padding:1rem 1.2rem;font-weight:600;font-size:1.5rem}
.leyenda{display:flex;flex-direction:column;gap:8px;align-items:flex-start}

/* Modo Tabla (alto contraste, filas alternas, cabecera fija) */
.t-cab{display:flex;align-items:center;gap:8px;border-block:3px solid var(--regla);padding-block:.6rem}
.t-cab div{flex:1;text-align:center;min-width:0}
.t-cab b{display:block;font:700 1.8rem/1.2 var(--f-texto);letter-spacing:.08em;text-transform:uppercase}
.t-cab small{font-size:1.5rem;color:var(--tinta-2)}
.t-cab .b-ico{border-radius:10px;border-width:2px}
.t-cab .b-ico:disabled{opacity:.35}
.t-bot{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.t-bot .b-prim{grid-column:1 / -1}
.t-bot .b-sec{min-height:48px;font-size:1.6rem;padding:6px 10px}
.t-op{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.sw{display:inline-flex;align-items:center;gap:1rem;min-height:44px;cursor:pointer;font-weight:600}
.sw input{appearance:none;-webkit-appearance:none;width:52px;height:30px;border-radius:15px;background:var(--linea);position:relative;margin:0;flex:none;cursor:pointer}
.sw input::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:var(--hoja);transition:transform .15s}
.sw input:checked{background:var(--caribe)}
.sw input:checked::after{transform:translateX(22px)}
.sw span{font-weight:400;color:var(--tinta-2)}
.tt{border:2px solid var(--regla);border-radius:4px;background:var(--hoja)}
.t-tit{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:.4rem 0 .2rem}
.t-tit .h2{margin:0}
.t-ult{min-height:44px;padding:6px 12px;font-size:1.5rem}
.tt-h{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:7.4rem minmax(0,1fr) auto;gap:.8rem;padding:.8rem 1rem;background:var(--regla);color:var(--papel);font:700 1.5rem/1.2 var(--f-texto);letter-spacing:.04em;text-transform:uppercase}
.tt-h .c-q,.tt-h .c-e{display:none}
.tt-h .c-n{text-align:right}
.tt-h{text-transform:none;letter-spacing:0;font-size:1.5rem}
.tt-f{border-top:1px solid var(--linea)}
.tt-f:nth-child(even) .tt-b{background:var(--hoja-2)}
.tt-b{display:grid;grid-template-columns:7.4rem minmax(0,1fr) auto;grid-template-areas:"h j n" ". e e";gap:.1rem .8rem;width:100%;min-height:5.6rem;padding:.6rem 1rem;border:0;background:var(--hoja);text-align:left;align-items:center;color:var(--tinta)}
.tt-b>.c-h{grid-area:h;font:700 1.5rem/1.1 var(--f-texto);font-variant-numeric:tabular-nums}
.tt-b>.c-h small{display:block;font-weight:400;font-size:1.4rem;color:var(--tinta-2);white-space:nowrap}
.tt-b>.c-j{grid-area:j;font-weight:700;font-size:1.6rem;line-height:1.2;min-width:0;overflow-wrap:anywhere}
.tt-b>.c-n{grid-area:n;display:flex;align-items:center;gap:.6rem;justify-content:flex-end}
.tt-b .tn{font:700 2.4rem/1 var(--f-texto);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.tt-b .tn.pre{color:var(--pre);text-decoration:underline dashed var(--pre-borde) 2px;text-underline-offset:5px}
.tt-b .tq{min-width:3rem;height:3rem;padding:0 .4rem;display:grid;place-items:center;border:2px solid var(--tinta);border-radius:6px;font:700 1.6rem/1 var(--f-texto);font-variant-numeric:tabular-nums}
.tt-b .ts{font-size:1.5rem;font-weight:700;border:1.5px solid var(--tinta);border-radius:999px;padding:.2rem .6rem}
.tt-b>.c-q{display:none}
.tt-b>.c-e{grid-area:e;font-size:1.5rem;display:flex;align-items:center;gap:.5rem;min-width:0;color:var(--tinta-2)}
.tt-b>.c-e svg{width:1.6rem;height:1.6rem;flex:none}
.tt-b>.c-e.ok{color:var(--ok)}
.tt-b>.c-e.pre{color:var(--pre)}
.tt-b>.c-e .cerca{color:var(--guayaba);font-weight:700}
.tt-d{padding:.4rem 1rem 1.2rem 7.4rem;background:var(--tonal-2);font-size:1.5rem}
.tt-d p{margin:.4rem 0}
.tt-vacio{padding:1.4rem;color:var(--tinta-2)}
/* Filas de Baloto y más en la Tabla: los números van debajo del nombre (no caben al lado en el teléfono) */
.tt-b.tt-nac{grid-template-areas:"h j j" ". n n" ". e e"}
.tt-b.tt-nac>.c-n{justify-content:flex-start;flex-wrap:wrap}
.tt-b .tn-nac{font:700 2rem/1.15 var(--f-texto);letter-spacing:.04em;white-space:normal;font-variant-numeric:tabular-nums}
.tt-b .tq.tq-sb{border-radius:50%;border-style:double;border-width:4px;border-color:var(--nac);color:var(--nac-tinta);min-width:3.4rem;height:3.4rem}
.tt-b .c-j small{display:block;font-weight:400;font-size:1.4rem;color:var(--tinta-2)}
.c-e.uni{color:var(--uni)}

/* ===== Baloto y más =====
   Balotas redondas de 2 cifras (en el teléfono, 44 px: caben 5 + la superbalota en 300 px). La superbalota va en otro estilo
   (anillo doble y fondo tonal, con su rótulo); ColorLOTO lleva el color de cada balota y su nombre abreviado debajo.
   Nada de los colores corporativos del juego. */
.bn-fila{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.8rem;min-width:0}
.bn.sb.no{background:transparent;color:var(--tinta-2);border-color:var(--linea)}
.premios th,.premios td{padding-inline:.6rem}
.bn-g{display:inline-flex;flex-direction:column;gap:.3rem;min-width:0}
/* El rótulo «superbalota» no ensancha su grupo: va en dos líneas («super / balota») del ancho de la balota */
.bn-g.c{--b:calc(28px + 1.6rem);align-items:center}
.bn-g.c .et{max-width:var(--b);text-align:center;font-size:1.4rem;line-height:1.1}
.bns{display:inline-flex;flex-wrap:wrap;gap:6px;min-width:0}
.bn{--b:calc(28px + 1.6rem);width:var(--b);height:var(--b);border-radius:50%;display:grid;place-items:center;flex:none;background:var(--nac);color:var(--sobre-nac);border:2px solid var(--nac);font:700 calc(8px + 1.4rem)/1 var(--f-texto);font-variant-numeric:tabular-nums}
.bn.sb{background:var(--nac-suave);color:var(--nac-tinta);border:5px double var(--nac)}
.bns.uni .bn,.bn.cl.uni{box-shadow:inset 0 0 0 2.5px var(--hoja)}
.bns.vacias .bn{border:1.5px solid var(--cas-vacia-borde);background:var(--cas-vacia)}
.tj-esp .bns.vacias .bn{--b:calc(22px + 1.4rem)}
.bns.pre .bn{border-style:dashed;border-color:var(--pre-borde);background:var(--pre-suave);color:var(--pre)}
.bns .bn.no{background:transparent;color:var(--tinta-2);border-color:var(--linea)}
.bn-cl{display:inline-flex;flex-direction:column;align-items:center;gap:.2rem}
.bn-cl small{font:600 1.4rem/1.1 var(--f-texto);color:var(--tinta-2)}
.bn.cl{border-color:var(--tinta)}
.cl-amarillo{background:var(--cl-amarillo);color:var(--cl-amarillo-t)}.cl-azul{background:var(--cl-azul);color:var(--cl-azul-t)}
.cl-rojo{background:var(--cl-rojo);color:var(--cl-rojo-t)}.cl-verde{background:var(--cl-verde);color:var(--cl-verde-t)}
.cl-blanco{background:var(--cl-blanco);color:var(--cl-blanco-t)}.cl-negro{background:var(--cl-negro);color:var(--cl-negro-t)}
.cl-t{display:inline-flex;align-items:center;gap:.3rem;font:700 1.8rem/1.2 var(--f-texto);margin-right:.6rem;white-space:nowrap}
.cl-t i{width:1.4rem;height:1.4rem;border-radius:50%;border:1.5px solid var(--tinta);flex:none}
.cl-t small{font-size:1.4rem;font-weight:600;color:var(--tinta-2)}
.tj-ancha{grid-column:1 / -1}
.tj-sor{font-weight:400;font-size:1.5rem;color:var(--tinta-2);white-space:nowrap}
.tj-nac{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.tj-nac .bn-fila{gap:.6rem .8rem}
.rev{border-top:1px dashed var(--linea);padding-top:.8rem;margin-top:.2rem;display:flex;flex-direction:column;gap:.6rem}
.rev h2{font:700 1.8rem/1.2 var(--f-texto);margin:0}
.no-afil{margin:0;font-size:1.5rem;color:var(--tinta-2);border-top:1px solid var(--linea-2);padding-top:.6rem}
.acum{display:flex;flex-direction:column;gap:.2rem;margin:0}
.acum b{font:700 2.4rem/1.15 var(--f-titulo);color:var(--tinta);font-variant-numeric:tabular-nums}
.acum span{font-size:1.5rem;color:var(--tinta-2)}
.premios td.n{font-size:1.7rem;letter-spacing:.02em}
.premios td:first-child{font-weight:700}
.premios tfoot td{font-weight:700;border-bottom:0}
/* Tarjeta destacada de Baloto en la portada: después de los resultados del día, en tonal (no compite con ellos) */
.nac-dest{background:var(--nac-suave);border:1px solid var(--linea);border-top:5px solid var(--nac);border-radius:18px;padding:1.4rem 1.3rem;display:flex;flex-direction:column;gap:.9rem;min-width:0}
.nac-dest h2{font:700 2.1rem/1.2 var(--f-titulo);margin:0}
.nac-dest p{margin:0}
.nac-dest .acum{border-top:1px dashed var(--linea);padding-top:.8rem}
.nac-dest .fila-b>*{flex:1 1 15rem}
.nac-rev{font-size:1.6rem;font-variant-numeric:tabular-nums}
.nac-rev b{letter-spacing:.06em}
/* ¿Cayó? de Baloto: 5 casillas de 2 cifras + la superbalota */
.cn-form fieldset{border:0;margin:0 0 1rem;padding:0;min-width:0}
.cn-form legend{font:700 1.6rem/1.3 var(--f-texto);padding:0;margin:0 0 .6rem}
.cn-cas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-width:34rem}
.cn-cas .campo,.cn-sb .campo{min-height:52px;padding:6px 4px;text-align:center;font-size:2.2rem;letter-spacing:.04em}
.cn-pie{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.cn-sb{display:flex;flex-direction:column;gap:4px;font-size:1.5rem;font-weight:600;width:14rem;max-width:100%}
.cn-pie .b-prim{flex:1 1 14rem;min-height:52px}
.cn-tabla td{vertical-align:middle}
.cn-cat{font-weight:700;white-space:nowrap}
/* Frecuencia simple de cada balota (43): cuadrícula compacta */
.frec-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(7.4rem,1fr));gap:6px}
.frec-g li{border:1px solid var(--linea-2);border-radius:8px;background:var(--hoja);padding:.4rem .6rem;display:flex;flex-direction:column;gap:.2rem;font-variant-numeric:tabular-nums}
.frec-g b{font:700 1.8rem/1.1 var(--f-texto)}
.frec-g span{font-size:1.5rem;color:var(--tinta-2)}
.frec-g i{display:block;height:6px;background:var(--hoja-2);border-radius:3px;overflow:hidden}
.frec-g i>i{height:100%;background:var(--caribe);border-radius:0}
.vacio .b-sec{margin-top:1rem}

/* ===== Publicidad simulada ===== */
.ad{background:var(--ad-fondo);border:1px solid var(--ad-borde);border-radius:0;padding:6px 8px 10px;position:relative;min-height:316px;font:400 13px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ad-rotulo{margin:0 0 6px;font:500 12px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ad-texto);letter-spacing:.02em}
.ad-hueco{display:grid;place-items:center;min-height:280px}
.ad-creativo{width:300px;max-width:100%;height:250px;background:var(--ad-forma-2);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:12px}
.ad-creativo i{position:absolute;display:block;background:var(--ad-forma)}
.ad-f1{left:22px;top:26px;width:86px;height:86px;border-radius:50%}
.ad-f2{left:126px;top:40px;width:148px;height:14px}
.ad-f3{left:126px;top:66px;width:104px;height:14px}
.ad-f4{left:22px;right:22px;top:138px;height:40px}
.ad-nat{width:100%;max-width:520px;min-height:250px;background:var(--ad-forma-2);display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:14px;align-content:start}
.ad-nat i{display:block;background:var(--ad-forma)}
.ad-nat .n1{grid-row:span 3;height:96px}
.ad-nat .n2{height:14px;width:90%}
.ad-nat .n3{height:12px;width:70%}
.ad-nat .n4{height:12px;width:55%}
.ad-nat .n5{grid-column:1 / -1;height:84px}
.ad-txt{position:relative;color:var(--ad-texto);font-size:13px}
.ad-nat .ad-txt{grid-column:1 / -1}
.ad-multi{min-height:466px}
.ad.ad-alto{min-height:636px}
.ad-alto .ad-hueco{min-height:600px}
.ad-creativo.ad-vert{height:600px;width:300px}
.ad-vert .ad-f4{top:auto;bottom:90px;height:60px}
.ad.ad-comp{min-height:136px}
.ad-comp .ad-hueco{min-height:100px}
.ad-comp .ad-creativo{width:320px;height:100px}
.ad-comp .ad-f1{width:56px;height:56px;top:22px}
.ad-comp .ad-f2{left:92px;top:30px}
.ad-comp .ad-f3{left:92px;top:54px}
.ad-comp .ad-f4{display:none}
.ad-multi .ad-hueco{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;place-items:stretch;align-content:start;min-height:430px}
.ad-tesela{display:flex;flex-direction:column;gap:6px;padding:6px;background:var(--ad-forma-2);min-height:128px}
.ad-tesela i{display:block;height:70px;background:var(--ad-forma)}
.ad-tesela b{display:block;height:9px;width:85%;background:var(--ad-forma)}
.ad-tesela b+b{width:55%}
.ad-multi .ad-txt{grid-column:1 / -1}
.final{padding-block:28px 8px}
.ancla{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(51px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(54px,calc(env(safe-area-inset-right,0px) + 54px));background:var(--ad-fondo);border-top:1px solid var(--ad-borde);display:flex;align-items:center;justify-content:center;gap:8px}
.ancla.off{visibility:hidden;transform:translateY(110%)}
.ancla .ad-rotulo{margin:0;flex:none;line-height:1.2}
.ancla-creativo{width:320px;min-width:0;flex:0 1 320px;height:50px;background:var(--ad-forma-2);display:flex;align-items:center;gap:10px;padding:0 10px;overflow:hidden}
.ancla-creativo i{width:30px;height:30px;border-radius:50%;background:var(--ad-forma);flex:none}
.ancla-creativo span{font:500 12px/1.2 system-ui,sans-serif;color:var(--ad-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ancla-cerrar{position:absolute;right:max(4px,env(safe-area-inset-right,0px));top:3px;width:44px;height:44px;border:1px solid var(--ad-borde);background:var(--ad-fondo);color:var(--ad-texto);border-radius:22px;font-size:20px;line-height:1}

/* Zonas de anuncios (herramienta de la maqueta) */
.mq.zonas-on [data-ad]{outline:3px dashed var(--mq-zona);outline-offset:-3px}
.zona-tag{position:absolute;right:4px;top:4px;z-index:5;max-width:calc(100% - 8px);background:var(--mq-zona);color:var(--mq-zona-texto);font:600 12px/1.35 var(--f-mq);padding:4px 7px;border-radius:3px;pointer-events:none;text-align:left}
.ancla .zona-tag{top:-50px}
.zona-linea{position:absolute;left:0;right:0;top:700px;border-top:3px dashed var(--mq-zona);z-index:6;pointer-events:none}
.zona-linea span{position:absolute;left:8px;top:3px;background:var(--mq-zona);color:var(--mq-zona-texto);font:600 12px/1.3 var(--f-mq);padding:3px 7px;border-radius:3px}

/* ===== Capas: hojas, aviso, píldora, consentimiento, recompensado ===== */
.aviso{position:fixed;left:12px;right:12px;bottom:calc(50px + 28px + env(safe-area-inset-bottom,0px));z-index:45;margin-inline:auto;max-width:440px;background:var(--tinta);color:var(--papel);padding:12px 14px;border-radius:10px;font:1.5rem/1.4 var(--f-texto)}
.pildora{position:fixed;left:12px;right:12px;margin-inline:auto;width:fit-content;top:calc(10px + env(safe-area-inset-top,0px));z-index:35;max-width:440px;min-height:44px;padding:8px 16px;border-radius:22px;border:0;background:var(--ok);color:var(--hoja);font:700 1.5rem/1.25 var(--f-texto);box-shadow:0 2px 8px var(--sombra)}
.capa{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:flex-end}
.capa-velo{position:absolute;inset:0;background:var(--velo);border:0;padding:0;cursor:default}
.hoja{position:relative;background:var(--hoja);color:var(--tinta);border-radius:18px 18px 0 0;max-height:90%;overflow-y:auto;padding:1.2rem max(16px,env(safe-area-inset-right,0px)) calc(1.6rem + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));font:1.6rem/1.45 var(--f-texto);box-shadow:0 -2px 10px var(--sombra);width:100%;max-width:640px;margin-inline:auto}
.hoja-cab{display:flex;align-items:center;gap:8px;margin:-1.2rem 0 .8rem;padding-top:1.2rem;padding-bottom:.4rem;position:sticky;top:-1.2rem;z-index:2;background:var(--hoja)}
.hoja .resp-h{scroll-margin-top:7rem}
.hoja-cab h2{font:700 2rem/1.2 var(--f-titulo);margin:0;flex:1}
.hoja .fila-b{margin-top:1rem}
.hoja .nota-peq{font-size:1.5rem}
.img-prev{border:1px solid var(--linea);border-radius:10px;background:var(--hoja-2);padding:8px;display:grid;place-items:center;min-height:200px}
.img-prev img{display:block;width:100%;max-width:300px;height:auto;border:1px solid var(--linea)}
.img-prev.dia img{max-width:100%;max-height:420px;object-fit:contain;object-position:top}
.txt-wa{font:1.5rem/1.4 var(--f-texto);background:var(--hoja-2);border-radius:10px;padding:1rem 1.2rem;overflow-wrap:anywhere;margin:1rem 0 0}
.canal{display:flex;align-items:center;gap:1rem;border:1.5px solid var(--linea);border-radius:12px;padding:1rem 1.2rem;margin-top:.8rem;min-height:56px}
.canal input{width:22px;height:22px;flex:none;accent-color:var(--caribe)}
.canal span{flex:1;min-width:0}
.canal small{display:block;color:var(--tinta-2);font-size:1.5rem}
.canal.no{opacity:.65}
.autoriza{display:flex;gap:1rem;align-items:flex-start;margin-top:1.2rem;font-size:1.5rem}
.autoriza input{width:22px;height:22px;flex:none;margin-top:.2rem;accent-color:var(--caribe)}
.mis-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.mis-l li{display:flex;align-items:center;gap:1rem;border-bottom:1px solid var(--linea-2);min-height:52px}
.mis-l li>span{flex:1;min-width:0;font-weight:600}
.estrella{width:44px;height:44px;border:0;background:none;color:var(--tinta-3);display:grid;place-items:center}
.estrella[aria-pressed="true"]{color:var(--mango)}
.estrella svg{width:22px;height:22px}
.nums{display:flex;flex-wrap:wrap;gap:8px;margin:.8rem 0}
.nums button{min-height:44px;padding:0 1.2rem;border-radius:22px;border:1.5px solid var(--linea);background:var(--hoja-2);font:700 1.7rem var(--f-texto);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.hoja-a4{border:1px solid var(--linea);background:var(--hoja-2);padding:8px;overflow:hidden}
.a4-esc{transform-origin:top left}
/* Parte 29j · la hoja A4 (.a4) toma sus estilos de cssA4(), los mismos en la vista previa y en la impresión */
/* Descargar el día: tres opciones en tarjetas */
.desc-ops{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.desc-op{width:100%;display:flex;align-items:flex-start;gap:14px;text-align:left;padding:14px 16px;border:1.5px solid var(--linea);border-radius:14px;background:var(--hoja);color:var(--tinta);font:inherit;cursor:pointer}
.desc-op:hover{border-color:var(--caribe);background:var(--hoja-2)}
.desc-ic{flex:none;width:4.4rem;height:4.4rem;border-radius:12px;display:grid;place-items:center;background:var(--caribe-suave);color:var(--caribe)}
.desc-ic svg{width:2.2rem;height:2.2rem}
.desc-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.desc-t b{font:700 1.7rem/1.25 var(--f-texto)}
.desc-t em{font:700 1.15rem/1 var(--f-texto);letter-spacing:.06em;padding:2px 6px;border-radius:6px;border:1px solid var(--linea);background:var(--hoja-2);color:var(--tinta-2);vertical-align:2px;margin-left:6px}
.desc-t small{font-size:1.4rem;line-height:1.35;color:var(--tinta-2)}
/* Vista previa de la imagen del día: a un ancho legible y con desplazamiento (antes se encogía entera y no se leía) */
.img-prev.dia{max-height:min(46vh, 520px);overflow:auto;place-items:start center}
.img-prev.dia img{max-width:440px;max-height:none}
/* Aviso de cookies v3: una franja baja (≈ 100 px a 360 px con letra al 100 %, ≈ 118 px al 130 %) que no tapa el número ni
   su sello. «Rechazar» y «Aceptar» en una sola fila, del mismo tamaño; «Configurar» va como enlace al final del texto
   (su zona táctil de 44 px se extiende con relleno y margen negativo, sin agrandar la franja). */
.cmp{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--hoja);border-top:2px solid var(--regla);padding:.6rem max(16px,env(safe-area-inset-right,0px)) calc(.7rem + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));box-shadow:0 -2px 10px var(--sombra);max-height:45%;overflow:hidden;display:flex;flex-direction:column}
.cmp p{margin:0 0 .5rem;font-size:1.4rem;line-height:1.3;max-width:68ch;min-height:0;flex:0 1 auto;overflow-y:auto}
.cmp div{display:flex;flex-wrap:wrap;gap:8px;max-width:520px;flex:none}
.cmp .c-par{flex:1 1 8rem}
.cmp button{min-height:44px;border-radius:10px;font:700 1.6rem var(--f-texto);padding:0 1rem}
.cmp .c-par{border:2px solid var(--tinta);background:var(--hoja);color:var(--tinta)}
.cmp .c-conf{min-height:0;border:0;background:none;color:var(--caribe);text-decoration:underline;text-underline-offset:3px;font:700 1.4rem/1.3 var(--f-texto);padding:12px 4px;margin:-12px -4px;border-radius:4px}
/* El aviso vive fuera del contenedor del portal: en el teléfono (o en el marco de teléfono de la maqueta) va el texto corto */
@media (max-width: 599px){ .cmp-larga{display:none} }
.mq.pant-tel .cmp-larga{display:none}
.rec{position:fixed;inset:0;z-index:80;background:var(--rec-fondo);color:var(--rec-texto);display:flex;flex-direction:column;font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.rec-cab{display:flex;align-items:center;gap:10px;padding-block:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
.rec-titulo{margin:0;flex:1;font:700 13px/1.3 var(--f-mq);letter-spacing:.05em;text-transform:uppercase;color:var(--rec-texto-2)}
.rec-cerrar{width:44px;height:44px;border-radius:22px;border:1px solid var(--rec-forma);background:var(--rec-forma-2);color:var(--rec-texto);font-size:22px;line-height:1}
.rec-creativo{flex:1 1 auto;min-height:160px;margin-inline:16px;background:var(--rec-forma-2);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:14px}
.rec-creativo i{position:absolute;display:block;background:var(--rec-forma)}
.rec-creativo .r1{left:12%;top:16%;width:34%;aspect-ratio:1;border-radius:50%}
.rec-creativo .r2{left:52%;top:22%;width:38%;height:16px}
.rec-creativo .r3{left:52%;top:34%;width:26%;height:16px}
.rec-creativo .r4{left:12%;right:12%;bottom:22%;height:46px;border-radius:6px}
.rec-creativo span{position:relative;font:500 13px/1.3 system-ui,sans-serif;color:var(--rec-texto-2)}
.rec-pie{padding-block:14px 18px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.rec-pie p{margin:0 0 8px}
.rec-barra{height:8px;background:var(--rec-forma);border-radius:4px;overflow:hidden;margin:6px 0 8px}
.rec-barra span{display:block;height:100%;width:0;background:var(--rec-barra)}
.rec-confirmar{border:1px solid var(--rec-forma);border-radius:10px;padding:12px;margin-top:8px}
.rec-confirmar div{display:flex;flex-wrap:wrap;gap:8px}
.rec-b{min-height:48px;padding:8px 16px;border-radius:8px;border:1px solid var(--rec-forma);background:var(--rec-forma-2);color:var(--rec-texto);font:700 16px system-ui,sans-serif}
.rec-b.prim{background:var(--rec-texto);color:var(--rec-fondo);border-color:var(--rec-texto)}

/* Pie */
.pie{background:var(--hoja-2);border-top:1px solid var(--linea);font-size:1.5rem;color:var(--tinta-2)}
.pie .wrap{padding-block:20px 12px}
.pie p{margin:0 0 10px;max-width:72ch}
.pie .legal{font-weight:700;color:var(--tinta)}
.pie-enl{display:flex;flex-wrap:wrap;gap:0 18px}
.pie-enl .b-enl{font-size:1.5rem}

/* Medición fuera de pantalla */
.mq-medida{position:absolute;left:-30000px;top:0;width:375px;visibility:hidden;container-type:inline-size;container-name:pantalla}
.mq-medida.esc{width:1280px}

/* ===== v4 · Franja de la jornada (banda de marca bajo la cabecera, en todas las páginas) ===== */
.franja{background:var(--franja);color:var(--sobre-franja)}
.franja-in{display:flex;align-items:center;justify-content:space-between;gap:.4rem 1.6rem;flex-wrap:wrap;min-height:4.6rem;padding-block:.5rem;font:500 1.5rem/1.3 var(--f-texto);font-variant-numeric:tabular-nums}
.franja p{margin:0;display:flex;align-items:center;gap:.8rem;min-width:0}
.franja b{font-weight:700}
.fr-et{color:var(--franja-2)}
.fr-chip{display:inline-flex;align-items:center;min-height:2.6rem;padding:.1rem .9rem;border-radius:999px;background:var(--franja-chip);color:var(--sobre-franja-chip);font-weight:700;white-space:nowrap}
.franja .pronto{color:inherit!important}
.franja .anillo{width:2.4rem;height:2.4rem}
.franja .an-b{stroke:var(--franja-anillo)}
.franja .an-p,.franja .anillo.cerca .an-p{stroke:var(--franja-chip)}
/* Punto «en vivo»: un halo que late suave (transform + opacity); se apaga con «reducir movimiento» */
.vivo{position:relative;display:inline-block;width:1rem;height:1rem;border-radius:50%;background:var(--franja-chip);flex:none}
.vivo::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--franja-chip);animation:latido 2.4s ease-out infinite}
@keyframes latido{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.6);opacity:0}}
/* El próximo sorteo ya está en la franja: la línea del título no lo repite */
.hero-l[data-proximo]{display:none}
@container pantalla (max-width: 599px){
  /* Teléfono: una sola línea compacta con el punto en vivo y el próximo sorteo (la fecha ya está en el título) */
  .franja-in{min-height:0;padding-block:.45rem;justify-content:flex-start;flex-wrap:nowrap;gap:.8rem}
  .fr-jor .fr-et,.fr-jor b,.fr-larga,.franja .anillo{display:none}
  .franja .fr-prox{flex-wrap:wrap;gap:.2rem .7rem}
  .fr-chip{min-height:2.2rem;padding:0 .7rem}
  /* La franja crece con la letra hasta 17 px (como el título, que llega a 26 px) para seguir en una línea */
  .franja-in{font-size:clamp(14px,1.5rem,17px)}
}
/* Letra al 130 % o más en el teléfono: el rótulo «Próximo:» queda solo para lectores de pantalla */
@container pantalla (max-width: 30rem){ .fr-prox .fr-et{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} }
/* Fichas en el teléfono: balotas un poco menores para que la quinta o el signo quepan en la misma fila que el número */
@container pantalla (max-width: 599px){
  .res .bola,.res .quinta{--b:calc(28px + 1.6rem);font-size:calc(12px + 1.6rem)}
  .res .res-fila{gap:.8rem .6rem}
}

/* ===== v4 · ¿Cayó? más llamativo ===== */
.cayo-caja.cy-v4{background:var(--hoja);border:1.5px solid var(--linea);border-top:5px solid var(--caribe);border-radius:16px;padding:1.4rem 1.6rem 1.1rem;display:flex;flex-direction:column;gap:.2rem}
.cy-cab{display:flex;gap:1rem;align-items:center;margin-bottom:.8rem}
.cy-ico{flex:none;width:4.4rem;height:4.4rem;border-radius:1.1rem;display:grid;place-items:center;background:var(--caribe-suave);color:var(--caribe)}
.cy-ico .ic{width:2.6rem;height:2.6rem}
.cy-v4 .cy-et{margin:0;font:700 2rem/1.2 var(--f-titulo)}
.cy-v4 .cy-et span{display:block;font:400 1.5rem/1.3 var(--f-texto);color:var(--tinta-2);margin-top:.2rem}
.cy-col{flex-direction:column}
.cy-v4 .campo.num{min-height:5.6rem;text-align:center;font-size:3rem;letter-spacing:.3em;padding-inline:1rem}
.cy-v4 .b-prim{min-height:5rem;font-size:1.8rem}
.cy-v4 .cy-lock{align-self:center;text-align:center}

/* ===== v4 · Tabla: color del tipo en una barra a la izquierda y en la cifra ===== */
.tt-f .tt-b{box-shadow:inset 5px 0 0 var(--t-fill)}
.tt-b .tn{color:var(--t-tinta)}
.tt-b .tn.pre{color:var(--pre)}
.tt-b .tq{border-color:var(--t-fill)}
.chip.tipo-nac .sw-t{border-radius:0;box-shadow:none;clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%)}

/* ===== v4 · Fila de garantías (textos verdaderos) y pie oscuro de marca ===== */
.garantias{background:var(--gar-fondo);border-top:1px solid var(--linea);margin-top:2.4rem}
.gar-l{list-style:none;margin:0 auto;padding-block:2rem;display:grid;gap:1.6rem;grid-template-columns:minmax(0,1fr)}
@container pantalla (min-width: 768px){ .gar-l{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem} }
.gar{display:flex;gap:1.2rem;align-items:flex-start;min-width:0}
.gar-ico{flex:none;width:4.4rem;height:4.4rem;border-radius:1.1rem;display:grid;place-items:center;background:var(--gar-icono);color:var(--sobre-gar-icono)}
.gar-ico .ic{width:2.4rem;height:2.4rem}
.gar-18{font:800 1.5rem/1 var(--f-texto)}
.gar p{margin:0;font-size:1.6rem;line-height:1.4;color:var(--tinta-2)}
.gar b{display:block;font:700 1.7rem/1.3 var(--f-texto);color:var(--tinta);margin-bottom:.2rem}
.p{padding-bottom:0}
.pie{background:var(--pie-fondo);border-top:0;color:var(--pie-texto-2);padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
.pie .wrap{padding-block:2.4rem 1.2rem}
.pie .legal{color:var(--pie-texto)}
.pie .b-enl{color:var(--pie-enlace)}
.pie :focus-visible{outline-color:var(--pie-enlace)}
.marca-pie{display:inline-flex;margin:0 0 1.4rem;color:var(--pie-texto)!important}
.marca-pie .marca-t small{color:var(--pie-enlace)}
.pie-enl{border-top:1px solid var(--pie-linea);padding-top:.4rem;margin-top:.4rem}
@container pantalla (min-width: 1024px){ .pie{padding-bottom:0} }

/* ===== v4 · Transición suave al cambiar de filtro, de vista o al abrir una ficha (220 ms, opacity + transform) ===== */
.main.entra>*{animation:entra .22s ease-out both}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .revelar .cas::after{display:none} }

@media print{
  .mq-bar,.mq-notas,.mq-url,.mq-velo,.ancla,.cmp,.pildora,.aviso,.capa,.rec,[data-ad],.franja,.garantias,.mq-anot,.zona-linea,.zona-tag,.cab-acc,.acciones,form,.resp{display:none!important}
  body,.p,.mq-pantalla,.pie{background:#fff!important;color:#000!important}
  .pie .legal,.pie .b-enl{color:#000!important}
  .mq-escena{display:block;padding:0}
  .mq-equipo{width:auto;height:auto;border:0;overflow:visible;display:block}
  .mq-pantalla{overflow:visible}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== Letra grande (130-200 %): la marca sigue a la vista; los botones bajan de fila; tablas apiladas ===== */
@container pantalla (max-width: 33rem){
  .h-pag .ceja{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .qx{flex-wrap:wrap}
  .ah-prox{flex-wrap:wrap}
  .ah-prox p{flex-basis:13rem}
  .fila-a{grid-template-columns:minmax(0,1fr) 16px;grid-template-areas:"hora ir" "juego juego" "nx nx" "sello sello"}
  .fila.f-pen .fila-a,.fila.f-curso .fila-a{grid-template-areas:"hora ir" "juego juego" "nx nx"}
  .sello{white-space:normal;align-items:flex-start}
  .sello svg{margin-top:.2rem}
  .tt-b{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h n" "j j" "e e"}
  .tt-b.tt-nac{grid-template-areas:"h h" "j j" "n n" "e e"}
  .tt-h{display:none}
  .tt-d{padding-left:1rem}
  .cy-form{flex-wrap:wrap}
  .cy-form .b-prim{flex:1 1 100%}
  .lr-s{padding-left:0;justify-content:flex-start}
  .cmp div{grid-template-columns:1fr}
  .cy-form-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cy-form-3 .b-prim{grid-column:1 / -1}
}

@container pantalla (max-width: 24rem){
  .cy-form-2,.cy-form-3{grid-template-columns:minmax(0,1fr)}
  .cy-form-3 .b-prim{grid-column:auto}
  .lr-a{grid-template-columns:minmax(0,1fr)}
  .mod,.elige,.llevate,.cayo-caja,.muro,.candado,.dato{padding-inline:1rem}
  .lr-a>.mono,.lista-mini a>.mono{display:none}
  .lista-mini b,.lr-t b,.tj-nom,.h-ficha{overflow-wrap:anywhere}
  .tr{white-space:normal}
  .tt-b,.tt-b.tt-nac{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "j" "n" "e"}
  .tt-b>.c-n{justify-content:flex-start;flex-wrap:wrap}
  .tt-b>.c-h small{display:inline;margin-left:.4rem;white-space:normal}
  .candado h2{display:block}
  .candado h2 svg{display:inline;vertical-align:-.25em;margin-right:.4rem}
  .fila-b>*,.od-fila>*{flex-basis:100%}
  .lr-n{grid-column:1 / -1;flex-direction:row;align-items:baseline;gap:1rem;justify-self:start;white-space:normal;flex-wrap:wrap}
  .lr-s{padding-left:0}
  .tj-x{white-space:normal;flex-wrap:wrap}
}
/* Tableta con letra grande: el campo de búsqueda está a la vista debajo, así que el ícono de buscar sobra */
@container pantalla (min-width: 600px) and (max-width: 33rem){ #btn-buscar{display:none} }

/* ===== Teléfono (< 600 px): primera pantalla compacta =====
   Meta (principio 1): en 360×640, con el aviso de cookies abierto, el número más reciente y su sello a la vista con la letra
   al 100 % y al 130 %, y el número al 150 %. Se conserva la cabecera de la 04 en una sola fila: marca (en dos líneas),
   Buscar (el campo se pliega en el ícono y se abre debajo al tocarlo), ¿Cayó? y Menú. La ceja del título queda solo para
   Google y lectores de pantalla; el aviso «Toca uno para ver su ficha» pasa a la cabecera de «Ya salieron», justo encima de
   las tarjetas, y el selector de fecha baja a justo después de la primera tarjeta (en escritorio y tableta sigue arriba). */
@container pantalla (min-width: 600px){ .tel-si{display:none!important} }
@container pantalla (max-width: 599px){
  .tel-no{display:none!important}
  .cab-in{flex-wrap:nowrap;gap:6px}
  .marca{flex:1 1 0;min-width:0;gap:7px}
  .marca-t{white-space:normal;font-size:15px;line-height:1.05;text-wrap:balance}
  .marca-t small{font-size:10px;line-height:1.25}
  .cab-acc{flex:none;gap:6px}
  .b-cayo{padding:0 .8rem}
  .cab-acc .solo-tel-cab{display:inline-flex}
  .panel{display:none}
  .cab.buscando .panel{display:flex}
  .panel #btn-menu{display:none}
  .main{padding-top:6px}
  /* Entre secciones queda el aire normal (2rem); solo el título y los filtros van más juntos (1rem) */
  .lienzo>.col>.hero,.lienzo>.col>.ctl{margin-bottom:-1rem}
  .hero{gap:.3rem}
  /* El título crece con la letra hasta 26 px: así «Hoy, jueves 15 de octubre» sigue en una línea a 360 px también al 150 % */
  .h-pag{font-size:clamp(22px,2rem,26px);line-height:1.12}
  .h-pag .ceja{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hero-l{font-size:1.5rem;line-height:1.25}
  .grupo-cab{margin-bottom:.7rem}
  .tj-dest{padding:.8rem .9rem 1rem}
  .grupo-cab .hero-tip{gap:.4rem;font-size:1.5rem;line-height:1.3;color:var(--tinta-2)}
  .grupo-cab .hero-tip svg{width:1.6rem;height:1.6rem}
  .tras-1 .fecha-f{background:var(--tonal-2);border:1px solid var(--linea-2);border-radius:14px;padding:.8rem 1rem 1rem;margin:0}
  .tras-1 .fecha-f .cy-form .campo{flex:1 1 12rem}
  /* La tarjeta destacada (lo más reciente, a lo ancho): nombre al lado del monograma, número y sello justo debajo */
  .tj-dest .tj-nom{font-size:1.8rem;line-height:1.12}
}
/* Letra al 200 % en el teléfono: si la fila no cabe, los botones bajan de fila en vez de apretar la marca */
@container pantalla (max-width: 21rem){
  .cab-in{flex-wrap:wrap}
  .marca{flex:0 1 auto}
  .ctl-fila{flex-wrap:wrap}
  .ctl-fila .chips{flex-basis:100%}
}
@container pantalla (max-width: 599px){
  /* Sin monograma (el nombre ya está escrito y así cabe en una línea hasta unos 20 letras al 130 %), Compartir a la derecha */
  @container tarjeta (min-width: 19.01rem){
    .tj-dest .tj-cab .mono{display:none}
    .tj-dest .tj-in{grid-template-areas:"eti eti comp" "tit tit comp" "num num num" "pie pie pie" "coinc coinc coinc";row-gap:.1rem}
    .tj-dest .tj-tit{margin-top:.15rem}
    .tj-dest .tj-num,.tj-dest .tj-esp{margin-top:.5rem}
    .tj-dest .tj-pie{margin-top:.6rem;padding-top:0;border-top:0}
  }
}

/* ===== Tableta: columna centrada ===== */
@container pantalla (min-width: 600px) and (max-width: 1023px){
  .main>.lienzo,.main>.vista{max-width:680px;margin-inline:auto}
}

/* ===== Escritorio (≥1.024 px): contenedor de 1.200 px, columna de 776 px + riel de 360 px ===== */
@container pantalla (min-width: 1024px){
  .p{font-size:1.8rem;padding-bottom:0}
  .cab-in{min-height:64px;gap:20px}
  .marca{margin-right:0}
  .marca svg{width:36px;height:36px}
  .marca-t{font-size:19px}
  .marca-t small{font-size:11px}
  .nav{display:flex;gap:2px;margin-right:auto;margin-left:12px}
  .nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 1.2rem;border-radius:8px;font:600 1.6rem var(--f-texto);color:var(--tinta-2);text-decoration:none}
  .nav a:hover,.nav a[aria-current="page"]{background:var(--hoja-2);color:var(--tinta)}
  .b-ico .b-txt{display:inline}
  .panel{padding-bottom:14px}
  .main{padding-block:28px 16px}
  .lienzo{display:grid;grid-template-columns:776px 360px;column-gap:64px;align-items:start;justify-content:center}
  .col,.riel{display:flex;flex-direction:column;gap:3.2rem;min-width:0}
  .col>*,.riel>*{order:0}
  /* El riel se estira hasta el alto de la columna: así el anuncio del final puede quedarse pegado mientras se recorre el listado */
  .riel{align-self:stretch}
  .riel-fijo{display:block;position:sticky;top:16px;margin-top:0}
  .solo-esc{display:block}
  .solo-tel{display:none}
  .h-pag{font-size:4.2rem}
  .hero{gap:1rem}
  .fecha-f{flex-direction:row;align-items:center;flex-wrap:wrap;gap:.6rem 1.6rem;padding:1rem 1.4rem}
  .fecha-f label{flex:1 1 20rem}
  .fecha-f .cy-form{flex:1 1 34rem}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:16px}
  .cas{width:3.6rem;height:5rem;font-size:3rem}
  .tj{padding:1.2rem 1.3rem 1.3rem}
  .dir-p{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:4rem;align-items:start}
  .dir-p>.ad{grid-column:1 / -1}
  .dia h1{font-size:2.2rem;max-width:none}
  .dia.grande h1{font-size:3.2rem}
  .ahora{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:center;min-height:24rem;padding:2rem 2.2rem}
  .ah-prox{border-top:0;border-left:1px dashed var(--linea);padding:0 0 0 2rem;flex-direction:column;align-items:flex-start}
  .ah-prox p{flex:none}
  .ah-juego{font-size:2.8rem}
  .fila-cab{display:grid;grid-template-columns:6.8rem minmax(13rem,1fr) calc(4 * (28px + 1.6rem) + 1.5rem) 8.8rem 20rem 16px;column-gap:1rem;padding:.6rem .4rem;font:700 1.5rem/1.2 var(--f-texto);letter-spacing:.03em;text-transform:uppercase;color:var(--tinta-2);border-bottom:1px solid var(--linea)}
  .fila-a,.fila.f-pen .fila-a,.fila.f-curso .fila-a{grid-template-columns:6.8rem minmax(13rem,1fr) calc(4 * (28px + 1.6rem) + 1.5rem) 8.8rem 20rem 16px;grid-template-areas:"hora juego num ext sello ir";column-gap:1rem;min-height:6.4rem;padding:.6rem .4rem;align-items:center}
  .fila.f-pen .fila-a,.fila.f-curso .fila-a{grid-template-areas:"hora juego nx nx nx ir"}
  .fila.f-pen .f-hora,.fila.f-curso .f-hora{padding-top:0}
  .f-nx{display:contents}
  .fila-a .f-hora small{display:block}
  .f-num{grid-area:num}
  .f-ext{grid-area:ext}
  .fila.f-pen .f-nx,.fila.f-curso .f-nx{display:flex}
  .f-sello .sello{white-space:normal}
  .fila .signo{font-size:1.4rem;padding:0 .8rem;min-height:3.6rem}
  .fila .qx .et{display:none}
  .t-bot{grid-template-columns:auto auto auto;justify-content:start}
  .t-bot .b-prim{grid-column:auto}
  /* Tabla en escritorio: columnas proporcionadas; quinta o signo centrada en su columna; el estado en 2 líneas fijas */
  .tt-h,.tt-b{grid-template-columns:7.6rem minmax(12rem,1fr) 8.4rem 11rem 22rem;grid-template-areas:"h j n q e";column-gap:1.4rem;padding-inline:1.4rem}
  .tt-h .c-q,.tt-h .c-e{display:block}
  .tt-h .c-q{text-align:center}
  .tt-b>.c-q{display:flex;grid-area:q;justify-content:center}
  .tt-b>.c-n{justify-content:flex-end}
  .tt-b .c-n .tq,.tt-b .c-n .ts{display:none}
  .tt-b.tt-nac{grid-template-areas:"h j j q e" "h n n q e"}
  .res .bn,.res .bn-g.c{--b:calc(40px + 1.6rem)}
  .res .bn{font-size:calc(12px + 1.6rem)}
  .tt-d{padding-left:10.4rem}
  .riel .tt-h,.riel .tt-b{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"j n" "e e"}
  .riel .tt-h .c-h,.riel .tt-h .c-q,.riel .tt-h .c-e,.riel .tt-b>.c-q{display:none}
  .riel .tt-b>.c-h{display:none}
  /* Loterías de días anteriores en el riel: la fecha va a la vista, para que no se lean como de hoy */
  .riel .tt-b.tt-lot{grid-template-areas:"j n" "h h" "e e"}
  .riel .tt-b.tt-lot>.c-h{display:block;font-weight:600;color:var(--tinta-2)}
  .riel .tt-b.tt-lot>.c-h small{display:inline}
  .riel .tt-b.tt-lot>.c-h small::before{content:" · "}
  .riel .tt-b .c-n .tq,.riel .tt-b .c-n .ts{display:grid}
  .riel .tt-d{padding-left:1rem}
  .h-ficha{font-size:3.6rem;max-width:28ch}
  .bola,.quinta{--b:calc(44px + 1.6rem);width:var(--b);height:var(--b);font-size:calc(18px + 1.6rem)}
  .bolas.f .bola{--b:calc(28px + 1.6rem);font-size:calc(10px + 1.4rem)}
  .quinta.f{width:calc(28px + 1.6rem);height:calc(28px + 1.6rem);font-size:calc(10px + 1.4rem)}
  .acciones .b-sec{flex:0 1 auto;padding-inline:1.6rem}
  .riel .mod,.riel .cayo-caja{padding:1.6rem}
  .riel .lr-s{padding-left:0;justify-content:flex-start}
  .ad-riel{max-width:360px}
  .hoja{border-radius:18px;margin-bottom:5vh}
  .capa{justify-content:center}
  .aviso{bottom:28px}
}

/* =====================================================================================================================
   v5 · GUÍA DE MARCA STITCH (stitch/GUIA-DE-MARCA.md). Este bloque va al final y manda sobre lo anterior: re-estila todo
   el portal con el sistema de Stitch (radios 12/16, sombras de Tailwind, degradados, píldoras, tarjetas blancas sobre
   slate-50) y lo extiende a lo que Stitch no cubre (teléfono, Tabla, fichas, hojas, anuncios, modo oscuro).
   ===================================================================================================================== */
.p{color:var(--texto);font-feature-settings:"cv02","cv03","cv04","cv11";-webkit-font-smoothing:antialiased}
.p h1,.p h2,.p h3{color:var(--tinta)}
.p ::selection{background:var(--b100);color:var(--b900)}
.wrap{max-width:1280px}
@container pantalla (min-width: 640px){ .wrap{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))} }
@container pantalla (min-width: 1024px){ .wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))} }
/* Micro-interacciones: transiciones de color y sombra de 150 ms (se apagan con «reducir movimiento») */
.p a,.p button,.p .campo,.tj,.chip,.mod,.ad{transition:color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .2s ease,transform .2s ease}
.p :focus-visible{outline:3px solid var(--caribe);outline-offset:2px}
.p .ic{width:1em;height:1em}

/* ----- Botones ----- */
.b-prim{background:var(--boton);border:2px solid var(--boton);color:var(--sobre-boton)!important;border-radius:12px;font-weight:700;box-shadow:var(--sh-sm)}
.b-prim:hover{background:var(--boton-hover);border-color:var(--boton-hover)}
.b-sec{background:var(--hoja);border:2px solid var(--linea);color:var(--tinta)!important;border-radius:12px;font-weight:700;box-shadow:var(--sh-xs)}
.b-sec:hover{border-color:var(--caribe);color:var(--caribe)!important;box-shadow:var(--sh-sm)}
.b-sec[aria-pressed="true"]{border-color:var(--caribe);color:var(--caribe)!important;background:var(--b50)}
@media (hover: hover) and (pointer: fine){
  .b-prim:hover,.b-cayo:hover,.b-dia-v:hover{transform:translateY(-2px)}
  .b-prim:active,.b-cayo:active,.b-dia-v:active{transform:none}
}
.b-prim:focus-visible,.b-sec:focus-visible,.b-cayo:focus-visible,.b-dia-v:focus-visible{box-shadow:0 0 0 6px var(--anillo-foco)}
.b-enl{color:var(--caribe);font-weight:700}
.b-ico{border-radius:12px;border:1px solid var(--linea);background:var(--hoja);color:var(--tinta-2)}
.b-ico:hover{background:var(--s100);color:var(--tinta)}
.campo{border:2px solid var(--linea);border-radius:12px;background:var(--hoja);color:var(--tinta);box-shadow:var(--sh-in)}
.campo:focus{border-color:var(--caribe);outline:none;box-shadow:0 0 0 4px var(--anillo-foco)}
.campo::placeholder{color:var(--tinta-3);opacity:1}
.campo.num::placeholder{color:var(--tinta-3)}
.ceja{display:inline-block;font:800 1.3rem/1.2 var(--f-texto);letter-spacing:.12em;text-transform:uppercase;color:var(--caribe);background:var(--b50);border:1px solid rgba(20,184,166,.35);padding:4px 10px;border-radius:6px;margin:0 0 8px}

/* ----- Cabecera (Stitch): logo SH con degradado, navegación en píldoras, «¿Cayó mi número?» y buscador ancho ----- */
.cab{background:var(--hoja);border-bottom:1px solid var(--linea-2);box-shadow:var(--sh-xs);position:relative;z-index:20}
.cab-in{gap:12px;min-height:64px;padding-block:10px}
.marca{gap:12px;border-radius:12px;color:var(--tinta)!important}
.logo-sh{flex:none;width:44px;height:44px;border-radius:14px;background:var(--logo-g);color:#FFFFFF;display:grid;place-items:center;font:900 19px/1 var(--f-titulo);letter-spacing:-.06em;box-shadow:var(--sh-marca);transition:transform .2s ease}
.marca:hover .logo-sh{transform:scale(1.05)}
.marca-t{display:flex;flex-direction:column;justify-content:center;min-width:0;font:inherit;white-space:nowrap}
.marca-l1{display:flex;align-items:center;gap:8px;min-width:0}
.marca-n{font:900 22px/1 var(--f-titulo);letter-spacing:-.025em;color:var(--tinta)}
.marca-n span{color:var(--caribe)}
.marca-pais{display:inline-flex;align-items:center;padding:3px 8px;border-radius:6px;font:800 11px/1.2 var(--f-texto);letter-spacing:.06em;text-transform:uppercase;background:var(--b50);color:var(--caribe);border:1px solid var(--b100)}
.marca-t .marca-sub{display:block;font:700 13px/1.3 var(--f-texto);letter-spacing:0;text-transform:none;color:var(--tinta-2);margin-top:5px}
.b-cayo{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:12px;background:var(--boton);border:0;color:var(--sobre-boton);font:700 1.5rem/1 var(--f-texto);box-shadow:var(--sh-sm);white-space:nowrap}
.b-cayo:hover{background:var(--boton-hover);border-color:transparent}
.b-cayo svg{width:16px;height:16px;flex:none;color:#CCFBF1}
.b-cayo-c{display:none}
#btn-buscar{border-width:1px;color:var(--tinta-2)}
#btn-buscar svg,#btn-menu svg,#btn-menu-t svg{width:20px;height:20px}
.panel{padding-block:8px 16px;border-top:1px solid var(--divisor);justify-content:center}
.panel .buscar-c{max-width:896px;flex:1 1 auto;position:relative}
.panel .campo{min-height:50px;padding:12px 104px 12px 48px;font:500 1.6rem/1.3 var(--f-texto);background:var(--s50);border-radius:12px}
.panel .campo:hover,.panel .campo:focus{background:var(--hoja)}
.buscar-lupa{position:absolute;left:16px;top:15px;width:20px;height:20px;color:var(--tinta-3);pointer-events:none}
.atajo{position:absolute;right:12px;top:12px;display:inline-flex;align-items:center;font:700 12px/1 var(--f-texto);padding:6px 10px;border-radius:6px;background:var(--s200);color:var(--s700);box-shadow:var(--sh-xs);pointer-events:none}
.panel #btn-menu{border-radius:12px;min-height:50px}
.sugerencias{border-radius:12px;border:1px solid var(--linea);box-shadow:var(--sh-lg)}
.sugerencias a:hover{background:var(--s50)}

/* ----- Franja de la jornada (degradado brand-900 → 800 → 900 con sombra interior) ----- */
.franja{background:var(--franja);background-image:var(--franja-g);color:var(--sobre-franja);box-shadow:inset 0 2px 4px 0 rgba(0,0,0,.12)}
.franja-in{min-height:0;padding-block:12px;gap:10px 16px;font:500 1.4rem/1.3 var(--f-texto)}
.franja p{gap:8px}
.fr-cal{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:var(--franja-ico);color:var(--franja-2)}
.fr-cal .ic{width:16px;height:16px}
.fr-jor .fr-et{color:var(--franja-2);font-weight:500}
.fr-jor b{font:700 1.6rem/1.3 var(--f-texto);letter-spacing:.02em;color:#FFFFFF}
.fr-pil{display:inline-flex;align-items:center;gap:10px;padding:6px 14px;border-radius:999px;background:var(--franja-pil-f);border:1px solid var(--franja-pil-b);flex-wrap:wrap}
.fr-pil .fr-et{font:700 1.3rem/1.2 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--franja-2)}
.fr-pil b{color:var(--franja-nom);font-weight:700}
.fr-chip{min-height:0;padding:2px 8px;border-radius:6px;background:var(--franja-chip-f);color:var(--franja-chip);border:1px solid var(--franja-chip-b);font:600 1.3rem/1.35 var(--f-texto)}
.vivo{width:10px;height:10px;background:#F59E0B}
.vivo::after{background:#FBBF24;animation:ping 1s cubic-bezier(0,0,.2,1) infinite;opacity:.75}
@keyframes ping{75%,100%{transform:scale(2);opacity:0}}

/* ----- Contenido: 2/3 + 1/3 (Stitch) ----- */
.main{padding-block:16px 8px}
.tit-card{background:var(--hoja);border:1px solid var(--linea);border-radius:16px;padding:24px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;min-width:0}
.tit-card>.hero{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--divisor)}
.tit-card>.hero:last-child{padding-bottom:0;border-bottom:0}
.hero-t{min-width:0;flex:1 1 26rem;display:flex;flex-direction:column;gap:6px}
.h-pag{font:800 3rem/1.1 var(--f-titulo);letter-spacing:-.02em;color:var(--tinta)}
.h-pag .ceja{display:table;margin-bottom:8px}
.hero-tip{gap:6px;font-size:1.4rem;line-height:1.45;color:var(--tinta-2);margin:0}
.hero-tip svg{color:var(--caribe);width:1.6rem;height:1.6rem}
.hero-l{font-size:1.5rem}
.fecha-f{background:var(--s50);border:1px solid var(--linea-2);border-radius:16px;padding:6px;box-shadow:var(--sh-xs);margin:0}
.tit-card .fecha-f{flex:none;flex-direction:row;align-items:center;gap:8px}
.tit-card .fecha-f label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fecha-f .cy-form{gap:8px;flex-wrap:nowrap}
.fecha-f .cy-form .campo{min-height:44px;padding:6px 12px;font:500 1.5rem/1.2 var(--f-texto);border-width:1px;border-radius:12px;box-shadow:var(--sh-xs);flex:1 1 auto}
.b-dia-v{flex:none;min-height:44px;padding:0 16px;border-radius:12px;border:0;background:#0F766E;color:#FFFFFF;font:700 1.5rem/1 var(--f-texto);box-shadow:var(--sh-sm);white-space:nowrap}
.b-dia-v:hover{background:#115E59}
.ctl{padding-top:20px;gap:10px}
.tit-card .ctl:last-child{padding-bottom:0}
.ctl-fila{flex-wrap:wrap;justify-content:space-between;gap:12px}
.ctl-fila .chips{flex-wrap:wrap;-webkit-mask-image:none;mask-image:none;padding:0;overflow:visible;gap:8px}
.chip{min-height:44px;padding:0 16px;border-radius:12px;border:1px solid transparent;background:var(--s100);color:var(--s700);font:600 1.4rem/1 var(--f-texto);gap:8px}
.chip:hover{background:var(--s200)}
.chip span{display:inline-grid;place-items:center;min-width:2.4rem;padding:3px 8px;border-radius:999px;background:var(--s200);color:var(--s700);font:700 1.25rem/1 var(--f-texto);font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"],.chip.tipo-loteria[aria-pressed="true"],.chip.tipo-nac[aria-pressed="true"]{background:var(--s900);border-color:var(--s900);color:var(--papel);font-weight:700;box-shadow:var(--sh-sm)}
.chip[aria-pressed="true"] span,.chip.tipo-loteria[aria-pressed="true"] span,.chip.tipo-nac[aria-pressed="true"] span{background:var(--s700);color:var(--s200)}
.chip-fav{background:var(--a50);color:var(--a800);border-color:var(--pre-borde)}
.chip-fav:hover{background:var(--a100)}
.chip-fav .ic{width:16px;height:16px;color:#F59E0B}
.chip-fav span{background:var(--a100);color:var(--a800)}
.elige .chip[aria-pressed="true"]{background:var(--b50);border-color:var(--caribe);color:var(--caribe)}
.vista-sel{display:inline-flex;flex:none;padding:3px;gap:2px;background:var(--s100);border:1px solid var(--linea);border-radius:12px}
.vista-sel button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--tinta-2);font:600 1.3rem/1 var(--f-texto)}
.vista-sel button:hover{color:var(--tinta)}
.vista-sel button[aria-pressed="true"]{background:var(--hoja);color:var(--tinta);font-weight:700;box-shadow:var(--sh-xs)}
.vista-sel button[aria-pressed="true"] .ic{color:var(--caribe)}
.vista-sel .ic{width:16px;height:16px}
.filtro-nota{font-size:1.4rem;color:var(--tinta-2)}

/* ----- Encabezado de grupo: «● YA SALIERON (… · lo más reciente primero)» + «Actualizado hace N minutos» ----- */
.grupo-cab{border-bottom:0;padding:0 4px;margin:0 0 14px;align-items:center;gap:4px 16px}
.grupo-cab h2{display:flex;align-items:center;gap:8px;font:800 1.3rem/1.35 var(--f-texto);letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-2)}
.g-det{font-weight:800}
.g-vivo{flex:none;width:10px;height:10px;border-radius:50%;background:#10B981;animation:pulso 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes pulso{50%{opacity:.45}}
.grupo-cab .g-act{font:500 1.3rem/1.3 var(--f-texto);color:var(--tinta-3);margin:0}
.grupo-cab p{font-size:1.3rem}

/* ----- Tarjeta de resultado (Stitch) ----- */
.rejilla{gap:12px}
@container pantalla (min-width: 32rem){ .rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} }
@container pantalla (min-width: 60rem){ .rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} }
.tj{display:flex;flex-direction:column;background:var(--hoja);border:1px solid var(--linea);border-radius:16px;padding:20px;box-shadow:var(--sh-md);color:var(--texto)}
@media (hover: hover) and (pointer: fine){ .tj:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);border-color:var(--caribe-borde)} }
.tj-oculta{display:none!important}
.tj.mia{background:var(--b50);border-color:var(--caribe-borde)}
.tj-in{display:flex;flex-direction:column;flex:1 1 auto;gap:0;margin:0;min-width:0}
.tj-cab{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--divisor);min-width:0}
.tj-pre .tj-cab{border-bottom-color:rgba(245,158,11,.35)}
.tj-cab .mono{width:4rem;height:4rem;font-size:1.35rem}
.tj-id{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.tj-eti{margin:0;font:700 1.3rem/1.25 var(--f-texto);color:var(--tinta-3)}
.tj-eti .e-t{color:var(--caribe);font-weight:700}
.tj-eti .e-h,.tj-eti .e-r{display:inline}
.tj-pre .tj-eti{color:var(--pre-txt)}
.tj-tit{display:none}
.tj-nom{margin:0;font:700 2rem/1.2 var(--f-titulo);letter-spacing:-.01em;color:var(--tinta);overflow-wrap:break-word}
.tj-a{color:var(--tinta)!important}
.tj-a::after{border-radius:16px}
.tj-sor{font:600 1.3rem var(--f-texto)}
.tj-comp{flex:none;width:44px;height:44px;margin:-6px -8px -6px 0;border:0;border-radius:10px;background:transparent;color:var(--tinta-3)}
.tj-comp:hover{background:var(--s100);color:var(--tinta)}
.tj-comp svg{width:20px;height:20px}
.tj-pil{flex:none;min-height:0;padding:4px 8px;border:0;border-radius:6px;background:var(--s100);font:700 1.3rem/1.2 var(--f-texto);color:var(--tinta-2);letter-spacing:.02em}
.tj-pil b{color:var(--tinta);font-weight:800}
.tj-signo{background:var(--a100);color:var(--a900);border:1px solid rgba(245,158,11,.4);border-radius:999px;padding:4px 10px}
.tj-signo b{color:var(--a900)}
.tj-num{--w:min(5.6rem,18.5cqi);display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:8px;margin:20px 0;min-height:0}
.tj-esp{display:flex;align-items:center;justify-content:center;gap:12px;margin:20px 0;min-height:0}
.casillas{gap:8px}
.cas{width:var(--w,5.6rem);height:calc(var(--w,5.6rem) * 8 / 7);border-radius:12px;font:800 min(3rem,10.5cqi)/1 var(--f-titulo);box-shadow:var(--sh-xs)}
.tj-esp{--w:min(4.4rem,15cqi)}
.c-pen .cas{border:2px solid var(--linea);background:var(--cas-vacia);box-shadow:none}
.casillas.c-pre .cas{border:2px solid var(--pre-borde);background:var(--pre-suave);color:var(--pre)}
.revelar .cas::after{border:2px solid var(--pre-borde);background:var(--pre-suave);color:var(--pre);font:inherit}
.tj-x{display:inline-flex;flex-direction:column;align-items:center;gap:5px;flex:none;margin-left:2px;padding-left:10px;border-left:2px solid var(--linea-2);color:var(--tinta-2);white-space:nowrap}
.tj-x b{width:calc(var(--w,5.6rem) * .86);height:calc(var(--w,5.6rem) * 8 / 7);display:grid;place-items:center;border:2px dashed var(--linea);border-radius:12px;background:var(--hoja);color:var(--tinta);font:700 min(2.4rem,9cqi)/1 var(--f-titulo)}
.tj-x small{font:800 1.1rem/1 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.tj-pie{margin-top:auto;padding-top:12px;border-top:1px solid var(--divisor);gap:8px;flex-wrap:wrap;justify-content:space-between}
.tj-pre .tj-pie{border-top-color:rgba(245,158,11,.35)}
.tj .sello{font:700 1.4rem/1.25 var(--f-texto);padding:5px 12px}
.tj-ir{font:700 1.4rem/1.2 var(--f-texto);color:var(--caribe);text-decoration:underline;text-underline-offset:3px}
.tj-verif{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:700 1.3rem/1.2 var(--f-texto);color:var(--pre-txt);background:var(--a100);padding:5px 8px;border-radius:6px;white-space:nowrap}
.tj-verif i{width:8px;height:8px;border-radius:50%;background:#F59E0B;animation:pulso 2s cubic-bezier(.4,0,.6,1) infinite}
.tj::before{border-radius:16px}
.tj-pen{background:var(--hoja)}
.coinc-tu{border-radius:999px;background:var(--a50);border-color:rgba(245,158,11,.5);color:var(--a800)}
.cargar{display:flex;justify-content:center;padding-top:20px}
.b-cargar{min-height:52px;padding:0 32px;font:700 1.6rem/1.2 var(--f-texto);gap:8px}
.b-cargar .ic{width:20px;height:20px;color:var(--tinta-3)}
.b-cargar:hover .ic{color:inherit}
.b-mas{border-radius:12px}

/* ----- Monogramas: círculos de 40 px (Stitch) ----- */
.mono{border-radius:50%!important;clip-path:none!important;font:700 1.35rem/1 var(--f-texto);letter-spacing:.01em}
.mono.m1{background:var(--m1-f);color:var(--m1-t);box-shadow:0 0 0 2px var(--m1-a)}
.mono.m2{background:var(--m2-f);color:var(--m2-t);box-shadow:0 0 0 2px var(--m2-a)}
.mono.m3{background:var(--m3-f);color:var(--m3-t);box-shadow:0 0 0 2px var(--m3-a)}
.mono.m4{background:var(--m4-f);color:var(--m4-t);box-shadow:0 0 0 2px var(--m4-a)}
.mono.m5{background:var(--m5-f);color:var(--m5-t);box-shadow:0 0 0 2px var(--m5-a)}
.mono.m6{background:var(--m6-f);color:var(--m6-t);box-shadow:0 0 0 2px var(--m6-a)}
.mono-loteria{background:#0F766E;color:#FFFFFF;font-size:1.1rem;box-shadow:var(--sh-xs)}
.mono-nac{background:#4338CA;color:#FFFFFF;box-shadow:var(--sh-xs)}
.chip .sw-t{display:none}

/* ----- Sellos ----- */
.sello{border-radius:999px;font-weight:700;gap:6px}
.sello svg{width:1.6rem;height:1.6rem}
.s-ok{background:var(--ok-suave);color:var(--ok);border:1px solid var(--ok-borde)}
.s-ok svg{color:var(--ok-ico)}
.s-pre{border-radius:8px;border:2px dashed var(--pre-borde);background:var(--pre-suave);color:var(--pre)}
.s-uni{border-radius:8px;border:1px solid var(--uni-borde);background:var(--uni-suave);color:var(--uni)}
.s-pen,.s-curso{border-radius:999px;background:var(--esp-suave);color:var(--esp);border:1px solid var(--linea-2)}
.ok-mini{color:var(--ok)}
.ok-mini svg{color:var(--ok-ico)}
.chip-ok{border-radius:999px;border:1px solid var(--ok-borde)}

/* ----- Módulos y bloques: tarjetas blancas de radio 16 con sombra suave ----- */
.mod,.bloque,.llevate,.elige,.dato,.nac-dest,.dir-g,.legal-doc>section{background:var(--hoja);border:1px solid var(--linea);border-radius:16px;padding:24px;box-shadow:var(--sh-sm);min-width:0}
.legal-doc>section.nada{background:none;border:0;box-shadow:none;padding:0}
.bloque h2,.h2,.llevate h2,.elige h2,.nac-dest h2,.dir-g h2,.legal-doc h2,.piz-cab h2,.muro h2{font:800 2.1rem/1.2 var(--f-titulo);letter-spacing:-.01em;color:var(--tinta)}
.bloque h3{font:700 1.7rem/1.3 var(--f-texto)}
.dato{background:var(--b50);border-color:var(--caribe-borde)}
.m-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--divisor);margin-bottom:4px}
.m-cab .h2{margin:0}
.m-cont{flex:none;font:600 1.3rem/1.2 var(--f-texto);padding:3px 8px;border-radius:6px;background:var(--s100);color:var(--tinta-2)}
.m-pie{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:12px;padding-top:8px;border-top:1px solid var(--divisor);font:700 1.4rem/1.2 var(--f-texto);color:var(--caribe)!important;text-decoration:none}
.m-pie:hover{text-decoration:underline}
.prox-l{border-top:0}
.prox-l li{border-bottom:1px solid var(--divisor)}
.prox-l li:last-child{border-bottom:0}
.prox-l a{gap:12px;min-height:6.4rem;padding:10px 8px;margin:0 -8px;border-radius:12px}
.prox-l a:hover{background:var(--s50)}
.prox-l a:hover b{color:var(--caribe)}
.prox-l b{font:700 1.6rem/1.25 var(--f-texto);transition:color .15s}
.prox-l small{font-size:1.3rem;color:var(--tinta-3)}
.reloj{flex:none;width:36px;height:36px;border-radius:50%;background:var(--s100);display:grid;place-items:center;color:var(--tinta-3)}
.reloj .ic{width:20px;height:20px}
.giro{flex:none;width:36px;height:36px;border-radius:50%;border:2px solid #F59E0B;border-top-color:transparent;display:grid;place-items:center;animation:giro 1.4s linear infinite}
.giro i{width:8px;height:8px;border-radius:50%;background:#F59E0B}
@keyframes giro{to{transform:rotate(360deg)}}
.falta{flex:none;font:700 1.3rem/1.2 var(--f-texto);padding:4px 8px;border-radius:6px;background:var(--s100);color:var(--tinta-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.prox-1 .falta{background:var(--a100);color:var(--a900);font-weight:800}
.falta .pronto{color:inherit!important;font-weight:inherit}
/* Loterías principales de la semana */
.sem-s{border:0;border-radius:0;background:none;overflow:visible}
.sem-s li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--divisor)}
.sem-s li+li{border-top:0}
.sem-s li:last-child{border-bottom:0}
.sem-s li.hoy{background:none;font-weight:400}
.sl-n{display:flex;flex-direction:column;min-width:0}
.sl-n b{font:700 1.5rem/1.3 var(--f-texto);color:var(--tinta)}
.sl-n small{font-size:1.3rem;color:var(--tinta-3)}
.sl-cuando{flex:none;font:600 1.3rem/1.2 var(--f-texto);color:var(--tinta-3)}
.hoy .sl-cuando{font-weight:700;color:var(--a800);background:var(--a50);padding:4px 8px;border-radius:6px}
.sem-m .nota-peq{font-size:1.3rem}

/* ----- ¿Cayó? (Stitch): borde de marca y cuarto de círculo brand-50 de adorno ----- */
.cayo-caja.cy-v4{position:relative;overflow:hidden;display:block;background:var(--hoja);border:2px solid var(--caribe-borde);border-top-width:2px;border-radius:16px;padding:24px;box-shadow:var(--sh-md)}
.cayo-caja.cy-v4::before{content:"";position:absolute;top:0;right:0;width:96px;height:96px;background:var(--b50);border-bottom-left-radius:100%;pointer-events:none}
.cayo-caja.cy-v4>*{position:relative}
.cy-cab{gap:10px;margin-bottom:6px}
.cy-ico{width:40px;height:40px;border-radius:12px;background:var(--b100);color:var(--b800)}
.cy-ico .ic{width:22px;height:22px}
.cy-v4 .cy-et{margin:0;font:800 2rem/1.2 var(--f-titulo);color:var(--tinta)}
.cy-baj{margin:2px 0 0;font-size:1.3rem;line-height:1.35;color:var(--tinta-3)}
.cy-campos{display:flex;flex-direction:column}
.cy-lab{display:block;margin:14px 0 6px;font:800 1.3rem/1.3 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.cy-lab2{display:block;margin:12px 0 6px;font:700 1.3rem/1.3 var(--f-texto);color:var(--tinta-2)}
.cy-v4 .campo.cy-grande{min-height:6.4rem;text-align:center;font:800 3rem/1 var(--f-titulo);letter-spacing:.3em;padding:8px 12px}
.cy-v4 .campo.cy-grande::placeholder{color:var(--linea)}
.cy-v4 .campo.cy-serie{min-height:44px;text-align:center;font:600 1.6rem/1.2 var(--f-mq);letter-spacing:.12em;padding:6px 12px}
.cy-v4 .b-prim{margin-top:14px;min-height:5rem;font:800 1.6rem/1.2 var(--f-texto)}
.cy-v4 .cy-lock{display:flex;justify-content:center;margin-top:8px;font:700 1.3rem/1.35 var(--f-texto);color:var(--caribe)}

/* ----- Publicidad: caja slate-100 de radio 16, rótulo «Anuncios» y creativo en un recuadro punteado ----- */
.ad{background:var(--ad-fondo);border:1px solid var(--ad-borde);border-radius:16px;padding:12px 16px 16px;text-align:center}
.ad-rotulo{margin:0 0 8px;font:700 12px/1.3 var(--f-texto);letter-spacing:.06em;color:var(--ad-texto)}
.ad-creativo,.ad-nat,.ad-tesela{border-radius:12px;border:1px dashed var(--ad-punteado)}
.ad-txt{font:600 12px/1.3 var(--f-texto)}
.ancla{background:var(--hoja);border-top:1px solid var(--linea-2);box-shadow:0 -4px 6px -1px rgba(0,0,0,.08)}
.ancla-creativo{border-radius:8px;border:1px dashed var(--ad-punteado)}
.ancla .ad-rotulo{font:700 12px/1.2 var(--f-texto)}
.ancla-cerrar{border-radius:12px;background:var(--hoja);border-color:var(--linea)}
.ad-riel{max-width:none}

/* ----- Tabla (Modo Tabla): tarjeta blanca, cabecera slate-100, filas alternas y barra del color del juego ----- */
.vista-t .t-cab{background:var(--hoja);border:1px solid var(--linea);border-radius:16px;padding:8px;box-shadow:var(--sh-sm)}
.t-cab b{font:800 2rem/1.2 var(--f-titulo);letter-spacing:-.01em;text-transform:none}
.t-cab small{font-size:1.3rem;color:var(--tinta-3)}
.t-cab .b-ico{border-radius:12px;border-width:1px}
.seg{padding:3px;gap:2px;background:var(--s100);border:1px solid var(--linea);border-radius:12px}
.seg button{border:0!important;border-radius:9px;min-height:44px;padding:0 14px;font:600 1.4rem var(--f-texto);color:var(--tinta-2)}
.seg button[aria-pressed="true"]{background:var(--hoja);color:var(--tinta);font-weight:700;box-shadow:var(--sh-xs)}
.sw input{background:var(--linea)}
.sw input:checked{background:var(--caribe-borde)}
.tt{border:1px solid var(--linea);border-radius:16px;background:var(--hoja);box-shadow:var(--sh-sm);overflow:clip}
.tt-h{background:var(--s100);color:var(--tinta-2);font:800 1.3rem/1.2 var(--f-texto);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--linea-2)}
.tt-f{border-top:1px solid var(--divisor)}
.tt-f:first-of-type{border-top:0}
.tt-f:nth-child(even) .tt-b{background:var(--s50)}
.tt-b:hover{background:var(--b50)!important}
.tt-f .tt-b{box-shadow:inset 4px 0 0 var(--t-fill)}
.tt-b .tn{font:800 2.4rem/1 var(--f-texto);letter-spacing:.08em}
.tt-b .tq{border:2px dashed var(--linea);border-radius:8px;font-family:var(--f-titulo)}
.tt-b .ts{border:1px solid rgba(245,158,11,.4);background:var(--a100);color:var(--a900)}
.tt-d{background:var(--b50)}
.tabla-env{border:1px solid var(--linea);border-radius:16px;background:var(--hoja);box-shadow:var(--sh-xs)}
.tabla th{background:var(--s100);color:var(--tinta-2);font:800 1.3rem/1.2 var(--f-texto);letter-spacing:.06em}
.tabla td{border-bottom:1px solid var(--divisor)}
.tabla tbody tr:nth-child(even){background:var(--s50)}
.tabla tbody tr:last-child td{border-bottom:0}

/* ----- Fichas: tarjeta del resultado y casillas grandes de Stitch ----- */
.migas ol{font-size:1.4rem;color:var(--tinta-3)}
.migas a{font-weight:600}
.h-ficha{font:800 2.6rem/1.12 var(--f-titulo);letter-spacing:-.02em}
.h-ficha>span{font:600 1.6rem/1.3 var(--f-texto);color:var(--tinta-2)}
.res{background:var(--hoja);border:1px solid var(--linea);border-radius:16px;padding:20px;box-shadow:var(--sh-md);gap:12px}
.res-linea{font-weight:700;color:var(--tinta-3)}
.res .sello{font-size:1.6rem;padding:6px 14px}
.bola{width:calc(var(--b) * .875);border-radius:12px;font-family:var(--f-titulo);font-weight:800;box-shadow:var(--sh-xs)}
.bolas{gap:8px}
.bolas.pre .bola{border-style:solid;border-color:var(--pre-borde);background:var(--pre-suave);color:var(--pre)}
.bolas.vacias .bola{border:2px solid var(--linea);background:var(--cas-vacia);box-shadow:none}
.quinta{width:calc(var(--b) * .8);border-radius:12px;border:2px dashed var(--linea);background:var(--hoja);color:var(--tinta);font-family:var(--f-titulo);font-weight:700}
.et{font:800 1.2rem/1.2 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.signo{border:1px solid rgba(245,158,11,.45);background:var(--a100);color:var(--a900);border-radius:999px}
.serie{border:2px solid var(--linea);border-radius:12px;background:var(--s100);color:var(--tinta);font-family:var(--f-titulo);font-weight:800}
.serie::before,.serie::after{display:none}
.acciones .b-sec{border-radius:12px}
.combi dd{font-family:var(--f-texto);color:var(--caribe)}
.semana{border-radius:16px}
.semana li.hoy{background:var(--b50)}
.semana.sem7 li{border-radius:12px;border-color:var(--linea)}
.semana.sem7 li.hoy{background:var(--b50);border-color:var(--caribe-borde)}
.lista-mini{border-top:0}
.lista-mini li{border-bottom:1px solid var(--divisor)}
.lista-mini li:last-child{border-bottom:0}
.lista-mini a:hover b{color:var(--caribe)}
.lot-l{border-top:0}
.lr{border-bottom:1px solid var(--divisor)}
.lr-n b{font-family:var(--f-texto)}
.secos-l{border-top:0}
.secos-l li{border-bottom:1px solid var(--divisor)}
.secos-l .sc-v b{font-family:var(--f-texto)}
.b-barra,.frec-g i>i{background:var(--caribe-borde)}
.b-pista{border-radius:6px}
.frec-g li{border-radius:12px;border-color:var(--linea-2)}
.faq{border-top:0}
.faq details{border-bottom:1px solid var(--divisor)}
.faq details:last-child{border-bottom:0}
.faq summary{font-weight:700}
.faq summary::after{color:var(--caribe)}
.descargo{border-radius:12px;border:2px solid var(--linea)}
.aviso-legal,.borrador{border-radius:12px}
.candado{background:var(--hoja);border:2px dashed var(--caribe-borde);border-radius:16px;padding:24px}
.muro{background:var(--hoja);border:2px solid var(--caribe-borde);border-radius:16px;padding:24px;box-shadow:var(--sh-md)}
.vacio{background:var(--hoja);border:2px dashed var(--linea);border-radius:16px}
.nac-dest{border-top:1px solid var(--linea);gap:12px}
.nac-dest .ceja{color:#3730A3;background:#EEF2FF;border-color:rgba(99,102,241,.35)}
.bn{background:var(--nac);border-color:var(--nac);color:var(--sobre-nac);font-family:var(--f-titulo);font-weight:800;box-shadow:var(--sh-xs)}
.bn.sb{background:var(--nac-suave);color:var(--nac-tinta);border:5px double var(--nac)}
.bns.vacias .bn{border:2px solid var(--linea);box-shadow:none}
.bns.pre .bn{border-style:solid}
.mcard{border-radius:16px;border:1px solid var(--linea);box-shadow:var(--sh-xs)}
.mcard.m-pre{border:2px dashed var(--pre-borde)}
.caja-aviso{border-radius:12px;background:var(--s100)}
.recomp{background:var(--b50);border-top:1px solid var(--divisor);border-radius:0 0 16px 16px}
.unas summary{color:var(--caribe)}
.mq-anot{border-radius:8px}
.muro-gratis{border-top-color:var(--divisor)}
.meses button{border-radius:12px;border-color:var(--linea)}
.meses button[aria-pressed="true"]{background:var(--boton);border-color:var(--boton);color:var(--sobre-boton)}
.dir-g{padding-top:24px}
.dir-dia{color:var(--tinta-2)}
.version{border-top-color:var(--divisor)}

/* ----- Garantías (fondo brand-50) y pie slate-900 en columnas (Stitch) ----- */
.garantias{background:var(--gar-fondo);border-top:1px solid var(--gar-borde);border-bottom:1px solid var(--gar-borde);margin-top:40px}
.gar-l{padding-block:32px;gap:24px}
.gar-ico{width:40px;height:40px;border-radius:12px;background:var(--gar-icono);color:var(--sobre-gar-icono);box-shadow:var(--sh-xs)}
.gar-ico .ic{width:20px;height:20px}
.gar-18{font:800 14px/1 var(--f-titulo)}
.gar b{font:700 1.6rem/1.3 var(--f-texto);color:var(--tinta);margin-bottom:4px}
.gar p{font-size:1.4rem;line-height:1.6;color:var(--tinta-2)}
.pie{background:var(--pie-fondo);color:var(--pie-texto-3);border-top:1px solid var(--pie-linea);font-size:1.4rem}
.pie .wrap{padding-block:40px 24px}
.pie-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:32px;border-bottom:1px solid var(--pie-linea)}
@container pantalla (min-width: 600px){ .pie-cols{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container pantalla (min-width: 1024px){ .pie-cols{grid-template-columns:1.1fr .9fr .9fr 1.3fr;gap:32px} }
.marca-pie{display:inline-flex;margin:0;color:#FFFFFF!important}
.marca-pie .logo-sh{width:40px;height:40px;border-radius:12px;font-size:18px}
.marca-pie .marca-n{font:700 20px/1 var(--f-titulo);color:#FFFFFF;letter-spacing:-.01em}
.pie-marca p{margin:14px 0 0;line-height:1.6;color:var(--pie-texto-2);max-width:40ch}
.pie .pie-18{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:8px;background:var(--pie-chip);border:1px solid var(--pie-chip-b);color:var(--pie-ambar);font:700 1.3rem/1.2 var(--f-texto)}
.pie-col h2{margin:0 0 8px;font:700 1.3rem/1.3 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;color:#FFFFFF}
.pie-col ul{list-style:none;margin:0;padding:0}
.pie-col li a{display:inline-flex;align-items:center;min-height:44px;font-size:1.4rem;color:var(--pie-texto-2)!important;text-decoration:none}
.pie-col li a:hover{color:#FFFFFF!important;text-decoration:underline}
.pie .legal{font-weight:700;color:var(--pie-texto)}
.pie-legal p{font-size:1.4rem;line-height:1.55;color:var(--pie-texto-2);margin:0 0 10px;max-width:none}
.pie-legal p.legal{color:#FFFFFF}
.pie-enl{border-top:0;padding-top:0;margin-top:0;gap:0 16px}
.pie .b-enl{color:var(--pie-enlace);font-size:1.4rem;font-weight:600}
.pie .b-enl:hover{color:#FFFFFF}
.pie-baja{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding-top:20px;font-size:1.3rem;color:var(--pie-texto-2)}
.pie-baja p{margin:0}

/* ----- Capas: hojas, aviso de cookies, aviso, píldora ----- */
.hoja{border-radius:20px 20px 0 0;box-shadow:var(--sh-lg)}
.hoja-cab h2{font:800 2.1rem/1.2 var(--f-titulo);letter-spacing:-.01em}
.hoja-cab .b-ico{border-radius:12px}
.img-prev,.txt-wa{border-radius:12px}
.img-prev{border-color:var(--linea-2)}
.canal{border-radius:12px;border-color:var(--linea)}
.mis-l{border-top:0}
.mis-l li{border-bottom:1px solid var(--divisor)}
.nums button{border-radius:12px;border-color:var(--linea);background:var(--s100)}
.estrella[aria-pressed="true"]{color:#F59E0B}
.cmp{background:var(--hoja);border-top:1px solid var(--linea);border-radius:16px 16px 0 0;box-shadow:0 -10px 15px -3px rgba(0,0,0,.1),0 -4px 6px -4px rgba(0,0,0,.1)}
.cmp .c-par{border:2px solid var(--linea);border-radius:12px;background:var(--hoja);color:var(--tinta);box-shadow:var(--sh-xs)}
.cmp .c-par:hover{border-color:var(--caribe);color:var(--caribe)}
.aviso{border-radius:12px;box-shadow:var(--sh-lg);background:var(--s900);color:var(--papel)}
.pildora{z-index:45;background:var(--boton);color:var(--sobre-boton);border-radius:999px;box-shadow:var(--sh-lg)}
.rec-b{border-radius:12px}

/* ----- Teléfono (< 600 px): las proporciones de Stitch adaptadas a 360-390 px ----- */
@container pantalla (max-width: 599px){
  .cab-in{min-height:56px;padding-block:6px;gap:6px}
  .marca{gap:8px}
  .logo-sh{width:38px;height:38px;border-radius:12px;font-size:16px}
  .marca-n{font-size:19px}
  .marca-pais,.marca-t .marca-sub{display:none}
  .b-cayo{padding:0 12px;font-size:1.5rem}
  .b-cayo svg,.b-cayo-l{display:none}
  .b-cayo-c{display:inline}
  .panel{padding-block:0 10px;border-top:0}
  .panel .campo{padding-right:14px;min-height:46px;font-size:1.6rem}
  .buscar-lupa{top:13px}
  .atajo{display:none}
  .franja-in{padding-block:6px;font-size:clamp(13px,1.4rem,16px)}
  .fr-pil{padding:3px 10px;gap:8px;background:none;border:0;padding-inline:0}
  .fr-pil .fr-et{font-size:clamp(11px,1.2rem,14px)}
  .main{padding-top:10px}
  .lienzo{gap:1.6rem}
  .tit-card{padding:10px 12px 12px;border-radius:14px}
  .tit-card>.hero{padding-bottom:8px;gap:0}
  .tit-card .ctl{padding-top:8px}
  .h-pag{font-size:clamp(22px,2.2rem,26px);line-height:1.12}
  .ctl-fila{flex-wrap:nowrap;gap:6px}
  .ctl-fila .chips{flex-wrap:nowrap;overflow-x:auto;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);padding-right:20px;gap:6px}
  .chip{padding:0 12px}
  .vista-sel{padding:2px}
  .vista-sel button{padding:0 9px}
  .vs-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vista-sel .ic{width:18px;height:18px}
  .grupo-cab{margin-bottom:8px;padding:0 2px}
  .grupo-cab .g-det,.grupo-cab .g-act{display:none}
  .rejilla{gap:10px}
  .tj{padding:12px;border-radius:14px}
  .tj-cab{padding-bottom:8px;gap:8px}
  .tj-num{margin:10px 0}
  .tj-esp{margin:10px 0}
  .tj-pie{padding-top:8px}
  .tj-dest{padding:10px 12px 12px}
  .tj-dest .tj-num{--w:min(5rem,17cqi);margin:8px 0}
  .tj-dest .tj-cab{padding-bottom:6px}
  .tj-dest .tj-nom{font-size:1.9rem}
  .mod,.bloque,.llevate,.elige,.dato,.nac-dest,.dir-g,.legal-doc>section,.cayo-caja.cy-v4,.candado,.muro{padding:16px}
  .tras-1 .fecha-f{background:var(--hoja);border:1px solid var(--linea);border-radius:14px;padding:10px 12px 12px;box-shadow:var(--sh-sm);flex-direction:column}
  .tras-1 .fecha-f label{position:static;width:auto;height:auto;clip:auto;font-size:1.4rem}
  .cargar .b-cargar{width:100%;padding:0 16px}
  .garantias{margin-top:28px}
  .gar-l{padding-block:24px;gap:18px}
  .pie .wrap{padding-block:28px 16px}
  .cmp{border-radius:14px 14px 0 0}
}
/* Tarjetas angostas (rejilla de 2 columnas del teléfono): monograma y Compartir arriba, luego la hora y el nombre */
@container tarjeta (max-width: 19rem){
  .tj-cab{flex-wrap:wrap;row-gap:4px;align-items:center}
  .tj-cab .mono{width:3.2rem;height:3.2rem;font-size:1.1rem}
  .tj-id{order:3;flex:1 1 100%}
  .tj-pil{order:4}
  .tj-comp{order:2;margin-left:auto}
  .tj-nom{font-size:1.7rem}
  .tj-num{--w:min(4.2rem,19.5cqi);gap:4px;flex-wrap:wrap}
  .casillas{gap:4px}
  .cas{border-radius:9px}
  .tj-x{flex-direction:row;gap:6px;margin-left:0;padding-left:0;border-left:0}
  .tj-x b{width:3.2rem;height:3.2rem;border-radius:9px;font-size:1.6rem}
  .tj .sello{font-size:1.3rem;padding:4px 9px}
  .tj-pie .tj-ir,.tj-pie .tj-verif{display:none}
  .tj-pie{padding-top:8px}
}
/* Tableta: columna centrada */
@container pantalla (min-width: 600px) and (max-width: 1023px){
  .main>.lienzo,.main>.vista{max-width:760px}
  .h-pag{font-size:3.2rem}
}
/* Escritorio (≥ 1.024 px): 2/3 + 1/3 con 32 px, cabecera fija, logo de 56 px y título de 36 px (Stitch) */
@container pantalla (min-width: 1024px){
  .p{font-size:1.7rem}
  .cab{position:sticky;top:0;z-index:40}
  .cab-in{min-height:88px;padding-block:16px;gap:24px}
  .logo-sh{width:56px;height:56px;border-radius:16px;font-size:24px}
  .marca-n{font-size:24px}
  .marca{margin-right:0}
  .nav{gap:4px;margin:0 auto 0 12px}
  .nav a{min-height:44px;padding:0 16px;border-radius:12px;border:1px solid transparent;font:800 1.4rem/1 var(--f-texto);color:var(--tinta);display:inline-flex;align-items:center}
  .nav a:hover{background:var(--s100);color:var(--b900)}
  .nav a[aria-current="page"]{background:var(--b100);color:var(--b900);border-color:rgba(20,184,166,.35)}
  .b-ico .b-txt{display:inline}
  .panel{padding-block:8px 16px}
  .panel #btn-menu{display:none}
  .main{padding-block:32px 16px}
  .lienzo{grid-template-columns:minmax(0,2fr) minmax(0,1fr);column-gap:32px}
  .col,.riel{gap:24px}
  .h-pag{font-size:3.6rem}
  .tit-card .fecha-f{flex:none;padding:6px}
  .fecha-f .cy-form{flex:none}
  .fecha-f .cy-form .campo{flex:none;width:17rem}
  .rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .tj{padding:20px}
  .cas{width:var(--w,5.6rem)}
  .h-ficha{font-size:3.6rem}
  .riel .mod,.riel .cayo-caja,.riel .bloque{padding:24px}
  .gar-l{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .hoja{border-radius:16px}
  .tt-h,.tt-b{padding-inline:1.6rem}
}
.tj-in{align-items:stretch;justify-items:stretch}
.tj-eti,.tj-nom{align-self:stretch}
.sem-s span{text-align:left;color:inherit}
.sem-s .sl-cuando{text-align:right;color:var(--tinta-3)}
.sem-s .hoy .sl-cuando{color:var(--a800)}
.prox-l a>span.reloj,.prox-l a>span.giro,.prox-l a>span.falta{flex:none;display:grid}
.prox-l a>span.falta{display:inline-block}
@container pantalla (min-width: 1024px){ #btn-buscar{display:none} }
@container pantalla (max-width: 599px){ .h-pag .ceja{display:block!important;padding:0!important;border:0!important;margin:0!important} .franja .fr-jor{display:none} .fr-pil{flex-wrap:nowrap;min-width:0} .fr-ps{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .grupo-cab{flex-wrap:wrap;justify-content:space-between} .tj-dest .tj-verif{display:none} }
@container pantalla (max-width: 33rem){ .h-pag .ceja{display:block!important;padding:0!important;border:0!important;margin:0!important} }
/* Ajuste fino de la primera pantalla del teléfono (360×640 con el aviso de cookies, letra al 100 y 130 %) */
@container pantalla (max-width: 599px){
  .main{padding-top:6px}
  .lienzo{gap:1.2rem}
  .tit-card{padding:8px 12px 10px}
  .tit-card>.hero{padding-bottom:6px}
  .tit-card .ctl{padding-top:6px}
  .grupo-cab{margin-bottom:6px;row-gap:0}
  .tj-dest{padding:8px 12px 10px}
  .tj-dest .tj-cab{padding-bottom:4px}
  .tj-dest .tj-num{margin:6px 0}
  .tj-dest .tj-pie{padding-top:6px}
  .franja-in{padding-block:5px}
  .fr-chip{padding:0 7px}
  .res{padding:12px 14px;gap:8px;border-radius:14px}
  .ficha-cab .migas{min-height:40px}
  .h-ficha{font-size:clamp(22px,2.4rem,26px);margin:.2rem 0 .6rem}
}
.semana.sem-s li.hoy{background:none}
.legal-doc>ol.indice-l,.legal-doc>.indice-l{background:var(--hoja);border:1px solid var(--linea);border-radius:16px;padding:16px 20px 16px 44px;box-shadow:var(--sh-sm);margin:0}
@container pantalla (max-width: 599px){ .tit-card .fecha-f{flex:1 1 100%;min-width:0} .fecha-f .cy-form{flex-wrap:wrap} .fecha-f .cy-form .campo{flex:1 1 13rem;min-width:0} .fecha-f .b-dia-v{flex:1 1 auto} }
/* Zonas táctiles de 44 px como mínimo */
.vista-sel button{min-width:44px;justify-content:center}
.migas a{min-width:44px;justify-content:center}
.tabla a{min-width:44px}
.cmp .c-conf{padding:13px 4px;margin:-13px -4px}
@container pantalla (max-width: 28rem){ .tr{white-space:normal} }
@media (prefers-reduced-motion: reduce){ .tj:hover,.b-prim:hover,.b-cayo:hover,.b-dia-v:hover{transform:none} .marca:hover .logo-sh{transform:none} }

/* Casillas del número · opción B elegida por el usuario (17-oct-2026, reemplaza a la D, que resaltaba mucho):
   fondo de Stitch (brand-50), borde verde medio (brand-300) y cifra de Stitch (brand-900).
   Aplica a lo confirmado y a fuente única de todos los juegos; preliminar, pendiente y ColorLOTO conservan su estilo. */
/* v5j (17-oct-2026, el usuario corrige y elige la opción A): la casilla vuelve a brand-50; la TARJETA toma el fondo de los
   botones de filtro (slate-100), ver abajo. */
:root{--d-fondo:#F0FDFA;--d-borde:#5EEAD4;--d-cifra:#134E4A}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--d-fondo:#0E2A28;--d-borde:#0F766E;--d-cifra:#CCFBF1} }
:root[data-theme="dark"]{--d-fondo:#0E2A28;--d-borde:#0F766E;--d-cifra:#CCFBF1}
/* v5j · Tarjetas de resultado con el fondo de los botones de filtro (slate-100; oscuro #1E293B); las de «mis favoritos» conservan su tono */
.rejilla .tj:not(.mia){background:var(--s100)}
.cas{background:var(--d-fondo);border-color:var(--d-borde);color:var(--d-cifra)}
.bola:not([class*="cl-"]){background:var(--d-fondo);border-color:var(--d-borde);color:var(--d-cifra)}

/* Indicadores «en vivo» (17-oct-2026): con «reducir movimiento» activo (Windows con los efectos de animación apagados)
   la regla general las apagaba todas. Estos tres son señales de estado pequeñas que no desplazan nada, así que se
   conservan; las entradas, revelados y efectos al pasar el ratón siguen apagados en ese caso. */
@media (prefers-reduced-motion: reduce){
  .vivo::after{animation:ping 1s cubic-bezier(0,0,.2,1) infinite!important}
  .g-vivo,.tj-verif i{animation:pulso 2s cubic-bezier(.4,0,.6,1) infinite!important}
  .giro{animation:giro 1.4s linear infinite!important}
}

/* ===== v5b (17-oct-2026) · Organización para una mejor experiencia, pedida por el usuario: pie más compacto, anuncios
   bien marcados, portada más corta (directorio en grupos plegables) y anuncio voluntario en video. La marca, los colores,
   las tipografías y el diseño de la v5 no cambian. ===== */

/* Anuncios: rótulo «Anuncios» en píldora visible, marco punteado y fondo rayado suave. Ningún espacio publicitario pasa
   inadvertido ni se confunde con una tarjeta (reglas 13 y 14). */
:root{--ad-rot-fondo:#475569;--ad-rot-texto:#FFFFFF;--ad-raya:rgba(100,116,139,.13)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--ad-rot-fondo:#CBD5E1;--ad-rot-texto:#0F172A;--ad-raya:rgba(203,213,225,.09)} }
:root[data-theme="dark"]{--ad-rot-fondo:#CBD5E1;--ad-rot-texto:#0F172A;--ad-raya:rgba(203,213,225,.09)}
.ad{border:1.5px dashed var(--ad-punteado)}
.ad-rotulo{display:inline-flex;align-items:center;margin:0 0 10px;padding:3px 10px;border-radius:999px;background:var(--ad-rot-fondo);color:var(--ad-rot-texto);font:700 11.5px/1.3 var(--f-texto);letter-spacing:.08em;text-transform:uppercase}
.ancla .ad-rotulo{margin:0;padding:2px 8px;font-size:10.5px}
.ad-hueco{background:repeating-linear-gradient(135deg,transparent 0 12px,var(--ad-raya) 12px 14px);border-radius:12px}
.ad-txt{color:var(--ad-texto);font-weight:700}

/* Portada · «Todos los juegos»: 4 grupos plegables (cerrados) con solo los nombres; los horarios siguen en /chance y /loterias */
.dir-d{border:1px solid var(--linea-2);border-radius:12px;background:var(--hoja);margin-top:10px}
.dir-d summary{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 16px;cursor:pointer;list-style:none;font-size:1.6rem}
.dir-d summary::-webkit-details-marker{display:none}
.dir-d summary span{margin-left:auto;font-size:1.3rem;color:var(--tinta-2);white-space:nowrap}
.dir-d summary::after{content:"";flex:none;width:8px;height:8px;margin:0 2px 4px 4px;border-right:2px solid var(--tinta-2);border-bottom:2px solid var(--tinta-2);transform:rotate(45deg)}
.dir-d[open] summary::after{transform:rotate(-135deg);margin-bottom:-4px}
.dir-n{list-style:none;margin:0;padding:4px 16px 6px;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:0 16px;border-top:1px solid var(--linea-2)}
.dir-n a{display:flex;align-items:center;min-height:44px;font-size:1.5rem;font-weight:600;color:var(--tinta);text-decoration:none}
.dir-n a:hover{text-decoration:underline}
.dir-d>.b-enl{display:inline-flex;margin:0 16px 12px}
.dir-c .bajada{margin-bottom:4px}

/* Pie compacto: menos aire, las dos listas de enlaces lado a lado en el teléfono y sin el relleno del ancla en escritorio */
.pie .wrap{padding-block:28px 14px}
.pie-cols{gap:20px 28px;padding-bottom:20px}
.pie-marca p{margin-top:10px}
.pie-col h2{margin-bottom:2px}
.pie-legal p{font-size:1.3rem;line-height:1.5;margin-bottom:8px}
.pie-baja{padding-top:14px}
@container pantalla (max-width: 599px){
  .pie .wrap{padding-block:22px 12px}
  .pie-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;padding-bottom:16px}
  .pie-marca,.pie-legal{grid-column:1 / -1}
  .pie-marca p:not(.pie-18){display:none}
  .pie-marca .pie-18{margin-top:10px}
  .pie-col li a{min-height:40px;font-size:1.35rem;line-height:1.25}
  .pie-baja{flex-direction:column;gap:2px}
}
@container pantalla (min-width: 1024px){
  .pie{padding-bottom:0}
  .pie-col li a{min-height:32px}
}
/* Garantías: en el teléfono, solo el título de cada una (el texto completo queda en escritorio y tableta) */
.garantias{margin-top:28px}
.gar-l{padding-block:22px;gap:18px}
@container pantalla (max-width: 599px){
  .garantias{margin-top:20px}
  .gar-l{padding-block:14px;gap:10px}
  .gar{align-items:center}
  .gar-d{display:none}
  .gar b{margin:0}
  .gar-ico{width:32px;height:32px;border-radius:10px}
  .gar-ico .ic{width:16px;height:16px}
}

/* Anuncio voluntario en video: reproductor 16:9 con el rótulo «Anuncio» y el tiempo que falta, sin sonido al empezar */
.rec-video{flex:1 1 auto;min-height:0;margin-inline:16px;position:relative;display:flex;align-items:center;justify-content:center;background:#000;border-radius:12px;overflow:hidden}
.rec-video .rec-creativo{flex:none;margin:0;width:100%;max-height:100%;min-height:0;aspect-ratio:16/9}
.rec-creativo .rec-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.55)}
.rec-creativo .rec-play::after{content:"";position:absolute;left:24px;top:18px;border-left:20px solid rgba(255,255,255,.9);border-top:12px solid transparent;border-bottom:12px solid transparent}
.rec-fin .rec-creativo .rec-play{display:none}
.rec-chip{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.7);color:#FFFFFF;font:700 12px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.02em}
.rec-chip b{font-variant-numeric:tabular-nums}
.rec-sonido{position:absolute;right:10px;bottom:10px;min-height:44px;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.65);color:#FFFFFF;font:600 13px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.rec-sonido:focus-visible{outline:3px solid var(--rec-barra);outline-offset:2px}
/* Multiplex: las 4 teselas llenan el alto reservado (antes quedaba un hueco vacío debajo) */
.ad-multi .ad-hueco{align-content:stretch;grid-template-rows:minmax(0,1fr) minmax(0,1fr) auto}
/* v5d · Etiqueta «Con video» (ámbar de marca) en todo botón o enlace que se abre con el video voluntario; «Abierto 12 h» (verde)
   cuando ya se vio. Va dentro del botón, sin subrayado, y no se corta. */
:root{--tv-fondo:#FEF3C7;--tv-texto:#92400E;--tv-borde:#F59E0B;--tva-fondo:#D1FAE5;--tva-texto:#065F46;--tva-borde:#10B981}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--tv-fondo:#451A03;--tv-texto:#FCD34D;--tv-borde:#B45309;--tva-fondo:#064E3B;--tva-texto:#A7F3D0;--tva-borde:#10B981} }
:root[data-theme="dark"]{--tv-fondo:#451A03;--tv-texto:#FCD34D;--tv-borde:#B45309;--tva-fondo:#064E3B;--tva-texto:#A7F3D0;--tva-borde:#10B981}
.tag-v{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px 2px 5px;border-radius:999px;border:1px solid var(--tv-borde);background:var(--tv-fondo);color:var(--tv-texto);font:700 1.15rem/1.3 var(--f-texto);letter-spacing:.01em;white-space:nowrap;text-decoration:none;vertical-align:middle;flex:none}
.tag-v svg{width:1.3rem;height:1.3rem;flex:none}
.tag-v.ab{border-color:var(--tva-borde);background:var(--tva-fondo);color:var(--tva-texto)}
.llevate .fila-b button{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;align-content:center;column-gap:8px;row-gap:6px;text-align:center}
.llevate .fila-b button .tag-v{grid-column:1 / -1;justify-self:center;margin:0}
/* v5f · «Compartir imagen» (antes «Compartir como imagen»): los tres botones caben en una línea y van más compactos */
.llevate .fila-b button{min-height:44px;padding:7px 12px;row-gap:4px;font-size:1.45rem;line-height:1.2}
.llevate .fila-b button .ic{width:16px;height:16px}
.llevate .fila-b button .tag-v{font-size:1.05rem;padding:1px 7px 1px 4px}
.llevate .fila-b button .tag-v svg{width:1.15rem;height:1.15rem}
/* v5g · En la hoja de «Mis favoritos» la inicial del juego conserva su círculo (la regla del nombre la estiraba) */
.mis-l li>span.mono{flex:none}
/* v5k · Nota sutil «agregar con video» debajo del botón de favoritos (chip y ficha): no cambia el tamaño del botón */
.fav-env{display:inline-flex;flex-direction:column;align-items:center;gap:3px;flex:none}
.nota-fav{display:inline-flex;align-items:center;gap:4px;font:600 1.15rem/1.2 var(--f-texto);color:var(--tv-texto);white-space:nowrap}
.nota-fav svg{width:1.25rem;height:1.25rem;flex:none}
.ctl-fila .chips{align-items:flex-start}
.acciones .fav-env>.b-sec{width:100%}
.acciones:has(.fav-env){align-items:flex-start}
/* v5h · Las ventanas (hojas) se abren como un recuadro completo: margen arriba y abajo, las cuatro esquinas a la vista y
   desplazamiento por dentro; nada queda cortado contra el borde de la pantalla. «Listo» queda fijo al pie de la hoja. */
.capa{justify-content:center;align-items:stretch;padding:max(12px,env(safe-area-inset-top,0px)) 12px max(12px,env(safe-area-inset-bottom,0px))}
.hoja{max-height:100%;margin:0 auto;border-radius:18px;padding-bottom:1.6rem;box-shadow:var(--sh-lg)}
.mq:not(.pant-tel) .capa{padding:32px 24px}
.hoja .hoja-pie{position:sticky;bottom:-1.6rem;z-index:2;margin:1.6rem 0 -1.6rem;padding:12px 0 1.6rem;background:var(--hoja);border-top:1px solid var(--linea-2);box-shadow:0 2.4rem 0 var(--hoja)}
.hoja .hoja-pie .b-prim{min-width:12rem}
/* v5e · Nota de «Modo Tabla»: solo en escritorio, pegada al selector */
.vs-nota{display:none}
@container pantalla (min-width: 1024px){ .vs-nota{display:flex;align-items:center;gap:6px;margin:0 auto 0 0;font:600 1.35rem/1.3 var(--f-texto);color:var(--caribe)} .vs-nota span{font-size:1.6rem} }

/* v5c · Pie compacto: una fila con marca, +18 y enlaces legales; juegos frecuentes en línea; aviso legal en letra pequeña */
.pie-c .wrap{padding-block:18px 12px}
.pie-sup{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding-bottom:12px;border-bottom:1px solid var(--pie-linea)}
.pie-sup .marca-pie{margin-right:4px;flex:none}
.pie-c .pie-18{margin:0}
.pie-c .pie-enl{display:flex;flex-wrap:wrap;gap:0 16px;margin-left:auto}
.pie-c .pie-enl .b-enl{min-height:36px;font-size:1.3rem}
.pie-jue{padding-block:10px 4px}
.pie-jue p{margin:0 0 4px;max-width:none;font-size:1.3rem;line-height:1.7;color:var(--pie-texto-2)}
.pie-jue b{color:#FFFFFF;font-weight:700}
.pie-jue a{color:var(--pie-texto-2);text-decoration:none;white-space:nowrap}
.pie-jue a:hover{color:#FFFFFF;text-decoration:underline}
.pie-c .pie-legal p{margin:0 0 4px;max-width:none;font-size:1.2rem;line-height:1.5}
.pie-c .pie-legal p.legal{font-size:1.25rem}
.pie-c .pie-baja{padding-top:8px;margin-top:8px;border-top:1px solid var(--pie-linea);font-size:1.2rem}
@container pantalla (max-width: 599px){
  .pie-c .pie-enl{margin-left:0;gap:0 14px}
  .pie-c .pie-enl .b-enl{min-height:40px}
  .pie-jue p{line-height:1.9}
  .pie-c .pie-baja{flex-direction:column;gap:2px}
}
/* v5c · En escritorio, el último bloque del riel acompaña el desplazamiento: el riel ya no se ve vacío junto a la columna */
@container pantalla (min-width: 1024px){ .lienzo>.col{align-self:stretch} .lienzo>.col>.pegado,.lienzo>.riel>.pegado{position:sticky;top:180px} }



/* Lo marcado «hidden» nunca se ve (el publicador de artefactos lo ponía; el portal lo trae propio) */
[hidden]{display:none!important}
body{margin:0}
/* Portal (Parte 28c): sin la barra de la maqueta, la dirección simulada, las notas ni las anotaciones de maqueta */
.mq-bar,.mq-url,.mq-notas,.mq-velo,.mq-anot,.zona-linea,.zona-tag,.mq-medidas{display:none!important}
.mq-escena{display:block!important;padding:0!important}
.mq-equipo{width:100%!important;max-width:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;margin:0!important;transform:none!important}
@media (min-width:900px){ .mq-equipo{height:100vh!important;height:100dvh!important;min-height:0!important} }
/* Parte 29: sin avisos todavía, ni sus botones; los datos por completar del responsable se ven resaltados para revisarlos */
.sin-avisos [data-accion="avisame"]{display:none!important}
.completar{background:#FEF3C7;color:#92400E;border-radius:4px;padding:0 4px;font-weight:700}
.final:empty{display:none}
/* Parte 29i · Tarjetas de Baloto y más: las balotas en una sola fila; se achican si la tarjeta es angosta */
.tj-nac .bn-fila{gap:6px 8px}
.tj-nac .bns{flex-wrap:nowrap}
.tj-nac .bn,.tj-nac .bn-g.c,.tj-nac .bn-cl{--b:max(30px, min(calc(28px + 1.6rem), calc((100cqi - 44px) / 6)))}
.tj-nac .bn{font-size:min(calc(8px + 1.4rem), calc(var(--b) * .5))}
.tj-nac .bn.sb{border-width:4px}
.tj-nac .bn-g.c .et{font-size:min(1.4rem, calc(var(--b) * .3))}
.tj-nac .bn-cl small{max-width:var(--b);overflow:hidden;font-size:min(1.4rem, calc(var(--b) * .34))}
/* Ficha del juego en un teléfono angosto: lo mismo (en pantallas anchas conserva sus balotas grandes) */
@container sl (max-width: 32rem){
  .tipo-nac .bns{flex-wrap:nowrap}
  .tipo-nac .bn,.tipo-nac .bn-g.c,.tipo-nac .bn-cl{--b:max(30px, min(calc(28px + 1.6rem), calc((100cqi - 44px) / 6)))}
  .tipo-nac .bn{font-size:min(calc(8px + 1.4rem), calc(var(--b) * .5))}
  .tipo-nac .bn.sb{border-width:4px}
  .tipo-nac .bn-g.c .et{font-size:min(1.4rem, calc(var(--b) * .3))}
  .tipo-nac .bn-cl small{max-width:var(--b);overflow:hidden;font-size:min(1.4rem, calc(var(--b) * .34))}
}
/* Parte 29h · Baloto y más que aún no juega: el anillo de la cuenta regresiva y, al lado, qué se sortea */
.tj-esp.tj-esp-nac{justify-content:flex-start;gap:10px}
.tj-que{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:1.4rem;line-height:1.25;color:var(--tinta-2)}
.tj-que b{font:700 1.6rem/1.2 var(--f-texto);color:var(--tinta)}
/* Tarjeta muy angosta (teléfono pequeño): sin el anillo (la cuenta regresiva ya va en la píldora de abajo), el texto usa todo el ancho */
@container tarjeta (max-width: 15rem){ .tj-esp.tj-esp-nac .anillo{display:none} }
/* Parte 29g · Ventana «Mi región»: filas enteras tocables, con un círculo que se marca en la elegida */
.region-l .fila-r{display:flex;align-items:center;gap:1rem;width:100%;min-height:56px;padding:6px 2px;border:0;background:none;text-align:left;color:var(--tinta);font:inherit;cursor:pointer}
.region-l .fila-r .mono{flex:none}
.region-l .fila-r-t{flex:1;min-width:0;display:flex;flex-direction:column}
.region-l .fila-r-t b{font-weight:600}
.region-l .fila-r-t small{color:var(--tinta-2);font-size:1.3rem}
.region-l .radio-r{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--linea);display:grid;place-items:center;margin-right:6px}
.region-l .fila-r[aria-pressed="true"]{color:var(--caribe)}
.region-l .fila-r[aria-pressed="true"] .radio-r{background:var(--caribe);border-color:var(--caribe);color:#fff}
.region-l .radio-r svg{width:16px;height:16px}
/* Parte 29f · Nombre del filtro en un bloque; la estrella de «Mis favoritos» cuelga a la izquierda (no cuenta para el centrado) */
.chip .chip-t{font-weight:inherit;text-align:center;min-width:0}
.chip .chip-t svg{display:inline-block;vertical-align:-0.2rem;width:1.4rem;height:1.4rem;margin:0 .4rem 0 -1.8rem}
.chip.chip-fav{padding-left:2.4rem}
/* Computador: cuadrícula de botones iguales con el número en globito; seis en fila si caben, si no 3 + 3 */
@container pantalla (min-width: 600px){
  .tit-card .ctl{container-type:inline-size;container-name:ctl}
}
@container ctl (min-width: 1px){
  .tit-card .ctl-fila{flex-wrap:wrap}
  .tit-card .ctl-fila .chips{display:grid;flex:1 1 100%;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px;padding-top:8px}
  .tit-card .ctl-fila .chips > *{min-width:0}
  .tit-card .ctl-fila .chip{position:relative;width:100%;justify-content:center;padding:0 8px;white-space:normal;line-height:1.15}
  .tit-card .ctl-fila .chip.chip-fav{padding-left:2.4rem}
  .tit-card .ctl-fila .chip span{position:absolute;top:-8px;right:-5px;min-width:2.2rem;padding:2px 6px;font-size:1.1rem;
    background:var(--caribe);color:#fff;box-shadow:0 0 0 2px var(--hoja)}
  .tit-card .ctl-fila .chip[aria-pressed="true"] span{background:#F59E0B;color:#111}
}
@container ctl (min-width: 72rem){
  .tit-card .ctl-fila .chips{grid-template-columns:repeat(6,minmax(0,1fr))}
}
/* Teléfono: el botón de favoritos guarda a su izquierda el espacio donde cuelga la estrella */
@container pantalla (max-width: 599px){
  .tit-card .ctl-fila .chip.chip-fav{padding-left:2.2rem;padding-right:4px}
}
/* Teléfono con letra muy grande (una columna, a la izquierda): la estrella vuelve a su lugar normal */
@container pantalla (max-width: 21rem){
  .tit-card .ctl-fila .chip.chip-fav{padding-left:12px}
  .tit-card .ctl-fila .chip .chip-t{text-align:left}
  .tit-card .ctl-fila .chip .chip-t svg{margin:0 .4rem 0 0}
}
/* Parte 29e · Filtros a la vista en el teléfono (A3): el recuadro del título es una cuadrícula; el selector de vista va
   junto al título y los filtros en botones iguales con el número en un globito */
@container pantalla (max-width: 599px){
  .tit-card:has(.ctl-fila .chips){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center}
  .tit-card:has(.ctl-fila .chips) > .hero{grid-column:1 / -1;grid-row:1;min-width:0}
  /* El selector se superpone arriba a la derecha; el título le deja su espacio y lo demás (ayuda, fecha) usa todo el ancho */
  .tit-card:has(.ctl-fila .chips) .h-pag{padding-right:10.6rem}
  .tit-card:has(.ctl-fila .chips) > .ctl,
  .tit-card:has(.ctl-fila .chips) .ctl-fila{display:contents}
  .tit-card:has(.ctl-fila .chips) .vista-sel{grid-column:2;grid-row:1;align-self:start;justify-self:end;z-index:1}
  .tit-card:has(.ctl-fila .chips) .vs-nota{display:none}
  .tit-card:has(.ctl-fila .chips) .filtro-nota{grid-column:1 / -1}
  .tit-card .ctl-fila .chips{grid-column:1 / -1;display:grid;gap:10px 8px;padding:8px 0 0;margin-top:2px;overflow:visible;
    -webkit-mask-image:none;mask-image:none;
    grid-template-columns:repeat(auto-fit,minmax(max(min(9.6rem,calc((100% - 8px) / 2)),calc((100% - 16px) / 3)),1fr))}
  .tit-card .ctl-fila .chips > *{min-width:0}
  .tit-card .ctl-fila .chip{position:relative;width:100%;min-height:44px;justify-content:center;padding:0 4px;
    font-size:1.35rem;white-space:normal;text-align:center;line-height:1.15}
  .tit-card .ctl-fila .chip span{position:absolute;top:-7px;right:-4px;min-width:2.2rem;padding:2px 6px;font-size:1.1rem;
    background:var(--caribe);color:#fff;box-shadow:0 0 0 2px var(--hoja)}
  .tit-card .ctl-fila .chip[aria-pressed="true"] span{background:#F59E0B;color:#111}
  /* La línea bajo el título pasa a ir sobre los filtros, a todo el ancho (con el selector al lado ya no llegaba al borde) */
  .tit-card:has(.ctl-fila .chips) > .hero{border-bottom:0;padding-bottom:0}
  .tit-card .ctl-fila .chips{border-top:1px solid var(--divisor);padding-top:14px;margin-top:10px}
  /* «Mis favoritos» con su estrella es el botón más ancho: estrella y espacio más chicos */
  .tit-card .ctl-fila .chip{gap:4px}
  .tit-card .ctl-fila .chip svg{flex:none}
}
/* Letra muy grande en un teléfono (p. ej. 200 %): una columna y el número dentro del botón, para que nada se tape */
@container pantalla (max-width: 21rem){
  .tit-card .ctl-fila .chips{grid-template-columns:1fr}
  .tit-card .ctl-fila .chip{justify-content:flex-start;padding:0 12px;text-align:left}
  .tit-card .ctl-fila .chip span{margin-left:auto}
  .tit-card .ctl-fila .chip span{position:static;box-shadow:none}
}

.legal-doc .otras-l{border-top:1px solid var(--linea-2);padding-top:1.2rem;margin-top:.8rem}
.legal-doc section ul ul{margin-top:.4rem}
.pie-legal a{color:inherit;text-decoration:underline}
.cargando{margin:0;padding:2.4rem 0;color:var(--tinta-2);font:500 1.6rem/1.45 var(--f-texto)}