/* =============================================================
   estilos-bxe.css
   Hoja de estilos del cuestionario de empleabilidad BxE.
   Organización:
     1. Reset y variables globales
     2. Body
     3. Header y navegación
     4. Hero (cabecera visual)
     5. Barra de progreso
     6. Contenedor del formulario
     7. Sección de datos personales
     8. Bloques de dimensiones (preguntas)
     9. Pregunta abierta
    10. Fila de privacidad y botón de envío
    11. Pantalla de éxito
    12. Overlay de carga (spinner)
    13. Mensajes de error
    14. Footer
    15. Responsive (móvil)
   ============================================================= */


/* ─────────────────────────────────────────
   1. RESET Y VARIABLES GLOBALES
   Eliminamos márgenes y paddings por defecto
   de todos los elementos, y definimos la
   paleta de colores y radios de BxE como
   variables CSS para reutilizarlas en todo
   el documento sin repetir valores.
   ───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box; /* El padding y border se incluyen en el ancho total */
  margin: 0;
  padding: 0;
}

:root {
  /* Paleta principal BxE */
  --bxe-blue:        #1a5fa8; /* Azul corporativo principal */
  --bxe-blue-dark:   #0e3d70; /* Azul oscuro (header, footer) */
  --bxe-blue-light:  #e8f1fb; /* Azul muy claro (fondos suaves) */
  --bxe-teal:        #1aab8a; /* Verde-azulado (acentos, degradados) */
  --bxe-teal-dark:   #0d7a62; /* Verde-azulado oscuro */
  --bxe-orange:      #f05a1a; /* Naranja corporativo (CTA, botones) */
  --bxe-orange-light:#fff0e8; /* Naranja muy claro (fondos de alerta) */
  --bxe-green:       #2fba6e; /* Verde éxito */

  /* Escala de grises para texto */
  --text-dark:  #1a1a2e; /* Texto principal, casi negro */
  --text-mid:   #4a5568; /* Texto secundario */
  --text-light: #718096; /* Texto de ayuda, placeholders */

  /* Colores de fondo y borde */
  --bg:     #f7f9fc; /* Fondo general de la página */
  --white:  #ffffff;
  --border: #dde3ec; /* Borde de tarjetas e inputs */

  /* Radios de borde */
  --radius:    12px; /* Tarjetas, bloques grandes */
  --radius-sm:  8px; /* Inputs, elementos pequeños */
}


/* ─────────────────────────────────────────
   2. BODY
   Tipografía base y fondo de página.
   ───────────────────────────────────────── */
body {
  font-family: 'DM Sans', sans-serif; /* Fuente principal importada de Google Fonts */
  background: var(--bg);
  color: var(--text-dark);
  min-height: 100vh; /* Asegura que el footer llega siempre al fondo */
}


/* ─────────────────────────────────────────
   3. HEADER Y NAVEGACIÓN
   Barra fija en la parte superior con logo
   y links de navegación.
   ───────────────────────────────────────── */
header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-logo-img {
  max-width: 420px;
  width: 100%;
  height: auto;
}

.btn-cta:hover {
  background: #d44a0e; /* Naranja más oscuro al hover */
}


/* ─────────────────────────────────────────
   4. HERO (CABECERA VISUAL)
   Bloque de presentación con degradado de
   colores BxE y patrón SVG de fondo sutil.
   ───────────────────────────────────────── */
.hero {
  background: linear-gradient(
    135deg,
    var(--bxe-blue-dark) 0%,
    var(--bxe-blue)      60%,
    var(--bxe-teal)      100%
  );
  color: white;
  padding: 4rem 2rem 5rem; /* Más padding abajo para que la barra de progreso se superponga */
  text-align: center;
  position: relative; /* Necesario para el pseudo-elemento ::before */
  overflow: hidden;
}

/* Patrón de círculos semitransparentes superpuesto al degradado */
.hero::before {
  content: '';
  position: absolute;
  inset: 0; /* Ocupa todo el hero */
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none; /* No interfiere con clics */
}

/* Pastilla superior con el nombre del proyecto */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(4px); /* Efecto cristal sobre el degradado */
}

/* Título principal del hero */
.hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem); /* Tamaño fluido según el viewport */
  line-height: 1.2;
  margin-bottom: 1rem;
  max-width: 640px;
  margin-inline: auto; /* Centrado horizontal */
}

