/* ==========================================================================
   Formulario de afiliación — ASIJEMIN
   Rediseño completo.

   Se carga DESPUÉS de estile.css, style_index.css y Bootstrap, así que
   sobrescribe lo anterior sin tocar el HTML: todos los name, id y las clases
   que usa el JavaScript siguen intactos.

   Pensado mobile-first: la mayoría completa este formulario desde el celular.
   ========================================================================== */

:root {
  --azul: #1d4ed8;
  --azul-oscuro: #11306e;
  --azul-claro: #eff4ff;

  --texto: #1b2436;
  --texto-suave: #5b6779;
  --borde: #d8dfeb;
  --fondo: #f3f5f9;
  --superficie: #ffffff;

  --error: #c62828;
  --ok: #157347;

  --radio: 12px;
  --radio-grande: 18px;
  --sombra: 0 1px 2px rgba(17, 48, 110, .06), 0 8px 24px rgba(17, 48, 110, .07);
}

/* ─── Base ──────────────────────────────────────────────────────────────── */

body,
body.bg-no-repeat {
  margin: 0;
  background: var(--fondo) !important;
  color: var(--texto);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* ─── Encabezado ────────────────────────────────────────────────────────── */

/*
 * El banner .header del diseño viejo solo existía en algunos breakpoints
 * (portrait hasta 899px) y en landscape dependía de la clase .bg-for-mul, que
 * está comentada en el markup: el resultado era un encabezado distinto según
 * el dispositivo. Se reemplaza por uno propio, igual en todos los tamaños.
 */
body > .header,
.bg-for-mul {
  display: none !important;
  background-image: none !important;
}

.tituloForm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: linear-gradient(135deg, var(--azul-oscuro), var(--azul)) !important;
  color: #fff;
  margin: 0;
  padding: 30px 20px 28px;
  text-align: center;
}

/* El logo se agrega por CSS para no tocar el HTML */
.tituloForm::before {
  content: "";
  display: block;
  width: 190px;
  height: 58px;
  margin-bottom: 12px;
  background: url("../image/logo_sf.png") center/contain no-repeat;
  filter: brightness(0) invert(1);
  opacity: .95;
}

.tituloForm p {
  margin: 0;
  font-family: 'Montserrat', 'Barlow', sans-serif;
  color: #fff !important;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.tituloForm p:first-of-type {
  font-size: .76rem;
  font-weight: 400;
  opacity: .82;
}

.tituloForm p:last-of-type {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: .05em;
}

/* ─── Contenedor ────────────────────────────────────────────────────────── */

/* Se neutralizan las utilidades de ancho/margen que traía el markup
   (w-4/5, ml-20, bg-secondary, bg-opacity-25) para centrarlo bien. */
section > .container,
section > div.container {
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 0 16px 56px !important;
  background: none !important;
  border-radius: 0 !important;
}

.form-princ { width: 100%; }

/* El formulario es un asistente por pasos: el form es un flex de 500% de ancho
   y cada .pagina ocupa 25%. js/app.js desplaza .movPag con margin-left.
   Esa geometría NO se toca; solo se le agrega la transición. */
.formis {
  gap: 0 !important;
}

.movPag {
  transition: margin-left .35s ease;
}

.container .form-princ {
  overflow: hidden;
  padding: 2px;
}

/* ─── Secciones como tarjetas ───────────────────────────────────────────── */

.pagina {
  box-sizing: border-box;
  min-width: 0;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
  padding: 26px 22px 30px;
  margin-top: 22px;
  align-self: flex-start;
}

