/* ============================================================================
   mutuOK — «Simula tu crédito»

   Los colores, la tipografía y la curva salen de `marca.css`. Acá no se define
   ni un hex de marca: si mutuOK entrega la suya, se cambian seis tokens allá y
   esta hoja no se toca.

   El rojo de error también sale de allá: era la única excepción de esta hoja
   —«la paleta no tiene color de error»— y dejó de serlo cuando `--error` subió
   a `marca.css` con su contraste medido.

   Esta hoja es autosuficiente a propósito: trae su propio reset y su cabecera.
   `simulador.html` se abre con doble clic aunque `site.css` todavía no exista.
   ========================================================================= */

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.6;
  color: var(--gris);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--tinta);
  font-weight: var(--peso-titulo);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

p {
  margin: 0;
}

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

a {
  color: var(--terracota-fuerte);
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0; /* si no, un fieldset no se deja encoger dentro de un grid */
}

legend {
  padding: 0;
}

/* El foco se ve. En un formulario que se recorre con teclado esto no es un
   detalle: es la única pista de dónde está parada la persona. */
/*
  **Nada de `--gris-tenue` en texto chico.** `marca.css` lo dice medido —3,02:1
  sobre crema, solo texto grande y rótulos— y esta hoja lo escribía seis veces
  en cuerpos de 11,5 a 15 px: el «AÑOS» de cada plazo caía a 2,62:1 sobre
  terracota suave, y el marcador de posición del RUT —el que enseña el formato—
  a 3,23:1. Todos pasaron a `--gris`, que sirve contra los tres fondos de esta
  página: 6,19:1 sobre blanco, 5,80:1 sobre crema, 5,02:1 sobre terracota suave.

  Lo que se pierde es un escalón de jerarquía tonal. Se recupera donde
  corresponde y donde ya está puesto: versalitas, `letter-spacing` y tamaño. Es
  lo mismo que pide la paleta —«lo tecnológico viene de la retícula, no del
  color»—.
*/

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

/*
  Sobre la tinta del pie, la terracota fuerte cae a 2,64:1 y deja de ser un
  indicador de foco. El ocre sobre tinta da 7,98:1, y es el **único** lugar de
  esta paleta donde el ocre puede llevar contraste encima.

  `site.css` ya tenía esta regla; el simulador no carga esa hoja y se quedaba
  sin ella. Vive duplicada a propósito: la alternativa es que el simulador
  arrastre una hoja entera de la portada.
*/
.pie :focus-visible {
  outline-color: var(--ocre);
}

/* Solo para lectores de pantalla: completa una etiqueta corta («UF») con la
   frase larga que la vuelve entendible fuera de su fila («del pie»). */
.vo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.envoltorio {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px);
}

/* ── Cabecera ────────────────────────────────────────────────────────────── */

.cabecera {
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
}

.cabecera__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}

/* Igual que en la portada: el blanco táctil crece, el dibujo no. */
.cabecera__logo {
  display: flex;
  align-items: center;
  padding-block: 5px;
  margin-block: -5px;
}

.cabecera__logo img {
  height: 34px;
  width: auto;
}

.volver-portada {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: var(--peso-semi);
  color: var(--terracota-fuerte);
  text-decoration: none;
  /* 24 px de texto + 20 de relleno = 44: el mínimo táctil, y el enlace de
     volver era el único blanco de esta página que se quedaba corto (40). */
  padding: 10px 6px;
}

.volver-portada:hover {
  text-decoration: underline;
}

/* ── Encabezado de la página ─────────────────────────────────────────────── */

.intro {
  padding: clamp(36px, 7vw, 64px) 0 clamp(24px, 4vw, 32px);
}

.intro h1 {
  font-size: clamp(2rem, 5.4vw, 2.9rem);
  max-width: 16ch;
}

.intro__plomo {
  margin-top: 16px;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  max-width: 54ch;
}

/* ── El stepper ──────────────────────────────────────────────────────────── */

.pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  list-style: none;
  margin: 0 0 clamp(20px, 4vw, 28px);
  padding: 0;
  counter-reset: paso;
}

.paso {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 3px solid var(--borde);
  color: var(--gris);
  font-size: 14px;
  font-weight: var(--peso-semi);
  /* La regla de arriba cambia de color al avanzar: ocre para lo recorrido,
     terracota para donde está parada la persona. El ocre es relleno, nunca
     letra sobre claro — acá es una barra de 3 px, que es su lugar. */
  transition: border-color 0.4s var(--curva), color 0.4s var(--curva);
}

