/* ====================================================================
   BASE — la hoja común de TODO el sitio (portada, taquilla, panel, puerta).
   Porte de web profesional: fondo claro, cabecera normal con menú, listas
   con fecha/lugar/precio, tarjetas con borde fino, tipografía de lectura.
   Nada de cajas oscuras ni letras de cartel: aquí manda la información.
   La portada añade inicio.css; la taquilla, nada más (todo está aquí).
   ==================================================================== */

:root {
  --sol: #F5B400; --sol-hondo: #D99E00; --fuego: #D6231F; --mar: #1B4AA6; --atardecer: #F26A1B;
  --noche: #120E2A; --tinta: #17142B; --tinta-2: #2A2547; --apagado: #625D75; --gris: #8B879A;
  --fondo: #FAFAF8; --blanco: #FFFFFF; --superficie-2: #F3F1EC; --borde: #E6E3DC; --borde-2: #D6D2C8;
  --ok: #1F9D55; --ok-fondo: #E7F6EA; --mal: #C8201C; --mal-fondo: #FDECEC; --aviso-fondo: #FFF3C4;
  --f: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --f-marca: 'Lilita One', 'Arial Rounded MT Bold', sans-serif;
  --radio: 10px; --radio-g: 14px;
  --sombra: 0 1px 2px rgba(23, 20, 43, .06), 0 8px 24px rgba(23, 20, 43, .06);
  --sombra-2: 0 2px 4px rgba(23, 20, 43, .08), 0 16px 40px rgba(23, 20, 43, .10);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--f); font-size: 1rem; line-height: 1.55; color: var(--tinta); background: var(--fondo); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--f); font-weight: 900; line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
a { color: var(--mar); text-underline-offset: 3px; }
a:hover { color: var(--tinta); }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--sol); outline-offset: 2px; border-radius: 6px; }

.contenedor { width: min(100% - 40px, 1180px); margin-inline: auto; }
.contenedor--estrecho { max-width: 900px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: 8px; background: var(--sol); color: var(--tinta); font-weight: 800; text-decoration: none; }
.saltar:focus { top: 12px; }

/* ------------------------------------------------------------ botones */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border: 1.5px solid transparent; border-radius: 8px;
  font-weight: 800; font-size: .95rem; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.boton--primario, .boton--noche { background: var(--tinta); color: var(--blanco); }