/* El markup viejo dejaba los campos corridos con márgenes fijos */
.inp, .inp3, .sel2, .titttle {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.pagina .titulopg1,
.pagina .titulopg2,
.pagina .titulopg3,
.pagina .titulopg4 {
  margin-left: 0 !important;
  background: none !important;
  height: auto !important;
}

/* Título de cada sección */
.titulo {
  background: none !important;
  height: auto !important;
  margin: 0 0 20px !important;
  padding: 0 0 14px;
  border-bottom: 2px solid var(--azul-claro);
  text-align: left !important;
  font-family: 'Montserrat', 'Barlow', sans-serif;
  font-size: 1.22rem !important;
  font-weight: 800;
  color: var(--azul-oscuro);
}

.titulo p,
.titulopg1, .titulopg2, .titulopg3, .titulopg4 {
  margin: 0;
  font-family: 'Montserrat', 'Barlow', sans-serif;
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--azul-oscuro);
}

/* ─── Campos ────────────────────────────────────────────────────────────── */

/* Etiquetas: en el markup son <p class="titttle"> */
.titttle,
.accordion-body p,
.pagina .campo > p {
  margin: 0 0 6px !important;
  color: var(--texto-suave) !important;
  font-size: .82rem !important;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.campo {
  margin-bottom: 16px;
  display: block;
}

/* Todos los controles comparten el mismo aspecto */
.pagina input[type="text"],
.pagina input[type="date"],
.pagina input[type="number"],
.pagina input[type="email"],
.pagina input[type="tel"],
.pagina select,
.pagina textarea,
.inp,
.inp3 {
  width: 100% !important;
  box-sizing: border-box;
  min-height: 46px;
  padding: 10px 14px !important;
  background: var(--superficie) !important;
  border: 1.5px solid var(--borde) !important;
  border-radius: var(--radio) !important;
  box-shadow: none !important;
  color: var(--texto) !important;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
}

.pagina input::placeholder { color: #9aa6b8; }

.pagina input:focus,
.pagina select:focus,
.pagina textarea:focus {
  outline: none;
  border-color: var(--azul) !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .15) !important;
}

/* Flecha de los select */
.pagina select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235b6779'%3E%3Cpath d='M8 11.5 3.5 7h9z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
  padding-right: 36px !important;
}

/* Dos columnas donde el espacio lo permite */
@media (min-width: 640px) {
  /* Se usa grid para las dos columnas; el width:25% de la diapositiva lo pone
     la hoja original y acá no se toca. */
  .pagina {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
    align-content: start;
    padding: 28px 26px 32px;
  }
  .pagina > .titulo,
  .pagina > .alertap1,
  .pagina > .accordion,
  .pagina > .acordeon,
  .pagina > .contcanvas,
  .pagina > div[class*="col-span"] {
    grid-column: 1 / -1;
  }
}

/* ─── Grupo familiar (acordeón de Bootstrap) ────────────────────────────── */

.accordion { --bs-accordion-border-color: var(--borde); }

.accordion-item {
  border: 1px solid var(--borde) !important;
  border-radius: var(--radio) !important;
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--superficie);
}

.accordion-button {
  background: var(--azul-claro) !important;
  color: var(--azul-oscuro) !important;
  font-weight: 700;
  font-family: inherit;
  box-shadow: none !important;
  padding: 14px 16px !important;
}

.accordion-button:not(.collapsed) {
  background: var(--azul) !important;
  color: #fff !important;
}

.accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1); }
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(29, 78, 216, .15) !important; }
.accordion-body { padding: 18px 16px !important; }

/* ─── Firma ─────────────────────────────────────────────────────────────── */

.contcanvas,
.content {
  margin-top: 8px;
}

#canvas {
  width: 100%;
  max-width: 100%;
  background: #fff;
  border: 2px dashed var(--borde);
  border-radius: var(--radio);
  touch-action: none;
  cursor: crosshair;
}

h2 { font-family: 'Montserrat', 'Barlow', sans-serif; }

/* ─── Botones ───────────────────────────────────────────────────────────── */

.pagina button,
.formis button,
button.btn-primary,
input[type="submit"] {
  min-height: 48px;
  padding: 12px 22px;
  border: none;
  border-radius: var(--radio);
  background: var(--azul);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .05s;
}

