/* =============================================================
   ASOCIARSE — solicitud de asociación a la ONG (PD-92)
   resources/views/socios/asociarse.blade.php. Página sin layout:
   barra con la ONG, encabezado, indicador de pasos y una tarjeta
   por paso. Sin JS los cuatro pasos se ven juntos.
   Sólo var(--sd-*): los colores viven en tokens.css.
   ============================================================= */

.sd-asociarse {
  background:
    radial-gradient(900px 520px at 100% -10%, var(--sd-acento-tinte), transparent 60%),
    var(--sd-lienzo);
}

.sd-asociarse-contenedor {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* ---------- Barra ---------- */
.sd-asociarse-barra {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--sd-borde);
  background: var(--sd-topbar-fondo);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}
.sd-asociarse-barra__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--sd-topbar-h);
}
.sd-asociarse-barra__ong { display: flex; align-items: center; gap: 0.65rem; min-width: 0; color: var(--sd-tinta); }
.sd-asociarse-barra__ong:hover { text-decoration: none; }
.sd-asociarse-barra__nombre { font-weight: 720; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Encabezado ---------- */
.sd-asociarse-main { padding-top: 1.5rem; padding-bottom: 3rem; }

.sd-asociarse-intro { margin-bottom: 1.25rem; }
.sd-asociarse-volver {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  color: var(--sd-tinta-tenue);
  font-size: 0.88rem;
  font-weight: 650;
}
.sd-asociarse-volver svg { width: 16px; height: 16px; }
.sd-asociarse-intro__titulo { font-size: var(--sd-tipo-pagina); }
.sd-asociarse-intro__bajada { margin-top: 0.5rem; color: var(--sd-tinta-suave); max-width: 62ch; }
.sd-asociarse-intro__pastillas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; }

.sd-asociarse-alerta { margin-bottom: 1rem; }

/* ---------- Pasos ---------- */
.sd-asociarse-pasos { margin-bottom: 1rem; scroll-margin-top: calc(var(--sd-topbar-h) + 1rem); }
.sd-asociarse-pasos[hidden] { display: none; }

.sd-asociarse-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
/* Con JS, un paso por vez; sin JS se ven todos y los botones de navegación sobran. */
.sd-asociarse-form.es-por-pasos .sd-asociarse-paso:not(.es-actual) { display: none; }
.sd-asociarse-form:not(.es-por-pasos) [data-paso-siguiente],
.sd-asociarse-form:not(.es-por-pasos) [data-paso-anterior],
.sd-asociarse-form:not(.es-por-pasos) .sd-asociarse-paso__pie:not(.sd-asociarse-paso__pie--envio) { display: none; }

.sd-asociarse-paso { scroll-margin-top: calc(var(--sd-topbar-h) + 1rem); }
.sd-asociarse-paso__cabecera { padding: 1.25rem 1.25rem 0; }
.sd-asociarse-paso__numero {
  color: var(--sd-acento);
  font-size: 0.74rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.sd-asociarse-paso__titulo { margin-top: 0.25rem; font-size: 1.25rem; font-weight: 750; }
.sd-asociarse-paso__titulo:focus { outline: none; }
.sd-asociarse-paso__bajada { margin-top: 0.2rem; color: var(--sd-tinta-tenue); font-size: 0.9rem; }

.sd-asociarse-paso__cuerpo { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; }
.sd-asociarse-paso__cuerpo .sd-campo + .sd-campo { margin-top: 0; }

.sd-asociarse-paso__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--sd-borde);
}
.sd-asociarse-paso__pie .sd-btn--principal { flex: 1 1 auto; }
.sd-asociarse-paso__pie--envio { justify-content: space-between; }
.sd-asociarse-paso__botones { display: flex; gap: 0.75rem; flex: 1 1 100%; }
.sd-asociarse-paso__botones .sd-btn--principal { flex: 1; }

.sd-asociarse-fila { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }

.sd-asociarse-obligatorio { color: var(--sd-riesgo); }
.sd-asociarse-opcional { color: var(--sd-tinta-tenue); font-weight: 500; font-size: 0.82rem; }

.sd-campo__error[hidden] { display: none; }
.sd-select[aria-invalid="true"],
.sd-textarea[aria-invalid="true"] { border-color: var(--sd-riesgo); }

/* ---------- Buscador de localidad ---------- */
.sd-asociarse-buscador { position: relative; }
.sd-asociarse-buscador .sd-input:disabled { opacity: 0.6; cursor: not-allowed; }
.sd-asociarse-opciones {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid var(--sd-borde-fuerte);
  border-radius: 12px;
  background: var(--sd-superficie);
  box-shadow: var(--sd-sombra-md);
}
.sd-asociarse-opciones[hidden] { display: none; }
.sd-asociarse-opcion {
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  font-size: 0.92rem;
  cursor: pointer;
}
.sd-asociarse-opcion:hover { background: var(--sd-acento-tinte); color: var(--sd-acento); }
.sd-asociarse-opcion--vacia { color: var(--sd-tinta-tenue); cursor: default; }
.sd-asociarse-opcion--vacia:hover { background: transparent; color: var(--sd-tinta-tenue); }