/* Texto en cursiva y color dorado dentro del h1 */
.hero h1 em {
  font-style: italic;
  color: #ffd580;
}

.hero p {
  font-size: 1rem;
  opacity: 0.85;
  max-width: 520px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}

/* Fila de pasos numerados debajo del párrafo */
.hero-steps {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap; /* Se adapta a pantallas estrechas */
  font-size: 0.82rem;
  opacity: 0.9;
}

.hero-step {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Círculo numerado de cada paso */
.hero-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}


/* ─────────────────────────────────────────
   5. BARRA DE PROGRESO
   Tarjeta flotante que se superpone al hero
   (margen negativo) y muestra el porcentaje
   de preguntas respondidas en tiempo real.
   ───────────────────────────────────────── */
.progress-container {
  max-width: 760px;
  margin: -1.5rem auto 0; /* Margen negativo: se solapa con el hero */
  padding: 0 1.5rem;
  position: relative;
  z-index: 10; /* Por encima del hero */
}

.progress-card {
  background: white;
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  box-shadow: 0 4px 24px rgba(26, 95, 168, 0.12); /* Sombra azulada suave */
  display: flex;
  align-items: center;
  gap: 1rem;
}

.progress-label {
  font-size: 0.8rem;
  color: var(--text-light);
  white-space: nowrap; /* Evita que el texto se parta */
}

/* Pista (track) de la barra */
.progress-bar-wrap {
  flex: 1; /* Ocupa todo el espacio disponible */
  height: 8px;
  background: var(--bxe-blue-light);
  border-radius: 99px;
  overflow: hidden; /* Recorta la barra al track */
}

/* Relleno de la barra (ancho controlado desde JS) */
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--bxe-blue), var(--bxe-teal));
  border-radius: 99px;
  transition: width 0.4s ease; /* Animación suave al actualizar */
  width: 0%; /* Valor inicial; JS lo actualiza */
}

/* Porcentaje numérico a la derecha */
.progress-pct {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bxe-blue);
  min-width: 32px; /* Evita que el layout salte de "9%" a "10%" */
  text-align: right;
}


/* ─────────────────────────────────────────
   6. CONTENEDOR PRINCIPAL DEL FORMULARIO
   Centra y limita el ancho de todos los
   bloques del formulario.
   ───────────────────────────────────────── */
.form-container {
  max-width: 760px;
  margin: 2rem auto 4rem;
  padding: 0 1.5rem;
}


/* ─────────────────────────────────────────
   7. SECCIÓN DE DATOS PERSONALES
   Tarjeta blanca con grid de campos de texto.
   ───────────────────────────────────────── */
.section-personal {
  background: white;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 2rem;
  margin-bottom: 1.5rem;
}

/* Etiqueta de sección en mayúsculas */
.section-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bxe-blue);
  margin-bottom: 0.75rem;
}

/* Título de sección con serif */
.section-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.3rem;
  color: var(--text-dark);
  margin-bottom: 0.4rem;
}

/* Descripción de sección */
.section-desc {
  font-size: 0.875rem;
  color: var(--text-light);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* Grid de 2 columnas para los campos */
.fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Grupo de campo: label + input + mensaje de error */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Campo que ocupa las dos columnas */
.field-group.full {
  grid-column: 1 / -1;
}

/* Estilos de etiquetas */
label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-mid);
}

/* Asterisco rojo para campos obligatorios */
label span.req {
  color: var(--bxe-orange);
  margin-left: 2px;
}

/* Estilos compartidos para todos los campos de texto */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dark);
  background: var(--white);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  outline: none; /* Sustituimos el outline nativo por box-shadow */
}

/* Estado focus: borde azul + halo semitransparente */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--bxe-blue);
  box-shadow: 0 0 0 3px rgba(26, 95, 168, 0.1);
}

textarea {
  resize: vertical;   /* Solo se puede redimensionar verticalmente */
  min-height: 100px;
}


/* ─────────────────────────────────────────
   8. BLOQUES DE DIMENSIONES
   Cada dimensión del cuestionario se muestra
   en una tarjeta con cabecera coloreada y
   filas de pregunta + radios de escala 1-5.
   ───────────────────────────────────────── */

