/* ============================================================
   estudio.css
   Hoja de estilos ADICIONAL para la pestaña "Estudio Socioeconómico".
   NO reemplaza assets/css/style.css del sitio: se carga DESPUÉS de él
   y solo agrega los componentes nuevos que ese archivo no contenía
   (acordeón del formulario, tabla dinámica de familiares, tarjetas
   de referencias, resumen de gastos, dropzone de archivos).

   Las variables --tn-* de abajo son SOLO un respaldo por si alguna
   regla de aquí las usa antes de que cargue tu paleta real de
   styles.css. No pintan botones, nav, footer ni el hero: esos ya
   están 100% gobernados por tus clases reales (tn-navbar, tn-btn,
   tn-accordion, hero-section, .footer), cargadas antes que este
   archivo. Ajusta los valores si quieres que el respaldo coincida
   exactamente con tu marca.
   ============================================================ */

:root {
  --tn-primary: #0f2a4a;
  --tn-primary-dark: #091d33;
  --tn-accent: #c8102e;
  --tn-gold: #d4a017;
  --tn-light: #f5f6f8;
  --tn-border: #e2e5ea;
  --tn-text: #1b2430;
  --tn-text-muted: #667085;
  --tn-radius: 14px;
  --tn-shadow: 0 10px 30px rgba(15, 42, 74, 0.08);
  --tn-transition: all 0.25s ease;
}

/* ---------- Hero interno ----------
   Reutiliza tu clase real "hero-section" (mismo fondo/gradiente que
   la home). Este modificador SOLO quita el alto de pantalla completa
   (min-vh-100) que tiene la home, porque aquí no hace falta. */
.hero-section--inner {
  min-height: auto !important;
  padding-top: 140px;
  padding-bottom: 60px;
}

/* ---------- Progreso del formulario ---------- */
.estudio-progress-wrap {
  position: sticky;
  top: 74px;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid var(--tn-border);
  padding: 14px 0;
}
.estudio-progress-wrap .progress {
  height: 8px;
  border-radius: 999px;
  background: var(--tn-light);
}
.estudio-progress-wrap .progress-bar {
  background: linear-gradient(90deg, var(--tn-primary), var(--tn-accent));
  transition: width 0.4s ease;
}
.estudio-progress-label {
  font-size: 0.85rem;
  color: var(--tn-text-muted);
  font-weight: 600;
}

/* ---------- Bloque informativo ---------- */
.estudio-info-block {
  background: var(--tn-light);
  border-left: 4px solid var(--tn-primary);
  border-radius: 10px;
  padding: 20px 24px;
  color: var(--tn-text);
  font-size: 0.97rem;
  line-height: 1.6;
}
.estudio-info-block.conclusion {
  border-left-color: var(--tn-gold);
}

/* ---------- Acordeón de secciones ----------
   El color, fondo y borde ya los da tu clase real "tn-accordion"
   (misma que usas en el FAQ). Aquí SOLO agregamos separación entre
   los 13 bloques (el FAQ real es un solo grupo compacto, este
   formulario necesita más aire) y el numeral tipo "badge", que es
   un elemento nuevo que tu accordion original no tiene. */
#estudioAccordion .accordion-item {
  margin-bottom: 16px;
}
#estudioAccordion .accordion-button {
  gap: 14px;
}

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  font-size: 0.8rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.accordion-button:not(.collapsed) .step-badge {
  background: rgba(255, 255, 255, 0.25);
}

.estudio-section-title {
  font-weight: 700;
  color: var(--tn-primary);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

/* ---------- Campos ---------- */
.form-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--tn-text);
}
.form-control,
.form-select {
  border-radius: 10px;
  border: 1px solid var(--tn-border);
  padding: 0.65rem 0.9rem;
  transition: var(--tn-transition);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--tn-primary);
  box-shadow: 0 0 0 0.2rem rgba(15, 42, 74, 0.12);
}
.form-check-input:checked {
  background-color: var(--tn-primary);
  border-color: var(--tn-primary);
}

/* ---------- Tabla familiares / referencias dinámicas ---------- */
.tabla-dinamica {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}
.tabla-dinamica th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tn-text-muted);
  font-weight: 700;
  padding: 0 10px 6px;
}
.tabla-dinamica td {
  background: var(--tn-light);
  padding: 10px;
  vertical-align: middle;
}
.tabla-dinamica td:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.tabla-dinamica td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.tabla-dinamica .form-control,
.tabla-dinamica .form-select {
  background: #fff;
}

/* Solo el borde punteado; el color/relleno los da tu clase real tn-btn-outline */
.btn-add-row {
  border-style: dashed !important;
}

.btn-remove-row {
  color: var(--tn-accent);
  background: transparent;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
}
.btn-remove-row:hover {
  color: #8a0c20;
}

.referencia-card {
  background: var(--tn-light);
  border-radius: 12px;
  padding: 18px;
  position: relative;
  margin-bottom: 14px;
}
.referencia-card .btn-remove-row {
  position: absolute;
  top: 10px;
  right: 12px;
}

/* ---------- Resumen de gastos ---------- */
.gastos-total {
  background: var(--tn-primary);
  color: #fff;
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 1.1rem;
  margin-top: 10px;
}
.gastos-total span.monto {
  color: var(--tn-gold);
  font-size: 1.4rem;
}

/* ---------- Carga de archivos ---------- */
.dropzone-file {
  border: 1.5px dashed var(--tn-border);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
  background: var(--tn-light);
  transition: var(--tn-transition);
  cursor: pointer;
}
.dropzone-file:hover,
.dropzone-file.is-dragover {
  border-color: var(--tn-primary);
  background: #eef2f7;
}
.dropzone-file .file-name {
  font-size: 0.85rem;
  color: var(--tn-primary);
  font-weight: 600;
  margin-top: 6px;
  word-break: break-all;
}

/* ---------- Checkbox pill grid ---------- */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.check-pill {
  border: 1px solid var(--tn-border);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: var(--tn-transition);
}
.check-pill:has(input:checked) {
  border-color: var(--tn-primary);
  background: rgba(15, 42, 74, 0.05);
}

/* ---------- Botón final ----------
   El color/relleno los da tu clase real tn-btn; solo agregamos el
   estado de "enviando" (spinner ya viene inline desde estudio.js). */
.btn-enviar-estudio:disabled {
  opacity: 0.7;
  cursor: progress;
}

/* ---------- Alertas de envío ---------- */
#estudioAlertBox {
  position: fixed;
  top: 90px;
  right: 20px;
  z-index: 2000;
  max-width: 360px;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .estudio-hero {
    padding: 120px 0 60px;
    text-align: center;
  }
  .estudio-hero p.lead {
    margin-left: auto;
    margin-right: auto;
  }
  .accordion-body {
    padding: 20px;
  }
  .estudio-progress-wrap {
    top: 62px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}