/* =====================================================================
   SONORA TICKETS — Estilo "oscuro de concierto" con azul eléctrico
   ---------------------------------------------------------------------
   Todos los colores están aquí arriba como "variables" (--nombre).
   Si cambias uno aquí, cambia en toda la página.
   ===================================================================== */

/* Letra "Outfit" de Google Fonts (se descarga de internet). */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  --fondo: #06070d;              /* casi negro, como un escenario apagado */
  --superficie: #0f1220;         /* tarjetas y cajas */
  --superficie-2: #161a2c;       /* cosas dentro de las cajas */
  --borde: rgba(255, 255, 255, .08);
  --borde-fuerte: rgba(255, 255, 255, .16);
  --texto: #eef1ff;
  --suave: #8f98b8;

  --azul: #2f6bff;               /* color principal */
  --cian: #18c8ff;               /* segundo color del degradado */
  --degradado: linear-gradient(135deg, var(--azul), var(--cian));
  --brillo: 0 0 0 1px rgba(47, 107, 255, .5), 0 8px 30px rgba(47, 107, 255, .35);

  --exito: #2fd48a;
  --peligro: #ff4d6a;
  --alerta: #ffb547;

  --radio: 16px;
  --letra: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;            /* casillas y barras de desplazamiento en modo oscuro */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--letra);
  color: var(--texto);
  line-height: 1.55;
  background-color: var(--fondo);
  /* "Luces de escenario": dos brillos suaves de color en el fondo */
  background-image:
    radial-gradient(900px 500px at 10% -10%, rgba(47, 107, 255, .22), transparent 60%),
    radial-gradient(700px 450px at 95% 0%, rgba(24, 200, 255, .12), transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
}

a { color: var(--cian); }
a:hover { color: #7fdcff; }

/* Contorno visible cuando se navega con el teclado (accesibilidad). */
:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; border-radius: 6px; }

.contenido { max-width: 1120px; margin: 0 auto; }
main.contenido { padding: 2rem 1.25rem 4rem; }

/* ---------- Encabezado (barra de arriba, siempre visible) ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(6, 7, 13, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
  padding: .85rem 1.25rem;
}
header .contenido { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
header h1 { margin: 0 auto 0 0; font-size: 1.35rem; font-weight: 800; letter-spacing: .04em; }
header a { color: var(--texto); text-decoration: none; }
header a:hover { color: var(--texto); }

/* Logo grande, solo (sin el texto "SONORA TICKETS" al lado: ese texto queda oculto, solo para lectores de pantalla).
   Sin logo subido: la nota ♪ en un cuadro azul. Con logo subido (Panel → Diseño): se ve completo, cuadrado u horizontal. */
.logo { display: inline-flex; align-items: center; gap: .55rem; line-height: 0; }
.logo-icono {
  width: 3.5rem; height: 3.5rem;
  display: inline-grid; place-items: center;
  border-radius: 14px;
  background: var(--degradado);
  box-shadow: 0 0 22px rgba(47, 107, 255, .55);
  font-size: 1.75rem; line-height: 1;
  transition: transform .2s, filter .2s;
}
.logo:hover .logo-icono { transform: scale(1.04); filter: brightness(1.08); }
.logo .degradado { line-height: 1.2; } /* la palabra PORTERÍA en la pantalla de la portería */
.logo-icono.con-imagen { width: auto; height: 3.5rem; max-width: 15rem; border-radius: 0; }
.logo-icono.con-imagen img { width: auto; height: 3.5rem; max-width: 15rem; object-fit: contain; }
/* Texto que no se ve pero que leen los lectores de pantalla y los buscadores */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.degradado {
  background: var(--degradado);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.boton-encabezado {
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  padding: .4rem 1rem;
  font-weight: 600;
  font-size: .95rem;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.boton-encabezado:hover { border-color: var(--azul); background: rgba(47, 107, 255, .12); box-shadow: var(--brillo); }

/* ---------- Títulos ---------- */
h1, h2, h3 { line-height: 1.2; }
.titulo-seccion { font-size: 1.6rem; font-weight: 700; margin: 0 0 1.25rem; display: flex; align-items: center; gap: .6rem; }
.titulo-seccion::before {
  content: '';
  width: .35rem; height: 1.4rem;
  border-radius: 99px;
  background: var(--degradado);
}

/* ---------- Botones ---------- */
button, .boton {
  font: inherit;
  font-weight: 600;
  color: white;
  background: var(--degradado);
  border: none;
  border-radius: 999px;
  padding: .7rem 1.4rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  transition: transform .15s, box-shadow .2s, filter .2s, background .2s, border-color .2s;
}
button:hover, .boton:hover { transform: translateY(-1px); box-shadow: var(--brillo); color: white; }
button:active { transform: translateY(0); }
button:disabled { background: var(--superficie-2); color: var(--suave); cursor: not-allowed; transform: none; box-shadow: none; }

/* Enlaces que se ven como botón secundario (ej: "Seguir comprando") */
.boton.secundario { background: transparent; color: var(--texto); border: 1px solid var(--borde-fuerte); }
.boton.secundario:hover { border-color: var(--azul); background: rgba(47, 107, 255, .1); }
.botones-carrito { display: grid; gap: .5rem; margin-top: .6rem; }

button.secundario {
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--borde-fuerte);
}
button.secundario:hover { border-color: var(--azul); background: rgba(47, 107, 255, .1); }

button.peligro { background: rgba(255, 77, 106, .12); color: var(--peligro); border: 1px solid rgba(255, 77, 106, .35); }
button.peligro:hover { background: rgba(255, 77, 106, .2); box-shadow: 0 0 22px rgba(255, 77, 106, .3); }

.ancho { width: 100%; }

/* ---------- Banner rotativo ---------- */
.banner {
  position: relative;
  height: clamp(260px, 42vw, 440px);
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 3rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 80px rgba(47, 107, 255, .15);
}
.diapositiva {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .9s ease, transform 6s ease;
  background-size: cover;
  background-position: center;
  color: white;
  text-decoration: none;
  display: flex;
  align-items: flex-end;
  padding: 2rem 5rem 3.2rem;  /* margen a los lados para que las flechas no tapen el texto */
}
.diapositiva.activa { opacity: 1; transform: scale(1); z-index: 1; }
.diapositiva:hover { color: white; }
.diapositiva .etiqueta {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cian);
  margin-bottom: .4rem;
}
.diapositiva h2 { margin: 0; font-size: clamp(2rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -.01em; }
.diapositiva p { margin: .5rem 0 0; color: rgba(255, 255, 255, .85); }
.diapositiva .boton { margin-top: 1.1rem; }
.flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  font-size: 1.4rem;
  background: rgba(6, 7, 13, .45);
  border: 1px solid var(--borde-fuerte);
  backdrop-filter: blur(8px);
}
.flecha:hover { transform: translateY(-50%); background: rgba(47, 107, 255, .35); }
.flecha.izquierda { left: 1rem; }
.flecha.derecha { right: 1rem; }
.puntos { position: absolute; bottom: 1.1rem; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: .45rem; }
.puntos button { width: .6rem; height: .6rem; padding: 0; background: rgba(255, 255, 255, .35); transition: width .3s, background .3s; }
.puntos button:hover { transform: none; box-shadow: none; background: rgba(255, 255, 255, .6); }
.puntos button.activo { width: 1.8rem; background: var(--degradado); }
@media (prefers-reduced-motion: reduce) { .diapositiva { transition: none; transform: none; } }
/* En celulares: sin flechas (se usan los puntitos) y menos margen. */
@media (max-width: 640px) {
  .banner { height: 330px; }
  .flecha { display: none; }
  .diapositiva { padding: 1.5rem 1.25rem 2.8rem; }
  .diapositiva .boton { font-size: .88rem; padding: .6rem 1.1rem; }
}

/* ---------- Cuadrícula de conciertos ---------- */
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .25s, border-color .25s;
}
a.tarjeta:hover { color: inherit; transform: translateY(-4px); border-color: rgba(47, 107, 255, .6); box-shadow: var(--brillo); }
.tarjeta .marco { overflow: hidden; }
a.tarjeta:hover .imagen { transform: scale(1.06); }

.imagen {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 30% 20%, rgba(24, 200, 255, .55), transparent 55%),
    linear-gradient(135deg, #1b2a6b, #2f6bff 60%, #0a1030);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  transition: transform .5s ease;
}