/* Tarjeta contenedora de cada dimensión */
.dim-block {
  background: white;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
  overflow: hidden; /* Las esquinas redondeadas recortan el contenido interior */
  transition: box-shadow 0.2s;
}

.dim-block:hover {
  box-shadow: 0 2px 16px rgba(26, 95, 168, 0.08); /* Sombra suave al pasar el ratón */
}

/* Cabecera de la dimensión: número + título + descripción */
.dim-header {
  padding: 1.25rem 2rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Badge cuadrado con el número de la dimensión */
.dim-num {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* Color del badge según la dimensión (1 al 5) */
.dim-1 .dim-num { background: #e8f1fb; color: var(--bxe-blue); }
.dim-2 .dim-num { background: #e0f7f1; color: var(--bxe-teal-dark); }
.dim-3 .dim-num { background: #fff0e8; color: var(--bxe-orange); }
.dim-4 .dim-num { background: #edf7ee; color: #2a7a3f; }
.dim-5 .dim-num { background: #f3eeff; color: #6c3fd4; }

.dim-header-text h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
}

.dim-header-text p {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 2px;
}

/* Fila de cabecera de la escala (1 a 5) */
.scale-header {
  display: grid;
  grid-template-columns: 1fr repeat(5, 52px); /* 1 col flexible + 5 cols fijas para radios */
  gap: 0;
  padding: 0.6rem 2rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.scale-header-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-light);
  text-align: center;
}

/* La primera etiqueta ("Pregunta") se alinea a la izquierda */
.scale-header-label:first-child {
  text-align: left;
}

/* Fila de cada pregunta individual */
.question-row {
  display: grid;
  grid-template-columns: 1fr repeat(5, 52px); /* Mismo grid que .scale-header */
  gap: 0;
  padding: 0.9rem 2rem;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background 0.15s;
}

/* La última fila no tiene borde inferior */
.question-row:last-child {
  border-bottom: none;
}

.question-row:hover {
  background: #fafbfd; /* Fondo muy sutil al hover */
}

/* Texto de la pregunta */
.question-text {
  font-size: 0.88rem;
  color: var(--text-dark);
  line-height: 1.5;
  padding-right: 1rem; /* Separa el texto de los radios */
}

/* Número de pregunta en gris claro delante del texto */
.q-num {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-light);
  margin-right: 8px;
}

/* Celda que contiene cada radio button, centrado */
.radio-cell {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Radio button personalizado (ocultamos el nativo con appearance:none) */
.radio-cell input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s;
  position: relative; /* Necesario para el ::after (punto interior) */
}

.radio-cell input[type="radio"]:hover {
  border-color: var(--bxe-blue);
  background: var(--bxe-blue-light);
}

/* Estado seleccionado: relleno azul */
.radio-cell input[type="radio"]:checked {
  border-color: var(--bxe-blue);
  background: var(--bxe-blue);
}

/* Punto blanco interior cuando está seleccionado */
.radio-cell input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 4px; /* Margen interior de 4px en todos los lados */
  background: white;
  border-radius: 50%;
}


/* ─────────────────────────────────────────
   9. PREGUNTA ABIERTA
   Bloque de texto libre al final del cuestionario.
   ───────────────────────────────────────── */
.open-block {
  background: white;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.open-block h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.open-block p {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 1rem;
  line-height: 1.6;
}


/* ─────────────────────────────────────────
   10. PRIVACIDAD Y BOTÓN DE ENVÍO
   ───────────────────────────────────────── */

/* Fila del checkbox de privacidad */
.privacy-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 1rem;
}

.privacy-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px; /* Alineación visual con el texto */
  accent-color: var(--bxe-blue); /* Color nativo del checkbox en navegadores modernos */
  flex-shrink: 0;
  cursor: pointer;
}

.privacy-row label {
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.6;
  cursor: pointer;
  font-weight: 400;
}

.privacy-row a {
  color: var(--bxe-blue);
}

/* Área centrada con el botón de envío */
.submit-area {
  text-align: center;
  padding: 1.5rem 0;
}

/* Botón principal de envío */
.btn-submit {
  background: var(--bxe-orange);
  color: white;
  border: none;
  border-radius: 50px; /* Pill shape */
  padding: 14px 48px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(240, 90, 26, 0.3); /* Sombra naranja */
}

.btn-submit:hover {
  background: #d44a0e;
  transform: translateY(-1px); /* Ligero efecto de elevación */
  box-shadow: 0 6px 24px rgba(240, 90, 26, 0.4);
}

.btn-submit:active {
  transform: translateY(0); /* Vuelve a su posición al hacer clic */
}

/* Estado deshabilitado mientras se envía */
.btn-submit:disabled {
  background: #ccc;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}


/* ─────────────────────────────────────────
   11. PANTALLA DE ÉXITO
   Se muestra al terminar de enviar el formulario.
   Oculta por defecto (display:none), JS la activa.
   ───────────────────────────────────────── */
#success-screen {
  display: none; /* JS cambia esto a 'block' al enviar */
  max-width: 600px;
  margin: 4rem auto;
  padding: 0 1.5rem;
  text-align: center;
}

/* Icono circular con check */
.success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bxe-teal), var(--bxe-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
}

#success-screen h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 2rem;
  color: var(--text-dark);
  margin-bottom: 0.75rem;
}