/* ---------- REPROCANN ---------- */
.sd-asociarse-ayuda__enlaces { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.45rem; font-weight: 650; }

.sd-asociarse-condicional { display: flex; flex-direction: column; gap: 1rem; }
.sd-asociarse-condicional[hidden] { display: none; }
#reprocann-fields {
  padding: 1rem;
  border-radius: var(--sd-radio);
  border: 1px solid var(--sd-borde);
  background: var(--sd-superficie-2);
}
.sd-asociarse-nota { color: var(--sd-tinta-tenue); font-size: 0.86rem; }

/* ---------- Archivo ---------- */
.sd-asociarse-archivo { position: relative; }
.sd-asociarse-archivo__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.sd-asociarse-archivo__etiqueta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border: 1.5px dashed var(--sd-borde-fuerte);
  border-radius: var(--sd-radio);
  background: var(--sd-campo);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sd-asociarse-archivo__etiqueta:hover { border-color: var(--sd-acento); background: var(--sd-acento-tinte); }
.sd-asociarse-archivo__input:focus-visible + .sd-asociarse-archivo__etiqueta { outline: 3px solid var(--sd-acento-anillo); outline-offset: 2px; }
.sd-asociarse-archivo__icono {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 12px;
  background: var(--sd-acento-tinte);
  color: var(--sd-acento);
}
.sd-asociarse-archivo__info { display: flex; flex-direction: column; min-width: 0; }
.sd-asociarse-archivo__titulo { font-weight: 650; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-asociarse-archivo__meta { color: var(--sd-tinta-tenue); font-size: 0.8rem; }
.sd-asociarse-archivo__etiqueta.tiene-archivo { border-style: solid; border-color: var(--sd-ok); background: var(--sd-ok-suave); }
.sd-asociarse-archivo__etiqueta.tiene-archivo .sd-asociarse-archivo__icono { background: transparent; color: var(--sd-ok); }

/* ---------- Consentimiento ---------- */
.sd-asociarse-consentimiento {
  max-height: 220px;
  overflow-y: auto;
  padding: 1rem;
  border-radius: var(--sd-radio);
  border: 1px solid var(--sd-borde);
  background: var(--sd-superficie-2);
  color: var(--sd-tinta-suave);
  font-size: 0.9rem;
  line-height: 1.6;
}
.sd-asociarse-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1.5px solid var(--sd-borde-fuerte);
  border-radius: var(--sd-radio);
  font-size: 0.93rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sd-asociarse-check:hover { border-color: var(--sd-acento); }
.sd-asociarse-check:has(input:checked) { border-color: var(--sd-acento); background: var(--sd-acento-tinte); }
.sd-asociarse-check__input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--sd-acento); }

.sd-asociarse-captcha { display: flex; flex-direction: column; gap: 0.5rem; }
.sd-asociarse-captcha .g-recaptcha { max-width: 100%; overflow-x: auto; }

.sd-asociarse-seguro {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--sd-tinta-tenue);
  font-size: 0.8rem;
  font-weight: 600;
}
.sd-asociarse-seguro svg { width: 16px; height: 16px; color: var(--sd-ok); }

/* El botón muestra «Enviando…» mientras viaja la solicitud. */
.sd-asociarse-enviar__texto,
.sd-asociarse-enviar__cargando { display: inline-flex; align-items: center; gap: 0.5rem; }
.sd-asociarse-enviar__cargando { display: none; }
.sd-asociarse-enviar.es-cargando .sd-asociarse-enviar__texto { display: none; }
.sd-asociarse-enviar.es-cargando .sd-asociarse-enviar__cargando { display: inline-flex; }
.sd-asociarse-giro {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sd-asociarse-giro 0.7s linear infinite;
}
@keyframes sd-asociarse-giro { to { transform: rotate(360deg); } }

/* ---------- Pausa, éxito y pie ---------- */
.sd-asociarse-pausa,
.sd-asociarse-exito { margin-top: 1rem; }
.sd-asociarse-pausa p,
.sd-asociarse-exito p { max-width: 46ch; }
.sd-asociarse-pausa .sd-btn,
.sd-asociarse-exito .sd-btn { margin-top: 0.75rem; }
.sd-asociarse-exito:focus { outline: none; }

.sd-asociarse-legal {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  color: var(--sd-tinta-tenue);
  font-size: 0.82rem;
  text-align: center;
}
.sd-asociarse-legal svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* ---------- Desde tableta ---------- */
@media (min-width: 640px) {
  .sd-asociarse-contenedor { padding-inline: 1.5rem; }
  .sd-asociarse-main { padding-top: 2.25rem; }
  .sd-asociarse-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-asociarse-fila--domicilio { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .sd-asociarse-paso__cabecera { padding: 1.5rem 1.75rem 0; }
  .sd-asociarse-paso__cuerpo { padding: 1.5rem 1.75rem; gap: 1.15rem; }
  .sd-asociarse-paso__pie { padding: 1rem 1.75rem; }
  .sd-asociarse-paso__pie .sd-btn--principal { flex: 0 0 auto; }
  .sd-asociarse-paso__botones { flex: 0 0 auto; }
  .sd-asociarse-paso__botones .sd-btn--principal { flex: 0 0 auto; }
}