/* Piel de Eventos, servida desde /eventos-app.css porque las páginas las
   pinta el worker y no Astro — el CSS de Astro lleva un nombre con hash y
   aquí hace falta uno estable.

   LOS COLORES NO SE INVENTAN: son los mismos de EventosThemeV2 en el
   iPhone. Neutros de SportsThemeV2, el VERDE de Bartelo como acento y la
   lima SOLO para «GRATIS». Al ser dos implementaciones, un cambio allá
   hay que traerlo aquí a mano; está asumido.

   UNA SOLA PIEL PARA LOS DOS DOMINIOS (decisión del usuario, 2026-09-15):
   `eventos.barteloapp.com` y `eventos.zenterapp.com` sirven la misma
   página con esta misma cara. Es la cartelera de Bartelo con dos puertas;
   el dominio solo cambia los enlaces, no la marca. El día que haya
   negocios compartiendo el enlace de Zenter de verdad se podrá hacer una
   segunda piel —el worker ya sabe en qué dominio está—, pero no antes:
   dos pieles que nadie pidió son dos pieles que se desincronizan.

   Y SIGUE LAS DOS APARIENCIAS, como la app. Estuvo comprometida al oscuro
   y se notaba: quien abría el enlace desde WhatsApp con el teléfono en
   claro veía algo que no se parecía a Bartelo. El claro se define en
   `:root` y el oscuro solo redefine los tokens, para que ningún color
   viva únicamente dentro de la consulta de medios. */
:root{
  --bg:#F4F5F7; --surface:#FFFFFF; --surfaceHi:#EDEEF1;
  --stroke:rgba(0,0,0,.09);
  --t1:#0B0B0D; --t2:#4D4F59; --t3:#686A73;
  /* El verde de Bartelo, hondo en claro. El de marca (#22C55E) sobre
     este fondo da 2,2:1 —ilegible, y lo que se pinta con él es el precio
     de preventa—; este da 5,0:1. Antes aquí había un violeta: estaba
     mal, Bartelo es verde y el morado es de Zenter. */
  --acento:#15803D;
  --lima:#D8F034; --limaInk:#0B0B0D;
  --sombra:0 1px 2px rgba(0,0,0,.06), 0 12px 32px -20px rgba(0,0,0,.25);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0B0B0D; --surface:#141416; --surfaceHi:#1E1E21;
    --stroke:rgba(255,255,255,.09);
    --t1:#F3F3F5; --t2:#A8A8B0; --t3:#86868E;
    /* Y aquí el de marca, que sobre el casi negro da 7,4:1. */
    --acento:#22C55E;
    --sombra:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -20px rgba(0,0,0,.8);
  }
}