.paso__n {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid currentColor;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Pasos ya recorridos: la barra en ocre y el rótulo en salvia (5,71:1). */
.paso--hecho {
  border-top-color: var(--ocre);
  color: var(--salvia);
}

.paso--hecho .paso__n {
  background: var(--ocre);
  border-color: var(--ocre);
  color: var(--tinta);
}

/* El paso actual. `aria-current="step"` lo dice para quien no ve el color. */
.paso[aria-current="step"] {
  border-top-color: var(--terracota-fuerte);
  color: var(--tinta);
}

.paso[aria-current="step"] .paso__n {
  background: var(--terracota-fuerte);
  border-color: var(--terracota-fuerte);
  color: var(--papel);
}

@media (max-width: 560px) {
  .paso__nombre {
    display: none;
  }
  .pasos {
    gap: 8px;
  }
}

/* ── La tarjeta ──────────────────────────────────────────────────────────── */

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--r-grande);
  box-shadow: var(--sombra);
  padding: clamp(22px, 5vw, 44px);
}

.tarjeta__titulo {
  font-size: clamp(1.3rem, 3.4vw, 1.7rem);
}

.tarjeta__bajada {
  margin-top: 10px;
  font-size: 15.5px;
  max-width: 58ch;
}

.bloque {
  margin-top: 32px;
}

.bloque__titulo {
  font-size: 15px;
  font-weight: var(--peso-semi);
  color: var(--tinta);
  letter-spacing: 0.01em;
}

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

.rejilla {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 20px;
}

.rejilla--tres {
  grid-template-columns: repeat(3, 1fr);
}

.campo {
  display: grid;
  gap: 7px;
  align-content: start;
}

.campo--ancho {
  grid-column: 1 / -1;
}

.campo > label,
.grupo__leyenda {
  font-size: 14px;
  font-weight: var(--peso-semi);
  color: var(--tinta);
}

.campo__pista {
  font-size: 13px;
  color: var(--gris);
}

.campo input,
.campo select {
  width: 100%;
  font: inherit;
  font-size: 16px; /* menos de 16 y iOS hace zoom al enfocar */
  color: var(--tinta);
  background: var(--papel);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-chico);
  padding: 12px 14px;
  transition: border-color 0.2s var(--curva), box-shadow 0.2s var(--curva);
}

.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b5f55' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 38px;
}

/*
  **Sin `outline: none`.** Lo tenía, y con eso el formulario más largo del
  sitio era el único lugar donde el teclado no sabía dónde estaba parado: el
  borde de 1 px que quedaba de señal cambia 2,97:1 entre los dos estados —el
  umbral de un indicador de foco es 3:1— y el halo, 1,28:1. El anillo de la
  regla general (`:focus-visible`, más arriba) hace el trabajo; el borde y el
  halo se quedan de refuerzo, no de reemplazo.
*/
.campo input:focus,
.campo select:focus {
  border-color: var(--terracota-fuerte);
  box-shadow: 0 0 0 4px rgb(162 65 31 / 16%);
}

/* El anillo pisaría el halo si arrancara pegado al borde. */
.campo input:focus-visible,
.campo select:focus-visible {
  outline-offset: 4px;
}

.campo input::placeholder {
  color: var(--gris);
}

.campo input[readonly] {
  background: var(--crema-2);
  color: var(--gris);
}

/* El error vive al lado del campo, no en una lista al final. Un error a
   trescientos píxeles de su causa obliga a buscar. */
.campo__error {
  font-size: 13.5px;
  font-weight: var(--peso-semi);
  color: var(--error);
  display: none;
}

.campo.mal input,
.campo.mal select {
  border-color: var(--error);
  background: var(--error-suave);
}

.campo.mal .campo__error {
  display: block;
}

/* En la tabla de montos el error es de la fila, no de una casilla: UF y pesos
   son el mismo número escrito de dos maneras, y marcar solo una miente. */
.monto.mal input {
  border-color: var(--error);
  background: var(--error-suave);
}

.monto.mal > .campo__error {
  display: block;
}

/* Cuando el error habla, la pista se calla: dicen lo mismo y el error lo dice
   con los números de esta persona. */
.monto.mal > .campo__pista {
  display: none;
}

/* `hidden` gana siempre: un paso oculto no reaparece por una regla de display
   que llegue después. */
[hidden] {
  display: none !important;
}

/* ── Grupos de opciones (los «toggles» de SANI, que acá son radios) ──────── */

.grupo {
  display: grid;
  gap: 8px;
}