.tarjeta .info { padding: 1.1rem 1.2rem 1.25rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.tarjeta h2 { margin: 0 0 .2rem; font-size: 1.25rem; font-weight: 700; }
.dato { color: var(--suave); font-size: .92rem; }
.precio {
  margin-top: auto;
  padding-top: .8rem;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.precio small { font-weight: 500; color: var(--suave); font-size: .8rem; display: block; }
.precio .ir {
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--superficie-2);
  border: 1px solid var(--borde-fuerte);
  transition: background .2s;
}
a.tarjeta:hover .precio .ir { background: var(--degradado); border-color: transparent; }

/* ---------- Página de detalle ---------- */
.detalle { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 780px) { .detalle { grid-template-columns: 1fr; } }
.detalle .imagen { border-radius: var(--radio); border: 1px solid var(--borde); }
.detalle h2 { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; margin: 1.25rem 0 .5rem; }
.detalle .datos { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .9rem;
  color: var(--texto);
}
/* pre-line: respeta los Enter (párrafos) que se escribieron en la descripción */
.descripcion { color: #c5cbe3; font-size: 1.05rem; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.6; }

/* Foto de la descripción: completa (sin recortes), a lo ancho de la columna */
.foto-descripcion { display: block; margin-top: 1rem; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); background: var(--superficie); }
.foto-descripcion img { display: block; width: 100%; height: auto; max-height: 85vh; object-fit: contain; }
.foto-descripcion:hover { border-color: var(--azul); }
/* En el panel: vista previa de imágenes de forma libre (se ven completas) */
.vista-previa.vista-libre { min-height: 180px; max-width: 320px; }
.vista-previa.vista-libre img { width: 100%; height: auto; max-height: 360px; object-fit: contain; }

/* Información del evento (artistas, edad mínima, PULEP, productor) en la página del concierto */
.info-evento { margin-top: 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.info-evento h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
.info-evento dl { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: .45rem 1rem; margin: 0; }
.info-evento dt { color: var(--suave); font-size: .9rem; }
.info-evento dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.enlace-externo { color: var(--cian); text-decoration: none; border-bottom: 1px solid rgba(24, 200, 255, .35); }
.enlace-externo:hover { color: #fff; border-bottom-color: currentColor; }
@media (max-width: 480px) { .info-evento dl { grid-template-columns: 1fr; gap: .1rem; } .info-evento dd { margin-bottom: .45rem; } }
.edad-minima { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: rgba(255, 181, 71, .14); color: #ffcf7a; }

.compra {
  position: sticky;
  top: 5.5rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.compra h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.fila { display: flex; justify-content: space-between; align-items: center; margin: .9rem 0; gap: .5rem; }
.total { font-size: 1.4rem; font-weight: 800; border-top: 1px solid var(--borde); padding-top: 1rem; }

/* Selector de cantidad:  [ −  2  + ] */
.selector {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: var(--superficie-2);
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  padding: .25rem;
}
.selector button { width: 2.3rem; height: 2.3rem; padding: 0; font-size: 1.25rem; line-height: 1; }
.selector button:disabled { background: transparent; }
.selector span { min-width: 2.2ch; text-align: center; font-weight: 700; font-size: 1.1rem; }
.selector.pequeno button { width: 1.9rem; height: 1.9rem; font-size: 1.05rem; }
.selector.pequeno span { font-size: 1rem; }
.fila-cantidad { display: flex; align-items: center; gap: .75rem; margin-top: .6rem; flex-wrap: wrap; }

/* ---------- Formularios ---------- */
form { display: grid; gap: .9rem; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.campos > label { align-content: start; } /* cada campo pegado arriba aunque el de al lado tenga texto de ayuda */
@media (max-width: 600px) { .campos { grid-template-columns: 1fr; } }
label { display: grid; gap: .35rem; font-size: .9rem; font-weight: 600; color: #c5cbe3; }
input, textarea {
  font: inherit;
  color: var(--texto);
  padding: .7rem .9rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 12px;
  background: var(--superficie-2);
  transition: border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color: #5d6585; }
input:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(47, 107, 255, .25); }
textarea { min-height: 90px; resize: vertical; }
/* Los campos nunca pueden ser más anchos que la pantalla (importante en celulares) */
input, select, textarea { min-width: 0; max-width: 100%; }
form > *, .campos > *, .fila-loc > *, .subidor > *, label { min-width: 0; }
/* Campo de contraseña con el botón del "ojito" para verla u ocultarla */
.campo-clave { position: relative; display: block; min-width: 0; }
.campo-clave input { width: 100%; padding-right: 3rem; }
/* El navegador Edge trae su propio ojito: lo ocultamos para que no salgan dos */
.campo-clave input::-ms-reveal, .campo-clave input::-ms-clear { display: none; }
.ojito {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 10px;
  background: transparent; color: var(--suave); box-shadow: none;
}
.ojito:hover { transform: translateY(-50%); background: rgba(255, 255, 255, .06); color: var(--texto); box-shadow: none; }
.ojito:active { transform: translateY(-50%); }
.ojito:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
label.casilla { display: flex; align-items: center; gap: .6rem; font-weight: 500; cursor: pointer; }
label.casilla input { width: 1.15rem; height: 1.15rem; accent-color: var(--azul); }
label.casilla-legal { align-items: flex-start; font-size: .85rem; color: var(--suave); line-height: 1.45; }
label.casilla-legal input { flex-shrink: 0; margin-top: .1rem; }
.saludo label.casilla-legal { margin-top: .5rem; }

/* ---------- Cajas ---------- */
.caja {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.caja h2 { margin-top: 0; font-size: 1.35rem; }
.login { max-width: 420px; margin: 3rem auto; }
.volver { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: 1.25rem; color: var(--suave); text-decoration: none; font-weight: 500; }
.volver:hover { color: var(--texto); }

/* ---------- Tabla del panel de administración ---------- */
.tabla-envoltura { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .75rem .6rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
th { font-size: .78rem; color: var(--suave); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
tbody tr:hover { background: rgba(255, 255, 255, .02); }
td .acciones { display: flex; gap: .4rem; }
td button { padding: .4rem .9rem; font-size: .88rem; }

/* ---------- Perfil ---------- */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 760px) { .dos-columnas { grid-template-columns: 1fr; } }

.saludo { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.avatar {
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.4rem; font-weight: 800;
  background: var(--degradado);
  box-shadow: 0 0 24px rgba(47, 107, 255, .45);
  flex-shrink: 0;
}
.saludo h2 { margin: 0; }
.saludo .dato { margin: .1rem 0 0; }
.saludo button { margin-left: auto; }

.reserva { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 0; border-bottom: 1px solid var(--borde); }
.reserva:last-of-type { border-bottom: none; }
.reserva h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.reserva h3 a, .reserva strong a { color: var(--texto); text-decoration: none; }
.reserva h3 a:hover, .reserva strong a:hover { color: var(--cian); }
.reserva .derecha { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.reserva .derecha strong { font-size: 1.15rem; }

.estado { font-size: .78rem; font-weight: 700; padding: .25rem .7rem; border-radius: 999px; white-space: nowrap; }
.estado.reloj { background: rgba(255, 181, 71, .12); color: var(--alerta); }
.estado.urgente { background: rgba(255, 77, 106, .14); color: var(--peligro); }
.estado.pagada { background: rgba(47, 212, 138, .12); color: var(--exito); }
.estado.finalizada { background: rgba(255, 255, 255, .06); color: var(--suave); }

/* Pestañas: "Mi carrito" / "Mis compras" */
.pestanas {
  display: inline-flex;
  flex-wrap: wrap;   /* si no caben en una línea (pantallas medianas), pasan a una segunda línea */
  max-width: 100%;
  gap: .25rem;
  margin-bottom: 1.25rem;
  padding: .3rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 24px;
}
.pestanas button { background: transparent; color: var(--suave); padding: .55rem 1.2rem; }
.pestanas button:hover { color: var(--texto); box-shadow: none; transform: none; }
.pestanas button[aria-selected="true"] { background: var(--degradado); color: white; box-shadow: 0 4px 18px rgba(47, 107, 255, .4); }

/* Perfil: "Mi carrito" y "Mis compras" como dos tarjetas grandes lado a lado (sin cápsula alrededor) */
.pestanas-perfil { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.25rem; }
.pestanas-perfil button {
  display: flex; align-items: center; gap: .7rem; text-align: left; min-width: 0;
  padding: .85rem 1rem; border-radius: 16px; border: 1px solid var(--borde-fuerte);
  background: var(--superficie); color: var(--texto); box-shadow: none;
}
.pestanas-perfil button:hover { border-color: var(--azul); transform: none; box-shadow: none; }
.pestanas-perfil button[aria-selected="true"] {
  border: 2px solid var(--azul); background: linear-gradient(135deg, rgba(47, 107, 255, .22), rgba(24, 200, 255, .08)), var(--superficie);
}
.pestanas-perfil .icono-pestana { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.pestanas-perfil .texto-pestana { display: flex; flex-direction: column; min-width: 0; }
.pestanas-perfil .texto-pestana b { font-size: 1.05rem; }
.pestanas-perfil .texto-pestana small { color: var(--suave); font-weight: 500; font-size: .8rem; overflow-wrap: anywhere; }

/* 🏷️ Código de descuento en el carrito */
.caja-codigo { margin: .75rem 0 .25rem; }
.form-codigo { display: flex; gap: .5rem; }
.form-codigo input { flex: 1; min-width: 0; text-transform: uppercase; }
.form-codigo input::placeholder { text-transform: none; }
.codigo-aplicado {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .6rem .9rem; border-radius: 12px; border: 1px solid rgba(61, 220, 151, .45); background: rgba(61, 220, 151, .1); color: #3ddc97;
}
.precio-antes { color: var(--suave); }
.precio-rebajado, .ahorro { color: #3ddc97; }

.pie-carrito { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 1.25rem; border-top: 1px solid var(--borde-fuerte); margin-top: .5rem; }
.pie-carrito .total { border: none; padding: 0; }
.aviso-prueba { background: rgba(255, 181, 71, .08); border: 1px solid rgba(255, 181, 71, .25); color: var(--alerta); border-radius: 12px; padding: .6rem .9rem; font-size: .88rem; }

.compra-cabecera { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.compra-cabecera h3 { margin: 0; }
.codigos { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.codigo {
  font-family: ui-monospace, Consolas, monospace;
  background: var(--superficie-2);
  border: 1px solid rgba(47, 107, 255, .3);
  color: #9cc0ff;
  border-radius: 8px;
  padding: .2rem .55rem;
  font-size: .85rem;
}

/* Nombre de la localidad junto al artista (carrito y compras) */
.etiqueta-loc {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  color: #9cc0ff;
  background: rgba(47, 107, 255, .12);
  border: 1px solid rgba(47, 107, 255, .3);
  border-radius: 999px;
  padding: .1rem .55rem;
  margin-left: .35rem;
  vertical-align: middle;
}

/* ---------- Selector de localidades (página del concierto) ---------- */
.localidades { display: grid; gap: .5rem; margin: .75rem 0 1rem; }
.localidad {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "radio nombre precio" "radio quedan precio" "radio incluye incluye";
  align-items: center;
  column-gap: .75rem;
  padding: .75rem .9rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 14px;
  background: var(--superficie-2);
  cursor: pointer;
  font-weight: 500;
  color: var(--texto);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.localidad:hover { border-color: rgba(47, 107, 255, .6); }
.localidad:has(input:checked) { border-color: var(--azul); background: rgba(47, 107, 255, .1); box-shadow: 0 0 0 1px var(--azul); }
.localidad input { grid-area: radio; width: 1.1rem; height: 1.1rem; accent-color: var(--azul); margin: 0; }
.localidad .nombre-loc { grid-area: nombre; font-weight: 700; }
.localidad .precio-loc { grid-area: precio; font-weight: 700; }
.localidad .quedan { grid-area: quedan; font-size: .8rem; color: var(--suave); }
.localidad .incluye-loc { grid-area: incluye; font-size: .85rem; color: var(--suave); margin-top: .35rem; line-height: 1.4; }
/* Funciones conectadas: "🎭 2 funciones" en las tarjetas y "Elige la función" en la página del evento */
.chip-funciones {
  display: inline-block; margin-left: .3rem; padding: .05rem .5rem; border-radius: 999px;
  background: rgba(47, 107, 255, .16); border: 1px solid rgba(47, 107, 255, .45); font-size: .78rem; white-space: nowrap;
}
/* Aviso grande y centrado en la tarjeta de la portada cuando el evento tiene varias funciones */
/* Una sola línea, centrada: "🎭 2 funciones · elige tu hora" */
.aviso-funciones {
  display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: .35rem; text-align: center;
  align-self: center; margin: .35rem 0 .2rem; padding: .25rem .8rem; border-radius: 999px;
  background: rgba(47, 107, 255, .16); border: 1px solid rgba(47, 107, 255, .5);
}
.aviso-funciones strong { font-size: .85rem; font-weight: 700; }
.aviso-funciones span { font-size: .78rem; color: var(--suave); }
.aviso-funciones span::before { content: '· '; }
/* En las tarjetas pequeñas del perfil, un poco más pequeño y a la izquierda */
.info-mini .aviso-funciones { align-self: flex-start; margin: .2rem 0; padding: .15rem .6rem; }
.info-mini .aviso-funciones strong { font-size: .78rem; }
.info-mini .aviso-funciones span { font-size: .72rem; }
.elegir-funcion { margin: 0 0 1.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--borde); }
.elegir-funcion h3 { margin: 0 0 .7rem; }
/* Botones grandes, uno al lado del otro y del mismo ancho (fáciles de tocar en el celular) */
.botones-funcion { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .7rem; }
.boton-funcion {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; text-align: center;
  min-height: 84px; padding: .9rem 1rem; border-radius: 16px; border: 1px solid var(--borde-fuerte); background: var(--superficie-2);
  color: inherit; text-decoration: none; font-weight: 800; font-size: 1.45rem; line-height: 1.15;
}
.boton-funcion small { font-weight: 500; font-size: .8rem; color: var(--suave); }
a.boton-funcion:hover { border-color: var(--azul); }
.boton-funcion.actual { border: 2px solid var(--azul); background: rgba(47, 107, 255, .14); }
/* Función agotada: desactivada (gris, tachada, no se puede tocar) */
.boton-funcion.agotada { opacity: .5; cursor: not-allowed; color: var(--suave); border-style: dashed; }
.boton-funcion.agotada small { color: #ff4d6a; font-weight: 700; }

.localidad.agotada { opacity: .5; cursor: not-allowed; }
.localidad.agotada .precio-loc { text-decoration: line-through; }

/* ---------- Panel ---------- */
.subtitulo-panel { margin: -.75rem 0 1.25rem; }
.barra-acciones { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.acciones-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.fila-formulario { display: flex; gap: .6rem; flex-wrap: wrap; }
.fila-formulario input { flex: 1 1 240px; }

/* Fecha de nacimiento y sexo (registro y perfil) */
.campos-personales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.campos-personales label { display: grid; gap: .35rem; }
.nota-personales { margin: 0; font-size: .82rem; }
.caja-datos { border-color: rgba(255, 181, 71, .45); background: linear-gradient(180deg, rgba(255, 181, 71, .06), transparent 60%), var(--superficie); }
.caja-datos form { display: grid; gap: .9rem; max-width: 560px; }
@media (max-width: 480px) { .campos-personales { grid-template-columns: 1fr; } }

/* Compras de una persona (Panel → Usuarios → 🧾 Compras) */
.cabecera-compras-usuario { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.cabecera-compras-usuario h2 { margin-bottom: .2rem; }
#tabla-usuarios .acciones { flex-wrap: nowrap; }
#tabla-usuarios .acciones button { white-space: nowrap; }
.nombre-usuario { color: var(--texto); text-decoration: none; border-bottom: 1px dashed var(--borde-fuerte); }
.nombre-usuario:hover { color: var(--cian); border-color: var(--cian); }
.compra-admin { border: 1px solid var(--borde-fuerte); border-radius: var(--radio); padding: 1rem 1.1rem; margin-top: 1rem; background: var(--superficie-2); }
.compra-admin-cabecera { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.compra-admin-cabecera h3 { margin: 0 0 .2rem; }
.compra-admin-cabecera .derecha { display: grid; justify-items: end; text-align: right; margin-left: auto; }
.total-compra { font-size: 1.3rem; }
.texto-cancelado { color: #ff8a9b; }
.tile-cancelaciones { border-color: rgba(255, 77, 106, .35); }
.item-admin { border-top: 1px solid var(--borde); margin-top: .8rem; padding-top: .8rem; display: grid; gap: .45rem; }
.item-admin-titulo { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.item-cancelado { opacity: .62; }
.entradas-admin { display: grid; gap: .3rem; }
.entrada-admin { display: flex; align-items: center; justify-content: space-between; gap: .4rem .8rem; flex-wrap: wrap; padding: .3rem .4rem; border-radius: 8px; }
.entrada-admin:hover { background: rgba(255, 255, 255, .04); }
.entrada-admin label { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-weight: 500; cursor: pointer; color: var(--texto); }
.entrada-admin input { width: 1.1rem; height: 1.1rem; accent-color: var(--azul); }
.entrada-admin.bloqueada label { cursor: default; }
.entrada-admin.ingresada { background: rgba(47, 212, 138, .06); }
.entrada-admin button { padding: .3rem .8rem; font-size: .82rem; }
.nota-mover { margin: 0; color: #ffb547; }
.mover-admin select { flex: 1 1 260px; }
.acciones-compra-admin { display: grid; gap: .6rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--borde); }
.acciones-compra-admin .fila-formulario input { flex: 1 1 220px; }
.historial-compra { margin-top: .8rem; }
.historial-compra summary { cursor: pointer; color: var(--suave); font-weight: 600; }
.historial-compra ul { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .45rem; }
@media (max-width: 600px) { .compra-admin-cabecera .derecha { justify-items: start; text-align: left; } }

/* Buscador de cuentas (Panel → Equipo): sugerencias de cuentas registradas mientras se escribe */
.buscador-cuentas { position: relative; flex: 1 1 280px; min-width: 0; display: flex; }
.buscador-cuentas input { flex: 1; width: 100%; }
.buscador-cuentas input.cuenta-ok { border-color: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .18); }
.sugerencias {
  position: absolute; top: calc(100% + .35rem); left: 0; right: 0; z-index: 20;
  background: var(--superficie-2); border: 1px solid var(--borde-fuerte); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45); padding: .3rem; max-height: 320px; overflow-y: auto;
}
.sugerencia { padding: .55rem .75rem; border-radius: 10px; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; }
.sugerencia .correo-sug { color: var(--suave); font-size: .9rem; word-break: break-all; }
.sugerencia .rol-sug { margin-left: auto; font-size: .75rem; color: var(--suave); }
.sugerencia:hover, .sugerencia.marcada { background: rgba(47, 107, 255, .16); }
.sugerencia.no-elegible { cursor: not-allowed; opacity: .55; }
.sugerencia.no-elegible:hover { background: transparent; }
.sugerencia.vacia { display: block; cursor: default; color: var(--suave); font-size: .9rem; line-height: 1.45; }
.sugerencia.vacia:hover { background: transparent; }

.editor-localidades { border: 1px solid var(--borde); border-radius: 14px; padding: 1rem; margin: 0; display: grid; gap: .6rem; }
.editor-localidades legend { padding: 0 .4rem; font-weight: 700; }
/* Perfil: "⭐ Recomendados" (tarjetas medianas que se deslizan de lado) y "📅 Próximos eventos" (tarjetas pequeñas) */
.descubrir-perfil { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; margin-top: 2rem; }
.descubrir-perfil > * { min-width: 0; } /* que la fila deslizable de recomendados no estire toda la sección */
.titulo-descubrir { font-size: 1.3rem; margin: 0 0 .8rem; }
.titulo-con-enlace { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.fila-recomendados {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 300px); gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem;
}
.tarjeta-recomendada, .tarjeta-mini {
  background: var(--superficie); border: 1px solid var(--borde); color: inherit; text-decoration: none;
  transition: border-color .2s, transform .2s;
}
.tarjeta-recomendada:hover, .tarjeta-mini:hover { color: inherit; border-color: rgba(47, 107, 255, .6); transform: translateY(-2px); }
.tarjeta-recomendada { border-radius: var(--radio); overflow: hidden; scroll-snap-align: start; display: flex; flex-direction: column; }
.tarjeta-recomendada .aviso-demanda { font-size: .75rem; padding: .3rem .7rem; top: .55rem; left: .55rem; }
.tarjeta-recomendada .sello-agotado span { font-size: 1.4rem; border-width: 4px; }
.info-mini { display: grid; gap: .2rem; padding: .7rem .85rem .8rem; min-width: 0; }
.info-mini strong { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-mini .dato { font-size: .82rem; }
.precio-mini { font-size: .85rem; }
.grilla-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; }
.tarjeta-mini { display: flex; align-items: center; gap: .2rem; padding: .45rem; border-radius: 14px; min-width: 0; }
.tarjeta-mini .info-mini { padding: .2rem .45rem; }
.miniatura { width: 96px; flex: none; border-radius: 10px; overflow: hidden; }
.miniatura .imagen { font-size: 1.4rem; }
.ya-tiene { display: inline-block; color: var(--exito); font-weight: 700; font-size: .76rem; }
.quedan-mini { color: #ff6b81; font-weight: 800; }

/* Estadísticas de un evento: compradores en orden de compra (los 3 primeros resaltados) */
#caja-est-compradores .podio { background: rgba(255, 193, 69, .06); }
#caja-est-compradores .puesto { font-size: 1.15rem; white-space: nowrap; }

/* Estadísticas: selector grande "Ver estadísticas de" (todos o un evento) */
.selector-estadisticas { display: grid; gap: .5rem; border-color: rgba(47, 107, 255, .45); }
.selector-estadisticas label { font-size: 1.2rem; font-weight: 800; }
.selector-estadisticas select { font-size: 1.05rem; font-weight: 700; max-width: 560px; }

/* Estadísticas de un evento: asistencia y público (barras horizontales) */
.barras-publico { display: grid; gap: .55rem; margin: .4rem 0 1rem; }
.fila-barra { display: grid; grid-template-columns: minmax(110px, 1.2fr) 2fr minmax(90px, auto); gap: .7rem; align-items: center; }
.fila-barra .medidor { margin: 0; width: 100%; max-width: none; }
.fila-barra.gris .medidor-relleno { background: var(--borde-fuerte); }
.etiqueta-barra { font-size: .92rem; }
.cifra-barra { font-size: .88rem; color: var(--suave); text-align: right; white-space: nowrap; }
.cifra-barra b { color: var(--texto, #fff); }
.grilla-publico { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
@media (max-width: 480px) { .fila-barra { grid-template-columns: 1fr auto; } .fila-barra .medidor { grid-column: 1 / -1; grid-row: 2; } }

/* Formulario de evento: cada parte con su título grande y numerado */
#form-evento { display: grid; gap: 1.6rem; }
.seccion-form { padding: 1.4rem 1.2rem 1.2rem; border-color: var(--borde-fuerte); background: rgba(255, 255, 255, .015); }
.seccion-form > legend {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; color: #fff; padding: 0 .6rem;
}
.paso-form {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none;
  border-radius: 50%; background: var(--degradado); font-size: 1rem; font-weight: 800; color: #fff;
}
@media (max-width: 600px) { .seccion-form > legend { font-size: 1.1rem; } .paso-form { width: 1.7rem; height: 1.7rem; font-size: .9rem; } }
.editor-localidades > button { justify-self: start; }
.fila-loc { display: grid; grid-template-columns: 2fr 1.3fr 1fr auto; gap: .5rem; align-items: center; }
.fila-loc + .fila-loc { margin-top: .5rem; }
.encabezado-loc span { font-size: .75rem; color: var(--suave); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.fila-loc .quitar { width: 2.4rem; height: 2.4rem; padding: 0; background: transparent; color: var(--suave); border: 1px solid var(--borde-fuerte); }
.fila-loc .quitar:hover:not(:disabled) { color: var(--peligro); border-color: var(--peligro); box-shadow: none; }
.fila-loc .nota-loc { grid-column: 1 / -1; color: var(--alerta); font-size: .8rem; }
/* "¿Qué incluye esta entrada?" debajo de cada localidad del formulario */
.fila-loc .loc-incluye { grid-column: 1 / -1; display: grid; gap: .3rem; font-size: .9rem; font-weight: 600; margin-top: .2rem; }
.fila-loc .loc-incluye textarea { font-weight: 400; resize: vertical; min-height: 3.2rem; }
.fila-loc + .fila-loc { padding-top: .8rem; border-top: 1px dashed var(--borde); }
@media (max-width: 640px) {
  .fila-loc { grid-template-columns: 1fr 1fr auto; }
  .fila-loc .loc-nombre { grid-column: 1 / -1; }
  .encabezado-loc { display: none; }
}

td.num, th.der { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Los títulos de las columnas sí pueden ir en dos líneas ("ENTRADAS / POR COMPRA"): así las tablas anchas caben en el computador */
th.der { white-space: normal; }
/* Los textos pequeños dentro de una celda de números (ej: "todo vendido: $ 280.000") también pueden partirse */
td.num small, td.num .dato { white-space: normal; }
/* El panel tiene tablas anchas: en pantallas grandes usa más ancho (la tienda sigue en 1120 px) */
.pagina-panel .contenido { max-width: 1320px; }
/* Tablets, portátiles pequeños o ventanas a media pantalla: las tablas del panel pasan a tarjetas (como en el celular) */
@media (max-width: 1100px) {
  td .acciones { flex-wrap: wrap; }
  .tabla-tarjetas thead { display: none; }
  .tabla-tarjetas, .tabla-tarjetas tbody, .tabla-tarjetas tr, .tabla-tarjetas td { display: block; width: 100%; }
  .tabla-tarjetas tr { border: 1px solid var(--borde); border-radius: 14px; padding: .4rem .9rem; margin-bottom: .75rem; background: var(--superficie-2); }
  .tabla-tarjetas td { border: none; padding: .45rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right; }
  .tabla-tarjetas td:first-child { display: block; text-align: left; border-bottom: 1px solid var(--borde); padding-bottom: .6rem; }
  .tabla-tarjetas td[data-titulo]::before { content: attr(data-titulo); color: var(--suave); font-size: .82rem; text-align: left; flex-shrink: 0; }
  /* El valor de cada dato nunca se sale de la tarjeta: los textos largos (correos, códigos) pasan a la línea siguiente */
  .tabla-tarjetas td > * { min-width: 0; overflow-wrap: anywhere; }
  .tabla-tarjetas td a { overflow-wrap: anywhere; }
  /* Varios valores en una misma celda (ej: correo + WhatsApp): uno debajo del otro, alineados a la derecha */
  .valor-celda { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; min-width: 0; text-align: right; }
  .valor-celda br { display: none; }
  .tabla-tarjetas td.num { white-space: normal; }
  .tabla-tarjetas td:last-child .acciones { width: 100%; justify-content: flex-end; }
}

/* Tarjetas de cifras (estadísticas) */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.tile {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 18px;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.tile.hero { grid-column: 1 / -1; padding: 1.5rem; background: linear-gradient(135deg, rgba(47, 107, 255, .14), rgba(24, 200, 255, .05)), var(--superficie); }
/* Resumen de Estadísticas: las 4 cifras principales, más grandes y con fondo de color */
.caja-resumen-est h2 { margin-bottom: .2rem; }
.caja-resumen-est .tiles:last-child { margin-bottom: 0; }
.caja-resumen-est #tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; }
.tiles-resumen { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 1rem; }
.tile-principal { background: linear-gradient(135deg, rgba(47, 107, 255, .14), rgba(24, 200, 255, .05)), var(--superficie); }
.tile-principal .tile-valor { font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.tile-etiqueta { color: var(--suave); font-size: .88rem; font-weight: 500; }
.tile-valor { font-size: 1.7rem; font-weight: 700; }
.hero-cifra { font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 800; line-height: 1.1; }

/* Medidor de ocupación (una sola serie: relleno azul sobre pista oscura) */
.medidor { display: inline-block; width: 90px; height: 8px; border-radius: 99px; background: var(--superficie-2); vertical-align: middle; overflow: hidden; }
.medidor-relleno { display: block; height: 100%; background: #3987e5; border-radius: 0 4px 4px 0; }
.medidor-texto { margin-left: .5rem; font-variant-numeric: tabular-nums; color: var(--suave); font-size: .9rem; }

/* En vivo */
.barra-vivo-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.en-vivo { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.pulso { width: .6rem; height: .6rem; border-radius: 50%; background: var(--exito); box-shadow: 0 0 0 0 rgba(47, 212, 138, .6); animation: pulso 1.8s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 10px rgba(47, 212, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 212, 138, 0); } }
@media (prefers-reduced-motion: reduce) { .pulso { animation: none; } }

.leyenda { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1rem; color: var(--suave); font-size: .9rem; }
.leyenda span { display: inline-flex; align-items: center; gap: .45rem; }
.muestra { width: .85rem; height: .85rem; border-radius: 3px; display: inline-block; }
.muestra.vendidas, .seg.vendidas { background: #3987e5; }
.muestra.carrito, .seg.carrito { background: #d95926; }
.muestra.libres, .seg.libres { background: #232842; }

.evento-vivo-cabecera { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.evento-vivo-cabecera h3 { margin: 0; font-size: 1.2rem; }
.resumen-vivo { text-align: right; }
.resumen-cifra { display: block; font-size: 1.8rem; font-weight: 800; line-height: 1; }
.fila-vivo { display: grid; grid-template-columns: 150px 1fr; gap: .4rem 1rem; align-items: center; padding: .6rem 0; }
.fila-vivo + .fila-vivo { border-top: 1px solid var(--borde); }
.fila-vivo-nombre { display: flex; flex-direction: column; }
.fila-vivo-cifras { grid-column: 2; display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.fila-vivo-cifras b { color: var(--texto); }
@media (max-width: 640px) { .fila-vivo { grid-template-columns: 1fr; } .fila-vivo-cifras { grid-column: 1; } }

/* Barra apilada: 2px de separación entre segmentos y puntas redondeadas de 4px */
.barra-apilada { display: flex; gap: 2px; height: 18px; }
.seg { height: 100%; min-width: 3px; }
.seg:first-child { border-radius: 4px 0 0 4px; }
.seg:last-child { border-radius: 0 4px 4px 0; }
.seg:only-child { border-radius: 4px; }
.seg:hover { filter: brightness(1.2); }

.tooltip {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  background: #1f2438;
  color: var(--texto);
  border: 1px solid var(--borde-fuerte);
  border-radius: 10px;
  padding: .45rem .7rem;
  font-size: .85rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  white-space: nowrap;
}

/* =====================================================================
   DISEÑO SUBIDO POR EL ADMIN (pestaña 🎨 Diseño)
   ===================================================================== */

/* Fondo general / de ingreso: la imagen va detrás de todo, oscurecida para que el texto se lea. */
body.con-fondo::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(6, 7, 13, .62), rgba(6, 7, 13, .88)),
    var(--imagen-fondo) center / cover no-repeat;
}

/* Logo subido: reemplaza el ícono ♪ */
.logo-icono.con-imagen { background: none; box-shadow: none; }
.logo-icono img { display: block; }

/* Franja promocional del inicio (proporción 4:1) */
.franja {
  display: block;
  margin: -1.5rem 0 3rem;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--borde);
  aspect-ratio: 4 / 1;
  background: var(--superficie);
  transition: box-shadow .25s, border-color .25s;
}
a.franja:hover { border-color: rgba(47, 107, 255, .6); box-shadow: var(--brillo); }
.franja img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Cuadro para subir imágenes ---------- */
.subidor { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 760px) { .subidor { grid-template-columns: 1fr; } }

.ficha-specs {
  background: rgba(47, 107, 255, .06);
  border: 1px solid rgba(47, 107, 255, .25);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  font-size: .9rem;
}
.ficha-specs h4 { margin: 0 0 .6rem; font-size: .95rem; }
.ficha-specs dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0 0 .7rem; }
.ficha-specs dt { color: var(--suave); }
.ficha-specs dd { margin: 0; font-weight: 600; }
.ficha-specs ul { margin: 0; padding-left: 1.1rem; color: #c5cbe3; display: grid; gap: .25rem; }

.vista-previa {
  border: 2px dashed var(--borde-fuerte);
  border-radius: 14px;
  background: var(--superficie-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--suave);
  font-size: .9rem;
  text-align: center;
  padding: .5rem;
}
.vista-previa img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vista-previa.con-imagen { border-style: solid; padding: 0; }
.subidor-acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.subidor-acciones label.boton { cursor: pointer; }
.subidor-acciones input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.subidor-acciones label.boton:focus-within { outline: 2px solid var(--cian); outline-offset: 3px; }

.contador { justify-self: end; font-size: .8rem; color: var(--suave); font-weight: 500; }

/* ---------- Empresarios: estadísticas compartidas ---------- */
.info-empresario { flex: 1 1 280px; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.compartidos { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.chip-compartido { padding-right: .35rem; }
.quitar-chip {
  width: 1.4rem; height: 1.4rem; padding: 0; font-size: .75rem;
  background: transparent; color: var(--suave); border: 1px solid var(--borde-fuerte);
}
.quitar-chip:hover { color: var(--peligro); border-color: var(--peligro); box-shadow: none; transform: none; }
.compartir select { flex: 1 1 240px; }

select {
  font: inherit;
  color: var(--texto);
  padding: .7rem .9rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 12px;
  background: var(--superficie-2);
}
select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(47, 107, 255, .25); }

/* ---------- Usuarios ---------- */
.barra-usuarios { display: flex; gap: .75rem 1rem; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.barra-usuarios input[type="search"] { flex: 1 1 280px; }
.barra-usuarios .acciones { display: flex; gap: .5rem; flex-wrap: wrap; }

/* =====================================================================
   MAPA DE SILLAS (tienda y diseñador)
   ===================================================================== */
.mapa-svg { display: block; font-family: var(--letra); }
.silla { fill: var(--color); cursor: pointer; transition: opacity .15s, filter .15s; }
.silla.libre:hover { filter: brightness(1.35); stroke: #fff; stroke-width: 2; }
.silla.elegida { fill: #fff; stroke: var(--color); stroke-width: 4; }
.silla.mia { fill: transparent; stroke: #fff; stroke-width: 2; stroke-dasharray: 3 2; cursor: default; }
.silla.ocupada { fill: #2b3048; cursor: not-allowed; }
.silla.apagada { opacity: .45; }
.silla.apagada:hover { opacity: .8; }
.silla.quitada { fill: transparent; stroke: rgba(255, 255, 255, .22); stroke-dasharray: 2 2; }
.silla.vendida { stroke: #fff; stroke-width: 2.5; }
.escenario rect { fill: rgba(47, 107, 255, .22); stroke: rgba(47, 107, 255, .75); stroke-width: 1.5; }
.escenario text { fill: #fff; font-weight: 700; font-size: 13px; letter-spacing: .15em; }
.nombre-bloque { fill: var(--texto); font-size: 12px; font-weight: 600; }
.letra-fila { fill: var(--suave); font-size: 10px; font-weight: 600; }
.marco-bloque { fill: rgba(255, 255, 255, .02); stroke: rgba(255, 255, 255, .16); stroke-dasharray: 4 4; }
.bloque.seleccionado .marco-bloque { stroke: var(--cian); stroke-dasharray: none; fill: rgba(24, 200, 255, .07); }
.escenario.seleccionado rect { stroke: var(--cian); stroke-width: 3; }

.muestra-elegida { background: #fff; }
.muestra-mia { background: transparent; border: 2px dashed #fff; }
.muestra-ocupada { background: #2b3048; }
.muestra-vendida { background: transparent; border: 2px solid #fff; }

/* En la tienda */
.seccion-mapa { margin-top: 2rem; }
.seccion-mapa h3 { margin-top: 0; }
.mapa-contenedor { overflow: auto; background: #090b15; border: 1px solid var(--borde); border-radius: 14px; padding: .75rem; }
.mapa-contenedor .mapa-svg { margin: 0 auto; max-width: 100%; height: auto; }

/* Opción de venta en el formulario de eventos */
.opcion-modo { align-items: flex-start; padding: .75rem .9rem; border: 1px solid var(--borde-fuerte); border-radius: 14px; background: var(--superficie-2); font-weight: 500; }
.opcion-modo:has(input:checked) { border-color: var(--azul); background: rgba(47, 107, 255, .1); }
.opcion-modo small { color: var(--suave); font-weight: 400; }
.zona-mapa {
  display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: .75rem .9rem; border-radius: 14px; background: rgba(24, 200, 255, .06); border: 1px dashed rgba(24, 200, 255, .35);
}
input:disabled { opacity: .65; cursor: not-allowed; }

/* Diseñador: ventana completa */
body.sin-desplazar { overflow: hidden; }
.disenador { position: fixed; inset: 0; z-index: 100; background: var(--fondo); display: flex; flex-direction: column; }
.disenador-barra {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem;
  padding: calc(.75rem + env(safe-area-inset-top, 0px)) 1.25rem .75rem; border-bottom: 1px solid var(--borde); background: var(--superficie);
}
.disenador-barra h2 { margin: 0; font-size: 1.2rem; }
.disenador-botones { display: flex; gap: .5rem; flex-wrap: wrap; }
.disenador-botones select { padding: .55rem .8rem; }
.dis-ayuda { margin: 0; padding: .55rem 1.25rem; color: var(--suave); font-size: .88rem; border-bottom: 1px solid var(--borde); }
.disenador-cuerpo { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 330px; min-height: 0; }
.lienzo { overflow: auto; background: #090b15; }
.lienzo .marco-bloque, .lienzo .nombre-bloque, .lienzo .escenario, .lienzo .silla { touch-action: none; }
.lienzo .marco-bloque, .lienzo .nombre-bloque, .lienzo .escenario { cursor: grab; }
.dis-panel { overflow: auto; border-left: 1px solid var(--borde); padding: 1rem 1.1rem; display: grid; gap: 1.1rem; align-content: start; background: var(--superficie); }
.dis-panel h3 { margin: 0 0 .5rem; font-size: 1rem; }
.dis-panel label { margin-bottom: .55rem; }
.campos-mini { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.campos-mini label { margin-bottom: 0; }
.acciones-dis { display: flex; flex-wrap: wrap; gap: .5rem; }
.acciones-dis button { padding: .45rem .9rem; font-size: .88rem; }
.leyenda-mapa { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; font-size: .88rem; color: var(--suave); }
.leyenda-mapa li { display: flex; align-items: center; gap: .5rem; }
.leyenda-mapa b { color: var(--texto); font-weight: 600; }
@media (max-width: 820px) {
  .disenador-cuerpo { grid-template-columns: 1fr; grid-template-rows: minmax(0, 55%) minmax(0, 45%); }
  .dis-panel { border-left: none; border-top: 1px solid var(--borde); }
  .disenador-botones button, .disenador-botones select { padding: .45rem .75rem; font-size: .85rem; }
}

/* =====================================================================
   GRÁFICA DE VENTAS DIARIAS
   ===================================================================== */
.cabecera-grafica { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.cabecera-grafica h2 { margin-bottom: .2rem; }
.filtros-grafica { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.filtros-grafica select { padding: .5rem .8rem; max-width: 260px; }
.segmentado { display: inline-flex; background: var(--superficie-2); border: 1px solid var(--borde-fuerte); border-radius: 999px; padding: .2rem; }
.segmentado button { background: transparent; color: var(--suave); padding: .4rem .9rem; font-size: .9rem; }
.segmentado button:hover { box-shadow: none; transform: none; color: var(--texto); }
.segmentado button[aria-pressed="true"] { background: var(--degradado); color: #fff; }
.grafica { width: 100%; margin-top: .75rem; }
.grafica svg { display: block; overflow: visible; }
.grafica .guia { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.grafica .eje-base { stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.eje-texto { fill: var(--suave); font-size: 11px; font-variant-numeric: tabular-nums; }
.valor-max { fill: var(--texto); font-size: 12px; font-weight: 700; }
.zona-dia { fill: transparent; }
.dia-grafica:hover .zona-dia { fill: rgba(255, 255, 255, .045); }
.dia-grafica:hover .barra-dia { filter: brightness(1.25); }
.grafica-vacia { padding: 3rem 0; text-align: center; }
.tabla-grafica summary { cursor: pointer; color: var(--cian); margin-top: .6rem; }

/* Lugares */
.acciones-lugar { flex-wrap: wrap; align-items: center; }
.acciones-lugar input, .acciones-lugar select { padding: .4rem .6rem; max-width: 230px; }

/* =====================================================================
   PORTERÍA: lector de QR (porteria.html) y pestaña Ingresos del panel
   ===================================================================== */
.boton-pequeno { padding: .4rem .85rem; font-size: .85rem; }
.porteria { max-width: 640px; }
.cabecera-lector { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.cabecera-lector h2 { margin: 0 0 .4rem; font-size: 1.3rem; }
input.pin { font-size: 1.6rem; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }

.contador-vivo .contador-cifras { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; font-size: 1.1rem; }
.contador-vivo b { font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.medidor.medidor-grande { display: block; width: 100%; height: 14px; margin: .6rem 0; }
.medidor.medidor-ancho { display: block; width: 100%; }

.camara {
  position: relative; background: #000; border: 1px solid var(--borde-fuerte); border-radius: 18px; overflow: hidden;
  aspect-ratio: 3 / 4; max-height: 62vh; width: 100%; display: grid; place-items: center; margin-bottom: 1rem;
}
.camara video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.marco-qr { position: absolute; inset: 20% 14%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 18px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35); pointer-events: none; }
/* Panel → Eventos: los botones de cada evento (PDF, Editar, Duplicar, Borrar) en una cuadrícula de 2 columnas,
   para que quepan en la pantalla del computador y le dejen espacio al nombre del evento. */
#tabla-eventos td .acciones { display: grid; grid-template-columns: repeat(2, max-content); gap: .4rem; justify-content: end; }
#tabla-eventos .acciones > * { white-space: nowrap; text-align: center; justify-content: center; }
#tabla-eventos td:first-child { min-width: 11rem; }
.aviso-cruce ul { margin: .4rem 0 .6rem; padding-left: 1.2rem; }

/* Panel → Eventos: títulos "Próximos" / "Ya pasaron" y los eventos pasados en gris */
.separador-eventos td { font-weight: 700; color: var(--suave); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; padding-top: 1.1rem; }
.evento-vivo .ultima-venta { display: block; margin-top: .3rem; color: var(--texto); }

/* Cajas que se pliegan (ej: "Importar clientes" en Usuarios): una sola línea hasta que se abren */
.caja-plegable { padding-top: 1rem; padding-bottom: 1rem; }
.caja-plegable[hidden] { display: none; }
.caja-plegable summary { cursor: pointer; list-style: none; }
.caja-plegable summary::-webkit-details-marker { display: none; }
.caja-plegable summary::before { content: '▸ '; color: var(--suave); }
.caja-plegable[open] summary::before { content: '▾ '; }
.caja-plegable[open] summary { margin-bottom: .75rem; }

/* 🎟️ Invitados (cortesías) */
.tile-invitados { border-color: rgba(176, 120, 255, .45); }
.form-invitacion { border: 1px solid var(--borde-fuerte); border-radius: 16px; padding: 1rem 1.1rem; margin: 0 0 1.4rem; background: rgba(176, 120, 255, .05); }
.form-invitacion[hidden] { display: none; }
.form-invitacion h3 { margin: 0 0 .3rem; }
.form-invitacion .campos { margin: .8rem 0; }
.titulo-lista-invitados { margin: 0 0 .6rem; }

/* Compradores de un evento: buscador y pie con "Ver toda la lista" */
.buscador-compradores { width: 100%; margin: .25rem 0 1rem; }
.pie-compradores { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .75rem; }

/* Ficha de una persona (panel): ventana encima de la página; al cerrarla todo queda donde estaba */
body.con-ficha { overflow: hidden; }
.ficha-fondo {
  position: fixed; inset: 0; z-index: 1000; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(3, 4, 10, .78); backdrop-filter: blur(3px);
  padding: 2.5rem 1rem;
}
.ficha-fondo[hidden] { display: none; }
.ficha-panel { max-width: 980px; margin: 0 auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); }
.cabecera-ficha {
  position: sticky; top: 0; z-index: 2; background: var(--superficie);
  margin: -1.5rem -1.5rem 0; padding: 1.2rem 1.5rem; border-radius: 20px 20px 0 0; border-bottom: 1px solid var(--borde);
}
.cabecera-ficha { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.cabecera-ficha > div { min-width: 0; }
.cabecera-ficha > button { flex-shrink: 0; }
.cabecera-ficha h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; }
.perfil-ficha { margin: .5rem 0 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--borde); }
.datos-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: .8rem 1.2rem; margin-bottom: 1rem; }
.dato-ficha { display: flex; flex-direction: column; gap: .15rem; min-width: 0; overflow-wrap: anywhere; }
.titulo-compras-ficha { margin: 0 0 .5rem; }
.resumen-ficha { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; margin-bottom: 1.4rem; }
.resumen-ficha:empty { display: none; }
/* Etiquetas de estado de las entradas: activa (verde), usada (azul), cancelada (rojo) */
.chips-entradas { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.chip-entradas { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; border: 1px solid; }
.chip-entradas.activa { color: #3ddc97; border-color: rgba(61, 220, 151, .45); background: rgba(61, 220, 151, .1); }
.chip-entradas.usada { color: #6ea8ff; border-color: rgba(110, 168, 255, .45); background: rgba(110, 168, 255, .1); }
.chip-entradas.cancelada { color: #ff6b84; border-color: rgba(255, 77, 106, .45); background: rgba(255, 77, 106, .1); }
/* Una sección por evento dentro de la ficha */
.evento-ficha { border: 1px solid var(--borde-fuerte); border-radius: 18px; padding: 1.1rem; margin-bottom: 1.2rem; background: rgba(47, 107, 255, .04); }
.evento-ficha-pasado { background: rgba(128, 128, 140, .06); }
.evento-ficha-pasado .evento-ficha-cabecera h3 { color: var(--suave); }
.evento-ficha-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
.evento-ficha-cabecera h3 { margin: 0 0 .2rem; font-size: 1.2rem; }
.evento-ficha-cabecera .derecha { display: flex; flex-direction: column; align-items: flex-end; }
.evento-ficha-cabecera .derecha strong { font-size: 1.25rem; }
.evento-ficha > .chips-entradas { margin: .6rem 0 1rem; }
.evento-ficha .compra-admin:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .ficha-fondo { padding: 0; }
  .ficha-panel { border-radius: 0; min-height: 100%; }
  /* En celular la caja tiene menos relleno (1.1rem): el encabezado se ajusta a eso para no salirse de la pantalla */
  .cabecera-ficha { top: 0; margin: -1.1rem -1.1rem 0; padding: 1rem 1.1rem; border-radius: 0; }
  .ficha-fondo { overflow-x: hidden; }
}

/* Compras de una persona (panel): filtro por evento y aviso de entradas de otros eventos en la misma compra */
.filtro-eventos-compras { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .25rem 0 .9rem; }
.filtro-eventos-compras:empty { display: none; }
.filtro-eventos-compras button { text-align: left; }
.filtro-eventos-compras .filtro-pasado { opacity: .65; }
.nota-otros-eventos { margin: .5rem 0 0; font-size: .85rem; }
.evento-item-admin { font-size: 1.02rem; }
.evento-pasado { opacity: .55; background: rgba(128, 128, 140, .12); filter: grayscale(.6); }
/* Título de la sección de eventos que ya pasaron: con línea arriba para que se note el corte */
.separador-eventos.separador-pasados td { border-top: 2px dashed var(--borde); padding-top: 1.4rem; background: rgba(128, 128, 140, .08); }
.casilla-ocultar { display: flex; margin-top: .45rem; font-size: .82rem; white-space: nowrap; }
.evento-pasado:hover, .evento-pasado:focus-within { opacity: .85; }
.marco-qr.en-pausa { border-color: rgba(255, 255, 255, .25); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .7); } /* en pausa: la cámara se oscurece */
.sin-camara { text-align: center; padding: 2rem 1.5rem; display: grid; gap: .75rem; justify-items: center; }
.manual { margin-bottom: 1rem; }

.resultado { display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.25rem; border-radius: 18px; margin-bottom: 1rem; animation: aparecer .18s ease-out; }
.resultado.ok { background: rgba(47, 212, 138, .16); border: 2px solid var(--exito); }
.resultado.mal { background: rgba(255, 77, 106, .15); border: 2px solid var(--peligro); }
.resultado-icono { font-size: 3rem; line-height: 1; }
.resultado-titulo { font-size: 1.8rem; font-weight: 800; line-height: 1.1; }
.resultado.ok .resultado-titulo { color: #7ff0bd; }
.resultado.mal .resultado-titulo { color: #ff9aac; }
.resultado-detalle { margin-top: .3rem; }
.resultado-codigo { font-family: ui-monospace, Consolas, monospace; color: var(--suave); margin-top: .3rem; font-size: .85rem; }
/* Lector de accesos: aviso para agregarlo a la pantalla de inicio y pasos para borrarlo al terminar */
.porteria .aviso-app { margin: 0 0 1rem; }
.pasos-borrar { margin: .4rem 0 0; padding-left: 1.2rem; display: grid; gap: .45rem; }

/* Panel → Accesos: "Accesos por responsable" (control interno, solo admins) */
.responsable-accesos { border: 1px solid var(--borde); border-radius: 12px; padding: .7rem 1rem; margin-top: .7rem; }
.responsable-accesos summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.responsable-accesos[open] summary { margin-bottom: .6rem; }

/* Portería: selector de puerta arriba del lector (se cambia sin volver a poner el PIN) */
.cambiar-puerta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 700; margin: .4rem 0 .2rem; }
.cambiar-puerta select { width: auto; min-width: 12rem; font-weight: 700; font-size: 1rem; }

/* Botones de la portería: el lector queda en pausa hasta que el portero toca uno */
.resultado { flex-wrap: wrap; }
.resultado-botones { flex-basis: 100%; display: flex; gap: .6rem; flex-wrap: wrap; }
.resultado-botones button { flex: 1 1 10rem; font-size: 1.15rem; padding: .95rem 1rem; }
.lector-en-pausa { text-align: center; margin: -.4rem 0 1rem; }
@keyframes aparecer { from { transform: scale(.96); opacity: .3; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .resultado { animation: none; } }

.historial { list-style: none; padding: 0; margin: 0; }
.historial li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--borde); font-size: .9rem; }
.historial li:last-child { border-bottom: none; }

/* Panel → Ingresos */
.porteria-tarjeta h3 { margin-top: 0; }
.porteria-datos { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: end; margin-bottom: .75rem; }
.porteria-datos input { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.pin-caja { display: flex; flex-direction: column; align-items: center; background: var(--superficie-2); border: 1px solid var(--borde-fuerte); border-radius: 14px; padding: .4rem 1.25rem; }
.pin-grande { font-size: 2.3rem; font-weight: 800; letter-spacing: .2em; font-family: ui-monospace, Consolas, monospace; line-height: 1.1; }
.hero-de { font-size: 1.4rem; color: var(--suave); font-weight: 600; }
.fila-ingreso { display: grid; grid-template-columns: minmax(80px, 170px) minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .35rem 0; }
.fila-ingreso-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-ingreso-cifra { font-variant-numeric: tabular-nums; color: var(--suave); white-space: nowrap; }
.fila-ingreso-cifra b { color: var(--texto); }
@media (max-width: 640px) { .porteria-datos { grid-template-columns: 1fr; } .pin-caja { align-items: flex-start; } }

/* =====================================================================
   MIS COMPRAS: cada entrada con su QR y "enviar a otra persona"
   ===================================================================== */
.entradas-compra { display: grid; gap: .5rem; margin-top: .6rem; }
.entrada-fila {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem 1rem; flex-wrap: wrap;
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 12px; padding: .6rem .8rem;
}
.estado-entrada { font-size: .82rem; margin-top: .2rem; }
.acciones-entrada { display: flex; gap: .4rem; flex-wrap: wrap; }
.form-enviar { flex-basis: 100%; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.form-enviar input { flex: 1 1 180px; padding: .5rem .7rem; }
.form-enviar .mensaje-enviar { flex-basis: 100%; }

.ventana-qr { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .75); display: grid; place-items: center; padding: 1rem; }
.tarjeta-qr {
  width: min(380px, 100%); background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: 20px;
  padding: 1.25rem; text-align: center; max-height: 100%; overflow: auto;
}
.tarjeta-qr h2 { margin: 0 0 .3rem; font-size: 1.3rem; }
/* Fondo blanco alrededor del QR: los lectores lo leen mejor con buen contraste */
.tarjeta-qr img { width: 100%; max-width: 300px; height: auto; background: #fff; border-radius: 12px; padding: 10px; margin: .5rem auto; display: block; }
.codigo-grande { font-family: ui-monospace, Consolas, monospace; font-size: 1.3rem; letter-spacing: .08em; font-weight: 700; margin: .3rem 0; }

/* =====================================================================
   AVISOS DE DEMANDA (50% / 70% / 90% vendido) Y RECARGO POR SERVICIO
   ===================================================================== */
/* Avisos grandes y de color sólido, para que se noten encima de cualquier foto */
.aviso-demanda {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  font-size: .92rem; font-weight: 800; letter-spacing: .02em;
  padding: .45rem 1rem; border-radius: 999px; border: 0;
  color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.demanda-50 { background: linear-gradient(135deg, #ff9f1c, #ffc145); color: #1f1300; }
.demanda-70 { background: linear-gradient(135deg, #ff5f1f, #ff9a3c); }
.demanda-90, .demanda-quedan { background: linear-gradient(135deg, #ff1f4b, #ff5470); animation: latido 1.4s ease-in-out infinite; }
.demanda-quedan { font-size: 1.05rem; padding: .5rem 1.1rem; }
.demanda-agotado { background: #2a2d3a; }
@keyframes latido {
  0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 0 0 rgba(255, 45, 85, .55); }
  50% { box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 0 8px rgba(255, 45, 85, 0); }
}
@media (prefers-reduced-motion: reduce) { .demanda-90, .demanda-quedan { animation: none; } }
.marco { position: relative; }
.marco .aviso-demanda { position: absolute; top: .75rem; left: .75rem; z-index: 1; }
.diapositiva .aviso-demanda { margin-left: .5rem; vertical-align: middle; }
.detalle .marco { border-radius: var(--radio); overflow: hidden; }
.detalle .marco + h2 { margin-top: 1rem; }

/* AGOTADO: la foto en gris y oscura, con un sello rojo grande cruzado encima */
.agotada .imagen { filter: grayscale(1) brightness(.55); }
.sello-agotado { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 1; }
.sello-agotado span {
  transform: rotate(-12deg);
  font-size: clamp(1.7rem, 6vw, 2.6rem); font-weight: 900; letter-spacing: .14em; line-height: 1;
  color: #ff3358; padding: .35rem 1.1rem .4rem; border: 5px solid #ff3358; border-radius: 12px;
  background: rgba(6, 7, 13, .55); text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
  box-shadow: 0 0 0 3px rgba(6, 7, 13, .5), 0 10px 30px rgba(0, 0, 0, .5);
}
.detalle .sello-agotado span { font-size: clamp(2.2rem, 8vw, 3.6rem); }
.tarjeta.agotada { border-color: rgba(255, 51, 88, .35); }
.tarjeta.agotada .valor-precio { text-decoration: line-through; color: var(--suave); }
.texto-agotado { color: #ff6b81 !important; font-weight: 800 !important; font-size: .9rem !important; }
.sello-banner {
  display: inline-block; margin-top: 1.1rem; transform: rotate(-4deg);
  font-size: clamp(1.3rem, 4vw, 2rem); font-weight: 900; letter-spacing: .12em;
  color: #ff3358; border: 4px solid #ff3358; border-radius: 10px; padding: .25rem .9rem; background: rgba(6, 7, 13, .6);
}

/* Página del evento: cuántas quedan en cada localidad */
.localidad .quedan-aviso { color: #ffb36b; font-weight: 700; }
.localidad .quedan-urgente { color: #ff6b81; font-weight: 800; font-size: .92rem; }
.localidad .quedan-agotada { color: #ff3358; font-weight: 900; letter-spacing: .06em; }
.localidad.agotada { opacity: .65; }
.mas-servicio { display: block; font-weight: 500; color: var(--suave); font-size: .78rem; }
.precio-loc small { display: block; font-size: .72rem; font-weight: 500; color: var(--suave); text-align: right; }
.desglose { border-top: 1px solid var(--borde); margin-top: .5rem; padding-top: .3rem; }
.desglose .fila { margin: .35rem 0; color: var(--suave); font-size: .92rem; }
.campo-cargo input { max-width: 170px; }

/* Pagos con Wompi */
.aviso-pago { background: rgba(47, 212, 138, .07); border: 1px solid rgba(47, 212, 138, .3); color: #a8f0cf; border-radius: 12px; padding: .6rem .9rem; font-size: .88rem; }
.resultado-pago { text-align: center; }
.icono-pago { font-size: 3.5rem; line-height: 1; margin-bottom: .5rem; }

/* Contribución parafiscal en el formulario de eventos */
.nota-impuesto { grid-column: 1 / -1; font-size: .8rem; }
.nota-impuesto.paga { color: #ffcf7a; }
.nota-impuesto.no-paga { color: var(--suave); }
.explica-impuesto { border: 1px solid rgba(255, 207, 122, .35); background: rgba(255, 207, 122, .06); border-radius: 12px; padding: .8rem 1rem; font-size: .88rem; }
.explica-impuesto p { margin: .4rem 0 0; color: #d9dcea; line-height: 1.5; }
.explica-impuesto .aviso-uvt { color: #ffcf7a; font-weight: 600; }
.total-impuesto { margin: 0; padding: .6rem .9rem; border-radius: 10px; font-size: .92rem; }
.total-impuesto.paga { background: rgba(255, 207, 122, .1); color: #ffcf7a; }
.total-impuesto.no-paga { background: rgba(255, 255, 255, .04); color: var(--suave); }
.cifra-impuesto { color: #ffcf7a; font-weight: 600; white-space: nowrap; }
.tile-privado { border-color: rgba(47, 107, 255, .45); }
.boton-informe { padding: .4rem .9rem; font-size: .88rem; white-space: nowrap; }

/* ---------- Propuestas de cambios ---------- */
.propuesta { border: 1px solid rgba(255, 181, 71, .3); background: rgba(255, 181, 71, .04); border-radius: 16px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.propuesta-cabecera { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: .75rem; }
.propuesta-cabecera h3 { margin: 0; font-size: 1.1rem; }
.cambio { display: grid; grid-template-columns: 130px 1fr 1fr; gap: .5rem .9rem; padding: .55rem 0; border-top: 1px solid var(--borde); font-size: .92rem; align-items: start; }
.cambio .campo { color: var(--suave); font-weight: 600; }
.cambio .antes { color: #ff9aac; text-decoration: line-through; text-decoration-color: rgba(255, 154, 172, .5); word-break: break-word; }
.cambio .despues { color: #7ff0bd; word-break: break-word; }
.cambio img { max-width: 100%; border-radius: 8px; display: block; }
.cambio-encabezado { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); border-top: none; padding-bottom: 0; }
@media (max-width: 640px) {
  .cambio { grid-template-columns: 1fr 1fr; }
  .cambio .campo { grid-column: 1 / -1; }
  .cambio-encabezado span:first-child { display: none; }
}
.propuesta-acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .9rem; }
.propuesta-acciones input { flex: 1 1 220px; }

/* =====================================================================
   CELULAR (pantallas de hasta 640 px de ancho)
   ===================================================================== */
@media (max-width: 640px) {
  main.contenido { padding: 1.25rem 1rem 3rem; }
  /* Barra de arriba SÓLIDA en el celular: con transparencia, el banner se veía cortado por detrás al bajar */
  header { padding: .7rem 1rem; background: var(--fondo); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .55); }

  /* Panel: pestañas en una cuadrícula ordenada de 3 columnas (antes quedaban en filas desiguales) */
  .pestanas { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border-radius: 18px; gap: .3rem; }
  .pestanas button { padding: .55rem .3rem; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 12px; }
  /* Panel: botones de cada evento en 2 columnas del mismo ancho, ocupando toda la tarjeta */
  #tabla-eventos td .acciones { grid-template-columns: 1fr 1fr; width: 100%; justify-content: stretch; }
  #tabla-eventos .acciones > * { width: 100%; padding-left: .4rem; padding-right: .4rem; }
  header .contenido { gap: .4rem; }
  header h1 { font-size: 1.05rem; }
  .logo { gap: .4rem; }
  .logo-icono { width: 2.75rem; height: 2.75rem; border-radius: 12px; font-size: 1.35rem; }
  .logo-icono.con-imagen { height: 2.75rem; max-width: 10rem; }
  .logo-icono.con-imagen img { height: 2.75rem; max-width: 10rem; }
  .boton-encabezado { padding: .35rem .7rem; font-size: .85rem; }

  /* Las pestañas se deslizan de lado si no caben */
  .pestanas { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .pestanas::-webkit-scrollbar { display: none; }
  .pestanas button { white-space: nowrap; padding: .5rem .9rem; }

  .caja { padding: 1.1rem; border-radius: 16px; }
  .titulo-seccion { font-size: 1.35rem; }
  .detalle h2 { margin-top: 1rem; }
  .compra { position: static; }
  .reserva .derecha { text-align: left; align-items: flex-start; width: 100%; }
  .pie-carrito button { width: 100%; }
  .saludo button { margin-left: 0; }
  .barra-acciones button { width: 100%; }
  .tile-valor { font-size: 1.4rem; }
  .franja { margin-top: -1.75rem; margin-bottom: 2rem; border-radius: 14px; }
  td .acciones { flex-wrap: wrap; }

  /* Tablas del panel → tarjetas: una por fila, cada dato con su nombre al lado */
  .tabla-tarjetas thead { display: none; }
  .tabla-tarjetas, .tabla-tarjetas tbody, .tabla-tarjetas tr, .tabla-tarjetas td { display: block; width: 100%; }
  .tabla-tarjetas tr { border: 1px solid var(--borde); border-radius: 14px; padding: .4rem .9rem; margin-bottom: .75rem; background: var(--superficie-2); }
  .tabla-tarjetas td { border: none; padding: .45rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right; }
  .tabla-tarjetas td:first-child { display: block; text-align: left; border-bottom: 1px solid var(--borde); padding-bottom: .6rem; }
  .tabla-tarjetas td[data-titulo]::before { content: attr(data-titulo); color: var(--suave); font-size: .82rem; text-align: left; flex-shrink: 0; }
  /* El valor de cada dato nunca se sale de la tarjeta: los textos largos (correos, códigos) pasan a la línea siguiente */
  .tabla-tarjetas td > * { min-width: 0; overflow-wrap: anywhere; }
  .tabla-tarjetas td a { overflow-wrap: anywhere; }
  /* Varios valores en una misma celda (ej: correo + WhatsApp): uno debajo del otro, alineados a la derecha */
  .valor-celda { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; min-width: 0; text-align: right; }
  .valor-celda br { display: none; }
  .tabla-tarjetas td.num { white-space: normal; }
  .tabla-tarjetas td:last-child .acciones { width: 100%; justify-content: flex-end; }
}

/* Celulares pequeños: en la barra de arriba solo los íconos */
.texto-movil { display: none; }
@media (max-width: 480px) {
  .texto-boton { display: none; }
  /* El botón del panel sí lleva un texto corto ("Panel" / "Eventos"): solo con el ícono no se entendía */
  .texto-movil { display: inline; }
  #enlace-panel { padding: .4rem .75rem; font-size: .88rem; }
  header h1 { font-size: .98rem; }
  .pestanas-perfil button { padding: .75rem .8rem; gap: .5rem; }
  .pestanas-perfil .icono-pestana { font-size: 1.35rem; }
}

/* ---------- Mensajes ---------- */
.mensaje { padding: .8rem 1rem; border-radius: 12px; margin: .6rem 0; }
.mensaje.ok { background: rgba(47, 212, 138, .1); border: 1px solid rgba(47, 212, 138, .3); color: #7ff0bd; }
.mensaje.error { background: rgba(255, 77, 106, .1); border: 1px solid rgba(255, 77, 106, .3); color: #ff9aac; }

/* Documentos de texto (política de datos) */
.documento { max-width: 760px; margin: 0 auto; }
.documento h3 { margin: 1.6rem 0 .4rem; font-size: 1.1rem; }
.documento p, .documento li { color: #c5cbe3; }
footer a { color: var(--suave); }
/* Aviso "📲 Instala la app" debajo de la barra de arriba */
.aviso-app {
  max-width: 1080px; margin: .9rem auto 0; padding: .75rem .9rem; width: calc(100% - 2.5rem);
  border-radius: var(--radio); border: 1px solid rgba(47, 107, 255, .55);
  background: linear-gradient(135deg, rgba(47, 107, 255, .22), rgba(24, 200, 255, .12)), var(--superficie);
  box-shadow: 0 8px 28px rgba(47, 107, 255, .25);
}
.aviso-app-fila { display: flex; align-items: center; gap: .8rem; }
.aviso-app img { border-radius: 11px; flex-shrink: 0; }
.aviso-app-texto { flex: 1; min-width: 0; display: grid; gap: .1rem; line-height: 1.3; }
.aviso-app-texto span { color: #c5cbe3; font-size: .85rem; }
.aviso-app-instalar { flex-shrink: 0; padding: .6rem 1.1rem; white-space: nowrap; }
.aviso-app-cerrar {
  flex-shrink: 0; width: 2rem; height: 2rem; padding: 0; background: transparent; color: var(--suave); box-shadow: none;
}
.aviso-app-cerrar:hover { background: rgba(255, 255, 255, .08); color: var(--texto); transform: none; box-shadow: none; }
.aviso-app-ayuda { margin: .6rem 0 0; font-size: .88rem; color: #dfe3f5; line-height: 1.5; }
@media (max-width: 480px) {
  .aviso-app { width: calc(100% - 2rem); }
  .aviso-app-fila { flex-wrap: wrap; }
  .aviso-app-texto { flex-basis: calc(100% - 44px - 2rem - 1.6rem); }
  .aviso-app-instalar { order: 4; width: 100%; }
}

/* Contacto al final de la página */
.contacto-pie { margin: .6rem 0 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .35rem 1rem; }
.contacto-pie a { color: var(--texto); text-decoration: none; font-weight: 600; }
.contacto-pie a:hover { color: var(--cian); text-decoration: underline; }
.contacto-pie .whatsapp-pie { color: #25d366; }

/* Botón flotante de WhatsApp (abajo a la derecha) */
.boton-whatsapp {
  position: fixed; z-index: 30;
  right: calc(1.1rem + env(safe-area-inset-right, 0px));
  bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  width: 3.6rem; height: 3.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #ffffff;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45), 0 0 0 3px rgba(37, 211, 102, .25);
  transition: transform .15s, box-shadow .2s;
}
.boton-whatsapp:hover { transform: scale(1.07); box-shadow: 0 8px 26px rgba(0, 0, 0, .5), 0 0 0 5px rgba(37, 211, 102, .3); color: #fff; }
.boton-whatsapp:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
@media (max-width: 640px) { .boton-whatsapp { width: 3.25rem; height: 3.25rem; right: .9rem; bottom: .9rem; } }
@media print { .boton-whatsapp { display: none; } }

/* ---------- Pie de página ---------- */
footer { border-top: 1px solid var(--borde); padding: 2rem 1.25rem 5.5rem; /* abajo: espacio para el botón de WhatsApp */ color: var(--suave); font-size: .9rem; text-align: center; }