body{
  margin:0; background:var(--bg); color:var(--t1);
  font-family:Figtree,'Helvetica Neue',Arial,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

/* El icono de cada fila es un emoji, no un SVG: el worker arma el HTML a
   mano y meter cinco SVG en una plantilla de texto se lee peor de lo que
   aporta. */
.fila .ico{font-size:15px;line-height:32px;text-align:center}

.app{
  min-height:100vh;
  /* Ancho de teléfono grande: la web es móvil primero, y en escritorio
     se queda como una columna centrada. */
  max-width:460px; margin:0 auto; padding:14px 14px 40px;
}
.app *{box-sizing:border-box}
.app a{color:inherit;text-decoration:none}
.app .ojo{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.app h1{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:30px;font-weight:800;
  letter-spacing:-.02em;line-height:1.05;margin:2px 0 0;color:var(--t1)}

/* --- Tarjeta: el cartel manda la forma, nada encima salvo la fecha --- */
.ev{display:block;margin-bottom:22px}
.marco{position:relative;border-radius:20px;overflow:hidden;
  border:1px solid var(--stroke);background:var(--surfaceHi);box-shadow:var(--sombra)}
.marco img{width:100%;height:auto;display:block}
/* El cuadrado de la fecha es BLANCO en las dos apariencias, igual que en
   la app: contrasta contra el cartel, no contra el fondo de la página, y
   el cartel es oscuro venga el tema que venga. */
.chip{position:absolute;top:12px;right:12px;background:#fff;border-radius:14px;width:52px;height:54px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.28)}
.chip b{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:21px;font-weight:800;color:#111}
.chip small{font-size:8.5px;font-weight:700;letter-spacing:.11em;color:rgba(0,0,0,.55);margin-top:2px}
.bajo{margin:9px 3px 0}
.bajo .n{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:17px;font-weight:800;
  letter-spacing:-.01em;color:var(--t1);line-height:1.2}
.bajo .m{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:12.5px;color:var(--t2);flex-wrap:wrap}
.gratis{font-size:9px;font-weight:800;letter-spacing:.08em;background:var(--lima);color:var(--limaInk);
  padding:3px 6px;border-radius:4px}
.punto{color:var(--t3)}

/* --- Ficha --- */
.ficha .marco{margin-bottom:20px}
.titular .ante{display:block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acento);margin-bottom:4px}
.titular .nom{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:27px;font-weight:800;
  letter-spacing:-.02em;line-height:1.08;color:var(--t1)}
.cinta{display:flex;align-items:center;gap:9px;margin:16px 0 4px;font-size:14.5px;color:var(--t2)}
.cinta .gratis{font-size:11px;padding:4px 9px;border-radius:6px}
.filas{margin:8px 0 0}
.fila{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--stroke)}
.fila .ico{width:32px;height:32px;border-radius:50%;background:var(--surfaceHi);flex:none;
  display:flex;align-items:center;justify-content:center}
.fila .ico svg{width:15px;height:15px;stroke:var(--acento);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.fila .txt{flex:1;min-width:0}
.fila .txt b{display:block;font-size:15px;font-weight:600;color:var(--t1)}
.fila .txt span{display:block;font-size:13px;color:var(--t2);margin-top:2px}
.fila .txt a{color:var(--acento);font-weight:600;font-size:13px}
.fila .accion{color:var(--acento);font-weight:600;font-size:13px;white-space:nowrap;padding-top:2px}
.botones{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.bt{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:14px;
  font-size:16px;font-weight:700}
.bt svg{width:18px;height:18px;flex:none}
/* Blanco sobre el verde en las dos: medido, 4,9:1 en claro y 6,1:1 en
   oscuro, así que no hace falta partirlo.
   Con `.app` delante A PROPÓSITO: `.app a{color:inherit}` es más específica
   que `.bt-1` a secas y le ganaba — el botón salía con la tinta negra
   heredada, no en blanco, aunque el color estuviera escrito aquí. */
.app .bt-1,.bt-1{background:var(--acento);color:#fff}
.bt-2{background:var(--surfaceHi);color:var(--t1)}
.pie{margin-top:26px;text-align:center;font-size:12px;color:var(--t3);line-height:1.5}
.volver{display:inline-block;margin-bottom:14px;font-size:13px;color:var(--t2)}

/* Precio. La lima es SOLO para «GRATIS» —es un aviso, no una marca—, así
   que un precio va en verde y con contorno: de un vistazo se distingue
   cuál de los dos es. */
.precio{font-size:9px;font-weight:800;letter-spacing:.06em;color:var(--acento);
  /* Del token, no de un color escrito a mano: al partir el acento
     por apariencia, el texto cambiaba y el fondo y el borde se quedaban
     en el #7C5CFF de antes. En claro no pegaban. */
  background:color-mix(in srgb, var(--acento) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--acento) 55%, transparent);
  padding:2px 6px;border-radius:4px}
.precios{margin:16px 0 4px}
.precios .linea{margin:0;display:flex;align-items:baseline;gap:8px}
.precios .linea b{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:26px;font-weight:800;color:var(--t1)}
.precios .linea em{font-style:normal;font-size:15px;font-weight:600;color:var(--acento)}
.precios .urge{margin:7px 0 0;font-size:13.5px;font-weight:700;color:var(--acento)}
.precios .sub{margin:4px 0 0;font-size:13.5px;color:var(--t2)}
.precios .nota{margin:6px 0 0;font-size:12px;color:var(--t3)}

/* El sitio: el plano de mesas. Los colores son los de siempre —el acento,
   las superficies y las tintas—, los mismos que usa la app para el mismo
   dibujo. La mesa libre va en superficie con borde de acento; la cogida,
   apagada. Dentro va el nombre, nunca el precio. */
.sitio{margin:22px 0 0}
.sitio .cab{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.sitio .cab h2{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:19px;font-weight:800;color:var(--t1);margin:0}
.sitio .cab span{font-size:12.5px;font-weight:500;color:var(--t2)}
.sitio .ley{display:flex;gap:14px;margin-bottom:10px;font-size:11.5px;color:var(--t2)}
.sitio .ley span{display:flex;align-items:center;gap:5px}
.sitio .ley i{width:12px;height:12px;border-radius:3px;display:inline-block}
.sitio .ley i.libre{background:var(--surface);border:1px solid color-mix(in srgb,var(--acento) 75%,transparent)}
.sitio .ley i.cogida{background:var(--surfaceHi);border:1px solid color-mix(in srgb,var(--t3) 45%,transparent)}
.sitio .plano{display:block;width:100%;height:auto;background:var(--surfaceHi);border:1px solid var(--stroke);border-radius:14px}
.sitio .elemento rect{fill:color-mix(in srgb,var(--acento) 14%,transparent);stroke:color-mix(in srgb,var(--acento) 35%,transparent);stroke-width:1;vector-effect:non-scaling-stroke}
.sitio .elemento text{fill:var(--acento);font-weight:600;text-anchor:middle;dominant-baseline:central;font-family:Figtree,sans-serif}
.sitio .mesa .forma{vector-effect:non-scaling-stroke}
.sitio .mesa.libre .forma{fill:var(--surface);stroke:color-mix(in srgb,var(--acento) 75%,transparent);stroke-width:1.5}
.sitio .mesa.cogida .forma{fill:var(--surfaceHi);stroke:color-mix(in srgb,var(--t3) 45%,transparent);stroke-width:1}
.sitio .mesa text{font-weight:700;text-anchor:middle;dominant-baseline:central;font-family:Figtree,sans-serif;pointer-events:none}
.sitio .mesa.libre text{fill:var(--t1)}
.sitio .mesa.cogida text{fill:var(--t3)}
/* La zona de toque es más grande que la mesa y NO se ve: sin relleno ni
   borde. `transparent` y no `none`, para que siga recibiendo el toque. */
.sitio .mesa .toque{fill:transparent;stroke:none;cursor:pointer}
.sitio .pista{margin:8px 0 0;font-size:12px;color:var(--t3)}

/* Lo que sale al tocar una mesa: una hoja desde abajo, como en la app. */
.hoja-fondo{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40}
.hoja{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--bg);border-radius:20px 20px 0 0;
  padding:10px 20px calc(22px + env(safe-area-inset-bottom));text-align:center;box-shadow:var(--sombra)}
.hoja .asa{display:block;width:36px;height:5px;border-radius:3px;background:var(--stroke);margin:0 auto 18px}
.hoja .nom{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:28px;font-weight:800;color:var(--t1);margin:0}
.hoja .plazas{margin:5px 0 16px;font-size:15px;font-weight:500;color:var(--t2)}
.hoja .cifra{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:26px;font-weight:800;color:var(--t1);margin:0}
.hoja .sub{margin:4px 0 16px;font-size:13px;color:var(--t2)}
.hoja .bt{margin-top:4px}