.segmentado {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.segmentado input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.segmentado label {
  flex: 1 1 auto;
  min-width: max-content;
  text-align: center;
  padding: 11px 16px;
  border: 1.5px solid var(--borde);
  border-radius: var(--r-chico);
  background: var(--papel);
  color: var(--gris);
  font-size: 15px;
  font-weight: var(--peso-semi);
  cursor: pointer;
  transition: border-color 0.2s var(--curva), background 0.2s var(--curva),
    color 0.2s var(--curva);
}

.segmentado label:hover {
  border-color: var(--terracota-fuerte);
  color: var(--tinta);
}

.segmentado input:checked + label {
  background: var(--terracota-suave);
  border-color: var(--terracota-fuerte);
  color: var(--terracota-fuerte);
}

.segmentado input:focus-visible + label {
  outline: 3px solid var(--terracota-fuerte);
  outline-offset: 2px;
}

.grupo.mal .segmentado label {
  border-color: var(--error);
}

.grupo.mal .campo__error {
  display: block;
}

/* Los dos interruptores: DFL 2 y propiedad nueva. */
.interruptores {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.interruptor {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--borde);
  border-radius: var(--r-chico);
  cursor: pointer;
}

.interruptor input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.interruptor__palanca {
  flex: none;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: var(--crema-2);
  border: 1.5px solid var(--borde);
  position: relative;
  transition: background 0.25s var(--curva), border-color 0.25s var(--curva);
}

.interruptor__palanca::after {
  content: "";
  position: absolute;
  inset: 2px auto 2px 2px;
  width: 18px;
  border-radius: 50%;
  background: var(--papel);
  box-shadow: 0 1px 3px rgb(36 28 23 / 22%);
  transition: transform 0.25s var(--curva);
}

.interruptor input:checked + .interruptor__palanca {
  background: var(--terracota-fuerte);
  border-color: var(--terracota-fuerte);
}

.interruptor input:checked + .interruptor__palanca::after {
  transform: translateX(20px);
}

.interruptor input:focus-visible + .interruptor__palanca {
  outline: 3px solid var(--terracota-fuerte);
  outline-offset: 3px;
}

.interruptor__texto {
  display: grid;
  gap: 2px;
}

.interruptor__texto strong {
  color: var(--tinta);
  font-size: 15px;
  font-weight: var(--peso-semi);
}

.interruptor__texto span {
  font-size: 13px;
  color: var(--gris);
}

/* ── La tabla de montos, UF ⇄ pesos ──────────────────────────────────────── */

.montos {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  padding: clamp(16px, 3vw, 22px);
  background: var(--crema);
  border: 1px solid var(--borde);
  border-radius: var(--r);
}

.monto {
  display: grid;
  gap: 8px;
}

.monto__titulo {
  font-size: 14px;
  font-weight: var(--peso-semi);
  color: var(--tinta);
}

.monto__par {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 12px;
  align-items: start;
}

.monto .campo > label {
  font-size: 12.5px;
  font-weight: var(--peso-semi);
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.monto input {
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.monto--calculado {
  padding-top: 16px;
  border-top: 1px dashed var(--borde);
}

.monto__resultado {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 12px;
}

.monto__valor {
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: var(--peso-semi);
  color: var(--tinta);
  text-align: right;
  padding: 12px 14px;
  background: var(--terracota-suave);
  border: 1.5px solid transparent;
  border-radius: var(--r-chico);
}

.nota-uf {
  font-size: 13.5px;
  color: var(--gris);
  margin-top: 4px;
}

.nota-uf strong {
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/* ── Plazos ──────────────────────────────────────────────────────────────── */

.plazos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.plazos input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.plazos label {
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 14px 4px;
  border: 1.5px solid var(--borde);
  border-radius: var(--r-chico);
  background: var(--papel);
  cursor: pointer;
  transition: border-color 0.2s var(--curva), background 0.2s var(--curva);
}

.plazos label b {
  font-family: var(--fuente-dato);
  font-size: 20px;
  font-weight: var(--peso-titulo);
  color: var(--tinta);
  line-height: 1;
}

.plazos label span {
  font-size: 11.5px;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.plazos label:hover {
  border-color: var(--terracota-fuerte);
}

.plazos input:checked + label {
  background: var(--terracota-suave);
  border-color: var(--terracota-fuerte);
}

.plazos input:checked + label b {
  color: var(--terracota-fuerte);
}

.plazos input:focus-visible + label {
  outline: 3px solid var(--terracota-fuerte);
  outline-offset: 2px;
}

@media (max-width: 620px) {
  .plazos {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── El resultado ────────────────────────────────────────────────────────── */

.resultado {
  margin-top: 24px;
  background: var(--tinta);
  border-radius: var(--r);
  padding: clamp(22px, 4.5vw, 34px);
  color: rgb(255 255 255 / 76%);
}

/*
  El ocre acá sí: el panel es tinta, y sobre tinta el ocre da 7,98:1. Lo que
  `marca.css` prohíbe es escribirlo sobre claro, donde queda en 1,97:1. Es el
  único lugar de la hoja donde el ocre lleva letras.
*/
.resultado__rotulo {
  font-size: 13px;
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ocre);
}

.resultado__cifra {
  font-family: var(--fuente-dato);
  font-size: clamp(2.4rem, 8vw, 3.4rem);
  font-weight: var(--peso-titulo);
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-top: 8px;
}

.resultado__uf {
  font-family: var(--fuente-dato);
  font-size: clamp(1rem, 3vw, 1.15rem);
  color: var(--ocre);
  margin-top: 6px;
}

.resultado__detalle {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 14%);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
}

.dato {
  display: grid;
  gap: 3px;
}

.dato dt {
  font-size: 13px;
  color: rgb(255 255 255 / 58%);
}

.dato dd {
  margin: 0;
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: var(--peso-semi);
  color: #fff;
}

.resultado__pie {
  margin-top: 22px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgb(255 255 255 / 62%);
}

.resultado__pie strong {
  color: rgb(255 255 255 / 88%);
  font-weight: var(--peso-semi);
}

/* La barra de terracota, una vez en toda la página: acá, en lo único que
   alguien podría entender mal —leer una cifra referencial como una oferta—. */
.aviso {
  margin-top: 22px;
  padding: 18px 20px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--terracota);
  border-radius: var(--r-chico);
  font-size: 15px;
}

.aviso strong {
  display: block;
  color: var(--tinta);
  font-weight: var(--peso-semi);
  margin-bottom: 4px;
}

/* ── La respuesta de «Pedir la evaluación» ───────────────────────────────── */

/*
  Salvia y no terracota: la terracota es el primario de los botones, y una
  confirmación pintada del color de lo que se acaba de apretar no se lee como
  respuesta. La salvia es «lo cumplido» en `marca.css`, que es exactamente
  esto. El texto va en tinta —15,7:1— y la salvia solo sostiene el borde.
*/
.respuesta {
  margin-top: 30px;
  padding: 18px 20px;
  background: var(--salvia-suave);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--salvia);
  border-radius: var(--r-chico);
}

.respuesta__texto {
  color: var(--tinta);
  font-size: 15.5px;
  font-weight: var(--peso-semi);
}

.respuesta .acciones {
  margin-top: 16px;
}

/* ── Resumen de errores del paso ─────────────────────────────────────────── */

.resumen-error {
  display: none;
  margin-top: 22px;
  padding: 14px 18px;
  background: var(--error-suave);
  border: 1.5px solid var(--error);
  border-radius: var(--r-chico);
  color: var(--error);
  font-size: 15px;
  font-weight: var(--peso-semi);
}

.resumen-error.visible {
  display: block;
}

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

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 16px;
  font-weight: var(--peso-semi);
  padding: 14px 26px;
  border-radius: var(--r-chico);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s var(--curva), border-color 0.2s var(--curva),
    transform 0.2s var(--curva);
}

.boton--principal {
  background: var(--terracota-fuerte);
  color: var(--papel);
  flex: 1 1 220px;
}

/* El hover aclara en vez de oscurecer: la terracota fuerte ya es el fondo, y
   la terracota a secas sigue dando 4,57:1 con el blanco encima. */
.boton--principal:hover {
  background: var(--terracota);
}

.boton--secundario {
  background: transparent;
  border-color: var(--borde);
  color: var(--tinta);
}

.boton--secundario:hover {
  border-color: var(--terracota-fuerte);
  color: var(--terracota-fuerte);
}

.boton:active {
  transform: translateY(1px);
}

/* ── Pie ─────────────────────────────────────────────────────────────────── */

.pie {
  margin-top: clamp(48px, 8vw, 80px);
  background: var(--tinta);
  color: rgb(255 255 255 / 62%);
  padding: 36px 0;
  font-size: 14px;
}

.pie__marca {
  height: 26px;
  width: auto;
  margin-bottom: 14px;
}

.pie p + p {
  margin-top: 8px;
}

.pie a {
  color: rgb(255 255 255 / 88%);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .rejilla,
  .rejilla--tres {
    grid-template-columns: 1fr;
  }
  .resultado__detalle {
    grid-template-columns: 1fr;
  }
  .boton {
    width: 100%;
  }
}

/* A 360 px las dos columnas de la tabla de montos todavía entran, pero apretadas:
   por debajo de 400 se apilan antes de que el número deje de leerse. */
@media (max-width: 400px) {
  .monto__par,
  .monto__resultado {
    grid-template-columns: 1fr;
  }
  .monto input,
  .monto__valor {
    text-align: left;
  }
}