/* ════════════════════════════════════════════
   FORMULARIO.CSS — Modal de Inscripción
   Estilos del formulario de inscripción
   compartido entre eventos (PTC / PrimaCosa).

   Depende de base.css (variables globales).
   No depende de subpaginas.css.

   CÓMO CAMBIAR COLORES DE PASOS:
   Buscar la sección "VARIABLES DE PASOS" y
   modificar los valores de --paso1 a --paso6.
   ════════════════════════════════════════════ */


/* ── VARIABLES DE PASOS ───────────────────────
   Un color por cada paso del formulario.
   Cambiar aquí afecta: ícono, barra activa,
   botón "Continuar" y acentos del paso.
   ─────────────────────────────────────────── */

:root {
  --paso1: #111111;   /* DNI          — negro           */
  --paso2: #229cc1;   /* Datos        — celeste del sitio*/
  --paso3: #ff7a00;   /* Contacto     — naranja          */
  --paso4: #7c3aed;   /* Procedencia  — violeta          */
  --paso5: #16a34a;   /* Gustos       — verde            */
  --paso6: #db2777;   /* Extras       — rosa             */

  /* Overlay: negro semitransparente */
  --form-overlay: rgba(0, 0, 0, 0.82);

  /* Ancho máximo del panel del modal */
  --form-max-w: 520px;

  /* Radio de esquinas del panel */
  --form-radius: 0px;  /* Sin radius: coherente con estética del sitio */
}


/* ── OVERLAY — FONDO DEL MODAL ────────────────
   Capa fija que cubre toda la pantalla.
   Invisible por defecto (visibility + opacity
   permite animar entrada y salida suavemente).
   Al agregar la clase .form-open se hace visible.
   ─────────────────────────────────────────── */

.form-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;  /* Por encima del scroll-top (999) y del lightbox (1000) */
  background: var(--form-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;

  /* Oculto por defecto */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.28s ease, visibility 0.28s ease;

  /* Scroll interno si el modal es más alto que la pantalla */
  overflow-y: auto;
}

/* Estado visible — agregado por JS al abrir */
.form-overlay.form-open {
  visibility: visible;
  opacity: 1;
}

/* Bloquea el scroll del body mientras el modal está abierto */
body.form-open {
  overflow: hidden;
}


/* ── PANEL CENTRAL DEL MODAL ──────────────────
   El contenedor blanco que agrupa todo el form.
   No tiene border-radius: coherente con el
   estilo "sin redondeos" del sitio.
   ─────────────────────────────────────────── */

.form-panel {
  width: 100%;
  max-width: var(--form-max-w);
  background: var(--white);
  border-radius: var(--form-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;

  /* Sombra offset: firma visual del sitio */
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.35);

  /* Limita la altura y permite scroll interno */
  max-height: 92vh;
}


/* ── ENCABEZADO DEL MODAL ─────────────────────
   Franja negra con nombre del evento y logo.
   El encabezado-imagen (encabezado.jpg) se
   muestra como fondo si existe; si no, fondo negro.

   REEMPLAZAR POR EVENTO:
   El JS setea --form-header-img con la URL de
   la imagen correspondiente al evento actual.
   ─────────────────────────────────────────── */

.form-header {
  background: var(--black);
  background-image: var(--form-header-img, none);
  background-size: cover;
  background-position: center top;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  position: relative;
  flex-shrink: 0;
}

/* Capa oscura sobre la imagen para legibilidad del texto */
.form-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}

/* Texto del encabezado — sobre la capa oscura */
.form-header-text {
  position: relative;
  z-index: 1;
}

.form-header-eyebrow {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.2rem;
}

.form-header-title {
  font-family: var(--font);
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--white);
}

.form-header-sub {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.25rem;
}