#success-screen p {
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* Tarjeta con el resumen del perfil calculado */
.result-card {
  background: white;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 1.5rem;
  margin-bottom: 1rem;
  text-align: left;
}

/* Badge pill con el nombre del perfil */
.result-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

/* Colores de cada perfil (1 al 4) */
.badge-p1 { background: #e0f7f1; color: var(--bxe-teal-dark); } /* Alta */
.badge-p2 { background: var(--bxe-blue-light); color: var(--bxe-blue-dark); } /* Media */
.badge-p3 { background: #fff0e8; color: var(--bxe-orange); }    /* Baja */
.badge-p4 { background: #fee2e2; color: #b91c1c; }               /* Inicial */


/* ─────────────────────────────────────────
   12. OVERLAY DE CARGA (SPINNER)
   Capa semitransparente sobre toda la página
   mientras se procesa el envío al webhook.
   ───────────────────────────────────────── */
.loading-overlay {
  display: none; /* JS lo activa con display:flex */
  position: fixed;
  inset: 0; /* Cubre toda la pantalla */
  background: rgba(255, 255, 255, 0.85);
  z-index: 999; /* Por encima de todo */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* Círculo giratorio */
.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--bxe-blue-light);     /* Pista del spinner */
  border-top-color: var(--bxe-blue);           /* Arco visible que gira */
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Animación de rotación completa */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  font-size: 0.9rem;
  color: var(--text-mid);
  font-weight: 500;
}


/* ─────────────────────────────────────────
   13. MENSAJES DE ERROR
   Se muestran debajo de campos inválidos
   y en filas de preguntas sin responder.
   ───────────────────────────────────────── */

/* Texto de error bajo cada campo */
.error-msg {
  font-size: 0.78rem;
  color: #dc2626; /* Rojo error */
  margin-top: 4px;
  display: none; /* JS lo muestra con display:block */
}

/* Cuando el campo tiene error, borde rojo */
.field-error input,
.field-error select,
.field-error textarea {
  border-color: #dc2626;
}

/* Fila de pregunta sin responder: fondo rosáceo */
.question-row.unanswered {
  background: #fff8f8;
}


/* ─────────────────────────────────────────
   14. FOOTER
   Banda oscura con enlaces corporativos.
   ───────────────────────────────────────── */
footer {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 2rem;
}

.footer-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.footer-logo-img {
  max-width: 860px;
  width: 100%;
  height: auto;
}


/* ─────────────────────────────────────────
   15. RESPONSIVE — MÓVIL (max 600px)
   Adaptaciones para pantallas pequeñas:
   - Grid de campos pasa a 1 columna
   - Columnas de radios se estrechan
   - La nav se oculta
   ───────────────────────────────────────── */
@media (max-width: 600px) {

  /* Campos personales: una sola columna */
  .fields-grid {
    grid-template-columns: 1fr;
  }

  /* Radios: columnas más estrechas (40px en vez de 52px) */
  .scale-header,
  .question-row {
    grid-template-columns: 1fr repeat(5, 40px);
    padding: 0.75rem 1rem;
  }

  /* Cabecera de dimensión: menos padding */
  .dim-header {
    padding: 1rem;
  }

  /* Nav del header se oculta en móvil (solo queda el logo) */
  header nav {
    display: none;
  }
}