.boton--primario:hover, .boton--noche:hover { background: var(--tinta-2); color: var(--blanco); }
.boton--sol { background: var(--sol); color: var(--tinta); }
.boton--sol:hover { background: var(--sol-hondo); color: var(--tinta); }
.boton--linea { background: var(--blanco); color: var(--tinta); border-color: var(--borde-2); }
.boton--linea:hover { border-color: var(--tinta); color: var(--tinta); }
.boton--fuego { background: var(--fuego); color: var(--blanco); }
.boton--fuego:hover { background: #B31B18; color: var(--blanco); }
.boton--grande { padding: 15px 26px; font-size: 1.02rem; }
.boton--peq { padding: 8px 14px; font-size: .84rem; border-radius: 7px; }
.boton--ancho { width: 100%; }
.boton:disabled { opacity: .5; cursor: not-allowed; }

/* ------------------------------------------------------------ cabecera y pie */

.tq-cabecera { position: sticky; top: 0; z-index: 50; background: var(--blanco); border-bottom: 1px solid var(--borde); }
.tq-cabecera__fila { display: flex; align-items: center; gap: 28px; height: 70px; }
.tq-logo { display: block; line-height: 0; flex: 0 0 auto; }
.tq-logo img { width: 118px; height: auto; }
.tq-nav { display: flex; gap: 4px; }
.tq-nav a { padding: 8px 12px; border-radius: 8px; color: var(--tinta); text-decoration: none; font-weight: 700; font-size: .95rem; }
.tq-nav a:hover { background: var(--superficie-2); }
.tq-nav a.es-actual { color: var(--tinta); box-shadow: inset 0 -3px 0 var(--sol); border-radius: 8px 8px 0 0; }
.tq-cabecera__util { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tq-cabecera__util .boton--peq { padding: 9px 16px; }
.tq-menu { display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--borde-2); border-radius: 8px; background: var(--blanco); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.tq-menu span:not(.visualmente-oculto) { display: block; width: 18px; height: 2px; background: var(--tinta); border-radius: 2px; }
.tq-menu-movil { border-bottom: 1px solid var(--borde); background: var(--blanco); }
.tq-menu-movil .contenedor { display: grid; padding: 8px 0 12px; }
.tq-menu-movil a { padding: 12px 8px; text-decoration: none; color: var(--tinta); font-weight: 800; border-bottom: 1px solid var(--borde); }
.tq-menu-movil a:last-child { border-bottom: 0; }

.franja-modo { background: var(--aviso-fondo); border-bottom: 1px solid #F0DE9A; color: #5C4A00; font-size: .9rem; font-weight: 700; }
.franja-modo .contenedor { display: flex; gap: 10px; align-items: center; padding: 9px 0; }
.franja-modo b { font-weight: 900; }

.pie-tq { margin-top: 64px; padding: 40px 0 28px; background: var(--blanco); border-top: 1px solid var(--borde); color: var(--apagado); font-size: .92rem; }
.pie-tq__fila { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
.pie-tq__marca img { width: 130px; margin-bottom: 10px; }
.pie-tq h4 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: 10px; }
.pie-tq ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pie-tq a { color: var(--tinta); text-decoration: none; font-weight: 700; }
.pie-tq a:hover { text-decoration: underline; }
.pie-tq__legal { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--borde); display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .84rem; }

/* ------------------------------------------------------------ cabeza de página */

.pagina-cabeza { background: var(--blanco); border-bottom: 1px solid var(--borde); padding: 28px 0 26px; }
.migas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; font-size: .84rem; color: var(--gris); font-weight: 700; }
.migas a { color: var(--gris); text-decoration: none; }
.migas a:hover { color: var(--tinta); }
.migas li + li::before { content: '›'; margin-right: 6px; }
.pagina-cabeza h1 { margin-bottom: .25em; }
.pagina-cabeza p { margin: 0; color: var(--apagado); max-width: 62ch; }

.seccion-tq { padding: 34px 0 0; }
.seccion-tq__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.seccion-tq__cabeza h2 { margin: 0; }
.seccion-tq__cabeza a, .seccion-tq__cabeza span { font-size: .9rem; font-weight: 700; color: var(--apagado); }

/* ------------------------------------------------------------ lista de eventos */

.lista-eventos { display: grid; gap: 12px; }
.fila-evento {
  display: grid; grid-template-columns: 84px 200px 1fr auto; align-items: center; gap: 20px;
  padding: 14px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-g);
  transition: box-shadow .15s, border-color .15s;
}
.fila-evento:hover { box-shadow: var(--sombra); border-color: var(--borde-2); }
.fila-evento__fecha { display: grid; justify-items: center; align-content: center; height: 100%; min-height: 96px; padding: 10px 6px; border-radius: 10px; background: var(--superficie-2); text-align: center; }
.fila-evento__fecha b { font-size: 1.7rem; line-height: 1; font-weight: 900; }
.fila-evento__fecha span { font-size: .74rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); }
.fila-evento__fecha small { font-size: .74rem; color: var(--gris); font-weight: 700; }
.fila-evento__foto { aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--superficie-2); }
.fila-evento__foto img { width: 100%; height: 100%; object-fit: cover; }
.fila-evento__info { min-width: 0; }
.fila-evento__info h3 { margin: 0 0 4px; font-size: 1.15rem; }
.fila-evento__info h3 a { color: var(--tinta); text-decoration: none; }
.fila-evento__info h3 a:hover { text-decoration: underline; }
.fila-evento__meta { margin: 0; color: var(--apagado); font-size: .92rem; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.fila-evento__meta svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; color: var(--gris); }
.fila-evento__precio { margin: 8px 0 0; font-weight: 800; font-size: .95rem; }
.fila-evento__precio small { color: var(--apagado); font-weight: 700; margin-right: 4px; }
.fila-evento__accion { display: grid; gap: 8px; justify-items: end; }
.etiqueta { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.etiqueta--gris { background: var(--superficie-2); color: var(--apagado); }
.etiqueta--fuego { background: var(--mal-fondo); color: var(--mal); }
.etiqueta--ok { background: var(--ok-fondo); color: #145A2A; }
.etiqueta--sol { background: var(--aviso-fondo); color: #5C4A00; }
.fila-evento--pasado .fila-evento__foto { filter: saturate(.85); }
.fila-vacia { padding: 26px 20px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-g); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.fila-vacia p { margin: 0; color: var(--apagado); }
.fila-vacia strong { color: var(--tinta); }

/* ------------------------------------------------------------ ficha del evento */

.detalle { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; padding-top: 28px; }
.detalle__cartel { border-radius: var(--radio-g); overflow: hidden; border: 1px solid var(--borde); background: var(--superficie-2); margin-bottom: 22px; }
.detalle__cartel img { width: 100%; height: auto; max-height: 520px; object-fit: cover; }
.detalle h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.detalle__meta { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; color: var(--tinta); font-weight: 700; }
.detalle__meta li { display: flex; gap: 10px; align-items: flex-start; }
.detalle__meta svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; color: var(--gris); }
.detalle__meta span { color: var(--apagado); font-weight: 600; }
.detalle__meta a { font-weight: 700; }
.detalle__texto { color: var(--tinta); white-space: pre-line; max-width: 66ch; }
.detalle__aviso { display: inline-block; padding: 8px 12px; border-radius: 8px; background: var(--aviso-fondo); color: #5C4A00; font-weight: 800; font-size: .9rem; margin: 0 0 18px; }

.compra { position: sticky; top: 86px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-g); box-shadow: var(--sombra); }
.compra__cabeza { padding: 16px 20px; border-bottom: 1px solid var(--borde); display: flex; align-items: baseline; justify-content: space-between; }
.compra__cabeza h2 { margin: 0; font-size: 1.1rem; }
.compra__cabeza span { font-size: .84rem; color: var(--apagado); font-weight: 700; }
.compra__cuerpo { padding: 6px 20px 20px; display: grid; gap: 16px; }

.tarifas { list-style: none; margin: 0; padding: 0; display: grid; }
.tarifa { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 14px; padding: 14px 0; border-bottom: 1px solid var(--borde); }
.tarifa:last-child { border-bottom: 0; }
.tarifa--agotada { opacity: .55; }
.tarifa__nombre { font-weight: 800; }
.tarifa__precio { display: block; font-weight: 800; color: var(--tinta); margin-top: 2px; }
.tarifa__desc { display: block; font-size: .86rem; color: var(--apagado); font-weight: 600; }
.tarifa__quedan { display: block; font-size: .78rem; font-weight: 800; color: var(--mal); margin-top: 2px; }
.tarifa__agotada { font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--mal); }
.contador { display: inline-flex; align-items: center; border: 1.5px solid var(--borde-2); border-radius: 8px; background: var(--blanco); }
.contador button { width: 38px; height: 38px; border: 0; background: transparent; color: var(--tinta); font-size: 1.25rem; font-weight: 800; cursor: pointer; line-height: 1; }
.contador button:hover { background: var(--superficie-2); }
.contador button:disabled { opacity: .3; cursor: default; }
.contador output { min-width: 32px; text-align: center; font-weight: 900; font-variant-numeric: tabular-nums; }

.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo { display: grid; gap: 5px; }
.campo--ancho { grid-column: 1 / -1; }
.campo label, .campo > span { font-size: .82rem; font-weight: 800; color: var(--tinta); }
.campo input, .campo textarea, .campo select {
  width: 100%; padding: 11px 12px; border-radius: 8px; border: 1.5px solid var(--borde-2);
  background: var(--blanco); color: var(--tinta); font-weight: 600;
}
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: 3px solid rgba(245, 180, 0, .55); outline-offset: 0; border-color: var(--tinta); }
.campo textarea { min-height: 110px; resize: vertical; }
.campo--marca { display: flex; align-items: center; gap: 10px; }
.campo--marca input { width: 20px; height: 20px; accent-color: var(--tinta); }
.campo--marca span { font-size: .95rem; font-weight: 700; }

