/* Integra CODE — estilos, sin frameworks externos.
   Rediseño morado (skill ui-ux-pro-max, dominio color): base violeta profunda +
   fucsia como pareja de degradado + dorado como acento premium puntual.
   Tipografia se mantiene: Righteous (display) + Poppins (cuerpo), decision ya
   tomada en una ronda anterior de diseño — no se revierte sin motivo. */

:root {
  /* Marca — morado como color base */
  --color-primary: #7c3aed;
  --color-primary-hover: #6d28d9;
  --color-primary-active: #5b21b6;
  --color-on-primary: #ffffff;

  --color-secondary: #c026d3;
  --color-secondary-soft: #f0abfc;
  --color-on-secondary: #ffffff;

  --color-accent: #fbbf24;
  --color-on-accent: #451a03;

  /* Hero oscuro — profundidad real, no morado plano */
  --color-hero-deep: #1e1033;
  --color-hero-mid: #3b0764;
  --color-hero-vivid: #6d28d9;
  --color-on-dark: #f6f0ff;
  --color-on-dark-muted: #e6d9fb;

  /* Superficies claras (donde vive la mayor parte del texto y del formulario) */
  --color-background: #faf7ff;
  --color-surface: #ffffff;
  --color-surface-alt: #f5efff;
  --color-foreground: #2e1065;
  --color-muted-foreground: #64748b;
  --color-border: #ddc9f8;
  --color-border-strong: #c4a6f0;

  --color-destructive: #dc2626;
  --color-on-destructive: #ffffff;
  --color-success: #16a34a;
  --color-success-bg: #ecfdf5;
  --color-success-fg: #065f46;
  --color-error-bg: #fef2f2;
  --color-error-fg: #7f1d1d;
  --color-ring: #7c3aed;

  --font-display: "Righteous", "Poppins", sans-serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  --shadow-card: 0 1px 2px rgba(46, 16, 101, 0.06), 0 10px 28px rgba(76, 29, 149, 0.1);
  --shadow-card-hover: 0 4px 10px rgba(46, 16, 101, 0.1), 0 16px 36px rgba(124, 58, 237, 0.18);
  --shadow-glow: 0 8px 24px rgba(124, 58, 237, 0.35);

  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}

* {
  box-sizing: border-box;
}

/* html necesita el mismo fondo que body: si solo body lo tiene, un rebote
   de scroll (overscroll) o el primer pintado de la pagina pueden asomar el
   hueco sin estilo de html por encima, y se ve como una "caja" de mas antes
   del hero. */
html {
  background: var(--color-background);
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: radial-gradient(circle at 50% -10%, #f0e2ff 0%, var(--color-background) 55%);
  background-attachment: fixed;
  color: var(--color-foreground);
  line-height: 1.55;
  font-size: 16px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* ---------- Icono base (sprite via <use>) ---------- */

.icono {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iconos-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icono--relleno {
  fill: currentColor;
  stroke: none;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--color-hero-deep) 0%, var(--color-hero-mid) 48%, var(--color-hero-vivid) 100%);
  color: var(--color-on-dark);
  padding: 2.75rem 1.25rem 3.5rem;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  text-align: center;
}

.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.55;
  pointer-events: none;
}

.hero__blob--1 {
  width: 260px;
  height: 260px;
  top: -90px;
  left: -70px;
  background: var(--color-secondary);
  animation: flotar 14s ease-in-out infinite;
}

.hero__blob--2 {
  width: 220px;
  height: 220px;
  bottom: -110px;
  right: -60px;
  background: var(--color-primary);
  animation: flotar 18s ease-in-out infinite reverse;
}

.hero__blob--3 {
  width: 160px;
  height: 160px;
  top: 40%;
  right: 8%;
  background: var(--color-accent);
  opacity: 0.25;
  animation: flotar 11s ease-in-out infinite;
}

@keyframes flotar {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(14px, -18px) scale(1.06); }
}

.hero__contenido {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
}

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.15rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0 0 0.85rem;
  color: var(--color-foreground);
  text-align: center;
}

