/* =========================================================
   BASE.CSS
   ---------------------------------------------------------
   Variables, reset, ritmo de espaciado y elementos de
   formulario. Nada de esto cambia entre clientes: los
   colores y la fuente entran por variables desde config.js.
   ========================================================= */

/* ---------- 1. Variables --------------------------------- */
:root {
  /* Valores por defecto. tema.js los sobrescribe con los del
     config; si el JS fallara, la página igual se ve bien. */
  --marca: #004083;
  --acento: #C9A227;
  --tinta: #151E2B;
  --superficie: #FFFFFF;
  --fondo: #EDF0F7;
  --marca-rgb: 0, 64, 131;
  --acento-rgb: 201, 162, 39;
  --tinta-rgb: 21, 30, 43;
  --radio: 14px;
  --fuente: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Tonos derivados. color-mix mantiene la armonía sola cuando
     cambias --marca: no hay que recalcular nada a mano.
     Ref: https://developer.mozilla.org/docs/Web/CSS/color_value/color-mix */
  --marca-suave: color-mix(in oklab, var(--marca) 9%, white);
  --marca-media: color-mix(in oklab, var(--marca) 28%, white);
  --marca-oscura: color-mix(in oklab, var(--marca) 80%, black);
  --linea: color-mix(in oklab, var(--tinta) 11%, white);
  --tinta-suave: color-mix(in oklab, var(--tinta) 62%, white);
  --error: #C0392B;

  /* Ritmo de espaciado. Todo el espacio de la página sale de
     estos cuatro valores, así nada queda "casi alineado". */
  --e1: 0.5rem;
  --e2: 0.85rem;
  --e3: 1.35rem;
  --e4: 2rem;

  --lateral: 1.35rem;      /* margen izquierdo/derecho del contenido */
  --curva: cubic-bezier(.16, 1, .3, 1);
}

/* Respaldo para navegadores sin color-mix (Safari < 16.2). */
@supports not (color: color-mix(in oklab, red 50%, blue)) {
  :root {
    --marca-suave: rgba(var(--marca-rgb), .08);
    --marca-media: rgba(var(--marca-rgb), .30);
    --marca-oscura: var(--marca);
    --linea: rgba(var(--tinta-rgb), .12);
    --tinta-suave: rgba(var(--tinta-rgb), .65);
  }
}

/* ---------- 2. Reset ------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Evita la barra horizontal que provocan las animaciones
     laterales sin recortar el texto de las tarjetas. */
  overflow-x: hidden;
}

/* Actualización: donde el navegador lo entiende, clip en vez de
   hidden. Recorta igual lo que se sale por los lados, pero sin
   convertir al elemento en un contenedor con desplazamiento propio
   (con hidden, el eje vertical pasa a auto por regla de CSS). Ese
   doble contenedor es una causa conocida de pantallas en blanco en
   iPhone cuando el contenido cambia de alto de golpe.
   Ref: https://developer.mozilla.org/docs/Web/CSS/overflow#clip */
@supports (overflow-x: clip) {
  html { overflow-x: clip; }
}

body {
  margin: 0;
  padding: 0;
  /* El fondo es el mismo de la página: antes había un gris detrás
     que convertía el contenido en una tarjeta flotante y dejaba
     franjas a los lados en tablet y en móvil horizontal. */
  background: var(--superficie);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.55;
  /* Actualización: ya no lleva overflow-x. Con html recortando, el
     body no lo necesita, y tenerlo en ambos era justo lo que creaba
     el doble contenedor de desplazamiento. */
  -webkit-font-smoothing: antialiased;
}

body.sin-scroll { overflow: hidden; }

/* line-height holgado en los títulos: con 1.1 y una fuente de
   ascendentes altos, las tildes se recortan. */
h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
}

p { margin: 0 0 .7em; }
p:last-child { margin-bottom: 0; }

a { color: var(--marca); }

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

button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 3. Utilidades -------------------------------- */
.oculto { display: none !important; }

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.icono { width: 24px; height: 24px; display: block; }

