/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* ============ RASKALE · tokens de diseño (idénticos al mockup) ============ */
:root{
  --is-light:0;
  --bg:#050505;--phone-bg:#070708;--panel:#0A0A0C;--txt:#EDEDED;
  --muted:rgba(237,237,237,.60);--faint:rgba(237,237,237,.34);--hair:rgba(255,255,255,.09);
  --glass:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  --glass-2:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  --stroke:rgba(255,255,255,.12);--stroke-hi:rgba(255,255,255,.22);--gloss:rgba(255,255,255,.12);
  --ok:#45DEC4;
  /* Amarillo de marca, extraído del logo. Es el color de lo accionable:
     botón principal, pestaña activa, avance, tus casillas.
     El texto encima va SIEMPRE oscuro: blanco sobre este amarillo da 1.69:1
     y es ilegible. Con #0A0A0A da 11.69:1. */
  --solid:#FFB926;--solid-txt:#0A0A0A;--solid-ink:#FFB926;
  --mio-bg:rgba(255,185,38,.14);
  --wash:rgba(255,255,255,.05);--wash-2:rgba(255,255,255,.03);--chip-bg:rgba(0,0,0,.35);
  --row-hover:rgba(255,255,255,.04);
  --blob1:#1B1B22;--blob2:#14141B;--blob3:#15151C;
  --phone-shadow:0 40px 100px rgba(0,0,0,.7);--card-shadow:0 8px 30px rgba(0,0,0,.35);
  --cell-grad:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 55%,rgba(255,255,255,.10));
  --cell-stroke:rgba(255,255,255,.18);
  --cell-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 10px rgba(0,0,0,.3);
  --cell-shadow-sm:inset 0 1px 0 rgba(255,255,255,.25),0 1px 4px rgba(0,0,0,.28);
  --sheet-bg:linear-gradient(170deg,rgba(24,24,28,.92),rgba(12,12,14,.94));
  --toast-bg:rgba(18,18,21,.85);
  --stage-bg:radial-gradient(circle at 50% 40%,#1C1C22,#0A0A0C 75%);
  --num-glow:0 0 44px rgba(255,255,255,.4);
  --overlay:rgba(0,0,0,.6);--focus:rgba(255,185,38,.75);
  --art-1:radial-gradient(120% 160% at 80% 0%,#26262E 0%,#101014 60%);
  --art-2:radial-gradient(120% 160% at 20% 0%,#20242A 0%,#0F1114 60%);
  --art-3:radial-gradient(120% 160% at 60% 100%,#24221C 0%,#111110 60%);
  --bar:#EDEDED;--grid-line:#2C2C2A;--ok-txt:#0CA30C;
  --s-good:#0CA30C;--s-warn:#FAB219;--s-serious:#EC835A;--s-crit:#D03B3B;--s-info:#5AA9E0;
  font-size:16px;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --is-light:1;
    --bg:#FAFAFA;--phone-bg:#FFFFFF;--panel:#FFFFFF;--txt:#171717;
    --muted:rgba(23,23,23,.58);--faint:rgba(23,23,23,.34);--hair:rgba(0,0,0,.07);
    --glass:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.42));
    --glass-2:linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.4));
    --stroke:rgba(0,0,0,.10);--stroke-hi:rgba(0,0,0,.18);--gloss:rgba(255,255,255,.85);
    --ok:#0CA678;--solid:#FFB926;--solid-txt:#0A0A0A;--solid-ink:#A87200;
    --wash:rgba(0,0,0,.045);--wash-2:rgba(0,0,0,.03);--chip-bg:rgba(255,255,255,.65);
    --row-hover:rgba(0,0,0,.028);
    --blob1:#E7E7EE;--blob2:#EFEFF4;--blob3:#EAEAF0;
    --phone-shadow:0 30px 80px rgba(0,0,0,.16);--card-shadow:0 8px 26px rgba(0,0,0,.06);
    --cell-grad:linear-gradient(160deg,rgba(255,255,255,.95),rgba(240,240,245,.75));
    --cell-stroke:rgba(0,0,0,.12);
    --cell-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 10px rgba(0,0,0,.08);
    --cell-shadow-sm:inset 0 1px 0 rgba(255,255,255,.9),0 1px 4px rgba(0,0,0,.07);
    --mio-bg:rgba(255,185,38,.12);
    --sheet-bg:linear-gradient(170deg,rgba(252,252,253,.94),rgba(244,244,247,.96));
    --toast-bg:rgba(255,255,255,.88);
    --stage-bg:radial-gradient(circle at 50% 40%,#F0F0F4,#DFDFE6 75%);
    --num-glow:0 1px 0 rgba(255,255,255,.8);
    --overlay:rgba(0,0,0,.28);--focus:rgba(204,138,0,.85);
    --art-1:radial-gradient(120% 160% at 80% 0%,#EDEDF3 0%,#DCDCE4 60%);
    --art-2:radial-gradient(120% 160% at 20% 0%,#E8EEF0 0%,#D8E0E3 60%);
    --art-3:radial-gradient(120% 160% at 60% 100%,#F0EDE4 0%,#E2DFD4 60%);
    --bar:#171717;--grid-line:#E1E0D9;--ok-txt:#006300;
  }
}
:root[data-theme="light"]{
  --is-light:1;
  --bg:#FAFAFA;--phone-bg:#FFFFFF;--panel:#FFFFFF;--txt:#171717;
  --muted:rgba(23,23,23,.58);--faint:rgba(23,23,23,.34);--hair:rgba(0,0,0,.07);
  --glass:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.42));
  --glass-2:linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.4));
  --stroke:rgba(0,0,0,.10);--stroke-hi:rgba(0,0,0,.18);--gloss:rgba(255,255,255,.85);
  --ok:#0CA678;--solid:#FFB926;--solid-txt:#0A0A0A;--solid-ink:#A87200;
  --wash:rgba(0,0,0,.045);--wash-2:rgba(0,0,0,.03);--chip-bg:rgba(255,255,255,.65);
  --row-hover:rgba(0,0,0,.028);
  --blob1:#E7E7EE;--blob2:#EFEFF4;--blob3:#EAEAF0;
  --phone-shadow:0 30px 80px rgba(0,0,0,.16);--card-shadow:0 8px 26px rgba(0,0,0,.06);
  --cell-grad:linear-gradient(160deg,rgba(255,255,255,.95),rgba(240,240,245,.75));
  --cell-stroke:rgba(0,0,0,.12);
  --cell-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 10px rgba(0,0,0,.08);
  --mio-bg:rgba(255,185,38,.12);
  --sheet-bg:linear-gradient(170deg,rgba(252,252,253,.94),rgba(244,244,247,.96));
  --toast-bg:rgba(255,255,255,.88);
  --stage-bg:radial-gradient(circle at 50% 40%,#F0F0F4,#DFDFE6 75%);
  --num-glow:0 1px 0 rgba(255,255,255,.8);
  --overlay:rgba(0,0,0,.28);--focus:rgba(204,138,0,.85);
  --art-1:radial-gradient(120% 160% at 80% 0%,#EDEDF3 0%,#DCDCE4 60%);
  --art-2:radial-gradient(120% 160% at 20% 0%,#E8EEF0 0%,#D8E0E3 60%);
  --art-3:radial-gradient(120% 160% at 60% 100%,#F0EDE4 0%,#E2DFD4 60%);
  --bar:#171717;--grid-line:#E1E0D9;--ok-txt:#006300;
}
:root[data-theme="dark"]{ --is-light:0; }

*{box-sizing:border-box;margin:0;padding:0}
/* Sin el recuadro gris que Chrome en Android pinta al tocar un enlace. Aparece
   unas milésimas y no aporta nada: la app ya responde al pulsar con la escala
   de :active, que es una respuesta que se controla y que no depende de un color
   del sistema encima del diseño. Va en html porque se hereda. */
html{-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg)}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  color:var(--txt);-webkit-font-smoothing:antialiased;
  transition:background .25s,color .25s;
  /* `dvh` y no `vh`. En el Safari del iPhone, 100vh mide el viewport GRANDE
     —el de la barra de direcciones escondida—, así que con la barra a la vista
     el documento queda más alto que la pantalla y se puede desplazar sin tener
     contenido que desplazar. En el portal eso saca la cabecera por arriba y
     enseña el fondo del body por debajo de la carcasa: es el recuadro negro
     que aparecía detrás del menú. `dvh` mide lo que de verdad se ve. */
  min-height:100vh;         /* respaldo para quien no entienda dvh */
  min-height:100dvh;
}

/* Aquí HUBO un `body:has(.app){overflow:hidden;overscroll-behavior:none}` y
   duró un día. Sobraba —con la altura en dvh el documento ya mide lo que la
   pantalla y no hay nada que desplazar— y en el Safari del iPhone dejaba
   muerto el desplazamiento de dentro: la lista de sorteos no bajaba y los
   finalizados quedaban debajo del menú, sin manera de llegar a ellos. El
   recuadro negro lo arregla el dvh de arriba; esto no hacía falta. */
/* color:inherit además de la tipografía. Sin esto, un <button> que no fije su
   propio color cae en el «buttontext» del navegador, que ignora el tema: el
   texto quedaba negro sobre fondo oscuro según el motor. */
button{font-family:inherit;color:inherit}
a{color:inherit;text-decoration:none}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
svg.ic{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;filter:blur(80px);opacity:.5;pointer-events:none}
.aurora i{position:absolute;border-radius:50%}
.aurora i:nth-child(1){width:50vw;height:50vw;left:-14vw;top:-12vw;background:var(--blob1);animation:dr1 30s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:40vw;height:40vw;right:-10vw;bottom:-8vw;background:var(--blob2);animation:dr2 34s ease-in-out infinite alternate}
@keyframes dr1{to{transform:translate(10vw,8vh) scale(1.15)}}
@keyframes dr2{to{transform:translate(-8vw,-8vh) scale(1.1)}}
@media (prefers-reduced-motion:reduce){
  .aurora i{animation:none !important}
  .sheet,.drawer{animation:none !important}
}

.glass{
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--stroke);
  box-shadow:inset 0 1px 0 var(--gloss),var(--card-shadow);
}
.h1{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.h2{font-size:1rem;font-weight:700;letter-spacing:-.01em}
.eyebrow{font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.sub{font-size:.76rem;color:var(--muted)}
.fine{font-size:.7rem;color:var(--faint);line-height:1.55}
.card{border-radius:20px}

.toast-zone{position:fixed;top:18px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:90;pointer-events:none}
.toast{
  color:var(--txt);border-radius:999px;padding:9px 16px;font-size:.74rem;font-weight:500;
  background:var(--toast-bg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--stroke);
  box-shadow:inset 0 1px 0 var(--gloss),0 10px 28px rgba(0,0,0,.25);
  animation:tin .25s ease,tout .3s ease 3.4s forwards;
  display:flex;gap:8px;align-items:center;max-width:92%;text-align:center;
}
.toast .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0}
@keyframes tin{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
@keyframes tout{to{opacity:0;transform:translateY(-6px)}}

button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ============ la marca ============
   Al ir como fondo, el navegador solo descarga el archivo que gana la
   cascada; con dos <img> y display:none bajaría los dos. */
.marca{
  display:block;flex-shrink:0;
  background:url(/brand/logo-dark.png) center/contain no-repeat;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .marca{background-image:url(/brand/logo-light.png)}
}
:root[data-theme="light"] .marca{background-image:url(/brand/logo-light.png)}
:root[data-theme="dark"]  .marca{background-image:url(/brand/logo-dark.png)}

/* ───────── distintivo de edición ─────────
   Lo usan el portal y el panel, así que vive en globals y no en la hoja de
   uno de los dos. Dos piezas: el número en ámbar sólido —el dato nuevo, el que
   se busca— y el nombre en el mismo ámbar pero sobre fondo suave, para que
   acompañe sin competir con el título del sorteo. */
.ed-chip{
  display:inline-flex;align-items:center;gap:0;flex-shrink:0;
  border-radius:999px;overflow:hidden;text-decoration:none;
  border:1px solid color-mix(in oklab,var(--solid) 45%,transparent);
  background:var(--mio-bg);
  font-size:.7rem;font-weight:700;line-height:1;
}
.ed-chip b{
  background:var(--solid);color:var(--solid-txt);
  padding:5px 8px;font-weight:800;letter-spacing:-.02em;
}
.ed-chip > span{padding:5px 10px 5px 8px;color:var(--solid-ink)}
/* El tamaño grande es para la cabecera del sorteo, donde va solo. */
.ed-chip.lg{font-size:.82rem}
.ed-chip.lg b{padding:7px 10px}
.ed-chip.lg > span{padding:7px 13px 7px 10px}
/* Solo cuando es enlace: sin esto, un chip informativo parecería pulsable. */
a.ed-chip:active{transform:scale(.97)}

/*!************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/portal.css ***!
  \************************************************************************************************************************************************************************************************************************************************************/
/* ============ RASKALE · portal (móvil-first, mismo diseño del mockup) ============ */
/* Carcasa de app: alto fijo del viewport y sin scroll propio. Lo único que se
   desplaza es el cuerpo de cada pantalla, así la cabecera y la barra inferior
   se quedan quietas como en una app nativa. */
.app{
  /* Compartido por los dos elementos que flotan sobre el contenido: el menú y
     el botón de soporte. Estos son los valores del modo oscuro; más abajo se
     redefinen para el claro. */
  --tab-bg:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
  --tab-line:rgba(255,255,255,.14);
  --tab-sombra:0 8px 30px rgba(0,0,0,.5);
  --tab-off:rgba(237,237,237,.62);
  /* El verde de WhatsApp, el único color de marca ajena que entra en el
     portal. En claro va más apagado: el #25D366 sobre blanco vibra. */
  --wa-verde:#25D366;

  position:relative;max-width:480px;margin:0 auto;
  height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--phone-bg);
  border-left:1px solid var(--stroke);border-right:1px solid var(--stroke);
}
@media (max-width:520px){.app{border:none}}
.app-aurora{position:absolute;inset:0;z-index:0;filter:blur(56px);opacity:.55;pointer-events:none;overflow:hidden}
.app-aurora i{position:absolute;border-radius:50%}
.app-aurora i:nth-child(1){width:300px;height:300px;left:-110px;top:-80px;background:var(--blob1);animation:pa1 22s ease-in-out infinite alternate}
.app-aurora i:nth-child(2){width:260px;height:260px;right:-90px;top:200px;background:var(--blob2);animation:pa2 26s ease-in-out infinite alternate}
.app-aurora i:nth-child(3){width:280px;height:280px;left:30px;bottom:-110px;background:var(--blob3);animation:pa3 24s ease-in-out infinite alternate}
@keyframes pa1{to{transform:translate(60px,50px) scale(1.2)}}
@keyframes pa2{to{transform:translate(-50px,-40px) scale(1.15)}}
@keyframes pa3{to{transform:translate(40px,-60px) scale(1.1)}}
@media (prefers-reduced-motion:reduce){.app-aurora i{animation:none !important}}

/* min-height:0 es lo que permite que el hijo con overflow pueda encoger:
   sin él, el cuerpo crecería y volvería a scrollear la página entera. */
.screen{flex:1 1;min-height:0;display:flex;flex-direction:column;position:relative;z-index:1}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-shrink:0;position:relative;z-index:2;
  padding:calc(18px + env(safe-area-inset-top)) 20px 12px;
  background:var(--phone-bg);border-bottom:1px solid var(--hair);
}
/* ───────── saldo en la cabecera ─────────
   El punto verde de antes parecía un indicador de estado y la cifra iba sola,
   sin decir de qué era. Ahora: icono de billetera, etiqueta y monto. */
.saldo-pill{
  display:flex;align-items:center;gap:9px;cursor:pointer;color:var(--txt);
  border-radius:14px;padding:6px 12px 6px 7px;
  background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--stroke);box-shadow:inset 0 1px 0 var(--gloss);
  transition:border-color .14s,transform .1s;
}
.saldo-pill:hover{border-color:var(--stroke-hi)}
.saldo-pill:active{transform:scale(.97)}
.saldo-pill .ic{
  width:28px;height:28px;border-radius:9px;flex-shrink:0;color:var(--txt);
  display:flex;align-items:center;justify-content:center;
  background:var(--wash);border:1px solid var(--stroke);
}
.saldo-pill .ic svg.ic{width:.88rem;height:.88rem}
.saldo-pill .txt{display:flex;flex-direction:column;gap:0;line-height:1.15}
.saldo-pill .et{
  font-size:.55rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);
}
.saldo-pill .txt b{font-size:.84rem;font-weight:700;letter-spacing:-.01em}
/* sin sesión es solo una llamada a la acción, sin cifra que enmarcar */
.saldo-pill.nueva{
  padding:8px 14px;border-radius:999px;font-size:.78rem;font-weight:600;
  gap:6px;
}
.saldo-pill.nueva svg.ic{width:.85rem;height:.85rem;color:var(--muted)}
/* Mismo material que el saldo del otro extremo de la cabecera: caja de icono,
   cristal y borde. Antes era texto suelto con un «‹» y quedaba a medio hacer
   al lado de un control con cuerpo. */
.back{
  display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--txt);
  border-radius:14px;padding:6px 12px 6px 7px;
  background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--stroke);box-shadow:inset 0 1px 0 var(--gloss);
  font-size:.8rem;font-weight:600;
  transition:border-color .14s,transform .1s;
}
.back:hover{border-color:var(--stroke-hi)}
.back:active{transform:scale(.97)}
.back .ic{
  width:28px;height:28px;border-radius:9px;flex-shrink:0;color:var(--txt);
  display:flex;align-items:center;justify-content:center;
  background:var(--wash);border:1px solid var(--stroke);
}
.back .ic svg.ic{width:.88rem;height:.88rem}

/* La barra flota sobre contenido que no controla —tarjetas claras, fotos de
   portada, el fondo de la página—, así que no puede fiarse de la transparencia
   ni heredar el cristal de las tarjetas. Superficie, borde y sombra propios,
   definidos por tema en las variables de abajo.

   Los valores base son los del modo oscuro. */
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);z-index:40;
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex;border-radius:999px;padding:5px;gap:2px;background:var(--tab-bg);
  backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);
  border:1px solid var(--tab-line);
  box-shadow:inset 0 1px 0 var(--gloss),var(--tab-sombra);
}
/* En claro el cristal era blanco translúcido sobre fondo blanco: la barra
   desaparecía. Casi opaca, borde más marcado y sombra en dos capas, que es lo
   que de verdad despega un elemento flotante de un fondo claro. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .app{
    --tab-bg:linear-gradient(160deg,rgba(255,255,255,.97),rgba(249,249,251,.94));
    --tab-line:rgba(0,0,0,.14);
    --tab-sombra:0 6px 18px rgba(0,0,0,.13),0 2px 6px rgba(0,0,0,.08);
    --tab-off:rgba(23,23,23,.66);
    --wa-verde:#1FA855;
  }
}
:root[data-theme="light"] .app{
  --tab-bg:linear-gradient(160deg,rgba(255,255,255,.97),rgba(249,249,251,.94));
  --tab-line:rgba(0,0,0,.14);
  --tab-sombra:0 6px 18px rgba(0,0,0,.13),0 2px 6px rgba(0,0,0,.08);
  --tab-off:rgba(23,23,23,.66);
  --wa-verde:#1FA855;
}
:root[data-theme="dark"] .app{
  --tab-bg:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
  --tab-line:rgba(255,255,255,.14);
  --tab-sombra:0 8px 30px rgba(0,0,0,.5);
  --tab-off:rgba(237,237,237,.62);
  --wa-verde:#25D366;
}
/* Icono y etiqueta apilados, visibles en las tres. Antes la etiqueta solo
   salía en la activa y la barra cambiaba de ancho al navegar —174px con
   «Sorteos», 160 con «Saldo»—, así que saltaba y se re-centraba en cada
   cambio. Con ancho fijo por pestaña, la barra mide siempre 260px. */
.tabbar a{
  background:none;border:none;color:var(--tab-off);font-size:.66rem;font-weight:500;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  /* 74px y no 82: con cuatro pestañas la barra medía 344px y se salía de una
     pantalla de 320. Así mide 312 y sigue cabiendo. */
  cursor:pointer;width:74px;padding:9px 4px;border-radius:999px;line-height:1;
}
.tabbar a svg.ic{width:1.05rem;height:1.05rem}
.tabbar a.on{color:var(--solid-txt);background:var(--solid);font-weight:600;box-shadow:0 2px 10px rgba(0,0,0,.25)}
/* Al quitar el resaltado del sistema hay que devolver la respuesta al toque por
   nuestra cuenta, o la app se siente muerta. Un encogido corto basta y es lo
   mismo que ya hacen los botones y las casillas. */
.tabbar a:active{transform:scale(.92)}

.app .btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:var(--solid);color:var(--solid-txt);border:none;border-radius:12px;
  padding:14px;font-size:.92rem;font-weight:600;cursor:pointer;
}
.app .btn:hover{opacity:.9}
.app .btn.ghost{background:var(--wash);color:var(--txt);border:1px solid var(--stroke);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.app .btn.sm{padding:10px;font-size:.82rem;border-radius:10px}
/* solo icono: los .btn del portal son de ancho completo, este no debe estirarse */
.app .btn.ico{width:34px;height:34px;padding:0;flex-shrink:0;border-radius:10px}
.app .btn.ico svg.ic{width:1rem;height:1rem}
.app .btn:disabled{opacity:.4;cursor:default}

/* ───────── estado del sorteo ─────────
   Color sólido por estado: se lee de un vistazo sin buscar el punto.

   Los colores NO salen de los tokens del tema. La insignia cae sobre una foto
   que sube el cliente, así que con --muted sobre --chip-bg el contraste caía a
   2,97:1 sobre una portada gris. Aquí van fijos y medidos contra su propio
   fondo, que es lo único que se conoce de antemano.

   El ámbar tampoco es --s-warn: ese tono está a 0,2° del amarillo de marca, y
   un sorteo «programado» se habría confundido con uno en promoción. Este está
   23° más hacia el naranja. */
/* ───────── insignia de estado del sorteo ─────────
   Un solo fondo para los siete estados —el cristal del resto del portal— y el
   color reducido a un punto de 6 px. Antes los estados con color eran bloques
   opacos con el desenfoque apagado a propósito, y eran lo único así en toda la
   app: el verde #097A09 ni siquiera estaba en la paleta. Además «Disponible»,
   que es el estado normal de casi todos los sorteos, se llevaba la mancha de
   color más fuerte de la pantalla.

   El 76% de negro no es un capricho. La insignia va sobre la portada, y el peor
   caso es una foto blanca: ahí el cristal al 62% de antes queda en rgb(97,97,97)
   y ningún punto llega al 3:1 que necesita un elemento gráfico —el verde se
   quedaba en 2,7 y el rojo en 2,1—. Al 76% los cuatro pasan, y el texto blanco
   sube a 10,8:1. */
.chip{
  /* Neutro: agotado y finalizado no son buenas ni malas noticias. */
  --pt:rgba(255,255,255,.62);
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;
  font-size:.64rem;font-weight:700;letter-spacing:.08em;white-space:nowrap;
  color:#fff;border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.chip::before{
  content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--pt);
}
/* Los puntos van más vivos que los tokens semánticos: --s-good (#0CA30C) y
   --s-crit (#D03B3B) están calibrados para texto, y en 6 px sobre cristal se
   apagan. Medidos sobre portada blanca: 4,8:1 y 3,6:1. */
.chip.ok{--pt:#3BC46B}
.chip.warn{--pt:var(--s-warn)}
.chip.crit{--pt:#F06A6A}
/* Solo en «Mis casillas»: que ganaste no es un estado del sorteo, es tuyo. */
.chip.gan{--pt:var(--solid)}
.badge{
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 9px;
  font-size:.63rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--stroke);background:var(--wash);color:var(--muted);
}
.badge.promo{background:var(--solid);color:var(--solid-txt);border-color:transparent}

/* ───────── cabecera única ─────────
   Marca siempre a la izquierda; a la derecha, lo que aporte cada pantalla
   (saldo, insignia) o nada. Una sola fila: dos costarían alto en todas las
   pantallas, y el portal se rehízo justo para quitar desplazamiento. */
/* La marca de la cabecera lleva al inicio. El relleno vertical le da altura
   de toque sin mover el logotipo ni cambiar el alto de la barra. */
.marca-lnk{
  display:flex;align-items:center;flex-shrink:0;
  padding:6px 4px;margin:-6px -4px;border-radius:8px;cursor:pointer;
  transition:opacity .12s,transform .1s;
}
.marca-lnk:hover{opacity:.82}
.marca-lnk:active{transform:scale(.96)}
.marca-lnk:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Volver, superpuesto a la portada. Compartía esquina con la marca y la
   desplazaba solo en las pantallas que lo llevan; fuera de la cabecera, la
   marca queda pegada al borde en las seis.

   Fondo propio: cae sobre una foto cualquiera, así que no puede fiarse del
   tema ni del contraste de la imagen. */
.back-flota{
  position:absolute;top:12px;left:12px;z-index:3;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.26);color:#fff;
  transition:background .14s,transform .1s;
}
.back-flota:hover{background:rgba(0,0,0,.66)}
.back-flota:active{transform:scale(.94)}
.back-flota svg.ic{width:1rem;height:1rem}

/* Sin portada donde posarse, aquí va como enlace sobre el título. */
/* Volver, pegado al título en la misma fila. Toma prestado el material de
   .mov-ic —el recuadro de icono que ya usan las filas de esta página— para que
   no parezca una pieza traída de otro sitio. */
.page-h-row{display:flex;align-items:center;gap:11px;flex-shrink:0}
.page-h-row .page-h{padding-top:0}
.volver-btn{
  width:36px;height:36px;border-radius:11px;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);background:var(--wash);border:1px solid var(--stroke);
  transition:border-color .12s,color .12s,transform .1s;
}
.volver-btn:hover{color:var(--txt);border-color:var(--stroke-hi)}
.volver-btn:active{transform:scale(.94)}
.volver-btn svg.ic{width:.95rem;height:.95rem}

/* El título dejó la cabecera y encabeza el cuerpo, donde cabe más grande.
   flex-shrink:0 porque el cuerpo es una columna flexible y si no se aplasta. */
.page-h{
  font-size:1.45rem;font-weight:700;letter-spacing:-.025em;
  flex-shrink:0;padding-top:2px;
}

/* La identidad del perfil. Era la única pieza de la página sin material:
   flotaba sobre el fondo mientras todo lo demás iba en tarjeta. */
.perf-id{padding:0;flex-shrink:0;overflow:hidden}
.pid-top{display:flex;align-items:center;gap:13px;padding:15px 16px}
.perf-id .avatar{
  width:52px;height:52px;font-size:1.05rem;
  background:var(--solid);color:var(--solid-txt);border:none;
  box-shadow:0 2px 12px rgba(0,0,0,.28);
}
.perf-id .nm{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:3px}
.perf-id .nm b{
  font-size:1.05rem;font-weight:700;letter-spacing:-.02em;line-height:1.25;
  /* Dos líneas antes de recortar: «Juan Carlos Camacho Flores» no cabe en una
     sola y cortarlo con puntos suspensivos se lee peor que partirlo. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* El :not(.badge) es imprescindible: esta regla es de tres clases y la de la
   insignia de dos, así que sin excluirla le imponía el color tenue del correo
   sobre el amarillo, y su recorte con puntos suspensivos. */
.perf-id .nm > span:not(.badge){
  font-size:.76rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Y al ser hija de una columna flex se estiraba a todo el ancho: en una
   columna, align-items vale stretch por defecto. */
.perf-id .nm .badge{align-self:flex-start;margin-top:6px;flex-shrink:0}
/* Pie con los datos que ya se piden al registrarse. Sobre el fondo tenue se
   separa del bloque de arriba sin necesidad de otra tarjeta. */
.pid-facts{
  display:flex;flex-wrap:wrap;gap:5px 14px;
  padding:10px 16px;border-top:1px solid var(--hair);background:var(--wash-2);
}
.pid-facts > span{
  display:inline-flex;align-items:center;gap:6px;min-width:0;
  font-size:.72rem;color:var(--muted);
}
.pid-facts > span > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pid-facts svg.ic{width:.8rem;height:.8rem;color:var(--faint);flex-shrink:0}

/* home */
/* 18 por los cuatro lados: con 6 arriba y 18 a los lados, el hueco entre la
   cabecera y la primera tarjeta era un tercio del de los costados. */
.home-body{padding:18px 18px 24px;display:flex;flex-direction:column;gap:12px}
.sorteo-card{overflow:hidden;cursor:pointer;padding:0;display:block}
/* Aspecto 1:1: las portadas se suben cuadradas y una caja más baja las
   recortaba por arriba y por abajo. */
.sorteo-card .art{
  aspect-ratio:1;position:relative;display:flex;align-items:flex-end;
  padding:12px;border-bottom:1px solid var(--hair);
}
.art-iphone{background:var(--art-1)}
.art-moto{background:var(--art-2)}
.art-cash{background:var(--art-3)}
.art::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,var(--gloss) 0%,transparent 30%);opacity:.5;pointer-events:none}
.art.foto{background-size:cover;background-position:center}
.art.foto::after{background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,transparent 45%,rgba(0,0,0,.28) 100%);opacity:1}
.art .glyph{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--faint)}
.art .glyph svg{width:44px;height:44px;stroke-width:1.1}
.art .chip{position:absolute;top:12px;left:12px;z-index:1}

/* Portada de un sorteo entregado: sin color.
   El filtro va en un ::before que solo actúa sobre lo que hay detrás —el fondo
   de la portada—, no en la propia .art. Si se aplicara al elemento arrastraría
   también a sus hijos, y el chip GANASTE, que es lo más importante que puede
   aparecer aquí, perdería el ámbar de marca. El chip lleva z-index:1, así que
   se pinta por encima de esta capa y conserva su color. */
.art.gris::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  backdrop-filter:grayscale(1);
  -webkit-backdrop-filter:grayscale(1);
}
.sorteo-card .meta{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sorteo-card .titulo{font-weight:600;font-size:.95rem;letter-spacing:-.01em}
.prog{height:4px;border-radius:99px;background:var(--wash);overflow:hidden;position:relative}
.prog i{display:block;height:100%;border-radius:99px;background:var(--solid)}
.prog .mark{position:absolute;top:-3px;width:1.5px;height:10px;background:var(--faint);border-radius:2px}
.link-go{font-weight:600;font-size:.76rem;color:var(--txt);display:inline-flex;align-items:center;gap:3px}
.pre-line{
  display:flex;align-items:center;gap:7px;font-size:.74rem;color:var(--txt);
  background:var(--wash);border:1px solid var(--stroke);border-radius:10px;padding:8px 10px;
}
.pre-line svg.ic{width:.95rem;height:.95rem}
.pre-line b{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-weight:600}

/* detalle */
/* Sin margen propio: la portada vive dentro de .det-body, que ya separa 18 px
   de los bordes. Con los suyos encima quedaba a 36 y salía más estrecha que
   las tarjetas de debajo, que es lo que se veía descuadrado. El 1:1 lo sigue
   marcando aspect-ratio, así que al ensancharse crece también de alto. */
.hero{
  border-radius:22px;aspect-ratio:1;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;padding:14px;flex-shrink:0;
  border:1px solid var(--stroke);box-shadow:inset 0 1px 0 var(--gloss);
}
.hero .chip{position:absolute;top:12px;right:12px}
.hero .glyph{position:absolute;right:22px;top:50%;transform:translateY(-50%);color:var(--faint)}
.hero .glyph svg{width:52px;height:52px;stroke-width:1}
/* carrusel de imágenes del sorteo */
.carousel{position:relative;border-radius:22px;overflow:hidden;
  border:1px solid var(--stroke);box-shadow:inset 0 1px 0 var(--gloss)}
/* Sorteo que ya pasó: la portada sin color, igual que en la lista. Va en un
   ::after con backdrop-filter y no en el propio .carousel, por lo mismo que en
   .art.gris — un filtro sobre el elemento arrastraría a sus hijos y el chip de
   estado perdería su color. Debajo del chip (z-index 2) y sin capturar toques,
   para no romper el visor al pulsar la foto. */
.carousel.gris::after,
/* Y también cuando el sorteo no tenía foto: la ilustración del tema se apaga
   igual, para que un resultado sin portada no destaque más que uno con ella. */
.hero.gris::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  backdrop-filter:grayscale(1);-webkit-backdrop-filter:grayscale(1);
}
.carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1;position:relative;background:var(--wash-2)}
.carousel-slide img{width:100%;height:100%;object-fit:cover;display:block}
/* La diapositiva es un botón cuando hay galería: la foto ocupa el botón
   entero, sin borde ni relleno, para que no se note que lo es más allá del
   cursor. */
.cs-abrir{display:block;width:100%;height:100%;padding:0;border:none;background:none;cursor:zoom-in}
.cs-abrir img{width:100%;height:100%;object-fit:cover;display:block}
/* Solo coloca. El color lo pone .chip según el estado; darle fondo aquí lo
   pisaba, porque «.carousel .chip» tiene más especificidad que «.chip.ok». */
.carousel .chip{position:absolute;top:12px;right:12px;z-index:2}
.carousel .dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:2}
.carousel .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .15s,width .15s}
.carousel .dots i.on{background:#fff;width:16px;border-radius:99px}
.carousel .shade{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,transparent 40%,rgba(0,0,0,.22) 100%)}

.det-body{padding:16px 18px 28px;display:flex;flex-direction:column;gap:18px}
.det-head{display:flex;flex-direction:column;gap:8px}
/* Compartir el sorteo: un enlace, no un botón. Es una acción secundaria —lo
   principal aquí es rascar— y con relleno competiría con el de comprar. */
.compartir-lnk{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  padding:0;border:none;background:none;cursor:pointer;
  font-size:.74rem;font-weight:600;color:var(--solid-ink);
}
.compartir-lnk:hover{text-decoration:underline;text-underline-offset:2px}
.compartir-lnk svg.ic{width:.85rem;height:.85rem}

/* ───────── trazo de marca bajo el título del sorteo ─────────
   Solo en la pantalla donde se rascan los números. El recuadro reserva los
   11px de abajo para que el trazo no se monte sobre la descripción.

   Se pinta de izquierda a derecha con clip-path en vez de stroke-dashoffset:
   la forma es un relleno de grosor variable, no un trazo de ancho constante,
   así que no hay línea que recortar.

   El recorte va en el <svg>, no en el <path>: en un elemento SVG los
   porcentajes de inset() se resuelven contra la caja de relleno, que no está
   igual de definida en todos los navegadores. El <svg> sí tiene caja CSS. */
.t-trazo{position:relative;display:inline-block;padding-bottom:11px}
.t-trazo svg{
  position:absolute;left:0;bottom:0;width:100%;height:13px;
  color:var(--solid);
  -webkit-clip-path:inset(0 100% 0 0);
          clip-path:inset(0 100% 0 0);
  animation:trazo-marca .62s cubic-bezier(.22,.61,.36,1) .12s forwards;
}
.t-trazo path{fill:currentColor}
@keyframes trazo-marca{to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion: reduce){
  .t-trazo svg{animation:none;-webkit-clip-path:none;clip-path:none}
}
.stat-row{display:flex;gap:8px}
.stat{
  flex:1 1;border-radius:14px;padding:11px 13px;display:flex;flex-direction:column;gap:2px;
  background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--stroke);box-shadow:inset 0 1px 0 var(--gloss);
}
.stat b{font-size:1rem;font-weight:700}
.stat span{font-size:.6rem;color:var(--faint);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.desc{font-size:.85rem;line-height:1.6;color:var(--muted)}

.fecha-box{
  border-radius:16px;border:1px solid var(--stroke);background:var(--glass);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 var(--gloss);overflow:hidden;
}
.fecha-box.alerta{border-color:var(--stroke-hi)}
.fecha-head{display:flex;align-items:center;gap:10px;padding:12px 14px}
.fecha-head svg.ic{color:var(--txt)}
.fecha-head .t{display:flex;flex-direction:column;gap:2px;flex:1 1;min-width:0}
.fecha-head .t b{font-size:.81rem;font-weight:600}
.fecha-head .t span{font-size:.69rem;color:var(--faint);line-height:1.4}
.cd{display:grid;grid-template-columns:repeat(var(--n,4),1fr);grid-gap:1px;gap:1px;background:var(--hair);border-top:1px solid var(--hair)}
.cd .u{background:var(--wash-2);padding:10px 4px 9px;display:flex;flex-direction:column;align-items:center;gap:2px}
.cd .u b{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;
  font-size:1.25rem;font-weight:700;letter-spacing:-.02em;line-height:1;
}
.cd .u span{font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:600}

/* Cuenta atrás cumplida: ocupa la misma franja que las cuatro casillas —mismo
   borde superior y mismo fondo— para que al llegar la hora no dé un salto el
   diseño. El punto que late es lo único que dice «esto sigue vivo», que es
   justo la duda de quien mira un contador parado en ceros. */
.cd-fin{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--wash-2);border-top:1px solid var(--hair);
  padding:14px 12px;
  font-size:.8rem;font-weight:600;color:var(--txt);
}
.cd-fin svg.ic{width:.95rem;height:.95rem;color:var(--muted);flex-shrink:0}
.cd-pulso{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--solid);animation:cd-late 1.6s ease-in-out infinite;
}
@keyframes cd-late{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.35;transform:scale(.72)}
}
@media (prefers-reduced-motion:reduce){.cd-pulso{animation:none}}

/* Resultado publicado, en la misma franja donde estaba el contador. Es un
   enlace a la página del resultado: quien llega aquí después del sorteo lo que
   quiere es verlo, no quedarse mirando el número suelto. */
.cd-res{
  display:flex;align-items:center;gap:11px;
  background:var(--wash-2);border-top:1px solid var(--hair);
  padding:12px 14px;cursor:pointer;transition:background .12s;
}
.cd-res:hover{background:var(--wash)}
.cd-res-n{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  min-width:54px;height:44px;padding:0 9px;border-radius:11px;
  background:var(--wash);border:1px solid var(--stroke);
  font-size:1.35rem;font-weight:700;letter-spacing:-.02em;color:var(--txt);
}
.cd-res-t{flex:1 1;display:flex;flex-direction:column;gap:1px;min-width:0}
.cd-res-t b{font-size:.85rem;font-weight:700;color:var(--txt)}
.cd-res-t > span{font-size:.68rem;color:var(--muted);line-height:1.35}
.cd-res > svg.ic{width:.9rem;height:.9rem;color:var(--faint);flex-shrink:0}

/* Cuando el número premiado es tuyo, manda el amarillo de marca. */
.cd-res.gane{background:var(--mio-bg)}
.cd-res.gane:hover{background:var(--mio-bg);filter:brightness(1.06)}
.cd-res.gane .cd-res-n{background:var(--solid);color:var(--solid-txt);border-color:transparent}
.fecha-lock{padding:0 14px 13px;display:flex;flex-direction:column;gap:8px}
.fecha-lock .bar{height:5px;border-radius:99px;background:var(--wash);overflow:hidden;position:relative}
.fecha-lock .bar i{display:block;height:100%;border-radius:99px;background:var(--solid)}
.fecha-lock .leg{display:flex;justify-content:space-between;font-size:.68rem;color:var(--faint)}
.fecha-lock .leg b{color:var(--txt);font-weight:600}
.tz-note{padding:9px 14px;border-top:1px solid var(--hair);font-size:.67rem;color:var(--faint);display:flex;gap:7px;align-items:center;line-height:1.4}

.aviso{
  display:flex;gap:10px;align-items:center;border-radius:14px;padding:12px 14px;
  font-size:.76rem;line-height:1.5;color:var(--muted);background:var(--wash);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--stroke);
}
.aviso b{color:var(--txt)}
/* centrado respecto al bloque de texto, no pegado a la primera línea */
.aviso svg.ic{color:var(--txt);flex-shrink:0}

/* ───────── el aviso del precio, en talón ─────────
   Mismas medidas que .promo-box, que es el otro talón del portal: si dos
   piezas con la misma forma llevan tamaños distintos, se leen como si una
   fuera más importante que la otra sin serlo. */
.precio-tal{
  display:flex;align-items:stretch;flex-shrink:0;overflow:hidden;
  border-radius:16px;background:var(--wash);border:1px solid var(--stroke);
}
.precio-tal .pt-n{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex-shrink:0;min-width:88px;padding:13px 12px;line-height:1;
  background:var(--txt);color:var(--bg);
}
.precio-tal .pt-n b{font-size:1.45rem;font-weight:800;letter-spacing:-.04em}
.precio-tal .pt-n > span{
  font-size:.53rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin-top:4px;opacity:.72;
  text-align:center;text-wrap:balance;
}
.precio-tal .pt-t{
  flex:1 1;min-width:0;display:flex;flex-direction:column;gap:3px;
  justify-content:center;padding:12px 14px;
}
/* Mismas medidas que .promo-box .pb-tx: cuando la promoción se muda aquí
   arriba tiene que leerse igual que se leía abajo, icono incluido. */
.precio-tal .pt-t b{
  display:flex;align-items:center;gap:6px;
  font-size:.81rem;font-weight:700;letter-spacing:-.01em;
}
.precio-tal .pt-t b svg.ic{width:.85rem;height:.85rem;color:var(--solid-ink);flex-shrink:0}
/* pre-line: el texto de «Precio de salida» parte en dos líneas desde la
   cadena, sin marcado, igual que en el bloque de promoción. */
.precio-tal .pt-t > span{
  font-size:.72rem;color:var(--muted);line-height:1.45;white-space:pre-line;
}

/* El tono dice de qué caso se trata. El de «no te alcanza» es el único que
   pide hacer algo, y por eso es el único en rojo. */
.precio-tal.promo{background:var(--mio-bg);border-color:var(--solid)}
.precio-tal.promo .pt-n{background:var(--solid);color:var(--solid-txt)}
.precio-tal.gratis{background:color-mix(in oklab,var(--s-good) 12%,transparent);
  border-color:color-mix(in oklab,var(--s-good) 45%,transparent)}
.precio-tal.gratis .pt-n{background:var(--s-good);color:#fff}
/* «$0–$999» y «Gratis» no caben al tamaño de una cifra corta. */
.precio-tal.var .pt-n b,.precio-tal.gratis .pt-n b{font-size:1.05rem}

/* ───────── sorteos ya celebrados sin ganador ─────────
   Un talón por sorteo con el número tachado, y la próxima fecha en franja
   propia. Antes iba en un párrafo gris al final, que es donde no se mira.
   Las medidas son las del talón del precio (.promo-box, .precio-tal): tres
   piezas con la misma forma no pueden llevar tamaños distintos. */
.repes{
  border-radius:16px;overflow:hidden;flex-shrink:0;
  background:var(--wash);border:1px solid var(--stroke);
}
.repes .rp{display:flex;align-items:stretch;border-bottom:1px solid var(--hair)}
.repes .rp-n{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex-shrink:0;min-width:82px;padding:13px 12px;line-height:1;
  background:var(--wash-2);
}
/* Tachado y en gris: lo que cuenta de ese número es que ya pasó. */
.repes .rp-n b{
  font-size:1.45rem;font-weight:800;letter-spacing:-.04em;color:var(--muted);
  text-decoration:line-through;text-decoration-thickness:2px;
}
.repes .rp-n > span{
  font-size:.53rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin-top:4px;color:var(--faint);
}
.repes .rp-t{
  flex:1 1;min-width:0;display:flex;flex-direction:column;gap:3px;
  justify-content:center;padding:12px 14px;
}
.repes .rp-t b{font-size:.81rem;font-weight:700;letter-spacing:-.01em}
.repes .rp-t > span{font-size:.72rem;color:var(--muted);line-height:1.45}
/* Sin la coletilla de abajo —la página del resultado no la lleva— el último
   renglón dejaba su raya pegada al borde de la tarjeta. */
.repes .rp:last-child{border-bottom:none}

/* ── la fecha que dio el ganador ──
   Las demás son intentos fallidos y por eso van tachadas y en gris. Esta cerró
   el sorteo: ni se tacha ni se apaga, y se lleva el ámbar de la marca, que en
   esta tarjeta ya significaba «esto es lo importante» en la franja de la
   próxima fecha. */
.repes .rp.gano{background:var(--mio-bg)}
.repes .rp.gano .rp-n{background:transparent}
.repes .rp.gano .rp-n b{
  color:var(--solid-ink);text-decoration:none;
  /* Un pelo más grande que el resto: es el número del que habla la página. */
  font-size:1.6rem;
}
.repes .rp.gano .rp-n > span{color:var(--solid-ink)}
/* `> b` y no `b`: dentro de este renglón hay otro <b>, el de las cifras que
   juegan del número oficial, y con el selector abierto se llevaba el flex y se
   iba él solo a la línea de abajo, partiendo el número en dos. */
.repes .rp.gano .rp-t > b{display:flex;align-items:center;gap:6px;color:var(--solid-ink)}
.repes .rp.gano .rp-t > b svg.ic{width:.95rem;height:.95rem;flex-shrink:0}

.repes .rp-sigue{
  margin:0;padding:11px 14px;font-size:.72rem;color:var(--muted);line-height:1.45;
  border-bottom:1px solid var(--hair);
}

/* La franja de la próxima fecha cierra la tarjeta, en el ámbar de la marca. */
.repes .rp-prox{padding:12px 14px;background:var(--mio-bg)}
.repes .rp-prox .lb{
  display:block;font-size:.53rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--solid-ink);
}
.repes .rp-prox b{
  display:block;font-size:1.15rem;font-weight:800;letter-spacing:-.03em;margin-top:2px;
}
.repes .rp-prox > span{display:block;font-size:.68rem;color:var(--faint);margin-top:1px}

/* La regla, dicha antes de que pase. Una línea, sin caja: es una condición del
   sorteo, no un aviso. */
.regla-rep{
  display:flex;align-items:flex-start;gap:8px;margin:0;
  font-size:.72rem;color:var(--faint);line-height:1.45;padding:0 2px;
}
.regla-rep svg.ic{width:.85rem;height:.85rem;flex-shrink:0;margin-top:2px}

/* Venta parada mientras se espera el resultado de la fecha ya jugada. Ocupa
   el sitio del talón del precio, que en ese rato no se pinta. */
.pausa{
  display:flex;gap:10px;align-items:flex-start;border-radius:16px;padding:13px 15px;
  font-size:.76rem;line-height:1.5;color:var(--muted);
  background:var(--wash);border:1px solid var(--stroke);
}
.pausa b{color:var(--txt);font-weight:650}
.pausa svg.ic{width:.95rem;height:.95rem;color:var(--txt);flex-shrink:0;margin-top:2px}

/* grid rascable */
.grid-wrap{display:flex;flex-direction:column;gap:10px}
.grid-head{display:flex;justify-content:space-between;align-items:baseline}
/* Sin scroll propio: una tabla dentro de otra zona desplazable obliga a acertar
   con el dedo en la correcta. La página entera se desplaza y ya está. */
.grid-box{
  position:relative;border-radius:16px;padding:10px;
  background:var(--wash-2);border:1px solid var(--hair);
}

/* ───────── participación final ─────────
   La misma barra de la portada, pero aquí no es un progreso: el sorteo ya
   cerró y esa cifra es el resultado de la convocatoria. Por eso el porcentaje
   va grande a la izquierda en vez de escondido en una esquina. */
.parti{
  display:flex;flex-direction:column;gap:10px;
  border-radius:16px;padding:13px 15px;
  background:var(--wash-2);border:1px solid var(--stroke);
}
.parti-top{display:flex;align-items:center;gap:13px}
.parti-pct{
  flex-shrink:0;font-size:1.5rem;font-weight:700;line-height:1;
  letter-spacing:-.02em;color:var(--solid-ink);
}
.parti-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.parti-tx b{font-size:.84rem;font-weight:600;color:var(--txt)}
.parti-tx > span{font-size:.68rem;color:var(--muted);line-height:1.35}

/* ───────── lista de participantes ─────────
   Una línea por persona en vez de una tarjeta de dos: en el mismo alto caben
   unas tres veces más, que es lo que hace viable un sorteo de 1.000 casillas
   con cientos de jugadores. La ciudad es lo que se sacrifica, y solo reaparece
   al buscar, cuando hace falta para entender el resultado. */
.plista{display:flex;flex-direction:column}
.pfila{
  display:flex;align-items:center;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--hair);font-size:.78rem;
}
.pfila:last-child{border-bottom:none}
/* Ancho fijo y cifras tabulares: los puestos quedan en columna aunque pasen
   de 9 a 10 o de 99 a 100. */
.pf-i{
  width:22px;flex-shrink:0;text-align:right;
  font-size:.68rem;color:var(--faint);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:flex-end;
}
.pf-i svg.ic{width:.85rem;height:.85rem;color:var(--solid)}
.pf-n{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:0}
.pf-n b{font-weight:600;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-n > span{font-size:.64rem;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Compara con quien más lleva, no con la tabla entera: con 40 jugadores todas
   las porciones serían invisibles y no se vería ninguna clasificación. */
.pf-b{width:46px;height:4px;border-radius:99px;background:var(--wash);overflow:hidden;flex-shrink:0}
.pf-b i{display:block;height:100%;border-radius:99px;background:var(--solid);opacity:.65}
.pf-c{
  flex-shrink:0;min-width:26px;text-align:right;
  font-size:.74rem;font-weight:600;color:var(--muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;
}

.pfila.yo{background:var(--wash);border-radius:8px;margin:0 -7px;padding-left:7px;padding-right:7px}
.pfila.yo b{color:var(--txt)}
.pfila.yo .pf-i{color:var(--txt)}
/* El ganador va arriba aunque haya comprado poco: es la fila por la que se
   entra a esa página. */
/* El hueco entre las filas visibles y un ganador que quedó fuera del corte.
   Sin él, su fila parecería la siguiente de la lista. */
.pf-salto{text-align:center;color:var(--faint);font-size:.7rem;letter-spacing:.2em;padding:2px 0}
.pfila.ganador{background:var(--mio-bg);border-radius:8px;margin:0 -7px;
  padding-left:7px;padding-right:7px;border-bottom-color:transparent}
.pfila.ganador .pf-b i{opacity:1}

.pbusca{
  display:flex;align-items:center;gap:9px;
  border-radius:11px;padding:8px 11px;margin-bottom:2px;
  background:var(--wash-2);border:1px solid var(--stroke);
}
.pbusca svg.ic{width:.9rem;height:.9rem;color:var(--faint);flex-shrink:0}
.pbusca input{
  flex:1 1;min-width:0;background:none;border:none;outline:none;
  color:var(--txt);font-family:inherit;font-size:.78rem;
}
.pbusca input::placeholder{color:var(--faint)}
.pbusca:focus-within{border-color:var(--stroke-hi)}
/* Limpiar la búsqueda.
   Antes reutilizaba `.xbtn`, que en el portal solo existe dentro de `.sheet`:
   aquí quedaba sin ninguna regla y el navegador le ponía su botón por defecto
   —un recuadro blanco en tema oscuro— con la equis encima, invisible. Ahora
   tiene sus propios estilos y sale de los tokens, así que se comporta igual en
   claro y en oscuro. */
.pbusca .pb-x{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--wash);border:1px solid var(--hair);color:var(--muted);
  padding:0;transition:background .14s,color .14s,border-color .14s;
}
.pbusca .pb-x:hover{background:var(--stroke);color:var(--txt);border-color:var(--stroke-hi)}
.pbusca .pb-x:active{transform:scale(.92)}
/* La regla de arriba pinta los iconos de `.pbusca` en `--faint`; el de la equis
   sigue al color del botón para que el hover se note. */
.pbusca .pb-x svg.ic{width:.62rem;height:.62rem;color:currentColor}

.pmas{
  width:100%;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:10px;border-radius:11px;cursor:pointer;
  background:var(--wash-2);border:1px solid var(--stroke);
  color:var(--txt);font-family:inherit;font-size:.76rem;font-weight:600;
  transition:background .12s;
}
.pmas:hover{background:var(--wash)}
.pmas svg.ic{width:.85rem;height:.85rem;color:var(--faint)}

/* ───────── enlace al historial ─────────
   Cierra la portada. No compite con las tarjetas —no lleva foto ni ocupa una
   caja alta— pero tampoco desaparece: los sorteos entregados son la prueba de
   que esto paga, y ese es el argumento que necesita quien llega por primera
   vez. El número a la izquierda hace de gancho. */
.hist{
  display:flex;align-items:center;gap:12px;
  border-radius:16px;padding:13px 14px;margin-top:4px;
  background:var(--wash-2);border:1px solid var(--stroke);
  cursor:pointer;transition:background .12s,border-color .12s;
}
.hist:hover{background:var(--wash);border-color:var(--stroke-hi)}
.hist-n{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 8px;border-radius:11px;
  background:var(--mio);border:1px solid var(--solid-ink);
  font-size:1.05rem;font-weight:700;color:var(--solid-ink);
}
/* En oscuro la pastilla va perfilada: el ámbar de la marca sobre negro se lee
   solo. En claro no puede: ese mismo ámbar necesita oscurecerse hasta un
   mostaza (#A87200) para ser legible, y ese mostaza sobre el tinte ámbar del
   fondo se queda en 3,9:1 y con aspecto sucio —tres capas del mismo color
   apiladas—. Ahí se rellena con el ámbar entero y el número va en oscuro:
   11,5:1 y el color de la marca sin ensuciar. */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .hist-n{
    background:var(--solid);border-color:transparent;color:var(--solid-txt);
  }
}
:root[data-theme="light"] .hist-n{
  background:var(--solid);border-color:transparent;color:var(--solid-txt);
}
.hist-t{flex:1 1;display:flex;flex-direction:column;gap:1px;min-width:0}
.hist-t b{font-size:.85rem;font-weight:600;color:var(--txt)}
.hist-t span{font-size:.68rem;color:var(--faint);line-height:1.35}
.hist > svg.ic{width:.9rem;height:.9rem;color:var(--faint);flex-shrink:0}

/* ───────── reclamo del premio ─────────
   Tres estados con el mismo esqueleto y distinto tono: ganar es amarillo de
   marca, esperar es neutro y entregado es verde. Solo lo ve el ganador. */
/* ───────── el premio del ganador ─────────
   En talón, como el aviso del precio y la caja de promoción: sello a la
   izquierda con el estado, y a la derecha la etiqueta, el premio en grande y
   qué toca hacer. Antes era una caja con dos líneas de gris, con la cifra
   metida dentro de la frase y el mismo aspecto que un aviso cualquiera.
   Medidas calcadas de .promo-box, que es el mismo patrón. */
.prem-box{
  display:flex;align-items:stretch;flex-shrink:0;overflow:hidden;
  border-radius:16px;background:var(--wash-2);border:1px solid var(--stroke);
}
.pr-st{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex-shrink:0;min-width:86px;padding:13px 12px;line-height:1;
  background:var(--wash);color:var(--muted);
}
.pr-st svg.ic{width:1.25rem;height:1.25rem}
.pr-st > span{
  font-size:.53rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin-top:6px;opacity:.8;text-align:center;
}
.pr-tx{
  flex:1 1;min-width:0;display:flex;flex-direction:column;gap:2px;
  justify-content:center;padding:12px 14px;
}
.pr-lb{font-size:.53rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.pr-pz{font-size:1.45rem;font-weight:800;letter-spacing:-.04em;line-height:1.1;color:var(--txt)}
.pr-tx > span{font-size:.72rem;color:var(--muted);line-height:1.45;margin-top:3px}

/* Ganaste: el momento del producto, en el amarillo de la marca. */
.prem-box.gane{background:var(--mio-bg);border-color:var(--solid-ink)}
.prem-box.gane .pr-st{background:var(--solid);color:var(--solid-txt)}
.prem-box.gane .pr-lb{color:var(--solid-ink)}

/* Ya entregado: verde, y el sello deja de ser una llamada a hacer algo. */
.prem-box.hecho{background:color-mix(in oklab,var(--s-good) 10%,transparent);
  border-color:color-mix(in oklab,var(--s-good) 45%,transparent)}
.prem-box.hecho .pr-st{background:var(--s-good);color:#fff}
.prem-box.hecho .pr-lb{color:var(--s-good)}

/* ───────── acta del sorteo ─────────
   El resultado como comprobante: el número arriba con su etiqueta al lado, y
   debajo un renglón por cada dato que permite verificarlo. Antes esto usaba
   .fecha-box, el recuadro de «Sorteo: viernes 31», y el número ganador acababa
   siendo texto corriente dentro de una frase. */
.acta{
  border-radius:16px;overflow:hidden;
  background:var(--wash-2);border:1px solid var(--stroke);
}
.acta-top{display:flex;align-items:center;gap:14px;padding:15px 16px;background:var(--wash)}
.acta-n{
  flex-shrink:0;font-size:2.1rem;font-weight:700;line-height:1;
  letter-spacing:-.03em;color:var(--solid-ink);
}
.acta-q{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:2px}
/* La etiqueta va junto al número y no como título del bloque: así se lee
   «44 · número ganador» de un vistazo, sin tener que atar dos cosas. */
.acta-q .k{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
}
.acta-q b{font-size:.95rem;font-weight:700;color:var(--txt)}
.acta-sub{font-size:.68rem;color:var(--muted);line-height:1.35}

.acta-r{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 16px;font-size:.72rem;border-top:1px solid var(--hair);
}
.acta-r .k{color:var(--faint);flex-shrink:0}
.acta-r .v{color:var(--txt);font-weight:600;text-align:right;min-width:0}
/* La entrega cumplida es el único renglón del acta con color: es el que
   remata la historia, y en verde se encuentra sin leer el acta entera. */
.acta-r .v.entregado{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--ok-txt);
}
.acta-r .v.entregado > svg.ic{width:.85rem;height:.85rem;flex-shrink:0}

/* ───────── casilla de la hoja de registro ─────────
   Mismo material que el foil de rascar, para que se reconozca como «la casilla
   que acabas de tocar» y no como un icono decorativo. El contorno discontinuo
   en amarillo la señala sin sugerir que esté reservada: sigue libre para
   cualquiera y el texto lo dice. */
.reg-cas{display:flex;justify-content:center;padding:6px 0 2px}
.rc-foil{
  position:relative;width:76px;height:76px;border-radius:17px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#D4D6DE,#A8ABB6 55%,#7E818C);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 18px rgba(0,0,0,.4);
}
:root[data-theme="light"] .rc-foil{
  background:linear-gradient(160deg,#BABDC7,#9497A3 55%,#707380);
}
/* La interrogación va como pseudo-elemento: es decoración, no contenido que
   deba leer un lector de pantalla. */
.rc-foil::after{
  content:"?";font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.8rem;font-weight:700;color:rgba(10,10,12,.34);
}
.rc-foil > i{
  position:absolute;inset:-5px;border-radius:21px;
  border:2px dashed var(--solid);opacity:.55;
}
@media (prefers-reduced-motion:no-preference){
  .rc-foil > i{animation:rc-late 2.2s ease-in-out infinite}
}
@keyframes rc-late{0%,100%{opacity:.55}50%{opacity:.2}}

/* ───────── el cero es gratis ─────────
   El número grande a la izquierda hace el trabajo: se entiende de un vistazo
   sin leer. Va en amarillo de marca porque es una buena noticia, no un aviso.
   Prefijo `cero-` propio; `.cero` a secas no existía en ninguna hoja. */
.cero{
  display:flex;align-items:center;gap:13px;
  border-radius:16px;padding:12px 14px;
  background:var(--mio-bg);border:1px dashed var(--solid-ink);
}
.cero-num{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  min-width:52px;height:52px;padding:0 8px;border-radius:13px;
  background:var(--solid);color:var(--solid-txt);
  font-size:1.5rem;font-weight:700;letter-spacing:-.02em;
}
.cero-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.cero-tx b{font-size:.86rem;font-weight:700;color:var(--txt)}
.cero-tx span{font-size:.7rem;color:var(--muted);line-height:1.35}

/* ───────── tabla agotada ─────────
   Va sobre la tabla, en amarillo de marca: que se vendan todas las casillas es
   la buena noticia del sorteo, no un error, así que no usa los tonos de aviso.
   El nombre lleva prefijo `ag-` porque `.prog` sí se reutiliza tal cual —es la
   misma barra de la portada— y no conviene tocarla desde aquí. */
.agotado{
  display:flex;flex-direction:column;gap:10px;
  border-radius:16px;padding:13px 14px;
  background:var(--mio-bg);
  /* --solid-ink y no --solid: el amarillo puro da 1,65:1 contra el fondo claro
     y el borde desaparece. --solid-ink viene ajustado por tema (#FFB926 en
     oscuro, #A87200 en claro) y pasa el 3:1 que pide un elemento gráfico. */
  border:1px solid var(--solid-ink);
}
.ag-top{display:flex;align-items:center;gap:11px}
.ag-ic{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--solid);color:var(--solid-txt);
}
.ag-ic svg.ic{width:1rem;height:1rem;stroke-width:3}
.ag-tx{flex:1 1;display:flex;flex-direction:column;gap:2px;min-width:0}
.ag-tx b{font-size:.9rem;font-weight:700;color:var(--txt)}
.ag-tx span{font-size:.7rem;color:var(--muted);line-height:1.35}
/* La cifra en el color de marca legible sobre fondo claro y oscuro:
   --solid-ink ya está ajustado para ambos. */
/* 1.35rem en negrita para superar el umbral de «texto grande» (18.66px en
   negrita), donde el mínimo baja de 4,5:1 a 3:1. A 1.05rem se quedaba en
   3,69:1 sobre fondo claro, que no llega. Y de paso la cifra manda más. */
.ag-pct{font-size:1.35rem;font-weight:700;color:var(--solid-ink);flex-shrink:0;align-self:flex-start;line-height:1.1}
.ag-pie{
  display:flex;align-items:center;gap:6px;
  font-size:.68rem;color:var(--muted);line-height:1.3;
}
.ag-pie svg.ic{width:.8rem;height:.8rem;flex-shrink:0;opacity:.85}

/* En la tabla agotada la barra va llena; sin fondo propio no se vería el 100% */
.agotado .prog{background:rgba(255,255,255,.14)}
:root[data-theme="light"] .agotado .prog{background:rgba(0,0,0,.10)}
.grid-box.off .rasca-grid{opacity:.32;pointer-events:none;filter:saturate(.4)}
/* minmax(0,1fr) y no 1fr: «1fr» equivale a minmax(auto,1fr), y ese mínimo
   automático impide que la columna se encoja por debajo de su contenido, así
   que la tabla se salía del ancho de la app.
   Diez columnas para cualquier tamaño: 100 casillas caben en diez filas y se
   abarcan de un vistazo, y 1000 no obligan a un recorrido interminable. */
.rasca-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-gap:4px;gap:4px}
.cell{
  aspect-ratio:1;border-radius:7px;cursor:pointer;position:relative;min-width:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;
  font-size:.5rem;font-weight:600;color:transparent;
  background:var(--cell-grad);
  /* Sin backdrop-filter a propósito. La rejilla se apoya sobre un fondo casi
     plano —el aurora ya viene desenfocado a 56px—, así que desenfocarlo otra
     vez por casilla no cambia un píxel y en cambio obliga al navegador a
     componer una capa aparte para cada una. El degradado y el brillo interior
     dan el mismo aspecto de cristal a coste cero. */
  border:1px solid var(--cell-stroke);box-shadow:var(--cell-shadow-sm);
  transition:transform .1s;
  content-visibility:auto;contain-intrinsic-size:auto 82px;
}
/* ───── modo denso: 1000 casillas tienen que ser baratas de pintar ─────
   El desenfoque de fondo es lo más caro del CSS: obliga al navegador a
   recortar, desenfocar y componer el fondo de CADA elemento por separado.
   Con 1000 son 1000 pasadas por fotograma, y por eso la tabla tardaba en
   aparecer al bajar. A 39px el cristal no se aprecia, así que se sustituye
   por un fondo plano y una sombra sencilla. */
.cell:active{transform:scale(.92)}
.cell::after{
  content:"?";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--faint);font-size:.58rem;font-weight:600;
}
.cell.vendido{
  background:var(--wash-2);box-shadow:none;cursor:default;
  color:var(--faint);border:1px dashed var(--stroke);
}
.cell.vendido::after{content:""}
.cell.vendido.oculto::after{content:"·";color:var(--faint);font-size:.9rem}
.cell.mio{
  background:var(--mio-bg);border:1px solid var(--solid);color:var(--txt);
  box-shadow:inset 0 1px 0 var(--gloss);cursor:default;
}
.cell.mio::after{content:""}
.leyenda{display:flex;gap:14px;flex-wrap:wrap}
.leyenda span{display:flex;align-items:center;gap:6px;font-size:.68rem;color:var(--muted);font-weight:500}
.leyenda i{width:13px;height:13px;border-radius:3px;display:inline-block;border:1px solid var(--cell-stroke)}
.ley-foil{background:var(--cell-grad)}
.ley-vend{background:var(--wash-2);border-style:dashed !important}
/* debe reflejar exactamente .cell.mio: fondo y borde de marca */
.ley-mio{background:var(--mio-bg);border:1px solid var(--solid) !important}

/* participantes / listas */
.part-list{display:flex;flex-direction:column}
/* Lista compacta: con veinte participantes a 59px por fila ocupaba casi dos
   pantallas. Se recorta el relleno y se ajustan las interlíneas, que es de
   donde salía la mayor parte del alto sin aportar nada. */
.part-row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--hair)}
.part-row:last-child{border-bottom:none}
/* Solo las filas que llevan a algún sitio: las que solo informan no deben
   moverse al tocarlas. */
a.part-row:active,.part-row[role="button"]:active{transform:scale(.99);opacity:.85}
/* Interruptor de los avisos. Nombre propio y no `.switch` porque esa clase ya
   existe en el panel, y dos reglas con el mismo nombre acaban divergiendo. */
.noti-sw{position:relative;display:inline-block;width:40px;height:23px;flex-shrink:0;cursor:pointer}
.noti-sw input{opacity:0;width:100%;height:100%;position:absolute;cursor:pointer;margin:0}
.noti-sw input:disabled{cursor:default}
.noti-sw i{position:absolute;inset:0;border-radius:99px;background:var(--wash);border:1px solid var(--stroke);pointer-events:none;transition:background .15s,border-color .15s}
.noti-sw i::after{content:"";position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:var(--faint);transition:transform .15s,background .15s}
.noti-sw input:checked + i{background:var(--solid);border-color:transparent}
.noti-sw input:checked + i::after{transform:translateX(17px);background:var(--solid-txt)}
.noti-sw input:focus-visible + i{outline:2px solid var(--solid);outline-offset:2px}
.noti-sw input:disabled + i{opacity:.55}

/* ── /cuenta/privacidad ─────────────────────────────────────────────── */
/* Esta fila de la lista de la cuenta es un enlace y no un div con onClick
   como las demás: detrás hay una página, y tiene que poder abrirse en otra
   pestaña o guardarse. */
a.part-row{text-decoration:none;color:inherit}

.priv-vista{display:flex;flex-direction:column;gap:8px}
.priv-t{font-size:.62rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint);padding-left:2px}
.priv-op{padding:11px 14px 5px}
/* La opción activa se marca con el borde y no tiñendo el fondo: las dos
   tarjetas enseñan un nombre, y colorear una haría pensar que lo de dentro
   es distinto y no solo el mismo nombre escrito de otra forma. */
.priv-op.on{border-color:var(--solid)}
.priv-h{display:flex;align-items:center;gap:7px;margin-bottom:1px}
.priv-h b{font-size:.72rem;font-weight:600;color:var(--txt)}
.priv-chip{font-size:.58rem;font-weight:600;line-height:1.6;
  color:var(--solid-txt);background:var(--solid);border-radius:99px;padding:0 7px}
.priv-nota{font-size:.68rem;color:var(--faint);line-height:1.55;margin:0;padding:0 2px}
.priv-aviso{display:flex;gap:9px;align-items:flex-start;padding:10px 13px;
  border-radius:14px;background:var(--wash);border:1px solid var(--hair)}
.priv-aviso svg.ic{width:.9rem;height:.9rem;color:var(--solid);flex-shrink:0;margin-top:1px}
.priv-aviso span{font-size:.68rem;color:var(--faint);line-height:1.5}
.avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.66rem;font-weight:700;color:var(--txt);
  background:var(--wash);border:1px solid var(--stroke);
}
.part-row .who{flex:1 1;display:flex;flex-direction:column;gap:0;min-width:0}
/* Más pequeño y en una sola línea: los nombres completos son largos y
   partirlos en dos descuadraba el alto de las filas. Al quitarle la insignia
   de al lado ya no necesita ser flex. */
.part-row .who b{
  font-size:.78rem;font-weight:600;min-width:0;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.part-row .who span{font-size:.66rem;color:var(--faint);line-height:1.3}
.numchip{border-radius:8px;padding:3px 9px;font-size:.73rem;font-weight:600;
  white-space:nowrap;flex-shrink:0;background:var(--wash);border:1px solid var(--stroke)}
.numchip.hide{color:var(--faint);letter-spacing:.1em}
.numchip.show{color:var(--txt);border-color:var(--stroke-hi)}
.lock-note{display:flex;gap:7px;align-items:center;font-size:.7rem;color:var(--faint);padding:8px 0 0;line-height:1.4}

/* sheets */
.overlay{
  position:fixed;inset:0;background:var(--overlay);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center;z-index:60;
}
.sheet{
  width:100%;max-width:480px;border-radius:28px 28px 0 0;
  padding:20px 20px calc(26px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:14px;background:var(--sheet-bg);
  backdrop-filter:blur(34px) saturate(140%);-webkit-backdrop-filter:blur(34px) saturate(140%);
  border-top:1px solid var(--stroke-hi);
  box-shadow:inset 0 1px 0 var(--gloss),0 -18px 60px rgba(0,0,0,.3);
  animation:up .3s cubic-bezier(.2,.9,.3,1);max-height:92dvh;overflow-y:auto;
  /* La barra, vestida en vez de escondida. La del sistema es gris, ancha y se
     comía el borde redondeado; esconderla del todo dejaba sin saber que hay
     más abajo, que en una hoja de diecisiete filas importa. Fina, con el color
     de los bordes de la app y sin llegar a las esquinas. */
  scrollbar-width:thin;scrollbar-color:var(--stroke-hi) transparent;
  overscroll-behavior:contain;
}
.sheet::-webkit-scrollbar{width:5px}
.sheet::-webkit-scrollbar-track{background:transparent;margin:22px 0}
.sheet::-webkit-scrollbar-thumb{background:var(--stroke-hi);border-radius:99px}
.sheet::-webkit-scrollbar-thumb:hover{background:var(--muted)}
@keyframes up{from{transform:translateY(46px);opacity:0}to{transform:none;opacity:1}}
/* El tirador también se queda: es parte de la cabecera aunque sea otro nodo. */
.sheet .grab{width:38px;height:4px;border-radius:99px;background:var(--stroke-hi);margin:0 auto}
.scratch-stage{
  position:relative;border-radius:20px;overflow:hidden;margin:4px auto 0;
  width:230px;height:230px;flex-shrink:0;background:var(--stage-bg);
  border:1px solid var(--stroke-hi);box-shadow:inset 0 1px 0 var(--gloss);
  display:flex;align-items:center;justify-content:center;
}
.scratch-num{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Grande a propósito: si ocupa poco, casi todo lo que rascas es fondo vacío
     y las cifras salen de golpe al llegar al centro. */
  font-size:5.6rem;font-weight:700;color:var(--txt);text-shadow:var(--num-glow);
  line-height:1;letter-spacing:-.02em;
  opacity:0;transition:opacity .35s ease;
}
.scratch-num.listo{opacity:1}
.scratch-num.d3{font-size:4.3rem}
.scratch-num small{display:block;text-align:center;font-size:.62rem;color:var(--faint);font-weight:600;letter-spacing:.18em;margin-top:8px}
/* halo bajo el número: al levantar el foil siempre asoma algo, no un vacío */
.scratch-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 46%,var(--gloss),transparent 62%);
  opacity:.5;
}
.scratch-stage canvas{
  position:absolute;inset:0;touch-action:none;cursor:crosshair;
  /* Capa propia desde el primer momento. Sin esto el navegador decide cuándo
     subir el lienzo a la GPU, y si lo hace mientras la hoja entra animada
     —.sheet lleva transform y opacity— la textura llega tarde y por un
     instante no hay nada tapando el número. */
  transform:translateZ(0);will-change:transform;
}
/* El foil no se retira solo: lo termina de levantar el usuario. */
.sheet .hint{text-align:center;font-size:.76rem;color:var(--muted)}
.paga-row{
  display:flex;justify-content:space-between;align-items:center;
  border-radius:14px;padding:13px 15px;font-size:.84rem;color:var(--muted);
  background:var(--wash);border:1px solid var(--stroke);
}
.paga-row b{color:var(--txt);font-size:.98rem}

/* saldo */
.saldo-body{padding:6px 18px 28px;display:flex;flex-direction:column;gap:14px}
/* ───────── cabecera de la billetera ─────────
   Total arriba y cada bolsillo en su fila. Antes la pantalla decía cuánto
   tenías pero no qué podías hacer con cada parte: que el bono no se retira y
   que la comisión no sirve para jugar no aparecía en ningún sitio. */
/* La tarjeta del saldo: total, reparto y acciones en una sola pieza.
   Los tamaños son los que ya usaban las filas del desglose (.78/.66/.88 rem),
   para que al meterlas dentro no cambien de peso. */
.saldo-tot{
  border-radius:20px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--stroke-hi);
  box-shadow:inset 0 1px 0 var(--gloss),var(--card-shadow);
}
/* La etiqueta va más cerca de su cifra que del resto de la tarjeta —forman una
   sola unidad— pero con aire suficiente para no leerse pegadas. El gap de la
   tarjeta son 12px; esto los deja en 8. */
.saldo-tot .eyebrow{margin-bottom:-4px}
.saldo-tot .big{font-size:2rem;font-weight:800;letter-spacing:-.04em;line-height:1.05}

/* El reparto. Un solo tramo por bolsa, en el mismo orden que la lista de abajo. */
.saldo-tot .st-barra{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--wash)}
.saldo-tot .st-barra i{display:block;height:100%}
.b-rec{background:var(--txt)}
.b-bono{background:var(--solid)}
.b-com{background:var(--s-good)}

.saldo-tot .st-bolsas{display:flex;flex-direction:column;gap:7px}
.saldo-tot .sb{display:flex;align-items:center;gap:8px}
.saldo-tot .sb s{width:8px;height:8px;border-radius:3px;flex-shrink:0;text-decoration:none}
.saldo-tot .sb .n{font-size:.78rem;font-weight:600;flex-shrink:0}
/* La aclaración se recorta antes que la cifra: sin ella se entiende la fila,
   sin la cifra no. */
.saldo-tot .sb .q{
  flex:1 1;min-width:0;font-size:.66rem;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.saldo-tot .sb .q::before{content:"· "}
.saldo-tot .sb b{font-size:.88rem;font-weight:700;flex-shrink:0}

/* Las acciones, separadas del reparto por una línea: cierran la tarjeta. */
.saldo-tot .wal-acts{padding-top:12px;border-top:1px solid var(--hair)}
.mov-row{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--hair)}
.mov-row:last-child{border-bottom:none}
.mov-ic{
  width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--muted);background:var(--wash);border:1px solid var(--stroke);
}
.mov-ic svg.ic{width:.95rem;height:.95rem}
.mov-row .what{flex:1 1;display:flex;flex-direction:column;gap:1px;min-width:0}
.mov-row .what b{font-size:.83rem;font-weight:600}
.mov-row .what span{font-size:.68rem;color:var(--faint);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.amt{font-weight:600;font-size:.88rem}
.amt.in{color:var(--ok)}
.amt.out{color:var(--txt)}
.amt.pend{color:var(--faint)}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.66rem;font-weight:600;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
/* nota bajo un campo: en el portal no estaba definida y heredaba el cuerpo */
.help{display:block;font-size:.67rem;color:var(--faint);line-height:1.45}
.field input,.field select,.field .ui-sel{
  background:var(--wash);border:1px solid var(--stroke);border-radius:12px;color:var(--txt);
  padding:13px 15px;font-size:.93rem;font-family:inherit;width:100%;
  line-height:1.25;box-sizing:border-box;
}
/* El Select de Radix viene dimensionado para el panel. Dentro de un .field
   copia la caja del input para que la columna no se vea despareja. */
.field .ui-sel{
  display:flex;justify-content:space-between;gap:10px;
  font-weight:400;white-space:normal;text-align:left;min-width:0;
}
.field .ui-sel[data-placeholder]{color:var(--faint)}
.field .ui-sel-arrow{flex-shrink:0;color:var(--muted)}
.field .ui-sel:focus-visible{outline:none;border-color:var(--focus)}
.field .ui-sel[data-state="open"]{border-color:var(--focus)}
.field input::placeholder{color:var(--faint)}
.field input:focus,.field select:focus{outline:none;border-color:var(--focus)}
.field select option{background:var(--phone-bg);color:var(--txt)}
.frow2{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px}

/* perfil */
.perf-body{padding:18px 18px 28px;display:flex;flex-direction:column;gap:14px}
/* ───────── cabecera de perfil ─────────
   Fija arriba. La columna de texto lleva min-width:0 para que un nombre largo
   se recorte en vez de empujar la insignia fuera de la fila. */
.ref-card{padding:18px;display:flex;flex-direction:column;gap:13px}
.ref-code{display:flex;align-items:center;gap:10px;border-radius:14px;padding:13px 15px;background:var(--wash);border:1px dashed var(--stroke-hi)}
.ref-code.mute{border-style:solid;border-color:var(--stroke);opacity:.6}
.ref-code b{flex:1 1;font-size:1.1rem;letter-spacing:.16em;color:var(--txt)}
.ref-code button{
  border:1px solid var(--stroke);color:var(--muted);cursor:pointer;font-size:.7rem;font-weight:600;
  padding:6px 11px;border-radius:99px;background:var(--wash);
}
.ref-code button:hover{color:var(--txt);border-color:var(--stroke-hi)}
.promo-note{
  display:flex;gap:9px;align-items:flex-start;border-radius:12px;padding:11px 13px;
  background:var(--wash-2);border:1px solid var(--stroke);font-size:.73rem;line-height:1.5;color:var(--muted);
}
.promo-note svg.ic{margin-top:1px;color:var(--txt)}
.split{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--hair);padding-top:13px}
.split-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.split-head b{font-size:.84rem;font-weight:700}
.split-head span{font-size:.7rem;color:var(--faint)}
.split-bar{display:flex;height:34px;border-radius:11px;overflow:hidden;border:1px solid var(--stroke);background:var(--wash-2)}
.split-bar div{
  display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:.7rem;font-weight:700;transition:flex-grow .18s;min-width:0;overflow:hidden;white-space:nowrap;
}
.split-bar .mia{background:var(--solid);color:var(--solid-txt)}
.split-bar .regalo{background:var(--wash);color:var(--txt);border-left:1px solid var(--stroke)}
.split-seg{display:flex;background:var(--wash-2);border:1px solid var(--stroke);border-radius:10px;padding:3px;gap:2px}
.split-seg button{
  flex:1 1;background:none;border:none;color:var(--muted);font-size:.71rem;font-weight:600;
  padding:7px 4px;border-radius:7px;cursor:pointer;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;
}
.split-seg button.on{background:var(--solid);color:var(--solid-txt)}

/* ───────── reparto punto a punto ─────────
   Antes eran cinco botones fijos (0, 25, 50, 75 y 100% del total). El control
   deslizante da el paso de 1% que hacía falta, y los botones de ± permiten
   afinar sin pelearse con el dedo en una pantalla pequeña.

   El valor va a la derecha y no dentro del control: dentro obligaría a
   reservarle sitio y el recorrido útil se quedaría en nada. */
.split-ctl{
  display:flex;align-items:center;gap:9px;
  background:var(--wash-2);border:1px solid var(--stroke);
  border-radius:10px;padding:7px 10px;
}
.split-ctl .paso{
  width:30px;height:30px;flex-shrink:0;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--wash);border:1px solid var(--stroke);color:var(--txt);
  font-size:1rem;font-weight:700;line-height:1;
}
.split-ctl .paso:hover:not(:disabled){border-color:var(--stroke-hi)}
.split-ctl .paso:active:not(:disabled){transform:scale(.94)}
.split-ctl .paso:disabled{opacity:.35;cursor:default}
.split-ctl .val{
  min-width:42px;text-align:right;flex-shrink:0;
  font-size:.86rem;font-weight:700;color:var(--txt);
}

/* El control deslizante, con el mismo material que el resto del portal. */
.split-ctl input[type=range]{
  flex:1 1;min-width:0;height:24px;margin:0;cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;
}
.split-ctl input[type=range]:disabled{opacity:.5;cursor:default}
.split-ctl input[type=range]::-webkit-slider-runnable-track{
  height:5px;border-radius:99px;background:var(--wash);border:1px solid var(--stroke);
}
.split-ctl input[type=range]::-moz-range-track{
  height:5px;border-radius:99px;background:var(--wash);border:1px solid var(--stroke);
}
.split-ctl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;margin-top:-7.5px;
  background:var(--solid);border:none;box-shadow:0 1px 5px rgba(0,0,0,.35);
}
.split-ctl input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:var(--solid);border:none;box-shadow:0 1px 5px rgba(0,0,0,.35);
}
.split-ctl input[type=range]:focus-visible{outline:none}
.split-ctl input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 3px var(--focus);
}
.split-ej{
  font-size:.72rem;line-height:1.55;color:var(--muted);
  background:var(--wash-2);border:1px solid var(--stroke);border-radius:11px;padding:10px 12px;
}
.split-ej b{color:var(--txt)}

/* login */
.login-body{flex:1 1;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:28px;max-width:480px;margin:0 auto;width:100%}
.login-logo{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.login-logo p{color:var(--muted);font-size:.88rem;max-width:30ch}
.login-card{padding:20px;display:flex;flex-direction:column;gap:14px}
/* Separador con la palabra en medio, para partir la tarjeta del login en sus
   dos caminos. Las líneas se estiran solas a los lados con flex. */
.o-sep{
  display:flex;align-items:center;gap:11px;margin:-2px 0;
  font-size:.62rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);
}
.o-sep::before,.o-sep::after{content:"";flex:1 1;height:1px;background:var(--hair)}
.bonus-note{
  display:flex;gap:9px;align-items:flex-start;border-radius:12px;padding:11px 13px;
  background:var(--wash);border:1px solid var(--stroke-hi);font-size:.75rem;line-height:1.5;color:var(--txt);
}
.bonus-note svg.ic{margin-top:1px}

/* extras */
/* La columna de la esquina: el interruptor arriba y debajo el canal y el
   soporte. Es una columna con `gap` y no tres posiciones fijas calculadas a
   mano, así da igual cuántos botones haya encendidos —el de más abajo siempre
   queda a la misma altura sobre el menú— y al recogerlos el interruptor baja
   solo a ocupar su sitio. */
.flota{
  position:fixed;right:calc(50% - 240px + 14px);z-index:39;
  bottom:calc(100px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
@media (max-width:520px){.flota{right:14px}}
.flota.cerrado .wa-btn,.flota.cerrado .wa-canal,.flota.cerrado .wa-inst{display:none}

/* El interruptor. Con los botones desplegados es un disco pelado de 30px, más
   chico que las cápsulas: un mando de la propia esquina, no un tercer sitio al
   que ir. Recogidos se estira a píldora con rótulo, porque una flecha suelta
   en una esquina vacía no dice qué va a pasar si la tocas. */
.flota-sw{
  width:30px;height:30px;border-radius:999px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:5px;color:var(--muted);
  background:var(--tab-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--tab-line);
  box-shadow:inset 0 1px 0 var(--gloss),var(--tab-sombra);
}
.flota-sw svg.ic{width:15px;height:15px;flex:none;transition:transform .2s ease}
/* Desplegado apunta hacia abajo —«recógelos»— y recogido hacia arriba. */
.flota.cerrado .flota-sw svg.ic{transform:rotate(180deg)}
.flota.cerrado .flota-sw{width:auto;height:32px;padding:0 12px 0 9px}
.flota-sw span{font-size:.66rem;font-weight:600;line-height:1;white-space:nowrap;color:var(--txt)}
.flota-sw:active{transform:scale(.9)}

/* Los flotantes: instalar, canal y soporte. La misma cápsula los tres —icono
   arriba, rótulo debajo— para que se lean como un juego y no como tres cosas
   distintas que coincidieron en la esquina. El cristal es el mismo del menú.

   Cápsula y no disco de 46 porque el rótulo tiene que caber debajo del icono;
   y 68 de ancho porque «Instalar App» no cabía en 62. */
.wa-btn,.wa-canal,.wa-inst{
  width:68px;padding:9px 4px 8px;border-radius:20px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  text-decoration:none;
  background:var(--tab-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--tab-line);
  box-shadow:inset 0 1px 0 var(--gloss),var(--tab-sombra);
}
.wa-btn svg.ic,.wa-canal svg.ic,.wa-inst svg.ic{width:22px;height:22px}
.wa-btn svg.ic,.wa-inst svg.ic{color:var(--txt)}
/* El único color de marca ajena que se cuela en el portal, y solo porque es
   el glifo de WhatsApp: en gris no se reconoce. */
.wa-canal svg.ic{color:var(--wa-verde)}
/* El icono que suba el admin: contain para no recortarlo, y el mismo cuadro
   que el glifo para que la cápsula no cambie de alto. */
.wa-btn img,.wa-canal img{width:22px;height:22px;display:block;object-fit:contain;border-radius:5px}
.wa-btn span,.wa-canal span,.wa-inst span{
  font-size:.56rem;font-weight:600;color:var(--muted);line-height:1;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.wa-btn:active,.wa-canal:active,.wa-inst:active{transform:scale(.94)}
.evi-ph{
  height:108px;border-radius:14px;border:1px solid var(--stroke);
  display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;
  color:var(--faint);font-size:.68rem;position:relative;overflow:hidden;
}
.evi-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,var(--gloss) 0%,transparent 35%);opacity:.5}
.evi-ph svg.ic{width:1.4rem;height:1.4rem}
.evi-img{width:100%;height:108px;object-fit:cover;border-radius:14px;border:1px solid var(--stroke);display:block}

/* La miniatura es un botón: hay un visor detrás y tiene que notarse que se
   puede tocar, sin que la lupa tape la foto. */
.evi-btn{position:relative;display:block;padding:0;border:none;background:none;cursor:zoom-in;
  border-radius:14px;overflow:hidden;-webkit-tap-highlight-color:transparent}
.evi-btn:active .evi-img{transform:scale(.98)}
.evi-img{transition:transform .12s}
.evi-lupa{
  position:absolute;right:7px;bottom:7px;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);opacity:.9;pointer-events:none;
}
.evi-lupa svg.ic{width:.7rem;height:.7rem}
/* Las que no caben en la rejilla: sin esto quedaban inalcanzables. */
.evi-mas{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;font-weight:700;color:#fff;background:rgba(0,0,0,.5);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);pointer-events:none;
}

/* ── visor a pantalla completa ─────────────────────────────────────────── */
/* Negro y no el cristal del resto de las capas: aquí lo único que importa es
   la foto, y cualquier tinte de fondo falsea sus colores. */
.visor{
  position:fixed;inset:0;z-index:80;background:#000;
  display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
  animation:visorIn .16s ease-out;
}
@keyframes visorIn{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.visor{animation:none}}
.visor-top{display:flex;align-items:center;gap:8px;padding:10px 12px;flex-shrink:0}
.visor-top .sp{flex:1 1}
.visor-n{font-size:.72rem;color:rgba(255,255,255,.65);padding-left:4px}
.visor-btn{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;background:rgba(255,255,255,.12);border:none;cursor:pointer;
}
.visor-btn:active{background:rgba(255,255,255,.22)}
.visor-btn svg.ic{width:.95rem;height:.95rem}
/* touch-action:none es lo que deja llegar el pellizco a los punteros; sin él
   el navegador se queda el gesto y no se recibe nada. */
.visor-escena{
  flex:1 1;min-height:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none;cursor:zoom-in;
}
.visor-escena.zoom{cursor:-webkit-grab;cursor:grab}
.visor-escena.zoom:active{cursor:-webkit-grabbing;cursor:grabbing}
.visor-img{
  max-width:100%;max-height:100%;object-fit:contain;display:block;
  transform-origin:center center;will-change:transform;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;
}
/* Las flechas van encima de la foto, así que no pueden ser un blanco
   translúcido: sobre una imagen clara desaparecen. Fondo oscuro con desenfoque,
   filo blanco y sombra bajo el icono; así se recortan igual contra una foto
   blanca que contra una nocturna. */
.visor-flecha{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#fff;background:rgba(0,0,0,.62);
  border:1px solid rgba(255,255,255,.40);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 2px 12px rgba(0,0,0,.5);
}
.visor-flecha:active{background:rgba(0,0,0,.72)}
.visor-flecha:disabled{opacity:.22;cursor:default}
.visor-flecha.izq{left:10px}
.visor-flecha.izq svg.ic{transform:rotate(90deg)}
.visor-flecha.der{right:10px}
.visor-flecha.der svg.ic{transform:rotate(-90deg)}
.visor-flecha svg.ic{width:1rem;height:1rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.65))}
.visor-pie{padding:10px 18px 16px;flex-shrink:0;text-align:center;display:flex;
  flex-direction:column;gap:5px}
.visor-pie p{margin:0;font-size:.76rem;line-height:1.45;color:rgba(255,255,255,.82)}
.visor-tip{font-size:.64rem;color:rgba(255,255,255,.42)}
/* Con ratón el pellizco no existe y el consejo sobra. */
@media (hover:hover) and (pointer:fine){.visor-tip{display:none}}
.hero.foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,transparent 45%,rgba(0,0,0,.25) 100%)}

/* ───────── pie del wizard de registro ─────────
   Una sola acción principal a lo ancho; lo demás debajo y atenuado. */
.reg-foot{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.reg-foot .reg-paso{
  font-size:.7rem;color:var(--faint);text-align:center;letter-spacing:.04em;
}
.reg-foot .btn{width:100%;justify-content:center;padding:14px 18px;font-size:.92rem}
.reg-atras{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:none;border:none;padding:9px;cursor:pointer;
  font:inherit;font-size:.78rem;color:var(--muted);border-radius:10px;
  transition:color .14s,background .14s;
}
.reg-atras:hover:not(:disabled){color:var(--txt);background:var(--wash)}
.reg-atras:disabled{opacity:.45;cursor:default}
.reg-atras svg.ic{width:.85rem;height:.85rem}
/* separado del bloque de acciones para que no se confunda con ellas */
.reg-alt{text-align:center;padding-top:10px;border-top:1px solid var(--hair)}

/* el código de referido, al final de la confirmación */
.reg-ref{padding-top:14px;margin-top:2px;border-top:1px solid var(--hair)}

/* cupo de reenvíos del código */
.reg-reenvio{display:flex;flex-direction:column;gap:7px;align-items:flex-start}


/* ───────── presentación de datos personales ─────────
   Se guardan normalizados en minúsculas; aquí se muestran legibles. */
.cap{text-transform:capitalize}
.low{text-transform:lowercase}

/* ───────── una hoja modal toma la pantalla ─────────
   Dos motivos para apartar el menú y los flotantes de WhatsApp:

   1. Apilamiento: .screen tiene z-index:1 y crea un contexto propio, así que
      el z-index:60 del .overlay solo compite dentro de .screen. El tabbar (40)
      y la columna de flotantes (39) son hermanos de .screen y ganaban, tapando
      los botones de la hoja. Subir .screen mientras hay overlay lo resuelve.
   2. Interfaz: con una hoja abierta, navegar por el menú no tiene sentido. */
.tabbar, .flota { transition: opacity .18s ease, transform .18s ease, visibility .18s }

.app:has(.overlay) .screen { z-index: 61 }

.app:has(.overlay) .tabbar {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(14px);
}
.app:has(.overlay) .flota {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(14px);
}

/* ───────── billetera: recarga y retiro ───────── */

/* píldora de recarga pendiente */
/* Va en ámbar a propósito: es lo único de la pantalla que pide una acción del
   usuario (transferir y subir el comprobante), así que debe saltar a la vista
   por encima del resto de las tarjetas. */
.pend-pill{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:11px 13px;border-radius:16px;cursor:pointer;text-align:left;
  background:color-mix(in oklab,var(--s-warn) 8%,transparent);
  border:1px solid color-mix(in oklab,var(--s-warn) 26%,transparent);
  transition:transform .12s;
}
.pend-pill:active{transform:scale(.99)}
.pend-pill .ic{
  width:34px;height:34px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--s-warn);
  background:color-mix(in oklab,var(--s-warn) 14%,transparent);
}
.pend-pill .ic svg.ic{width:.95rem;height:.95rem}
.pend-pill .txt{flex:1 1;display:flex;flex-direction:column;gap:1px;min-width:0}
.pend-pill .txt b{font-size:.63rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--s-warn)}
.pend-pill .txt span{font-size:.92rem;font-weight:700;color:var(--txt)}
.pend-pill > svg.ic{width:1rem;height:1rem;color:var(--s-warn);opacity:.7;flex-shrink:0}
.pend-badge{
  flex-shrink:0;border-radius:99px;padding:3px 9px;font-size:.62rem;font-weight:700;border:1px solid;
}
.pend-badge.warn{color:var(--s-warn);border-color:color-mix(in oklab,var(--s-warn) 30%,transparent);
  background:color-mix(in oklab,var(--s-warn) 10%,transparent)}
.pend-badge.ok{color:var(--s-good);border-color:color-mix(in oklab,var(--s-good) 30%,transparent);
  background:color-mix(in oklab,var(--s-good) 10%,transparent)}

/* cabecera de la hoja */
.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sheet-h b{font-size:1.02rem;font-weight:700}
.sheet .xbtn{
  width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--wash);border:1px solid var(--stroke);color:var(--muted);cursor:pointer;flex-shrink:0;
}
.sheet .xbtn:hover{color:var(--txt)}
/* Los .btn del portal son width:100% por defecto; aquí conviven dos en una
   fila, así que hay que soltar ese ancho o el secundario empuja al principal
   fuera de la hoja. */
.hoja-foot{display:flex;gap:8px;margin-top:2px}
.hoja-foot .btn{flex:1 1 auto;width:auto;min-width:0}
.hoja-foot .btn.ghost{flex:0 0 auto;width:auto;padding-left:16px;padding-right:16px}

/* campo de monto grande */
.monto-box{
  border-radius:18px;padding:16px 14px 13px;text-align:center;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,color-mix(in oklab,var(--solid) 7%,transparent),transparent);
}
.monto-box .eyebrow{display:block;margin-bottom:6px}
.monto-in{display:flex;align-items:flex-end;justify-content:center;gap:5px}
.monto-in .sig{font-size:1.5rem;font-weight:800;color:var(--faint);padding-bottom:6px}
.monto-in .cur{font-size:.8rem;font-weight:700;color:var(--faint);padding-bottom:8px}
.monto-in input{
  background:none;border:none;outline:none;padding:0;min-width:0;
  font-size:2.7rem;font-weight:800;line-height:1;text-align:center;color:var(--txt);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.monto-in input::placeholder{color:var(--faint);opacity:.45}
.monto-nota{display:block;margin-top:9px;min-height:16px;font-size:.7rem;color:var(--faint)}
.monto-nota.err{color:var(--s-crit);font-weight:600}

/* atajos de monto */
.atajos{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:7px;gap:7px}
.atajos button{
  border-radius:12px;padding:9px 4px;font-size:.75rem;font-weight:700;cursor:pointer;
  background:var(--wash);border:1px solid var(--stroke);color:var(--muted);transition:.12s;
}
.atajos button:active{transform:scale(.96)}
.atajos button.on{border-color:var(--txt);color:var(--txt);background:var(--glass)}

/* lista de cuentas donde depositar */
.metodos{display:flex;flex-direction:column;gap:8px}
.metodo{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  padding:11px;border-radius:14px;background:var(--wash);border:1px solid var(--stroke);
  color:var(--txt);transition:.12s;
}
/* La selección se marca con el borde y un relleno tenue; el punto de la
   derecha solo confirma. Antes era al revés: el círculo blanco era lo más
   llamativo de la tarjeta y el estado apenas se distinguía. */
.metodo.on{
  border-color:var(--stroke-hi);
  background:color-mix(in oklab,var(--solid) 8%,var(--wash));
}
.metodo .mi{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--muted);
  background:var(--glass);border:1px solid var(--stroke);
}
.metodo.on .mi{color:var(--txt);border-color:var(--stroke-hi);background:var(--wash)}
.metodo .mt{flex:1 1;display:flex;flex-direction:column;gap:1px;min-width:0}
.metodo .mt b{font-size:.86rem;font-weight:600;color:var(--txt)}
.metodo .mt span{font-size:.72rem;color:var(--muted);letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Círculo relleno con un punto en contraste, en vez de un anillo grueso con
   un disco dentro: aquella «rosquilla» chirriaba en los dos temas. */
.metodo .radio{
  width:18px;height:18px;border-radius:50%;flex-shrink:0;
  border:1px solid var(--stroke-hi);
  display:flex;align-items:center;justify-content:center;
  transition:background .12s,border-color .12s;
}
.metodo.on .radio{background:var(--solid);border-color:transparent}
.metodo .radio i{width:6px;height:6px;border-radius:50%;background:var(--solid-txt)}

/* cajas de dato con copiar */
.dato-box{
  display:flex;flex-direction:column;gap:4px;
  border-radius:14px;padding:12px 14px;background:var(--wash);border:1px solid var(--stroke);
}
.dato-box > b{font-size:.9rem;font-weight:600}
.dato-copy{display:flex;align-items:center;gap:8px}
.dato-copy .mono{font-size:.92rem;letter-spacing:.02em}
.folio-box{border-color:var(--stroke-hi)}
.folio-box .folio{font-size:1.5rem;font-weight:800;letter-spacing:.14em}
.copy-btn{
  width:28px;height:28px;border-radius:9px;flex-shrink:0;position:relative;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--glass);border:1px solid var(--stroke);color:var(--muted);
}
.copy-btn:hover{color:var(--txt);border-color:var(--stroke-hi)}
.copy-btn svg.ic{width:.85rem;height:.85rem}
.copy-ok{
  position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);
  background:var(--solid);color:var(--solid-txt);border-radius:7px;padding:3px 7px;
  font-size:.62rem;font-weight:700;white-space:nowrap;pointer-events:none;
}

/* monto de la recarga pendiente y de la revisión */
.pend-monto,.rev-monto{display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center}
.pend-monto b,.rev-monto b{font-size:1.9rem;font-weight:800;letter-spacing:-.02em}
.rev-monto{
  border-radius:16px;padding:14px;border:1px solid var(--stroke);
  background:linear-gradient(180deg,color-mix(in oklab,var(--solid) 7%,transparent),transparent);
}

/* subir comprobante */
.upl-label{cursor:pointer;align-self:flex-start;width:auto;margin-top:4px}

/* tipo de cuenta del retiro */
.tipo-row{display:flex;gap:8px}
.tipo-row button{
  flex:1 1;border-radius:13px;padding:9px 6px;cursor:pointer;text-align:center;
  background:var(--wash);border:1px solid var(--stroke);transition:.12s;
  display:flex;flex-direction:column;gap:1px;
}
.tipo-row button.on{border-color:var(--txt);background:var(--glass)}
.tipo-row button b{font-size:.79rem;font-weight:700;color:var(--muted)}
.tipo-row button.on b{color:var(--txt)}
.tipo-row button span{font-size:.63rem;color:var(--faint)}

/* etiqueta con contador de dígitos */
.field label.lbl-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.field label .cnt{font-size:.64rem;font-weight:700;color:var(--faint);letter-spacing:0;text-transform:none}
.field label .cnt.ok{color:var(--s-good)}

/* botón pequeño tipo chip */
.chip-btn{
  border-radius:8px;padding:4px 9px;font-size:.65rem;font-weight:700;cursor:pointer;
  background:var(--glass);border:1px solid var(--stroke);color:var(--txt);
}
.chip-btn:active{transform:scale(.95)}

/* Acciones de la billetera: con un solo botón ocupa todo el ancho; con dos,
   se reparten. Un grid de 2 columnas dejaba media fila vacía cuando el
   usuario no es promotor y no ve "Retirar". */
.wal-acts{display:flex;gap:10px}
.wal-acts .btn{flex:1 1;width:auto;min-width:0}

/* ───────── cabecera y cuerpo de tarjeta ─────────
   Existían solo dentro de .adm, así que al usarlas en el portal el contenido
   quedaba pegado al borde: .card aquí solo define el redondeo. */
.app .card-h{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 16px 0;
}
.app .card-h b{font-size:.88rem;font-weight:700;letter-spacing:-.01em}
.app .card-h .sp{flex:1 1}
.app .card-b{padding:4px 16px 12px}

/* ───────── única zona que se desplaza ─────────
   Se listan las clases una por una a propósito: .screen también contiene los
   .overlay de las hojas, y darles overflow los rompería. */
.screen > .home-body,
.screen > .saldo-body,
.screen > .perf-body,
.screen > .det-body,
.screen > .login-body{
  flex:1 1;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
/* El login centra su contenido en vertical, así que un hueco al final se lo
   sube. Se queda con el relleno de siempre, que ahí no estorba: no hay una
   lista larga que llegue hasta abajo. */
.screen > .login-body{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
/* El hueco para que el último elemento no quede bajo la barra flotante.
   Era un `padding-bottom` y en el Safari del iPhone no servía de nada: en un
   contenedor flex en columna que además hace scroll, el relleno de abajo NO
   cuenta como parte de lo desplazable, así que al llegar al final la última
   tarjeta quedaba pegada al borde y el menú se la comía. Es un fallo viejo de
   WebKit; Chrome lo arregló hace poco y Safari no.

   Un elemento de verdad sí cuenta. Este no pinta nada, solo ocupa. */
.screen > .home-body::after,
.screen > .saldo-body::after,
.screen > .perf-body::after,
.screen > .det-body::after{
  content:"";display:block;flex-shrink:0;
  height:calc(110px + env(safe-area-inset-bottom));
}
/* Los hijos conservan su alto natural.
   En una columna flex que además hace scroll, flex-shrink vale 1 por defecto:
   si el contenido no cabe, el navegador APLASTA las tarjetas en lugar de
   dejarlas enteras y desplazar. Con overflow:hidden encima —como en la tarjeta
   de saldo, que lo necesita para el brillo del fondo— el resultado no es una
   tarjeta apretada sino el contenido recortado a media línea. */
.screen > .home-body > *,
.screen > .saldo-body > *,
.screen > .perf-body > *,
.screen > .det-body > *,
.screen > .login-body > *{flex-shrink:0}

.screen > .home-body::-webkit-scrollbar,
.screen > .saldo-body::-webkit-scrollbar,
.screen > .perf-body::-webkit-scrollbar,
.screen > .det-body::-webkit-scrollbar,
.screen > .login-body::-webkit-scrollbar{display:none}

/* el login se centra; solo se desplaza si el contenido no cabe */
.screen > .login-body{
  justify-content:center;
  padding-bottom:calc(28px + env(safe-area-inset-bottom));
}

/* ───────── tarjeta del código en el perfil ───────── */
.cod-card{padding:18px;display:flex;flex-direction:column;gap:15px}
.cod-h{display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center}
.cod-h > b{
  font-size:2rem;font-weight:800;letter-spacing:.18em;color:var(--txt);
  line-height:1.1;word-break:break-all;
}
.cod-acts{display:flex;gap:8px;align-items:stretch}
.cod-acts .btn{flex:1 1 auto;width:auto;min-width:0}
/* El ancho se fija en la BASE flex, no con aspect-ratio: en un elemento flex
   cuya base se resuelve desde el contenido, aspect-ratio no gobierna el ancho,
   así que el botón quedaba del ancho del icono y estirado a lo alto.
   La altura sigue viniendo del principal por el stretch de la fila. */
.cod-acts .btn.ico{
  flex:0 0 46px;width:46px;height:auto;padding:0;
}
/* ───────── las dos partes del trato ─────────
   El lado del invitado va destacado con el amarillo de marca: es el argumento
   que convence a quien recibe el enlace, no la comisión de quien lo manda.
   minmax(0,1fr) para que un porcentaje largo no ensanche su columna. */
.balanza{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:8px;gap:8px}
.balanza .lado{
  min-width:0;border-radius:15px;padding:13px 12px;
  display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center;
  background:var(--wash);border:1px solid var(--stroke);
}
.balanza .lado.suyo{background:var(--mio-bg);border-color:var(--solid)}
.balanza .k{
  font-size:.62rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);
}
.balanza .q{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.balanza .lado.suyo .q{color:var(--solid-ink)}
.balanza .d{font-size:.68rem;color:var(--muted);line-height:1.4;text-wrap:balance}

/* Los accesos del programa, como una lista y no como losas sueltas.
   Antes cada fila llevaba su propio --wash y su propio --stroke, los mismos
   que la tarjeta que ya las envuelve y los mismos que el chip del icono que
   va dentro: tres cajas iguales anidadas, y el chip quedaba a 4,75 puntos de
   luminosidad de su fondo, es decir invisible. Ahora el borde y el relleno
   los pone el grupo una sola vez, y las filas van transparentes con una
   divisoria fina, igual que la lista de ajustes de más abajo. */
.cod-links{
  display:flex;flex-direction:column;
  border-radius:13px;border:1px solid var(--stroke);overflow:hidden;
  /* Sin relleno propio a propósito: el chip del icono es --wash, y ponerle
     fondo al grupo le sube el suelo y lo vuelve a aplanar. Así el chip queda
     sobre el cristal de la tarjeta, exactamente como en la lista de ajustes
     de abajo, que es la que se ve bien. */
}
.cod-link{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;cursor:pointer;
  background:transparent;border:none;border-bottom:1px solid var(--hair);
  transition:background .12s;
}
.cod-link:last-child{border-bottom:none}
.cod-link:hover{background:var(--wash)}
.cod-link .who{flex:1 1;display:flex;flex-direction:column;gap:1px;min-width:0}
.cod-link .who b{font-size:.84rem;font-weight:600}
.cod-link .who span{font-size:.68rem;color:var(--faint)}
.cod-link > svg.ic{width:.9rem;height:.9rem;color:var(--faint);flex-shrink:0}
/* el campo de edición hereda el aspecto del código */
.ref-code input{
  flex:1 1;min-width:0;background:none;border:none;outline:none;color:var(--txt);
  font-size:1.1rem;letter-spacing:.16em;
}

/* ───────── aviso bloqueante ─────────
   Centrado, no como hoja: las hojas se cierran deslizando sin querer, y esto
   protege una acción irreversible. */
.conf-bg{align-items:center;padding:24px}
.conf{
  width:100%;max-width:330px;border-radius:22px;padding:22px 20px 18px;
  display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;
  background:var(--panel);border:1px solid var(--stroke-hi);
  box-shadow:inset 0 1px 0 var(--gloss),0 24px 60px rgba(0,0,0,.5);
  animation:confIn .16s cubic-bezier(.2,.9,.3,1);
}
@keyframes confIn{from{opacity:0;transform:scale(.94) translateY(8px)}}
@media (prefers-reduced-motion:reduce){.conf{animation:none}}
.conf-ic{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
/* 1.5rem y no 1.25: los trazos de este juego de iconos ocupan unas tres
   cuartas partes de su caja, así que a 1.25rem el dibujo se quedaba en el 35%
   del círculo y parecía suelto en medio. Ahora ronda el 40%, que es la
   proporción a la que un icono dentro de una pastilla se lee centrado. */
.conf-ic svg.ic{width:1.5rem;height:1.5rem}
.conf-ic.warn{color:var(--s-warn);background:color-mix(in oklab,var(--s-warn) 14%,transparent)}
.conf-ic.crit{color:var(--s-crit);background:color-mix(in oklab,var(--s-crit) 14%,transparent)}
.conf-ic.info{color:var(--txt);background:var(--wash)}
.conf > b{font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
.conf-msg{font-size:.79rem;line-height:1.55;color:var(--muted)}
.conf-msg b{color:var(--txt)}
.conf-acts{display:flex;gap:8px;width:100%;margin-top:4px}
.conf-acts .btn{flex:1 1;width:auto;min-width:0}

/* ───────── movimientos de la billetera ───────── */
/* ───────── cabecera de movimientos ─────────
   Título y filtros en la misma fila. Los selectores van sin caja: como
   controles en línea pesan menos que dos campos de formulario y dejan el
   protagonismo al contenido. */
.mov-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 16px 0;
}
.mov-head > b{font-size:.88rem;font-weight:700;letter-spacing:-.01em;flex-shrink:0}
.mov-sel{display:flex;gap:4px;margin-left:auto;min-width:0}
.mov-sel .ui-sel{
  width:auto;min-width:0;background:none;border-color:transparent;
  font-size:.71rem;font-weight:600;padding:4px 6px;color:var(--muted);
}
.mov-sel .ui-sel:hover{color:var(--txt);background:var(--wash)}
.mov-sel .ui-sel[data-state="open"]{color:var(--txt);background:var(--wash);border-color:var(--stroke)}
.mov-sel .ui-sel-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mov-sel .ui-sel-arrow{margin-left:2px}

/* resumen del periodo */
.mov-resumen{
  display:flex;gap:8px;margin:12px 16px 0;
  padding:11px 12px;border-radius:13px;
  background:var(--wash);border:1px solid var(--stroke);
}
.mov-resumen .mr{flex:1 1;display:flex;flex-direction:column;gap:2px;min-width:0}
.mov-resumen .mr b{font-size:.86rem;font-weight:700}
.mov-resumen .mr b.pos{color:var(--s-good)}
.mov-resumen .eyebrow{font-size:.56rem;letter-spacing:.1em}


/* cifra del movimiento y saldo resultante */
.mov-cifras{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0}
.mov-cifras b{font-size:.85rem;font-weight:700}
.mov-cifras span{font-size:.63rem;color:var(--faint)}
.mov-mas{width:100%;margin-top:12px}

/* ───────── ranking de participantes ───────── */
.puesto{
  width:26px;height:26px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;
  color:var(--faint);background:var(--wash);border:1px solid var(--stroke);
}
/* los tres primeros destacan sin medallas de colores */
.puesto.podio{color:var(--txt);border-color:var(--stroke-hi)}

/* Tu fila se marca con el puesto en sólido, no con un bloque de fondo: pintar
   la fila entera dejaba un rectángulo gris con el borde de la tarjeta alrededor
   y parecía un fallo de maquetación. */
.part-row.yo .puesto{background:var(--solid);color:var(--solid-txt);border-color:transparent}
.part-row.yo .who > b{color:var(--txt)}

/* Sin anclar a .part-row: la misma línea de «ciudad, estado» se usa ahora en
   la ficha del ganador de la página de resultados. Estaba escrita solo para la
   lista de participantes y era exactamente el mismo elemento. */
.lugar{
  display:flex;align-items:center;gap:4px;
  font-size:.66rem;line-height:1.3;color:var(--faint);min-width:0;
}
.lugar svg.ic{width:.7rem;height:.7rem;flex-shrink:0;opacity:.8}
.lugar > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* el conteo, alineado a la derecha y sin competir con el nombre */
.part-row .numchip{flex-shrink:0}

/* importe aún no revelado: mismo hueco, sin decir la cifra */
.paga-row b.oculto{color:var(--faint);letter-spacing:.22em}

/* ───────── promoción del sorteo ─────────
   Con forma de vale: talón amarillo con la cifra y cuerpo con la explicación.
   El borde discontinuo lo emparenta con el troquel de un cupón, que es
   exactamente lo que es. */
.promo-box{
  display:flex;align-items:stretch;flex-shrink:0;overflow:hidden;
  border-radius:16px;background:var(--mio-bg);
  border:1px dashed var(--solid);
}
.promo-box .pb-talon{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex-shrink:0;min-width:78px;padding:13px 12px;line-height:1;
  background:var(--solid);color:var(--solid-txt);
}
.promo-box .pb-talon b{font-size:1.45rem;font-weight:800;letter-spacing:-.04em}
.promo-box .pb-talon > span{
  font-size:.53rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin-top:4px;opacity:.72;
  text-align:center;text-wrap:balance;
}
.promo-box .pb-tx{
  flex:1 1;min-width:0;display:flex;flex-direction:column;gap:3px;
  justify-content:center;padding:12px 14px;
}
.promo-box .pb-tx b{
  display:flex;align-items:center;gap:6px;
  font-size:.81rem;font-weight:700;letter-spacing:-.01em;
}
.promo-box .pb-tx b svg.ic{width:.85rem;height:.85rem;color:var(--solid-ink);flex-shrink:0}
/* pre-line para que los mensajes puedan partir en varias líneas desde el
   texto, sin necesidad de marcado. */
.promo-box .pb-tx > span{
  font-size:.72rem;color:var(--muted);line-height:1.45;white-space:pre-line;
}

/* El crédito ya concedido no es un anuncio: es algo que el usuario ya tiene,
   así que va en sólido y sin troquel. */
.promo-box.tuyo{background:var(--solid);border:1px solid transparent;align-items:center;gap:11px;padding:12px 14px}
.promo-box.tuyo .pb-ic{
  width:34px;height:34px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.14);color:var(--solid-txt);
}
.promo-box.tuyo .pb-ic svg.ic{width:1rem;height:1rem}
.promo-box.tuyo .pb-tx{padding:0}
.promo-box.tuyo .pb-tx b,
.promo-box.tuyo .pb-tx > span{color:var(--solid-txt)}
.promo-box.tuyo .pb-tx > span{opacity:.8}

/* ───────── promoción en la lista de sorteos ─────────
   Dos piezas con papeles distintos: la cinta se ve desde lejos y dice que hay
   algo; la pastilla dice qué.

   Ninguna usa .chip a propósito. La versión anterior sí, y heredaba de
   «.art .chip» un top:12px que, junto al bottom que yo añadía, estiraba el
   elemento de arriba abajo hasta tapar media portada. */
.sorteo-card .cinta{
  position:absolute;top:15px;right:-36px;z-index:2;
  transform:rotate(38deg);transform-origin:center;
  padding:5px 42px;
  background:var(--solid);color:var(--solid-txt);
  font-size:.6rem;font-weight:800;letter-spacing:.14em;text-align:center;
  box-shadow:0 3px 12px rgba(0,0,0,.35);
  pointer-events:none;
}
/* La recorta el overflow:hidden de la tarjeta, que es lo que le da el aire de
   cinta cosida a la esquina. */

.sorteo-card .promo-tag{
  position:absolute;bottom:12px;left:12px;z-index:2;
  display:flex;align-items:stretch;overflow:hidden;
  border-radius:10px;box-shadow:0 3px 12px rgba(0,0,0,.35);
  pointer-events:none;
}
.sorteo-card .promo-tag .n{
  display:flex;align-items:center;padding:5px 9px;
  background:var(--solid);color:var(--solid-txt);
  font-size:.78rem;font-weight:800;letter-spacing:-.02em;
}
.sorteo-card .promo-tag .t{
  display:flex;align-items:center;padding:5px 10px;
  background:rgba(0,0,0,.72);color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:.66rem;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;white-space:nowrap;
}

/* ───────── mis números ─────────
   Acordeón: cada sorteo es un renglón y solo se despliega el que interesa. Con
   49 casillas en uno solo, mostrarlos todos de golpe deja la pantalla
   imposible de recorrer. */
/* ── «Mis jugadas»: una pestaña por modalidad ──
   Las mismas tres de la barra de abajo y en el mismo orden, así que no hay
   vocabulario nuevo. Separadas y no mezcladas porque no son la misma cosa: un
   sorteo tiene fecha y casillas, una jornada tiene hora y cifras, y un cartón
   no tiene fecha —se decide al rascarlo—. */
.app .mj-tabs{
  display:flex;gap:4px;flex-shrink:0;margin-bottom:2px;
  background:var(--wash-2);border:1px solid var(--stroke);border-radius:12px;padding:3px;
}
.app .mj-tabs button{
  flex:1 1;border:0;background:none;color:var(--muted);border-radius:9px;padding:8px 4px;
  font-size:.72rem;font-weight:700;cursor:pointer;min-width:0;
  display:flex;align-items:center;justify-content:center;gap:5px;
}
.app .mj-tabs button.on{background:var(--solid);color:var(--solid-txt)}
/* La cuenta dice dónde hay algo sin tener que entrar a mirar. */
.app .mj-tabs button i{
  font-style:normal;font-size:.62rem;font-weight:700;opacity:.62;
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
}

/* Las jugadas de una jornada, dentro de su tarjeta. */
.app .mj-bets{display:flex;flex-direction:column;gap:6px}
.app .mj-bet{
  display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:10px;
  background:var(--wash);border:1px solid var(--hair);
}
.app .mj-bet.gano{background:rgba(61,190,110,.1);border-color:rgba(61,190,110,.28)}
.app .mj-bet .n{
  font-size:.9rem;font-weight:700;letter-spacing:.03em;min-width:38px;color:var(--txt);
}
.app .mj-bet .t{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:1px}
.app .mj-bet .t b{font-size:.7rem;font-weight:600}
.app .mj-bet .t span{font-size:.55rem;color:var(--faint)}
.app .mj-bet .p{font-size:.76rem;font-weight:700;flex-shrink:0}
.app .mj-bet .p.gana{color:#3DBE6E}

/* Las cuentas de una serie de cartón: tres cifras en fila. */
.app .mj-cuenta{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:7px;gap:7px}
.app .mj-cuenta > div{
  display:flex;flex-direction:column;gap:1px;padding:8px 9px;border-radius:10px;
  background:var(--wash);border:1px solid var(--hair);
}
.app .mj-cuenta span{
  font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:700;
}
.app .mj-cuenta b{font-size:.86rem;font-weight:700;letter-spacing:-.01em}
.app .mj-cuenta b.ok{color:#3DBE6E}
.app .mn-pie b.ok{color:#3DBE6E}

.mn-lista{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.mn-g{overflow:hidden}
.mn-cab{
  display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;
  background:none;border:none;color:inherit;font:inherit;text-align:left;cursor:pointer;
}
/* El galón apunta hacia abajo en el juego de iconos, así que al abrir gira
   media vuelta. Antes giraba un cuarto y acababa señalando a la izquierda. */
.mn-cab > svg.ic{width:.85rem;height:.85rem;color:var(--faint);
  flex-shrink:0;transition:transform .18s}
.mn-g.ab .mn-cab > svg.ic{transform:rotate(180deg)}

/* La portada del premio: se reconoce el sorteo antes por la foto que por el
   título, sobre todo con varios nombres parecidos. */
.mn-th{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--stroke);color:var(--faint);
  background-size:cover;background-position:center;
}
.mn-th svg.ic{width:1.05rem;height:1.05rem}

.mn-cab .t{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mn-cab .t b{
  font-size:.79rem;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mn-cab .t .m{display:flex;align-items:center;gap:6px;min-width:0;font-size:.63rem}
.mn-cab .t .cu-tx{
  color:var(--faint);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* La cifra con su etiqueta: sola no decía de qué era. */
.mn-cab .c{
  display:flex;flex-direction:column;align-items:center;
  flex-shrink:0;line-height:1;
}
.mn-cab .c b{font-size:1.05rem;font-weight:800;color:var(--solid-ink)}
.mn-cab .c > span{
  font-size:.52rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);margin-top:3px;
}

.mn-cu{border-top:1px solid var(--hair);padding:11px 12px 12px}
.mn-nums{display:flex;flex-wrap:wrap;gap:5px}
.n2{
  display:inline-flex;align-items:center;justify-content:center;min-width:30px;
  border-radius:7px;padding:3px 6px;
  background:var(--wash);border:1px solid var(--stroke);
  font-size:.7rem;font-weight:700;letter-spacing:.03em;
}
/* El número premiado, si te tocó. */
.n2.gan{background:var(--solid);color:var(--solid-txt);border-color:transparent}

.mn-pie{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:11px;padding-top:10px;border-top:1px solid var(--hair);
  font-size:.7rem;color:var(--muted);
}
.mn-pie b{color:var(--txt);font-weight:700}
.mn-lnk{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  font-size:.71rem;font-weight:600;color:var(--solid-ink);cursor:pointer;
}
.mn-lnk svg.ic{width:.78rem;height:.78rem}

/* Sin números todavía: un empujón, no un hueco vacío. */
.vacio-num{
  display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  /* El mismo hueco por los cuatro lados: con 26 arriba y 18 a los lados se
     notaba que el aire de arriba no era el de los costados. */
  border-radius:18px;padding:18px;flex-shrink:0;
  background:var(--wash-2);border:1px dashed var(--stroke-hi);
}
.vacio-num .vn-ic{
  width:44px;height:44px;border-radius:14px;margin-bottom:2px;
  display:flex;align-items:center;justify-content:center;
  background:var(--wash);border:1px solid var(--stroke);color:var(--muted);
}
.vacio-num b{font-size:.92rem;font-weight:700}
.vacio-num > span{font-size:.75rem;color:var(--muted);max-width:28ch;line-height:1.45}
.vacio-num .btn{width:auto;margin-top:6px;padding:11px 20px}

/* La cuenta atrás va en la misma línea que la insignia, así que hereda el
   tamaño; solo se resalta la cifra para que se distinga del texto fijo. */
/* La cuenta atrás con su reloj, sin recuadro: es texto, no una caja.
   La clase se llama .mn-cd y no .cd porque esa ya la usa la cuenta atrás en
   rejilla de la página del sorteo, que sí lleva fondo y borde: al compartir
   nombre, esta línea los heredaba. */
.mn-cab .cu-tx.mn-cd{
  display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
  background:none;border:none;
  color:var(--muted);white-space:nowrap;overflow:visible;
}
.mn-cab .cu-tx.mn-cd svg.ic{width:.7rem;height:.7rem;color:var(--faint)}
.mn-cab .cu-tx.mn-cd b{color:var(--txt);font-weight:700}

/* Confirmación de contraseña cambiada: el mismo círculo que usan los avisos
   de éxito, en verde para que se lea como «hecho» y no como un paso más. */
.rec-ok{
  width:48px;height:48px;border-radius:16px;align-self:center;margin-bottom:4px;
  display:flex;align-items:center;justify-content:center;
  background:var(--s-good);color:#fff;
}
.rec-ok svg.ic{width:1.4rem;height:1.4rem}

/* Enlace apagado: sin nadie activo no lleva a ninguna parte, así que pierde el
   cursor, la reacción al pasar y la flecha, y baja de contraste. Se deja
   visible en vez de ocultarlo para que se entienda que la función existe. */
/* Apagado sin bajar la opacidad de toda la fila: eso volvía ilegible el
   texto que explica por qué no hay a dónde entrar, que es justo lo que hay
   que leer. Se apaga el icono y se quita la respuesta al ratón. */
.cod-link.off{cursor:default}
.cod-link.off:hover{background:transparent}
.cod-link.off .mov-ic{opacity:.45}
.cod-link.off .who b{color:var(--muted);font-weight:500}

/* Resumen de la página de activos: cuántos siguen pagando y cuánto llevan. */
.act-tot{display:flex;gap:8px;flex-shrink:0}
.act-tot .at{
  flex:1 1;min-width:0;border-radius:14px;padding:11px 13px;
  display:flex;flex-direction:column;gap:2px;
  background:var(--wash);border:1px solid var(--stroke);
}
.act-tot .at b{font-size:1.15rem;font-weight:800;letter-spacing:-.02em}
.act-tot .at span{font-size:.64rem;color:var(--faint)}

/* Lo ganado y lo que queda, alineados a la derecha de cada fila. */
.act-fin{
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  flex-shrink:0;text-align:right;
}
.act-fin b{font-size:.85rem;font-weight:700}
.act-fin span{font-size:.63rem;color:var(--faint);white-space:nowrap}

/* ───────── páginas legales ─────────
   El texto se escribe en el panel como texto plano, así que los saltos de
   línea son los que puso quien lo redactó: pre-line los respeta sin obligar a
   escribir HTML. Medida de línea corta, que es un documento para leer. */
.legal{padding:18px}
.legal-tx{
  white-space:pre-line;
  font-size:.82rem;line-height:1.65;color:var(--muted);
  max-width:62ch;
}

/* La casilla que salió de regalo. Mismo hueco y mismas medidas que la fila del
   importe —13px 15px, .84 y .98 rem—, solo cambia el color: es la única fila
   de esta hoja que trae una buena noticia y tiene que leerse como tal. */
.paga-row.regalo{
  background:var(--mio-bg);border-color:var(--solid);color:var(--solid-ink);
}
.paga-row.regalo span{display:flex;align-items:center;gap:7px;font-weight:600}
.paga-row.regalo svg.ic{width:.95rem;height:.95rem;flex-shrink:0}
.paga-row.regalo b{color:var(--solid-ink);font-size:.98rem;font-weight:800}

/* La edición en la tarjeta de un listado: abajo a la derecha, el único rincón
   que no se pelea con el estado, la cinta de promoción ni la pastilla de la
   oferta. Con sombra porque cae sobre una foto cualquiera. */
.sorteo-card .art .ed-chip{
  position:absolute;bottom:12px;right:12px;z-index:2;
  box-shadow:0 3px 12px rgba(0,0,0,.35);pointer-events:none;
}

/* La edición bajo el título del sorteo.
   `.det-head` ya separa a sus hijos con gap:8px, así que estos márgenes se
   SUMAN a ese hueco. El de arriba era negativo —lo dejaba en 4px— y el chip
   acababa pegado al trazo: TituloTrazo pone el subrayado en sus 13px
   inferiores, o sea que ahí abajo no hay aire propio contra el que apoyarse,
   hay dibujo. Con 8px el hueco real es 16px, que es lo que necesitan dos
   piezas del mismo ámbar para no leerse como una sola.
   Abajo 12px (20 en total): la descripción es otro bloque y tiene que
   distinguirse del título con su edición, que van juntos. */
.det-head .det-edicion{margin:8px 0 12px}

/* Resumen de la edición, bajo su título. Mismos tamaños que el resto de textos
   secundarios del portal. */
.ed-resumen{margin:-4px 0 16px;font-size:.8rem;color:var(--muted)}
.ed-resumen b{color:var(--txt);font-weight:650}
.ed-cerrada{color:var(--faint)}

/* ───────── visor de la transmisión ─────────
   Reaprovecha .visor y .visor-top del visor de fotos: misma capa, misma barra,
   mismo botón de cerrar. Solo cambia el centro, que aquí es un vídeo con
   proporción fija en vez de una imagen con zoom. */
.vid-escena{
  flex:1 1;display:flex;align-items:center;justify-content:center;
  padding:0 12px;min-height:0;
}
.vid-marco{
  width:100%;max-width:min(100%,calc((100vh - 190px) * 16 / 9));
  aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;
  border:1px solid rgba(255,255,255,.14);
}
.vid-marco iframe{width:100%;height:100%;border:0;display:block}
.vid-pie{
  flex-shrink:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  font-size:.72rem;color:rgba(255,255,255,.55);
}
.vid-pie > span{flex:1 1;min-width:0;line-height:1.45}
.vid-pie a{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  padding:7px 12px;border-radius:999px;text-decoration:none;
  background:rgba(255,255,255,.12);color:#fff;font-weight:650;
}
.vid-pie a svg.ic{width:.82rem;height:.82rem}
/* Si el vídeo tarda, la salida se destaca en vez de seguir escondida. */
.vid-pie a.urge{background:var(--solid);color:var(--solid-txt)}

/* ───────── botón de la transmisión ─────────
   Discreto por decisión: quien entra viene a rascar, y el sorteo en vivo es
   para quien lo busca. Solo pide atención mientras se está emitiendo. */
.ver-vivo{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:10px;padding:12px;border-radius:12px;
  background:var(--wash);border:1px solid var(--stroke);color:var(--txt);
  font-size:.84rem;font-weight:700;font-family:inherit;cursor:pointer;
}
.ver-vivo svg.ic{width:.95rem;height:.95rem}
.ver-vivo:active{transform:scale(.99);opacity:.85}
/* En directo: rojo y con el punto latiendo. Es el único momento en que este
   botón compite con la tabla de casillas, y dura lo que dura la emisión. */
.ver-vivo.vivo{
  background:var(--s-crit);border-color:var(--s-crit);color:#fff;
}
.ver-vivo .lat{
  width:8px;height:8px;border-radius:50%;background:#fff;flex-shrink:0;
  animation:lat-vivo 1.4s ease-in-out infinite;
}
@keyframes lat-vivo{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){ .ver-vivo .lat{animation:none} }

/* La grabación dentro de cada fecha del historial. */
.rp-video{
  display:inline-flex;align-items:center;gap:6px;width:-moz-fit-content;width:fit-content;margin-top:5px;
  padding:0;background:none;border:0;font-family:inherit;cursor:pointer;
  font-size:.7rem;font-weight:700;color:var(--solid-ink);
}
.rp-video svg.ic{width:.8rem;height:.8rem}
.rp-video:active{opacity:.7}
/* El motivo de un ajuste manual, en la billetera. Va sobre la fecha y con el
   ámbar de la marca: es lo que explica un movimiento que el usuario no pidió. */
.mov-row .what .mov-motivo{color:var(--solid-ink);font-weight:600}

/* ───────── premios por posición ─────────
   El podio es la CABECERA de la tabla de participantes, no una tarjeta aparte:
   quien sale aquí no se repite abajo y las filas siguen numerando desde el 4.º.
   Por eso vive dentro del mismo cristal y por eso apoya en una base que hace de
   costura con la lista. */
.podio{display:flex;align-items:flex-end;gap:7px;padding:16px 14px 0}
.pod{flex:1 1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.pod .av{
  width:32px;height:32px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.62rem;font-weight:700;letter-spacing:.02em;
  background:var(--wash);border:1px solid var(--stroke);color:var(--muted);
  opacity:0;transform:translateY(7px) scale(.86);
  animation:podio-asoma .38s ease-out forwards;
}
.pod.p1 .av{
  width:38px;height:38px;font-size:.7rem;background:var(--solid);color:var(--solid-txt);
  border-color:var(--solid);box-shadow:0 0 0 3px var(--mio-bg);
}
/* Dos renglones: los nombres de pila arriba y los apellidos debajo, en gris.
   Un nombre mexicano completo no cabe en una columna de podio, y cortarlo con
   puntos suspensivos se lleva por delante el apellido, que es justo lo que
   distingue a dos personas. */
.pod .nm{
  font-size:.64rem;color:var(--muted);text-align:center;max-width:100%;
  line-height:1.22;text-wrap:balance;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  opacity:0;animation:podio-asoma .38s ease-out forwards;
}
.pod .nm .ape{display:block;font-size:.58rem;color:var(--faint)}
.pod.yo .nm .ape{color:var(--muted)}
.pod.yo .nm{color:var(--txt);font-weight:650}
/* El escalón, en dos plantas: arriba el puesto y el importe, abajo la banda con
   las casillas.

   El contenido se ancla al FONDO (`flex-end`) a propósito. La caja recorta lo
   que sobra, y anclando abajo lo que se pierde es el «3º» de arriba —que la
   forma del escalón ya dice— en vez de la banda de casillas, que es el dato.
   Con `center` se comía justo la banda del tercer puesto, que es el más bajo. */
.pod .bl{
  width:100%;border-radius:11px 11px 0 0;background:var(--wash);
  border:1px solid var(--stroke);border-bottom:0;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:0;animation:podio-sube .62s cubic-bezier(.22,1,.36,1) forwards;
}
.pod .bl .arr{display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:6px 4px 4px;flex-shrink:0}
.pod .bl i{font-style:normal;font-size:.58rem;font-weight:700;letter-spacing:.04em;color:var(--faint)}
.pod .bl b{font-size:.84rem;font-weight:800;color:var(--solid-ink);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.pod .bl b.pagado{color:var(--ok)}
/* La banda del pie. `flex-shrink:0` para que nunca sea ella la que ceda. */
.pod .sotano{
  width:100%;flex-shrink:0;padding:3px 2px;text-align:center;
  background:rgba(0,0,0,.28);border-top:1px solid var(--stroke);
  font-size:.55rem;font-weight:700;color:var(--muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;
}
.pod.p1 .bl{background:var(--mio-bg);border-color:var(--solid)}
.pod.p1 .bl b{font-size:.98rem}
/* La banda del primero va en sólido: remata el podio por abajo y distingue al
   ganador sin leer nada. */
.pod.p1 .sotano{background:var(--solid);color:var(--solid-txt);border-top-color:transparent}
.pod.yo .bl{box-shadow:inset 0 0 0 1px var(--solid)}

/* Alturas en `em` y no en píxeles: el contenido son tres renglones de texto, así
   que crece con el tamaño de letra del sistema. Con valores fijos, alguien con
   la letra grande volvía a perder la banda por debajo del recorte.
   El tercer escalón lleva justo lo que mide su contenido; los otros dos le
   suman el pedestal que los diferencia. */
.pod.p3{--pod-h:4.2em} .pod.p2{--pod-h:5.3em} .pod.p1{--pod-h:6.5em}
.pod.p3 .bl{animation-delay:.05s} .pod.p3 .av,.pod.p3 .nm{animation-delay:.34s}
.pod.p2 .bl{animation-delay:.24s} .pod.p2 .av,.pod.p2 .nm{animation-delay:.53s}
.pod.p1 .bl{animation-delay:.45s} .pod.p1 .av,.pod.p1 .nm{animation-delay:.78s}
@keyframes podio-sube{from{height:0}to{height:var(--pod-h)}}
@keyframes podio-asoma{to{opacity:1;transform:none}}
/* Quien pidió menos movimiento ve el podio ya montado, sin escalones subiendo. */
@media (prefers-reduced-motion: reduce){
  .pod .bl,.pod .av,.pod .nm{animation-duration:1ms;animation-delay:0s}
}

/* La costura entre el podio y la primera fila. Sin ella el 4.º parece colgado
   de los escalones en vez de continuar la lista. */
.podio-base{height:5px;margin:0 14px;background:var(--wash);
  border-top:1px solid var(--stroke);border-radius:0 0 4px 4px}

/* Fichas planas: cuando hay premio para tres pero todavía no hay tres personas.
   Un escalón vacío se ve averiado; una ficha libre se lee como una invitación. */
.podio-fichas{display:flex;gap:7px;padding:13px 13px 4px}
.pfi{
  flex:1 1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:11px 7px;border-radius:14px;background:var(--wash);border:1px solid var(--stroke);
}
.pfi.p1{background:var(--mio-bg);border-color:var(--solid)}
.pfi.libre{opacity:.5;border-style:dashed}
.pfi.yo{box-shadow:inset 0 0 0 1px var(--solid)}
.pfi .av{
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.6rem;font-weight:700;background:var(--wash-2);border:1px solid var(--stroke);color:var(--muted);
}
.pfi.p1 .av{background:var(--solid);color:var(--solid-txt);border-color:var(--solid)}
.pfi .p{font-size:.55rem;font-weight:800;letter-spacing:.08em;color:var(--faint)}
.pfi.p1 .p{color:var(--solid-ink)}
.pfi .nm{font-size:.62rem;color:var(--muted);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize}
.pfi.yo .nm{color:var(--txt);font-weight:650;text-transform:none}
.pfi .cas{font-size:.55rem;font-weight:600;color:var(--faint);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.pfi.p1 .cas{color:var(--solid-ink);opacity:.75}
.pfi .mo{font-size:.8rem;font-weight:800;color:var(--solid-ink);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.pfi .mo.pagado{color:var(--ok)}

/* El importe dentro de la fila, del 4.º en adelante. */
.pf-p{
  flex-shrink:0;min-width:44px;text-align:right;font-size:.7rem;font-weight:700;
  color:var(--solid-ink);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;
}
.pf-p.gris{color:var(--faint);font-weight:500}
.pf-p.pagado{color:var(--ok)}
/* Una fila que cobra, sin ser la de quien mira ni la del ganador. */
.pfila.premia{background:var(--mio-bg);border-radius:8px;margin:0 -7px;
  padding-left:7px;padding-right:7px;border-bottom-color:transparent}

/* Dos filas resaltadas seguidas comparten fondo y se pegan: las esquinas
   redondeadas desaparecen justo donde se tocan y las dos se leen como un solo
   bloque de color. Un respiro vertical le devuelve su forma a cada una.

   Son elementos flex, así que estos márgenes NO se colapsan: entre dos
   resaltadas quedan seis píxeles, y tres contra una fila normal. Los extremos
   de la lista se quedan a cero para no descuadrar el relleno de la tarjeta. */
.pfila.yo,.pfila.ganador,.pfila.premia{margin-top:3px;margin-bottom:3px}
.plista > .pf-wrap:first-child > .pfila{margin-top:0}
.plista > .pf-wrap:last-child > .pfila{margin-bottom:0}
/* El envoltorio que permite meter el corte de «hasta aquí se cobra» entre filas
   sin romper el borde inferior de cada una. */
.pf-wrap{display:contents}

/* El desempate, bajo la tabla. Solo aparece cuando hay premios de por medio. */
.pdesemp{
  display:flex;gap:8px;align-items:flex-start;padding:10px 13px;
  border-radius:14px;background:var(--wash-2);border:1px solid var(--hair);
}
.pdesemp svg.ic{width:.85rem;height:.85rem;flex-shrink:0;margin-top:2px;color:var(--faint)}
.pdesemp span{font-size:.7rem;color:var(--muted);line-height:1.5}
.pdesemp b{color:var(--txt);font-weight:650}

/* ───────── la hoja de «te falta saldo» ─────────
   Recoge lo que antes eran dos tarjetas sueltas en la página del sorteo: el
   talón rojo con la cifra que falta y la bienvenida con su oferta. */
.falta-h{text-align:center;display:flex;flex-direction:column;gap:5px}
/* `balance` reparte los dos renglones por igual. Sin él, el último trozo —«extra»,
   «$0.00.»— caía solo en la segunda línea, en mitad del vacío, y parecía un
   error de maqueta. El ancho tope evita además renglones tan largos que la
   frase deje de leerse como un bloque centrado. */
.falta-h .h2,.falta-h .sub{text-wrap:balance;max-width:34ch;margin-inline:auto}
.falta-h .sub{line-height:1.5}
.falta-h .sub b{color:var(--txt)}

/* Lo cerca que está de poder rascar. Una barra casi llena convierte «no puedes»
   en «te falta poco», que es lo que de verdad pasa. */
.falta-barra{
  border-radius:15px;background:var(--wash-2);border:1px solid var(--stroke);
  padding:13px 14px;display:flex;flex-direction:column;gap:8px;
}
.falta-barra .fb-h{display:flex;align-items:baseline;gap:8px;font-size:.72rem;color:var(--faint)}
.falta-barra .fb-h .sp{flex:1 1}
.falta-barra .fb-h b{font-size:.94rem;font-weight:800;color:var(--txt)}
.falta-barra .fb-b{height:8px;border-radius:99px;background:var(--wash);overflow:hidden}
.falta-barra .fb-b i{display:block;height:100%;border-radius:99px;background:var(--solid)}
.falta-barra .fb-p{display:flex;justify-content:space-between;font-size:.66rem;color:var(--faint)}
.falta-barra .fb-x{color:var(--s-crit);font-weight:700}

/* La oferta de bienvenida dentro de la hoja. Mismo troquel que las promociones
   del portal, para que se lea como lo que es: un regalo, no un aviso. */
.falta-oferta{
  border-radius:16px;background:var(--mio-bg);border:1px dashed var(--solid);
  padding:14px;display:flex;flex-direction:column;gap:4px;text-align:center;
}
.falta-oferta .eyebrow{color:var(--solid-ink)}
.falta-oferta h4{
  margin:0;font-size:1rem;font-weight:750;letter-spacing:-.01em;line-height:1.3;
  text-wrap:balance;max-width:30ch;margin-inline:auto;
}
.falta-oferta h4 b{color:var(--solid-ink);font-weight:750}
.falta-oferta p{margin:0;font-size:.7rem;color:var(--muted);text-wrap:balance}



/* ───────── cabecera de la tarjeta de participantes ─────────
   Qué se reparte y en qué se cobra, antes de que nadie llegue a las cifras. Un
   premio en saldo no es dinero en el banco, y confundirlos es la queja que
   llega después. Va dentro de la tarjeta y no junto al título de la sección
   porque pertenece a esta tabla, no al encabezado. */
.pp-cab{
  display:flex;flex-direction:column;gap:2px;
  padding:11px 14px;border-bottom:1px solid var(--hair);
}
.pp-cab b{
  display:flex;align-items:center;gap:6px;
  font-size:.78rem;font-weight:700;letter-spacing:-.01em;
}
.pp-cab b svg.ic{width:.82rem;height:.82rem;flex-shrink:0;color:var(--solid-ink)}
/* Con la comisión el premio SÍ sale al banco: es otra noticia y va en verde,
   para que no se lea como el aviso de siempre.

   `--ok` y no `--s-good`: el segundo es un verde oscuro pensado para fondos
   claros, y sobre el negro del portal se apaga hasta parecer gris. `--ok` es el
   que el resto de la app ya usa para lo positivo —los importes ya pagados, sin
   ir más lejos—. */
.pp-cab.retira b svg.ic{color:var(--ok)}
.pp-cab > span{font-size:.68rem;color:var(--muted);line-height:1.5;text-wrap:pretty}

/* El tipo de saldo, resaltado. Es el dato que la gente confunde —creer que un
   premio en saldo es dinero en el banco— y dentro de una frase gris no se veía.
   Va como pastilla y no solo coloreado: el fondo lo separa de la frase sin
   necesidad de subir el peso de la letra. */
.pp-cab .tipo{
  font-style:normal;font-weight:700;
  padding:1px 6px;border-radius:6px;white-space:nowrap;
  background:var(--mio-bg);color:var(--solid-ink);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--solid) 30%,transparent);
}
.pp-cab.retira .tipo{
  background:color-mix(in oklab,var(--ok) 15%,transparent);color:var(--ok);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--ok) 32%,transparent);
}

/* La consecuencia, en su propio renglón para que se lea entera y no partida.
   Solo se resalta cuando es buena noticia: «no es retirable» es una limitación,
   se dice claro pero no se celebra con color. */
.pp-cab .cola{margin-top:1px;font-size:.68rem;line-height:1.5;color:var(--faint)}
.pp-cab .cola.fuerte{color:var(--ok);font-weight:650}

/* ───────── el logo de la lotería ─────────
   Va donde el resultado necesita respaldo: la fecha del sorteo y cada acta. Es
   pequeño a propósito —acompaña al nombre, no compite con él— y con el fondo
   claro porque casi todos los logos oficiales vienen sobre blanco. */
.lot-linea{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.lot-mini{
  width:15px;height:15px;border-radius:4px;object-fit:contain;flex-shrink:0;
  background:#fff;padding:1px;
}
/* El resultado oficial completo bajo el acta: la cifra contrastable con la
   publicación de la lotería. En pequeño, porque el dato que se busca es el
   número que jugaba, y esto es la prueba de dónde salió. */
/* La frase va en la tipografía normal y SOLO el número en monoespaciada. Tenerla
   entera en mono ensanchaba las palabras hasta hacerla saltar de línea en un
   móvil, y el monoespaciado solo hace falta donde hay cifras. */
.rp-of{display:block;margin-top:3px;font-size:.66rem;color:var(--faint);line-height:1.45}

/* El resultado oficial en el acta, con las cifras que juegan marcadas.
   Sin esto había que contar dígitos para saber de dónde sale el número de la
   tabla.

   Solo color y un punto de grosor: NADA de fondo, relleno ni esquinas. La
   primera versión llevaba pastilla y el relleno separaba las dos últimas cifras
   de las tres primeras, así que un número se leía como dos. Aquí funciona
   porque la línea va en monoespaciada —todos los dígitos ocupan lo mismo— y
   subir el grosor no mueve ni un píxel: el número sigue siendo uno. */
.rp-of .of-n{
  /* El número es uno solo: partido entre dos líneas deja de leerse como tal. */
  white-space:nowrap;
  color:var(--muted);font-weight:700;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;
}
/* Las cifras que juegan se distinguen SOLO por el color: mismo cuerpo, mismo
   trazo, mismo espaciado que el resto del número.

   El `font-size: inherit` es imprescindible y no es defensivo: unas líneas más
   arriba, `.repes .rp-t b` pone .81rem a cualquier <b> de esta tarjeta, y esta
   línea va a .63rem. Misma especificidad, así que sin reponer el tamaño aquí
   ganaba aquella y las dos últimas cifras salían un 28% más grandes — el número
   parecía dos. Lo mismo con el interletraje. */
.rp-of .of-n b{
  color:var(--solid-ink);
  font-size:inherit;font-weight:inherit;letter-spacing:inherit;
}

/* ───────── cuenta atrás en la tarjeta del listado ─────────
   Comparte renglón con la fecha: a la izquierda cuándo, a la derecha cuánto
   falta. Ese hueco estaba vacío, así que la urgencia no cuesta una línea. */
.cd-fila{align-items:baseline;gap:10px}
.cd-fila .sub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-falta{
  flex-shrink:0;font-size:.72rem;font-weight:700;color:var(--txt);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* El último día en ámbar: es cuando queda poco de verdad. */
.cd-falta.urge{color:var(--solid-ink)}

/* ═══════════════════════════════════════════════════════════════════
   CHANCE · el tablero y la jornada

   Una jornada NO usa la tarjeta del sorteo, y no es capricho: la tarjeta se
   apoya en la foto del premio y en la barra de casillas vendidas, y aquí no
   existe ninguna de las dos. Lo que hay es una hora y unas cifras, así que la
   hora ocupa el sitio de la portada, las cifras hacen de imagen y la cuenta
   atrás sustituye a la barra de progreso: sin tabla que llenar, la urgencia es
   el reloj.

   Escala de esta sección, para no inventar valores intermedios:
   texto  .58 · .66 · .74 · .82 · .95 · 1.2 · 1.7 · 2.4 rem
   hueco  4 · 6 · 10 · 14 · 20 px      radio 8 · 12 · 16 · 999
   ═══════════════════════════════════════════════════════════════════ */

/* ── el bloque de la portada ── */





.app .ch-todas{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  border-top:1px solid var(--hair);padding:10px 0 8px;
  font-size:.66rem;font-weight:700;color:var(--solid-ink);
  background:none;border-left:0;border-right:0;border-bottom:0;cursor:pointer;
}
.app .ch-todas svg.ic{width:.9rem;height:.9rem}

/* ── la lista completa ── */
.app .ch-tablero{display:flex;flex-direction:column;flex-shrink:0}
.app .ch-dia{
  display:flex;align-items:center;gap:10px;padding:20px 0 6px;
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--faint);
}
.app .ch-dia i{flex:1 1;height:1px;background:var(--stroke)}
/* Pegado al carril: sus 20 de arriba son para separarlo de una tarjeta, y
   debajo del carril —que ya trae su propio hueco— quedaba el doble de aire. */
.app .cha-carril + .ch-dia{padding-top:6px}

/* ── las jornadas, por día ──
   Un carril de días arriba y, debajo, un bloque por sorteo con la lotería de
   título. Cada tarjeta del carril enseña sus horas de cierre, así se sabe qué
   hay en un día sin pulsarlo. */
.app .cha-carril{
  display:flex;gap:8px;overflow-x:auto;padding:14px 2px 6px;margin:0 -2px;
  scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior-x:contain;
}
.app .cha-carril::-webkit-scrollbar{display:none}
.app .cha-carril button{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;flex:0 0 auto;width:92px;text-align:left;cursor:pointer;scroll-snap-align:center;
  border:1px solid var(--stroke);background:var(--wash-2);color:inherit;font:inherit;
  border-radius:14px;padding:9px 10px;display:flex;flex-direction:column;gap:6px;
  transition:background .15s,border-color .15s;
}
.app .cha-carril button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.app .cha-carril .tp{display:flex;align-items:baseline;justify-content:space-between;gap:4px}
.app .cha-carril small{
  font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted);
}
.app .cha-carril b{font-size:1.1rem;font-weight:700;line-height:1}
.app .cha-carril .hs{display:flex;flex-wrap:wrap;gap:3px}
.app .cha-carril .hs i{
  font-style:normal;font-size:.56rem;font-weight:700;color:var(--faint);
  background:var(--wash);border-radius:5px;padding:1px 4px;
}
/* Un día que ya solo tiene resueltas: se puede abrir, pero no llama. */
.app .cha-carril button.fin:not(.on){background:none;border-style:dashed}
.app .cha-carril button.fin:not(.on) b{color:var(--muted)}
.app .cha-carril button.on{background:var(--mio-bg);border-color:var(--solid)}
.app .cha-carril button.on small,
.app .cha-carril button.on b{color:var(--solid-ink)}
.app .cha-carril button.on .hs i{color:var(--solid-ink);background:rgba(255,185,38,.12)}

.app .ch-dia em{
  font-style:normal;letter-spacing:.04em;text-transform:none;font-weight:600;color:var(--muted);
}

.app .cha-sorteos{display:flex;flex-direction:column;gap:10px}

/* La tarjeta del sorteo: una franja de color y, dentro, una fila por jornada.
   Antes eran dos plantas —la lotería y debajo la jornada con su propio
   marco—, y con una sola jornada, que es lo normal, la segunda repetía lo ya
   dicho al doble de alto. */
.app .cha-tar{
  display:flex;border:1px solid var(--stroke);border-radius:14px;
  background:var(--wash-2);overflow:hidden;color:inherit;
}
/* Con una sola jornada la tarjeta entera es el enlace: se toca donde sea, y
   responde al tacto y al ratón. El ámbar es el color de lo jugable en todo el
   portal, así que al encenderse la tarjeta dice «esto se juega» sin texto. */
.app a.cha-tar,
.app .cha-tar .dw{
  transition:background .16s ease,border-color .16s ease,transform .12s ease;
}
@media (hover:hover){
  /* Solo con ratón: en el móvil el hover se queda pegado tras el toque. */
  .app a.cha-tar:hover{background:var(--wash);border-color:rgba(255,185,38,.42)}
  .app a.cha-tar:hover .rail{background:var(--solid)}
  /* El ámbar solo en las jugables: en una pagada, la pastilla encendida en
     ámbar desentonaba con la franja y el borde, que ya son grises. */
  .app a.cha-tar:not(.ida):hover .que{border-color:rgba(255,185,38,.3);color:var(--txt)}
  .app a.cha-tar.ida:hover .que{border-color:var(--stroke-hi);color:var(--txt)}
  /* Solo cuando la tarjeta NO es el enlace, es decir cuando tiene varias
     jornadas y cada fila va a su sitio: dentro de una tarjeta-enlace ese fondo
     salía como un recuadro detrás del texto. */
  .app div.cha-tar .dw:hover{background:var(--wash)}
  /* La pagada no se enciende en ámbar: ya no se juega. */
  .app a.cha-tar.ida:hover{border-color:var(--stroke-hi);background:var(--wash-2)}
  .app a.cha-tar.ida:hover .rail{background:rgba(255,255,255,.3)}
}
/* El toque: se hunde un poco y se tiñe. Es el mismo gesto que ya hacen las
   filas del tablero, para que no haya dos maneras de responder. */
.app a.cha-tar:active{background:var(--mio-bg);border-color:var(--solid);transform:scale(.99)}
.app a.cha-tar:active .rail{background:var(--solid)}
.app a.cha-tar.ida:active{background:var(--wash);border-color:var(--stroke-hi);transform:scale(.99)}
.app div.cha-tar .dw:active{background:var(--mio-bg)}
.app a.cha-tar:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .app a.cha-tar,
  .app .cha-tar .dw{transition:none}
  .app a.cha-tar:active,
  .app a.cha-tar.ida:active{transform:none}
}
.app .cha-tar .rail{
  flex:0 0 4px;background:linear-gradient(180deg,var(--solid),rgba(255,185,38,.25));
}
.app .cha-tar .in{flex:1 1;min-width:0;padding:11px 13px;display:flex;flex-direction:column;gap:8px}
.app .cha-tar .up{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.app .cha-tar .up b{font-size:.84rem;font-weight:700}
/* `cha-cd` y no `cd`: esa clase ya es la cuenta atrás en rejilla de la página
   del sorteo —display:grid con fondo—, y este texto salía como una barra gris
   estirada que además partía en dos el nombre de la lotería. */
.app .cha-tar .up .cha-cd{
  font-size:.62rem;font-weight:700;color:var(--muted);white-space:nowrap;
  min-height:.9em;flex-shrink:0;
}
.app .cha-tar .up .cha-cd.urge{color:var(--s-crit)}

.app .cha-tar .dw{
  display:flex;align-items:center;gap:8px;color:inherit;border-radius:8px;
  margin:0 -4px;padding:2px 4px;
}
.app .cha-tar .dw + .dw{border-top:1px solid var(--hair);padding-top:8px;margin-top:0}
.app .cha-tar .que{
  font-size:.76rem;font-weight:700;color:var(--muted);flex-shrink:0;
  background:var(--wash);border:1px solid var(--hair);border-radius:7px;padding:3px 7px;
}
/* Una casilla por cifra: es lo que se va a destapar y dice cuántas son. */
.app .cha-tar .cifras{display:flex;gap:3px}
.app .cha-tar .cifras i{
  font-style:normal;font-size:.62rem;font-weight:700;color:var(--solid-ink);
  width:20px;height:22px;border-radius:6px;display:grid;place-items:center;
  background:var(--mio-bg);border:1px solid rgba(255,185,38,.3);
}
.app .cha-tar .nota{font-size:.62rem;color:var(--faint)}
.app .cha-tar .sp{flex:1 1}
.app .cha-tar .mx{font-size:.94rem;font-weight:800;color:var(--solid-ink);letter-spacing:-.02em}

/* Ya pagada: la misma tarjeta con la franja en gris. */
.app .cha-tar.ida .rail{
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06));
}
.app .cha-tar.ida .cha-cd{color:var(--faint)}
.app .cha-tar.ida .mx{font-size:.82rem;font-weight:700}
/* Las cifras que SÍ salieron, con el relieve de una casilla destapada; las que
   la jornada no jugaba, en hueco. */
.app .cha-tar .salio{display:flex;gap:3px}
.app .cha-tar .salio i{
  font-style:normal;font-size:.68rem;font-weight:700;
  width:20px;height:23px;border-radius:6px;display:grid;place-items:center;
  background:var(--cell-grad);border:1px solid var(--cell-stroke);
  box-shadow:var(--cell-shadow-sm);opacity:.62;
}
.app .cha-tar .salio i.off{
  background:none;border-color:var(--hair);color:var(--faint);box-shadow:none;
}

/* ── la jornada ── */
.app .ch-jornada{display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.app .ch-card{padding:14px;display:flex;flex-direction:column;gap:10px;border-radius:16px}
.app .rot{
  font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);font-weight:600;
}
.app .ch-reloj b{font-size:2.4rem;font-weight:700;letter-spacing:-.03em;line-height:1;
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;min-height:1em}
.app .pill{
  font-size:.58rem;font-weight:700;padding:2px 8px;border-radius:999px;
  letter-spacing:.04em;text-transform:uppercase;
}
.app .pill.viva{background:var(--mio-bg);color:var(--solid-ink)}
.app .pill.off{background:var(--wash);color:var(--faint)}

/* Aquí vivía el catálogo de modalidades en columna. Se fue: ahora a qué se
   juega se elige en una hoja, y la pantalla se queda con las cifras. */
/* La modalidad y su ayuda, en la misma línea. El botón de ayuda va fuera del
   de jugar porque un botón dentro de otro no es HTML válido: el navegador lo
   desarma y el toque acaba donde le parece. */
.app .ch-ayuda{
  flex:0 0 auto;width:34px;border-radius:12px;cursor:pointer;
  display:grid;place-items:center;color:var(--faint);
  border:1px solid var(--stroke);background:var(--wash-2);
}
.app .ch-ayuda svg.ic{width:1rem;height:1rem}
.app .ch-ayuda:active{transform:scale(.94);color:var(--solid-ink)}

/* ── a qué se juega, y las cifras ──
   Un botón que abre la hoja del catálogo, y debajo una cifra por posición del
   resultado con su más y su menos. Solo se pueden mover las que esta jugada
   mira; las demás quedan en hueco, que es lo que dice «da igual lo que salga
   ahí». */
/* En dos renglones: la etiqueta y «Cambiar» arriba, y abajo el patrón, el
   nombre y el multiplicador PEGADOS. En una sola línea el nombre estiraba
   hasta el final y empujaba el ×500 al borde opuesto, dejando un agujero de
   noventa píxeles en medio con los nombres cortos.

   Y en neutro, no en ámbar: este botón se elige una vez y las cifras se tocan
   diez, así que el color tiene que quedarse para ellas. */
.app .ch-aque{
  display:flex;flex-direction:column;gap:8px;width:100%;padding:11px 12px;border-radius:14px;
  background:var(--wash-2);border:1px solid var(--stroke);color:inherit;cursor:pointer;
  text-align:left;
}
.app .ch-aque .cab{display:flex;align-items:center;justify-content:space-between;gap:8px}
.app .ch-aque .et{
  font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--solid-ink);font-weight:700;
}
.app .ch-aque .cam{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.6rem;font-weight:700;color:var(--muted);
}
.app .ch-aque .cam svg.ic{width:.65rem;height:.65rem}
.app .ch-aque .cuerpo{display:flex;align-items:center;gap:10px}
.app .ch-aque .ch-patron i{width:14px;height:21px;border-radius:5px}
.app .ch-aque .cuerpo > svg.ic{width:1rem;height:1rem;color:var(--faint);flex-shrink:0}
.app .ch-aque .nom{
  flex:1 1;min-width:0;font-size:.88rem;font-weight:700;letter-spacing:-.01em;
}
.app .ch-aque .mx{
  font-size:1.05rem;font-weight:700;color:var(--solid-ink);flex-shrink:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.app .ch-aque:active{transform:scale(.99)}

.app .ch-pasos{display:flex;gap:6px;justify-content:center}
.app .ch-paso{
  flex:1 1;max-width:66px;display:flex;flex-direction:column;align-items:center;gap:4px;
}
.app .ch-paso button{
  width:100%;padding:5px 0;border-radius:9px;cursor:pointer;
  display:grid;place-items:center;color:var(--muted);
  background:var(--glass-2);border:1px solid var(--stroke);
}
.app .ch-paso button svg.ic{width:.85rem;height:.85rem}
.app .ch-paso button svg.ic.arriba{transform:rotate(180deg)}
.app .ch-paso button:active{transform:scale(.93);color:var(--solid-ink)}
.app .ch-paso .v{
  width:100%;height:52px;border-radius:11px;display:grid;place-items:center;line-height:1;
  font-size:1.55rem;font-weight:700;letter-spacing:-.02em;
  background:var(--mio-bg);border:1.5px solid var(--solid);color:var(--solid-ink);
}
/* Las columnas que esta jugada no mira: MISMA caja, mismo alto y mismo cuerpo
   de letra que las vivas, solo que apagadas. Antes eran un recuadro punteado y
   más pequeño, y la fila quedaba desigual.

   El apagado va en la COLUMNA entera y no en cada pieza: con la casilla a
   opacidad completa y las flechas al 32%, el centro se veía encendido al lado
   de sus propios botones. Así los tres se apagan igual. */
.app .ch-paso.muerta{opacity:.32}
.app .ch-paso.muerta .v{
  background:var(--glass-2);border-color:var(--stroke);color:var(--faint);
}
.app .ch-paso button:disabled{cursor:default}
.app .ch-paso button:disabled:active{transform:none;color:var(--muted)}

/* ── la hoja para elegir a qué se juega ── */
.app .ch-grupo{display:flex;flex-direction:column;gap:5px}
.app .ch-grupo + .ch-grupo{margin-top:10px}
.app .ch-op{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px;border-radius:12px;
  background:var(--wash-2);border:1px solid var(--stroke);color:inherit;cursor:pointer;
  text-align:left;
}
.app .ch-op.on{background:var(--mio-bg);border-color:var(--solid)}
.app .ch-op .t{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:1px}
.app .ch-op .t b{font-size:.76rem;font-weight:600}
.app .ch-op .t span{font-size:.57rem;color:var(--faint)}
.app .ch-op .mx{
  font-size:.82rem;font-weight:700;color:var(--solid-ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* La misma respuesta que las tarjetas del tablero: con el ratón el fondo se
   aclara y el borde tira a ámbar; al tocar se tiñe y se hunde un punto. Sin
   esto la lista de modalidades parecía un cuadro de texto, no algo que se
   elige. */
.app .ch-op{transition:background .16s ease,border-color .16s ease,transform .12s ease}
@media (hover:hover){
  /* Solo con ratón: en el móvil el hover se queda pegado tras el toque. */
  .app .ch-op:not(.on):hover{background:var(--wash);border-color:rgba(255,185,38,.42)}
  .app .ch-op:not(.on):hover .mx{color:var(--solid)}
}
.app .ch-op:active{transform:scale(.99);background:var(--mio-bg);border-color:var(--solid)}
.app .ch-op:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .app .ch-op{transition:none}
  .app .ch-op:active{transform:none}
}

/* El resumen: lo único que hay que leer antes de confirmar. */
.app .ch-resu{
  border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:5px;
  border:1px solid rgba(255,185,38,.38);
  background:linear-gradient(150deg,rgba(255,185,38,.12),rgba(255,185,38,.02));
}
.app .ch-resu .q{font-size:.88rem;font-weight:700;letter-spacing:-.01em}
.app .ch-resu .cifras{
  font-size:1.5rem;font-weight:700;color:var(--solid-ink);letter-spacing:.05em;line-height:1;
}
.app .ch-resu .ch-cobra{font-size:1.05rem;font-weight:700;color:#3DBE6E}
.app .ch-resu .ch-ganas{padding-top:3px;border-top:1px solid var(--hair)}
.app .ch-resu .ch-ayuda{width:26px;height:26px;border-radius:50%;flex-shrink:0}
.app .ch-resu .ch-ayuda svg.ic{width:.85rem;height:.85rem}

/* ── el ejemplo de la ayuda ── */
.app .ej{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;
  border-radius:14px;padding:14px 12px;background:var(--wash-2);border:1px solid var(--hair)}
.app .ej-of{
  font-size:2rem;font-weight:700;letter-spacing:-.02em;line-height:1;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;
}
/* las cifras que la jornada no juega, y las que juega pero esta modalidad no mira */
.app .ej-of i{font-style:normal;color:var(--faint);font-size:1.4rem}
.app .ej-of .pre{color:var(--muted)}
.app .ej-of b{color:var(--solid-ink);font-weight:700}
.app .ej .fine{max-width:30ch}

.app .ej-vs{display:flex;align-items:center;justify-content:center;gap:16px;padding:2px 0}
.app .ej-vs > svg.ic{width:1.1rem;height:1.1rem;color:#3DBE6E;flex-shrink:0}
.app .ej-lado{display:flex;flex-direction:column;gap:3px;align-items:center}
.app .ej-lado b{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.app .ej-lado b.gana{color:#3DBE6E}
.app .ej-premio{color:#3DBE6E;font-size:1.15rem;font-weight:700}

/* el dibujo de casillas: amarillo lleno es orden fijo, punteado cualquier orden */
.app .ch-patron{display:flex;gap:3px;flex-shrink:0}
.app .ch-patron i{
  width:12px;height:18px;border-radius:4px;font-style:normal;
  background:var(--wash);border:1px solid var(--hair);
}
.app .ch-patron i.hit{background:var(--solid);border-color:var(--solid)}
.app .ch-patron i.libre{background:transparent;border-style:dashed;border-color:var(--solid)}

/* Aquí vivían el chip de la modalidad y el visor de cifras del teclado. Se
   fueron con él: ahora las cifras se ponen en la rejilla del tablero, que es
   a la vez el teclado y el sitio donde se ven puestas. */
/* Aquí vivía la pastilla del cupo. Se fue con el cartel verde permanente que
   decía «Sin límite de jugadores» en todas las jugadas: el cupo llega en nulo
   de fábrica, así que salía siempre y no informaba de nada. Cuando el número
   se llena lo dice el aviso, que además explica qué hacer. */

.app .ch-montos{display:flex;gap:6px}
.app .ch-montos button{
  flex:1 1;border:1px solid var(--stroke);border-radius:12px;padding:8px 0;
  font-size:.74rem;font-weight:600;background:var(--wash-2);color:inherit;cursor:pointer;
}
.app .ch-montos button.on{background:var(--mio-bg);border-color:var(--solid);color:var(--solid-ink)}
/* El de escribir a mano no compite por el ancho: los cuatro atajos se quedan
   como estaban y este ocupa lo que mide su icono. */
.app .ch-montos button.otro{flex:0 0 auto;padding:8px 11px;display:grid;place-items:center}
.app .ch-montos button.otro svg.ic{width:.9rem;height:.9rem}

.app .ch-propio{display:flex;flex-direction:column;gap:5px}
/* El campo se viste entero aquí: en el portal los inputs no tienen un estilo
   base, se lo pone cada sitio —.field, .pbusca—, y este no vive en ninguno. */
.app .ch-propio .ui-money > input{
  background:var(--wash);border:1px solid var(--stroke);color:var(--txt);
  font-family:inherit;font-size:1.15rem;font-weight:700;letter-spacing:-.02em;
  padding:11px 14px;width:100%;box-sizing:border-box;line-height:1.25;
}
.app .ch-propio .ui-money > input:focus{outline:none;border-color:var(--focus)}
.app .ch-propio .ui-money.mal > span,
.app .ch-propio .ui-money.mal > input{border-color:var(--s-crit)}
.app .ch-propio .sub{font-size:.66rem}
.app .ch-propio .sub.err{color:var(--s-crit)}

.app .ch-ganas b{font-size:1.2rem;font-weight:700;color:var(--solid-ink);letter-spacing:-.02em}

/* ── jugadas ── */
.app .ch-jug{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--hair)}
.app .ch-jug:last-child{border-bottom:0}
.app .ch-jug .n{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;min-width:68px}
.app .ch-jug .n.gana{color:#3DBE6E}
.app .ch-jug .n.pierde{color:var(--faint)}
.app .ch-jug .d{flex:1 1;display:flex;flex-direction:column;gap:1px;min-width:0}
.app .ch-jug .d b{font-size:.74rem;font-weight:600}
.app .ch-jug .d span{font-size:.58rem;color:var(--faint)}
.app .ch-jug .p{font-size:.74rem;font-weight:700;text-align:right}
.app .ch-jug .p.gana{color:#3DBE6E}
.app .ch-quitar{
  display:flex;align-items:center;gap:6px;background:none;border:0;color:var(--muted);
  font-size:.74rem;font-weight:700;cursor:pointer;
}
.app .ch-total{font-size:1.2rem;font-weight:700;letter-spacing:-.02em}

.app .ch-aviso{
  display:flex;gap:8px;align-items:flex-start;border-radius:12px;padding:10px;
  font-size:.66rem;line-height:1.45;
  background:rgba(224,86,86,.1);border:1px solid rgba(224,86,86,.28);color:var(--s-crit);
}
.app .ch-aviso b{display:block;font-size:.74rem}
.app .ch-aviso svg.ic{margin-top:2px}

.app .ch-espera{align-items:center;text-align:center;gap:6px}
.app .ch-espera b{font-size:.95rem}
.app .ch-espera svg.ic{width:1.6rem;height:1.6rem;color:var(--faint)}

/* ── el acta ── */
.app .ch-escena{
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.08),transparent 70%);
  border-radius:16px;padding:20px 14px;text-align:center;
  display:flex;flex-direction:column;gap:6px;align-items:center;
}
.app .ch-oficial{font-size:.66rem;color:var(--muted);letter-spacing:.1em}
.app .ch-grande{font-size:2.4rem;font-weight:700;letter-spacing:-.04em;line-height:1;
  text-shadow:var(--num-glow)}
/* las cifras del oficial que esta jornada NO juega */
.app .ch-grande i{font-style:normal;color:var(--faint);font-size:1.7rem}

/* ── el acta de una jornada pagada ── */

.app .ch-rot-sec{
  display:flex;align-items:center;gap:9px;margin:18px 2px 9px;
  font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.app .ch-rot-sec::after{content:"";flex:1 1;height:1px;background:var(--hair)}

.app .ch-acta{
  border:1px solid var(--stroke);border-radius:16px;background:var(--glass-2);overflow:hidden;
}
.app .ch-acta .fila{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--hair);
}
.app .ch-acta .fila:first-child{border-top:0}
.app .ch-acta .fila .t{
  flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;
}
/* el nombre nunca parte la fila en dos: la cuenta de la derecha manda */
.app .ch-acta .fila .t b{
  font-size:.78rem;font-weight:600;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.app .ch-acta .fila .t span{font-size:.62rem;color:var(--faint)}
.app .ch-acta .fila .g{
  font-size:.9rem;font-weight:700;color:var(--faint);min-width:16px;text-align:right;
}
.app .ch-acta .fila.gano{background:rgba(69,222,196,.07)}
.app .ch-acta .fila.gano .g{color:var(--ok)}

/* Las cifras del resultado, con la ventana de la modalidad encendida. */
.app .ch-cifs{display:flex;gap:3px;flex:0 0 auto}
.app .ch-cifs i{
  font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;font-weight:700;font-size:.76rem;
  width:19px;height:23px;border-radius:5px;display:grid;place-items:center;
  background:var(--cell-grad);border:1px solid var(--cell-stroke);box-shadow:var(--cell-shadow-sm);
}
.app .ch-cifs i.off{background:none;border-color:var(--hair);color:var(--faint);box-shadow:none}
.app .ch-acta .fila.gano .ch-cifs i:not(.off){
  border-color:rgba(69,222,196,.5);color:var(--ok);
  background:linear-gradient(160deg,rgba(69,222,196,.28),rgba(69,222,196,.1));
}

/* ── pasar a jugable ── */
.app .pj-cuenta{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:14px 0;
}
.app .pj-lado{display:flex;flex-direction:column;align-items:center;gap:4px}
.app .pj-lado b{font-size:1.2rem;font-weight:700;letter-spacing:-.02em}
.app .pj-lado.on b{color:var(--solid-ink)}
.app .pj-cuenta > svg.ic{width:1.2rem;height:1.2rem;color:var(--solid-ink)}
.app .pj-aviso{
  display:flex;gap:8px;align-items:flex-start;border-radius:12px;padding:9px 11px;margin:10px 0;
  font-size:.68rem;line-height:1.45;
  background:rgba(224,86,86,.09);border:1px solid rgba(224,86,86,.24);color:var(--s-crit);
}
.app .pj-aviso svg.ic{width:.9rem;height:.9rem;flex:0 0 auto;margin-top:.12em}
.app .pj-aviso b{font-weight:700}

/* El campo, vestido entero aquí. Iba con clases que no existen en ninguna hoja
   —`campo`, `et`, `err`—, así que el rótulo se pegaba al recuadro y el input
   salía con el fondo BLANCO del navegador encima del tema oscuro. */
.app .pj-campo{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.app .pj-campo > .rot{font-size:.66rem}
.app .pj-campo .ui-money > input{
  background:var(--wash);border:1px solid var(--stroke);color:var(--txt);
  font-size:1.15rem;font-weight:700;letter-spacing:-.02em;
  padding:11px 12px;min-width:0;box-sizing:border-box;line-height:1.25;
  border-radius:0 !important;   /* la tapa derecha es «Todo», no el input */
}
.app .pj-campo .ui-money > input:focus{outline:none;border-color:var(--focus)}
.app .pj-campo .ui-money > input::placeholder{color:var(--faint);font-weight:600}
/* «Todo» cierra el grupo por la derecha y a la altura del campo: como pastilla
   suelta quedaba a media altura y parecía de otro sitio. */
.app .pj-campo .ui-money > button{
  border:1px solid var(--stroke);border-left:none;border-radius:0 12px 12px 0;
  background:var(--wash);color:var(--muted);cursor:pointer;
  padding:0 13px;font:inherit;font-size:.7rem;font-weight:700;white-space:nowrap;
}
.app .pj-campo .ui-money > button:hover{color:var(--solid-ink);background:var(--mio-bg)}
.app .pj-campo .ui-money.mal > span,
.app .pj-campo .ui-money.mal > input,
.app .pj-campo .ui-money.mal > button{border-color:var(--s-crit)}
.app .pj-campo .sub{font-size:.66rem;color:var(--faint)}
.app .pj-campo .sub.err{color:var(--s-crit);font-weight:600}

.app .pj-acts{display:flex;flex-direction:column;gap:8px;margin-top:2px}
/* Sin cantidad escrita, el botón no es «un ámbar apagado» —que se lee como
   averiado— sino un botón que todavía no hace nada. */
.app .pj-acts .btn:disabled{background:var(--wash);color:var(--faint);opacity:1}

/* ═══════════════════════════════════════════════════════════════════
   CARTÓN · la rejilla de nueve y el acta de la serie

   El foil es plata con brillo diagonal, y funciona en los dos temas sin
   cambiar: una casilla tapada tiene que leerse como metal, no como un
   hueco gris. Debajo, los símbolos van con el mismo trazo que los
   iconos del portal para que no parezcan de otra aplicación.

   Escala: texto .58 · .66 · .74 · .82 · .95 · 1.2 · 1.7 · 2.4 rem
           hueco 4 · 6 · 10 · 14 · 20      radio 8 · 12 · 16 · 999
   ═══════════════════════════════════════════════════════════════════ */
.app .ct-vista{display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.app .ct-card{padding:14px;display:flex;flex-direction:column;gap:10px;border-radius:16px}
.app .sim-sv{stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%}

/* ── el cartón ── */
.app .ct-carton{
  background:var(--glass);border:1px solid var(--stroke);border-radius:16px;
  padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--card-shadow);
}
.app .ct-cab{display:flex;align-items:center;justify-content:space-between;gap:6px}
.app .ct-cab b{font-size:.88rem;font-weight:700}
.app .ct-cab .folio{font-size:.58rem;color:var(--faint)}

.app .ct-rejilla{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:6px;gap:6px}
.app .ct-casilla{
  aspect-ratio:1;border-radius:12px;display:grid;place-items:center;position:relative;
  background:var(--wash-2);border:1px solid var(--stroke);color:var(--muted);
  cursor:pointer;padding:22%;transition:transform .1s,background .18s,border-color .18s;
}
.app .ct-casilla:active{transform:scale(.96)}
/* la plata, con el sello de la marca apenas marcado */
.app .ct-casilla.tapada{
  background:linear-gradient(135deg,#9A9AA2 0%,#D7D7DE 22%,#8E8E96 44%,
             #C9C9D2 62%,#84848C 85%,#B4B4BE 100%);
  border-color:rgba(0,0,0,.25);padding:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 6px rgba(0,0,0,.18);
}
.app .ct-casilla.tapada::after{
  content:"RASKALE";font-size:.4rem;letter-spacing:.14em;font-weight:800;color:rgba(0,0,0,.16);
}
.app .ct-casilla.gana{
  background:var(--mio-bg);border-color:var(--solid);color:var(--solid-ink);
  box-shadow:0 0 0 2px rgba(255,185,38,.22);
}
.app .ct-casilla.gana .sim-sv{stroke-width:1.9}

.app .ct-pie{
  display:flex;align-items:center;justify-content:center;gap:6px;
  border-top:1px dashed var(--hair);padding-top:10px;font-size:.66rem;color:var(--muted);
}

.app .ct-veredicto{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 0 4px;text-align:center}
.app .ct-gordo{font-size:2.4rem;font-weight:700;letter-spacing:-.03em;line-height:1;
  color:var(--solid-ink);text-shadow:var(--num-glow)}
.app .ct-gordo.flojo{color:var(--faint);font-size:1.2rem;text-shadow:none}
.app .ct-que{font-size:.74rem;color:var(--muted);max-width:30ch;line-height:1.45}
.app .ct-acts{display:flex;flex-direction:column;gap:6px}

/* ── la portada de la serie ── */
.app .ct-art{
  border-radius:16px;padding:20px 14px;text-align:center;
  background:radial-gradient(120% 160% at 70% 0%,rgba(255,185,38,.22),transparent 62%),var(--wash-2);
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.app .ct-art .nom{font-size:.66rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.app .ct-art .precio{font-size:2.4rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.app .ct-art .mini{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:3px;gap:3px;margin-top:6px}
.app .ct-art .mini i{width:16px;height:16px;border-radius:4px;
  background:linear-gradient(135deg,#9A9AA2,#D7D7DE 40%,#8E8E96);
  border:1px solid rgba(0,0,0,.22)}

/* ── la tabla de premios ── */
.app .ct-premios{display:flex;flex-direction:column}
.app .ct-premio{display:flex;align-items:center;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--hair)}
.app .ct-premio:last-child{border-bottom:0}
.app .ct-premio.agotado{opacity:.42}
.app .ct-sim{width:30px;height:30px;border-radius:8px;flex-shrink:0;padding:6px;
  background:var(--wash);border:1px solid var(--hair);color:var(--solid-ink)}
.app .ct-sim.sm{width:22px;height:22px;padding:4px;border-radius:6px}
.app .ct-premio .t{flex:1 1;display:flex;flex-direction:column;gap:0;min-width:0}
.app .ct-premio .t b{font-size:.88rem;font-weight:700}
.app .ct-premio .t span{font-size:.58rem;color:var(--faint)}
.app .ct-premio .q{text-align:right;font-size:.74rem;font-weight:700;flex-shrink:0}
.app .ct-premio .q small{display:block;font-size:.58rem;font-weight:500;color:var(--faint)}

.app .ct-mio{display:flex;align-items:center;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--hair)}
.app .ct-mio:last-child{border-bottom:0}
.app .ct-mio .n{font-size:.66rem;color:var(--faint);flex-shrink:0}
.app .ct-mio .d{flex:1 1;display:flex;flex-direction:column}
.app .ct-mio .d b{font-size:.74rem;font-weight:600}
.app .ct-mio .d b.ok{color:#3DBE6E}
.app .ct-mio .d b.flojo{color:var(--faint)}
.app .ct-mio .d span{font-size:.58rem;color:var(--faint)}

/* ── el bloque de la portada ── */
.app .ct-bloque{
  display:flex;flex-direction:column;gap:4px;padding:10px 14px;flex-shrink:0;
  background:var(--wash-2);border:1px solid var(--stroke);border-radius:14px;color:inherit;
}
.app .ct-bloque:active{opacity:.85}
.app .ct-bloque-cab{display:flex;align-items:center;justify-content:space-between;
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--solid-ink)}
.app .ct-bloque-cab b{font-size:.74rem;letter-spacing:0;text-transform:none;color:var(--txt)}
.app .ct-bloque-rot{font-size:.58rem;color:var(--faint)}
.app .ct-bloque-fila{display:flex;align-items:center;gap:10px;padding:4px 0}
.app .ct-bloque-fila b{flex:1 1;font-size:.82rem;font-weight:700}
.app .ct-bloque-fila .q{font-size:.74rem;font-weight:700}
.app .ct-bloque-fila .q small{font-weight:500;color:var(--faint);font-size:.58rem}
.app .ct-bloque-pie{display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--hair);padding-top:8px;margin-top:4px;
  font-size:.66rem;font-weight:700;color:var(--solid-ink)}

/* ── el acta ── */
.app .ct-filtros{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.app .fchip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;
  padding:4px 10px;font-size:.66rem;font-weight:600;cursor:pointer;
  background:var(--wash-2);border:1px solid var(--stroke);color:var(--muted)}
.app .fchip i{font-style:normal;font-size:.58rem;font-weight:700;color:var(--faint)}
.app .fchip.on{background:var(--mio-bg);border-color:var(--solid);color:var(--solid-ink)}
.app .fchip.on i{color:var(--solid-ink)}

.app .ct-lista{display:flex;flex-direction:column}
.app .ct-fila{display:flex;align-items:center;gap:10px;padding:8px 2px;
  border-bottom:1px solid var(--hair)}
.app .ct-fila:last-child{border-bottom:0}
.app .ct-fila.yo .ct-puesto{background:var(--solid);color:var(--solid-txt);border-color:transparent}
.app .ct-puesto{width:22px;height:22px;border-radius:999px;flex-shrink:0;
  display:grid;place-items:center;font-size:.58rem;font-weight:700;color:var(--faint);
  background:var(--wash-2);border:1px solid var(--hair)}
.app .ct-av{width:28px;height:28px;border-radius:999px;flex-shrink:0;
  display:grid;place-items:center;font-size:.6rem;font-weight:700;
  background:var(--wash);border:1px solid var(--hair);color:var(--muted)}
.app .ct-who{flex:1 1;display:flex;flex-direction:column;min-width:0}
.app .ct-who b{font-size:.74rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .ct-who span{font-size:.58rem;color:var(--faint);line-height:1.3}
/* en un premiado el segundo renglón dice QUÉ ganó, no su ciudad */
.app .ct-who span.ganado{color:var(--solid-ink);font-weight:600}
.app .ct-chip{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
  border-radius:999px;padding:2px 8px;font-size:.66rem;font-weight:700;
  background:var(--mio-bg);color:var(--solid-ink);border:1px solid var(--solid)}
.app .ct-chip .sim-sv{width:11px;height:11px;stroke-width:1.9}
.app .ct-n{font-size:.74rem;font-weight:700;flex-shrink:0}

/* ═══════ CARTÓN · el billete y el foil ═══════
   Cabecera, troquel y talón. El talón da un sitio FIJO al veredicto: sin él,
   el resultado aparece donde cae y empuja el resto de la pantalla. */
.app .ct-billete{
  background:var(--glass);border:1px solid var(--stroke);border-radius:16px;
  box-shadow:var(--card-shadow);display:flex;flex-direction:column;
  overflow:hidden;
}
.app .ct-cabecera{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;background:var(--mio-bg);border-radius:15px 15px 0 0;
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--solid-ink);
}
.app .ct-cabecera b,.app .ct-cabecera .folio{
  font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--txt);font-weight:700;
}
.app .ct-cabecera .folio{font-size:.66rem;color:var(--faint);font-weight:500}
.app .ct-cuerpo{padding:14px;display:flex;flex-direction:column;gap:10px}

/* La perforación, y solo la perforación.
   Hubo muescas redondas en los bordes y hubo que quitarlas: un agujero de
   verdad tiene que dejar ver lo que hay DETRÁS de la tarjeta, y el billete es
   cristal translúcido, así que cualquier disco que se pinte encima es una
   suposición de lo que hay debajo — y aterrizaba como un punto negro. Recortar
   la tarjeta de verdad tampoco vale: la máscara necesita saber a qué altura
   cae cada troquel, y aquí hay dos y se mueven con el contenido.

   La línea de puntos sola hace el trabajo. Llevó debajo un píxel de brillo para
   darle relieve y hubo que quitarlo: dos líneas paralelas a un píxel no se leen
   como pliegue, se leen como doble borde. */
.app .ct-troquel{
  height:0;flex-shrink:0;
  border-top:1px dashed var(--stroke-hi);
}

.app .ct-talon{
  padding:14px;display:flex;flex-direction:column;align-items:center;gap:4px;
  text-align:center;min-height:96px;justify-content:center;
}

/* la rejilla, ahora con un solo foil encima */
.app .ct-rejilla{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:3px;gap:3px;position:relative}
.app .ct-casilla{
  aspect-ratio:1;border-radius:10px;display:grid;place-items:center;
  background:var(--wash-2);border:1px solid var(--stroke);color:var(--muted);
  padding:20%;transition:background .2s,border-color .2s,color .2s;
}
.app .ct-casilla.gana{
  background:var(--mio-bg);border-color:var(--solid);color:var(--solid-ink);
  box-shadow:0 0 0 2px rgba(255,185,38,.22);
}
.app .ct-casilla.gana .sim-sv{stroke-width:1.9}

/* El lienzo del rascado, encima de las nueve.
   `touch-action:none` es obligatorio: sin él, arrastrar el dedo desplaza la
   página en vez de rascar, y en móvil el cartón sería imposible de abrir. */
.app .ct-foil{
  position:absolute;inset:0;width:100%;height:100%;
  border-radius:10px;touch-action:none;cursor:-webkit-grab;cursor:grab;z-index:2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.app .ct-foil:active{cursor:-webkit-grabbing;cursor:grabbing}
.app .ct-foil.fuera{opacity:0;transition:opacity .28s ease-out;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .app .ct-foil.fuera{transition:none} }

.app .ct-premio .q small{display:block;font-size:.58rem;font-weight:500;color:var(--faint)}

/* La disponibilidad del lote. La barra se VACÍA a medida que se venden: mide
   lo que queda, no lo que se ha vendido. Una que creciera diría lo contrario
   de lo que hay que leer de un vistazo. */
.app .ct-disp{gap:6px;padding-top:12px}
.app .ct-disp .row{gap:12px}
.app .ct-disp .rot{white-space:nowrap}
.app .ct-disp-n{font-size:.74rem;font-weight:700;white-space:nowrap}
.app .ct-barra{height:.375rem;border-radius:999px;background:var(--wash);overflow:hidden}
.app .ct-barra i{display:block;height:100%;background:var(--solid);
  transition:width .4s cubic-bezier(.22,1,.36,1)}
.app .ct-barra i.pocos{background:var(--s-warn)}
.app .pocos{color:var(--s-warn)}
@media (prefers-reduced-motion:reduce){ .app .ct-barra i{transition:none} }
.app .ct-bloque .ct-barra{margin-top:4px}

/* El aviso de que al completarse el lote se publica todo. Va ANTES de jugar:
   es lo que hace creíble el juego mientras se juega, no después. */
.app .ct-aviso{
  display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:10px 12px;
  background:var(--wash-2);border:1px solid var(--hair);font-size:.66rem;
  color:var(--muted);line-height:1.45;
}
.app .ct-aviso b{display:block;font-size:.74rem;color:var(--txt);font-weight:600}
.app .ct-aviso svg.ic{margin-top:2px;color:var(--solid-ink);width:1rem;height:1rem;flex-shrink:0}
.app .ct-bloque-av{color:var(--faint);font-weight:600;font-size:.58rem}
.app .ct-bloque-pie{gap:8px}
.app .ct-bloque-pie > span:first-child{flex:1 1}

/* El cartón de muestra de la serie: mismo foil, pero rascarlo abre la
   confirmación de compra en vez de levantar la plata. */
.app .ct-muestra{gap:8px;padding-bottom:12px}
.app .ct-muestra .ct-foil{cursor:pointer}

/* ═══════ CARTÓN · la tabla anotada ═══════
   Tres símbolos y la cifra: la tabla dibuja la regla además del premio, así
   que se ahorra la línea suelta de «tres símbolos iguales» que iba al final.

   Las cuatro filas pesan igual. El premio mayor llegó a ir enmarcado en ámbar
   y con los símbolos rellenos, y sobraba: el orden ya lo pone delante y la
   cifra ya es la más grande, así que el recuadro solo añadía ruido a una
   tabla que se lee sola. */
.app .ct-anot{display:flex;flex-direction:column;gap:8px}
.app .ct-anot-fila{display:flex;align-items:center;gap:10px;padding:2px 0}
.app .ct-trio{display:flex;gap:3px;flex-shrink:0}
.app .ct-trio i{
  width:26px;height:26px;border-radius:7px;padding:5px;
  background:var(--wash);border:1px solid var(--hair);color:var(--solid-ink);
  display:grid;place-items:center;
}
.app .ct-ig{color:var(--faint);font-size:.82rem;font-weight:700;flex-shrink:0}
.app .ct-anot-fila b{font-size:1rem;font-weight:700;white-space:nowrap}
.app .ct-anot-d{flex:1 1;text-align:right;font-size:.58rem;color:var(--faint);
  white-space:nowrap}

/* Lo que va justo debajo del cartón: la invitación antes de comprar, el atajo
   mientras se rasca y el veredicto al terminar. Siempre en el mismo hueco y
   con alto mínimo, para que la tabla de premios de abajo no dé un salto cada
   vez que cambia. */
.app .ct-bajo{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  min-height:74px;justify-content:center;padding-top:4px;
}
/* Los botones, pegados al cartón y no al final de la página: es donde está
   mirando quien acaba de ver su resultado. Auto-ancho para que sigan siendo
   parte del billete y no una barra de acción del portal. */
/* Centrado sin depender de herencias: el contenedor centra y el botón no se
   estira, así que su eje cae siempre en el eje de la tarjeta. */
/* La zona de acción del cartón: hace la cuenta antes de pulsar y, cuando no
   se puede rascar, dice por qué y ofrece lo único que sí se puede hacer. Un
   botón apagado con la explicación en letra pequeña se lee como una avería. */
.app .cbo-panel{
  width:100%;display:flex;flex-direction:column;gap:7px;margin-top:2px;
  border:1px solid var(--stroke);background:var(--wash-2);border-radius:14px;padding:12px;
  text-align:left;
}
.app .cbo-panel.on{border-color:rgba(255,185,38,.4);background:var(--mio-bg)}
.app .cbo-panel.frio{background:var(--glass)}
.app .cbo-panel.mal{border-color:rgba(224,86,86,.3)}
.app .cbo-fila{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:.68rem;color:var(--muted);
}
.app .cbo-fila b{font-size:.86rem;font-weight:800;color:var(--txt)}
.app .cbo-fila b.mal{color:var(--s-crit)}
.app .cbo-msg{
  display:flex;gap:8px;align-items:flex-start;margin:2px 0 0;
  font-size:.66rem;line-height:1.45;color:var(--muted);
}
.app .cbo-msg b{color:var(--txt)}
.app .cbo-msg svg.ic{width:1rem;height:1rem;flex-shrink:0;margin-top:.05em;color:var(--muted)}
.app .cbo-panel.mal .cbo-msg svg.ic{color:var(--s-crit)}
.app .cbo-btn{
  margin-top:4px;width:100%;border:0;cursor:pointer;font:inherit;
  display:flex;align-items:center;justify-content:center;
  background:var(--solid);color:var(--solid-txt);
  border-radius:11px;padding:12px;font-size:.86rem;font-weight:800;
}
.app .cbo-btn:active{transform:scale(.99)}
.app .cbo-btn:disabled{opacity:.5;cursor:default;transform:none}
.app .cbo-link{
  background:none;border:0;color:var(--muted);font:inherit;font-size:.7rem;
  text-decoration:underline;cursor:pointer;padding:2px;align-self:center;
}
@media (prefers-reduced-motion:reduce){ .app .cbo-btn:active{transform:none} }

.app .ct-bajo-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;
  align-items:center;width:100%;padding-top:6px;margin:0 auto}
.app .ct-bajo-acts .btn{flex:0 0 auto}
.app .ct-bajo .btn{width:auto;padding:10px 20px;font-size:.82rem}
.app .ct-bajo .btn.sm{padding:8px 16px;font-size:.74rem}

/* Los botones del cartón, todos del mismo tamaño: comprar y destapar ocupan el
   mismo hueco y se suceden en él, así que si midieran distinto la tarjeta daría
   un salto cada vez que se cambia de uno a otro.

   El precio va en pastilla y no detrás de un punto: en «Rascar uno · $10.00» el
   verbo y la cifra pesaban igual y competían por el mando. */
.app .ct-bajo .btn.ct-accion{
  width:100%;padding:15px 18px;font-size:1rem;border-radius:18px;
  display:flex;align-items:center;justify-content:center;gap:9px;
}
.app .ct-bajo .btn.ct-accion .chip{
  background:rgba(0,0,0,.17);border-radius:999px;padding:2px 10px;
  font-size:.82rem;font-weight:700;
}
/* Sobre el botón fantasma la pastilla oscura desaparece: ahí va la del tema. */
.app .ct-bajo .btn.ghost.ct-accion .chip{background:var(--wash);border:1px solid var(--hair)}

/* ═══════ el menú con seis pestañas ═══════
   Con ancho fijo no caben: 74px cada una son 444px, y una pantalla estrecha
   mide 320. Así que la barra deja de medir lo que suman sus botones y pasa a
   medir lo que hay, repartiéndolo entre ellos. */
.app .tabbar.seis{
  width:calc(100vw - 20px);max-width:400px;
}
.app .tabbar.seis a{
  width:auto;flex:1 1;min-width:0;padding:9px 2px;gap:4px;
  font-size:.55rem;letter-spacing:-.01em;
}
.app .tabbar.seis a svg.ic{width:1rem;height:1rem}
.app .tabbar.seis .lbl{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ═══════ CARTÓN · la lista de series ═══════ */
/* La serie, como cartel: manda el premio mayor. Antes decía nombre, precio,
   una barra y «Rascar uno» —ni un premio ni un símbolo—, así que para saber
   cuánto se podía ganar, que es la única pregunta, había que entrar. */
.app .ct-serie{
  position:relative;display:block;padding:14px;flex-shrink:0;overflow:hidden;
  background:
    radial-gradient(120% 130% at 85% 0%,rgba(255,185,38,.16),transparent 60%),
    var(--glass);
  border:1px solid var(--stroke);border-radius:16px;color:inherit;
  box-shadow:var(--card-shadow);
  transition:background .16s ease,border-color .16s ease,transform .12s ease;
}
@media (hover:hover){
  .app .ct-serie:hover{border-color:rgba(255,185,38,.42)}
}
.app .ct-serie:active{transform:scale(.99);border-color:var(--solid)}
.app .ct-serie:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .app .ct-serie{transition:none}
  .app .ct-serie:active{transform:none}
}

/* El símbolo del premio mayor, de marca de agua: identifica la serie sin
   gastar sitio ni competir con la cifra. */
.app .cs-agua{
  position:absolute;right:-18px;top:-12px;width:118px;height:118px;
  color:rgba(255,185,38,.09);pointer-events:none;
}
.app .cs-agua .sim-sv{width:100%;height:100%}

.app .cs-in{position:relative;display:flex;flex-direction:column;gap:2px}
.app .cs-in > .rot{font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--muted)}
.app .cs-gordo{
  font-size:2.1rem;font-weight:800;letter-spacing:-.04em;line-height:1.05;color:var(--solid-ink);
}
.app .cs-con{font-size:.66rem;color:var(--muted);margin-top:2px}

.app .cs-fila{display:flex;align-items:center;gap:8px;margin-top:12px}
.app .cs-fila .nom{
  flex:1 1;min-width:0;font-size:.84rem;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.app .cs-cta{
  flex-shrink:0;background:var(--solid);color:var(--solid-txt);border-radius:10px;
  padding:8px 13px;font-size:.76rem;font-weight:800;white-space:nowrap;
}

.app .cs-linea{
  display:block;height:3px;border-radius:3px;background:var(--wash);
  margin-top:12px;overflow:hidden;
}
.app .cs-linea i{display:block;height:100%;background:var(--solid);border-radius:3px;
  transition:width .4s ease}
.app .cs-linea i.pocos{background:var(--s-warn)}
.app .cs-bajo{
  display:flex;justify-content:space-between;gap:8px;
  font-size:.58rem;color:var(--faint);margin-top:5px;
}
.app .cs-bajo .pocos{color:var(--s-warn);font-weight:700}
@media (prefers-reduced-motion:reduce){ .app .cs-linea i{transition:none} }

.app .ct-agotada{display:flex;align-items:center;gap:10px;padding:10px 12px;flex-shrink:0;
  background:var(--wash-2);border:1px solid var(--hair);border-radius:12px;color:inherit}
.app .ct-agotada .t{flex:1 1;display:flex;flex-direction:column;min-width:0}
.app .ct-agotada .t b{font-size:.78rem;font-weight:600}
.app .ct-agotada .t span{font-size:.58rem;color:var(--faint)}
.app .ct-agotada .p{font-size:.74rem;font-weight:700}

/* Las pestañas que empiezan con una tarjeta necesitan el mismo aire arriba que
   a los lados. `.home-body` deja 18px de lado y solo 6 arriba, y ese 6 está
   bien en la portada —lo primero es un rótulo de texto— pero con una tarjeta
   pegada al borde superior el hueco se ve descuadrado contra los laterales. */
/* El tablero, dentro de su tarjeta.
   Las filas iban sueltas sobre el fondo: en un bloque de la portada eso estaba
   bien —el bloque ya era la tarjeta—, pero de pestaña propia y sin título la
   pantalla parecía texto suelto flotando. Una sola tarjeta para todas y no una
   por fila: lo que hace útil un tablero es que las horas se lean seguidas. */
.app .ch-tablero{
  background:var(--glass);border:1px solid var(--stroke);border-radius:16px;
  /* 14 abajo, no 6. Los seis venían de cuando las filas iban sueltas y su
     última raya cerraba el bloque; con contenido dentro, el hueco de abajo
     tiene que ser el mismo que el de los lados. */
  padding:0 14px 14px;box-shadow:var(--card-shadow);
}
/* El primer día no necesita separarse de nada: ya lo hace el borde. */
.app .ch-tablero .ch-dia:first-child{padding-top:14px}
.app .ch-tablero > .fine{padding-top:10px}

/* ═══════════════════════════════════════════════════════════════════
   PUNTO DE VENTA · la app del vendedor (vendedor.raskale.com)

   Mismo marco que el portal —columna de teléfono—, que es lo que mide la
   pantalla de una terminal POS. Todo lo propio lleva el prefijo `vnd-`, para
   no heredar por accidente reglas del portal con el mismo nombre.
   Relleno igual por los cuatro lados en todas las tarjetas.
   ═══════════════════════════════════════════════════════════════════ */
.app .vnd-marca{display:flex;align-items:center;gap:9px;min-width:0}
.app .vnd-marca > span{
  font-size:.78rem;font-weight:700;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.app .vnd-saldo{gap:6px}
.app .vnd-saldo b{font-size:.8rem;font-weight:800}
.app .vnd-puerta{justify-content:center;flex:1 1}
.app .vnd-grupo{display:flex;flex-direction:column}
.app .vnd-grupo:first-of-type .ch-dia{padding-top:6px}

.app .vnd-card{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px}

.app .vnd-tit{display:flex;flex-direction:column;gap:1px;min-width:0}
.app .vnd-tit span{font-size:.7rem;color:var(--muted)}

.app .vnd-corte{
  display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;
  font-size:.72rem;color:var(--muted);background:var(--wash-2);border:1px solid var(--stroke);
}
.app .vnd-corte svg.ic{width:.95rem;height:.95rem;flex-shrink:0}
.app .vnd-corte b{color:var(--txt)}
.app .vnd-corte.urge{border-color:rgba(224,86,86,.35);color:var(--s-crit)}
.app .vnd-corte.urge b{color:var(--s-crit)}
.app .vnd-corte.cerrada{border-color:rgba(224,86,86,.35);background:rgba(224,86,86,.08);color:var(--s-crit)}

/* La modalidad, con el nombre que usa el vendedor y lo que paga. */
.app .vnd-modos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:6px;gap:6px}
.app .vnd-modos button{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:9px 10px;border-radius:10px;border:1px solid var(--stroke);background:var(--wash-2);
  color:inherit;font:inherit;cursor:pointer;text-align:left;min-width:0;
}
.app .vnd-modos button b{font-size:.72rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .vnd-modos button span{font-size:.66rem;font-weight:700;color:var(--solid-ink);flex-shrink:0}
.app .vnd-modos button.on{background:var(--mio-bg);border-color:var(--solid)}

/* El número, una casilla por cifra, y el teclado grande: el del sistema tapa
   media pantalla y en el mostrador se teclea con prisa. */
.app .vnd-num{display:flex;justify-content:center;gap:6px}
.app .vnd-num i{
  font-style:normal;width:44px;height:52px;border-radius:12px;display:grid;place-items:center;
  font-size:1.5rem;font-weight:800;border:1px dashed var(--stroke-hi);color:var(--faint);
}
.app .vnd-num i.on{
  border-style:solid;border-color:var(--solid);background:var(--mio-bg);color:var(--solid-ink);
}
.app .vnd-teclado{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:6px;gap:6px}
.app .vnd-teclado button{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;height:48px;border-radius:12px;border:1px solid var(--stroke);
  background:var(--wash);color:var(--txt);font:inherit;font-size:1.15rem;font-weight:700;cursor:pointer;
  display:grid;place-items:center;
}
.app .vnd-teclado button:active{background:var(--mio-bg);border-color:var(--solid);transform:scale(.97)}
.app .vnd-teclado button.fn{color:var(--muted);font-size:.9rem}
.app .vnd-teclado button svg.ic{width:1.1rem;height:1.1rem}

.app .vnd-err{color:var(--s-crit)}
.app .vnd-calc{
  display:flex;justify-content:space-between;gap:10px;font-size:.72rem;color:var(--muted);
  padding:10px 12px;border-radius:10px;background:var(--wash-2);border:1px solid var(--hair);
}
.app .vnd-calc b{color:var(--txt)}

/* La cesta del boleto. */
.app .vnd-linea{
  display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--hair);
}
.app .vnd-linea > b:first-child{font-size:1.05rem;font-weight:800;min-width:56px}
.app .vnd-linea .t{flex:1 1;min-width:0;display:flex;flex-direction:column;font-size:.74rem;font-weight:600}
.app .vnd-linea .t span{font-size:.62rem;font-weight:400;color:var(--faint)}
.app .vnd-linea > b:nth-child(3){font-size:.84rem}
.app .vnd-linea .x{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;width:30px;height:30px;border-radius:9px;border:1px solid var(--stroke);
  background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;flex-shrink:0;
}
.app .vnd-linea .x svg.ic{width:.85rem;height:.85rem}
.app .vnd-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:2px}
.app .vnd-total span{font-size:.74rem;color:var(--muted)}
.app .vnd-total b{font-size:1.3rem;font-weight:800;color:var(--solid-ink)}

.app .vnd-seg{display:grid;grid-template-columns:1fr 1fr;grid-gap:4px;gap:4px;padding:4px;border-radius:12px;background:var(--wash-2);border:1px solid var(--stroke)}
.app .vnd-seg button{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;border:0;background:none;color:var(--muted);font:inherit;font-size:.78rem;font-weight:700;
  padding:9px;border-radius:9px;cursor:pointer;
}
.app .vnd-seg button.on{background:var(--solid);color:var(--solid-txt)}
.app .vnd-seg button:disabled{opacity:.4;cursor:default}
.app .vnd-f{display:flex;flex-direction:column;gap:5px}
.app .vnd-f label{font-size:.66rem;color:var(--muted);font-weight:600}
.app .vnd-f input{
  background:var(--wash);border:1px solid var(--stroke);color:var(--txt);border-radius:12px;
  padding:11px 12px;font:inherit;font-size:.95rem;
}
.app .vnd-f input:focus{outline:none;border-color:var(--focus)}
.app .vnd-quien{
  display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--muted);
  padding:10px 12px;border-radius:10px;background:var(--wash-2);border:1px solid var(--hair);
}
.app .vnd-quien b{color:var(--txt)}
.app .vnd-quien svg.ic{width:.95rem;height:.95rem;flex-shrink:0}
.app .vnd-quien.cuenta{border-color:rgba(69,222,196,.3)}
.app .vnd-quien.cuenta svg.ic{color:var(--ok)}
.app .vnd-emitir{margin-top:4px}

/* Cobrar */
.app .vnd-codigo{
  background:var(--wash);border:1px solid var(--stroke);color:var(--txt);border-radius:12px;
  padding:13px 12px;font-size:1.25rem;font-weight:800;letter-spacing:.06em;text-align:center;
}
.app .vnd-codigo:focus{outline:none;border-color:var(--focus)}
.app .vnd-cobro-cab{display:flex;align-items:center;justify-content:space-between;gap:8px}
.app .vnd-cobro-cab b{font-size:1rem;font-weight:800}
.app .vnd-premio{
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px;border-radius:12px;
  background:rgba(69,222,196,.08);border:1px solid rgba(69,222,196,.3);text-align:center;
}
.app .vnd-premio > span{font-size:.64rem;color:var(--muted)}
.app .vnd-premio b{font-size:2rem;font-weight:800;color:var(--ok);letter-spacing:-.03em}
.app .vnd-premio.fuera{background:var(--mio-bg);border-color:rgba(255,185,38,.35)}
.app .vnd-premio.fuera b{color:var(--solid-ink)}
.app .vnd-motivo{margin:0;font-size:.76rem;line-height:1.5;color:var(--muted)}

/* Caja */
.app .vnd-caja-fila{display:flex;justify-content:space-between;align-items:baseline;font-size:.76rem;color:var(--muted)}
.app .vnd-caja-fila b{font-size:.92rem;font-weight:700;color:var(--txt)}
.app .vnd-caja-fila.total{border-top:1px solid var(--hair);padding-top:10px}
.app .vnd-caja-fila.total b{font-size:1.2rem;font-weight:800;color:var(--solid-ink)}

/* El boleto: en pantalla, un ticket blanco como el papel de la térmica, para
   que lo que se ve sea lo que se imprime. */
.app .vnd-acciones{display:flex;flex-direction:column;gap:8px}
.app .vnd-ticket{
  background:#fff;color:#111;border-radius:6px;padding:16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.4;
  display:flex;flex-direction:column;gap:10px;box-shadow:0 6px 24px rgba(0,0,0,.35);
}
.app .vnd-ticket.anulado{opacity:.6}
.app .vnd-ticket header{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;
  border-bottom:1px dashed #999;padding-bottom:10px}
.app .vnd-ticket .marca{font-size:18px;font-weight:900;letter-spacing:.18em}
.app .vnd-ticket .copia{text-align:center;font-weight:900;border:2px solid #111;padding:4px;letter-spacing:.12em}
.app .vnd-ticket .bloque{display:flex;flex-direction:column;gap:1px}
.app .vnd-ticket .bloque b{font-size:14px}
.app .vnd-ticket .jugadas{display:flex;flex-direction:column;gap:6px;border-top:1px dashed #999;border-bottom:1px dashed #999;padding:10px 0}
.app .vnd-ticket .j{display:flex;align-items:baseline;gap:8px}
.app .vnd-ticket .j .n{font-size:18px;font-weight:900;min-width:64px}
.app .vnd-ticket .j .d{flex:1 1;display:flex;flex-direction:column}
.app .vnd-ticket .j .d em{font-style:normal;font-size:11px;color:#555}
.app .vnd-ticket .j .v{font-weight:700}
.app .vnd-ticket .total{display:flex;justify-content:space-between;font-size:15px;font-weight:900}
.app .vnd-ticket .quien{display:flex;flex-direction:column;gap:1px;text-align:center}
.app .vnd-ticket .codigo{display:flex;flex-direction:column;align-items:center;gap:2px;
  border:2px solid #111;border-radius:4px;padding:10px}
.app .vnd-ticket .codigo span{font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.app .vnd-ticket .codigo b{font-size:20px;font-weight:900;letter-spacing:.06em}
.app .vnd-ticket .resultado{text-align:center}
.app .vnd-ticket footer{display:flex;flex-direction:column;gap:3px;text-align:center;font-size:10px;color:#444}
.app .vnd-ticket .legal{border-top:1px dashed #999;padding-top:6px}

/* Imprimir: solo el boleto, a lo ancho de un rollo de 58 mm. */
@media print{
  @page{size:58mm auto;margin:0}
  body *{visibility:hidden !important}
  .app .vnd-ticket, .app .vnd-ticket *{visibility:visible !important}
  .app .vnd-ticket{
    position:fixed;left:0;top:0;width:58mm;box-shadow:none;border-radius:0;padding:3mm;
  }
  .app, .app .screen, .app .home-body{height:auto !important;overflow:visible !important}
  .vnd-no-print, .tabbar{display:none !important}
}

/* La página de descarga de la app */
.app .vnd-descarga{gap:10px}
.app .vnd-descarga .btn{width:auto}
.app .vnd-pasos{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;
  font-size:.76rem;line-height:1.5;color:var(--muted)}
.app .vnd-pasos b{color:var(--txt)}
.app .vnd-diag{
  margin:0;padding:12px;border-radius:10px;background:var(--wash-2);border:1px solid var(--hair);
  font-size:.62rem;line-height:1.45;white-space:pre-wrap;word-break:break-all;
  max-height:340px;overflow:auto;-webkit-user-select:text;-moz-user-select:text;user-select:text;
}

/* Elegir impresora */
.app .vnd-imp-actual{
  display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;
  font-size:.74rem;font-weight:600;background:var(--wash-2);border:1px dashed var(--stroke-hi);color:var(--muted);
}
.app .vnd-imp-actual svg.ic{width:.95rem;height:.95rem;flex-shrink:0}
.app .vnd-imp-actual.on{border-style:solid;border-color:rgba(69,222,196,.35);color:var(--txt)}
.app .vnd-imp-actual.on svg.ic{color:var(--ok)}
.app .vnd-imp{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  background:var(--wash-2);border:1px solid var(--stroke);
}
.app .vnd-imp.on{border-color:var(--solid);background:var(--mio-bg)}
.app .vnd-imp .t{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:2px}
.app .vnd-imp .t b{font-size:.76rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .vnd-imp .t > span{font-size:.6rem;color:var(--faint)}
.app .vnd-imp .btn{width:auto;flex-shrink:0}
.app .vnd-imp-aj{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:10px;
  background:var(--wash-2);border:1px solid var(--hair)}
.app .vnd-imp-aj .fila{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.74rem;color:var(--muted)}
.app .vnd-imp-aj input[type=checkbox]{width:20px;height:20px;accent-color:var(--solid)}
.app .vnd-paso{display:flex;align-items:center;gap:8px}
.app .vnd-paso button{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;width:34px;height:34px;border-radius:10px;border:1px solid var(--stroke);
  background:var(--wash);color:var(--txt);font:inherit;font-size:1.1rem;font-weight:700;cursor:pointer;
}
.app .vnd-paso button:disabled{opacity:.35;cursor:default}
.app .vnd-paso b{min-width:58px;text-align:center;font-size:.86rem;color:var(--txt)}

/* Pantallas de espera del aparato (opción D): a pantalla completa, con el
   fondo del color del estado y las acciones abajo, al alcance del pulgar. */
.app .vnd-espera{justify-content:space-between}
.app .vnd-espera.amb{background:radial-gradient(120% 70% at 50% 0%,rgba(255,185,38,.2),transparent 65%)}
.app .vnd-espera.roj{background:radial-gradient(120% 70% at 50% 0%,rgba(224,86,86,.22),transparent 65%)}
.app .vnd-espera.gri{background:radial-gradient(120% 70% at 50% 0%,rgba(255,255,255,.08),transparent 65%)}
.app .vnd-espera .arriba{
  flex:1 1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:12px;padding:32px 24px;
}
.app .vnd-espera .anillo{
  position:relative;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  border:2px solid var(--stroke);margin-bottom:4px;
}
.app .vnd-espera .anillo svg.ic{width:36px;height:36px}
.app .vnd-espera.amb .anillo{color:var(--solid-ink)}
.app .vnd-espera.roj .anillo{color:var(--s-crit);border-color:rgba(224,86,86,.5)}
.app .vnd-espera.gri .anillo{color:var(--muted)}
.app .vnd-espera .gira{
  position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:var(--solid);
  animation:vnd-gira 1.4s linear infinite;
}
@keyframes vnd-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.app .vnd-espera .gira{animation:none}}
.app .vnd-espera .rot{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--muted)}
.app .vnd-espera h1{margin:0;font-size:1.25rem;letter-spacing:-.02em;text-wrap:balance}
.app .vnd-espera p{margin:0;max-width:34ch;font-size:.82rem;line-height:1.55;color:var(--muted)}
.app .vnd-espera .abajo{
  flex-shrink:0;display:flex;flex-direction:column;gap:8px;padding:18px;
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--hair);background:var(--phone-bg);
}
.app .vnd-espera .ap{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--muted);min-width:0}
.app .vnd-espera .ap svg.ic{width:1rem;height:1rem;flex-shrink:0}
.app .vnd-espera .ap span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .vnd-espera .ap em{font-style:normal;margin-left:auto;font-size:.62rem;color:var(--faint);text-align:right;flex-shrink:0}

/*!***********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/admin.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************/
/* ============ RASKALE · panel admin (mismo diseño del mockup) ============ */
.adm{display:flex;min-height:100vh}

.adm .side{
  width:238px;flex-shrink:0;position:-webkit-sticky;position:sticky;top:0;height:100vh;
  padding:20px 14px;display:flex;flex-direction:column;gap:18px;
  border-right:1px solid var(--hair);
  background:var(--glass-2);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
/* El logotipo es apaisado, así que el rótulo va debajo y no al lado. */
.adm .brand{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:4px 8px 2px}
.adm .brand .who{font-size:.66rem;color:var(--faint);font-weight:500;letter-spacing:.02em}

.adm .nav{display:flex;flex-direction:column;gap:2px}
.adm .nav .grp{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600;padding:12px 10px 5px}
.adm .nav a{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:none;color:var(--muted);font-size:.84rem;font-weight:500;
  padding:9px 10px;border-radius:9px;cursor:pointer;
}
.adm .nav a:hover{background:var(--wash);color:var(--txt)}
/* Activo: icono en amarillo y una guía a la izquierda. Rellenar la fila entera
   sería demasiado color en una columna que está siempre a la vista. */
.adm .nav a{position:relative}
.adm .nav a.on{background:var(--wash);color:var(--txt);font-weight:600;box-shadow:inset 0 0 0 1px var(--stroke)}
.adm .nav a.on svg.ic{color:var(--solid-ink)}
.adm .nav a.on::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:17px;border-radius:0 3px 3px 0;background:var(--solid-ink);
}
.adm .nav a .cnt{
  margin-left:auto;font-size:.66rem;font-weight:700;padding:2px 7px;border-radius:99px;
  background:var(--s-warn);color:#241A05;
}
.adm .side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.adm .me{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;background:var(--wash-2);border:1px solid var(--hair)}
.adm .me .av{width:28px;height:28px;border-radius:50%;background:var(--solid);color:var(--solid-txt);display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:700}
.adm .me .txt{display:flex;flex-direction:column;min-width:0}
.adm .me .txt b{font-size:.78rem;font-weight:600}
.adm .me .txt span{font-size:.66rem;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* El bloque del usuario es la entrada a «Mi cuenta»: se comporta como un
   elemento más de la navegación, con su estado activo. */
.adm a.me{text-decoration:none;color:inherit;transition:background .14s,box-shadow .14s}
.adm a.me:hover{background:var(--wash)}
.adm a.me.on{background:var(--wash);box-shadow:inset 0 0 0 1px var(--stroke)}
.adm .me>svg.ic{margin-left:auto;flex:none;color:var(--faint)}
.adm a.me.on>svg.ic{color:var(--solid-ink)}
.adm .theme-btn{
  display:flex;align-items:center;gap:8px;justify-content:center;
  background:none;border:1px solid var(--stroke);color:var(--muted);
  padding:8px;border-radius:9px;font-size:.76rem;font-weight:600;cursor:pointer;
}
.adm .theme-btn:hover{color:var(--txt)}

.adm .main{flex:1 1;min-width:0;display:flex;flex-direction:column}
.adm .topbar-a{
  position:-webkit-sticky;
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  padding:16px 26px;border-bottom:1px solid var(--hair);
  background:var(--glass-2);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
}
.adm .topbar-a h1{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.adm .sp{flex:1 1}
.adm .content{padding:24px 26px 60px;display:flex;flex-direction:column;gap:20px;max-width:1240px;width:100%}

.adm .acard{
  border-radius:16px;background:var(--glass);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--stroke);box-shadow:inset 0 1px 0 var(--gloss),var(--card-shadow);
}
.adm .card-h{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--hair);flex-wrap:wrap}

/* ---------- detalle de sorteo ---------- */
.adm .det-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adm .det-hero{display:flex;gap:18px;padding:18px;align-items:flex-start}
/* Cuadrada, porque las portadas de Raskale lo son: a 180×110 se recortaba
   por arriba y por abajo y la ficha enseñaba una franja de la imagen que no
   se parecía a lo que ve el portal. */
.adm .det-cover{
  width:132px;height:132px;aspect-ratio:1;border-radius:12px;flex-shrink:0;
  background-size:cover;background-position:center;
  border:1px solid var(--stroke);box-shadow:inset 0 1px 0 var(--gloss);
  display:flex;align-items:center;justify-content:center;color:var(--faint);
}
.adm .det-cover svg.ic{width:2rem;height:2rem}
/* Recortada: alto máximo en vez de line-clamp, que obliga a -webkit-box y deja
   las listas sin viñetas. El degradado avisa de que sigue habiendo texto. */
.adm .det-desc.corta{position:relative;max-height:4.6em;overflow:hidden}
.adm .det-desc.corta::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1.9em;
  background:linear-gradient(transparent,var(--panel));pointer-events:none;
}
.adm .det-desc-mas{
  align-self:flex-start;margin-top:2px;padding:0;border:none;background:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;
  font-size:.74rem;font-weight:600;color:var(--solid);
}
.adm .det-desc-mas:hover{text-decoration:underline;text-underline-offset:2px}
.adm .det-desc-mas svg.ic{width:.72rem;height:.72rem}

.adm .det-meta{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1}
.adm .det-meta-top{display:flex;gap:6px;flex-wrap:wrap}
.adm .det-meta h1{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.adm .det-meta p{font-size:.83rem;line-height:1.6;color:var(--muted)}
.adm .det-meta-foot{display:flex;gap:16px;flex-wrap:wrap;padding-top:2px}
.adm .det-meta-foot span{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--faint)}
.adm .det-meta-foot svg.ic{width:.9rem;height:.9rem}

.adm .estado-now{display:flex;align-items:center;gap:14px;padding:16px 18px}
.adm .now-ic{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--wash);border:1px solid var(--stroke);color:var(--txt);
}
.adm .now-ic svg.ic{width:1.15rem;height:1.15rem}
.adm .now-txt{display:flex;flex-direction:column;gap:3px;flex:1 1;min-width:0}
.adm .now-txt b{font-size:.9rem;font-weight:700}
.adm .now-txt span{font-size:.78rem;color:var(--muted);line-height:1.5}
.adm .now-txt b.mono{font-weight:700;color:var(--txt)}

/* Un enlace y no un botón con relleno: deshacer el resultado es lo raro, y
   darle el mismo peso visual que a las acciones normales lo invita. Se ve
   cuando se busca, sin llamar desde lejos. */
.adm .now-quitar{
  align-self:flex-start;margin-top:5px;padding:0;border:none;background:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
  font-size:.74rem;font-weight:600;color:var(--muted);
  border-bottom:1px solid transparent;
}
.adm .now-quitar:hover:not(:disabled){color:var(--s-crit);border-bottom-color:currentColor}
.adm .now-quitar:disabled{opacity:.45;cursor:default}
.adm .now-quitar svg.ic{width:.8rem;height:.8rem}

.adm .det-cols{display:grid;grid-template-columns:1fr 1fr;grid-gap:20px;gap:20px}
@media (max-width:1000px){.adm .det-cols{grid-template-columns:1fr}}

.adm .map-grid{display:grid;grid-template-columns:repeat(20,1fr);grid-gap:3px;gap:3px}
.adm .map-grid.dense{grid-template-columns:repeat(40,1fr);gap:2px}
.adm .map-grid i{
  aspect-ratio:1;border-radius:3px;display:block;
  background:var(--wash-2);border:1px solid var(--hair);
}
.adm .map-grid.dense i{border-radius:2px;border:none}
.adm .map-grid i.sold{background:var(--bar);opacity:.75;border-color:transparent}
.adm .map-grid i.win{background:var(--s-warn);border-color:transparent;opacity:1}
.adm .map-leg{display:flex;gap:14px;flex-wrap:wrap;padding-top:12px}
.adm .map-leg span{display:flex;align-items:center;gap:6px;font-size:.7rem;color:var(--muted)}
.adm .map-leg i{width:10px;height:10px;border-radius:3px;background:var(--wash-2);border:1px solid var(--hair)}
.adm .map-leg i.sold{background:var(--bar);opacity:.75;border-color:transparent}
.adm .map-leg i.win{background:var(--s-warn);border-color:transparent}

.adm .cfg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));grid-gap:14px;gap:14px}
.adm .cfg-grid > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.adm .cfg-grid span{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600}
.adm .cfg-grid b{font-size:.83rem;font-weight:600}

.adm .danger-zone{border-color:var(--stroke)}
.adm .dz{display:flex;align-items:center;gap:14px}
.adm .dz > div{display:flex;flex-direction:column;gap:2px;flex:1 1}
.adm .dz b{font-size:.84rem;font-weight:700}
.adm .dz span{font-size:.73rem;color:var(--faint);line-height:1.5}

/* fila de tabla clicable */
.adm tr.click{cursor:pointer}
.adm tr.click:hover .row-title{text-decoration:underline;text-underline-offset:2px}

/* resumen compacto en la cabecera de una tabla */
.adm .hstats{display:flex;align-items:center;flex-wrap:wrap;row-gap:6px}
.adm .hstats > div{display:flex;align-items:baseline;gap:5px;padding:0 14px;position:relative;white-space:nowrap}
.adm .hstats > div:first-child{padding-left:0}
.adm .hstats > div + div::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:16px;background:var(--hair);
}
.adm .hstats b{font-size:.95rem;font-weight:700;letter-spacing:-.01em;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.adm .hstats span{font-size:.7rem;color:var(--faint)}
.adm .hstats .dt{width:6px;height:6px;border-radius:50%;background:var(--s-warn);align-self:center;margin-right:1px}
.adm .ok-txt{color:var(--ok-txt);font-weight:600}

/* ═══════════════ ficha de usuario ═══════════════
   Dos zonas: a la izquierda quién es —quieto, siempre visible mientras se
   recorre el historial—, y a la derecha un único hilo cronológico. No hay
   pestañas: la pregunta que trae aquí es «¿qué ha hecho esta persona?», y
   repartir la respuesta en siete tablas obligaba a reconstruirla de memoria. */
.adm .fic{display:grid;grid-template-columns:288px minmax(0,1fr);grid-gap:14px;gap:14px;align-items:start}
.adm .fic-rail{display:flex;flex-direction:column;gap:10px;position:-webkit-sticky;position:sticky;top:14px}

/* — la tarjeta de identidad — */
.adm .fic-id{position:relative;padding:20px 16px 16px;text-align:center}
/* Volver y editar, uno en cada esquina del mismo renglón. Absolutos para que
   el avatar siga centrado en la tarjeta: en flujo lo desplazarían. */
.adm .fic-esq{
  position:absolute;top:10px;width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);background:none;border:1px solid transparent;cursor:pointer;
}
.adm .fic-esq.izq{left:10px}
.adm .fic-esq.der{right:10px}
.adm .fic-esq:hover{background:var(--wash);border-color:var(--hair);color:var(--txt)}
.adm .fic-esq svg.ic{width:.95rem;height:.95rem}
.adm .fic-av{
  width:62px;height:62px;border-radius:19px;margin:0 auto 10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;font-weight:700;color:var(--txt);
  background:var(--wash);border:1px solid var(--stroke);
  box-shadow:inset 0 1px 0 var(--gloss);
}
.adm .fic-id > b{display:block;font-size:.88rem;font-weight:650;letter-spacing:-.01em;line-height:1.35}
.adm .fic-pills{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.adm .fic-contacto{
  display:flex;flex-direction:column;gap:5px;align-items:center;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--hair);
}
.adm .fic-contacto span{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.71rem;color:var(--muted);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.adm .fic-contacto svg.ic{width:.78rem;height:.78rem;color:var(--faint);flex-shrink:0}

/* — las cajas de datos del carril — */
.adm .fic-caja{padding:12px 14px 13px}
.adm .fic-h{
  font-size:.63rem;font-weight:700;color:var(--faint);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px;
}
.adm .fic-r{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:5px 0;font-size:.74rem;
}
.adm .fic-r + .fic-r{border-top:1px solid var(--hair)}
.adm .fic-r > span{color:var(--muted);flex-shrink:0}
.adm .fic-r > b{font-weight:650;text-align:right;min-width:0}
/* El matiz de cada cifra —«6 recargas», «2 activos»— cae debajo en pequeño,
   para que la columna de valores siga leyéndose en vertical. */
.adm .fic-r > b i{
  display:block;font-style:normal;font-weight:400;
  font-size:.63rem;color:var(--faint);line-height:1.3;margin-top:1px;
}
.adm .fic-r > b i.ok{color:var(--ok-txt)}
.adm .fic-r.suma{margin-top:2px;border-top:1px solid var(--stroke);padding-top:8px}
/* Las acciones de la billetera: dos botones a partes iguales, separados de
   las cifras por la misma línea que separa el total. */
.adm .fic-acts{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;padding-top:11px;
  border-top:1px solid var(--stroke);
}
/* `flex:1` a secas no bastaba: un botón no encoge por debajo del ancho de su
   propio texto, así que con dos cabían y con tres se salían de la tarjeta.
   Con la base al 50% —menos medio hueco— entran dos por fila y el tercero pasa
   abajo ocupando el ancho entero, que se lee como una decisión y no como un
   sobrante. Con solo dos botones el reparto es el mismo de antes. */
.adm .fic-acts .btn{
  flex-grow:1;
  flex-shrink:1;
  flex-basis:calc(50% - 3.5px);min-width:0;justify-content:center;
}

/* El aviso de qué va a pasar al confirmar, dentro del cajón. */
.adm .aviso{
  display:flex;align-items:flex-start;gap:9px;
  padding:11px 12px;border-radius:10px;
  background:var(--wash-2);border:1px solid var(--hair);
  font-size:.73rem;color:var(--muted);line-height:1.5;
}
.adm .aviso > svg.ic{width:.95rem;height:.95rem;color:var(--faint);flex-shrink:0;margin-top:1px}
.adm .aviso b{color:var(--txt);font-weight:650}

/* La ubicación bajo el nombre en la tabla de usuarios. El alfiler se alinea
   con la primera línea del texto, no con su centro, por si la ciudad envuelve. */
.adm .lugar-cel{display:inline-flex;align-items:center;gap:4px}
.adm .lugar-cel > svg.ic{width:.72rem;height:.72rem;color:var(--faint);flex-shrink:0}
.adm .fic-r.suma > b{font-size:.9rem;font-weight:700}

/* — el historial — */
.adm .fic-hist{overflow:hidden}
/* Pestañas y calendario en la misma barra. Envuelven en vez de encogerse:
   el segmentado con sus contadores no aguanta que lo compriman. */
.adm .fic-hist-h{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 14px;border-bottom:1px solid var(--hair);
}
.adm .fic-hist-h .ui-link{margin-left:auto}
.adm .tl{padding:2px 16px 14px 16px}
.adm .tl-dia{
  font-size:.63rem;font-weight:700;color:var(--faint);
  text-transform:uppercase;letter-spacing:.08em;
  padding:16px 0 4px;
}
.adm .tl > div:first-child .tl-dia{padding-top:10px}

/* Cada hecho: hora, qué pasó, cuánto movió. La línea vertical los cose. */
.adm .ev{
  position:relative;display:flex;align-items:baseline;gap:11px;
  padding:7px 0 7px 20px;
}
.adm .ev::after{
  content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;background:var(--hair);
}
.adm .ev::before{
  content:"";position:absolute;left:1px;top:14px;z-index:1;
  width:7px;height:7px;border-radius:50%;
  background:var(--faint);
  box-shadow:0 0 0 3px var(--panel);
}
.adm .ev.pos::before{background:var(--s-good)}
.adm .ev.neg::before{background:var(--s-crit)}
.adm .ev-t{flex:0 0 42px;font-size:.68rem;color:var(--faint)}
.adm .ev-q{flex:1 1;min-width:0;font-size:.78rem;color:var(--txt);line-height:1.45}
/* Lo accesorio del hecho va en el mismo renglón pero apagado: el sujeto se
   lee de un vistazo y el detalle está ahí cuando hace falta. */
.adm .ev-q em{font-style:normal;color:var(--muted)}
.adm .ev-m{flex:0 0 auto;font-size:.76rem;font-weight:650;white-space:nowrap}
.adm .ev-m.pos{color:var(--ok-txt)}

.adm .fic-mas{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-top:1px solid var(--hair);
}

/* ── la nómina de invitados, en su cajón ── */
.adm .red-barra{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 18px;border-bottom:1px solid var(--hair);
}
.adm .red-barra .ui-search{flex:1 1;min-width:180px}
/* Un segmentado menudo: en la barra manda la tabla, no el control. */
.adm .seg.sm button{font-size:.71rem;padding:5px 10px}
.adm .seg.sm button .cnt{font-size:.61rem;padding:1px 4px}

/* El puente desde la pestaña «Referidos» hasta el cajón: sin él, quien pulsa
   esa pestaña solo ve eventos y no sabe que la red está a un clic. */
.adm .red-atajo{
  display:flex;align-items:center;gap:9px;
  padding:11px 16px;border-bottom:1px solid var(--hair);
  font-size:.75rem;color:var(--muted);
}
.adm .red-atajo > svg.ic{width:.9rem;height:.9rem;color:var(--faint)}
.adm .red-atajo .ui-link{margin-left:auto}

/* El contador del carril es el acceso principal, así que tiene que parecer
   pulsable sin dejar de alinearse como el resto de los valores. */
.adm .red-abre{
  background:none;border:none;padding:0;cursor:pointer;
  font:inherit;color:inherit;text-align:right;
}
.adm .red-abre i{text-decoration:underline;text-underline-offset:2px}

/* Cuánto pesa cada invitado. La barra compara contra el que más aporta —así
   se ve de un vistazo quién sostiene la red— y el número es su parte del
   total, que es lo que se suma. */
.adm .aporte{display:inline-flex;align-items:center;gap:7px;justify-content:flex-end}
.adm .aporte .bb{
  width:54px;height:5px;border-radius:99px;flex:0 0 auto;overflow:hidden;
  background:var(--wash-2);border:1px solid var(--hair);
}
.adm .aporte .bb i{display:block;height:100%;background:var(--solid);border-radius:99px}
.adm .aporte > .mono{font-size:.72rem;color:var(--muted);min-width:30px;text-align:right}

.adm .red-mas{display:flex;align-items:center;gap:12px;padding:12px 18px}

/* ═══════════ mensajes del equipo ═══════════
   Lista de eventos a la izquierda y el editor del canal elegido a la derecha.
   Reutiliza .mailgrid, así que el correo se previsualiza igual que en
   /ajustes/registro; WhatsApp y SMS traen su propia burbuja. */
.adm .msg{display:grid;grid-template-columns:200px minmax(0,1fr);grid-gap:14px;gap:14px;align-items:start}
.adm .msg-lista{display:flex;flex-direction:column;gap:1px;padding:9px}
.adm .msg-lista > button{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:8px 9px;border-radius:9px;cursor:pointer;text-align:left;
  background:none;border:none;color:var(--muted);font:inherit;
}
.adm .msg-lista > button:hover{background:var(--wash-2)}
.adm .msg-lista > button.on{background:var(--wash);box-shadow:inset 2px 0 0 var(--solid)}
.adm .msg-lista .ic{
  width:24px;height:24px;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--muted);
  background:var(--wash-2);border:1px solid var(--hair);
}
.adm .msg-lista .ic > svg.ic{width:.7rem;height:.7rem}
.adm .msg-lista .tx{flex:1 1;min-width:0}
.adm .msg-lista .tx b{display:block;font-size:.74rem;font-weight:600;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm .msg-lista > button.on .tx b{color:var(--txt)}
.adm .msg-lista .tx > span{display:block;font-size:.61rem;color:var(--faint)}

/* Un punto en la pestaña del canal que ya tiene plantilla propia: dice qué has
   tocado sin añadir una palabra. */
.adm .seg button .punto{
  width:5px;height:5px;border-radius:50%;background:var(--solid);
  display:inline-block;margin-left:5px;vertical-align:middle;
}
.adm .seg button.on .punto{background:var(--solid-txt)}

.adm .msg-off{
  display:flex;align-items:flex-start;gap:9px;margin:12px 16px 0;padding:10px 12px;
  border-radius:10px;font-size:.74rem;line-height:1.5;color:var(--muted);
  background:var(--wash-2);border:1px solid var(--hair);
}
.adm .msg-off > svg.ic{width:.9rem;height:.9rem;color:var(--faint);flex-shrink:0;margin-top:1px}
.adm .msg-asunto{
  padding:8px 11px;border-radius:9px;font-size:.72rem;font-weight:600;
  background:var(--wash-2);border:1px solid var(--hair);
}

/* Las burbujas: el mensaje se juzga por cómo se ve en el teléfono, no por el
   texto suelto en una caja gris. */
.adm .wa-fondo{background:#0b141a;border-radius:11px;padding:12px;border:1px solid var(--hair)}
.adm .wa-burb{
  background:#075E54;color:#fff;border-radius:12px 12px 12px 3px;
  padding:9px 11px;font-size:.76rem;line-height:1.5;white-space:pre-wrap;
}
.adm .sms-fondo{background:#1c1c1e;border-radius:11px;padding:12px;border:1px solid var(--hair)}
.adm .sms-burb{
  background:#2c2c2e;color:#fff;border-radius:14px;
  padding:9px 12px;font-size:.76rem;line-height:1.5;white-space:pre-wrap;
}

/* Canales cortos: la burbuja no necesita el ancho del sobre. */
.adm .mailgrid.corto{grid-template-columns:minmax(0,1fr) minmax(0,400px)}

/* Cuándo apila cada uno, con la lista de eventos ya descontada:
     correo   568 de sobre + 440 de editor → hacen falta 1590 px de ventana
     WhatsApp 400 de burbuja + 380         → 1362
   Por debajo se apila, y entonces el editor se lleva el ancho entero y la
   previa va debajo con su tope. Es mejor eso que dos columnas apretadas. */
@media (max-width:1590px){
  .adm .mailgrid:not(.corto){grid-template-columns:1fr}
  .adm .mailgrid:not(.corto) .mail-prev{position:static;max-width:600px}
}
@media (max-width:1362px){
  .adm .mailgrid.corto{grid-template-columns:1fr}
  .adm .mailgrid.corto .mail-prev{position:static;max-width:460px}
}

/* Las acciones del editor, a lo ancho de la tarjeta. Antes vivían dentro de la
   columna izquierda, así que quedaban al final de una pila alta y con media
   tarjeta vacía al lado. */
.adm .msg-pie{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 18px;border-top:1px solid var(--hair);
}
.adm .msg-pie .sp{flex:1 1}

/* Las etiquetas, más compactas: con el chip alto se comían dos filas para tres
   fichas y empujaban los botones fuera de la vista. */
.adm .msg .tok{flex-direction:row;align-items:baseline;gap:6px;padding:5px 9px;border-radius:8px}
.adm .msg .tok b{font-size:.7rem}
.adm .msg .tok span{font-size:.63rem}

@media (max-width:900px){ .adm .msg{grid-template-columns:1fr} }

@media (max-width:900px){
  .adm .fic{grid-template-columns:1fr}
  .adm .fic-rail{position:static}
}
.adm .card-h h2{font-size:.92rem;font-weight:700;letter-spacing:-.01em}
/* .note estaba definida solo dentro de .card-h, así que en cualquier otro
   sitio —el detalle de una recarga, las celdas vacías de las tablas— heredaba
   el tamaño base y se veía enorme. Ahora vale en todo el panel. */
.adm .note{font-size:.72rem;color:var(--faint);line-height:1.5}
.adm .card-b{padding:18px}

.adm .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--solid);color:var(--solid-txt);border:none;border-radius:9px;
  padding:9px 15px;font-size:.81rem;font-weight:600;cursor:pointer;white-space:nowrap;
}
.adm .btn:hover{opacity:.9}
.adm .btn.ghost{background:var(--wash);color:var(--txt);border:1px solid var(--stroke)}
.adm .btn.ghost:hover{background:var(--row-hover);opacity:1}
.adm .btn.sm{padding:0 11px;height:30px;font-size:.74rem;border-radius:8px}
.adm .btn:disabled{opacity:.35;cursor:default}

/* botón de solo icono, misma altura que .btn.sm */
.adm .btn.ico{width:30px;height:30px;padding:0;flex-shrink:0;border-radius:8px}
.adm .btn.ico svg.ic{width:.95rem;height:.95rem}
.adm .btn.ico.danger:hover{border-color:var(--s-crit);color:var(--s-crit);background:var(--wash)}

/* Fantasma en rojo: se lee como acción, no como aviso, hasta que se apunta.
   Va en gris salvo el texto para que no compita con el botón de guardar. */
.adm .btn.ghost.danger{color:var(--s-crit)}
.adm .btn.ghost.danger:hover{border-color:var(--s-crit);background:rgba(224,86,86,.08)}

.adm .pill{
  display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:3px 10px;
  font-size:.68rem;font-weight:600;border:1px solid var(--stroke);background:var(--wash);color:var(--muted);
  white-space:nowrap;
}
.adm .pill .dt{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--faint)}
.adm .pill.good{color:var(--txt)} .adm .pill.good .dt{background:var(--s-good)}
.adm .pill.warn{color:var(--txt)} .adm .pill.warn .dt{background:var(--s-warn)}
.adm .pill.crit{color:var(--txt)} .adm .pill.crit .dt{background:var(--s-crit)}
.adm .pill.solid{background:var(--solid);color:var(--solid-txt);border-color:transparent}
.adm .pill.click{cursor:pointer}

/* Los cuatro tonos del estado de una jornada de Chance. Van por lo que
   significan y no por el nombre de la columna: «esperando resultado» y
   «en pausa» son el mismo tipo de cosa aunque sean estados distintos. */
.adm .pill.viva{background:rgba(61,190,110,.14);color:#2E9E5B;border-color:rgba(61,190,110,.3)}
.adm .pill.espera{background:var(--wash);color:var(--muted)}
.adm .pill.fin{background:var(--mio-bg);color:var(--solid-ink);border-color:rgba(255,185,38,.3)}
.adm .pill.mal{background:rgba(224,86,86,.13);color:var(--s-crit);border-color:rgba(224,86,86,.3)}

.adm .tiles{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:12px;gap:12px}
.adm .tiles.t3{grid-template-columns:repeat(3,1fr)}
.adm .tile{
  border-radius:16px;padding:16px 17px;display:flex;flex-direction:column;gap:6px;
  background:var(--glass);border:1px solid var(--stroke);box-shadow:inset 0 1px 0 var(--gloss);
}
.adm .tile .lbl{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600}
.adm .tile .val{font-size:1.7rem;font-weight:700;letter-spacing:-.03em;line-height:1.05}
.adm .tile .foot{font-size:.71rem;color:var(--muted);display:flex;align-items:center;gap:5px}
.adm .tile .up{color:var(--ok-txt);font-weight:600}

/* ───────── ficha de sorteo · lo que se añadió con la sala de control ─────────
   Tamaños tomados de los que ya usa el panel (.66/.71/.78 rem para etiqueta,
   pie y texto; 12/16/20 px de hueco), para que estas piezas no se lean más
   grandes ni más pequeñas que las tarjetas de al lado. */

/* Seis indicadores caben en una fila a partir de 1200; por debajo, tres. */
.adm .tiles{grid-template-columns:repeat(6,1fr)}
@media (max-width:1200px){.adm .tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.adm .tiles{grid-template-columns:repeat(2,1fr)}}

/* El equilibrio manda sobre los avisos: es la cifra, ellos el comentario. */
.adm .det-cols.eq-cols{grid-template-columns:1.4fr 1fr}
.adm .det-cols.tres{grid-template-columns:1fr 1fr 1fr}
@media (max-width:1100px){
  .adm .det-cols.eq-cols,.adm .det-cols.tres{grid-template-columns:1fr}
}

/* ── la curva del equilibrio ── */
.adm .curva{width:100%;height:150px;display:block;overflow:visible}
.adm .curva .c-base{stroke:var(--hair);stroke-width:1}
.adm .curva .c-eq{stroke:var(--s-warn);stroke-width:1;opacity:.85}
.adm .curva .c-proy{stroke:var(--bar);stroke-width:1.3;opacity:.5;fill:none}
.adm .curva .c-area{fill:var(--bar);opacity:.12}
.adm .curva .c-linea{stroke:var(--bar);stroke-width:1.8;fill:none;stroke-linejoin:round}
.adm .curva .c-hoy{fill:var(--bar)}
.adm .curva .c-tx{font-size:7px;fill:var(--faint)}
.adm .curva .c-tx.eq{fill:var(--s-warn)}
.adm .curva-vacia{height:150px;display:grid;place-items:center;color:var(--faint);font-size:.78rem}

/* ── avisos ── */
.adm .avisos{display:flex;flex-direction:column;gap:12px}
.adm .aviso{padding:9px 12px;border-radius:11px;background:var(--wash);border-left:2px solid var(--s-warn)}
.adm .aviso.crit{border-left-color:var(--s-crit)}
.adm .aviso.good{border-left-color:var(--s-good)}
.adm .aviso b{display:block;font-size:.78rem;font-weight:650}
.adm .aviso p{margin:2px 0 0;font-size:.71rem;line-height:1.5;color:var(--muted)}

/* ── origen de las casillas ── */
.adm .origen{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--hair)}
.adm .apila{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--wash)}
.adm .apila i{display:block;height:100%}
.adm .leyenda{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.adm .leyenda span{display:flex;align-items:center;gap:5px;font-size:.66rem;color:var(--muted)}
.adm .leyenda s{width:8px;height:8px;border-radius:2px;display:block;text-decoration:none}
.adm .o-prom{background:var(--bar)}
.adm .o-inv{background:var(--s-info)}
.adm .o-otro{background:var(--stroke-hi)}

/* ── geografía y horas ── */
.adm .geo{display:flex;flex-direction:column;gap:6px}
/* La ciudad a un lado y la cifra al otro, con el mismo trato que los datos del
   reclamo: mismo relleno, misma línea y mismo tamaño. Sin esto, .lk se quedaba
   sin layout —solo está definido dentro de .claim-datos y .locked— y el nombre
   y el número salían pegados. */
.adm .geo .lk{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:7px 0;border-bottom:1px solid var(--hair);font-size:.78rem;
}
.adm .geo .lk:last-child{border-bottom:none}
/* El nombre largo se recorta; la cifra nunca, que es el dato. */
.adm .geo .lk > span{color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm .geo .lk > b{flex-shrink:0;font-weight:600}
.adm .geo .horas-t{margin-top:6px}
.adm .horas{display:flex;align-items:flex-end;gap:2px;height:46px}
.adm .horas i{flex:1 1;background:var(--s-info);opacity:.5;border-radius:2px 2px 0 0}
.adm .horas i.pico{background:var(--bar);opacity:1}

/* ── línea de tiempo ── */
/* En rejilla y no en columna: seis hitos en vertical harían una tarjeta larga
   y flaca al final de una página que ya es larga. */
.adm .hitos{display:grid;grid-template-columns:repeat(6,1fr);grid-gap:12px;gap:12px}
@media (max-width:1100px){.adm .hitos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.adm .hitos{grid-template-columns:repeat(2,1fr)}}
.adm .hito{display:flex;gap:8px;align-items:flex-start}
.adm .hito s{width:8px;height:8px;border-radius:50%;background:var(--bar);flex-shrink:0;margin-top:5px;text-decoration:none}
.adm .hito.pendiente s{background:var(--wash);border:1px solid var(--stroke-hi)}
.adm .hito b{display:block;font-size:.71rem;font-weight:650}
.adm .hito span{display:block;font-size:.66rem;color:var(--faint);line-height:1.4}
.adm .hito.pendiente b{color:var(--muted)}

/* ───────── sorteos celebrados ─────────
   Mismos tamaños que el resto de listas de la ficha (.71/.66 rem, 7px de
   relleno) para que no se lea como una tabla aparte. */
/* Ojo con esto: `.acta` también está definida en portal.css —la tarjeta de la
   página de resultados— y las cuatro hojas cargan en las dos apps, así que aquí
   llega ya con borde y esquinas redondeadas. Se acepta ese aspecto en vez de
   pelearse con él, pero entonces hacen falta dos cosas que la versión de filas
   planas no necesitaba: separación real entre tarjetas —con `gap:1px` se
   tocaban— y aire por dentro, porque el contenido quedaba pegado al borde. */
.adm .actas{display:flex;flex-direction:column;gap:10px}
.adm .acta{
  display:flex;align-items:flex-start;gap:12px;padding:13px 15px;border-bottom:0;
}
.adm .acta:last-child{border-bottom:0}
/* El ordinal y el número se alinean con la primera línea del texto, no con el
   centro del bloque: con la grabación debajo, el acta creció hacia abajo y
   centrar dejaba el número flotando a media altura. */
.adm .acta .a-n,.adm .acta .a-num{margin-top:1px}
/* El ordinal en gris y el número en grande: lo que se busca al mirar el acta
   es qué salió cada vez, no cuántas van. */
.adm .acta .a-n{width:18px;flex-shrink:0;color:var(--faint);font-size:.66rem;text-align:right}
.adm .acta .a-num{
  flex-shrink:0;min-width:52px;text-align:center;padding:5px 9px;border-radius:9px;
  font-size:.92rem;font-weight:700;letter-spacing:-.01em;
  background:var(--wash);border:1px solid var(--stroke);color:var(--muted);
}
.adm .acta.ok .a-num{background:var(--bar);border-color:transparent;color:var(--bg)}
.adm .acta .a-t{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:1px}
.adm .acta .a-t b{font-size:.78rem;font-weight:600}
.adm .acta .a-t span{font-size:.66rem;color:var(--faint)}
/* Lo que pasó tras ese sorteo, dentro de la propia línea de detalle. En ámbar
   y en negrita basta para que destaque: una píldora aquí competía por el ancho
   con el resto de la fila y quedaba pegada al borde. */
.adm .acta .tras{color:var(--s-warn);font-weight:600}

/* El bloque de repetir, dentro del formulario del resultado. */
/* Registrar el resultado y el acta, a media anchura. En flex y no en grid a
   propósito: cuando solo aparece una de las dos —lo normal— se queda con el
   ancho entero sin necesidad de condicionar la rejilla. Y `flex-start` para que
   la corta no se estire con un hueco vacío debajo. */
.adm .res-cols{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.adm .res-cols > *{flex:1 1 380px;min-width:0}

.adm .actas-pie{display:flex;align-items:center;gap:12px;border-top:1px solid var(--hair)}
.adm .actas-pie .sp{flex:1 1}

.adm .repetir{display:flex;flex-direction:column;gap:12px}
.adm .repetir .f{max-width:320px}

.adm .chart{padding:6px 18px 18px}
.adm .chart-top{display:flex;align-items:baseline;gap:10px;padding:0 0 14px}
.adm .chart-top .big{font-size:1.5rem;font-weight:700;letter-spacing:-.03em}
.adm .plot{position:relative;height:172px;display:flex;align-items:flex-end;gap:4px;border-bottom:1px solid var(--grid-line)}
.adm .plot .gl{position:absolute;left:0;right:0;border-top:1px dashed var(--grid-line);opacity:.55}
.adm .plot .gl span{position:absolute;right:0;top:-8px;font-size:.62rem;color:var(--faint);background:var(--panel);padding:0 4px}
.adm .bar{flex:1 1;position:relative;border-radius:4px 4px 0 0;background:var(--bar);opacity:.85;min-height:3px;cursor:pointer;transition:opacity .12s;border:none}
.adm .bar:hover{opacity:1}
.adm .xaxis{display:flex;gap:4px;padding-top:7px}
.adm .xaxis span{flex:1 1;text-align:center;font-size:.61rem;color:var(--faint)}

/* ───────── desplazamiento horizontal de las tablas ─────────
   La barra usa los mismos tokens que el resto del panel en vez de la del
   sistema, que en macOS aparece y desaparece y encima es gris de serie. */
.adm .tbl-wrap{
  overflow-x:auto;
  overscroll-behavior-x:contain;   /* no arrastra la página al llegar al borde */
}

/* ───────── la barra de desplazamiento del panel ─────────
   Una sola definición para todo lo que desplaza —el scroll horizontal de las
   tablas y el vertical del cajón—, porque son la misma barra vista de canto y
   tenerla escrita dos veces acabaría con dos grises distintos. */
.adm .tbl-wrap,
.adm .drawer{
  /* Firefox: no entiende ::-webkit-scrollbar, pero sí estas dos. */
  scrollbar-width:thin;
  scrollbar-color:var(--stroke-hi) transparent;
}
.adm .tbl-wrap::-webkit-scrollbar,
.adm .drawer::-webkit-scrollbar{width:10px;height:10px}
.adm .tbl-wrap::-webkit-scrollbar-track,
.adm .drawer::-webkit-scrollbar-track{background:var(--wash-2);border-radius:99px}
/* Solo en la tabla: alinea la vía con el padding de las celdas. En el cajón
   la barra recorre toda la altura, incluidas la cabecera y el pie fijos. */
.adm .tbl-wrap::-webkit-scrollbar-track{margin:0 18px}
.adm .tbl-wrap::-webkit-scrollbar-thumb,
.adm .drawer::-webkit-scrollbar-thumb{
  background:var(--stroke-hi);border-radius:99px;
  /* El borde transparente adelgaza el pulgar sin encoger la zona que se puede
     agarrar con el ratón. */
  border:2px solid transparent;background-clip:padding-box;
}
.adm .tbl-wrap::-webkit-scrollbar-thumb:hover,
.adm .drawer::-webkit-scrollbar-thumb:hover{background:var(--faint)}
.adm .tbl-wrap::-webkit-scrollbar-thumb:active,
.adm .drawer::-webkit-scrollbar-thumb:active{background:var(--muted)}

/* En macOS la barra solo aparece al desplazar, así que hace falta otra señal
   de que hay más a la derecha: un degradado pegado al borde del contenedor.
   Se apoya en el fondo de la tarjeta, no en un color fijo. */
.adm .tbl-wrap{position:relative}
.adm .tbl-scroll{position:relative}
.adm .tbl-scroll::after{
  content:"";position:absolute;top:0;bottom:10px;right:0;width:34px;
  pointer-events:none;opacity:0;transition:opacity .18s;
  background:linear-gradient(to right,transparent,var(--panel));
}
.adm .tbl-scroll.hay-mas::after{opacity:1}

/* filas de evento (notificaciones): lista, no tabla */
.adm .evt-list{display:flex;flex-direction:column;padding:0 18px}
.adm .evt-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--hair)}
.adm .evt-row:last-child{border-bottom:none}
/* El umbral cuelga bajo la lista de eventos, dentro de la misma tarjeta. Va
   separado por una línea y con el padding que .acard no da por sí sola. */
.adm .umbral{padding:14px 18px 18px;border-top:1px solid var(--hair);margin-top:2px}

/* ═══════════ avisos al equipo ═══════════
   Maestro-detalle: la lista de destinatarios manda y a la derecha están sus
   eventos. Se eligió sobre una matriz porque «esta persona no tiene teléfono»
   se explica una vez arriba en lugar de repetirse en dieciocho celdas. */
.adm .ave{display:grid;grid-template-columns:236px minmax(0,1fr);align-items:start}
.adm .ave-lista{
  display:flex;flex-direction:column;gap:2px;padding:10px;
  border-right:1px solid var(--hair);align-self:stretch;
}
.adm .ave-d{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;
  cursor:pointer;border:1px solid transparent;
}
.adm .ave-d:hover{background:var(--wash-2)}
.adm .ave-d.on{background:var(--wash);border-color:var(--hair)}
.adm .ave-d .tx{flex:1 1;min-width:0}
.adm .ave-d .tx b{display:block;font-size:.74rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm .ave-d .tx > span{display:block;font-size:.62rem;color:var(--faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm .ave-d .cnt{
  font-size:.62rem;font-weight:700;padding:1px 6px;border-radius:99px;
  background:var(--solid);color:var(--solid-txt);flex-shrink:0;
}
.adm .ave .ini{
  width:28px;height:28px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.6rem;font-weight:700;color:var(--muted);
  background:var(--wash-2);border:1px solid var(--hair);
}
.adm .ave .ini > svg.ic{width:.82rem;height:.82rem}

.adm .ave-det{min-width:0}
.adm .ave-h{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--hair)}
.adm .ave-h .tx b{display:block;font-size:.82rem;font-weight:650}
.adm .ave-h .tx span{display:block;font-size:.68rem;color:var(--faint)}
/* Lo que le falta a este destinatario, dicho una sola vez. */
.adm .ave-falta{
  display:flex;align-items:flex-start;gap:8px;margin:12px 16px 0;padding:9px 11px;
  border-radius:9px;font-size:.72rem;line-height:1.45;color:var(--muted);
  background:color-mix(in srgb,var(--s-warn) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--s-warn) 30%,transparent);
}
.adm .ave-falta > svg.ic{width:.9rem;height:.9rem;color:var(--s-warn);flex-shrink:0;margin-top:1px}

/* Seis filas de dos líneas con 26 px de padding se comían la pantalla entera.
   Esta tabla se aprieta: el padding baja, el icono encoge y el título y la
   descripción comparten renglón, que es como se leen de todos modos. */
/* Sin el min-width:max-content que llevan las tablas del panel: aquí la
   descripción tiene que poder recortarse, y con esa regla la tabla crecía
   hasta sacar la columna de SMS fuera de la pantalla. Con `fixed`, los canales
   se quedan en sus 72 px y el evento se lleva el resto. */
.adm .ave-det table{min-width:0;table-layout:fixed}
.adm .ave-det td{padding:6px 14px;white-space:normal}
.adm .ave-det th{padding:7px 14px}
.adm .ave-ev{display:flex;align-items:center;gap:9px;min-width:0}
.adm .ave-ev .ic{
  width:22px;height:22px;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--muted);
  background:var(--wash-2);border:1px solid var(--hair);
}
.adm .ave-ev .ic > svg.ic{width:.72rem;height:.72rem}
/* Nombre arriba, descripción justo debajo. Sin gap ni márgenes entre los dos:
   lo único que los separa es su interlineado, que va corto a propósito. */
.adm .ave-ev > span:last-child{display:block;min-width:0}
.adm .ave-ev b{display:block;font-size:.76rem;font-weight:600;line-height:1.25}
.adm .ave-ev .note{
  display:block;font-size:.67rem;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.adm .ave-det tr.fuera{opacity:.5}
/* Canal apagado en el sistema: la cabecera se apaga y ya. Decirlo con texto
   ensanchaba la columna más que el propio nombre del canal. */
.adm .ave-det th.off{opacity:.4}

/* La casilla de cada canal. Cuadrada y grande para que se pueda dar sin
   apuntar, que es lo que se hace dieciocho veces al configurarlo. */
.adm .cbox{
  width:23px;height:23px;border-radius:7px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--wash-2);border:1px solid var(--stroke);color:transparent;
}
.adm .cbox:hover:not(:disabled){border-color:var(--stroke-hi)}
.adm .cbox.on{background:var(--solid);border-color:transparent;color:var(--solid-txt)}
.adm .cbox.on > svg.ic{width:.8rem;height:.8rem}
.adm .cbox.veto{opacity:.3;cursor:not-allowed}

/* Cada candidato en el alta: una fila que se pulsa para añadirlo. */
.adm .ave-cand{
  display:flex;align-items:center;gap:10px;padding:9px 11px;margin-top:6px;
  border-radius:10px;border:1px solid var(--hair);cursor:pointer;
}
.adm .ave-cand:hover{background:var(--wash-2)}
.adm .ave-cand.no{opacity:.5;cursor:not-allowed}
.adm .ave-cand.no:hover{background:none}
.adm .ave-cand .tx{flex:1 1;min-width:0}
.adm .ave-cand .tx b{display:block;font-size:.75rem;font-weight:600}
.adm .ave-cand .tx span{display:block;font-size:.64rem;color:var(--faint)}

@media (max-width:820px){
  .adm .ave{grid-template-columns:1fr}
  .adm .ave-lista{border-right:none;border-bottom:1px solid var(--hair)}
}
.adm .evt-ic{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--wash);border:1px solid var(--stroke);color:var(--txt);cursor:pointer;
  transition:border-color .12s,opacity .12s;
}
.adm .evt-ic:hover{border-color:var(--stroke-hi)}
.adm .evt-ic svg.ic{width:1.05rem;height:1.05rem}
.adm .evt-txt{flex:1 1;display:flex;flex-direction:column;gap:2px;min-width:0}
.adm .evt-txt b{font-size:.83rem;font-weight:600}
.adm .evt-txt span{font-size:.7rem;color:var(--faint)}
.adm .evt-row.off .evt-ic,.adm .evt-row.off .evt-txt{opacity:.42}

/* subida de imágenes */
.adm .upl{display:flex;flex-direction:column;gap:10px}
.adm .upl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));grid-gap:9px;gap:9px}
.adm .upl-grid.one{grid-template-columns:1fr;max-width:340px}
.adm .upl-item{
  position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/10;
  border:1px solid var(--stroke);background:var(--wash-2);
}
.adm .upl-grid.one .upl-item{aspect-ratio:16/9}
.adm .upl-item img{width:100%;height:100%;object-fit:cover;display:block}
.adm .upl-acts{
  position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity .12s;
}
.adm .upl-item:hover .upl-acts,.adm .upl-item:focus-within .upl-acts{opacity:1}
.adm .upl-acts button{
  width:24px;height:24px;border-radius:7px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.25);color:#fff;
  font-size:.85rem;line-height:1;
}
.adm .upl-acts button:disabled{opacity:.35;cursor:default}
.adm .upl-acts button svg.ic{width:.8rem;height:.8rem}
.adm .upl-tag{
  position:absolute;left:6px;bottom:6px;border-radius:99px;padding:2px 8px;
  font-size:.6rem;font-weight:700;background:var(--solid);color:var(--solid-txt);
}
.adm .upl-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:104px;padding:16px;border-radius:12px;cursor:pointer;text-align:center;
  border:1px dashed var(--stroke-hi);background:var(--wash-2);
  color:var(--muted);font-size:.78rem;font-family:inherit;
  transition:border-color .12s,background .12s;
}
.adm .upl-drop:hover,.adm .upl-drop.over{border-color:var(--focus);background:var(--wash)}
.adm .upl-drop:disabled{opacity:.6;cursor:default}
.adm .upl-drop svg.ic{width:1.3rem;height:1.3rem;color:var(--txt)}
.adm .upl-hint{font-size:.68rem;color:var(--faint)}

/* campos bloqueados */
.adm .locked{
  display:flex;flex-wrap:wrap;gap:8px;border-radius:12px;padding:12px 13px;
  background:var(--wash-2);border:1px solid var(--stroke);
}
.adm .locked .lk{
  display:flex;flex-direction:column;gap:1px;padding:6px 11px;border-radius:9px;
  background:var(--wash);border:1px solid var(--stroke);min-width:120px;
}
.adm .locked .lk span{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600}
.adm .locked .lk b{font-size:.82rem;font-weight:700}

/* barra de acciones de los ajustes */
.adm .set-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.adm .set-actions .spacer{flex:1 1}

/* vista previa de notificación */
.adm .push-prev{
  display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;
  background:var(--wash);border:1px solid var(--stroke);
}
.adm .push-prev .pi{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--solid);color:var(--solid-txt);
}
.adm .push-prev .pt{display:flex;flex-direction:column;gap:1px;min-width:0}
.adm .push-prev .pt b{font-size:.76rem;font-weight:700}
.adm .push-prev .pt span{font-size:.71rem;color:var(--muted)}
/* min-width:max-content es lo que hace que el scroll exista de verdad: con
   solo width:100% la tabla se encogía al ancho disponible y el contenido se
   partía en varias líneas en vez de desbordar. Ahora crece lo que necesite y
   el contenedor la desplaza. */
.adm table{width:100%;min-width:max-content;border-collapse:collapse;font-size:.81rem}
.adm th{
  text-align:left;font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  font-weight:600;padding:10px 18px;border-bottom:1px solid var(--hair);white-space:nowrap;
}
/* Sin saltos de línea dentro de la celda. Las celdas que ocupan dos renglones
   —.cell-main, .prog-cell— lo hacen con flex en columna, así que esto no las
   toca: solo impide que una frase larga se parta a mitad. */
.adm td{
  padding:12px 18px;border-bottom:1px solid var(--hair);vertical-align:middle;
  white-space:nowrap;
}
.adm tbody tr:last-child td{border-bottom:none}
.adm tbody tr:hover{background:var(--row-hover)}
.adm td.num,.adm th.num{text-align:right;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
/* Un cero en una columna de dinero no es un dato, es su ausencia: se pinta
   como raya apagada para que no compita con las cifras que sí lo son.
   Se llama .nada y no .cero porque esa última ya existe en portal.css —es el
   bloque de «el 0 es gratis», con su borde amarillo discontinuo— y las cuatro
   hojas cargan juntas en las dos apps. */
.adm .nada{color:var(--faint)}
.adm .cell-main{display:flex;flex-direction:column;gap:2px}
.adm .cell-main b{font-weight:600;font-size:.83rem}
.adm .cell-main span{font-size:.7rem;color:var(--faint)}
.adm .who-cell{display:flex;align-items:center;gap:9px}
.adm .av-sm{width:28px;height:28px;border-radius:50%;background:var(--wash);border:1px solid var(--stroke);display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;flex-shrink:0}
/* La portada del sorteo en la tabla, cuadrada. `cover` recorta al centro en
   vez de deformar: las portadas se suben apaisadas y estirarlas a un cuadrado
   deja la foto irreconocible. Sin portada queda la ilustración del tema con
   su icono, igual que en el portal. */
.adm .sort-th{
  width:38px;height:38px;aspect-ratio:1;flex-shrink:0;border-radius:9px;
  background-size:cover;background-position:center;
  border:1px solid var(--stroke);
  display:flex;align-items:center;justify-content:center;color:var(--faint);
}
.adm .sort-th svg.ic{width:.95rem;height:.95rem}
.adm .acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.adm .prog-a{width:110px;height:5px;border-radius:99px;background:var(--wash);overflow:hidden}
.adm .prog-a i{display:block;height:100%;border-radius:99px;background:var(--bar);opacity:.8}
.adm .prog-cell{display:flex;flex-direction:column;gap:5px}
.adm .prog-cell span{font-size:.68rem;color:var(--faint)}
.adm .empty{padding:34px 18px;text-align:center;color:var(--faint);font-size:.8rem}

.adm .form-grid{display:grid;grid-template-columns:1fr 320px;grid-gap:18px;gap:18px;align-items:start}
/* Como .form-grid, pero solo para la primera fila de una página cuyo resto
   necesita el ancho completo. */
/* Sin margin-bottom: el contenedor .fields ya separa con su gap, y sumarle un
   margen propio dejaba 32 px encima de la tarjeta siguiente y 16 debajo. */
.adm .reg-top{display:grid;grid-template-columns:1fr 320px;grid-gap:18px;gap:18px;align-items:start}
@media (max-width:1000px){ .adm .reg-top{grid-template-columns:1fr} }

/* ═══════════ ajustes por pestañas ═══════════
   Para páginas de ajustes con más de un destinatario o ámbito. Sustituye a
   .form-grid cuando el contenido no cabe en «formulario + barra lateral»: sin
   columna lateral, las secciones se llevan el ancho completo —que es lo que
   necesitaba la tabla de avisos al equipo— y se enseña una vista cada vez. */
.adm .set-tabbed{display:flex;flex-direction:column;gap:14px}
.adm .set-tabbed .secs{display:flex;flex-direction:column;gap:14px;min-width:0}

/* La barra: pestañas a la izquierda, acciones a la derecha. Al quitar la
   columna lateral, «Guardar» se quedaba sin sitio; aquí está siempre arriba
   y no hay que bajar a buscarlo. */
.adm .set-tabs{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adm .set-tabs .sp{flex:1 1}
.adm .set-tabs .note{font-size:.7rem}

/* ───────── editor de correo con vista previa al lado ─────────
   Se escribe HTML a la izquierda y se ve el sobre montado a la derecha, con
   el marco que Raskale le pone alrededor. Antes la previa estaba detrás de un
   botón y debajo, así que había que alternar a ciegas con cada retoque. */
/* El correo se maqueta a 520 px más 24 de aire a cada lado: con 568 px se ve
   tal cual llega al buzón, sin encogerlo ni reflowearlo. La columna pide esa
   medida y, cuando la ventana no da para las dos, se apila y la previa se
   queda con la fila entera —que es de sobra—. En ningún caso se reduce: si
   cabe a tamaño real, se enseña a tamaño real. */
.adm .mailgrid{
  display:grid;grid-gap:16px;gap:16px;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,568px);
}
.adm .mail-edit{display:flex;flex-direction:column;gap:13px;min-width:0}
.adm .mail-prev{display:flex;flex-direction:column;gap:5px;position:-webkit-sticky;position:sticky;top:88px;min-width:0}
.adm .mail-prev > label{font-size:.72rem;font-weight:600;color:var(--muted)}
.adm .mail-marco{
  width:100%;border-radius:12px;overflow:hidden;
  border:1px solid var(--stroke);background:#fff;
}
/* La altura la fija el propio contenido al cargar (ver el onLoad del iframe).
   Este valor es solo el de partida, antes de la primera medición. */
.adm .mail-marco > iframe{display:block;width:100%;height:300px;border:0}

/* 1340 px es el umbral real: 240 de navegación + 76 de padding + 16 de hueco
   + 568 de previa + 440 para que el editor siga siendo usable. Por debajo, no
   caben las dos y se apila —con la fila entera para la previa, que es más de
   lo que necesita—. El tope de 680 es para que no se convierta en una losa
   gris de 1.200 px: por encima de 568 ya no encoge nada, solo sobra fondo. */
@media (max-width:1340px){
  .adm .mailgrid{grid-template-columns:1fr}
  .adm .mail-prev{position:static;max-width:680px}
}

/* La vista previa, al pie de la tarjeta de eventos.
   Se define aquí y no suelta porque se perdió una vez al reordenar la hoja.
   En rejilla y con tope de ancho: cada aviso debe parecerse a lo que sale en
   un teléfono, y estirado a todo lo ancho de la tarjeta se leía como tres
   banners vacíos con el texto arrinconado a la izquierda. */
.adm .prev-tira{
  display:grid;grid-gap:9px;gap:9px;padding:12px 14px;border-top:1px solid var(--hair);
  grid-template-columns:repeat(auto-fit,minmax(190px,268px));justify-content:start;
}
.adm .prev-tira > .note{grid-column:1/-1}
.adm .prev-cab{
  grid-column:1/-1;font-size:.62rem;font-weight:700;color:var(--faint);
  text-transform:uppercase;letter-spacing:.08em;
}

.adm .fields{display:flex;flex-direction:column;gap:16px}
.adm .fsec{display:flex;flex-direction:column;gap:13px}
.adm .fsec-h{display:flex;flex-direction:column;gap:2px;padding-bottom:2px}
.adm .fsec-h b{font-size:.84rem;font-weight:700}
.adm .fsec-h span{font-size:.72rem;color:var(--faint)}
.adm .frow{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px}

/* Vista previa de la promoción: lo que verá el jugador, escrito por la misma
   función que lo escribe en el portal, para que no se separen. */
.adm .promo-aviso{
  display:flex;gap:10px;align-items:flex-start;
  border-radius:12px;padding:11px 13px;
  background:var(--mio-bg);border:1px solid var(--solid);
  font-size:.75rem;line-height:1.5;color:var(--txt);
}
.adm .promo-aviso svg.ic{color:var(--solid-ink);margin-top:1px;flex-shrink:0}
.adm .promo-aviso span{display:flex;flex-direction:column;gap:2px;min-width:0}
.adm .promo-aviso b{font-size:.7rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--solid-ink)}
.adm .promo-aviso.mal{background:var(--wash);border-color:var(--s-crit)}
.adm .promo-aviso.mal svg.ic{color:var(--s-crit)}
.adm .f{display:flex;flex-direction:column;gap:6px}
.adm .f label{font-size:.7rem;font-weight:600;color:var(--muted)}
.adm .f .help{font-size:.68rem;color:var(--faint);line-height:1.4}
.adm .f input,.adm .f select,.adm .f textarea{
  background:var(--wash-2);border:1px solid var(--stroke);border-radius:9px;color:var(--txt);
  padding:9px 12px;font-size:.83rem;font-family:inherit;width:100%;
}
.adm .f textarea{resize:vertical;min-height:74px;line-height:1.5}
.adm .f input:focus,.adm .f select:focus,.adm .f textarea:focus{outline:none;border-color:var(--focus)}
.adm .f select option{background:var(--panel);color:var(--txt)}
.adm .f .inline{display:flex;gap:8px;align-items:center}
.adm .f .inline input{flex:1 1}
.adm .f.hrow{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}

.adm .seg{display:inline-flex;background:var(--wash-2);border:1px solid var(--stroke);border-radius:9px;padding:3px;gap:2px}
.adm .seg button{
  background:none;border:none;color:var(--muted);font-size:.76rem;font-weight:600;
  padding:7px 13px;border-radius:7px;cursor:pointer;white-space:nowrap;
}
.adm .seg button.on{background:var(--solid);color:var(--solid-txt)}
.adm .seg.wide{display:flex}
.adm .seg.wide button{flex:1 1}
.adm .seg button .cnt{
  margin-left:6px;font-size:.64rem;font-weight:700;
  padding:1px 5px;border-radius:99px;
  background:var(--wash);color:var(--faint);
}
.adm .seg button.on .cnt{background:rgba(0,0,0,.16);color:inherit}

.adm .radios{display:flex;flex-direction:column;gap:8px}
.adm .radio{
  display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:11px;
  border:1px solid var(--stroke);background:var(--wash-2);cursor:pointer;
}
.adm .radio.on{border-color:var(--focus);background:var(--wash)}
.adm .radio .dot{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--faint);flex-shrink:0;margin-top:1px;position:relative}
.adm .radio.on .dot{border-color:var(--txt)}
.adm .radio.on .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--txt)}
.adm .radio .t{display:flex;flex-direction:column;gap:2px}
.adm .radio .t b{font-size:.8rem;font-weight:600}
.adm .radio .t span{font-size:.7rem;color:var(--faint);line-height:1.45}

.adm .calc{position:-webkit-sticky;position:sticky;top:88px;display:flex;flex-direction:column;overflow:hidden}
.adm .calc .ch{padding:14px 16px;border-bottom:1px solid var(--hair);display:flex;flex-direction:column;gap:2px}
.adm .calc .ch b{font-size:.84rem;font-weight:700}
.adm .calc .ch span{font-size:.69rem;color:var(--faint)}
.adm .crow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 16px;font-size:.79rem}
.adm .crow span{color:var(--muted)}
.adm .crow b{font-weight:600}
.adm .crow.sep{border-top:1px solid var(--hair);margin-top:2px;padding-top:11px}
.adm .crow.total{padding:13px 16px;border-top:1px solid var(--stroke-hi);background:var(--wash-2)}
.adm .crow.total span{color:var(--txt);font-weight:600;font-size:.82rem}
.adm .crow.total b{font-size:1.15rem;font-weight:700;letter-spacing:-.02em}
.adm .cwarn{
  display:flex;gap:9px;align-items:flex-start;padding:11px 16px;font-size:.72rem;line-height:1.45;
  border-top:1px solid var(--hair);color:var(--muted);
}
.adm .cwarn svg.ic{margin-top:1px}
.adm .cwarn.risk{color:var(--txt)}
.adm .cwarn.risk svg.ic{color:var(--s-warn)}
/* Lo mismo pero para lo que ya está mal, no para lo que podría salir mal. */
.adm .cwarn.mal{color:var(--txt)}
.adm .cwarn.mal svg.ic{color:var(--s-crit)}

.adm .drawer-bg{
  position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;justify-content:flex-end;z-index:50;
}
.adm .drawer{
  width:min(420px,100%);height:100%;background:var(--panel);border-left:1px solid var(--stroke);
  display:flex;flex-direction:column;animation:slide .26s cubic-bezier(.2,.9,.3,1);overflow-y:auto;
}
/* Seis columnas no caben en 420 px. Se ensancha solo para las tablas, no
   para los formularios, que a más ancho se leen peor. */
.adm .drawer.ancho{width:min(760px,100%)}
@keyframes slide{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.adm .drawer-h{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--hair);position:-webkit-sticky;position:sticky;top:0;background:var(--panel);z-index:2}
.adm .drawer-h b{font-size:.92rem;font-weight:700;flex:1 1}
.adm .xbtn{background:none;border:1px solid var(--stroke);color:var(--muted);width:28px;height:28px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.adm .drawer-b{padding:18px;display:flex;flex-direction:column;gap:16px}
.adm .kv{display:flex;flex-direction:column;gap:9px}
.adm .kv div{display:flex;justify-content:space-between;gap:12px;font-size:.81rem}
.adm .kv div span{color:var(--muted)}
.adm .kv div b{font-weight:600;text-align:right}
.adm .receipt{
  border-radius:12px;border:1px dashed var(--stroke-hi);background:var(--wash-2);
  min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--faint);font-size:.75rem;padding:14px;text-align:center;
}
/* El error se pega justo encima de los botones, dentro de la zona fija: si
   fuera con el contenido, un fallo de validación podría quedarse fuera de la
   pantalla en un formulario largo. */
.adm .drawer-err{
  display:flex;align-items:flex-start;gap:8px;
  margin:0 18px;padding:10px 12px;border-radius:10px;
  background:color-mix(in srgb,var(--s-crit) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--s-crit) 35%,transparent);
  color:var(--txt);font-size:.76rem;line-height:1.45;
}
.adm .drawer-err > svg.ic{width:.95rem;height:.95rem;color:var(--s-crit);flex-shrink:0;margin-top:1px}
.adm .drawer-f{display:flex;gap:9px;padding:16px 18px;border-top:1px solid var(--hair);position:-webkit-sticky;position:sticky;bottom:0;background:var(--panel)}
.adm .drawer-f .btn{flex:1 1}

.adm .range-row{display:flex;align-items:center;gap:12px}
.adm .range-row input[type=range]{flex:1 1;accent-color:var(--solid);height:4px}
.adm .range-row b{font-size:.85rem;font-weight:700;min-width:46px;text-align:right;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.adm .split-bar{display:flex;height:36px;border-radius:10px;overflow:hidden;border:1px solid var(--stroke);background:var(--wash-2)}
.adm .split-bar div{display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;transition:flex-grow .18s;min-width:0;overflow:hidden;white-space:nowrap}
.adm .split-bar .mia{background:var(--solid);color:var(--solid-txt)}
.adm .split-bar .regalo{background:var(--wash);color:var(--txt);border-left:1px solid var(--stroke)}

/* La barra es el mando: el rango va encima, invisible y a todo lo ancho, así
   que se arrastra el corte en vez de una barra aparte. El tope pintado marca
   dónde está el corte y da algo que agarrar. */
.adm .split-wrap{position:relative;touch-action:pan-y}
.adm .split-range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
  -moz-appearance:none;
       appearance:none;-webkit-appearance:none;background:none;opacity:0;cursor:ew-resize;
}
.adm .split-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:36px;cursor:ew-resize;
}
.adm .split-range::-moz-range-thumb{width:26px;height:36px;border:0;cursor:ew-resize}
.adm .split-tope{
  position:absolute;top:4px;bottom:4px;width:3px;border-radius:3px;
  background:var(--panel);box-shadow:0 0 0 1px var(--stroke-hi);
  transform:translateX(-50%);pointer-events:none;transition:left .18s;
}
.adm .split-wrap:focus-within .split-bar{
  outline:2px solid var(--focus);outline-offset:2px;border-radius:10px;
}
@media (prefers-reduced-motion:reduce){
  .adm .split-tope{transition:none}
  .adm .split-bar div{transition:none}
}
/* Las casillas del resultado son el CodeInput compartido. Aquí no se reparten
   el ancho como en el portal —tres cuadros estirados en una tarjeta a media
   anchura quedarían enormes—: se quedan del tamaño que tenían. */
.adm .ui-code{justify-content:flex-start}
.adm .ui-code input{flex:0 0 52px;max-width:52px;font-size:1.4rem}
.adm .winner{display:flex;align-items:center;gap:16px;padding:18px;border-radius:14px;border:1px solid var(--stroke-hi);background:var(--wash)}
.adm .winner .big{
  width:74px;height:74px;border-radius:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:1.9rem;font-weight:700;background:var(--solid);color:var(--solid-txt);
}
.adm .winner .t{display:flex;flex-direction:column;gap:3px}
.adm .winner .t b{font-size:1rem;font-weight:700}
.adm .winner .t span{font-size:.78rem;color:var(--muted)}
.adm .oficial-preview{
  border-radius:12px;border:1px solid var(--stroke);background:var(--wash-2);
  padding:11px 13px;font-size:.75rem;line-height:1.6;color:var(--muted);
}
.adm .oficial-preview b{color:var(--txt);font-weight:600}

.adm .switch{position:relative;display:inline-block;width:40px;height:23px;flex-shrink:0;cursor:pointer;vertical-align:middle}
.adm .switch input{opacity:0;width:100%;height:100%;position:absolute;cursor:pointer;margin:0}
.adm .switch i{position:absolute;inset:0;border-radius:99px;background:var(--wash);border:1px solid var(--stroke);pointer-events:none;transition:background .15s}
.adm .switch i::after{content:"";position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:var(--faint);transition:transform .15s,background .15s}
.adm .switch input:checked + i{background:var(--solid);border-color:transparent}
.adm .switch input:checked + i::after{transform:translateX(17px);background:var(--solid-txt)}

/* login del panel */
.adm-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;width:100%}
.adm-login-card{
  width:100%;max-width:380px;border-radius:18px;padding:26px;
  display:flex;flex-direction:column;gap:14px;
}
.adm-login-head{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:6px}
.adm-login-head span{font-size:.7rem;color:var(--faint)}
.adm-login-err{
  display:flex;gap:9px;align-items:flex-start;border-radius:11px;padding:11px 13px;
  background:var(--wash);border:1px solid var(--stroke-hi);
  font-size:.76rem;line-height:1.5;color:var(--txt);
}
.adm-login-err svg.ic{margin-top:1px;color:var(--s-warn)}
.adm-login .btn{width:100%;justify-content:center;padding:12px}
.adm-login-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--hair);padding-top:13px;font-size:.7rem;color:var(--faint);
}
.adm-login-foot .theme-btn{padding:6px 10px}

@media (max-width:1080px){
  .adm .tiles{grid-template-columns:repeat(2,1fr)}
  .adm .form-grid{grid-template-columns:1fr}
  .adm .calc{position:static}
}
@media (max-width:860px){
  .adm{flex-direction:column}
  .adm .side{width:100%;height:auto;position:static;flex-direction:row;align-items:center;gap:12px;padding:12px 16px;overflow-x:auto;border-right:none;border-bottom:1px solid var(--hair)}
  .adm .brand{padding:0;flex-shrink:0}
  .adm .nav{flex-direction:row;gap:4px}
  .adm .nav .grp{display:none}
  .adm .nav a{white-space:nowrap}
  .adm .side-foot{margin-top:0;flex-direction:row;flex-shrink:0}
  /* En la barra horizontal no cabe el nombre con el correo, pero esconder el
     bloque entero dejaría el móvil sin puerta a «Mi cuenta». Se queda solo el
     avatar, que es lo que ya se reconoce. */
  .adm .me{padding:6px;gap:0}
  .adm .me .txt,.adm .me>svg.ic{display:none}
  .adm .content{padding:18px 16px 50px}
  .adm .topbar-a{padding:14px 16px}
  .adm .frow{grid-template-columns:1fr}
}

/* ───────── etiquetas insertables en plantillas ───────── */
.adm .tok-list{display:flex;flex-wrap:wrap;gap:7px}
.adm .tok{
  display:flex;flex-direction:column;gap:1px;text-align:left;cursor:pointer;
  padding:7px 10px;border-radius:10px;border:1px solid var(--stroke);background:var(--glass);
  transition:border-color .14s,background .14s;
}
.adm .tok:hover{border-color:var(--txt);background:var(--wash)}
.adm .tok b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.73rem;color:var(--txt)}
.adm .tok span{font-size:.66rem;color:var(--faint)}

/* ───────── resumen de pasos del registro ───────── */
.adm .pasos-prev{list-style:none;margin:0;padding:0;counter-reset:p;display:flex;flex-direction:column;gap:0}
.adm .pasos-prev li{
  counter-increment:p;display:flex;flex-direction:column;gap:1px;
  padding:10px 0 10px 34px;position:relative;border-bottom:1px solid var(--hair);
}
.adm .pasos-prev li:last-child{border-bottom:none}
.adm .pasos-prev li::before{
  content:counter(p);position:absolute;left:0;top:10px;
  width:22px;height:22px;border-radius:99px;border:1px solid var(--stroke);
  display:flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:600;color:var(--muted);
}
.adm .pasos-prev li b{font-size:.8rem;font-weight:600}
.adm .pasos-prev li span{font-size:.71rem;color:var(--faint)}

/* acciones dentro de un aviso, para arreglar el problema donde se ve */
.adm .cwarn-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* ───────── catálogos de pagos ───────── */
.adm .cat-list{display:flex;flex-direction:column;gap:8px}
.adm .cat-row{
  display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:13px;
  background:var(--wash);border:1px solid var(--stroke);transition:opacity .14s;
}
.adm .cat-row.off{opacity:.5}
.adm .cat-ic{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  background:var(--glass);border:1px solid var(--stroke);
}
.adm .cat-txt{flex:1 1;display:flex;flex-direction:column;gap:1px;min-width:0}
.adm .cat-txt b{font-size:.85rem;font-weight:600}
.adm .cat-txt span{font-size:.7rem;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm .cat-form{
  display:flex;flex-direction:column;gap:14px;padding:14px;border-radius:14px;
  background:var(--wash);border:1px dashed var(--stroke-hi);
}

.adm .banco-grid{display:flex;flex-wrap:wrap;gap:7px}
.adm .banco-chip{
  display:flex;align-items:center;gap:8px;padding:6px 9px 6px 7px;border-radius:11px;
  background:var(--wash);border:1px solid var(--stroke);transition:opacity .14s;
}
.adm .banco-chip.off{opacity:.45}
.adm .banco-chip > span{font-size:.76rem;font-weight:600;white-space:nowrap}
.adm .banco-chip > button{
  width:19px;height:19px;border-radius:6px;flex-shrink:0;cursor:pointer;color:var(--faint);
  display:flex;align-items:center;justify-content:center;background:none;border:none;
}
.adm .banco-chip > button:hover{color:var(--s-crit);background:var(--glass)}
.adm .banco-chip > button svg.ic{width:.7rem;height:.7rem}
/* El interruptor pequeño solo cambia de tamaño la perilla, nunca la vía: `i`
   lleva inset:0 y encogerlo lo convertía en un punto, que además se desplazaba
   entero al marcarlo y se montaba encima del texto de al lado. Lo que se mueve
   es `i::after`. */
.adm .switch.sm{width:30px;height:17px;flex-shrink:0}
.adm .switch.sm i::after{width:12px;height:12px;top:1.5px;left:1.5px}
.adm .switch.sm input:checked + i::after{transform:translateX(13px)}

/* ───────── enlace del sorteo ─────────
   El prefijo /sorteo/ reutiliza .ui-tel, que ya pinta un campo con etiqueta
   fija a la izquierda —el mismo patrón del +52 en el teléfono. */
.slug-in input{text-transform:lowercase}
.slug-in svg.ic{width:.9rem;height:.9rem;flex-shrink:0;margin-right:2px}
.slug-in svg.ic.ok{color:var(--s-good)}
.slug-in svg.ic.warn{color:var(--s-warn)}

/* El mensaje cambia de tono con el estado: verde libre, ámbar ocupado. No se
   usa rojo en ninguno, porque ninguno impide guardar — el servidor resuelve
   el choque solo. */
.slug-msg b{font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.slug-msg.libre{color:var(--s-good)}
.slug-msg.ocupado,.slug-msg.invalido{color:var(--s-warn)}
.slug-msg.buscando{opacity:.6}

/* ───────── entrega del premio ─────────
   El estado primero y en color, porque es lo que se mira de un vistazo al
   entrar: ¿me falta entregar algo? */
.claim-est{
  display:flex;align-items:center;gap:8px;
  border-radius:11px;padding:9px 12px;font-size:.8rem;font-weight:600;
  background:var(--wash);border:1px solid var(--stroke);
}
.claim-est svg.ic{width:.95rem;height:.95rem;flex-shrink:0}
.claim-est.pending{color:var(--s-warn);border-color:var(--s-warn)}
.claim-est.claimed{color:var(--txt)}
.claim-est.delivered{color:var(--s-good);border-color:var(--s-good)}

/* El editor de la fecha. Va en columna y no en la misma línea que los botones:
   el selector de fecha abre un calendario flotante y compartir renglón con un
   «Guardar» invita a pulsarlo con el calendario todavía encima. */
.entrega-ed{display:flex;flex-direction:column;gap:12px}
.entrega-ed .f{max-width:320px}

/* Los datos de entrega en renglones etiqueta/valor, para poder copiarlos sin
   equivocarse: una CLABE mal transcrita manda el dinero a otra persona. */
.claim-datos{display:flex;flex-direction:column;gap:1px}
.claim-datos .lk{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:7px 0;border-bottom:1px solid var(--hair);font-size:.78rem;
}
.claim-datos .lk:last-child{border-bottom:none}
.claim-datos .lk > span{color:var(--muted);flex-shrink:0}
.claim-datos .lk > b{text-align:right;word-break:break-word;font-weight:600}

/* ───────── premios por entregar (resumen) ─────────
   Una fila por premio, con el plazo a la derecha. Los que vencen pronto se
   marcan en ámbar: es la única lista del panel donde alguien está esperando
   algo que ya ganó. */
.prem-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--hair);
  cursor:pointer;transition:opacity .12s;
}
.prem-row:last-child{border-bottom:none}
.prem-row:hover{opacity:.75}
.pr-est{
  flex-shrink:0;width:120px;font-size:.56rem;font-weight:700;letter-spacing:.1em;
  color:var(--faint);text-transform:uppercase;line-height:1.3;
}
.pr-who{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pr-who b{font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-who > span{font-size:.68rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-plazo{
  flex-shrink:0;font-size:.72rem;font-weight:600;color:var(--muted);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
}
/* A una semana o menos, el plazo manda sobre el resto de la fila. */
.prem-row.urge .pr-plazo{color:var(--s-warn)}
.prem-row.urge .pr-est{color:var(--s-warn)}

/* ───────── casillas de regalo ─────────
   Vive pegado al bloque de estado, así que usa sus mismos tamaños y su mismo
   aire: .66 para la etiqueta, .71 para el pie, .78 para el cuerpo, .9 para el
   título y 1.7 para la cifra. Ni un valor nuevo — el panel ya arrastra treinta
   tamaños distintos y cada uno que se añade se nota en la línea de al lado. */
.adm .regalos{display:flex;align-items:center;gap:16px;padding:16px 18px}
.adm .rg-n{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex-shrink:0;min-width:104px;padding:11px 12px;border-radius:14px;
  background:var(--wash);border:1px solid var(--stroke);
}
.adm .rg-n b{font-size:1.7rem;font-weight:700;letter-spacing:-.03em;line-height:1.05}
/* El total, en el mismo renglón pero sin pelear con la cifra que importa. */
.adm .rg-n b i{font-style:normal;font-size:.9rem;color:var(--faint);font-weight:600}
.adm .rg-n > span{
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin-top:5px;
}
.adm .rg-t{display:flex;flex-direction:column;gap:5px;flex:1 1;min-width:0}
.adm .rg-t b{display:flex;align-items:center;gap:6px;font-size:.9rem;font-weight:700}
.adm .rg-t b svg.ic{width:.95rem;height:.95rem;color:var(--solid-ink);flex-shrink:0}
.adm .rg-t > span{font-size:.78rem;color:var(--muted);line-height:1.5}
.adm .rg-bar{
  height:6px;border-radius:99px;background:var(--wash-2);
  overflow:hidden;margin-top:3px;
}
.adm .rg-bar i{display:block;height:100%;background:var(--solid);border-radius:99px}
.adm .rg-t .rg-pie{font-size:.71rem;color:var(--faint)}
@media (max-width:700px){
  .adm .regalos{flex-wrap:wrap;gap:12px}
  .adm .rg-n{min-width:0;flex:1 1}
  .adm .rg-t{flex-basis:100%}
}

/* ───────── campo de edición ─────────
   La vista previa usa el ámbar de la marca porque anticipa algo que va a pasar,
   no un dato ya guardado. Medidas tomadas del resto de avisos del formulario. */
.adm .ed-previa{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin-top:10px;padding:11px 13px;border-radius:12px;
  background:var(--mio-bg);border:1px solid color-mix(in oklab,var(--solid) 35%,transparent);
}
.adm .ed-previa > span:last-child{font-size:.78rem;color:var(--solid-ink);font-weight:650}
/* Cuando el número ya no se puede cambiar: el dato, y debajo el porqué. */
.adm .ed-fija{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.adm .ed-fija-no{font-size:.84rem;color:var(--muted)}
.adm .f label .op{color:var(--faint);font-weight:400}
/* Textos de la pantalla de ediciones. Tamaños tomados de los que ya usa el
   panel: .71 para el pie de tabla, .78 para el cuerpo. */
.adm .ed-slug{font-size:.71rem;color:var(--faint);margin-top:2px;font-family:ui-monospace,monospace}
.adm .ed-vacio{text-align:center;padding:20px 0;font-size:.78rem;color:var(--muted)}
.adm .ed-pie{font-size:.71rem;color:var(--faint);line-height:1.6;margin:14px 2px 0;max-width:76ch}
/* La edición bajo el título en la lista de sorteos. */
.adm .cell-main .ed-fila{display:block;margin-top:5px}
/* Validación del enlace de la transmisión, mientras se escribe. */
.adm .vid-ok,.adm .vid-mal{margin-top:8px;font-size:.74rem;padding:8px 11px;border-radius:10px}
.adm .vid-ok{background:color-mix(in oklab,var(--s-good) 12%,transparent);color:var(--txt);
  border:1px solid color-mix(in oklab,var(--s-good) 40%,transparent)}
.adm .vid-ok b{font-family:ui-monospace,monospace}
.adm .vid-mal{background:color-mix(in oklab,var(--s-warn) 12%,transparent);color:var(--txt);
  border:1px solid color-mix(in oklab,var(--s-warn) 40%,transparent)}
/* Validación del enlace de la transmisión, mientras se escribe. */
.adm .vid-ok,.adm .vid-mal{margin-top:8px;font-size:.74rem;padding:8px 11px;border-radius:10px;line-height:1.5}
.adm .vid-ok{background:color-mix(in oklab,var(--s-good) 12%,transparent);color:var(--txt);
  border:1px solid color-mix(in oklab,var(--s-good) 40%,transparent)}
.adm .vid-ok b{font-family:ui-monospace,monospace}
.adm .vid-mal{background:color-mix(in oklab,var(--s-warn) 12%,transparent);color:var(--txt);
  border:1px solid color-mix(in oklab,var(--s-warn) 40%,transparent)}

/* ───────── la grabación dentro de un acta ─────────
   Cerrado es un enlace discreto; abierto, un formulario pequeño. Va debajo de
   la línea de la lotería y la fecha, dentro de la misma acta, porque la
   grabación pertenece a esa fecha y no al sorteo entero. */
.adm .acta-vid{
  display:inline-flex;align-items:center;gap:6px;width:-moz-fit-content;width:fit-content;margin-top:7px;
  padding:0;background:none;border:0;font-family:inherit;cursor:pointer;
  font-size:.71rem;font-weight:700;color:var(--solid-ink);
}
.adm .acta-vid svg.ic{width:.8rem;height:.8rem}
.adm .acta-vid:active{opacity:.7}

.adm .acta-vid-ed{
  margin-top:10px;padding:14px;border-radius:12px;
  background:var(--wash-2);border:1px solid var(--stroke);
  display:flex;flex-direction:column;gap:2px;
}
.adm .acta-vid-ed .f{margin-bottom:10px}
.adm .acta-vid-ed .f:last-of-type{margin-bottom:12px}
.adm .acta-vid-ok,.adm .acta-vid-mal{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.73rem;padding:8px 11px;border-radius:9px;margin-bottom:12px;
}
.adm .acta-vid-ok{background:color-mix(in oklab,var(--s-good) 12%,transparent);
  border:1px solid color-mix(in oklab,var(--s-good) 38%,transparent)}
.adm .acta-vid-ok > span{flex:1 1;min-width:0}
.adm .acta-vid-ok b{font-family:ui-monospace,monospace}
.adm .acta-vid-ok a{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;text-decoration:none;
  color:var(--txt);font-weight:650;padding:4px 9px;border-radius:999px;
  background:var(--wash);border:1px solid var(--stroke);
}
.adm .acta-vid-ok a svg.ic{width:.72rem;height:.72rem}
.adm .acta-vid-mal{background:color-mix(in oklab,var(--s-warn) 12%,transparent);
  border:1px solid color-mix(in oklab,var(--s-warn) 38%,transparent)}
.adm .acta-vid-btns{display:flex;gap:8px;flex-wrap:wrap}

/* ───────── ajustar saldo ─────────
   El aviso del bolsillo que sale al banco, el conmutador abonar/descontar y la
   vista previa de antes y después. Tamaños de los que ya usa el panel. */
.adm .aj-ojo{
  display:flex;gap:9px;align-items:flex-start;margin-top:9px;padding:10px 12px;
  border-radius:10px;font-size:.75rem;line-height:1.5;
  background:color-mix(in oklab,var(--s-warn) 13%,transparent);
  border:1px solid color-mix(in oklab,var(--s-warn) 42%,transparent);
}
.adm .aj-ojo svg.ic{width:.9rem;height:.9rem;flex-shrink:0;margin-top:2px;color:var(--s-warn)}

.adm .aj-signo{display:flex;gap:6px}
.adm .aj-signo button{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  padding:9px 13px;border-radius:10px;font-family:inherit;cursor:pointer;
  font-size:.78rem;font-weight:700;
  background:var(--wash-2);border:1px solid var(--stroke);color:var(--muted);
}
.adm .aj-signo button svg.ic{width:.78rem;height:.78rem}
.adm .aj-signo button.on{background:var(--s-good);border-color:var(--s-good);color:#fff}
.adm .aj-signo button.on.mal{background:var(--s-crit);border-color:var(--s-crit)}

/* Antes → después. Es lo que convierte un número tecleado en una consecuencia
   visible, y lo que caza el cero de más antes de aplicarlo. */
.adm .aj-previa{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;
  padding:12px 14px;border-radius:12px;
  background:var(--wash);border:1px solid var(--stroke);
}
.adm .aj-previa.mal{border-color:color-mix(in oklab,var(--s-crit) 45%,transparent)}
.adm .aj-previa svg.ic{width:.85rem;height:.85rem;color:var(--faint);flex-shrink:0}
.adm .aj-previa i{
  display:block;font-style:normal;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);font-weight:650;margin-bottom:2px;
}
.adm .aj-previa b{display:block;font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.adm .aj-previa .sp{flex:1 1}
.adm .aj-previa .delta{font-size:.95rem;font-weight:800;color:var(--s-good)}
.adm .aj-previa .delta.menos{color:var(--s-crit)}
.adm .aj-mal{
  margin-bottom:14px;padding:10px 12px;border-radius:10px;font-size:.75rem;
  background:color-mix(in oklab,var(--s-crit) 12%,transparent);
  border:1px solid color-mix(in oklab,var(--s-crit) 42%,transparent);
}

/* Lo que se publica en la billetera del usuario, a la vista de quien lo escribe. */
.adm .aj-publico{
  padding:11px 13px;border-radius:11px;
  background:var(--wash-2);border:1px dashed var(--stroke);
}
.adm .aj-publico .k{
  display:block;font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);font-weight:650;margin-bottom:5px;
}
.adm .aj-publico .v{display:block;font-size:.8rem}
.adm .aj-publico .v b{color:var(--s-good);font-family:ui-monospace,monospace}
.adm .aj-publico .v b.menos{color:var(--s-crit)}

/* ───────── premios por posición ───────── */
/* La tarjeta-resumen del formulario. Una línea: si están puestos y por cuánto.
   Toda la configuración vive en el cajón. */
.adm .pp-card{display:flex;align-items:center;gap:12px;padding:13px 15px}
.adm .pp-ico{
  width:34px;height:34px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;
  justify-content:center;background:var(--mio-bg);border:1px solid var(--solid);
}
.adm .pp-ico svg.ic{width:17px;height:17px;color:var(--solid-ink)}
.adm .pp-ico.off{background:var(--wash);border-color:var(--stroke)}
.adm .pp-ico.off svg.ic{color:var(--faint)}
.adm .pp-tx{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:1px}
.adm .pp-tx b{font-size:.82rem;font-weight:650}
.adm .pp-tx b.off{color:var(--muted);font-weight:600}
.adm .pp-tx > span{font-size:.72rem;color:var(--faint);overflow:hidden;text-overflow:ellipsis}

/* El cajón necesita algo más de ancho que los demás: la escalera lleva cuatro
   columnas por fila y con 376 px los importes se estrangulan. */
.adm .pp-drawer{width:min(440px,100vw)}
/* El título en una sola línea. Cabe de sobra —el interruptor y la equis suman
   unos 70 px—, pero sin esto un ancho estrecho lo partiría en dos y la cabecera
   crecería el doble de alto. */
.adm .pp-drawer .drawer-h b{white-space:nowrap}

/* repartidor */
.adm .pp-rep{
  display:flex;flex-direction:column;gap:9px;padding:12px 13px;border-radius:11px;
  background:var(--wash-2);border:1px solid var(--hair);
}
.adm .pp-rep-h{display:flex;align-items:center;gap:6px;font-size:.76rem;font-weight:650}
.adm .pp-rep-h svg.ic{width:14px;height:14px;color:var(--solid-ink)}
.adm .pp-rep .frow{gap:9px}
.adm .pp-rep-f{display:flex;align-items:center;gap:10px}
.adm .pp-rep-f .help{flex:1 1;margin:0}
.adm .pp-curvas{display:flex;flex-wrap:wrap;gap:6px}
.adm .pp-curvas button{
  padding:4px 11px;border-radius:20px;font-size:.72rem;border:1px solid var(--stroke);
  background:transparent;color:var(--muted);transition:background .14s,border-color .14s;
}
.adm .pp-curvas button:hover{border-color:var(--stroke-hi);color:var(--txt)}
.adm .pp-curvas button.on{background:var(--solid);border-color:var(--solid);color:var(--solid-txt);font-weight:650}

/* la escalera */
.adm .pp-esc{display:flex;flex-direction:column;gap:6px}
.adm .pp-f{display:flex;align-items:center;gap:8px}
.adm .pp-p{
  flex-shrink:0;width:32px;height:30px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:.72rem;font-weight:700;color:var(--muted);
  background:var(--wash);border:1px solid var(--stroke);
}
.adm .pp-f.p1 .pp-p{background:var(--solid);border-color:var(--solid);color:var(--solid-txt)}
.adm .pp-mon{position:relative;flex:1 1;min-width:0;max-width:170px}
.adm .pp-mon i{
  position:absolute;left:9px;top:50%;transform:translateY(-50%);font-style:normal;
  font-size:.76rem;color:var(--faint);pointer-events:none;
}
.adm .pp-mon input{padding-left:21px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.adm .pp-mon input.mal{border-color:var(--s-crit)}
.adm .pp-pct{flex-shrink:0;min-width:46px;text-align:right;font-size:.7rem;color:var(--faint);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums}
.adm .pp-pct.mal{color:var(--s-crit);font-weight:600}
.adm .pp-x{
  flex-shrink:0;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--stroke);background:transparent;color:var(--faint);
  transition:border-color .14s,color .14s;
}
.adm .pp-x:hover{border-color:var(--s-crit);color:var(--s-crit)}
.adm .pp-x svg.ic{width:12px;height:12px}
.adm .pp-add{display:flex;align-items:center;gap:10px;margin-top:7px}
.adm .pp-add .help{margin:0}

/* vista previa del portal, con sus colores y no con los del panel: enseñar el
   podio en claro cuando el portal lo pinta en oscuro no serviría de nada. */
.adm .pp-prev{border:1px solid var(--stroke);border-radius:12px;overflow:hidden;background:#070708}
.adm .pp-prev-h{
  padding:8px 12px;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:650;
  color:rgba(237,237,237,.34);border-bottom:1px solid rgba(255,255,255,.09);
}
.adm .pp-podio{display:flex;align-items:flex-end;gap:7px;padding:14px 13px 0}
.adm .pp-pod{flex:1 1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.adm .pp-av{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.58rem;font-weight:700;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);color:rgba(237,237,237,.6);
}
.adm .pp-pod.p1 .pp-av{width:31px;height:31px;background:#FFB926;color:#0A0A0A;border-color:#FFB926}
.adm .pp-bl{
  width:100%;border-radius:9px 9px 0 0;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);border-bottom:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;
}
.adm .pp-pod.p1 .pp-bl{background:rgba(255,185,38,.14);border-color:#FFB926}
.adm .pp-bl i{font-style:normal;font-size:.58rem;font-weight:700;color:rgba(237,237,237,.34)}
.adm .pp-bl b{font-size:.76rem;font-weight:800;color:#FFB926;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.adm .pp-prev-r{
  padding:9px 13px;font-size:.68rem;color:rgba(237,237,237,.6);
  border-top:1px solid rgba(255,255,255,.09);
}

/* la lista nominal de quién cobra, al registrar el número */
.adm .pp-pagos{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:10px;overflow:hidden}
.adm .pp-pagos .r{display:flex;align-items:center;gap:10px;padding:8px 13px;
  border-bottom:1px solid var(--hair);font-size:.76rem}
.adm .pp-pagos .r:last-child{border-bottom:0}
.adm .pp-pagos .r .p{width:26px;flex-shrink:0;font-size:.7rem;color:var(--faint);font-weight:700}
.adm .pp-pagos .r .n{flex:1 1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm .pp-pagos .r .c{flex-shrink:0;font-size:.7rem;color:var(--faint);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.adm .pp-pagos .r .m{flex-shrink:0;font-weight:700;color:var(--solid-ink);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.adm .pp-total{
  display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:11px;
  background:var(--mio-bg);border:1px dashed var(--solid);margin-top:9px;
}
.adm .pp-total .k{flex:1 1;font-size:.74rem;color:var(--muted)}
.adm .pp-total .v{font-size:1rem;font-weight:800;color:var(--solid-ink);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}

/* ───────── vaciar la descripción ─────────
   El botón se va al extremo derecho de la barra: no es una opción de formato
   más, es tirar lo escrito, y mezclarlo con negrita y cursiva invita al
   dedazo. */
.adm .ed-barra .ed-fin{margin-left:auto}
.adm .ed-barra .ed-fin button:hover{color:var(--s-crit)}
.adm .ed-preg{
  font-size:.72rem;color:var(--muted);padding:0 6px 0 2px;white-space:nowrap;
  display:flex;align-items:center;
}
.adm .ed-barra .ed-fin .ed-si{color:var(--s-crit);font-weight:700;font-size:.74rem;width:auto;padding:0 8px}
.adm .ed-barra .ed-fin button:not(.ed-si){font-size:.74rem;width:auto;padding:0 8px}

/* ───────── loterías ─────────
   Lista con el logo delante: se reconocen antes por la marca que por el nombre,
   sobre todo con varias de la misma casa. */
.adm .lot-lista{display:flex;flex-direction:column}
.adm .lot{display:flex;align-items:center;gap:12px;padding:12px 15px;border-bottom:1px solid var(--hair)}
.adm .lot:last-child{border-bottom:0}
.adm .lot.off{opacity:.55}
.adm .lot-logo{
  width:38px;height:38px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;
  justify-content:center;background:var(--wash);border:1px solid var(--stroke);overflow:hidden;
}
.adm .lot-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.adm .lot-logo svg.ic{width:16px;height:16px;color:var(--faint)}
.adm .lot-tx{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:1px}
.adm .lot-tx b{font-size:.84rem;font-weight:650}
.adm .lot-d{font-size:.72rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm .lot-r{font-size:.7rem;color:var(--faint)}
.adm .lot-acts{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:600px){
  .adm .lot{flex-wrap:wrap}
  .adm .lot-acts{width:100%;justify-content:flex-start}
}

/* ═══════ CHANCE · lo propio del panel ═══════ */

/* Elegir las cifras de la jornada. De ahí sale todo lo demás, así que es el
   primer control de la pantalla y el único con cuerpo propio. */
.adm .ch-segm{display:flex;gap:4px;background:var(--wash-2);border:1px solid var(--stroke);
  border-radius:12px;padding:4px;max-width:260px}
.adm .ch-segm button{flex:1 1;padding:8px 0;border:0;border-radius:8px;background:none;
  color:var(--muted);font-size:.82rem;font-weight:700;cursor:pointer;font-family:inherit}
.adm .ch-segm button.on{background:var(--solid);color:var(--solid-txt)}

/* Qué posiciones mira cada modalidad: lleno es orden fijo, punteado cualquiera. */
.adm .ch-patron{display:inline-flex;gap:3px;vertical-align:middle}
.adm .ch-patron i{width:12px;height:18px;border-radius:4px;font-style:normal;
  background:var(--wash);border:1px solid var(--hair)}
.adm .ch-patron i.hit{background:var(--solid);border-color:var(--solid)}
.adm .ch-patron i.libre{background:transparent;border-style:dashed;border-color:var(--solid)}

/* La celda que se escribe, distinta de la que solo se lee. */
.adm .ch-celda{width:96px;text-align:right;padding:5px 8px;border-radius:8px;
  background:var(--wash-2);border:1px solid var(--stroke-hi);color:inherit;
  font-weight:700;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.adm .ch-celda:disabled{border-style:dashed;border-color:var(--hair);color:var(--faint);font-weight:500}
.adm tr.ch-off td{opacity:.5}
.adm .ch-mal{color:var(--s-crit);font-weight:700}

/* ── el ensayo antes de publicar ──
   La misma cuenta que hará el cierre, calculada sin tocar una fila. Publicar
   paga en el acto y la única vuelta atrás es deshacerlo, así que el resumen
   tiene que poder verse antes de pulsar. */
.adm .ch-ensayo{
  display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;
  background:var(--wash-2);border:1px solid var(--stroke);
}
/* Con acertantes se enciende: es dinero que va a salir. */
.adm .ch-ensayo.hay{
  border-color:rgba(255,185,38,.4);
  background:linear-gradient(150deg,rgba(255,185,38,.09),rgba(255,185,38,.02));
}
.adm .ch-ensayo .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.adm .ch-ensayo-n{
  font-size:1.15rem;font-weight:700;letter-spacing:.05em;color:var(--solid-ink);
}
.adm .ch-ensayo table{font-size:.78rem}

.adm .ch-riesgo{display:flex;align-items:baseline;gap:10px;
  background:rgba(250,178,25,.08);border:1px solid rgba(250,178,25,.4);
  border-radius:12px;padding:12px 14px}
.adm .ch-riesgo b{font-size:1.3rem;font-weight:700;letter-spacing:-.02em}
.adm .ch-riesgo span{font-size:.75rem;color:var(--muted)}

/* Cartón: el retorno por encima del 100 % pierde dinero por diseño. */
.adm .ch-riesgo.mal{background:rgba(224,86,86,.08);border-color:rgba(224,86,86,.45)}
.adm .ch-riesgo.mal b{color:var(--s-crit)}

/*!********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/ui.css ***!
  \********************************************************************************************************************************************************************************************************************************************************/
/* ============ RASKALE · controles compartidos (select, calendario, buscador)
   Clases globales: Radix los renderiza en un portal fuera de .adm  ============ */

/* ---------- disparador (select y calendario) ---------- */
.ui-sel{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--wash-2);border:1px solid var(--stroke);border-radius:9px;
  color:var(--txt);font-family:inherit;font-size:.79rem;font-weight:500;
  padding:8px 11px;cursor:pointer;line-height:1.2;white-space:nowrap;
  transition:border-color .12s,background .12s;
}
.ui-sel:hover{border-color:var(--stroke-hi)}
.ui-sel[data-state="open"],.ui-sel.on{border-color:var(--focus);background:var(--wash)}
.ui-sel:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ui-sel-label{overflow:hidden;text-overflow:ellipsis}
.ui-sel-arrow{display:flex;color:var(--faint);margin-left:auto}
.ui-sel-arrow svg{width:.85rem;height:.85rem}
.ui-sel[data-state="open"] .ui-sel-arrow{transform:rotate(180deg)}

/* ---------- panel flotante ---------- */
.ui-pop{
  z-index:80;border-radius:12px;overflow:hidden;
  background:var(--panel);border:1px solid var(--stroke-hi);
  box-shadow:inset 0 1px 0 var(--gloss),0 16px 44px rgba(0,0,0,.34);
  animation:uiIn .13s ease;
}
@keyframes uiIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ui-pop{animation:none}}

.ui-sel-pop{min-width:var(--radix-select-trigger-width)}
.ui-sel-vp{
  padding:5px;
  /* listas largas (los 32 estados) se desplazan en vez de salirse de la pantalla */
  max-height:min(320px,var(--radix-select-content-available-height,320px));
  overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--stroke) transparent;
}
.ui-sel-vp::-webkit-scrollbar{width:8px}
.ui-sel-vp::-webkit-scrollbar-track{background:transparent}
.ui-sel-vp::-webkit-scrollbar-thumb{background:var(--stroke);border-radius:99px}
.ui-sel-vp::-webkit-scrollbar-thumb:hover{background:var(--stroke-hi)}
.ui-sel-item{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;
  font-size:.8rem;color:var(--muted);cursor:pointer;outline:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;
}
.ui-sel-item[data-highlighted]{background:var(--wash);color:var(--txt)}
.ui-sel-item[data-state="checked"]{color:var(--txt);font-weight:600}
.ui-sel-check{width:14px;display:flex;align-items:center;justify-content:center;color:var(--txt);flex-shrink:0}
.ui-sel-check svg{width:.8rem;height:.8rem}
.ui-sel-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.ui-sel-hint{font-size:.67rem;color:var(--faint);font-weight:500}

/* ---------- buscador ---------- */
.ui-search{
  display:inline-flex;align-items:center;gap:8px;flex:1 1;min-width:180px;max-width:320px;
  background:var(--wash-2);border:1px solid var(--stroke);border-radius:9px;
  padding:0 10px;color:var(--faint);transition:border-color .12s;
}
.ui-search:focus-within{border-color:var(--focus);color:var(--txt)}
.ui-search svg{width:.9rem;height:.9rem;flex-shrink:0}
.ui-search input{
  flex:1 1;min-width:0;background:none;border:none;outline:none;
  color:var(--txt);font-family:inherit;font-size:.79rem;padding:8px 0;
}
.ui-search input::placeholder{color:var(--faint)}
.ui-search button{
  background:none;border:none;color:var(--faint);cursor:pointer;display:flex;
  padding:2px;border-radius:5px;
}
.ui-search button:hover{color:var(--txt)}

/* ---------- calendario ---------- */
.ui-cal-pop{width:auto}
.ui-cal-head{padding:10px 12px;border-bottom:1px solid var(--hair)}
.ui-cal-body{display:flex;gap:0}
.ui-cal-presets{
  display:flex;flex-direction:column;gap:2px;padding:12px 10px;
  border-right:1px solid var(--hair);min-width:148px;
}
.ui-cal-presets button{
  background:none;border:none;text-align:left;color:var(--muted);
  font-family:inherit;font-size:.76rem;padding:7px 9px;border-radius:7px;cursor:pointer;white-space:nowrap;
}
.ui-cal-presets button:hover{background:var(--wash);color:var(--txt)}
.ui-cal-foot{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-top:1px solid var(--hair);background:var(--wash-2);
}
.ui-link{
  background:none;border:none;color:var(--muted);font-family:inherit;font-size:.76rem;
  cursor:pointer;padding:4px 2px;font-weight:500;
}
.ui-link:hover:not(:disabled){color:var(--txt)}
.ui-link:disabled{opacity:.4;cursor:default}
.ui-btn{
  background:var(--solid);color:var(--solid-txt);border:none;border-radius:8px;
  font-family:inherit;font-size:.76rem;font-weight:600;padding:7px 14px;cursor:pointer;
}

.ui-seg{display:inline-flex;background:var(--wash-2);border:1px solid var(--stroke);border-radius:8px;padding:3px;gap:2px}
.ui-seg button{
  background:none;border:none;color:var(--muted);font-family:inherit;
  font-size:.72rem;font-weight:600;padding:5px 11px;border-radius:6px;cursor:pointer;white-space:nowrap;
}
.ui-seg button.on{background:var(--solid);color:var(--solid-txt)}

/* ---------- react-day-picker vestido con los tokens del sistema ----------
   Todo va prefijado con .ui-cal-pop: dos clases ganan a la hoja del paquete
   (que declara `--rdp-accent-color: blue`) sin depender del orden de imports. */
.ui-cal-pop .rdp-root{
  --rdp-accent-color:var(--solid);
  --rdp-accent-background-color:var(--wash);
  --rdp-day-height:34px;
  --rdp-day-width:34px;
  --rdp-day_button-height:32px;
  --rdp-day_button-width:32px;
  --rdp-day_button-border-radius:8px;
  --rdp-day_button-border:1px solid transparent;
  --rdp-selected-border:none;
  --rdp-outside-opacity:.3;
  --rdp-disabled-opacity:.3;
  --rdp-today-color:var(--txt);
  --rdp-weekday-opacity:1;
  --rdp-nav_button-height:26px;
  --rdp-nav_button-width:26px;
  /* La franja que el paquete reserva arriba para el título y las flechas. Por
     defecto son 2.75rem, demasiado para este calendario compacto; lo que no se
     puede es quitarla, porque las flechas van posicionadas de forma absoluta
     dentro de ella y sin altura se derraman sobre la fila de LU MA MI… */
  --rdp-nav-height:30px;
  --rdp-months-gap:14px;
  /* rango */
  --rdp-range_middle-background-color:var(--wash);
  --rdp-range_middle-color:var(--txt);
  --rdp-range_start-color:var(--solid-txt);
  --rdp-range_end-color:var(--solid-txt);
  --rdp-range_start-date-background-color:var(--solid);
  --rdp-range_end-date-background-color:var(--solid);
  font-family:inherit;font-size:.78rem;padding:12px;margin:0;color:var(--txt);
}
.ui-cal-pop .rdp-month_caption{
  font-size:.82rem;font-weight:700;color:var(--txt);text-transform:capitalize;
  /* Altura exacta de la franja de navegación —no `auto`— para que las flechas
     quepan dentro, y el aire hasta los días como margen, que no la encoge. */
  display:flex;align-items:center;
  height:var(--rdp-nav-height);padding:0;margin:0 0 6px;
}
.ui-cal-pop .rdp-weekday{
  font-size:.63rem;font-weight:600;color:var(--faint);
  text-transform:uppercase;letter-spacing:.06em;
}
.ui-cal-pop .rdp-day_button{
  border-radius:8px;color:var(--muted);font-family:inherit;font-size:.77rem;font-weight:500;
  border:1px solid transparent;transition:background-color .1s,color .1s;
}
.ui-cal-pop .rdp-day_button:hover{background-color:var(--wash);color:var(--txt)}
.ui-cal-pop .rdp-today:not(.rdp-outside) .rdp-day_button{
  color:var(--txt);font-weight:700;border-color:var(--stroke-hi);
}
/* el paquete agranda la fuente del día seleccionado: lo dejamos parejo */
.ui-cal-pop .rdp-selected{font-size:inherit;font-weight:inherit}
.ui-cal-pop .rdp-selected .rdp-day_button{
  background-color:var(--solid);color:var(--solid-txt);font-weight:700;border-color:transparent;
}
.ui-cal-pop .rdp-range_middle{background-color:var(--wash)}
.ui-cal-pop .rdp-range_middle .rdp-day_button{
  background-color:transparent;color:var(--txt);font-weight:500;border-radius:0;
}
.ui-cal-pop .rdp-range_middle:hover .rdp-day_button{background-color:var(--wash-2)}
.ui-cal-pop .rdp-range_start .rdp-day_button,
.ui-cal-pop .rdp-range_end .rdp-day_button{
  background-color:var(--solid);color:var(--solid-txt);font-weight:700;
}
.ui-cal-pop .rdp-range_start .rdp-day_button{border-radius:8px 0 0 8px}
.ui-cal-pop .rdp-range_end .rdp-day_button{border-radius:0 8px 8px 0}
.ui-cal-pop .rdp-range_start.rdp-range_end .rdp-day_button{border-radius:8px}
.ui-cal-pop .rdp-outside .rdp-day_button{color:var(--faint)}
.ui-cal-pop .rdp-nav{gap:4px}
.ui-cal-pop .rdp-button_previous,
.ui-cal-pop .rdp-button_next{
  color:var(--muted);border-radius:7px;border:1px solid var(--stroke);
  background-color:var(--wash-2);transition:color .1s,border-color .1s;
}
.ui-cal-pop .rdp-button_previous:hover,
.ui-cal-pop .rdp-button_next:hover{color:var(--txt);border-color:var(--stroke-hi)}
.ui-cal-pop .rdp-chevron{fill:currentColor}
.ui-cal-pop .rdp-day_button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

/* ---------- barra de filtros ---------- */
.ui-filters{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:12px 18px;border-bottom:1px solid var(--hair);
}
.ui-filters .count{font-size:.72rem;color:var(--faint);white-space:nowrap}

/* ---------- asistente por pasos ---------- */
.ui-stepper{
  display:flex;list-style:none;margin:0;padding:0;
  overflow-x:auto;scrollbar-width:none;
}
.ui-stepper::-webkit-scrollbar{display:none}
.ui-step{flex:1 1;min-width:116px;position:relative}
/* línea que une con el siguiente paso */
.ui-step:not(:last-child)::after{
  content:"";position:absolute;top:15px;left:calc(50% + 20px);right:calc(-50% + 20px);
  height:1px;background:var(--stroke);
}
.ui-step.done:not(:last-child)::after{background:var(--txt);opacity:.45}
.ui-step > button{
  display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;
  background:none;border:none;padding:0 4px;cursor:pointer;font-family:inherit;text-align:center;
}
.ui-step > button:disabled{cursor:default}
.ui-step-dot{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--stroke);
  color:var(--faint);font-size:.78rem;font-weight:700;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;
  transition:background-color .15s,color .15s,border-color .15s;
}
.ui-step-dot svg{width:.9rem;height:.9rem}
.ui-step.done .ui-step-dot{border-color:var(--txt);color:var(--txt)}
.ui-step.on .ui-step-dot{background:var(--solid);color:var(--solid-txt);border-color:transparent}
.ui-step-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.ui-step-txt b{font-size:.76rem;font-weight:600;color:var(--faint)}
.ui-step-txt span{font-size:.66rem;color:var(--faint);opacity:.75}
.ui-step.done .ui-step-txt b,.ui-step.on .ui-step-txt b{color:var(--txt)}
.ui-step > button:focus-visible .ui-step-dot{outline:2px solid var(--focus);outline-offset:2px}

.ui-wizard{display:flex;flex-direction:column;gap:18px}
.ui-wizard-body{display:flex;flex-direction:column;gap:16px}
.ui-wizard-foot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:4px;
}
.ui-wizard-foot .paso{font-size:.73rem;color:var(--faint);white-space:nowrap}

/* resumen de revisión */
.ui-review{display:flex;flex-direction:column}
.ui-review-row{
  display:flex;align-items:flex-start;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--hair);
}
.ui-review-row:last-child{border-bottom:none}
.ui-review-row > span:first-child{
  font-size:.72rem;color:var(--faint);width:170px;flex-shrink:0;padding-top:1px;
}
.ui-review-row > b{font-size:.82rem;font-weight:600;flex:1 1;min-width:0;word-break:break-word}
.ui-review-row .vacio{color:var(--faint);font-weight:400}

/* ---------- pestañas ---------- */
.ui-tabs{display:flex;flex-direction:column;gap:18px}
/* Segmentado, el mismo control que usan los filtros de las tablas y las dos
   vistas de /ajustes/notificaciones. Antes eran pestañas subrayadas: dos
   maneras distintas de decir lo mismo en el mismo panel. Se cambia aquí, en el
   componente compartido, para que ninguna página tenga que acordarse. */
.ui-tablist{
  display:inline-flex;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none;
  background:var(--wash-2);border:1px solid var(--stroke);border-radius:9px;padding:3px;
}
.ui-tablist::-webkit-scrollbar{display:none}
.ui-tab{
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  background:none;border:none;border-radius:7px;
  color:var(--muted);font-family:inherit;font-size:.76rem;font-weight:600;
  padding:7px 13px;cursor:pointer;transition:background .12s,color .12s;
}
.ui-tab svg.ic{width:.9rem;height:.9rem}
.ui-tab:hover{color:var(--txt)}
.ui-tab[data-state="active"]{background:var(--solid);color:var(--solid-txt)}
.ui-tab:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.ui-tab-badge{
  font-size:.64rem;font-weight:700;padding:1px 5px;border-radius:99px;
  background:var(--wash);color:var(--faint);
}
/* Sobre el fondo ámbar de la pestaña activa, un oscurecido lee mejor que un
   color propio. */
.ui-tab[data-state="active"] .ui-tab-badge{background:rgba(0,0,0,.16);color:inherit}
/* el panel separa sus tarjetas igual que .fields */
.ui-tabpanel{display:flex;flex-direction:column;gap:16px;outline:none}
.ui-tabpanel[data-state="inactive"]{display:none}

/* aviso de cambios sin guardar */
.ui-dirty{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.74rem;color:var(--txt);font-weight:500;
  padding:5px 11px;border-radius:99px;
  background:var(--wash);border:1px solid var(--stroke-hi);
}
.ui-dirty .dot{width:6px;height:6px;border-radius:50%;background:var(--s-warn);flex-shrink:0}

/* ---------- fecha + hora ---------- */
.ui-dt{width:100%;justify-content:flex-start}
.ui-dt .ui-sel-label{flex:1 1;text-align:left}
.ui-dt-pop{min-width:290px}
.ui-dt-time{
  display:flex;align-items:center;gap:7px;padding:11px 12px;
  border-top:1px solid var(--hair);
}
.ui-dt-time .lbl{
  display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--muted);flex:1 1;
}
.ui-dt-time .lbl svg{width:.9rem;height:.9rem}
.ui-dt-time .sep{color:var(--faint);font-weight:700}
.ui-dt-note{
  padding:9px 12px;border-top:1px solid var(--hair);
  font-size:.69rem;color:var(--faint);line-height:1.4;
}

/* ---------- paginación ---------- */
.ui-pager{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 18px;border-top:1px solid var(--hair);
}
.ui-pager .info{font-size:.75rem;color:var(--faint)}
.ui-pager .info b{color:var(--txt);font-weight:600;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.ui-pager .size{display:flex;align-items:center;gap:7px;font-size:.75rem;color:var(--faint);white-space:nowrap}
.ui-pager .pages{display:flex;gap:4px;align-items:center}
.ui-pager .dots{color:var(--faint);padding:0 2px;font-size:.75rem}
.ui-pager-btn{
  min-width:30px;height:30px;padding:0 6px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--wash-2);border:1px solid var(--stroke);color:var(--muted);
  cursor:pointer;font-family:inherit;font-size:.76rem;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;
  transition:color .1s,border-color .1s,background-color .1s;
}
.ui-pager-btn:hover:not(:disabled){color:var(--txt);border-color:var(--stroke-hi)}
.ui-pager-btn.on{background:var(--solid);color:var(--solid-txt);border-color:transparent;font-weight:700}
.ui-pager-btn:disabled{opacity:.35;cursor:default}
.ui-pager-btn svg.ic{width:.85rem;height:.85rem}

/* ───────── casillas de código de verificación ───────── */
.ui-code{display:flex;gap:8px;justify-content:space-between}
.ui-code input{
  flex:1 1;min-width:0;aspect-ratio:1/1;max-width:56px;
  text-align:center;font-size:1.25rem;font-weight:700;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;
  border-radius:12px;border:1px solid var(--stroke);background:var(--glass);color:var(--txt);
  padding:0;transition:border-color .14s,box-shadow .14s;
}
.ui-code input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in oklab,var(--focus) 22%,transparent)}
.ui-code input:not(:placeholder-shown){border-color:var(--txt)}

/* ───────── teléfono con prefijo del país ───────── */
.ui-tel{display:flex;align-items:stretch;gap:0}
.ui-tel > span{
  display:flex;align-items:center;padding:0 10px;font-size:.83rem;font-weight:600;color:var(--muted);
  border:1px solid var(--stroke);border-right:none;border-radius:12px 0 0 12px;background:var(--wash);
  white-space:nowrap;
}
.ui-tel > input{border-radius:0 12px 12px 0 !important;flex:1 1;min-width:0}

/* ───────── cantidad con el signo de pesos pegado ─────────
   Mismo armazón que el teléfono con su prefijo: una pastilla a la izquierda y
   el campo pegado. Se escribe aparte y no se reutiliza .ui-tel porque lo que
   va delante no es un dato, es una unidad, y algún día uno de los dos cambiará
   sin el otro. */
.ui-money{display:flex;align-items:stretch;gap:0}
.ui-money > span{
  display:flex;align-items:center;padding:0 11px;font-size:.83rem;font-weight:600;color:var(--muted);
  border:1px solid var(--stroke);border-right:none;border-radius:12px 0 0 12px;background:var(--wash);
}
.ui-money > input{border-radius:0 12px 12px 0 !important;flex:1 1;min-width:0;text-align:right}

/* ───────── fuerza de la contraseña ───────── */
.ui-pw{display:flex;align-items:center;gap:10px;margin-top:2px}
.ui-pw-bar{flex:1 1;height:5px;border-radius:99px;background:var(--wash);overflow:hidden}
.ui-pw-bar > i{display:block;height:100%;border-radius:99px;transition:width .22s ease,background .22s}
.ui-pw-bar > i.crit{background:var(--s-crit)}
.ui-pw-bar > i.warn{background:var(--s-warn)}
.ui-pw-bar > i.good{background:var(--s-good)}
.ui-pw-lbl{font-size:.7rem;font-weight:600;min-width:66px;text-align:right}
.ui-pw-lbl.crit{color:var(--s-crit)}
.ui-pw-lbl.warn{color:var(--s-warn)}
.ui-pw-lbl.good{color:var(--s-good)}
.ui-pw-reglas{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.ui-pw-reglas li{display:flex;align-items:center;gap:7px;font-size:.72rem;color:var(--faint)}
.ui-pw-reglas li.ok{color:var(--s-good)}
.ui-pw-reglas li svg.ic{width:.82rem;height:.82rem}
.ui-pw-reglas li .pt{
  width:.82rem;height:.82rem;display:inline-flex;flex-shrink:0;position:relative;
}
.ui-pw-reglas li .pt::after{
  content:"";position:absolute;inset:0;margin:auto;width:4px;height:4px;border-radius:99px;background:currentColor;opacity:.5;
}

/* enlace de texto dentro de párrafos */
.lnk{background:none;border:none;padding:0;color:var(--txt);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline}
.lnk:hover{opacity:.75}

/* ───────── stepper compacto ─────────
   Sin el min-width por paso ni las pistas, los 5 pasos entran completos en el
   ancho del portal en lugar de cortarse por la derecha. */
.ui-stepper.compact{overflow:visible}
.ui-stepper.compact .ui-step{min-width:0}
.ui-stepper.compact .ui-step > button{gap:6px;padding:0 1px}
.ui-stepper.compact .ui-step-dot{width:27px;height:27px;font-size:.71rem}
.ui-stepper.compact .ui-step-dot svg{width:.8rem;height:.8rem}
.ui-stepper.compact .ui-step-txt{align-items:center;width:100%}
.ui-stepper.compact .ui-step-txt b{
  font-size:.63rem;line-height:1.2;letter-spacing:0;
  overflow-wrap:break-word;-webkit-hyphens:none;hyphens:none;
}
/* la línea une el centro de este punto con el del siguiente */
.ui-stepper.compact .ui-step:not(:last-child)::after{
  top:13px;left:calc(50% + 17px);right:calc(-50% + 17px);
}

/* en pantallas muy angostas (SE y similares) se aprieta un poco más */
@media (max-width:380px){
  .ui-stepper.compact .ui-step-txt b{font-size:.58rem}
  .ui-stepper.compact .ui-step-dot{width:24px;height:24px;font-size:.66rem}
  .ui-stepper.compact .ui-step:not(:last-child)::after{
    top:12px;left:calc(50% + 15px);right:calc(-50% + 15px);
  }
}

/* ───────── campo de contraseña con ojo ─────────
   En ui.css y no en portal.css porque también lo usa el panel, que no carga
   los estilos del portal. */
.pw-campo{position:relative;display:flex}
.pw-campo input{flex:1 1;min-width:0;padding-right:44px}
.pw-ojo{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--faint);
  transition:color .12s,background .12s;
}
.pw-ojo:hover{color:var(--txt);background:var(--wash)}
.pw-ojo svg.ic{width:1rem;height:1rem}
/* tabIndex -1: al tabular desde la contraseña se va al botón de enviar, no
   al ojo, que es un atajo del ratón y no un paso del formulario. */
.pw-ojo:focus-visible{outline:2px solid var(--focus);outline-offset:1px}


/* ───────── editor de texto con formato ─────────
   Vive en ui.css porque el editor es un componente compartido, como el
   selector o el calendario, y las cuatro hojas cargan en las dos apps. */
.ed{border:1px solid var(--stroke);border-radius:12px;overflow:hidden;background:var(--wash)}
.ed-barra{display:flex;gap:3px;padding:5px 6px;flex-wrap:wrap;
  border-bottom:1px solid var(--stroke);background:var(--panel)}
.ed-grupo{display:flex;gap:2px}
.ed-grupo + .ed-grupo{margin-left:6px;padding-left:8px;border-left:1px solid var(--hair)}
.ed-barra button{
  width:27px;height:27px;border-radius:7px;border:none;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:.76rem;line-height:1;
}
.ed-barra button:hover{background:var(--wash);color:var(--txt)}
.ed-barra button:active{transform:scale(.92)}
.ed-barra svg.ic{width:.85rem;height:.85rem}
/* Cada botón se ve como lo que hace: la B en negrita, la I en cursiva. */
.ed-t.bold{font-weight:800}
.ed-t.italic{font-style:italic;font-family:Georgia,serif}
.ed-t.underline{text-decoration:underline}
.ed-t.strikeThrough{text-decoration:line-through}
.ed-t.formatBlock{font-weight:700;font-size:.7rem}
.ed-t.mark{background:var(--solid);color:var(--solid-txt);border-radius:3px;
  padding:0 3px;font-weight:800;font-size:.68rem}
/* El botón activo, como el del emoji con su panel abierto. */
.ed-barra button.on{background:var(--mio-bg);color:var(--solid-ink)}

/* ── panel de emojis ──
   Una lista corta y por categorías, no el catálogo entero: con dos mil emojis
   hay que buscar, y buscar cuesta más que escribir la palabra. */
.ed-emo{
  display:flex;flex-direction:column;gap:7px;padding:8px 8px 10px;
  border-bottom:1px solid var(--stroke);background:var(--panel);
}
.ed-emo-cats{display:flex;gap:4px;flex-wrap:wrap}
.ed-emo-cats button{
  height:22px;padding:0 9px;border-radius:20px;font-size:.68rem;cursor:pointer;
  border:1px solid var(--stroke);background:transparent;color:var(--muted);
  font-family:inherit;line-height:1;
}
.ed-emo-cats button:hover{color:var(--txt)}
.ed-emo-cats button.on{background:var(--solid);border-color:var(--solid);
  color:var(--solid-txt);font-weight:700}
/* Rejilla elástica: en el panel ancho caben más por fila, y en el estrecho
   se reacomodan sin dejar un hueco al final. */
.ed-emo-rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));
  grid-gap:2px;
  gap:2px;max-height:120px;overflow-y:auto}
.ed-emo-rej button{
  width:30px;height:30px;border-radius:7px;border:none;background:none;cursor:pointer;
  font-size:1.02rem;line-height:1;display:flex;align-items:center;justify-content:center;
}
.ed-emo-rej button:hover{background:var(--wash)}

.ed-enlace{display:flex;gap:6px;align-items:center;padding:7px 8px;
  border-bottom:1px solid var(--stroke);background:var(--panel)}
.ed-enlace input{flex:1 1;min-width:0;font-size:.78rem;padding:6px 9px;border-radius:8px;
  border:1px solid var(--stroke);background:var(--wash);color:var(--txt)}

.ed-caja{
  padding:11px 13px;font-size:.82rem;line-height:1.6;color:var(--txt);
  outline:none;overflow-y:auto;max-height:420px;
}
.ed-caja:focus-visible{box-shadow:inset 0 0 0 2px var(--solid)}
/* El texto de ayuda cuando está vacío: un contenteditable no tiene placeholder. */
.ed-caja.vacia::before{content:attr(data-ph);color:var(--faint);pointer-events:none}

/* ───────── descripción con formato, ya publicada ─────────
   Las mismas reglas para el portal y para la ficha del panel: es el mismo
   texto y tiene que leerse igual en los dos sitios. */
.desc p,.det-desc p{margin:0 0 .7em}
.desc p:last-child,.det-desc p:last-child{margin-bottom:0}
.desc h3,.desc h4,.det-desc h3,.det-desc h4{
  font-size:1em;font-weight:700;margin:1.1em 0 .4em;line-height:1.35}
.desc h3:first-child,.det-desc h3:first-child{margin-top:0}
.desc ul,.desc ol,.det-desc ul,.det-desc ol{margin:0 0 .7em;padding-left:1.25em}
.desc li,.det-desc li{margin:.2em 0}
.desc a,.det-desc a{color:var(--solid);text-decoration:underline;text-underline-offset:2px}
.desc blockquote,.det-desc blockquote{
  margin:.7em 0;padding-left:.8em;border-left:2px solid var(--stroke);color:var(--muted)}
/* El resaltado. Va en ámbar sobre texto oscuro en los dos temas: un fondo
   claro con el gris del cuerpo encima no llegaría al contraste mínimo. */
.desc mark,.det-desc mark{
  background:var(--solid);color:var(--solid-txt);
  border-radius:4px;padding:0 4px;
}
.desc s,.det-desc s{opacity:.65}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./node_modules/react-day-picker/src/style.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
/* Variables declaration */
.rdp-root {
  --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
  --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */

  --rdp-day-height: 44px; /* The height of the day cells. */
  --rdp-day-width: 44px; /* The width of the day cells. */

  --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
  --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
  --rdp-day_button-height: 42px; /* The height of the day cells. */
  --rdp-day_button-width: 42px; /* The width of the day cells. */

  --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
  --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
  --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
  --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */

  --rdp-dropdown-gap: 0.5rem; /* The gap between the dropdowns used in the month captons. */

  --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */

  --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
  --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */
  --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */
  --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */

  --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
  --rdp-range_middle-color: inherit; /* The color of the range text. */

  --rdp-range_start-color: white; /* The color of the range text. */
  --rdp-range_start-background: linear-gradient(
    var(--rdp-gradient-direction),
    transparent 50%,
    var(--rdp-range_middle-background-color) 50%
  ); /* Used for the background of the start of the selected range. */
  --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */

  --rdp-range_end-background: linear-gradient(
    var(--rdp-gradient-direction),
    var(--rdp-range_middle-background-color) 50%,
    transparent 50%
  ); /* Used for the background of the end of the selected range. */
  --rdp-range_end-color: white; /* The color of the range text. */
  --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */

  --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
  --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */

  --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
  --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
  --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
  --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */

  --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
  --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
  --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */

  --rdp-gradient-direction: 90deg;

  --rdp-animation_duration: 0.3s;
  --rdp-animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
}

.rdp-root[dir="rtl"] {
  --rdp-gradient-direction: -90deg;
}

.rdp-root[data-broadcast-calendar="true"] {
  --rdp-outside-opacity: unset;
}

/* Root of the component. */
.rdp-root {
  position: relative; /* Required to position the navigation toolbar. */
  box-sizing: border-box;
}

.rdp-root * {
  box-sizing: border-box;
}

.rdp-day {
  width: var(--rdp-day-width);
  height: var(--rdp-day-height);
  text-align: center;
}

.rdp-day_button {
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  justify-content: center;
  align-items: center;
  display: flex;

  width: var(--rdp-day_button-width);
  height: var(--rdp-day_button-height);
  border: var(--rdp-day_button-border);
  border-radius: var(--rdp-day_button-border-radius);
}

.rdp-day_button:disabled {
  cursor: revert;
}

.rdp-caption_label {
  z-index: 1;

  position: relative;
  display: inline-flex;
  align-items: center;

  white-space: nowrap;
  border: 0;
}

.rdp-dropdown:focus-visible ~ .rdp-caption_label {
  outline: 5px auto Highlight;
  /* biome-ignore lint/suspicious/noDuplicateProperties: backward compatibility */
  outline: 5px auto -webkit-focus-ring-color;
}

.rdp-button_next,
.rdp-button_previous {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -moz-appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  appearance: none;

  width: var(--rdp-nav_button-width);
  height: var(--rdp-nav_button-height);
}

.rdp-button_next:disabled,
.rdp-button_next[aria-disabled="true"],
.rdp-button_previous:disabled,
.rdp-button_previous[aria-disabled="true"] {
  cursor: revert;

  opacity: var(--rdp-nav_button-disabled-opacity);
}

.rdp-chevron {
  display: inline-block;
  fill: var(--rdp-accent-color);
}

.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
  transform: rotate(180deg);
  transform-origin: 50%;
}

.rdp-dropdowns {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--rdp-dropdown-gap);
}
.rdp-dropdown {
  z-index: 2;

  /* Reset */
  opacity: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  cursor: inherit;
  border: none;
  line-height: inherit;
}

.rdp-dropdown_root {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
  opacity: var(--rdp-disabled-opacity);
}

.rdp-month_caption {
  display: flex;
  align-content: center;
  height: var(--rdp-nav-height);
  font-weight: bold;
  font-size: large;
}

.rdp-root[data-nav-layout="around"] .rdp-month,
.rdp-root[data-nav-layout="after"] .rdp-month {
  position: relative;
}

.rdp-root[data-nav-layout="around"] .rdp-month_caption {
  justify-content: center;
  -webkit-margin-start: var(--rdp-nav_button-width);
          margin-inline-start: var(--rdp-nav_button-width);
  -webkit-margin-end: var(--rdp-nav_button-width);
          margin-inline-end: var(--rdp-nav_button-width);
  position: relative;
}

.rdp-root[data-nav-layout="around"] .rdp-button_previous {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: var(--rdp-nav-height);
  display: inline-flex;
}

.rdp-root[data-nav-layout="around"] .rdp-button_next {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  height: var(--rdp-nav-height);
  display: inline-flex;
  justify-content: center;
}

.rdp-months {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rdp-months-gap);
  max-width: -moz-fit-content;
  max-width: fit-content;
}

.rdp-month_grid {
  border-collapse: collapse;
}

.rdp-nav {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;

  display: flex;
  align-items: center;

  height: var(--rdp-nav-height);
}

.rdp-weekday {
  opacity: var(--rdp-weekday-opacity);
  padding: var(--rdp-weekday-padding);
  font-weight: 500;
  font-size: smaller;
  text-align: var(--rdp-weekday-text-align);
  text-transform: var(--rdp-weekday-text-transform);
}

.rdp-week_number {
  opacity: var(--rdp-week_number-opacity);
  font-weight: 400;
  font-size: small;
  height: var(--rdp-week_number-height);
  width: var(--rdp-week_number-width);
  border: var(--rdp-week_number-border);
  border-radius: var(--rdp-week_number-border-radius);
  text-align: var(--rdp-weeknumber-text-align);
}

/* DAY MODIFIERS */
.rdp-today:not(.rdp-outside) {
  color: var(--rdp-today-color);
}

.rdp-selected {
  font-weight: bold;
  font-size: large;
}

.rdp-selected .rdp-day_button {
  border: var(--rdp-selected-border);
}

.rdp-outside {
  opacity: var(--rdp-outside-opacity);
}

.rdp-disabled:not(.rdp-selected) {
  opacity: var(--rdp-disabled-opacity);
}

.rdp-hidden {
  visibility: hidden;
  color: var(--rdp-range_start-color);
}

.rdp-range_start {
  background: var(--rdp-range_start-background);
}

.rdp-range_start .rdp-day_button {
  background-color: var(--rdp-range_start-date-background-color);
  color: var(--rdp-range_start-color);
}

.rdp-range_middle {
  background-color: var(--rdp-range_middle-background-color);
}

.rdp-range_middle .rdp-day_button {
  border: unset;
  border-radius: unset;
  color: var(--rdp-range_middle-color);
}

.rdp-range_end {
  background: var(--rdp-range_end-background);
  color: var(--rdp-range_end-color);
}

.rdp-range_end .rdp-day_button {
  color: var(--rdp-range_start-color);
  background-color: var(--rdp-range_end-date-background-color);
}

.rdp-range_start.rdp-range_end {
  background: revert;
}

.rdp-focusable {
  cursor: pointer;
}

@keyframes rdp-slide_in_left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes rdp-slide_in_right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes rdp-slide_out_left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes rdp-slide_out_right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.rdp-weeks_before_enter {
  animation: rdp-slide_in_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-weeks_before_exit {
  animation: rdp-slide_out_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-weeks_after_enter {
  animation: rdp-slide_in_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-weeks_after_exit {
  animation: rdp-slide_out_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-root[dir="rtl"] .rdp-weeks_after_enter {
  animation: rdp-slide_in_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-root[dir="rtl"] .rdp-weeks_before_exit {
  animation: rdp-slide_out_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-root[dir="rtl"] .rdp-weeks_before_enter {
  animation: rdp-slide_in_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-root[dir="rtl"] .rdp-weeks_after_exit {
  animation: rdp-slide_out_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

@keyframes rdp-fade_in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes rdp-fade_out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.rdp-caption_after_enter {
  animation: rdp-fade_in var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-caption_after_exit {
  animation: rdp-fade_out var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-caption_before_enter {
  animation: rdp-fade_in var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-caption_before_exit {
  animation: rdp-fade_out var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}