/* Dentro del hero oscuro el titulo necesita el par de color claro + su
   propia animacion de entrada; fuera de el (p.ej. admin.ejs, que no tiene
   .hero) el h1 usa el color oscuro de arriba sobre el fondo claro.

   El h1 de index.ejs pasó de una sola marca ("Integra CODE") a las 4
   organizaciones separadas por "x" — un string ~4x mas largo. Con Righteous
   (display, trazo ancho) al mismo tamaño que antes desbordaba/se cortaba en
   320-375px. Se achica el tamaño, se ajusta line-height/letter-spacing para
   que respire en 3 lineas en mobile, y se deja que el navegador reparta el
   salto de linea solo (text-wrap: balance, con fallback silencioso a wrap
   normal donde no hay soporte) en vez de forzar <br> fijos — así el texto
   accesible sigue siendo exactamente la cadena completa, sin fragmentar. */
.hero h1 {
  color: var(--color-on-dark);
  animation: aparecer 0.6s ease 0.08s both;
  font-size: 1.5rem;
  line-height: 1.35;
  letter-spacing: 0.005em;
  word-spacing: 0.06em;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.hero__lugar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.4rem 0.9rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: var(--color-on-dark-muted);
  font-size: 0.85rem;
  font-weight: 600;
  animation: aparecer 0.6s ease 0.16s both;
}

.hero__lugar .icono {
  width: 1rem;
  height: 1rem;
  color: var(--color-accent);
}

/* ---------- Layout general ---------- */

.contenedor {
  max-width: 480px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

/* Cuando el hero ya precede al contenido (index.ejs), su propio padding
   inferior hace de separador — evita duplicar el espacio arriba.
   admin.ejs no tiene .hero, asi que conserva el padding-top de arriba. */
.hero + .contenedor {
  padding-top: 2rem;
}

h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 0.85rem;
  color: var(--color-foreground);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

h2 .icono {
  color: var(--color-primary);
  width: 1.2rem;
  height: 1.2rem;
}

section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.3rem;
  margin-bottom: 1.15rem;
  box-shadow: var(--shadow-card);
  animation: aparecer 0.5s ease both;
}

main.contenedor > *:nth-child(1) { animation-delay: 0.05s; }
main.contenedor > *:nth-child(2) { animation-delay: 0.1s; }
main.contenedor > *:nth-child(3) { animation-delay: 0.15s; }
main.contenedor > *:nth-child(4) { animation-delay: 0.2s; }
main.contenedor > *:nth-child(5) { animation-delay: 0.25s; }
main.contenedor > *:nth-child(6) { animation-delay: 0.3s; }

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Precios ---------- */

/* 3 columnas fijas (antes eran 2, con solo_entrada/entrada_bus). Con el
   tercer tipo de entrada (solo_bus) un `1fr 1fr` dejaba la tercera tarjeta
   sola en una segunda fila a media pantalla; tres columnas iguales mantienen
   la fila pareja. `minmax(0, 1fr)` en vez de `1fr` evita que un texto largo
   e incortable desborde la grilla (1fr tiene min-width:auto por defecto).
   El contenedor es de 480px como maximo, asi que a ~100px por columna el
   nombre y el precio se parten en dos lineas en celulares angostos — se
   parten los tres igual, asi que la fila sigue viendose simetrica. */
.precios-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.precios-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 0.9rem 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  overflow-wrap: break-word;
}

.precios-item__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.precios-item__nombre {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-foreground);
}

.precios-item__precio {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1rem;
}

/* ---------- Instrucciones de pago ---------- */

.instrucciones-pago__cuerpo {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.instrucciones-pago__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
  color: #fff;
}

.instrucciones-pago p {
  margin: 0;
}

.instrucciones-pago strong {
  color: var(--color-secondary);
  font-weight: 700;
}

/* ---------- Alertas ---------- */

.alerta {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.1rem;
  font-size: 0.95rem;
  border: 1px solid transparent;
  animation: aparecer 0.4s ease both;
}

/* .alerta { display: flex } gana por especificidad al estilo por defecto del
   navegador para [hidden] (ambos son 0-1-0, pero un author style siempre le
   gana a la hoja de estilos del user agent) — sin esto, #mensaje-exito y
   #mensaje-error-general (ocultos con el atributo `hidden` en el HTML hasta
   que JS los necesita) quedaban visibles vacíos todo el tiempo. */
.alerta[hidden] {
  display: none;
}

.alerta::before {
  content: "";
  flex-shrink: 0;
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.1rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.alerta-agotado {
  background: var(--color-error-bg);
  color: var(--color-error-fg);
  border-color: #fecaca;
}

.alerta-agotado::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f1d1d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21.5 20h-19z'/%3E%3Cpath d='M12 9.5v4.5'/%3E%3Ccircle cx='12' cy='17' r='0.9' fill='%237f1d1d' stroke='none'/%3E%3C/svg%3E");
}

