/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   LA PESTAÑA FIDELIZACIÓN (JB, 18-oct-2026: «wow, impresionante la pestaña de fidelizacion, impresionante, dale»).
   Calcada del boceto aprobado: briox-admin/boceto-fidelizacion.html · plan y marcha atrás: docs/tandas-fidelizacion.md
   · Todo lleva «fd-» delante y cuelga de .fd-raiz (la pestaña y las hojas que se abren encima): así nada de aquí toca
     el resto del panel, y nada del panel (su .sw, su .btn, su .chip) se cuela aquí.
   · El reseteo de botones va con :where() para que pese lo mismo que una clase: cada pieza de abajo lo pisa por orden.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.fd-raiz{
  --fd-bg:#f2f2f2; --fd-card:#fff; --fd-linea:#e2e2e2; --fd-sup:#efefef; --fd-tx:#141414; --fd-tx2:#555; --fd-tx3:#6e6e6e;
  --fd-oro:#ffb500; --fd-oro-t:#8a5a00; --fd-azul:#0071e3; --fd-verde:#1a7f37; --fd-gris:#6e6e6e; --fd-ambar:#b25000;
  --fd-esc:linear-gradient(180deg,#1d1d1d,#0d0d0d);
  --fd-ease:cubic-bezier(.2,.8,.2,1);
  color:var(--fd-tx); font:500 16px/1.45 Poppins,system-ui,sans-serif;
}
.fd-raiz *, .fd-raiz *::before, .fd-raiz *::after{ box-sizing:border-box; }
.fd-raiz :where(button){ appearance:none; border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; padding:0; margin:0; -webkit-tap-highlight-color:transparent; }
.fd-raiz :where(button:focus-visible, input:focus-visible){ outline:3px solid var(--fd-azul); outline-offset:2px; }
.fd-raiz img{ max-width:100%; display:block; }
.fd-raiz svg{ flex:none; }
.fd-raiz .fd-num{ font-variant-numeric:tabular-nums; }
#fid{ background:var(--fd-bg); border-radius:24px; padding:4px 20px 140px; min-height:60vh; }

/* cabecera */
.fd-cab{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:18px 0 14px; }
.fd-cab h1{ font-size:32px; font-weight:800; margin:0; letter-spacing:-.01em; line-height:1.1; }
.fd-cab p{ margin:4px 0 0; color:var(--fd-tx2); font-weight:500; }
.fd-medido{ margin-left:auto; font-size:13px; color:var(--fd-tx3); font-weight:600; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.fd-medido i{ width:8px; height:8px; border-radius:50%; background:var(--fd-verde); }

/* el menú: casillas grandes con su imagen */
.fd-menu{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:22px; }
.fd-tile{ background:var(--fd-card); border-radius:18px; padding:7px 7px 12px; text-align:left; display:flex; flex-direction:column; gap:5px; box-shadow:0 0 0 1px var(--fd-linea); transition:transform .14s var(--fd-ease), box-shadow .14s var(--fd-ease); }
.fd-tile:active{ transform:scale(.97); }
.fd-tile[aria-pressed="true"]{ box-shadow:0 0 0 3px #141414; }
.fd-esc{ background:var(--fd-esc); border-radius:13px; position:relative; overflow:hidden; display:grid; place-items:center; }
.fd-tile .fd-esc{ height:96px; }
.fd-esc img.cont, .fd-esc > svg{ position:absolute; inset:0; margin:auto; width:88%; height:86%; object-fit:contain; }
.fd-esc img.llena{ width:100%; height:100%; object-fit:cover; }
/* La foto de la caja trae su fondo negro puro: la caja se pinta del mismo negro para que no se vea un rectángulo dentro. */
.fd-esc:has(> img.negro){ background:#000; }
.fd-insignia{ position:absolute; right:8px; bottom:8px; width:30px; height:30px; border-radius:50%; background:var(--fd-oro); color:#2b1b00; display:grid; place-items:center; }
.fd-insignia svg{ width:17px; height:17px; }
.fd-tile .n{ font-size:15px; font-weight:700; padding:3px 5px 0; line-height:1.25; }
.fd-tile .d{ font-size:13px; color:var(--fd-tx2); font-weight:600; padding:0 5px; line-height:1.3; }
.fd-tile .fd-est{ margin:auto 5px 0; align-self:flex-start; }

/* estados: losa sólida con su palabra */
.fd-est{ display:inline-flex; align-items:center; border-radius:8px; padding:3px 9px; font-size:12px; font-weight:700; white-space:nowrap; color:#fff; }
.fd-e-apagado{ background:var(--fd-gris); } .fd-e-pruebas{ background:var(--fd-azul); } .fd-e-todos{ background:var(--fd-verde); } .fd-e-decide{ background:var(--fd-ambar); }

/* cada pantalla */
.fd-panel[hidden]{ display:none; }
.fd-pan-cab{ display:grid; grid-template-columns:230px minmax(0,1fr) auto; gap:22px; align-items:center; background:var(--fd-card); border-radius:22px; padding:14px 22px 14px 14px; box-shadow:0 0 0 1px var(--fd-linea); }
.fd-pan-cab .fd-esc{ height:140px; }
.fd-pan-cab h2{ font-size:30px; font-weight:800; margin:0; line-height:1.15; letter-spacing:-.01em; }
.fd-pan-cab p{ margin:6px 0 0; color:var(--fd-tx2); font-size:15px; }
.fd-pan-cab .fd-botones{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.fd-der{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.fd-rejilla{ display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:12px; margin-top:12px; }
.fd-q{ background:var(--fd-card); border-radius:20px; padding:20px; box-shadow:0 0 0 1px var(--fd-linea); display:flex; flex-direction:column; gap:14px; min-width:0; }
.fd-q.suelto{ margin-top:12px; }
.fd-q.plano{ box-shadow:none; background:#fafafa; }
.fd-q h3{ font-size:18px; font-weight:700; margin:0; line-height:1.3; }
.fd-q h3 svg{ width:20px; height:20px; vertical-align:-3px; margin-left:4px; color:#d14b00; }
.fd-nota{ font-size:14px; color:var(--fd-tx2); margin:-6px 0 0; }
.fd-nota.sin{ margin:0; }

/* «Se cambia en el código»: el valor se ve, el control no existe */
.fd-codigo{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; background:var(--fd-sup); color:var(--fd-tx2); border-radius:8px; padding:4px 10px; font-size:12.5px; font-weight:700; white-space:nowrap; }
.fd-codigo svg{ width:15px; height:15px; }
.fd-fijo{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.fd-fijo b{ font-size:30px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; }
.fd-fijo span{ font-size:15px; font-weight:700; color:var(--fd-tx2); }
.fd-lineas{ display:flex; flex-direction:column; }
.fd-linea{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; align-items:baseline; padding:11px 0; border-top:1px solid var(--fd-linea); }
.fd-linea:first-child{ border-top:0; padding-top:0; }
.fd-linea span{ color:var(--fd-tx2); font-size:14.5px; }
.fd-linea b{ font-size:16px; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }

/* aviso que no se puede dejar pasar: superficie neutra, el color en el icono */
.fd-info{ display:flex; gap:12px; align-items:flex-start; background:var(--fd-card); border-radius:16px; padding:14px 16px; box-shadow:0 0 0 1px var(--fd-linea); margin-top:12px; font-size:14.5px; }
.fd-info svg{ width:22px; height:22px; color:var(--fd-ambar); margin-top:1px; }
.fd-info p{ margin:0; }

/* − número + */
.fd-stp{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fd-stp-b{ width:54px; height:54px; border-radius:50%; background:var(--fd-sup); display:grid; place-items:center; flex:none; transition:transform .12s var(--fd-ease), background-color .12s; }
.fd-stp-b svg{ width:24px; height:24px; }
.fd-stp-b:active{ transform:scale(.9); }
@media (hover:hover){ .fd-stp-b:hover{ background:#e2e2e2; } }
.fd-stp-v{ display:flex; align-items:baseline; gap:6px; min-width:0; }
.fd-stp-v input{ font:800 30px/1 Poppins,system-ui,sans-serif; color:var(--fd-tx); text-align:center; border:1px solid #dcdcdc; background:#f8f8f8; border-radius:12px; padding:8px 6px; min-width:2.6ch; height:auto; margin:0; box-shadow:none; font-variant-numeric:tabular-nums; transition:color .15s; }
.fd-stp-v input:focus{ background:#fff; border-color:var(--fd-azul); outline:none; }
.fd-stp-u{ font-size:15px; font-weight:700; color:var(--fd-tx2); white-space:nowrap; }
.fd-stp.peq .fd-stp-b{ width:40px; height:40px; } .fd-stp.peq .fd-stp-b svg{ width:19px; height:19px; }
.fd-stp.peq .fd-stp-v input{ font-size:20px; padding:6px 4px; }
.fd-antes{ flex-basis:100%; font-size:13px; font-weight:700; color:var(--fd-oro-t); display:none; align-items:center; gap:6px; }
.fd-antes::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--fd-oro); }
.fd-cambiado > .fd-antes{ display:flex; }
.fd-cambiado .fd-stp-v input{ color:#7a4f00; border-color:#e8c46a; background:#fffaeb; }
.fd-tic{ animation:fd-tic .18s var(--fd-ease); }
@keyframes fd-tic{ from{ transform:scale(1.08); } to{ transform:scale(1); } }

/* dos posiciones de un interruptor, con su palabra */
.fd-seg-w{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.fd-seg{ display:inline-flex; background:var(--fd-sup); border-radius:16px; padding:4px; gap:4px; max-width:100%; }
.fd-seg-b{ min-height:48px; padding:0 15px; border-radius:12px; font-weight:700; font-size:15px; color:var(--fd-tx2); white-space:nowrap; transition:background-color .15s, color .15s; }
.fd-seg-b[aria-pressed="true"]{ color:#fff; }
.fd-seg-b.s-apagado[aria-pressed="true"]{ background:var(--fd-gris); }
.fd-seg-b.s-pruebas[aria-pressed="true"]{ background:var(--fd-azul); }
.fd-seg-b.s-todos[aria-pressed="true"]{ background:var(--fd-verde); }
.fd-seg-ayuda{ margin:0 4px; font-size:13.5px; color:var(--fd-tx2); font-weight:500; }
.fd-seg-t{ font-size:13px; font-weight:700; color:var(--fd-tx3); margin:0 4px; }

/* interruptor */
.fd-sw-w{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.fd-sw{ width:58px; height:34px; border-radius:999px; background:#c9c9c9; position:relative; flex:none; transition:background-color .18s; }
.fd-sw i{ position:absolute; top:3px; left:3px; width:28px; height:28px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s var(--fd-ease); }
.fd-sw[aria-checked="true"]{ background:var(--fd-verde); } .fd-sw[aria-checked="true"] i{ transform:translateX(24px); }
.fd-sw-t{ font-weight:700; font-size:15px; }

/* botones */
.fd-btn{ min-height:50px; padding:0 20px; border-radius:14px; font-weight:700; font-size:15px; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; transition:transform .12s var(--fd-ease), filter .12s; }
.fd-btn svg{ width:20px; height:20px; }
.fd-btn:active{ transform:scale(.97); }
.fd-btn.prim{ background:var(--fd-oro); color:#2b1b00; }
.fd-btn.sec{ background:var(--fd-sup); color:var(--fd-tx); }
.fd-btn.neg{ background:#141414; color:#fff; }
.fd-btn[disabled]{ opacity:.45; cursor:default; }
@media (hover:hover){ .fd-btn:not([disabled]):hover{ filter:brightness(.96); } }

/* lo que sale de los números */
.fd-res{ background:#141414; color:#fff; border-radius:20px; padding:22px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.fd-res .rot{ font-size:14px; color:#bdbdbd; font-weight:600; }
.fd-res .big{ font-size:58px; font-weight:800; color:var(--fd-oro); line-height:1.05; letter-spacing:-.02em; }
.fd-res .big small{ font-size:18px; color:#fff; font-weight:700; letter-spacing:0; margin-left:6px; }
.fd-res .big.medio{ font-size:40px; }
.fd-res .l{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:11px 0 0; margin-top:9px; border-top:1px solid #2c2c2c; font-size:14.5px; }
.fd-res .l.sola{ border:0; margin:0; padding:0; }
.fd-res .l span{ color:#c9c9c9; }
.fd-res .l b{ white-space:nowrap; font-size:16px; text-align:right; }
.fd-res .l b small{ display:block; font-size:12px; color:#9a9a9a; font-weight:600; }
.fd-plan{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--fd-card); border-radius:20px; padding:16px 18px; box-shadow:0 0 0 1px var(--fd-linea); margin-top:12px; }
.fd-plan > svg{ width:28px; height:28px; color:var(--fd-oro-t); }
.fd-plan p{ margin:0; flex:1 1 280px; font-size:15px; }

/* niveles */
.fd-niveles{ display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:10px; }
.fd-nivel{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; background:#fafafa; border-radius:16px; padding:14px 8px; }
.fd-nivel .med{ width:54px; height:54px; border-radius:50%; box-shadow:inset 0 0 0 4px rgba(255,255,255,.35), inset 0 -6px 10px rgba(0,0,0,.22); }
.fd-nivel b{ font-size:15px; }
.fd-nivel .desde{ font-size:13px; color:var(--fd-tx2); font-weight:600; }
.fd-nivel .cuando{ font-size:12.5px; color:var(--fd-oro-t); font-weight:700; }

/* rasca: las tarjetitas */
.fd-dias{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.fd-casillas{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.fd-dia{ display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }
.fd-tk{ width:100%; border-radius:14px; background:linear-gradient(160deg,#ffe58a,#ffbf10 45%,#d99400); padding:4px; display:flex; }
.fd-tk > div{ flex:1; border-radius:10px; background:#141414; color:var(--fd-oro); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px 2px; min-height:78px; }
.fd-tk small{ font-size:12px; font-weight:700; color:#bdbdbd; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.fd-corto{ display:none; }
.fd-tk b{ font-size:24px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; }
.fd-tk em{ font-style:normal; font-size:12px; font-weight:600; color:#bdbdbd; }
.fd-dia.top .fd-tk > div{ background:linear-gradient(180deg,#fff0b0,#ffbf10); color:#2b1b00; }
.fd-dia.top .fd-tk small, .fd-dia.top .fd-tk em{ color:#5a3b00; }
.fd-mini{ display:flex; gap:6px; }
.fd-mini .fd-stp-b{ width:38px; height:38px; } .fd-mini .fd-stp-b svg{ width:18px; height:18px; }
.fd-dia .fd-antes{ justify-content:center; font-size:12px; }
.fd-cambiado .fd-tk{ background:linear-gradient(160deg,#fff3c4,#ffd24d 45%,#e8a400); box-shadow:0 0 0 3px #e8c46a; }

/* el aviso de las 10, en la pantalla de bloqueo */
.fd-bloqueo{ background:linear-gradient(180deg,#2a2f3a,#121419); border-radius:20px; padding:18px 16px 20px; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-width:0; }
.fd-bloqueo .hora{ font-size:54px; font-weight:700; line-height:1; letter-spacing:-.02em; }
.fd-bloqueo .fecha{ font-size:14px; color:#cfd3dc; font-weight:600; margin-top:-8px; }
.fd-noti{ display:flex; gap:11px; align-items:flex-start; background:rgba(245,245,247,.95); color:#141414; border-radius:20px; padding:11px 13px; width:100%; max-width:360px; }
.fd-noti img{ width:38px; height:38px; border-radius:9px; }
.fd-noti .t{ flex:1; min-width:0; }
.fd-noti .a{ display:flex; justify-content:space-between; font-size:12.5px; color:#666; font-weight:600; }
.fd-noti b{ display:block; font-size:15px; line-height:1.3; }
.fd-noti .m{ font-size:14px; color:#333; }

/* regalos: todavía no existen */
.fd-vacio{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:24px; align-items:center; background:var(--fd-card); border-radius:22px; padding:16px 24px 16px 16px; box-shadow:0 0 0 1px var(--fd-linea); margin-top:12px; }
.fd-vacio .fd-esc{ aspect-ratio:1080/573; border-radius:6.9%/13%; }
.fd-vacio .fd-esc img{ filter:grayscale(.85) brightness(.6); }
.fd-vacio h3{ font-size:22px; font-weight:800; margin:0 0 6px; line-height:1.25; }
.fd-vacio p{ margin:0 0 8px; color:var(--fd-tx2); font-size:15px; }

/* cupones */
.fd-tickets{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.fd-ticket{ border-radius:16px; padding:16px 16px 14px; position:relative; overflow:hidden; min-height:118px; display:flex; flex-direction:column; justify-content:space-between; }
.fd-ticket::before, .fd-ticket::after{ content:""; position:absolute; top:50%; width:18px; height:18px; border-radius:50%; background:var(--fd-card); margin-top:-9px; }
.fd-ticket::before{ left:-9px; } .fd-ticket::after{ right:-9px; }
.fd-ticket b{ font-size:22px; font-weight:800; }
.fd-ticket small{ font-size:13px; font-weight:700; }
.fd-ticket.normal{ background:#fff7dc; color:#5a3b00; box-shadow:inset 0 0 0 2px #f1d27a; }
.fd-ticket.excl{ background:#141414; color:var(--fd-oro); }
.fd-ticket.excl small{ color:#d8d8d8; }
.fd-ticket.super{ background:linear-gradient(135deg,#2b2b2b,#0b0b0b); color:#bdbdbd; }
.fd-ticket .cand{ display:flex; align-items:center; gap:6px; }
.fd-ticket .cand svg{ width:16px; height:16px; }
.fd-filas{ display:flex; flex-direction:column; }
.fd-fila{ display:grid; grid-template-columns:minmax(0,1fr) 140px auto; gap:14px; align-items:center; padding:12px 0; border-top:1px solid var(--fd-linea); }
.fd-fila.dos{ grid-template-columns:minmax(0,1fr) auto; }
.fd-fila:first-child{ border-top:0; }
.fd-fila b{ display:block; font-size:15px; }
.fd-fila span{ font-size:13px; color:var(--fd-tx2); }
.fd-barra{ height:10px; border-radius:999px; background:var(--fd-sup); overflow:hidden; }
.fd-barra i{ display:block; height:100%; background:#141414; border-radius:999px; }
.fd-fila .cifra{ font-weight:800; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }
.fd-fila .cifra small{ display:block; font-size:12px; color:var(--fd-tx2); font-weight:600; }

/* sellos */
/* «Obsidiana» y «Esmeralda» no cabían en 5 columnas por 2-4 px (medido): menos hueco entre medallas y letra algo más prieta. */
.fd-meds{ display:grid; grid-template-columns:repeat(auto-fill,minmax(max(66px,(100% - 16px) / 5),1fr)); gap:16px 4px; }   /* 5 por fila si caben; si no, 4 */
.fd-med{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; font-weight:700; text-align:center; min-width:0; letter-spacing:-.01em; white-space:nowrap; }
.fd-med i{ width:60px; height:60px; border-radius:50%; background:var(--g); box-shadow:inset 0 0 0 4px rgba(255,255,255,.4), inset 0 -7px 10px rgba(0,0,0,.25), 0 0 0 2px rgba(0,0,0,.06); display:grid; place-items:center; color:rgba(255,255,255,.95); }
.fd-med i svg{ width:24px; height:24px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.fd-med small{ font-size:12px; color:var(--fd-tx3); font-weight:600; }
.fd-puntos{ display:flex; gap:5px; flex-wrap:wrap; }
.fd-puntos i{ width:16px; height:16px; border-radius:50%; background:var(--fd-oro); }
.fd-esp{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 0; border-top:1px solid var(--fd-linea); }
.fd-esp:first-of-type{ border-top:0; }
.fd-esp b{ display:block; font-size:15px; }
.fd-esp span{ font-size:13px; color:var(--fd-tx2); }
.fd-rar{ font-size:12px; font-weight:700; border-radius:8px; padding:3px 9px; white-space:nowrap; background:var(--fd-sup); color:var(--fd-tx2); }
.fd-rar.raro{ background:#e8f1fc; color:#0058b0; }
.fd-rar.epico{ background:#efe6fc; color:#5b2ea6; }
.fd-rar.legendario{ background:var(--fd-oro); color:#2b1b00; }

/* muestras: la cifra grande */
.fd-heroe{ display:flex; flex-direction:column; gap:2px; justify-content:center; }
.fd-heroe b{ font-size:46px; font-weight:800; line-height:1.05; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.fd-heroe span{ color:var(--fd-tx2); font-weight:600; }

/* cargando / no se pudo */
.fd-estado{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; padding:80px 16px; color:var(--fd-tx2); }
.fd-estado b{ color:var(--fd-tx); font-size:18px; }
.fd-barrita{ width:180px; height:4px; border-radius:999px; background:#e2e2e2; overflow:hidden; }
.fd-barrita i{ display:block; height:100%; width:40%; border-radius:999px; background:var(--fd-oro); animation:fd-carga 1.1s var(--fd-ease) infinite; }
@keyframes fd-carga{ from{ transform:translateX(-100%); } to{ transform:translateX(260%); } }

/* guardar: la barra de abajo */
.fd-guardar{ position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); width:min(780px,calc(100% - 32px)); background:#141414; color:#fff; border-radius:20px; padding:10px 10px 10px 20px; display:flex; align-items:center; gap:10px; z-index:800; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.fd-guardar[hidden]{ display:none; }
.fd-guardar .q2{ flex:1; font-weight:700; display:flex; align-items:center; gap:10px; min-width:0; }
.fd-guardar .q2 i{ width:10px; height:10px; border-radius:50%; background:var(--fd-oro); flex:none; }
.fd-guardar .fd-btn.sec{ background:#2c2c2c; color:#fff; }
.fd-entra{ animation:fd-entra .22s var(--fd-ease); }
@keyframes fd-entra{ from{ opacity:0; transform:translate(-50%,10px); } to{ opacity:1; transform:translate(-50%,0); } }
body.fd-con-velo .fd-guardar{ visibility:hidden; }

/* la hoja de «Revisar y guardar» (cuelga del <body>: es una capa encima de todo) */
.fd-velo{ position:fixed; inset:0; background:rgba(10,10,10,.5); display:grid; place-items:center; z-index:9700; padding:16px; }
.fd-velo[hidden]{ display:none; }
.fd-hoja{ background:#fff; border-radius:24px; width:min(620px,100%); max-height:88vh; overflow:auto; padding:24px; animation:fd-sube .22s var(--fd-ease); }
@keyframes fd-sube{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.fd-hoja h2{ margin:0 0 4px; font-size:24px; line-height:1.2; }
.fd-hoja .sub{ margin:0 0 14px; color:var(--fd-tx2); }
.fd-hoja h3{ font-size:17px; font-weight:800; margin:18px 0 0; }
.fd-cambio{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; align-items:baseline; padding:11px 0; border-top:1px solid var(--fd-linea); }
.fd-cambio b{ font-size:15px; }
.fd-cambio .de{ white-space:nowrap; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
.fd-cambio .de s{ color:var(--fd-tx3); font-weight:600; margin-right:6px; }
.fd-cambio .de em{ font-style:normal; color:#7a4f00; }
.fd-conse{ background:#fafafa; border-radius:16px; padding:6px 16px; margin-top:8px; }
.fd-conse .fd-cambio:first-child{ border-top:0; }
.fd-problema{ display:flex; gap:10px; align-items:flex-start; background:#fff; border-radius:14px; padding:12px 14px; box-shadow:0 0 0 1px var(--fd-linea); margin-top:12px; font-weight:600; font-size:14.5px; }
.fd-problema svg{ width:20px; height:20px; color:#c4281c; margin-top:1px; }
.fd-problema[hidden]{ display:none; }
.fd-pie{ display:flex; justify-content:space-between; gap:10px; margin-top:20px; flex-wrap:wrap; }
.fd-ok{ position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--fd-verde); color:#fff; font-weight:700; border-radius:14px; padding:13px 18px; display:flex; align-items:center; gap:8px; z-index:9800; }
.fd-ok[hidden]{ display:none; }
.fd-ok svg{ width:20px; height:20px; }

@media (hover:hover){ .fd-tile:hover{ background:#fafafa; } }
@media (max-width:1100px){
  .fd-menu{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .fd-pan-cab{ grid-template-columns:180px minmax(0,1fr); }
  .fd-pan-cab .fd-der{ grid-column:1/-1; }
  .fd-tickets{ grid-template-columns:1fr; }
  .fd-vacio{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  #fid{ padding:4px 12px 170px; border-radius:18px; }
  .fd-cab h1{ font-size:28px; }
  .fd-medido{ margin-left:0; white-space:normal; }
  .fd-menu{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:12px; margin:0 -12px 18px; padding:3px 12px 8px; scrollbar-width:none; }
  .fd-menu::-webkit-scrollbar{ display:none; }
  .fd-tile{ flex:0 0 138px; scroll-snap-align:start; } .fd-tile .fd-esc{ height:76px; }
  .fd-pan-cab{ grid-template-columns:1fr; padding:12px; } .fd-pan-cab .fd-esc{ height:150px; } .fd-pan-cab h2{ font-size:26px; }
  .fd-rejilla{ grid-template-columns:1fr; }
  .fd-dias{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  /* 10 casillas en 5 columnas no caben en un móvil (medido a 400 px: se pisaban). Como los días: de 4 en 4. */
  .fd-casillas{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .fd-tk small{ letter-spacing:0; } .fd-tk b{ font-size:20px; }
  .fd-largo{ display:none; } .fd-corto{ display:inline; }   /* «N.º 10» en vez de «Casilla 10»: a 12 px no cabe */
  .fd-mini{ gap:4px; } .fd-mini .fd-stp-b{ width:32px; height:32px; } .fd-mini .fd-stp-b svg{ width:16px; height:16px; }
  .fd-med i{ width:46px; height:46px; }   /* en el móvil van de 4 en 4: el nombre cabe a su tamaño */
  .fd-fila{ grid-template-columns:minmax(0,1fr) auto; } .fd-fila .fd-barra{ grid-column:1/-1; order:3; }
  .fd-res .l.sola{ flex-direction:column; align-items:flex-start; gap:2px; } .fd-res .l.sola b{ text-align:left; white-space:normal; }   /* el total, debajo de su frase */
  .fd-res .big{ font-size:46px; } .fd-seg-b{ padding:0 11px; font-size:14px; }
  .fd-niveles{ grid-template-columns:1fr; }
  /* encima de la barra de 5 del panel en el móvil (barra-movil.css: 64 px + su suelo + 10 px) */
  .fd-guardar{ flex-wrap:wrap; padding:12px; bottom:calc(var(--bm-alto, 64px) + var(--bm-suelo, 0px) + 20px); }
  .fd-guardar .q2{ flex-basis:100%; } .fd-guardar .fd-btn{ flex:1; }
}
@media (prefers-reduced-motion:reduce){ .fd-raiz *, .fd-raiz *::before, .fd-raiz *::after{ animation:none !important; transition:none !important; } }
.fd-est-fila{ margin-top:2px; }
.fd-linea b.sin{ color:var(--fd-tx3); font-weight:600; }
.fd-linea span small{ display:block; font-size:13px; color:var(--fd-tx3); margin-top:2px; }
/* ¿Cuánta gente rasca? (JB, 20-oct-2026). Tres cifras héroe, la gráfica por día y el aviso contra su control. */
.fd-linea b small{ display:block; font-size:13px; font-weight:600; color:var(--fd-tx3); margin-top:2px; }
.fd-rm-cifras{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.fd-rm-cifras > div{ background:var(--fd-sup); border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.fd-rm-cifras b{ font-size:38px; font-weight:800; line-height:1.05; letter-spacing:-.02em; }
.fd-rm-cifras span{ font-size:15px; font-weight:700; }
.fd-rm-cifras small{ font-size:13px; color:var(--fd-tx3); }
.fd-rm-leyenda{ display:flex; gap:16px; flex-wrap:wrap; font-size:13.5px; font-weight:600; color:var(--fd-tx2); }
.fd-rm-leyenda i{ display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:6px; vertical-align:-1px; }
.fd-rm-graf-caja{ width:100%; min-height:268px; }
.fd-rm-graf{ display:block; font-family:inherit; overflow:visible; }
.fd-rm-graf text{ font-size:13px; fill:var(--fd-tx3); font-variant-numeric:tabular-nums; }
.fd-rm-graf text.rg-eje{ font-weight:700; fill:var(--fd-tx2); }
.fd-rm-graf .rg-l{ stroke:var(--fd-linea); stroke-width:1; }
.fd-rm-graf .rg-l.cero{ stroke:#bdbdbd; }
/* ¿Engancha? franja y losa verdes solo el día que lo rasca más de la mitad de los que ya lo tienen (JB, 20-oct-2026) */
.fd-rm-graf .rg-franja{ fill:#e4f3e8; }
.fd-rm-graf .rg-si{ fill:var(--fd-verde); }
.fd-rm-graf text.rg-si-t{ fill:#fff; font-weight:700; }
.fd-rm-graf text.rg-no-t{ fill:var(--fd-tx2); font-weight:600; }
.fd-rm-leyenda i.cuadro{ border-radius:3px; }
.fd-rm-h4{ font-size:16px; font-weight:700; margin:6px 0 0; }
@media (max-width:640px){ .fd-rm-cifras{ grid-template-columns:1fr; } .fd-rm-cifras b{ font-size:32px; } }
.fd-q .fd-est-fila .fd-est{ white-space:normal; }   /* en el móvil, el veredicto parte línea antes que salirse de la tarjeta */

/* Regalos con coins: el precio en coins, al lado y en grande (20-oct-2026) */
.fd-rg-coins{ font-size:17px; color:var(--fd-tx); white-space:nowrap; }