/* Logo del evento — esquina superior derecha */
.form-header-logo {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Botón cerrar — X esquina superior derecha del header */
.form-close {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  z-index: 2;
  background: rgba(0, 0, 0, 0.30);
  border: none;
  color: rgba(255, 255, 255, 1);
  font-size: 1rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-family: var(--font-body);
  line-height: 1;
}

.form-close:hover {
  background: rgba(255, 255, 255, 0.25);
  color: var(--white);
}


/* ── BARRA DE PASOS ───────────────────────────
   Fila de tabs: uno por paso del formulario.
   El paso activo se resalta con el color de ese paso.
   Los completados muestran un check (✓).
   ─────────────────────────────────────────── */

.form-steps {
  display: flex;
  border-bottom: 1px solid var(--grey);
  flex-shrink: 0;
  overflow-x: auto;        /* Scroll horizontal en pantallas chicas */
  scrollbar-width: none;   /* Oculta scrollbar en Firefox */
}

.form-steps::-webkit-scrollbar { display: none; } /* Oculta scrollbar en Chrome */

/* Tab individual de paso */
.form-step-tab {
  flex: 1;
  min-width: 60px;
  padding: 0.5rem 0.3rem;
  text-align: center;
  font-family: var(--font);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.35);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  cursor: default;
  user-select: none;
}

/* Paso activo: color de fondo suave + borde inferior de color */
.form-step-tab.activo {
  color: var(--white);
  /* El color de fondo y borde se setea inline por JS con el color del paso */
}

/* Paso completado: texto en el color del paso, sin fondo */
.form-step-tab.completado {
  /* Color seteado inline por JS */
  opacity: 0.7;
}


/* ── CUERPO DEL FORMULARIO ────────────────────
   Zona scrolleable que contiene los campos
   del paso actual. El JS reemplaza el contenido
   al cambiar de paso.
   ─────────────────────────────────────────── */

.form-body {
  padding: 1.4rem 1.4rem 0.8rem;
  overflow-y: auto;
  flex: 1;
}

/* Encabezado interno de cada paso:
   ícono de color + título del bloque */
.form-paso-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.1rem;
}

/* Círculo de color con ícono Font Awesome */
.form-paso-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Color seteado inline por JS con el color del paso */
}

.form-paso-icon i {
  color: var(--white);
  font-size: 0.9rem;
}

.form-paso-titulo {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--black);
  line-height: 1.1;
}


/* ── GRUPOS DE CAMPOS ─────────────────────────
   Cada campo del formulario vive en un .form-group.
   Los grupos en grilla de 2 columnas usan .form-row.
   ─────────────────────────────────────────── */

.form-group {
  margin-bottom: 0.85rem;
}

/* Dos campos lado a lado */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

/* Label del campo */
.form-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 0.3rem;
}

/* Asterisco de campo obligatorio */
.form-label .req {
  color: #e24b4a;
  margin-left: 2px;
}

/* Hint/ayuda debajo del campo */
.form-hint {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: rgba(0, 0, 0, 0.45);
  margin-top: 0.25rem;
  line-height: 1.4;
}


/* ── INPUTS, SELECTS, TEXTAREAS ───────────────
   Estilo base coherente con la estética del sitio:
   sin border-radius, borde negro, foco naranja.
   ─────────────────────────────────────────── */

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--black);
  background: var(--white);
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 0;         /* Sin redondeos: coherente con el sitio */
  padding: 0.55rem 0.75rem;
  outline: none;
  transition: border-color 0.18s;
  appearance: none;
  -webkit-appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(0, 0, 0, 0.28);
}

/* Foco: borde naranja (color de acento del sitio) */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--orange);
}

/* Select: flecha personalizada */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.2rem;
  cursor: pointer;
}

/* Textarea */
.form-textarea {
  resize: vertical;
  min-height: 70px;
  line-height: 1.5;
}

/* Campo con error: borde rojo */
.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: #e24b4a;
}

/* Mensaje de error bajo el campo */
.form-error-msg {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: #e24b4a;
  margin-top: 0.2rem;
  display: none;   /* Mostrado por JS cuando hay error */
}

.form-error-msg.visible { display: block; }


/* ── GRUPO CIUDAD — TEXTO LIBRE ───────────────
   Cuando el usuario elige "Mi ciudad no está...",
   aparece un input de texto libre debajo del select.
   ─────────────────────────────────────────── */

.form-ciudad-libre {
  margin-top: 0.5rem;
  display: none;   /* Mostrado por JS */
}

.form-ciudad-libre.visible { display: block; }


/* ── RADIO Y CHECKBOX PERSONALIZADOS ──────────
   Botones de opción estilizados como píldoras/bloques.
   Más amigables para táctil (área grande).
   ─────────────────────────────────────────── */

.form-radio-group,
.form-check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: 100%;
}