.resumen { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--borde); font-size: .95rem; }
.resumen div { display: flex; justify-content: space-between; gap: 12px; color: var(--apagado); font-weight: 700; }
.resumen div.resumen__total { color: var(--tinta); font-weight: 900; font-size: 1.15rem; padding-top: 6px; }
.compra__nota { margin: 0; font-size: .82rem; color: var(--apagado); display: flex; gap: 8px; align-items: flex-start; }
.compra__nota svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--ok); }
.mensaje { margin: 0; font-weight: 800; font-size: .92rem; }
.mensaje--error { color: var(--mal); }

/* ------------------------------------------------------------ cómo funciona y preguntas */

.como { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.como div { padding: 20px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-g); }
.como svg { width: 26px; height: 26px; color: var(--tinta); margin-bottom: 10px; }
.como h3 { font-size: 1rem; margin-bottom: 4px; }
.como p { margin: 0; color: var(--apagado); font-size: .92rem; }

.faq { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-g); }
.faq details { border-bottom: 1px solid var(--borde); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; padding: 16px 20px; font-weight: 800; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.3rem; color: var(--gris); font-weight: 400; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0; padding: 0 20px 18px; color: var(--apagado); max-width: 70ch; }

/* ------------------------------------------------------------ avisos, pastillas, varios */

