/* ===================================================================
   IVEST AUTO — Simulador orientativo de financiación (simulador-financiacion.html)
   Reutiliza por su nombre .calc-*, .result-*, .field y .btn de styles.css (congelado: no se edita) y ui.css.
   Móvil primero: una columna a 375 px con 16 px de margen lateral y sin desplazamiento horizontal de la página
   (las tablas largas se desplazan dentro de su propia caja). Contraste AA sobre los fondos oscuros de la web.
   Al imprimir solo sale el resumen (#fin-resumen), en negro sobre blanco y sin datos personales.
   =================================================================== */

.fin-wrap { max-width: 820px; }
@media (max-width: 480px) {
  .fin-wrap { padding-inline: 16px; }
  .fin-wrap .calc-card, .fin-wrap .calc-result { padding: 20px 16px; }
}

/* Textos que solo oye el lector de pantalla */
.fin-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.fin-titulo { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.25rem; margin: 0 0 16px; }
.fin-subtitulo { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1rem; margin: 22px 0 10px; }
.fin-nota { color: var(--muted); font-size: .92rem; margin: 0 0 12px; }

/* ---------- Sello de demostración y aviso del modo de pruebas ---------- */
.fin-sello {
  margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--line-2); border-left: 4px solid var(--red);
  border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-size: .95rem; line-height: 1.55;
}
.fin-sello strong { font-family: "Space Grotesk", sans-serif; }
.fin-pruebas {
  margin: 0 0 20px; padding: 12px 16px; border: 2px dashed #ffd166; border-radius: var(--radius-sm);
  color: #ffd166; background: rgba(255, 209, 102, .06); font-weight: 600; font-size: .92rem;
}
.fin-preparacion {
  border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 28px 20px; background: var(--surface);
}
.fin-preparacion h2 { font-size: 1.5rem; margin-bottom: 10px; }
.fin-preparacion p { color: var(--muted); max-width: 60ch; }
.fin-aviso { color: var(--muted); }