/* Cada opción de radio o checkbox */
.form-radio-label,
.form-check-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--black);
  padding: 0.45rem 0.85rem;
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
  line-height: 1.2;
  flex: 1;          /* Cada botón ocupa el espacio disponible por igual */
  min-width: 80px;  /* Mínimo para que no queden muy angostos */
  text-align: center;
}

/* Checkboxes: NO se estiran, quedan a su tamaño natural */
.form-check-label {
  flex: 0 1 auto;
  min-width: unset;
  justify-content: flex-start;
}
.form-radio-label input,
.form-check-label input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Estado seleccionado: fondo negro, texto blanco */
.form-radio-label:has(input:checked),
.form-check-label:has(input:checked) {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

/* Hover */
.form-radio-label:hover,
.form-check-label:hover {
  border-color: var(--black);
  background: rgba(0, 0, 0, 0.06);
}


/* ── BLOQUE INFORMATIVO / AVISO ───────────────
   Caja con fondo de color suave para mensajes
   de info, avisos legales, instrucciones.
   ─────────────────────────────────────────── */

.form-aviso {
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.55;
  margin-bottom: 0.85rem;
}

.form-aviso.info {
  background: #e6f1fb;
  color: #185fa5;
  border-left: 3px solid #378add;
}

.form-aviso.alerta {
  background: #fbeaf0;
  color: #993556;
  border-left: 3px solid #db2777;
}

.form-aviso i {
  margin-right: 0.4rem;
  vertical-align: -1px;
}

/* Sub-bloque informativo para el aviso legal
   de restricciones de acercamiento */
.form-aviso-legal {
  background: rgba(0, 0, 0, 0.04);
  border-left: 3px solid rgba(0, 0, 0, 0.15);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.6;
  margin-top: 0.5rem;
}

.form-aviso-legal strong { color: var(--black); }


/* ── BLOQUE ALCOHOL CONDICIONAL ───────────────
   Se muestra u oculta según la respuesta a
   "¿Tomás alcohol?". El JS agrega/quita .visible.
   ─────────────────────────────────────────── */

.form-alcohol-tipos {
  background: var(--grey);
  padding: 0.9rem 1rem;
  margin-top: 0.6rem;
  display: none;   /* Mostrado por JS si responde Sí */
}

.form-alcohol-tipos.visible { display: block; }

.form-alcohol-tipos .form-label { margin-bottom: 0.5rem; }


/* ── PIE DEL MODAL ────────────────────────────
   Barra inferior fija: botones Atrás / Continuar
   y contador de pasos.
   ─────────────────────────────────────────── */

.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.4rem;
  border-top: 1px solid var(--grey);
  flex-shrink: 0;
  gap: 0.75rem;
}

.form-footer-izq {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

/* Contador "Paso X de Y" */
.form-contador {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Barra de progreso */
.form-progreso {
  height: 3px;
  background: var(--grey);
  flex: 1;
  max-width: 80px;
}

.form-progreso-fill {
  height: 100%;
  background: var(--black);
  transition: width 0.3s ease;
  /* Ancho seteado inline por JS */
}

/* Botón Atrás */
.form-btn-atras {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.5);
  background: none;
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  padding: 0.55rem 1rem;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
  display: none;   /* Oculto en el paso 1, mostrado por JS */
}

.form-btn-atras:hover {
  color: var(--black);
  border-color: var(--black);
  background: rgba(0, 0, 0, 0.05);
}

/* Botón Continuar / Enviar
   Color de fondo seteado inline por JS con
   el color del paso actual */
.form-btn-siguiente {
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white);
  border: none;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 0.18s, transform 0.18s;
}

.form-btn-siguiente:hover {
  opacity: 0.88;
  transform: translateX(2px);
}

.form-btn-siguiente:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}


/* ── PANTALLA DE ÉXITO ────────────────────────
   Se muestra al completar y enviar el formulario.
   Reemplaza el contenido del panel.
   ─────────────────────────────────────────── */

.form-exito {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 2rem;
  gap: 1rem;
}