.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 10px; font-weight: 700; line-height: 1.45; margin: 0 0 18px; font-size: .95rem; border: 1px solid transparent; }
.aviso--prueba { background: var(--aviso-fondo); border-color: #F0DE9A; color: #5C4A00; }
.aviso--info { background: var(--blanco); border-color: var(--borde); color: var(--apagado); }
.aviso--ok { background: var(--ok-fondo); border-color: #BFE5C8; color: #145A2A; }
.aviso--error { background: var(--mal-fondo); border-color: #F5C2C0; color: #8E1512; }
.aviso b { font-weight: 900; }

.pastilla { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: .74rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.pastilla--demo { background: var(--mal-fondo); color: var(--mal); }
.pastilla--prueba { background: var(--aviso-fondo); color: #5C4A00; }
.pastilla--real { background: var(--ok-fondo); color: #145A2A; }
.pastilla--gris { background: var(--superficie-2); color: var(--apagado); }
.pastilla--ok { background: var(--ok-fondo); color: #145A2A; }
.pastilla--mal { background: var(--mal-fondo); color: var(--mal); }

.cargando { display: inline-block; width: 20px; height: 20px; border: 3px solid var(--borde); border-top-color: var(--tinta); border-radius: 50%; animation: gira .8s linear infinite; vertical-align: middle; }
@keyframes gira { to { transform: rotate(360deg); } }
.ayuda { margin: 0; font-size: .86rem; color: var(--apagado); }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.vacio { padding: 26px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-g); display: grid; gap: 12px; justify-items: start; }
.vacio p { margin: 0; color: var(--apagado); }

/* ------------------------------------------------------------ gracias y boleto */

.confirmacion { display: flex; gap: 16px; align-items: flex-start; padding: 28px 0 8px; }
.confirmacion__icono { width: 46px; height: 46px; border-radius: 50%; background: var(--ok-fondo); color: var(--ok); display: grid; place-items: center; flex: 0 0 auto; }
.confirmacion__icono svg { width: 24px; height: 24px; }
.confirmacion h1 { margin-bottom: .2em; }
.confirmacion p { margin: 0; color: var(--apagado); }
.ficha-evento { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; padding: 14px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-g); margin: 18px 0; }
.ficha-evento img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; width: 100%; }
.ficha-evento h2 { margin: 0 0 2px; font-size: 1.1rem; }
.ficha-evento p { margin: 0; color: var(--apagado); font-size: .92rem; }

.boletos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 18px; }
.boleto { position: relative; display: grid; gap: 6px; justify-items: center; padding: 20px 16px 18px; border-radius: var(--radio-g); background: var(--blanco); border: 1px solid var(--borde); text-align: center; overflow: hidden; }
.boleto::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--sol) 0 50%, var(--mar) 50% 75%, var(--fuego) 75% 100%); }
.boleto__num { font-size: .74rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); }
.boleto__qr { width: 200px; height: 200px; image-rendering: pixelated; }
.boleto__codigo { font-weight: 900; font-size: 1.25rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.boleto__tarifa { font-weight: 800; color: var(--apagado); font-size: .92rem; }
.boleto__estado { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.boleto__estado--valida { background: var(--ok-fondo); color: #145A2A; }
.boleto__estado--usada { background: var(--mal-fondo); color: #8E1512; }
.boleto__estado--anulada { background: var(--superficie-2); color: var(--apagado); }
.boleto__prueba { position: absolute; right: -34px; top: 18px; transform: rotate(35deg); background: var(--fuego); color: var(--blanco); font-size: .66rem; font-weight: 900; letter-spacing: .12em; padding: 4px 44px; text-transform: uppercase; }
.boleto a { font-size: .9rem; font-weight: 800; }
.boleto-grande { max-width: 420px; margin: 28px auto 0; padding-top: 26px; }
.boleto-grande .boleto__qr { width: 264px; height: 264px; }
.boleto-grande__evento { display: grid; gap: 3px; padding: 14px 0 2px; border-top: 1px dashed var(--borde-2); width: 100%; margin-top: 6px; }
.boleto-grande__evento strong { font-size: 1.15rem; }
.boleto-grande__evento span { color: var(--apagado); font-weight: 600; font-size: .92rem; }
.boleto-grande__comprador { font-size: .86rem; color: var(--apagado); }

/* ------------------------------------------------------------ panel */

.entrar { max-width: 420px; margin: 40px auto; display: grid; gap: 14px; padding: 28px; border-radius: var(--radio-g); background: var(--blanco); border: 1px solid var(--borde); box-shadow: var(--sombra); }
.entrar h1 { margin: 0; font-size: 1.5rem; }
.entrar p { margin: 0; color: var(--apagado); }

.panel { display: grid; gap: 20px; padding-top: 24px; }
.panel__barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.panel__barra h1 { margin: 0; }
.panel__barra .boton { margin-left: auto; }
.pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--borde); }
.pestanas button { padding: 10px 14px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: transparent; color: var(--apagado); font-weight: 800; cursor: pointer; }
.pestanas button:hover { color: var(--tinta); }
.pestanas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--sol); }

