/* ============================================================================
   eventos.css — hoja única de la app de tarjeta de eventos.
   Identidad heredada de 07-web/v3: petróleo/teal/naranja, Cinzel + Space Grotesk,
   chaflán de 10px. Mobile-first: el diseño base es de móvil y solo hay un
   punto de ruptura hacia arriba (720px), que es donde entra el escritorio.
   ========================================================================== */

/* ---- Tipografía autohospedada (RGPD: cero peticiones a Google) -------------
   Los .woff2 son copia literal de 07-web/v3/assets/fonts/. Hay copia y no
   referencia porque esto se despliega como proyecto de Pages aparte, en otro
   dominio: no hay ruta relativa que llegue hasta v3. Rutas relativas A ESTA
   HOJA, o sea ../fonts/. */
@font-face{
  font-family:'Cinzel';font-style:normal;font-weight:700 900;font-display:swap;
  src:url('../fonts/cinzel-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Cinzel';font-style:normal;font-weight:700 900;font-display:swap;
  src:url('../fonts/cinzel-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --abismo:#04161f;
  --petroleo:#072c3c;
  --panel:#0a3547;
  --panel-2:#0d3d52;
  --linea:#155067;
  --hueso:#f2ead9;
  --niebla:#9db6bd;
  --teal:#38b0b0;
  --teal-claro:#7fc9cc;
  --naranja:#f29200;
  --naranja-vivo:#ffa81f;
  --tinta-btn:#04161f;
  --peligro:#e2544a;
  --ok:#5fc98a;
  --radius:6px;
  --chamfer:polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  --font-display:'Cinzel','Times New Roman',serif;
  --font-body:'Space Grotesk',system-ui,sans-serif;
  /* escala de z fija: nada de z-index inventados por ahí */
  --z-base:1; --z-flotante:20; --z-cabecera:30; --z-hoja:40; --z-aviso:50;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

body{
  min-height:100dvh;
  background:var(--abismo);
  /* halo tenue arriba: da profundidad sin cargar la página de imágenes */
  background-image:radial-gradient(120% 60% at 50% 0%, rgba(56,176,176,.10) 0%, transparent 62%);
  background-repeat:no-repeat;
  color:var(--hueso);
  font-family:var(--font-body);
  font-size:16px;line-height:1.55;
  padding:0 16px calc(28px + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:var(--teal-claro)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--teal);outline-offset:2px;border-radius:2px;
}

.envoltorio{width:100%;max-width:520px;margin:0 auto}
.oculto{display:none !important}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- cabecera ------------------------------------------------------------ */
.cab{
  display:flex;align-items:center;gap:12px;
  padding:18px 0 14px;
}
.cab img{width:38px;height:38px;flex:none}
.cab-txt{min-width:0}
.cab-marca{
  font-family:var(--font-body);font-size:.66rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
}
.cab-evento{
  font-family:var(--font-display);font-weight:900;font-size:1.16rem;
  line-height:1.15;color:var(--hueso);text-wrap:balance;
}
.cab-fechas{font-size:.76rem;color:var(--niebla)}

/* píldora de modo demo */
.demo-pill{
  display:inline-flex;align-items:center;gap:7px;
  margin-left:auto;flex:none;
  padding:5px 11px;border-radius:999px;
  background:rgba(242,146,0,.14);border:1px solid rgba(242,146,0,.5);
  color:var(--naranja-vivo);
  font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
.demo-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--naranja-vivo)}

/* ---- tarjetones ---------------------------------------------------------- */
.panel{
  background:var(--panel);
  border:1px solid var(--linea);
  clip-path:var(--chamfer);
  padding:20px 18px;
  margin-bottom:14px;
}
.panel-titulo{
  font-family:var(--font-display);font-weight:700;font-size:.94rem;
  letter-spacing:.04em;color:var(--teal-claro);
  margin-bottom:12px;
}

/* ---- formularios --------------------------------------------------------- */
.campo{margin-bottom:14px}
.campo label{display:block;font-size:.8rem;font-weight:700;margin-bottom:6px}
.campo input[type=email],.campo input[type=password],.campo input[type=text]{
  width:100%;min-height:48px;
  padding:11px 13px;
  background:var(--abismo);color:var(--hueso);
  border:1px solid var(--linea);border-radius:var(--radius);
  font-family:var(--font-body);font-size:1rem;
}
.campo input::placeholder{color:#6f8b95}
.campo input[aria-invalid=true]{border-color:var(--peligro)}
/* Los textos menudos llevan correos y URLs sin espacios: a 320 px se salen del
   tarjetón si no se les deja partir por donde sea. */
.pista{font-size:.72rem;color:var(--niebla);text-wrap:pretty;overflow-wrap:anywhere}
.campo .pista{margin-top:5px}

.casilla{
  display:flex;gap:11px;align-items:flex-start;
  margin-bottom:12px;font-size:.82rem;line-height:1.45;
}
.casilla input{
  flex:none;width:22px;height:22px;margin-top:1px;
  accent-color:var(--teal);
}
.casilla a{text-decoration:underline}

.error{
  display:flex;gap:8px;align-items:flex-start;
  margin:10px 0;padding:9px 12px;
  background:rgba(226,84,74,.12);border-left:3px solid var(--peligro);
  color:#ffb9b3;font-size:.82rem;
}

/* ---- botones ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 20px;
  border:0;border-radius:var(--radius);cursor:pointer;
  font-family:var(--font-body);font-size:.92rem;font-weight:700;line-height:1;
  transition:transform .15s ease-out, box-shadow .15s ease-out, background .15s ease-out;
}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:not(:disabled):hover{transform:translateY(-1px)}
.btn-principal{background:var(--naranja);color:var(--tinta-btn);width:100%}
.btn-principal:not(:disabled):hover{background:var(--naranja-vivo);box-shadow:0 4px 16px rgba(242,146,0,.32)}
.btn-fantasma{background:transparent;color:var(--teal-claro);border:1px solid var(--linea)}
.btn-fantasma:not(:disabled):hover{background:var(--panel-2)}
.btn-peligro{background:transparent;color:#ffb9b3;border:1px solid rgba(226,84,74,.5)}
.btn-peligro:not(:disabled):hover{background:rgba(226,84,74,.14)}
.btn-mini{min-height:40px;padding:9px 14px;font-size:.8rem}

.enlace-suave{
  display:inline-block;margin-top:4px;
  background:none;border:0;padding:6px 0;cursor:pointer;
  font-family:var(--font-body);font-size:.82rem;
  color:var(--teal-claro);text-decoration:underline;
}

/* ---- QR ------------------------------------------------------------------ */
.qr-caja{
  background:var(--hueso);
  padding:14px;border-radius:var(--radius);
  width:min(258px,72vw);margin:0 auto;
}
.qr-caja svg{width:100%;height:auto}
.codigo{
  margin-top:14px;text-align:center;
  font-family:var(--font-display);font-weight:900;
  font-size:1.86rem;letter-spacing:.14em;
  color:var(--naranja-vivo);
  font-variant-numeric:tabular-nums;
}
/* La nota va pegada al QR y el pie al código: cada explicación debajo de la
   cosa que explica, sin que se lean como un bloque de dos líneas sueltas. */
.qr-nota{
  margin:12px auto 0;max-width:34ch;
  text-align:center;font-size:.78rem;color:var(--niebla);text-wrap:pretty;
}
.codigo-pie{text-align:center;font-size:.74rem;color:var(--niebla);margin-top:2px}

/* ---- progreso ------------------------------------------------------------ */
.marcadores{
  display:grid;grid-template-columns:repeat(3,1fr);gap:9px;
  margin-bottom:14px;
}
.marcador{
  background:var(--abismo);border:1px solid var(--linea);border-radius:var(--radius);
  padding:11px 8px;text-align:center;
}
.marcador b{
  display:block;font-family:var(--font-display);font-weight:900;font-size:1.5rem;
  color:var(--teal-claro);font-variant-numeric:tabular-nums;line-height:1.1;
}
.marcador span{font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;color:var(--niebla)}

/* pista de hitos: los 10 pasos de la tirada */
.pista-hitos{display:flex;gap:5px;margin:4px 0 10px}
.paso{
  flex:1;height:8px;border-radius:2px;
  background:var(--abismo);border:1px solid var(--linea);
}
.paso.hecho{background:var(--teal);border-color:var(--teal)}
.paso.hito{border-color:var(--naranja)}
.paso.hito.hecho{background:var(--naranja);border-color:var(--naranja)}
.leyenda-hitos{font-size:.72rem;color:var(--niebla)}

/* ---- listas de premios y pasos ------------------------------------------- */
.lista{list-style:none;display:grid;gap:10px}
.lista li{display:flex;gap:11px;align-items:flex-start;font-size:.85rem;line-height:1.45}
.num{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--teal);color:var(--abismo);
  font-weight:700;font-size:.8rem;
}
.lista li b{display:block;font-size:.86rem}
.lista li p{color:var(--niebla);font-size:.82rem;text-wrap:pretty}

.premio{
  display:flex;gap:10px;align-items:center;
  padding:9px 11px;border-radius:var(--radius);
  background:var(--abismo);border:1px solid var(--linea);
  font-size:.82rem;
}
.premio .etiq{
  flex:none;min-width:48px;text-align:center;
  padding:3px 7px;border-radius:3px;
  font-size:.64rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
}
.etiq-sobre{background:rgba(56,176,176,.2);color:var(--teal-claro)}
.etiq-gar{background:rgba(242,146,0,.18);color:var(--naranja-vivo)}
.etiq-exc{background:rgba(163,123,255,.2);color:#c3a8ff}
.premio.conseguido{border-color:var(--teal)}
.premio.tomado{opacity:.5}
.premio span:last-child{min-width:0;text-wrap:pretty}

/* ---- redes --------------------------------------------------------------- */
.redes{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.redes a{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  min-height:64px;justify-content:center;
  padding:10px 6px;border-radius:var(--radius);
  background:var(--abismo);border:1px solid var(--linea);
  color:var(--hueso);text-decoration:none;
  font-size:.72rem;font-weight:700;
  transition:border-color .15s, background .15s;
}
.redes a:hover{background:var(--panel-2);border-color:var(--teal)}
.redes svg{width:21px;height:21px;fill:var(--teal-claro)}

/* ---- detalles plegables --------------------------------------------------
   UN solo componente para todo lo que se pliega: las preguntas del pie y las
   secciones «Cómo funciona» y «Premios». El mecanismo, el teclado y el estado
   expandido los pone el navegador (<details>/<summary>); esto solo le da forma.
   Las dos variantes cambian la tipografía y el sitio, nunca el mecanismo. */
summary{
  cursor:pointer;list-style:none;
  font-size:.85rem;font-weight:700;color:var(--teal-claro);
  display:flex;align-items:center;gap:8px;min-height:32px;
}
summary::-webkit-details-marker{display:none}
summary::after{content:'▾';margin-left:auto;transition:transform .15s}
details[open] summary::after{transform:rotate(180deg)}

/* variante A — preguntas apiladas dentro de un panel: la línea las separa */
.faq details{border-top:1px solid var(--linea);padding-top:12px;margin-top:4px}
.faq details p{font-size:.82rem;color:var(--niebla);margin-top:8px;text-wrap:pretty}

/* variante B — el <details> ES el panel y el resumen hace de título. El texto
   de estado cae siempre bajo el título (flex-basis:100%): a 320 px no cabe al
   lado, y que cambie de sitio según el ancho se lee peor que fijarlo abajo. */
summary.panel-titulo{margin-bottom:0;flex-wrap:wrap}
details[open] > summary.panel-titulo{margin-bottom:12px}
.resumen{
  order:1;flex-basis:100%;
  font-family:var(--font-body);font-weight:400;font-size:.76rem;letter-spacing:0;
  color:var(--niebla);text-wrap:pretty;
}
details[open] .resumen{display:none}

/* ---- pie ----------------------------------------------------------------- */
.pie{
  margin-top:18px;padding-top:14px;
  border-top:1px solid var(--linea);
  font-size:.72rem;color:var(--niebla);text-align:center;text-wrap:pretty;
}
.pie a{color:var(--niebla);text-decoration:underline}
.aviso-borrador{
  display:block;margin-top:8px;
  color:var(--naranja);font-size:.68rem;
}

/* ============================================================================
   STAFF
   ========================================================================== */
.staff-barra{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 0 10px;
}
.staff-barra .quien{font-size:.74rem;color:var(--niebla);margin-left:auto}

.contadores{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;
}
.contadores .marcador b{font-size:1.24rem}

.buscador{position:relative;margin-bottom:12px}
.buscador input{width:100%;min-height:46px;padding:10px 13px;background:var(--abismo);color:var(--hueso);border:1px solid var(--linea);border-radius:var(--radius);font-family:var(--font-body);font-size:1rem}

.tabla{list-style:none;display:grid;gap:8px}
.fila{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 12px;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--linea);border-radius:var(--radius);
  color:inherit;font-family:var(--font-body);font-size:.86rem;
  transition:border-color .15s, background .15s;
}
.fila:hover{border-color:var(--teal);background:var(--panel-2)}
.fila-cod{font-family:var(--font-display);font-weight:900;color:var(--naranja-vivo);letter-spacing:.06em;flex:none}
.fila-mail{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--niebla);font-size:.78rem}
.fila-num{flex:none;font-variant-numeric:tabular-nums;font-size:.78rem;color:var(--niebla)}
.fila-num b{color:var(--teal-claro)}
.vacio{padding:24px 12px;text-align:center;color:var(--niebla);font-size:.85rem}

/* hoja de acciones sobre una tarjeta */
dialog.hoja{
  margin:auto;                       /* el reset *{margin:0} mata el centrado de serie */
  width:min(94vw,460px);max-height:88vh;overflow-y:auto;
  padding:22px 18px calc(22px + env(safe-area-inset-bottom));
  background-color:var(--panel);
  background-image:linear-gradient(90deg,var(--naranja),var(--teal));
  background-repeat:no-repeat;background-size:100% 4px;background-position:top left;
  border:1px solid rgba(56,176,176,.45);border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  color:var(--hueso);font-family:var(--font-body);
  opacity:1;transform:none;
  transition:opacity .18s ease-out, transform .18s ease-out;
}
@starting-style{ dialog.hoja[open]{opacity:0;transform:scale(.96)} }
dialog.hoja::backdrop{background:rgba(4,22,31,.72)}
@supports (backdrop-filter:blur(3px)){ dialog.hoja::backdrop{backdrop-filter:blur(3px)} }
@media (prefers-reduced-motion:reduce){ dialog.hoja{transition:none} }

.hoja-cab{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.hoja-cab .fila-cod{font-size:1.3rem}
.hoja-cab .fila-mail{white-space:normal;overflow-visible}
.hoja-x{
  flex:none;margin-left:auto;width:36px;height:36px;
  background:none;border:1px solid var(--linea);border-radius:var(--radius);
  color:var(--hueso);cursor:pointer;font-size:1rem;line-height:1;
}
.hoja-x:hover{background:var(--panel-2)}
.acciones{display:grid;gap:9px;margin-top:14px}
.acciones .btn{width:100%}

.aviso{
  display:flex;gap:9px;align-items:center;
  margin:12px 0;padding:11px 13px;border-radius:var(--radius);
  background:rgba(242,146,0,.14);border:1px solid rgba(242,146,0,.45);
  color:var(--naranja-vivo);font-size:.85rem;font-weight:700;text-wrap:pretty;
}
.aviso-ok{background:rgba(95,201,138,.13);border-color:rgba(95,201,138,.45);color:#a9e6c2}

/* zona del escáner.
   OJO: nada de esconder el visor con :empty. html5-qrcode mide el contenedor al
   montar el vídeo; con display:none mide 0 y sale el fallo del móvil (cámara
   encendida, visor invisible). La visibilidad la lleva JS con .oculto sobre
   #zona-lector, que se quita ANTES de arrancar la cámara. */
#zona-lector{position:relative;margin-bottom:12px}
#lector{
  width:100%;min-height:280px;
  border-radius:var(--radius);overflow:hidden;background:#000;
}
/* html5-qrcode pone medidas en línea al vídeo; se fuerzan las nuestras para
   que llene el ancho a 390 px y no dependa de lo que midió al montar */
#lector video{display:block;width:100% !important;height:auto !important;min-height:280px;object-fit:cover}
.lector-x{position:absolute;top:10px;right:10px;z-index:var(--z-flotante);background:rgba(4,22,31,.82)}

/* últimas acciones en la hoja de staff */
.ultimas{margin-top:14px;font-size:.8rem;color:var(--niebla)}
.ultimas-titulo{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.ultimas-linea{padding:2px 0;font-variant-numeric:tabular-nums}
.ultimas-linea s{opacity:.6}
.ultimas .enlace-suave:disabled{opacity:.45;cursor:default;text-decoration:none}

@media (min-width:720px){
  body{padding-bottom:40px}
  .envoltorio{max-width:560px}
  .envoltorio.ancho{max-width:840px}
  .cab-evento{font-size:1.35rem}
  .panel{padding:24px 22px}
  .contadores{grid-template-columns:repeat(6,1fr)}
}