/* Ícono grande de checkmark */
.form-exito-icon {
  width: 64px;
  height: 64px;
  background: var(--black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.form-exito-icon i {
  color: var(--white);
  font-size: 1.8rem;
}

.form-exito h2 {
  font-family: var(--font);
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--black);
  line-height: 1;
}

.form-exito p {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.6;
  max-width: 340px;
}

/* Imagen de pie en la pantalla de éxito */
.form-exito-img {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  object-position: center;
  margin-top: 0.5rem;
}

/* Botón de cerrar en la pantalla de éxito */
.form-btn-cerrar {
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white);
  background: var(--black);
  border: none;
  padding: 0.7rem 1.8rem;
  cursor: pointer;
  transition: background 0.2s;
}

.form-btn-cerrar:hover { background: var(--orange); }


/* ── BOTONES DE CONFIRMACIÓN ──────────────────
   Usados en el panel "¿Salir del formulario?".
   ─────────────────────────────────────────── */

.form-btn-confirmar {
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.65rem 1.5rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  border: none;
}

/* "No, seguir cargando" — acción principal/positiva */
.form-btn-confirmar.continuar {
  background: var(--black);
  color: var(--white);
}
.form-btn-confirmar.continuar:hover { background: var(--orange); }

/* "Sí, salir" — acción secundaria/destructiva (menos énfasis) */
.form-btn-confirmar.salir {
  background: transparent;
  color: rgba(0,0,0,0.55);
  border: 1.5px solid rgba(0,0,0,0.2);
}
.form-btn-confirmar.salir:hover {
  border-color: var(--black);
  color: var(--black);
  background: rgba(0,0,0,0.05);
}


/* ── PANTALLA DE DUPLICADO ────────────────────
   Se muestra cuando el DNI ya existe en la BDD
   para el mismo encuentro (ya inscripto).
   ─────────────────────────────────────────── */

.form-duplicado {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  gap: 0.8rem;
}

.form-duplicado-icon {
  width: 56px;
  height: 56px;
  background: var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-duplicado-icon i { color: var(--white); font-size: 1.5rem; }

.form-duplicado h2 {
  font-family: var(--font);
  font-size: 1.4rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--black);
}

.form-duplicado p {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.6;
}


/* ── IMAGEN DE PIE ────────────────────────────
   Imagen decorativa al final del último paso,
   antes de enviar. Configurable por evento.
   ─────────────────────────────────────────── */

.form-pie-img {
  width: 100%;
  max-height: 120px;
  object-fit: cover;
  object-position: center;
  display: block;
  margin-top: 0.5rem;
}


/* ── SPINNER DE CARGA ─────────────────────────
   Aro giratorio mientras se consulta la BDD
   o se envían los datos.
   ─────────────────────────────────────────── */

.form-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(0, 0, 0, 0.12);
  border-top-color: var(--black);
  border-radius: 50%;
  animation: form-spin 0.75s linear infinite;
  margin: 1rem auto;
}

@keyframes form-spin {
  to { transform: rotate(360deg); }
}


/* ── RESPONSIVE ───────────────────────────────
   En móvil el modal ocupa casi toda la pantalla,
   sin sombra offset (queda cortada).
   ─────────────────────────────────────────── */

@media (max-width: 560px) {
  /* Overlay: centrado vertical en móvil también (no pegado al borde) */
  .form-overlay  { padding: 0.75rem; align-items: center; }
  .form-panel    { max-width: 100%; max-height: 94vh; box-shadow: none; }
  .form-row      { grid-template-columns: 1fr; } /* Campos en columna en móvil */
  .form-body     { padding: 1.1rem 1rem 0.6rem; }
  .form-footer   { padding: 0.75rem 1rem; }

  /* Tabs: en móvil muestra solo el número del paso para no aplastar texto */
  .form-step-tab {
    font-size: 0;           /* Oculta el texto completo */
    min-width: 0;
    padding: 0.5rem 0;
    flex: 1;
  }

  /* Muestra solo el número via data-num attribute seteado por JS */
  .form-step-tab::before {
    content: attr(data-num);
    font-family: var(--font);
    font-size: 0.65rem;
    font-weight: 700;
    display: block;
  }

  /* El paso activo muestra también la etiqueta corta */
  .form-step-tab.activo {
    font-size: 0.55rem;     /* Reactiva texto solo en el activo */
    padding: 0.4rem 0.2rem;
  }

  .form-step-tab.activo::before {
    display: none;          /* El activo muestra texto, no número */
  }
}