.panel-lista { display: grid; gap: 12px; }
.ficha { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: center; padding: 14px; border-radius: var(--radio-g); background: var(--blanco); border: 1px solid var(--borde); }
.ficha__img { width: 96px; height: 96px; border-radius: 8px; object-fit: cover; background: var(--superficie-2); }
.ficha__img--vacia { display: grid; place-items: center; font-family: var(--f-marca); color: var(--tinta); font-size: 1.5rem; background: linear-gradient(160deg, var(--sol), var(--atardecer)); }
.ficha h3 { margin: 0 0 2px; }
.ficha p { margin: 0; color: var(--apagado); font-size: .9rem; }
.ficha__datos { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: .86rem; font-weight: 700; color: var(--apagado); align-items: center; }
.ficha__datos b { color: var(--tinta); font-weight: 900; }
.ficha__botones { display: grid; gap: 6px; }

.panel-form { display: grid; gap: 14px; padding: 22px; border-radius: var(--radio-g); background: var(--blanco); border: 1px solid var(--borde); }
.panel-form h2 { margin: 0; }
.panel-form h3 { margin: 8px 0 0; font-size: 1rem; }
.fila-tarifa { display: grid; grid-template-columns: 1.4fr .8fr .7fr .7fr auto auto; gap: 8px; align-items: end; padding: 10px; border-radius: 10px; background: var(--superficie-2); }
.fila-tarifa .campo label { font-size: .74rem; }
.fila-tarifa .campo--marca { padding-bottom: 12px; }
.quitar { width: 42px; height: 44px; border-radius: 8px; border: 1px solid var(--borde-2); background: var(--blanco); color: var(--apagado); cursor: pointer; font-size: 1.2rem; }
.quitar:hover { color: var(--mal); border-color: var(--mal); }