.pagina button:hover,
.formis button:hover,
button.btn-primary:hover,
input[type="submit"]:hover { background: var(--azul-oscuro); }

.pagina button:active,
.formis button:active { transform: translateY(1px); }

button.btn-secondary {
  background: #eef1f6;
  color: var(--texto);
}
button.btn-secondary:hover { background: #e2e7ef; }

/* ─── Mensajes de error del servidor ────────────────────────────────────── */

/* En el PHP vienen con background rojo inline; se les da forma de alerta. */
section > .container > div[style*="background-color:red"] {
  max-width: 820px;
  margin: 18px auto 0 !important;
  padding: 13px 16px !important;
  background: #fdeaea !important;
  border: 1px solid #f2b8b8;
  border-left: 4px solid var(--error);
  border-radius: var(--radio);
  color: var(--error) !important;
  font-weight: 600;
  font-size: .95rem;
}

.mensaje { display: none; }

/* ─── Aviso de verificación de DNI ──────────────────────────────────────── */
/* Lo inserta verificar-afiliado.js con estilos propios; se refina acá. */

#dni ~ div[style],
.campo > div[style*="border-radius"] {
  border-radius: var(--radio) !important;
  font-family: inherit;
}

/* ─── Modal de Bootstrap (firma) ────────────────────────────────────────── */

.modal-content {
  border: none;
  border-radius: var(--radio-grande);
}

.modal-header {
  background: var(--azul-oscuro);
  color: #fff;
  border-radius: var(--radio-grande) var(--radio-grande) 0 0;
}

.modal-header .btn-close { filter: brightness(0) invert(1); }

/* ─── Celular ───────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .tituloForm { padding: 26px 16px 22px; }
  .tituloForm p:last-child { font-size: 1.45rem; }
  .pagina { padding: 20px 16px 22px; border-radius: 14px; }
  .titulo, .titulo p { font-size: 1.08rem !important; }
  section > .container { padding: 0 12px 40px !important; }
}

/* ─── Bloque de firma y navegación ──────────────────────────────────────── */

/* Ocupan el ancho completo de la tarjeta, no una sola columna */
.sigPag,
.campo.input-group,
.pagina > .accordion,
.pagina > .acordeon {
  grid-column: 1 / -1;
}

.sigPag {
  display: block !important;
  margin-top: 10px;
}

/* Caja de la firma */
.sigPag > div:first-child {
  background: var(--azul-claro) !important;
  border: 1px dashed #b9c9ee;
  border-radius: var(--radio) !important;
  box-shadow: none !important;
  padding: 18px;
  margin: 0 0 18px !important;
}

.sigPag .btn-success {
  width: 100%;
  margin: 0 0 12px !important;
  background: var(--ok) !important;
  border: none !important;
  border-radius: var(--radio) !important;
  font-weight: 700;
}
.sigPag .btn-success:hover { background: #0f5c39 !important; }

#estadoFirma {
  width: 100% !important;
  margin: 0 !important;
  padding: 12px !important;
  background: #fff !important;
  border: 1px solid var(--borde);
  border-radius: var(--radio) !important;
  color: var(--texto-suave) !important;
  text-align: center;
  font-size: .92rem;
  font-weight: 600;
}

/* Botones Siguiente / Anterior */
.siguientePag,
.adelante,
.atras,
a.btn-primary {
  display: inline-block;
  width: auto !important;
  min-width: 170px;
  margin: 6px 0 0 !important;
  padding: 12px 26px !important;
  background: var(--azul) !important;
  border: none !important;
  border-radius: var(--radio) !important;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}

.siguientePag:hover,
.adelante:hover,
.atras:hover,
a.btn-primary:hover { background: var(--azul-oscuro) !important; }

.atras {
  background: #eef1f6 !important;
  color: var(--texto) !important;
}
.atras:hover { background: #e2e7ef !important; }

/* Prefijo "@" del e-mail */
.input-group-text {
  background: var(--azul-claro) !important;
  border: 1.5px solid var(--borde) !important;
  border-right: none !important;
  border-radius: var(--radio) 0 0 var(--radio) !important;
  color: var(--texto-suave) !important;
  font-weight: 700;
}

.input-group { flex-wrap: nowrap; }

.input-group > input {
  border-radius: 0 var(--radio) var(--radio) 0 !important;
}

@media (max-width: 639px) {
  .siguientePag,
  .adelante,
  .atras { width: 100% !important; }
}

/* El e-mail usa un input-group: el prefijo y el campo van en la misma línea.
   Sin esto, el width:100% de los inputs empuja el campo abajo del "@". */
.input-group > .form-control,
.input-group > input {
  flex: 1 1 auto;
  width: 1% !important;
  min-width: 0;
}

.imp2 { width: auto !important; }

.input-group.imp2 { width: 100% !important; }


/* ─── Paso 2: grupo familiar ────────────────────────────────────────────── */

/* El acordeón y la barra de botones ocupan el ancho completo de la tarjeta */
.pagina > .w-75,
.pagina > div:has(> .accordion),
.pagina > .btns,
.pagina > .campo.btns {
  grid-column: 1 / -1;
  width: 100% !important;
  margin-left: 0 !important;
}

.pagina > .campo.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px !important;
}

/* Quita el recuadro gris que envolvía cada familiar */
.accordion-body > .bg-gray-200 {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.accordion-body .campo > p {
  margin-left: 0 !important;
}

.accordion-body .sel2,
.accordion-body input,
.accordion-body select {
  width: 100% !important;
  margin-left: 0 !important;
}

/* Los campos del familiar van en una sola columna: son pocos y así las
   filas quedan parejas. */
.accordion-body > .bg-gray-200 > div {
  margin-bottom: 4px;
}

/* El título de sección nunca debe tomar el estilo de etiqueta */
.pagina > .titulo p,
.titulopg1, .titulopg2, .titulopg3, .titulopg4 {
  text-transform: none !important;
  font-size: 1.22rem !important;
  font-weight: 800 !important;
  color: var(--azul-oscuro) !important;
  letter-spacing: 0 !important;
}

/* ─── Geometría del asistente ───────────────────────────────────────────── */

/*
 * El original usaba form:500% con diapositivas de 25%, o sea 125% del ancho
 * visible cada una: siempre quedaba un 20% cortado a la derecha. Lo disimulaban
 * manteniendo el contenido en una columna angosta.
 *
 * Con el form al 400%, una diapositiva de 25% mide exactamente 100% del ancho
 * visible, y el paso de -25% que aplica js/app.js equivale justo a una
 * diapositiva. Así no hace falta tocar el JavaScript.
 */
.container .form-princ form.formis {
  width: 400% !important;
}

.container .form-princ .pagina {
  flex: 0 0 25% !important;
  width: 25% !important;
}

/* Las etiquetas y campos del acordeón traían sangrías fijas (ml-10, ml-8)
   que las dejaban desalineadas entre sí. */
.accordion-body p,
.accordion-body input,
.accordion-body select,
.accordion-body .campo,
.accordion-body div {
  margin-left: 0 !important;
}

/* ─── Normalización general ─────────────────────────────────────────────── */

/* Las etiquetas del markup son <p> sueltos con clases distintas según la
   sección. Se estilan todas por igual, excepto los títulos de sección. */
.pagina p:not(.titulopg1):not(.titulopg2):not(.titulopg3):not(.titulopg4) {
  margin: 0 0 6px !important;
  padding: 0 !important;
  color: var(--texto-suave) !important;
  font-family: inherit !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Ningún control debe arrastrar márgenes ni anchos fijos del markup viejo */
.pagina input,
.pagina select,
.pagina textarea {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
}

/* Cada campo ocupa su celda completa */
.pagina > div,
.pagina .campo,
.pagina .campo > div {
  min-width: 0;
  max-width: 100%;
}

/* Barra de navegación al pie de cada paso */
.pagina > .btns,
.pagina > .campo.btns,
.pagina > .sigPag {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 20px !important;
}

.pagina > .sigPag { display: block !important; }

/* ─── Botones de navegación: misma altura y jerarquía clara ─────────────── */

.pagina a.volver,
.pagina a.adelante,
.pagina a.siguientePag,
.pagina a.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  min-width: 160px;
  width: auto !important;
  margin: 0 !important;
  padding: 0 24px !important;
  border-radius: var(--radio) !important;
  box-shadow: none !important;
  font-weight: 700;
  text-decoration: none !important;
}

.pagina a.volver,
.pagina a[class*="volver-"] {
  background: #eef1f6 !important;
  color: var(--azul-oscuro) !important;
}
.pagina a.volver:hover { background: #e2e7ef !important; }

.pagina a.adelante,
.pagina a.siguientePag,
.pagina a[class*="adelante-"] {
  background: var(--azul) !important;
  color: #fff !important;
}
.pagina a.adelante:hover,
.pagina a.siguientePag:hover { background: var(--azul-oscuro) !important; }

/* El botón de envío final se distingue del resto */
.pagina button[type="submit"],
.pagina input[type="submit"] {
  min-height: 52px;
  width: 100%;
  background: var(--ok);
  font-size: 1.05rem;
}
.pagina button[type="submit"]:hover { background: #0f5c39; }

/* ─── Red de contención ─────────────────────────────────────────────────── */

/* Nada dentro de una tarjeta puede exceder su ancho. El markup viejo tenía
   anchos en porcentaje y márgenes fijos repartidos en varios breakpoints. */
.pagina,
.pagina *,
.pagina *::before,
.pagina *::after {
  box-sizing: border-box !important;
}

.pagina .campo,
.pagina .campo > div,
.pagina > div > div {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* El form mide 400% del ancho visible: sin esto el navegador ofrece scroll
   horizontal en toda la página. */
html, body { overflow-x: hidden; }

/* El contenedor traía ml-20 (80px) y w-4/5 de Tailwind: en celular eso lo
   empujaba fuera de la pantalla. Se neutraliza en todos los tamaños. */
section > .container,
section > div.container,
section > div[class*="container"] {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: min(820px, 100%) !important;
  box-sizing: border-box !important;
}

/* En celular la tarjeta ocupa todo el ancho: así el ancho de la diapositiva
   coincide exacto con el de la pantalla y no queda un borde asimétrico. */
@media (max-width: 560px) {
  section > .container,
  section > div.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .container .form-princ { padding: 0 !important; }
  .pagina {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin-top: 14px !important;
    padding: 20px 16px 24px !important;
  }
}

/* El azul oscuro del diseño viejo venía de body y de la sección; las tarjetas
   se leen mejor sobre el fondo claro. */
section,
section > .container,
.bvb {
  background: none !important;
  background-color: transparent !important;
}


/* El CSS viejo reservaba 430px arriba del formulario para el banner de fondo
   que ya no se usa; sin esto queda un hueco enorme bajo el encabezado. */
.form-princ,
.container .form-princ {
  margin-top: 0 !important;
}

/* ─── Orientación ───────────────────────────────────────────────────────── */

/*
 * El formulario se completa en vertical: la firma con el dedo y los campos
 * están pensados para esa proporción. Si el teléfono se gira, en vez de
 * mostrar un diseño deformado se pide volver a vertical.
 *
 * El max-height limita la regla a teléfonos apaisados; una pantalla de
 * computadora también es "landscape" y no debe verse afectada.
 */
@media (orientation: landscape) and (max-height: 520px) {
  body::after {
    content: "Girá el teléfono a vertical para completar el formulario";
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 40px;
    background: linear-gradient(160deg, #0a1f4d, #11306e);
    color: #fff;
    text-align: center;
    font-family: 'Montserrat', 'Barlow', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.5;
  }
}