/* Entradas y panel de Grandes Sueños.
   Los colores salen del manual de marca y sus contrastes estan MEDIDOS:
   el coral de marca (#E9884F) con letra blanca da 2,59 y el minimo es 4,5, asi
   que todo lo que lleva texto encima usa --coral-hondo (4,99). */
:root{--coral:#E9884F;--coral-hondo:#B65217;--uva:#4A3B52;--uva-claro:#6B5875;
      --crema:#FFF6EE;--blanco:#fff;--borde:#EADCCE;--verde:#1E7A4F;--rojo:#B3261E;
      --ambar:#8A6100}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--crema);color:var(--uva);
     font:400 17px/1.6 "Jost",system-ui,-apple-system,"Segoe UI",sans-serif}
h1{font-size:26px;margin:0 0 6px}h2{font-size:19px;margin:0 0 10px}
a{color:var(--coral-hondo)}
:focus-visible{outline:3px solid var(--coral-hondo);outline-offset:3px;border-radius:6px}
.caja{max-width:560px;margin:0 auto;padding:30px 20px 60px}
.caja.ancha{max-width:760px}
.precio{color:var(--coral-hondo);font-weight:600;font-size:20px;margin:0 0 22px}
.campo{margin-bottom:16px}
label{display:block;font-weight:500;margin-bottom:5px}
input[type=text],input[type=number],input:not([type]),input[type=email],input[type=tel]{
  width:100%;padding:12px 13px;border:2px solid var(--borde);border-radius:11px;
  background:#fff;font:inherit;color:inherit}
input.mal{border-color:var(--rojo);background:#FDF1F0}
small{display:block;color:var(--uva-claro);font-size:14px;margin-top:4px}
fieldset{border:0;padding:0;margin:0 0 16px}
legend{font-weight:500;margin-bottom:8px;padding:0}
.opcion{display:flex;gap:11px;align-items:center;border:2px solid var(--borde);
        border-radius:11px;padding:13px;margin-bottom:9px;background:#fff;cursor:pointer}
.opcion:has(input:checked){border-color:var(--coral-hondo);background:#FFF3EA}
.opcion b{display:block}
.total{font-size:19px;margin:18px 0}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;
       background:var(--coral-hondo);color:#fff;border:0;border-radius:999px;
       padding:14px 26px;font:600 17px/1 inherit;cursor:pointer;text-decoration:none}
.boton:hover{background:#9C4614}
.boton.grande{width:100%;padding:17px 26px;font-size:18px}
.err{color:var(--rojo);font-weight:500;margin:12px 0 0}
.apunte{color:var(--uva-claro);font-size:15px}
.resumen{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:13px 15px}
.pasos{padding-left:22px}.pasos li{margin-bottom:13px}
.destacado{background:#FFF3EA;border:1px solid var(--coral);border-radius:7px;
           padding:2px 8px;font-size:1.05em;white-space:nowrap}
.estado{margin-top:20px;padding:13px 15px;border-radius:11px;background:#fff;
        border:1px dashed var(--borde);color:var(--uva-claro)}
.estado.ok{background:#E9F6EF;border:1px solid var(--verde);color:var(--verde);font-weight:600}
/* ── billete ── */
.billete{background:#fff;border:1px solid var(--borde);border-radius:16px;padding:24px;
         margin:18px 0;text-align:center;break-inside:avoid}
.billete .qr{max-width:230px;margin:0 auto 14px}
.billete .qr svg{width:100%;height:auto;display:block}
.billete h2{margin:0 0 2px}
.billete .quien{font-weight:600;margin:0 0 6px}
.billete .codigo{font-family:ui-monospace,monospace;letter-spacing:.14em;font-size:15px;
                 color:var(--uva-claro);margin:8px 0 0}
@media print{.imprimir,.apunte{display:none}body{background:#fff}}
/* ── teclado ── */
body.panel{background:var(--uva);color:var(--crema)}
/* EL TEXTO DE APOYO Y EL DE ERROR ERAN INVISIBLES EN EL PANEL, Y NADIE PROTESTA.
   Las dos clases se escribieron para la tienda, que va sobre crema. En el panel,
   que va sobre uva, el contraste MEDIDO era 1,61 (.apunte) y 1,27 (.err) contra
   un minimo de 4,5: letra oscura sobre fondo oscuro. Lo grave no es el adorno —
   es que asi estaban «Marca el codigo de acceso», el aviso de PIN incorrecto y,
   peor, el mensaje de la puerta que dice que la camara no ha arrancado. Justo el
   texto que tiene que leerse cuando algo va mal. Medido: 6,63 y 6,01 sobre el
   fondo del panel; 5,36 y 4,86 sobre el de un bloque, que es el caso peor. */
body.panel .apunte{color:#D8CBDE}
body.panel .err{color:#FFB3A6}
.teclado{max-width:330px;margin:0 auto;padding:48px 20px;text-align:center}
.teclado h1{font-size:21px}
.puntos{display:flex;gap:12px;justify-content:center;margin:26px 0 8px;min-height:20px}
.puntos i{width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.25)}
.puntos i.on{background:var(--coral)}
.teclas{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:22px}
.teclas button{aspect-ratio:1;border:0;border-radius:50%;font:500 27px/1 inherit;
               background:rgba(255,255,255,.1);color:var(--crema);cursor:pointer}
.teclas button:active{background:rgba(255,255,255,.26)}
.teclas .aux{font-size:22px;background:rgba(255,255,255,.05)}
.teclas .ok{background:var(--coral-hondo)}
/* ── panel ── */
/* LA BARRA ES UNA BOTONERA (08/10, Ruben: «el menú es ridículo, dale un toque más visual… dale
   una forma de botones o similar más visual y chulo»). Arriba la marca y las dos salidas (la web
   y Salir); debajo, cada seccion es un boton con su icono, y la que se esta mirando va en coral.
   SOLO CSS: el HTML lo escribe `barra()` de panel_extra.py y no se ha tocado, asi que no hace
   falta reiniciar nada. Los iconos son SVG propios en /est/ (la CSP del panel solo deja imagenes
   del mismo sitio) y se pintan con `mask` del color del texto; cada uno se elige por el ENLACE,
   y una seccion nueva sin icono propio lleva el de `ico-punto`, nunca un cuadrado.
   ⚠ EN EL MOVIL «Ver la web» y «Salir» TIENEN QUE SEGUIR A LA VISTA (lo que se midio en agosto:
   se quedaban fuera de la pantalla y quien no sabia el PIN se quedaba encerrado). Van arriba a la
   derecha, fuera de la tira de secciones, que se desliza de lado. */
.barra-panel{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;
             gap:8px 14px;padding:10px 20px 11px;background:#2E2335;
             border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 8px 24px rgba(0,0,0,.28)}
.barra-panel>b{display:flex;align-items:center;gap:11px;min-height:40px;margin-right:auto;
               padding-right:300px;font-size:18px;font-weight:600;letter-spacing:.01em}
.barra-panel>b::before{content:"";width:38px;height:38px;flex:0 0 auto;border-radius:50%;
                       background:url(/est/gs-logo.svg) center/contain no-repeat;
                       box-shadow:0 0 0 3px rgba(240,132,92,.22)}
.barra-panel nav{flex:1 1 100%;display:flex;gap:7px;align-items:center;overflow-x:auto;
                 padding:2px 2px 3px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.barra-panel nav a,.barra-panel nav #salir{--ico:url(/est/ico-punto.svg);display:inline-flex;
  align-items:center;gap:8px;flex:0 0 auto;padding:8px 14px 8px 11px;border-radius:12px;
  color:#EFE6F2;text-decoration:none;font-family:inherit;font-size:15px;font-weight:500;line-height:1.2;
  opacity:1;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}
.barra-panel nav a::before,.barra-panel nav #salir::before{content:"";width:18px;height:18px;flex:0 0 auto;
  background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.barra-panel nav a:hover,.barra-panel nav #salir:hover{background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.22);transform:translateY(-1px)}
/* la seccion en la que se esta: coral HONDO, que es el que da 4,99 con letra blanca (el de
   marca da 2,59 y no se lee) */
.barra-panel nav a.sel{background:linear-gradient(135deg,#B65217,#8F3F12);border-color:rgba(255,190,150,.35);
  color:#fff;box-shadow:0 5px 16px rgba(182,82,23,.45)}
.barra-panel nav a.sel:hover{transform:none}
.barra-panel a[href="/"]{--ico:url(/est/ico-resumen.svg)}
.barra-panel a[href="/ventas"]{--ico:url(/est/ico-ventas.svg)}
.barra-panel a[href="/taquilla"]{--ico:url(/est/ico-taquilla.svg)}
.barra-panel a[href="/puerta"]{--ico:url(/est/ico-puerta.svg)}
.barra-panel a[href="/visitas"]{--ico:url(/est/ico-visitas.svg)}
.barra-panel a[href="/correos"]{--ico:url(/est/ico-correos.svg)}
.barra-panel a[href="/ficheros"]{--ico:url(/est/ico-ficheros.svg)}
.barra-panel a[href="/ia-videos"]{--ico:url(/est/ico-ia.svg)}
.barra-panel a[href="/tablero"]{--ico:url(/est/ico-tablero.svg)}
.barra-panel a[href="/ajustes"]{--ico:url(/est/ico-ajustes.svg)}
/* las dos salidas, arriba a la derecha y con otra forma: no son secciones */
.barra-panel nav a.volver,.barra-panel nav #salir{position:absolute;top:13px;padding:7px 13px 7px 10px;
  font-size:14px;border-radius:999px;background:transparent;border-color:rgba(255,255,255,.24)}
.barra-panel nav a.volver{--ico:url(/est/ico-web.svg);right:120px;padding-left:13px}
.barra-panel nav a.volver::before{display:none}
.barra-panel nav #salir{--ico:url(/est/ico-salir.svg);right:20px}
.barra-panel nav a.volver:hover,.barra-panel nav #salir:hover{background:rgba(255,255,255,.1)}
/* EL OJO QUE TAPA LO FACTURADO (Ruben, 17/10), a la izquierda de «Ver la web» y con su misma forma. Cerrado
   (aria-pressed=true) va en coral hondo, como la seccion en la que se esta: se ve de un vistazo que hay cosas
   tapadas. Lo hace /est/censura.js; Puerta y Taquilla no lo llevan. */
.barra-panel nav #tapa-euros{--ico:url(/est/ico-ojo.svg);position:absolute;top:13px;right:252px;
  width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;border:1px solid rgba(255,255,255,.24);background:transparent;color:#EFE6F2;
  cursor:pointer;transition:background .15s,border-color .15s}
.barra-panel nav #tapa-euros::before{content:"";width:19px;height:19px;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.barra-panel nav #tapa-euros:hover{background:rgba(255,255,255,.1)}
.barra-panel nav #tapa-euros[aria-pressed="true"]{--ico:url(/est/ico-ojo-tapado.svg);color:#fff;
  background:linear-gradient(135deg,#B65217,#8F3F12);border-color:rgba(255,190,150,.35)}
.barra-panel nav #tapa-euros:focus-visible{outline:2px solid #F0845C;outline-offset:2px}
/* con lo facturado tapado: las barras de lo vendido, vacias (su largo es lo vendido), y los campos de
   precio de Ajustes como puntos (no se reescriben: se guardarian «****») */
html.tapa-euros .rs-barra>span{visibility:hidden}
html.tapa-euros .tapa-campo{-webkit-text-security:disc;text-security:disc}
@supports not (-webkit-text-security:disc){html.tapa-euros .tapa-campo{color:transparent!important;
  text-shadow:0 0 8px rgba(239,230,242,.7)}}
/* EN PANTALLA ANCHA CABE TODO EN UNA FILA (medido: hacen falta ~1.600 px con las diez) */
@media (min-width:1660px){.barra-panel>b{padding-right:0;margin-right:10px}
  .barra-panel nav{flex:1 1 auto;padding-right:300px}}
/* EN EL MOVIL: la barra no se queda pegada (le quitaria media pantalla a la puerta), las salidas
   son solo icono y las secciones son una tira que se desliza con el dedo */
@media (max-width:720px){.barra-panel{position:relative;padding:9px 14px 10px}
  .barra-panel>b{padding-right:142px;font-size:16px;min-height:36px}
  .barra-panel>b::before{width:32px;height:32px}
  .barra-panel nav{scroll-snap-type:x proximity;scrollbar-width:none;margin:0 -14px;padding:2px 14px 3px}
  .barra-panel nav::-webkit-scrollbar{display:none}
  .barra-panel nav a{scroll-snap-align:start;font-size:14px;padding:8px 12px 8px 10px}
  .barra-panel nav a.volver,.barra-panel nav #salir{top:10px;width:38px;height:38px;padding:0;
    justify-content:center;font-size:0;gap:0}
  .barra-panel nav a.volver{right:60px}.barra-panel nav #salir{right:14px}
  .barra-panel nav a.volver::before{display:block}
  .barra-panel nav #tapa-euros{top:10px;width:38px;height:38px;right:106px}}
/* ── ajustes ── */
.campos{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.campos label{display:block;font-size:14px;color:#C9BFCF;margin-bottom:5px}
.campos input{width:100%;padding:10px 12px;border-radius:9px;
              border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.22);
              color:var(--crema);font:inherit}
.campos input:focus{outline:2px solid var(--coral);outline-offset:-1px}
.guardar{margin-top:16px;display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.dicho{font-size:14px;color:#A0D6B4}
.secreta{border-top:1px solid rgba(255,255,255,.12);margin-top:20px;padding-top:18px}
.secreta .aviso{background:rgba(0,0,0,.25);border-left:3px solid var(--coral);
                border-radius:8px;padding:11px 14px;font-size:14px;color:#D6CBDB;margin:0 0 14px}
.enlace{background:0;border:0;color:var(--crema);opacity:.7;cursor:pointer;font:inherit}
.panel-cuerpo,.puerta{max-width:920px;margin:0 auto;padding:24px 20px 60px}
.cifras{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:22px}
.cifra{background:rgba(255,255,255,.07);border-radius:13px;padding:16px}
.cifra b{display:block;font-size:29px;line-height:1.1}
/* EN BLOQUE, no en linea. Eran dos <span> seguidos y se pegaban: en pantalla se
   leia «Entradas vendidas0 reservas» y «Recaudadosolo pagadas». Lo vio Ruben. */
.cifra span{display:block;color:#C9BFCF;font-size:14px;line-height:1.35}
.cifra span+span{color:#C9BFCF;opacity:.82;font-size:13px;margin-top:2px}
.bloque{background:rgba(255,255,255,.07);border-radius:13px;padding:19px;margin-bottom:18px}
.bloque input{width:100%;padding:11px 13px;border-radius:10px;border:1px solid rgba(255,255,255,.2);
              background:rgba(0,0,0,.2);color:var(--crema);font:inherit}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:8px 9px;border-bottom:1px solid rgba(255,255,255,.1)}
th{color:#C9BFCF;font-weight:500}
.chapa{border-radius:999px;padding:2px 10px;font-size:13px;font-weight:600;white-space:nowrap}
.chapa.pagada{background:#1E7A4F;color:#fff}
.chapa.pendiente{background:#8A6100;color:#fff}
.chapa.anulada{background:#5A5560;color:#fff}
.aviso-bizum{background:#8A6100;color:#fff;border-radius:11px;padding:13px 15px;margin-top:12px}
.aviso-bizum.rojo{background:var(--rojo)}
/* ── el Resumen (08/10, Ruben: «la sección RESUMEN es muy poco visual, y mucho cuadradito: ordena,
   hazlo más profesional y más visual») ──
   Cuatro cifras grandes arriba (con su icono y su barra si hay de que), luego UN BLOQUE POR DIA con
   sus horas como barras de ocupacion (antes cada hora era otro cuadradito igual que el total), y
   abajo lo de apoyo: vales del bar, Bizum y lo que se abre solo. Las anchuras de las barras se ponen
   desde el javascript con `style.width` (la CSP del panel no deja `style="…"` escrito en el HTML). */
.rs{max-width:1180px}
.rs-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;margin:4px 0 20px}
.rs-ante{margin:0 0 2px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#F4B48C}
.rs-cab h1{font-size:30px;line-height:1.15;margin:0}
.rs-sub{margin:6px 0 0;font-size:14px;color:#D8CBDE}
.rs-chip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 14px;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:var(--crema);font:inherit;font-size:14px}
.rs-chip:hover{background:rgba(255,255,255,.13)}
.rs-chip svg{width:17px;height:17px}
.rs-kpis{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:28px}
.rs-kpi{position:relative;overflow:hidden;border-radius:18px;padding:18px 18px 16px;
  background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.rs-kpi::after{content:"";position:absolute;inset:auto -30px -60px auto;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,var(--rs-tono,rgba(240,132,92,.28)),transparent 70%);pointer-events:none}
.rs-kpi-cab{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rs-ico{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;flex:0 0 auto;
  background:var(--rs-fondo,rgba(240,132,92,.2));color:var(--rs-color,#FFC2A0)}
.rs-ico svg{width:21px;height:21px}
.rs-rotulo{margin:0;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#E2D6E6}
.rs-num{margin:0;font-size:38px;font-weight:700;line-height:1.05;letter-spacing:-.01em;color:#fff;
  font-variant-numeric:tabular-nums}
.rs-num small{display:inline;margin:0;font-size:20px;font-weight:600;color:#D8CBDE}
.rs-pie{margin:6px 0 0;font-size:14px;line-height:1.4;color:#D8CBDE}
.rs-pie b{color:#fff;font-weight:600}
.rs-nw{white-space:nowrap}
.rs-num{white-space:nowrap}
.rs-kpi .rs-barra{margin-top:12px}
.rs-k-dinero{--rs-fondo:rgba(91,201,140,.2);--rs-color:#9BE3B9;--rs-tono:rgba(91,201,140,.25)}
.rs-k-puerta{--rs-fondo:rgba(150,170,255,.2);--rs-color:#C3CDFF;--rs-tono:rgba(150,170,255,.24)}
.rs-k-pend{--rs-fondo:rgba(255,255,255,.1);--rs-color:#E2D6E6;--rs-tono:rgba(255,255,255,.08)}
.rs-k-pend.hay{--rs-fondo:rgba(255,196,0,.2);--rs-color:#FFD666;--rs-tono:rgba(255,196,0,.28);border-color:rgba(255,214,102,.5)}
/* las barras: pista y relleno; casi llena en ambar, llena en rojo */
.rs-barra{height:9px;border-radius:999px;background:rgba(0,0,0,.28);overflow:hidden}
.rs-barra span{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#E9884F,#FFB38A);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.rs-k-puerta .rs-barra span{background:linear-gradient(90deg,#7F8CFF,#BFC8FF)}
.rs-barra.casi span{background:linear-gradient(90deg,#D99A00,#FFD666)}
.rs-barra.lleno span{background:linear-gradient(90deg,#C0392B,#FF7B6B)}
@media (prefers-reduced-motion:reduce){.rs-barra span{transition:none}}
.rs-h2{display:flex;align-items:center;gap:10px;font-size:20px;margin:0 0 14px}
.rs-h2::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.12)}
.rs-dias{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:28px}
.rs-dia{border-radius:18px;padding:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.rs-dia-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.rs-dia h3{margin:0;font-size:18px;line-height:1.25}
.rs-dia-cab p{margin:3px 0 0;font-size:14px;color:#D8CBDE}
.rs-dia-num{text-align:right;flex:0 0 auto}
.rs-dia-num b{display:block;font-size:30px;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.rs-dia-num span{font-size:13px;color:#D8CBDE}
.rs-dia>.rs-barra{margin-bottom:14px}
.rs-pases{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.rs-pase{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:10px;font-size:14px}
.rs-hora{font-weight:600;font-variant-numeric:tabular-nums;color:#fff}
.rs-pase .rs-barra{height:10px}
.rs-cuenta{color:#D8CBDE;white-space:nowrap;font-variant-numeric:tabular-nums}
.rs-cuenta b{color:#fff}
.rs-pase.completo .rs-cuenta{color:#FFB3A6;font-weight:600}
.rs-pase.cerrado{opacity:.6}
.rs-pase.cerrado .rs-barra{background:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 6px,transparent 6px 12px)}
.rs-vacio{margin:0;color:#D8CBDE;font-size:14px}
.rs-otros{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-bottom:26px}
.rs-tarjeta{border-radius:18px;padding:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.rs-tarjeta .rs-kpi-cab{margin-bottom:10px}
.rs-tarjeta h3{margin:0;font-size:16px}
.rs-tarjeta p{margin:6px 0 0;font-size:14px;line-height:1.45;color:#E2D6E6}
.rs-tarjeta .rs-grande{font-size:26px;font-weight:700;color:#fff;margin:2px 0 0}
.rs-tarjeta .rs-barra{margin-top:10px}
.rs-tarjeta ol{margin:8px 0 0;padding-left:20px;font-size:14px;color:#E2D6E6}
.rs-t-bizum{--rs-fondo:rgba(0,200,200,.18);--rs-color:#8FEAEA}
.rs-t-vales{--rs-fondo:rgba(255,196,0,.18);--rs-color:#FFD666}
.rs-t-solo{--rs-fondo:rgba(150,170,255,.18);--rs-color:#C3CDFF}
.rs-tel{font-variant-numeric:tabular-nums;letter-spacing:.02em}
@media (max-width:980px){.rs-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.rs-kpis{gap:10px}.rs-kpi{padding:14px 14px 13px;border-radius:15px}
  .rs-num{font-size:clamp(22px,7vw,30px)}.rs-ico{width:32px;height:32px;border-radius:10px}.rs-ico svg{width:18px;height:18px}
  .rs-rotulo{font-size:11.5px}.rs-cab h1{font-size:25px}.rs-dias{grid-template-columns:minmax(0,1fr)}}
/* ── puerta ── */
.veredicto{border-radius:15px;padding:22px;text-align:center;font-size:20px;font-weight:600;
           background:rgba(255,255,255,.07);margin-bottom:14px;min-height:96px;
           display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.veredicto.ok{background:var(--verde);color:#fff}
.veredicto.mal{background:var(--rojo);color:#fff}
.veredicto.ojo{background:#8A6100;color:#fff}
/* `small` global va en uva claro (arriba): sobre el verde o el ambar del veredicto
   daba 1,6 y era lo que Ruben veia gris («Ruben Pintor Mayordomo · 4 de 4»). Hereda. */
.veredicto small{font-weight:400;font-size:15px;opacity:.92;color:inherit}
/* EL GRUPO EN LA PUERTA (03/10): «1/4 OK» en grande, el nombre en blanco entero
   (antes iba en gris al 92 % y no se distinguia una lectura de la siguiente), los
   puntos de cada entrada y lo que toca ahora: «Lee la entrada 2 de 4» u OMITIR.
   Contrastes medidos (Chromium, 03/10): blanco sobre --verde 5,31 · sobre --ambar 5,54 ·
   --verde sobre blanco 5,31 · --uva sobre --crema 9,65. */
.veredicto.grupo{align-items:stretch;text-align:left;gap:6px;padding:14px 16px}
.v-cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.v-sello{font-size:24px;font-weight:700;letter-spacing:.02em}
.v-cuenta{font-size:22px;font-weight:600;white-space:nowrap;line-height:1}
.v-cuenta b{font-size:54px;font-weight:800}
.v-nombre{font-size:22px;font-weight:700;line-height:1.25;color:#fff}
.v-datos{font-size:16px;font-weight:600;color:#fff;letter-spacing:.02em}
.v-puntos{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0}
.v-puntos i{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;
            justify-content:center;font-style:normal;font-size:16px;font-weight:700;line-height:30px}
.v-puntos .p-si{background:#fff;color:var(--verde)}
.veredicto.ojo .v-puntos .p-si{color:var(--ambar)}
.v-puntos .p-no{border:2px dashed #fff;color:#fff}
.v-puntos .p-falta{border:2px solid #fff}
.v-siguiente{background:#fff;color:var(--verde);border-radius:11px;padding:9px 12px;
             font-size:20px;font-weight:700;text-align:center;line-height:25px}
.veredicto.ojo .v-siguiente{color:var(--ambar)}
.v-siguiente.fin{background:var(--crema);color:var(--uva)}
.v-omitir{appearance:none;border:2px solid #fff;background:transparent;color:#fff;border-radius:11px;
          padding:9px 14px;font:inherit;font-size:17px;font-weight:600;line-height:22px;cursor:pointer}
.v-omitir:active{background:rgba(255,255,255,.18)}
.v-nota{margin:0;font-size:14px;font-weight:500;color:#fff;line-height:1.4}
.v-deshacer{appearance:none;border:0;background:none;color:#fff;font:inherit;font-weight:700;
            text-decoration:underline;padding:4px 0;cursor:pointer}
.v-anterior{margin:-6px 0 14px;padding:10px 13px;border-radius:11px;background:#8A6100;color:#fff;
            font-size:15px;font-weight:600}
.v-anterior[hidden]{display:none}
@keyframes v-golpe{0%{transform:scale(.96);filter:brightness(1.6)}100%{transform:none;filter:none}}
.veredicto.golpe{animation:v-golpe .35s ease-out}
@media (prefers-reduced-motion:reduce){.veredicto.golpe{animation:none}}
/* LOS TURNOS EN LA PUERTA (03/10): la franja «AHORA · 22:30 · 9 de 12 dentro ·
   siguiente 23:00 en 18 min», los dias, las horas con dentro/esperadas y la lista
   de citados de cada hora con su boton «Leer». Contrastes: crema sobre uva 9,65 ·
   blanco sobre --verde 5,31 · blanco sobre --ambar 5,54 · uva sobre crema 9,65. */
.franja{appearance:none;width:100%;border:0;border-radius:13px;background:var(--verde);color:#fff;
        display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:12px 16px;margin:0 0 12px;
        font:inherit;text-align:left;cursor:pointer;line-height:1.3}
.franja.antes{background:#4F3F6E;border:1px solid rgba(255,255,255,.25)}
.franja.elige{background:var(--ambar)}
.franja .f-ahora{font-size:13px;font-weight:700;letter-spacing:.08em;opacity:.95}
.franja .f-hora{font-size:30px;font-weight:800;line-height:1}
.franja .f-cuenta{font-size:17px;font-weight:600;flex-basis:100%}
.franja .f-sig{font-size:15px;font-weight:600;opacity:.95}
.turnos{background:rgba(255,255,255,.07);border-radius:13px;padding:14px;margin-bottom:14px}
.turnos[hidden]{display:none}
.t-dias{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.t-dia{appearance:none;border:1px solid rgba(255,255,255,.35);background:transparent;color:var(--crema);
       border-radius:999px;padding:7px 13px;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.t-dia.sel{background:var(--crema);color:var(--uva);border-color:var(--crema)}
.t-horas{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px;scrollbar-width:thin}
.t-hora{appearance:none;flex:0 0 auto;min-width:76px;border:2px solid rgba(255,255,255,.3);background:transparent;
        color:var(--crema);border-radius:11px;padding:8px 10px;font:inherit;cursor:pointer;text-align:center;line-height:1.2}
.t-hora b{display:block;font-size:19px;font-weight:800}
.t-hora span{font-size:13px;font-weight:600}
.t-hora.pasado{opacity:.55}
.t-hora.ahora{border-color:#fff;background:var(--verde);color:#fff;opacity:1}
.t-hora.cerrado{text-decoration:line-through;opacity:.45}
.t-hora.sel{outline:3px solid var(--coral);outline-offset:1px}
.t-cabeza{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:16px;margin:4px 0 8px}
.t-cabeza b{font-size:20px}
.t-extra{font-size:14px;color:#D8CBDE;flex-basis:100%}
.t-faltan{color:#FFD28A;font-weight:700}
.t-cerrado{color:#D8CBDE;font-weight:600}
.t-cerrar{appearance:none;margin-left:auto;border:1px solid rgba(255,255,255,.4);background:transparent;color:var(--crema);
          border-radius:9px;padding:6px 11px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.t-vacio{margin:6px 0;color:#D8CBDE}
.t-grupo{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:9px 0;
         border-top:1px solid rgba(255,255,255,.12)}
.t-grupo.hecho{opacity:.6}
.t-grupo.leyendo{background:rgba(255,255,255,.1);border-radius:9px;padding:9px 8px}
.t-g-nombre{font-size:17px;font-weight:700;grid-column:1}
.t-g-puntos{grid-column:1;display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:14px;font-weight:600}
.t-g-puntos i{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
              font-style:normal;font-size:12px;font-weight:700;line-height:20px}
.t-g-puntos .p-si{background:#fff;color:var(--verde)}
.t-g-puntos .p-no{border:2px dashed #fff;color:#fff}
.t-g-puntos .p-falta{border:2px solid rgba(255,255,255,.7)}
.t-leer{appearance:none;grid-column:2;grid-row:1/3;border:0;background:var(--crema);color:var(--uva);border-radius:11px;
        padding:10px 16px;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.t-chapa{display:inline-block;border-radius:999px;padding:1px 9px;font-size:12px;font-weight:700;vertical-align:middle}
.t-chapa.menor{background:#fff;color:var(--uva)}
/* «sin menores» (17/10): lo que contestaron, tambien cuando es que no; en pequeño, para que el «con menor» se vea
   de lejos. Y la cuenta de la hora, en blanco y negrita junto a «faltan». */
.t-sinmenor{font-size:12px;font-weight:500;color:#D8CBDE;vertical-align:middle;white-space:nowrap}
.t-chapa.menor{white-space:nowrap}
.t-menores{color:#fff;font-weight:700}
.t-chapa.sinpagar{background:var(--ambar);color:#fff}
.veredicto.espera{background:#4F3F6E;color:#fff;border:2px solid rgba(255,255,255,.35)}
.veredicto.espera .v-siguiente{color:var(--uva)}
.v-codigos{display:flex;flex-wrap:wrap;gap:8px;font-size:15px}
.v-codigos .boton{font-size:15px;padding:8px 12px}
.v-turno{background:var(--ambar);color:#fff;border-radius:9px;padding:7px 10px;font-size:15px;font-weight:700}
/* EL GUION DE LA PUERTA (03/10): las normas en pocas palabras, para leerlas en voz alta
   con la cola delante. Letra grande, una por linea, y «PASAR» en verde al final. */
.guion{background:rgba(255,255,255,.07);border-radius:13px;padding:12px 16px;margin:14px 0 18px}
.guion summary{cursor:pointer;font-size:17px;font-weight:700;color:var(--crema);list-style:none;
               display:flex;align-items:center;gap:8px}
.guion summary::before{content:"▸";font-size:14px}
.guion[open] summary::before{content:"▾"}
.guion summary::-webkit-details-marker{display:none}
.guion ol{margin:12px 0 0;padding:0;list-style:none;counter-reset:norma}
.guion li{counter-increment:norma;font-size:19px;font-weight:700;line-height:1.3;padding:8px 0;
          border-top:1px solid rgba(255,255,255,.12);display:flex;gap:10px;align-items:baseline}
.guion li::before{content:counter(norma);font-size:14px;font-weight:600;color:#D8CBDE;min-width:18px}
.guion .pasar{margin:12px 0 2px;background:var(--verde);color:#fff;border-radius:11px;padding:11px;
              text-align:center;font-size:22px;font-weight:800;letter-spacing:.06em}
#video{width:100%;border-radius:15px;background:#000;max-height:46vh;object-fit:cover}
.pie-teclado{margin-top:28px;font-size:15px}
.pie-teclado a{color:#D8CBDE}          /* 6,63 sobre el fondo del panel */
.dicho.mal{color:#FFB3A6}               /* 6,01 sobre el panel · 4,86 sobre un bloque */
/* ── tipos de entrada (tienda y billete) ────────────────────────────────────
   Las opciones reutilizan .opcion, que ya existia. El fieldset se marca en rojo
   entero cuando el servidor dice que falla «tipo»: es lo que se ve. */
fieldset.mal .opcion{border-color:var(--rojo);background:#FDF1F0}
/* ── LA HORA DEL PASE (06/09) ───────────────────────────────────────────────
   `[hidden]` CON `!important`, Y LO QUE DE VERDAD HACE, MEDIDO: hoy `.gs-pases-de`
   —el que lleva el `hidden`— no tiene ninguna regla de `display` propia, asi que
   el `[hidden]{display:none}` del navegador ya basta. **Quitando el !important y
   midiendolo en Chromium, el grupo sigue escondido**: escribi aqui que sin el se
   verian los dos y era falso.
   Se queda igualmente, y es barato: el dia que alguien le ponga un `display` a
   `.gs-pases-de` —como `.gs-horas` ya lo lleva— una hoja del AUTOR le gana a la
   del navegador pase lo que pase con la especificidad, `g.hidden = true` dejaria
   de esconder nada, y se verian las horas de los dos tipos a la vez sin un solo
   error. Es lo que le paso a `.gsx-modal` el 02/09: las dos ventanas del tablero
   abiertas al cargar y «Cerrar» sin cerrar nada. `destrozos.py` lo prueba
   poniendo ese `display` y quitando el !important. */
[hidden]{display:none!important}
.gs-pases{border:2px solid var(--borde);border-radius:12px;padding:14px 16px;background:#fff}
.gs-pases legend{font-weight:600;padding:0 6px;margin:0}
.gs-pases-cual{margin:0 0 8px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
               color:var(--uva-claro)}                       /* 6,00 sobre blanco */
.gs-horas{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.gs-horas .opcion{margin:0;padding:11px 6px;justify-content:center;text-align:center}
.gs-pases-de + .gs-pases-de{margin-top:14px}
/* ── CUANTAS QUEDAN EN CADA PASE (06/09) ────────────────────────────────────
   Ruben: «experiencia normal: limite 12 personas» (dijo tambien el de la
   experiencia extrema, retirada el 11/09).
   El aviso sale SOLO cuando quedan pocas (4 o menos) o cuando el pase
   esta completo: un contador en las ocho horas es ruido, y lo que informa es la
   excepcion — el mismo criterio que «sin edad» en el panel.
   ⚠ Y UN PASE COMPLETO NO SE DISTINGUE SOLO POR EL COLOR: lleva la palabra
   «completo» escrita y el radio deshabilitado, o sea que tampoco se puede pulsar.
   ⚠ Y NO SE APAGA CON `opacity`, QUE ERA LO PRIMERO QUE ESCRIBI: al 55 % el texto
   de la hora se queda en **2,68** de contraste, o sea ilegible — un pase completo
   hay que poder leerlo, que es justo la informacion que se busca. Se apaga con un
   fondo propio y colores medidos.
   Medidos, y no de memoria: --rojo sobre el blanco del bloque **6,54** (yo habia
   escrito 7,71 en este mismo comentario: es «dos contrastes que escribi de memoria
   en un comentario que dice medido», 06/09, cazado por medirlo); --uva-claro sobre
   blanco 6,41 y sobre el crema del completo **5,59**; la hora, 8,99. */
.gs-horas .opcion small{display:block;margin-top:3px;font-size:12.5px;line-height:1.2}
.gs-quedan{color:var(--rojo);font-weight:600}
/* Las plazas que quedan cuando NO son pocas: es un dato, no una alarma, asi que
   va apagado y sin negrita. Medido sobre los cuatro fondos que puede tener una
   opcion de hora: blanco 6,41 · marcada 5,88 · completa 5,59 · en error 5,80. */
.gs-plazas{color:var(--uva-claro)}
.gs-lleno{color:var(--uva-claro);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
/* ── EN LA WEB, NI CUANTAS CABEN NI CUANTAS QUEDAN (08/10) ──────────────────
   Ruben no quiere que se lea «queda mucho libre». Lo unico que sale es el aviso
   de que una hora se llena, y solo cuando es verdad (`aviso_de_ocupacion` en
   entradas.py): «Se está llenando» desde la primera reserva y «Últimas
   entradas» desde el 80 % o con 4 o menos pasada la mitad. «Últimas» lleva ademas un punto que late
   en la ESQUINA de su casilla: puesto delante del texto, en un movil de 390 se
   quedaba solo en su renglon (se vio en la captura). Con «reducir movimiento»,
   quieto. ⚠ EN MINUSCULAS A PROPOSITO: en mayusculas «LLENANDO» no cabe al lado
   del redondel en una casilla de movil y lo empuja contra el borde (medido en la
   vara: su renglon de 70 px se salia de la casilla), que es lo que ya le pasaba
   a «COMPLETO». Por eso el
   hueco entre el redondel y la hora baja a 8 px y «completo» a 11 px: lo mide
   comprueba_pases.py en las cuatro casillas. Y los contrastes, en los DOS temas y
   sobre la hora marcada, no se escriben aqui de memoria. */
.gs-horas .opcion{position:relative;gap:8px}
.gs-horas .opcion small.gs-lleno{font-size:11px}
.gs-aviso{font-weight:700}
.gs-ultimas{color:var(--rojo)}
.gs-ultimas::before{content:"";position:absolute;top:7px;right:7px;width:8px;height:8px;
                    border-radius:50%;background:currentColor;animation:gs-late 1.4s ease-in-out infinite}
.gs-llenando{color:var(--ambar)}
/* «🔥 Más vendida» (5659): naranja fuego, entre el rojo de «últimas» y el ambar de «se está
   llenando». Su contraste lo mide comprueba_pases.py como el de los otros dos. */
.gs-top{color:#A64512}
@keyframes gs-late{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.gs-ultimas::before{animation:none}}
.opcion.gs-completo{background:#F4EFE6;border-color:var(--borde);cursor:not-allowed}
.opcion.gs-completo b{text-decoration:line-through}
/* La nota de ese pase y el aviso de que la hora es orientativa. El aviso lleva
   fondo propio porque es lo unico de este bloque que hay que leer entero: el
   mismo criterio que el aviso de la edad.
   ⚠ AQUI ESCRIBI «--ambar sobre #FFF6EE da 5,60 medido» Y ERA INVENTADO POR
   PARTIDA DOBLE: ni uso --ambar -el aviso hereda --uva, que sobre #FFF6EE da
   **9,65**- ni habia medido ese 5,60. Tercera vez hoy con un contraste escrito
   de memoria dentro de un comentario que dice «medido». Los de abajo si lo
   estan. */
.gs-pases-nota{margin:10px 0 0;font-size:15px;color:var(--uva-claro)}   /* 6,41 sobre el blanco del bloque */
.gs-estimada{margin:14px 0 0;padding:11px 13px;border-radius:10px;background:#FFF6EE;
             border:1px solid var(--borde);font-size:15px;line-height:1.5}
.billete .gs-pase span{display:block;font:400 14px/1.2 inherit;color:var(--uva-claro);
                       letter-spacing:.04em;margin-top:2px}   /* 6,00 sobre blanco */
/* LA HORA EN LA ENTRADA, que es lo que pidio Ruben. Grande y lo primero que se
   lee debajo del nombre del evento. */
.billete .gs-pase{margin:0 0 6px;font:700 30px/1.1 inherit;color:var(--coral-hondo)}  /* 4,99 sobre blanco */
.billete .gs-pase-falta{font-size:17px;color:var(--rojo)}                              /* 6,54 sobre blanco */
.opcion small{margin-top:2px}
.billete .tipo{margin:0 0 2px;font-weight:600;color:var(--coral-hondo);font-size:14px;
               letter-spacing:.08em;text-transform:uppercase}   /* 4,99 sobre blanco */
/* ── ajustes: una fila por tipo ── */
h2.sub{margin-top:24px}
.tipo-fila{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1)}
/* ── BORRAR UNA RESERVA (06/09) ─────────────────────────────────────────────
   El boton de borrar va MAS DISCRETO que el de marcar pagada, y a proposito: el
   primario de esa fila es cobrar. Sin fondo, con borde, y en el rojo de la casa.
   ⚠ EL CONTRASTE ES **4,86**, NO 6,01: escribi el 6,01 de `.err` de memoria y ese
   se midio sobre el uva PELADO — estos botones viven dentro de `.bloque`, que es
   uva con un 7 % de blanco encima, y ahi el mismo color da menos. Pasa (4,5), pero
   es justo el fallo de «dos contrastes que escribi de memoria en un comentario que
   dice medido» (06/09). El hover (uva sobre el rojo) da 6,01. Y el boton de la
   papelera, `.enlace` sobre ese mismo bloque, 4,80. */
.boton.fino{background:transparent;border:1.5px solid #FFB3A6;color:#FFB3A6;
            padding:8px 14px;font-size:15px}
.boton.fino:hover{background:#FFB3A6;color:var(--uva)}

/* ── LOS BOTONES DE UNA FILA, TODOS DEL MISMO TAMAÑO (06/09) ────────────────
   Ruben, con la tabla de Reservas delante: «se solapa, ponlo bien por favor,
   somos profesionales, y el boton de marcar pagada es enorme».
   Tenia razon y la causa era mia: «Marcar pagada» llevaba `.boton` A SECAS —el
   de la tienda, 14x26 y 17 px, pensado para el unico boton de una pagina de
   compra— y el de al lado `.boton fino`. Dos tamanos en la misma celda, y con
   dos botones por fila se salian de la tabla.
   Ahora todos son finos y **la jerarquia la marca el RELLENO, no el tamaño**: el
   que manda en la fila va relleno (blanco sobre --coral-hondo, 4,99 medido) y
   los demas de contorno (#FFB3A6 sobre el bloque, 4,86 medido). */
.acciones{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}
/* ⚠ `line-height` EN PIXELES, Y NO ES UN CAPRICHO: un emoji lo pinta una fuente
   de respaldo con OTRAS metricas, y con `line-height:1` eso hacia el boton un
   pixel mas alto que el de al lado. Medido en Chromium: 36 contra 35. Con un
   valor en px la altura del renglon deja de depender de la letra que toque. */
.acciones .boton{white-space:nowrap;line-height:18px}
.boton.fino.hacer{background:var(--coral-hondo);border-color:var(--coral-hondo);color:#fff}
.boton.fino.hacer:hover{background:#9C4614;border-color:#9C4614;color:#fff}
th.derecha,td.derecha{text-align:right}
/* Y LA TABLA SE DESPLAZA DENTRO DE SU CAJA, no arrastra la pagina entera. Con
   ocho columnas no cabe en un movil: lo que se veia era la tabla cortada por la
   derecha, los botones asomando por fuera y el boton de la papelera partido
   arriba. Una tabla ancha se desplaza dentro de su propio recuadro. */
#tabla{overflow-x:auto}
#tabla table{min-width:680px}
h2.con-boton{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pista{display:block;color:#A99FB0;font-size:12.5px;margin-top:4px;line-height:1.35}

/* ── LA EDAD, Y LA CASILLA CON LA QUE SE FIRMA (05/09) ──────────────────────
   Ruben: «La autorizacion deben "firmarla" con una casilla de CHECK al comprar
   las entradas en la web si son menores». Va con caja propia y fondo distinto:
   es lo unico del formulario que no son datos de contacto sino una norma que
   hay que leer, y mezclarla con los demas campos es como se firma sin leer. */
/* SE ESTILA POR LA CLASE, NO POR EL ID: con `#edad{...}` (1,0,0), la regla de
   error `fieldset.mal` (0,1,1) no puede ganarle y la caja no se pone roja.
   Medido en el navegador: el borde y el fondo no se movian. El id se queda
   para el javascript, que es para lo que hace falta. */
.edad{border:2px solid var(--borde);border-radius:12px;padding:14px 16px;background:#fff}
.edad legend{font-weight:600;padding:0 6px;margin:0}
.reglas-edad{margin:0 0 12px;padding-left:20px}
.reglas-edad li{margin:0 0 5px;line-height:1.45;font-size:15.5px}
.reglas-edad li:last-child{margin:0}
.acepta{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
        font-size:15.5px;line-height:1.45}
.acepta input{width:22px;height:22px;flex:0 0 auto;margin-top:2px;accent-color:var(--coral-hondo)}
/* ⚠ `.mal` SOLO ESTABA DECLARADO PARA `input`, ASI QUE EN UN FIELDSET NO PINTABA
   NADA. O sea que el aviso de «elige que entrada quieres» ya marcaba el bloque
   del tipo... en el codigo y no en la pantalla, desde el 04/09. El mensaje si
   salia abajo, asi que no era mudo del todo, pero el campo que falla no se veia
   — que es media leccion del formulario de NAGI del 16/08. */
fieldset.mal{border-color:var(--rojo);background:#FDF1F0}
fieldset.mal legend{color:var(--rojo)}
/* ⚠ Y ESTA MARCA SALE EN EL PANEL, QUE VA SOBRE UVA, NO SOBRE CREMA. Le puse
   `var(--ambar)` (#8A6100) por costumbre —es el ambar de la tienda, que va sobre
   fondo claro— y sobre el uva del panel da **1,86** de contraste: invisible. Es
   exactamente `.apunte` a 1,61 del 30/08, en la misma casa y con la leccion ya
   escrita. #FFD98A da 7,62. Al reutilizar una clase en otro fondo, se mide. */
.sin-edad{display:inline-block;margin-left:6px;color:#FFD98A;font-weight:600}
/* 09/09 · la aceptacion de la edad SE VE, y si viene un menor tambien. Colores
   medidos sobre la uva del panel: #9FE2B8 → 6,7; #3A2A00 sobre #FFD98A → 10. */
.ok-edad{display:inline-block;margin-left:6px;color:#9FE2B8;font-weight:600}
.con-menor{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:#FFD98A;color:#3A2A00;font-weight:700;font-size:12.5px}
.pregunta{margin:14px 0 8px;font-weight:600}
.edad .opcion{margin:0 0 8px}
.billete .declara{margin:6px 0 0;font-size:13.5px;color:#6B5875}
.billete .declara b{color:var(--uva)}

/* LA INVITACION AL CANAL, despues de pagar. Va como ENLACE y no como boton: el
   boton de esta pagina es «Enviar el justificante», que es lo que hay que hacer
   ahora, y dos botones seguidos se comen el uno al otro. Sin colores nuevos: `a`
   ya es coral-hondo (4,67 sobre la crema) y `small` ya es uva-claro (6,00), los
   dos MEDIDOS -- y los dos numeros que puse antes aqui, 5,03 y 4,85, me los
   habia inventado. Inventarse una variable que no existe no falla: sale
   descolocado tres semanas despues. */
.comunidad{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--borde)}
.comunidad b{display:block}

/* ── LA TIENDA SE VISTE COMO LA WEB (09/09) ─────────────────────────────────
   Ruben, con la pagina de compra delante: «por que el entorno es tan seco? y si
   quiero volver atras en la web? parece que estoy en otra web totalmente
   distinta y cutre cuando voy a comprar entradas». Tenia razon por partida
   doble: la tienda no tenia CABECERA (ni logotipo ni forma de volver) y iba en
   crema mientras la pagina del evento, de donde se viene, va en negro sangre.
   Tres cosas, en este orden:
     1. las letras de la web, servidas por la MISMA web (`/fuentes/`, mismo
        origen que `/img/favicon.svg`, que ya se usaba): Jost para el cuerpo y
        las dos de Halloween para los titulares del tema oscuro. Si no llegan
        —en el ensayo, que sirve la tienda sola— se cae al respaldo y ya;
     2. una cabecera con el logotipo y «Volver a la web», y un pie con lo mismo:
        el formulario es largo y al final tambien se quiere salir;
     3. el tema `sangre` sobre `body`, que lo pone el servidor desde Ajustes.
        SON LOS MISMOS SEIS COLORES QUE `.sangre` DE estilo.css (--sg-fondo,
        --sg-caja, --sg-hueso, --sg-tinta2, --sg-rojo, --sg-hondo, --sg-borde),
        copiados a mano porque son dos programas que no se leen: si cambian
        alli, cambian aqui. `comprueba_pases.py` mide el contraste de lo PINTADO
        en las cuatro paginas con este tema, porque leer el CSS es medir lo que
        uno cree que hace la cascada.
   Lo que NO cambia: el panel (teclado, resumen, puerta, ajustes), que es de
   ellos y va en uva; y el billete impreso, que sigue en blanco. */
@font-face{font-family:"Jost";src:url("/fuentes/jost.woff2") format("woff2");
           font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Cinzel";src:url("/fuentes/cinzel.woff2") format("woff2");
           font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Metal Mania";src:url("/fuentes/metalmania.woff2") format("woff2");
           font-weight:400;font-style:normal;font-display:swap}
/* la cabecera: como `.barra` de la web (74 px, logotipo de 44) pero sin menu —
   desde aqui solo se vuelve, no se navega */
.barra{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
       gap:16px;min-height:74px;padding:0 20px;background:rgba(237,226,211,.92);
       backdrop-filter:blur(10px);border-bottom:1px solid var(--borde)}
.barra .marca{display:inline-flex;align-items:center}
.barra .marca img{height:44px;width:auto;display:block}
.barra .volver,.pie a{display:inline-block;color:var(--uva);text-decoration:none;font-weight:500;
       font-size:15.5px;padding:8px 14px;border-radius:999px;border:1px solid var(--borde);
       white-space:nowrap}
.barra .volver:hover,.pie a:hover{color:var(--coral-hondo);border-color:var(--coral-hondo)}
.pie{text-align:center;padding:10px 20px 40px}
@media (max-width:640px){.barra{min-height:64px;padding:0 14px}.barra .marca img{height:36px}}
@media print{.barra,.pie{display:none}}
/* ── el tema `sangre` ── */
body.sangre{
  --sg-fondo:#0D0406;--sg-caja:#1A070C;--sg-hueso:#F0E4E0;--sg-tinta2:#B79A94;
  --sg-rojo:#F2545B;--sg-hondo:#B3131B;--sg-borde:#3E141C;
  --uva:var(--sg-hueso);--uva-claro:var(--sg-tinta2);--borde:var(--sg-borde);
  --coral-hondo:var(--sg-rojo);
  background:var(--sg-fondo);color:var(--sg-hueso)}
body.sangre h1{font-family:"Metal Mania","Cinzel",serif;font-weight:400;font-size:34px;
               letter-spacing:.01em;color:var(--sg-rojo);
               text-shadow:0 0 24px rgba(179,19,27,.55),0 2px 0 #240509}
body.sangre h2{font-family:"Cinzel",serif;font-weight:700;text-transform:uppercase;letter-spacing:.055em}
body.sangre .precio{color:var(--sg-rojo)}
body.sangre .barra{background:rgba(13,4,6,.95);border-bottom-color:var(--sg-borde)}
body.sangre .barra .volver,body.sangre .pie a{color:var(--sg-hueso);border-color:var(--sg-borde)}
body.sangre .barra .volver:hover,body.sangre .pie a:hover{color:var(--sg-rojo);border-color:var(--sg-rojo)}
/* todo lo que iba sobre blanco o sobre crema, a la caja del tema */
body.sangre input[type=text],body.sangre input[type=number],body.sangre input:not([type]),
body.sangre input[type=email],body.sangre input[type=tel]{background:var(--sg-caja);color:var(--sg-hueso)}
body.sangre input.mal{background:#2A0B10;border-color:var(--sg-rojo)}
body.sangre .opcion,body.sangre .edad,body.sangre .gs-pases,body.sangre .resumen,
body.sangre .estado{background:var(--sg-caja)}
body.sangre .opcion:has(input:checked){border-color:var(--sg-rojo);background:#2A0B10}
body.sangre .opcion.gs-completo{background:#120508;border-color:var(--sg-borde)}
body.sangre fieldset.mal{background:#2A0B10;border-color:var(--sg-rojo)}
body.sangre fieldset.mal .opcion{background:#2A0B10;border-color:var(--sg-rojo)}
body.sangre fieldset.mal legend,body.sangre .err,body.sangre .gs-quedan{color:#FFB3A6}
body.sangre .gs-ultimas{color:var(--sg-rojo)}
body.sangre .gs-llenando{color:#F0B45A}
body.sangre .gs-top{color:#FF8F4D}
body.sangre .gs-estimada{background:#120508;border-color:var(--sg-borde)}
body.sangre .destacado{background:#2A0B10;border-color:var(--sg-rojo);color:var(--sg-hueso)}
body.sangre .boton{background:var(--sg-hondo);color:var(--sg-hueso)}
body.sangre .boton:hover{background:#8E0F15}
body.sangre .acepta input{accent-color:var(--sg-rojo)}
body.sangre .estado.ok{background:#0F2A1C;border-color:#5FCB8E;color:#9FE2B8}
body.sangre .comunidad{border-top-color:var(--sg-borde)}
/* el billete se queda BLANCO —es la entrada, y se imprime— pero lo que lleva
   dentro vuelve a los colores de la tienda clara, que estan medidos sobre blanco */
body.sangre .billete{--uva:#4A3B52;--uva-claro:#6B5875;--coral-hondo:#9D4714;--borde:#DCCBB6;
                     color:#4A3B52;border-color:var(--sg-borde)}
body.sangre .billete h2{font-family:inherit;text-transform:none;letter-spacing:0}
@media print{body.sangre{background:#fff;color:#4A3B52}}

/* ── LA VENTANA DE LAS NORMAS (09/09) ────────────────────────────────────────
   Un boton discreto al lado de la casilla —de contorno, como los finos del
   panel— y un <dialog> nativo: trae el foco atrapado, Escape y el fondo
   oscurecido sin javascript propio. Los colores van medidos por
   comprueba_pases.py sobre lo pintado, en crema y en sangre. */
.ver-normas{display:inline-block;margin:8px 0 2px 33px;padding:7px 13px;border-radius:999px;
            border:1.5px solid var(--coral-hondo);background:transparent;color:var(--coral-hondo);
            font:500 14.5px/18px inherit;cursor:pointer}
.ver-normas:hover{background:var(--coral-hondo);color:#fff}
dialog.normas{border:0;border-radius:16px;padding:0;max-width:min(92vw,620px);width:100%;
              background:var(--crema);color:var(--uva);box-shadow:0 20px 60px rgba(0,0,0,.45)}
dialog.normas::backdrop{background:rgba(20,8,12,.72)}
.normas-caja{max-height:82vh;overflow:auto;padding:22px 24px 18px}
.normas-caja h2{font-size:21px;margin:0 0 10px}
.normas-caja h3{font-size:15px;margin:16px 0 6px;letter-spacing:.06em;text-transform:uppercase;color:var(--coral-hondo)}
.normas-caja ul{margin:0;padding-left:20px}
.normas-caja li{margin:0 0 6px;font-size:15.5px;line-height:1.45}
.normas-salud{margin:12px 0 0;padding:11px 13px;border-radius:10px;background:#FFF1C9;color:#3A2A00;
              border:1px solid #E9C66A;font-size:15px;line-height:1.45}
.normas-botones{margin:18px 0 0;text-align:right}
.normas-botones .boton{padding:11px 22px;font-size:16px}
body.sangre dialog.normas{background:var(--sg-caja);color:var(--sg-hueso);border:1px solid var(--sg-borde)}
body.sangre .normas-caja h3{color:var(--sg-rojo)}
body.sangre .ver-normas{border-color:var(--sg-rojo);color:var(--sg-rojo)}
body.sangre .ver-normas:hover{background:var(--sg-rojo);color:#140A0C}

/* ── EL PANEL: EL MOVIL, EL DETALLE DE LA RESERVA Y EL JUSTIFICANTE (09/09) ──
   Ruben: «el numero movil se ve muy flojo de color, quiero todos los datos
   posibles en la reserva, incluso ahi en miniatura (ampliable con un clic) la
   captura de pantalla de bizum que le hayan enviado a IAGO».

   ⚠ EL PANEL NO ES CREMA: `body.panel` lo pinta al reves —fondo `--uva`, texto
   `--crema`— y estas reglas nacieron escritas para la tienda, que si lo es. La
   primera version puso el detalle con FONDO CLARO y el texto se quedo en crema:
   1,00 de contraste, o sea invisible. No lo vio leer el CSS; lo canto
   `comprueba_pases.py` en un Chromium antes de subirlo. Es la leccion del
   06/09 —«una clase heredada de otra pagina lleva su fondo dentro de la
   cabeza»— pisada por quien la escribio. Aqui TODO va sobre oscuro. */
a.tel{color:var(--crema);font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35)}
a.tel:hover{border-bottom-color:var(--crema)}

/* La fila de detalle ocupa las ocho columnas y nace escondida. El
   `[hidden]{display:none!important}` general ya la esconde; esto solo la viste,
   con un morado un punto mas claro que el del panel para que se distinga de la
   fila de arriba sin dejar de ser oscura. */
tr.detalle > td{background:#3B2E42;border-top:0;color:var(--crema)}
tr.detalle dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:10px 22px;margin:0 0 14px}
/* El rotulo puede ser mas flojo que el dato —es la etiqueta, no el contenido—
   pero tiene que LEERSE igual: #C9BCD2 sobre #3B2E42 da 6,4. */
tr.detalle dt{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  color:#C9BCD2;margin:0}
tr.detalle dd{margin:2px 0 0;font-size:15px;line-height:1.35;word-break:break-word;
  color:var(--crema)}
tr.detalle dd small,tr.detalle .apunte{display:block;color:#C9BCD2}
tr.detalle dd a{color:var(--crema)}
tr.detalle h3{margin:6px 0 8px;font-size:16px;color:var(--crema)}
tr.detalle p{color:var(--crema)}
code.cod{display:inline-block;background:rgba(255,255,255,.12);color:var(--crema);
  border-radius:5px;padding:2px 7px;font-size:13px;margin:2px 3px 0}
/* `opacity` sobre lo usado bajaria el contraste sin avisar. Se marca con la
   raya, que no toca el color. */
code.cod.usada{text-decoration:line-through;color:#C9BCD2}

/* La chapa de la fila: de los DOS colores, no solo la excepcion. Que llegue un
   justificante es la señal de «esta se puede validar ya». Sobre fondo claro
   porque la chapa lleva el suyo propio. */
small.justif{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:99px;
  font-size:12.5px}
small.justif.cuadra{background:#DFF0E0;color:#14471E}
small.justif.nocuadra{background:#FBE6C8;color:#6A3F03}

.justif-caja{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;
  border-left:4px solid #C9BCD2;padding:8px 0 8px 12px;margin-bottom:12px}
.justif-caja.cuadra{border-left-color:#6FD08A}
.justif-caja.nocuadra{border-left-color:#F0B44C}
.justif-caja > div{flex:1 1 260px;min-width:0}
.justif-caja p{margin:0 0 6px}
/* La miniatura: pequeña de verdad y con el cursor que dice que se puede pulsar.
   `object-fit:contain` para que una captura alta no salga recortada por el
   centro, que es justo donde va el importe. Y fondo BLANCO: una captura de
   banco es blanca y sobre el morado quedaria flotando. */
img.justif-mini{width:120px;height:160px;object-fit:contain;background:#fff;
  border:1px solid rgba(255,255,255,.35);border-radius:6px;cursor:zoom-in;flex:0 0 auto}
a.justif-pdf{display:inline-block;padding:10px 14px;color:var(--crema);
  border:1px solid rgba(255,255,255,.35);border-radius:6px;text-decoration:none}

dialog.visor{border:0;padding:0;background:transparent;max-width:96vw;max-height:96vh}
dialog.visor::backdrop{background:rgba(0,0,0,.82)}
dialog.visor img{display:block;max-width:96vw;max-height:96vh;cursor:zoom-out;border-radius:8px}

/* ── LAS ENTRADAS EN MINIATURA, EN EL DETALLE DE LA RESERVA (10/09) ─────────
   Plan B de Ruben: abrir la entrada de alguien desde el panel, verla grande,
   escanearla en pantalla o mandarsela. La tira se desplaza a lo ancho DENTRO de
   su caja: con cinco entradas y una tabla que ya se desplaza, arrastrar la
   pagina entera es lo que se arreglo el 06/09. */
.ent-tira{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px}
.ent-mini{margin:0;flex:0 0 auto;width:118px}
/* Fondo BLANCO: la entrada es blanca por arriba y sobre el morado del panel
   quedaria flotando. Y `height:auto` para que no se deforme: una entrada
   aplastada no se puede leer ni de lejos. */
.ent-mini img{display:block;width:118px;height:auto;background:#fff;border-radius:6px;
  border:1px solid rgba(255,255,255,.35);cursor:zoom-in}
.ent-mini figcaption{font-family:Archivo,monospace;font-size:11.5px;letter-spacing:.03em;
  color:#C9BCD2;margin-top:4px;text-align:center;word-break:break-all}

/* ── LA TAQUILLA (12/09) ─────────────────────────────────────────────────────
   Venta en mano desde el panel. El formulario es el de la web, asi que las tarjetas
   blancas de las opciones (.opcion) se quedan con letra OSCURA dentro aunque el panel
   vaya en crema sobre uva: sin esto, el texto heredaba el crema y no se leia. */
body.panel .opcion,body.panel .opcion b,body.panel .opcion small{color:var(--uva)}
/* Y LOS RADIOS NO SON CAMPOS DE TEXTO: `.bloque input{width:100%}` los estiraba a todo
   el ancho y empujaba el texto a la derecha (se vio en la captura). */
body.panel .opcion input,body.panel .acepta input{width:auto;padding:0;border:0;flex:0 0 auto}
body.panel .opcion input{width:20px;height:20px;accent-color:var(--coral-hondo)}
/* El bloque de las horas viene de la web, blanco: dentro, todo oscuro -tambien la nota
   «La hora es orientativa», que salia INVISIBLE (crema sobre melocoton). */
body.panel .gs-pases,body.panel .gs-pases legend,body.panel .gs-pases small,body.panel .gs-estimada{color:var(--uva)}
/* La legend de un fieldset se pinta A CABALLO del borde: sobre la pagina crema de la
   web queda bien, sobre el panel oscuro la mitad de fuera desaparece (se vio en la
   captura). Flotada, el navegador la pinta DENTRO de la caja. */
body.panel .gs-pases legend,body.panel .edad legend{float:left;width:100%;margin:0 0 8px;padding:0}
body.panel .gs-pases legend{font-weight:600;color:var(--uva)}
body.panel .gs-pases-cual{color:var(--uva-claro)}
body.panel .opcion small{color:#6B5875}
body.panel fieldset legend{font-weight:600;color:#C9BFCF;font-size:14px;margin-bottom:8px}
body.panel .gs-pases-de{margin-bottom:6px}
body.panel .edad{background:rgba(255,255,255,.06);border-radius:11px;padding:14px;margin:14px 0}
body.panel .reglas-edad{margin:0 0 10px;padding-left:20px}
body.panel .acepta{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
body.panel .pregunta{margin:10px 0 6px;font-weight:600}
body.panel .ver-normas{background:none;border:1px solid rgba(255,255,255,.35);color:var(--crema);
  border-radius:8px;padding:6px 12px;cursor:pointer;margin-bottom:10px;font:inherit;font-size:14px}
body.panel fieldset.mal{outline:2px solid #FFB3A6;outline-offset:4px;border-radius:11px}
body.panel input.mal{outline:2px solid #FFB3A6}
.tq-pago{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tq-pago .opcion{margin:0;padding:16px}
.tq-pago .opcion b{font-size:20px}
/* LA CAJA: lo grande se lee desde un metro, que es a lo que esta quien cobra. */
.tq-caja{background:#fff;color:var(--uva);border-radius:14px;padding:18px 20px;margin:14px 0 18px}
.tq-fila{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0}
.tq-fila span,.tq-fila label{font-weight:600;letter-spacing:.06em;font-size:14px;color:#6B5875}
.tq-total b{font-size:44px;line-height:1;color:var(--coral-hondo)}
.tq-entrada{display:flex;align-items:center;gap:8px}
.tq-entrada input{width:150px;font-size:28px;font-weight:600;text-align:right;padding:8px 12px;
  border:2px solid var(--borde);border-radius:10px;color:var(--uva);background:#fff}
.tq-entrada input:focus{outline:2px solid var(--coral-hondo);outline-offset:-1px}
.tq-entrada span{font-size:24px;font-weight:600}
.tq-rapidos{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0 10px}
.tq-rapidos button{font:inherit;font-weight:600;padding:9px 16px;border-radius:999px;cursor:pointer;
  border:2px solid var(--borde);background:#FFF6EE;color:var(--uva)}
.tq-rapidos button:hover{border-color:var(--coral-hondo)}
.tq-devolver{border-top:2px dashed var(--borde);margin-top:4px;padding-top:14px}
.tq-devolver b{font-size:44px;line-height:1;color:#6B5875}
.tq-devolver.ok b{color:var(--verde)}
.tq-devolver.mal b{color:var(--rojo);font-size:26px}
.tq-caja .err{color:var(--rojo);margin:4px 0 0}
.tq-hecho{border:2px solid #7DD3A6}
.tq-resumen{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:14px}
.tq-resumen div{background:rgba(255,255,255,.07);border-radius:10px;padding:10px 12px}
.tq-resumen .et{display:block;font-size:13px;color:#C9BFCF}
.tq-resumen b{font-size:17px;word-break:break-all}
@media (max-width:560px){.tq-pago{grid-template-columns:1fr}.tq-total b,.tq-devolver b{font-size:34px}}
/* ── EL VALE DEL BAR (13/09) ─────────────────────────────────────────────────
   Una sola cosa en la pantalla: un campo enorme para seis letras, un boton, y
   luego un CHECK VERDE que se ve desde el otro lado de la barra. */
.vale h1{text-align:center}
.vale-bar{text-align:center;margin:0 0 22px;color:var(--uva-claro)}
body.sangre .vale-bar{color:#C9BCD2}
.vale label{text-align:center;font-size:18px}
.vale #codigo{font:600 40px/1.2 "Archivo",ui-monospace,monospace;text-align:center;letter-spacing:.22em;
  text-transform:uppercase;padding:14px 8px;border-width:3px}
.vale #codigo::placeholder{letter-spacing:.22em;color:#BFB3B8;font-weight:400}
.vale small{text-align:center}
.vale-boton{width:100%;margin-top:16px;font-size:22px;padding:16px}
.vale-resultado{margin-top:22px;border-radius:18px;padding:26px 18px 22px;text-align:center;color:#fff}
.vale-resultado h2{font-size:30px;line-height:1.1;margin:10px 0 12px;letter-spacing:.04em}
.vale-resultado p{margin:4px 0;font-size:19px}
.vale-resultado p:first-of-type{font:600 30px/1.2 "Archivo",ui-monospace,monospace;letter-spacing:.14em}
.vale-icono{width:118px;height:118px;border-radius:50%;margin:0 auto;display:flex;align-items:center;
  justify-content:center;font-size:76px;line-height:1;background:rgba(255,255,255,.22)}
.vale-resultado.ok{background:#178A4C;box-shadow:0 0 0 6px rgba(23,138,76,.25)}
.vale-resultado.ya{background:#8A6100}
.vale-resultado.mal{background:var(--rojo)}
@media (min-width:560px){.vale-resultado h2{font-size:40px}.vale-icono{width:150px;height:150px;font-size:98px}}
.vale-campana{display:block;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-top:4px}

/* ── LA PANTALLA DE VISITAS (14/09) ──────────────────────────────────────────
   Dos reglas y ninguna mas. La tabla de «ahora mismo» tiene seis columnas y en un
   movil no cabe: se desplaza ELLA, dentro de su caja, que es la unica forma de que
   la pagina no se desplace entera de lado. Y los cuatro recuadros de abajo se
   ponen en dos columnas cuando hay sitio y en una cuando no. */
.tabla-ancha{overflow-x:auto}
.tabla-ancha table{min-width:620px}
.dos-columnas{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.dos-columnas .bloque{margin-bottom:0}
.dos-columnas h2{margin-top:0}
.dos-columnas h2 small{font-weight:400;color:#C9BFCF;font-size:14px}
/* ── las plazas guardadas para invitados (08/10) ── */
.rs-bloq{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:28px}
.rs-bloq-dia{border-radius:18px;padding:16px 18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.rs-bloq-dia h3{margin:0 0 10px;font-size:17px}
.rs-bloq-fila{display:grid;grid-template-columns:52px 70px 1fr auto;align-items:center;gap:10px;padding:6px 0;
  border-top:1px solid rgba(255,255,255,.07)}
.rs-bloq-fila:first-of-type{border-top:0}
.rs-bloq-fila .rs-hora small{display:block;font-size:11px;font-weight:500;color:#D8CBDE}
.rs-bloq-fila input[type=number]{width:70px;padding:7px 8px;border-radius:9px;border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.25);color:var(--crema);font:inherit;font-size:15px;text-align:center}
.rs-bloq-fila label{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:500;cursor:pointer}
.rs-bloq-fila input[type=checkbox]{width:20px;height:20px;accent-color:#B65217;flex:0 0 auto}
.rs-bloq-fila.activo{background:linear-gradient(90deg,rgba(182,82,23,.22),transparent);border-radius:10px}
.rs-bloq-fila.activo label{color:#FFD7C2}
.rs-bloq-est{font-size:13px;color:#D8CBDE;white-space:nowrap;min-width:64px;text-align:right}
.rs-bloq-est.ok{color:#9BE3B9}
.rs-bloq-est.mal{color:#FFB3A6}
.rs-candado{color:#FFD7C2;font-weight:600}