/* ---------- Formulario ---------- */
/* 16 px en los campos: el móvil no amplía la página al tocar el campo; zonas táctiles de 44 px */
.fin-wrap .field input, .fin-wrap .field select { font-size: 1rem; min-height: 48px; }
.fin-wrap .field input[aria-invalid="true"], .fin-wrap .field select[aria-invalid="true"] {
  border-color: var(--red-txt, #FF4458); box-shadow: 0 0 0 3px rgba(225, 29, 54, .16);
}
.fin-wrap .field .error { color: var(--red-txt, #FF4458); font-size: .875rem; }
.fin-wrap .field .error:empty { display: none; }
/* Campo bloqueado (con ?total=, «Otros conceptos» ya va en el total de la oferta): se ve que no se escribe en él */
.fin-wrap .field input[readonly] { border-style: dashed; cursor: default; }
.fin-reserva { color: var(--text); font-size: .92rem; margin: 0; }
.fin-transporte, .fin-coche {
  margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-2); font-size: .95rem;
}
.fin-etiqueta { display: block; font-family: "Space Grotesk", sans-serif; font-size: .85rem; font-weight: 500; margin-bottom: 4px; }
/* El nombre del coche enlaza a su ficha (UXM-03): subrayado, como los demás enlaces del texto */
.fin-transporte a, .fin-coche a, .fin-preparacion a { color: var(--red-txt, #FF4458); text-decoration: underline; text-underline-offset: 3px; }

.fin-errores {
  margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--red-txt, #FF4458); border-radius: var(--radius-sm);
  background: rgba(200, 16, 46, .10);
}
.fin-errores:focus { outline: 2px solid var(--red-txt, #FF4458); outline-offset: 3px; }
.fin-errores-titulo { font-family: "Space Grotesk", sans-serif; font-size: 1rem; margin: 0 0 8px; }
.fin-errores ul { margin: 0; padding-left: 20px; }
.fin-errores a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 6px 0; }

/* ---------- Resultado: bloque único, misma letra y contraste para todas las cifras ---------- */
.fin-desfasado { color: #ffd166; font-size: .92rem; margin: 0 0 14px; }
.fin-bloque { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.fin-bloque dt, .fin-bloque dd { margin: 0; padding: 10px 14px; font-size: 1rem; color: var(--text); line-height: 1.45; }
.fin-bloque dt { font-family: "Space Grotesk", sans-serif; font-weight: 600; padding-bottom: 0; }
.fin-bloque dd { font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.fin-bloque dd:last-of-type { border-bottom: 0; }
@media (min-width: 640px) {
  .fin-bloque { grid-template-columns: minmax(180px, 38%) 1fr; }
  .fin-bloque dt { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .fin-bloque dt:last-of-type { border-bottom: 0; }
}
.fin-transporte-res { margin: 0 0 14px; color: var(--text); }
.fin-hipotesis { margin: 0; padding-left: 20px; color: #cfd0d6; font-size: .95rem; }
.fin-hipotesis li { margin-bottom: 6px; }

.fin-acciones { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 22px 0 8px; }
@media (min-width: 560px) { .fin-acciones { grid-template-columns: 1fr 1fr; } }
.fin-acciones .btn { min-height: 44px; padding: 12px 18px; }

/* ---------- Tablas (conciliación, comparativa, cuadro) ---------- */
.fin-tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.fin-tabla-scroll:focus-visible { outline: 2px solid var(--red-2); outline-offset: 2px; }
.fin-tabla { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.fin-tabla caption { text-align: left; color: var(--muted); font-size: .85rem; padding: 10px 14px 6px; caption-side: top; }
.fin-tabla caption.fin-oculto { padding: 0; }
.fin-tabla th, .fin-tabla td { padding: 9px 12px; border-top: 1px solid var(--line); white-space: nowrap; }
.fin-tabla thead th { color: var(--muted); font-weight: 500; text-align: right; white-space: normal; vertical-align: bottom; min-width: 9ch; }
.fin-tabla thead th:first-child, .fin-tabla tbody th { text-align: left; }
/* En móvil la primera columna (plazo o mes) se queda fija al desplazar la tabla */
.fin-tabla-scroll .fin-tabla thead th:first-child, .fin-tabla-scroll .fin-tabla tbody th {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
}
.fin-tabla td { text-align: right; font-family: "Space Grotesk", sans-serif; }
.fin-tabla tbody th { font-weight: 500; color: var(--text); }
.fin-tabla .fin-elegido th, .fin-tabla .fin-elegido td,
.fin-tabla-scroll .fin-tabla .fin-elegido th { background: var(--bg-2); color: #fff; font-weight: 700; }
/* La conciliación lleva frases largas: se parten en líneas */
#fin-conciliacion th, #fin-conciliacion td { white-space: normal; }
#fin-conciliacion td { text-align: left; }
.fin-comparativa { margin-top: 18px; }
.fin-resultado .result-breakdown summary { min-height: 44px; }

/* ---------- Explicación ---------- */
.fin-explica h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 18px; }
.fin-explica dl { display: grid; gap: 14px; max-width: 70ch; }
.fin-explica dt { font-family: "Space Grotesk", sans-serif; font-weight: 600; }
.fin-explica dd { margin: 4px 0 0; color: #cfd0d6; }

/* ---------- Resumen imprimible: no se ve en pantalla ---------- */
.fin-resumen { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fin-acciones .btn:hover { transform: none; }
}

@media print {
  @page { margin: 14mm; }
  body > *:not(main), main > *:not(.fin-seccion), .fin-wrap > *:not(.fin-resumen) { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .fin-seccion { padding: 0 !important; background: none !important; }
  .fin-wrap { max-width: none; padding: 0 !important; }
  .fin-resumen { display: block !important; color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 10.5pt; line-height: 1.4; }
  .fin-resumen h2, .fin-resumen h3 { font-family: Arial, Helvetica, sans-serif; text-transform: none; letter-spacing: normal; }
  .fin-resumen h2 { font-size: 14pt; margin: 0 0 6pt; color: #000; }
  .fin-resumen h3 { font-size: 11pt; margin: 10pt 0 4pt; color: #000; }
  .fin-resumen p, .fin-resumen li { color: #000; margin: 0 0 4pt; }
  .fin-resumen-tabla { width: 100%; border-collapse: collapse; margin: 8pt 0; page-break-inside: avoid; }
  .fin-resumen-tabla caption { text-align: left; font-weight: 700; padding: 0 0 3pt; }
  .fin-resumen-tabla th, .fin-resumen-tabla td { border: 1px solid #999; padding: 3pt 6pt; text-align: left; color: #000; }
  .fin-resumen-tabla td { text-align: right; }
}