.alerta-exito {
  background: var(--color-success-bg);
  color: var(--color-success-fg);
  border-color: #bbf7d0;
}

.alerta-exito::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23065f46' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.5l2.3 2.3 4.7-5.2'/%3E%3C/svg%3E");
}

.alerta-error {
  background: var(--color-error-bg);
  color: var(--color-error-fg);
  border-color: #fecaca;
}

.alerta-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f1d1d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5'/%3E%3Ccircle cx='12' cy='15.5' r='0.9' fill='%237f1d1d' stroke='none'/%3E%3C/svg%3E");
}

/* ---------- Formulario ---------- */

form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.35rem;
  box-shadow: var(--shadow-card);
  animation: aparecer 0.5s ease both;
}

.campo {
  margin-bottom: 1.25rem;
}

.campo--fieldset {
  border: 0;
  padding: 0;
}

label,
legend {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  margin-bottom: 0.45rem;
  padding: 0;
  font-size: 0.92rem;
  color: var(--color-foreground);
}

label .icono,
legend .icono {
  color: var(--color-primary);
  width: 1.05rem;
  height: 1.05rem;
}

input[type="text"],
input[type="email"],
input[type="file"],
select {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.8rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  background: #fff;
  color: var(--color-foreground);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input[type="file"] {
  padding: 0.5rem;
  cursor: pointer;
}

input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.55rem 1rem;
  border: none;
  border-radius: 8px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background var(--transition-fast);
}

input[type="file"]::file-selector-button:hover {
  background: var(--color-primary-hover);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237c3aed'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.1rem;
  padding-right: 2.25rem;
  cursor: pointer;
}

select:invalid {
  color: var(--color-muted-foreground);
}

.campo-checkbox {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  font-weight: 500;
  cursor: pointer;
}

.campo-checkbox input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.enlace-terminos {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.enlace-terminos:hover {
  color: var(--color-primary-hover);
}

.enlace-terminos:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Popup de Terminos y Condiciones ---------- */

/* Centrado forzado explicitamente en vez de confiar en el centrado por
   defecto de dialog:modal (position:fixed + inset:0 + margin:auto del user
   agent stylesheet) — ese mecanismo depende de que ningun estilo propio
   toque position/margin/inset, y resulto inconsistente entre navegadores:
   el popup aparecia "pegado" en una esquina en vez de centrado y flotando
   sobre un fondo oscurecido. Fijar top/left/transform a mano es robusto sin
   importar el navegador ni si el <dialog> entra o no en modo :modal. */
.modal-terminos {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  width: min(94vw, 640px);
  max-height: 85vh;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  color: var(--color-foreground);
  overflow: hidden;
}

/* El <form method="dialog"> es ahora quien organiza cabecera/cuerpo/pie en
   columna (el <dialog> en si solo se ocupa de tamaño/posicion/recorte). */
.modal-terminos__marco {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

.modal-terminos::backdrop {
  background: rgba(30, 16, 51, 0.62);
  backdrop-filter: blur(2px);
}

.modal-terminos[open] {
  animation: modalTerminosAparecer 0.22s ease both;
}

@keyframes modalTerminosAparecer {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 14px));
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.modal-terminos__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, var(--color-hero-mid), var(--color-hero-vivid));
  color: var(--color-on-dark);
  flex-shrink: 0;
}

.modal-terminos__cabecera h2 {
  /* Sin este "color" explicito, la regla global "h2 { color: var(--color-
     foreground) }" (para los <h2> de Precios / Como pagar, pensada para
     texto oscuro sobre fondo claro) le gana por especificidad al color
     heredado de .modal-terminos__cabecera — un h2 concreto SIEMPRE le gana
     a un color heredado del padre, sin importar la especificidad de este
     ultimo. Resultado real visto en produccion: texto casi negro sobre el
     degradado morado oscuro del header, ilegible. */
  color: var(--color-on-dark);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.3;
}

.modal-terminos__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-on-dark);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.modal-terminos__cerrar:hover {
  background: rgba(255, 255, 255, 0.26);
}

.modal-terminos__cerrar .icono {
  width: 1.1rem;
  height: 1.1rem;
}