/* ---------- 4. Estructura --------------------------------
   La página ocupa todo el ancho de la ventana. Lo que se centra
   es el CONTENIDO de cada sección, mediante el padding lateral:

     padding-inline: max(--lateral, (100vw - --max-contenido) / 2)

   En una pantalla angosta el segundo término es negativo, gana
   --lateral y el resultado es el margen de móvil de siempre. En
   una ancha gana la mitad del sobrante y el texto queda centrado.
   Así el fondo del encabezado llega de borde a borde en cualquier
   tamaño, sin que el texto se despegue. */
:root { --max-contenido: 46rem; }

.pagina {
  width: 100%;
  background: var(--superficie);
}

.centrado {
  padding-inline: max(var(--lateral), calc((100vw - var(--max-contenido)) / 2));
}

.bloque {
  padding-block: var(--e4);
  padding-inline: max(var(--lateral), calc((100vw - var(--max-contenido)) / 2));
  border-top: 1px solid var(--linea);
}

.bloque:first-child { border-top: 0; }

.bloque__titulo {
  font-size: 1.1rem;
  /* El margen inferior separa el título de su contenido; sin
     esto los botones quedaban pegados a la línea divisoria. */
  margin: 0 0 var(--e3);
  padding-bottom: 2px;
}

/* ---------- 5. Campos de formulario ---------------------- */
/* El campo reserva abajo el espacio del mensaje de error. Si el
   mensaje empujara el contenido al aparecer, un clic en el botón
   de cerrar se perdería: el blur pinta el error, la tarjeta
   crece y el botón ya no está donde se soltó el mouse. */
.campo {
  position: relative;
  padding-bottom: 1.15rem;
  margin-bottom: var(--e2);
}

.campo__etiqueta {
  display: block;
  font-size: .85rem;
  font-weight: 500;
  margin-bottom: var(--e1);
}

.campo__requerido { color: var(--acento); }

.campo__opcional {
  font-weight: 400;
  font-size: .78rem;
  color: var(--tinta-suave);
}

.campo__control {
  width: 100%;
  padding: .72rem .85rem;
  border: 1px solid var(--linea);
  border-radius: calc(var(--radio) - 4px);
  background: var(--superficie);
  transition: border-color .18s, box-shadow .18s;
}

.campo__control::placeholder { color: rgba(var(--tinta-rgb), .38); }

.campo__control:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(var(--marca-rgb), .16);
}

.campo__control--area {
  min-height: 92px;
  resize: vertical;
  font-family: inherit;
}

.campo--error .campo__control { border-color: var(--error); }

/* Cédula: selector de nacionalidad pegado al campo de números.
   El selector toma el mismo borde y alto que el campo para que
   se lean como una sola pieza. */
.campo__grupo {
  display: flex;
  gap: var(--e1);
}

.campo__prefijo {
  flex: 0 0 auto;
  width: 4.2rem;
  padding: .72rem .5rem;
  border: 1px solid var(--linea);
  border-radius: calc(var(--radio) - 4px);
  background: var(--superficie);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.campo__prefijo:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(var(--marca-rgb), .16);
}

.campo__grupo .campo__control { flex: 1; min-width: 0; }

.campo--error .campo__prefijo { border-color: var(--error); }

.campo__error {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: .78rem;
  line-height: 1.25;
  color: var(--error);
}

/* En la encuesta el error va bajo el grupo completo, en flujo
   normal: ahí no hay riesgo de perder un clic. */
.pregunta {
  position: relative;
}

.pregunta .campo__error {
  position: static;
  display: block;
  margin-top: var(--e1);
}

.pregunta .campo__error:empty { margin-top: 0; }

/* ---------- 6. Botones ----------------------------------- */
.boton {
  display: block;
  width: 100%;
  padding: .85rem 1rem;
  border: 0;
  border-radius: calc(var(--radio) - 4px);
  background: var(--marca);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: transform .16s var(--curva), filter .16s;
}

.boton:active { transform: scale(.985); }
.boton:disabled { opacity: .6; cursor: default; }

@media (hover: hover) {
  .boton:hover:not(:disabled) { filter: brightness(1.08); }
}

.boton--texto {
  width: auto;
  margin: 0 auto;
  background: none;
  color: var(--tinta-suave);
  font-weight: 500;
  font-size: .86rem;
  padding: var(--e1);
  text-decoration: underline;
  text-underline-offset: 3px;
}