.tabla-envoltura { overflow-x: auto; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--blanco); }
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 760px; }
.tabla th, .tabla td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla th { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); background: var(--superficie-2); }
.tabla td small { color: var(--apagado); display: block; }
.tabla .codigo { display: inline-block; margin: 2px 4px 2px 0; padding: 3px 8px; border-radius: 6px; background: var(--superficie-2); border: 1px solid var(--borde); font-weight: 800; font-size: .8rem; letter-spacing: .04em; cursor: pointer; }
.tabla .codigo--usada { text-decoration: line-through; opacity: .6; }
.tabla .codigo--anulada { background: var(--mal-fondo); border-color: #F5C2C0; opacity: .8; }
.tabla button { font-size: .78rem; font-weight: 800; padding: 6px 10px; border-radius: 7px; border: 1px solid var(--borde-2); background: var(--blanco); color: var(--tinta); cursor: pointer; margin: 2px 4px 2px 0; }
.tabla button:hover { border-color: var(--tinta); }
.estado--pagado { color: var(--ok); font-weight: 900; }
.estado--pendiente { color: #9A7300; font-weight: 900; }
.estado--cancelado { color: var(--mal); font-weight: 900; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.filtros .campo { min-width: 200px; }

/* ------------------------------------------------------------ puerta (oscura: se usa de noche) */

.tema-oscuro { background: var(--noche); color: var(--blanco); }
.tema-oscuro .tq-cabecera { background: #1B1540; border-color: rgba(255, 255, 255, .12); }
.tema-oscuro .tq-cabecera__util span { color: var(--blanco); font-weight: 800; }
.tema-oscuro .entrar { background: #1B1540; border-color: rgba(255, 255, 255, .12); box-shadow: none; }
.tema-oscuro .entrar p, .tema-oscuro .ayuda { color: #B9B3D1; }
.tema-oscuro .campo label { color: var(--blanco); }
.tema-oscuro .campo input { background: rgba(255, 255, 255, .06); color: var(--blanco); border-color: rgba(255, 255, 255, .2); }
.tema-oscuro .boton--linea { background: transparent; color: var(--blanco); border-color: rgba(255, 255, 255, .3); }
.puerta { display: grid; gap: 14px; max-width: 520px; margin: 20px auto 40px; }
.puerta__camara { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radio-g); overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, .12); }
.puerta__camara video { width: 100%; height: 100%; object-fit: cover; }
.puerta__marco { position: absolute; inset: 14%; border: 3px solid rgba(245, 180, 0, .85); border-radius: 16px; pointer-events: none; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.puerta__sin-camara { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: #B9B3D1; }
.resultado { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 24px 18px; border-radius: var(--radio-g); min-height: 140px; align-content: center; background: #1B1540; border: 1px solid rgba(255, 255, 255, .12); transition: background-color .2s; }
.resultado__titulo { font-size: clamp(1.8rem, 7vw, 2.6rem); font-weight: 900; line-height: 1; letter-spacing: .02em; }
.resultado__detalle { color: #B9B3D1; font-weight: 700; }
.resultado--ok { background: var(--ok); color: #fff; border-color: transparent; }
.resultado--mal { background: var(--fuego); color: #fff; border-color: transparent; }
.resultado--aviso { background: var(--sol); color: var(--tinta); border-color: transparent; }
.resultado--ok .resultado__detalle, .resultado--mal .resultado__detalle { color: rgba(255, 255, 255, .88); }
.resultado--aviso .resultado__detalle { color: rgba(23, 20, 43, .8); }
.puerta__contador { text-align: center; color: #B9B3D1; font-weight: 800; margin: 0; }
.puerta__contador b { color: var(--sol); font-size: 1.4rem; }
.puerta__manual { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.puerta__manual input { text-transform: uppercase; letter-spacing: .08em; }

/* ------------------------------------------------------------ móvil */

@media (max-width: 960px) {
  .detalle { grid-template-columns: 1fr; }
  .compra { position: static; }
  .fila-evento { grid-template-columns: 72px 1fr; gap: 12px 14px; }
  .fila-evento__foto { grid-column: 1 / -1; order: -1; }
  .fila-evento__accion { grid-column: 1 / -1; justify-items: stretch; }
  .fila-evento__accion .boton { width: 100%; }
  .como { grid-template-columns: 1fr; }
  .pie-tq__fila { grid-template-columns: 1fr; gap: 20px; }
  .ficha { grid-template-columns: 72px 1fr; }
  .ficha__img { width: 72px; height: 72px; }
  .ficha__botones { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .fila-tarifa { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .tq-nav, .tq-cabecera__util { display: none; }
  .tq-menu { display: flex; }
  .tq-cabecera__fila { height: 62px; }
  .tq-logo img { width: 104px; }
  .contenedor { width: min(100% - 32px, 1180px); }
}
@media (max-width: 560px) {
  .campos { grid-template-columns: 1fr; }
  .boletos { grid-template-columns: 1fr; }
  .ficha-evento { grid-template-columns: 1fr; }
  .pestanas { overflow-x: auto; }
}

@media print {
  .tq-cabecera, .tq-menu-movil, .franja-modo, .acciones, .aviso--info, .pie-tq { display: none !important; }
  body { background: #fff; }
  .boleto { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) { .cargando { animation: none; } html { scroll-behavior: auto; } }

/* ------------------------------------------------------------ piezas comunes de contenido */

.ojal { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .76rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); }
.bandera { width: 22px; height: 14px; border-radius: 3px; flex: 0 0 auto; background: linear-gradient(180deg, var(--sol) 0 50%, var(--mar) 50% 75%, var(--fuego) 75% 100%); }
.punto-vivo { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--gris); flex: 0 0 auto; }
.punto-vivo.es-vivo { background: var(--fuego); box-shadow: 0 0 0 0 rgba(214, 35, 31, .5); animation: late 1.4s ease-out infinite; }
@keyframes late { 0% { box-shadow: 0 0 0 0 rgba(214, 35, 31, .55); } 100% { box-shadow: 0 0 0 9px rgba(214, 35, 31, 0); } }

/* Aparecer al bajar: un desplazamiento corto y suave, nada más (solo con JS). */
html.js [data-aparece] { opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease; }
html.js [data-aparece].es-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js [data-aparece] { opacity: 1; transform: none; transition: none; } .punto-vivo.es-vivo { animation: none; } }