.modal-terminos__cuerpo {
  padding: 1.25rem;
  overflow-y: auto;
  font-size: 0.9rem;
  line-height: 1.6;
}

.modal-terminos__cuerpo h3 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 1.5rem 0 0.6rem;
}

.modal-terminos__cuerpo h3:first-child {
  margin-top: 0;
}

.modal-terminos__cuerpo p {
  margin: 0 0 0.75rem;
}

.modal-terminos__cuerpo ol {
  margin: 0 0 0.9rem;
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.modal-terminos__pie {
  flex-shrink: 0;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.modal-terminos__boton-entendido {
  width: 100%;
  min-height: 46px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.modal-terminos__boton-entendido:hover {
  background: var(--color-primary-hover);
}

input::placeholder {
  color: var(--color-muted-foreground);
}

input:hover,
select:hover {
  border-color: var(--color-border-strong);
}

input:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--color-ring);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.22);
}

.opciones-entrada {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.tarjeta-entrada {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 44px;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.98rem;
  cursor: pointer;
  background: #fff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.tarjeta-entrada input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.tarjeta-entrada__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--color-surface-alt);
  color: var(--color-primary);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.tarjeta-entrada__texto {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tarjeta-entrada__nombre {
  color: var(--color-foreground);
}

.tarjeta-entrada__precio {
  color: var(--color-primary);
  font-weight: 700;
}

.tarjeta-entrada:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
}

.tarjeta-entrada:has(input:disabled) {
  opacity: 0.62;
  cursor: not-allowed;
}

.tarjeta-entrada:has(input:disabled):hover {
  border-color: var(--color-border);
  transform: none;
}

.tarjeta-entrada:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.22);
}

.tarjeta-entrada:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-surface-alt);
  box-shadow: 0 0 0 2px var(--color-primary) inset;
}

.tarjeta-entrada:has(input:checked) .tarjeta-entrada__icono {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.error-campo {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-destructive);
  font-size: 0.82rem;
  margin: 0.35rem 0 0;
  min-height: 1em;
}

.error-campo:not(:empty)::before {
  content: "";
  flex-shrink: 0;
  width: 0.95rem;
  height: 0.95rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5'/%3E%3Ccircle cx='12' cy='15.5' r='0.9' fill='%23dc2626' stroke='none'/%3E%3C/svg%3E");
}

/* :not(.modal-terminos__cerrar) a proposito: la X del popup de T&C tambien
   es type="submit" (cierre nativo via <form method="dialog">), pero debe
   verse como un icono circular chico, no como este boton primario grande —
   se excluye aca en vez de pelear especificidad contra .modal-terminos__cerrar. */
button[type="submit"]:not(.modal-terminos__cerrar) {
  width: 100%;
  min-height: 50px;
  padding: 0.85rem;
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-size: 1.04rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-glow);
  transition: transform var(--transition-fast), box-shadow var(--transition-base), filter var(--transition-fast);
}

button[type="submit"]:not(.modal-terminos__cerrar):hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.45);
  transform: translateY(-1px);
}

button[type="submit"]:not(.modal-terminos__cerrar):active:not(:disabled) {
  transform: scale(0.98);
}

button[type="submit"]:not(.modal-terminos__cerrar):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.32);
}

button[type="submit"]:not(.modal-terminos__cerrar):disabled {
  background: var(--color-border-strong);
  box-shadow: none;
  cursor: not-allowed;
}

/* ---------- Vista admin ---------- */

.subtitulo {
  color: var(--color-muted-foreground);
  font-size: 0.9rem;
  margin: -0.5rem 0 1.5rem;
  text-align: center;
}

/* La tabla de registros tiene 7 columnas: en pantallas grandes (el
   organizador la mira casi siempre desde una compu) aprovecha mas ancho
   que el resto de la app, en vez de quedar apretada en 480px. */
.contenedor--admin {
  max-width: 480px;
}

@media (min-width: 900px) {
  .contenedor--admin {
    max-width: 880px;
  }
}

@media (min-width: 1200px) {
  .contenedor--admin { max-width: 1200px; }
}

.resumen-aforo__linea {
  margin: 0 0 1rem;
  font-size: 1rem;
}

/* ---------- Formulario de precios (admin) ---------- */

/* Reusa el estilo base de `form` (superficie, borde, sombra) y el de `.campo`
   / `input[type="text"]` / `button[type="submit"]` del formulario publico, en
   vez de inventar un lenguaje visual nuevo para el panel. */
.form-precios__nota {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  color: var(--color-muted-foreground);
  line-height: 1.5;
}

.campo--precio:last-of-type {
  margin-bottom: 1.5rem;
}

.campo--precio__fila {
  display: flex;
  align-items: stretch;
}

.campo--precio__fila input {
  width: 100%;
}

.campo--precio__ayuda {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--color-muted-foreground);
}

.campo--precio__ayuda strong {
  color: var(--color-primary);
}

.lista-errores {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

.lista-errores li + li {
  margin-top: 0.25rem;
}

.conteo-organizaciones {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
  border-top: 1px dashed var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.conteo-organizaciones__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  font-size: 0.85rem;
}

.conteo-organizaciones__icono {
  display: inline-flex;
  color: var(--color-primary);
}

.conteo-organizaciones__icono .icono {
  width: 0.95rem;
  height: 0.95rem;
}

.conteo-organizaciones__nombre {
  color: var(--color-foreground);
  font-weight: 500;
}

.conteo-organizaciones__cantidad {
  color: var(--color-primary);
  font-weight: 700;
  min-width: 1.2em;
  text-align: right;
}

.tabla-admin__envoltura {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.tabla-admin {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.tabla-admin th,
.tabla-admin td {
  border-bottom: 1px solid var(--color-border);
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: middle;
}

.tabla-admin th {
  background: var(--color-surface-alt);
  color: var(--color-foreground);
  font-weight: 700;
  white-space: nowrap;
}

.tabla-admin tbody tr:last-child td {
  border-bottom: none;
}

.tabla-admin tr:hover td {
  background: #faf5ff;
}

.tabla-admin__col-id {
  width: 3.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted-foreground);
}

.tabla-admin__col-fecha {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted-foreground);
}

.tabla-admin__vacio {
  text-align: center;
  padding: 1.5rem;
  color: var(--color-muted-foreground);
}

@media (min-width: 640px) {
  .hero + .contenedor {
    padding-top: 0;
  }

  .hero {
    padding: 3.5rem 1.5rem 4.25rem;
  }

  h1 {
    font-size: 2.6rem;
  }

  .hero h1 {
    font-size: 2.1rem;
    line-height: 1.3;
    max-width: 460px;
  }
}

/* Estados legibles por texto y color, compartidos por panel y puerta. */
.etiqueta {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
}
.etiqueta--aprobado, .puerta__estado--ok {
  color: var(--color-success-fg);
  background: var(--color-success-bg);
}
.etiqueta--rechazado, .puerta__estado--invalido {
  color: var(--color-error-fg);
  background: var(--color-error-bg);
}
.etiqueta--pendiente, .puerta__estado--usado, .puerta__estado--pase {
  color: var(--color-foreground);
  background: var(--color-surface-alt);
}
.acciones-entrada {
  margin-top: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  animation: none;
}
.acciones-entrada button[type="submit"] {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}
.acciones-entrada button[type="submit"].boton-rechazar {
  background: var(--color-error-bg);
  color: var(--color-error-fg);
  border: 1px solid currentColor;
  box-shadow: none;
}
.celda-entrada { min-width: 13rem; }
.celda-entrada__envio, .celda-entrada__ingreso {
  margin: 0.35rem 0;
  font-size: 0.85rem;
}
.resumen-entradas__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.5rem;
  padding-left: 1.25rem;
}
.resumen-entradas__ayuda { font-size: 0.9rem; }
.puerta {
  max-width: 32rem;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  text-align: center;
}
.puerta__estado {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 1rem 0;
  padding: 1rem;
  border-radius: var(--radius-sm);
  border: 2px solid currentColor;
}
.puerta__detalle { font-size: 1.1rem; }
.puerta__datos {
  text-align: left;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 1rem;
  margin: 1.5rem 0;
}
.puerta__datos dt { font-weight: 600; }
.puerta__datos dd { margin: 0; overflow-wrap: anywhere; }
.puerta__deshacer button { min-height: 44px; padding: 0.6rem 1.2rem; }
.puerta__ayuda { font-size: 0.9rem; margin-top: 1rem; }
@media (max-width: 24rem) {
  .puerta__estado { font-size: 1.5rem; }
  .puerta__datos { grid-template-columns: 1fr; gap: 0.1rem; }
  .puerta__datos dd { margin-bottom: 0.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}