/* ============================================================================
   mutuOK — «Tus datos y la ley 21.719»

   Viste las tres páginas del recorrido: `privacidad.html`,
   `privacidad-codigo.html` y `privacidad-datos.html`.

   **No es autosuficiente, y es a propósito.** `marca.css` pone la paleta y
   `site.css` pone el sistema: el rubro, el fichero, el renglón, los campos,
   los botones y el pie. Acá solo se agrega lo que la portada no necesitaba:

     · la miga de pan,
     · la hoja de papel donde vive cada página,
     · el límite —el bloque de ocre que explica un borde—,
     · las opciones del desenlace,
     · el diálogo de la baja.

   Ni un hex de marca. La única regla que se repite de `site.css` es el
   `.campo__pista`, que vivía solo en la hoja del simulador y acá hace falta.

   ## El ocre, otra vez

   `marca.css` lo mide: 1,97:1 sobre crema. **Nunca lleva letras acá.** Vive en
   el subrayado de la miga al pasar el cursor, en el filo izquierdo del límite
   y en la barra del diálogo. Como letra, en ningún lugar de esta hoja — el
   panel oscuro donde podría (7,98:1 sobre tinta) no existe en estas páginas.
   ========================================================================= */

/* ══════════════════════════════════════════════════════════════════════════
   Cabecera y encabezado
   ═══════════════════════════════════════════════════════════════════════ */

/*
  El enlace de vuelta. No lleva `.boton`: `site.css` esconde
  `.cabecera > .envoltorio > .boton` por debajo de 860 px —ahí la portada
  mueve esa puerta al menú desplegable—, y en esta página la vuelta a la
  portada es lo único que hay en la barra y no puede desaparecer.
*/
.volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 8px 2px;
  color: var(--terracota-fuerte);
  font-size: 0.93rem;
  font-weight: var(--peso-semi);
}

.volver:hover {
  color: var(--tinta);
}

/*
  **La columna es más angosta que la del sitio.**

  `--ancho` son 1240 px y a la portada le sobran: sus secciones son retículas de
  varias columnas y capturas a sangre. Esto es un trámite —un texto que se lee
  seguido y un formulario de un campo—, y a 1240 px la hoja queda con media
  página en blanco a la derecha de cada renglón. El pie sigue a lo ancho del
  sitio, que es donde la página vuelve a ser el sitio.
*/
main > .envoltorio {
  max-width: 1000px;
}

main {
  padding-bottom: clamp(52px, 7vw, 96px);
}

.entrada {
  padding: clamp(34px, 5vw, 64px) 0 clamp(24px, 3.5vw, 38px);
}

.entrada .titular {
  max-width: 20ch;
}

.entrada .bajada {
  max-width: 62ch;
}

/* ══════════════════════════════════════════════════════════════════════════
   La miga de pan

   Lo que había acá era un `1 → 2 → 3`, y el cliente lo sacó con razón: esto
   son tres páginas distintas, no los pasos de un formulario. Un indicador de
   progreso le promete a la persona que está a mitad de un trámite; una miga le
   dice dónde está parada y por dónde volver, que es lo que corresponde cuando
   cada pantalla es un lugar.

   Sobria de verdad: tipografía de dato, chica, en gris, con un separador de
   terracota. Ni fondo, ni caja, ni círculos numerados.
   ═══════════════════════════════════════════════════════════════════════ */

.miga {
  padding-top: clamp(18px, 2.4vw, 26px);
}

.miga ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--fuente-dato);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.miga li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--terracota-fuerte);
}

/*
  El relleno vuelve tocable un renglón de 16 px y el margen negativo devuelve
  la miga a su sitio: crece el blanco del dedo, no la tipografía.
*/
.miga a {
  display: inline-block;
  padding-block: 14px;
  margin-block: -14px;
  color: var(--gris);
  border-bottom: 1px solid transparent;
}

.miga a:hover {
  color: var(--tinta);
  border-bottom-color: var(--ocre);
}

/* Donde estás. No es un enlace —no se navega a donde ya se está— y va en
   tinta para que se distinga del camino recorrido sin depender del color. */
.miga [aria-current="page"] {
  color: var(--tinta);
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   La hoja: el papel donde vive cada paso
   ═══════════════════════════════════════════════════════════════════════ */

/*
  `.instrumento` de `site.css` ya es la caja —papel sobre crema, borde de un
  píxel, radio chico, sin sombra difusa—. Acá solo se le pone el margen de
  adentro y la tipografía del texto largo, que la portada no necesitaba porque
  el instrumento de la portada es una retícula de mandos, no una lectura.
*/
.hoja {
  padding: clamp(22px, 3.4vw, 44px);
}

/*
  **La cabecera está pegada arriba, así que el desplazamiento tiene que
  esquivarla.** Cuando aparece una confirmación o la explicación del límite, el
  JavaScript la trae a la vista; sin este margen, los 68 px de la barra le
  tapan el titular y se lee desde el segundo párrafo.
*/
.form-ok,
.limite {
  scroll-margin-top: 88px;
}

@media (max-width: 620px) {
  .form-ok,
  .limite {
    scroll-margin-top: 78px;
  }
}

.hoja:focus-visible {
  outline-offset: -3px;
}

.hoja__titulo {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  max-width: 26ch;
}

.hoja__bajada {
  margin-top: 14px;
  max-width: 64ch;
  font-size: 1.02rem;
}

.hoja__parrafo {
  margin-top: 18px;
  max-width: 64ch;
  font-size: 0.98rem;
}

/* El rótulo de una subsección del desenlace. Es una regla con letras arriba,
   como el `.rubro`, pero de un escalón menos. */
.hoja__rotulo {
  margin-top: clamp(28px, 3.5vw, 40px);
  padding-top: 11px;
  border-top: 1.5px solid var(--tinta);
  font-size: 0.78rem;
  font-weight: var(--peso-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta);
}

.hoja .puntos {
  margin-top: 14px;
  max-width: 72ch;
}

.hoja .apunte {
  margin-top: 18px;
}

/*
  El renglón que dice qué RUT se está consultando, en la segunda página. Va
  entre el texto y el campo, con una regla arriba: es un dato de contexto, no
  una parte del argumento.
*/
.hoja__eco {
  margin-top: clamp(20px, 2.6vw, 28px);
  padding-top: 14px;
  border-top: 1px solid var(--borde);
  font-size: 0.92rem;
}

.hoja__eco .dato-cifra {
  font-size: 1rem !important;
  color: var(--tinta);
}

.hoja__campos {
  margin-top: clamp(24px, 3vw, 32px);
  padding-top: clamp(20px, 2.6vw, 26px);
  border-top: 1px solid var(--borde);
}

/* El RUT y el código son campos cortos: a todo el ancho de la hoja, una
   casilla de seis caracteres pide que se escriba una frase. */
.campo--rut,
.campo--codigo {
  max-width: 22rem;
}

.campo--rut input,
.campo--codigo input {
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Vive en la hoja del simulador y no en `site.css`, así que acá se repite.
   Es la única regla duplicada de esta hoja. */
.campo__pista {
  font-size: 0.8rem;
  color: var(--gris);
}

/* Cuando el error habla, la pista se calla: dicen lo mismo y el error lo dice
   con lo que esta persona escribió. */
.campo.invalido .campo__pista {
  display: none;
}

/*
  **El aviso del paso no se ve, y es a propósito.**

  El simulador tiene un resumen visible al pie de cada paso porque ahí hay
  siete campos y hace falta decir cuántos fallaron. Acá el paso tiene **uno**:
  un cartel rojo al pie que repite palabra por palabra el mensaje que ya está
  al lado del campo no informa, duplica — y un error dicho dos veces se lee
  como un defecto de la página.

  Lo que sí hace falta es que un lector de pantalla se entere aunque el foco ya
  estuviera en el campo (quien apretó Enter dentro del `<input>` no recibe un
  evento de foco nuevo, y sin esto no oiría nada). Así que el aviso queda como
  región viva sin cuerpo visible, con una frase corta y distinta de la del
  campo: el mensaje con el detalle lo lleva el `aria-describedby` del `<input>`.
*/
.aviso-mal {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.correo-tapado {
  font-family: var(--fuente-dato);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   El límite: el bloque que explica un borde

   Tres usos y una sola forma, porque en los tres casos dice lo mismo: «esto
   es así, y este es el motivo». Por qué se verifica el código, por qué no se
   puede borrar sobre un crédito vigente, y por qué la respuesta no distingue
   entre «no hay nada» y «ya se borró».

   El ocre como filo y como fondo suave. Ni una letra encima del ocre pleno.
   ═══════════════════════════════════════════════════════════════════════ */

.limite {
  margin-top: clamp(24px, 3vw, 34px);
  padding: clamp(18px, 2.4vw, 26px);
  border-left: 4px solid var(--ocre);
  border-radius: 0 var(--r-chico) var(--r-chico) 0;
  background: var(--ocre-suave);
}

.limite__titulo {
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  max-width: 40ch;
}

.limite > p {
  margin-top: 12px;
  max-width: 66ch;
  font-size: 0.96rem;
}

.limite__sub {
  margin: 22px 0 0;
  font-size: 0.78rem;
  font-weight: var(--peso-semi);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta);
}

/* Sobre el fondo de ocre suave la regla del `.puntos` es la del borde normal,
   que a este tono se pierde. */
.limite .puntos {
  margin-top: 10px;
  border-top-color: var(--borde-fuerte);
}

.limite .puntos li {
  border-bottom-color: var(--borde-fuerte);
}

.limite__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* El botón dibujado sobre ocre suave necesita su borde: el `--borde-fuerte`
   sobre este fondo casi no se ve. */
.limite .boton--linea {
  border-color: var(--tinta);
  background: var(--papel);
}

.limite .form-ok {
  margin-top: 16px;
}

/* En el paso del código el límite no es un límite: es la razón por la que hay
   un paso más. Se pone en crema para no gritar. */
.limite--porque {
  border-left-color: var(--terracota);
  background: var(--crema-2);
}

/* ══════════════════════════════════════════════════════════════════════════
   La ficha de datos y los renglones
   ═══════════════════════════════════════════════════════════════════════ */

.hoja .fichero {
  margin-top: 16px;
  max-width: 74ch;
}

/* Lo que es un dato —una fecha, un RUT, un número— va en la tipografía que los
   alinea. Es la regla de la casa y acá la columna se lee de arriba abajo. */
.dato-cifra {
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem !important;
}

.hoja .itinerario {
  margin-top: 16px;
}

/*
  Los renglones del itinerario son entradas de una lista dentro de una
  subsección, así que su título es un `h4`. `site.css` solo peina el `h3` del
  renglón —y resetea el margen de h1 a h3—, de modo que acá hay que hacer las
  dos cosas.
*/
.renglon__cuerpo h4 {
  margin: 0;
  color: var(--tinta);
  font-size: 1.05rem;
  font-weight: var(--peso-titulo);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* ══════════════════════════════════════════════════════════════════════════
   Las opciones del desenlace

   Filas de una tabla, no tarjetas: el texto a la izquierda, el botón a la
   derecha, y una regla entre una y otra. Tres tarjetas en fila obligan a
   compararlas de un vistazo, y estas no se comparan — se leen en orden y la
   tercera es la que importa.
   ═══════════════════════════════════════════════════════════════════════ */

.opciones {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.opcion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 24px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--borde);
}

.opcion:first-child {
  border-top: 1px solid var(--borde);
}

.opcion__texto h4 {
  margin: 0;
  color: var(--tinta);
  font-size: 1.05rem;
  font-weight: var(--peso-titulo);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.opcion__texto p {
  margin-top: 6px;
  max-width: 52ch;
  font-size: 0.92rem;
}

/*
  La opción del derecho lleva el único botón relleno de la lista. Las otras dos
  son caminos; ésta es la que la página existe para ofrecer, y un rectángulo
  dibujado al lado de otros dos dibujados no dice cuál es.
*/
.opcion--baja {
  background: var(--crema);
  margin: 0 calc(clamp(22px, 3.4vw, 44px) * -1);
  padding: 20px clamp(22px, 3.4vw, 44px);
}

.hoja .form-ok {
  margin-top: 20px;
  max-width: 70ch;
}

/* ══════════════════════════════════════════════════════════════════════════
   El diálogo de la baja
   ═══════════════════════════════════════════════════════════════════════ */

/*
  **Sin `position` propia, y hay que decirlo porque cuesta una tarde.**

  El navegador centra un `<dialog>` modal poniéndolo en la capa superior, donde
  su bloque contenedor es la ventana. Declarar `position: relative` acá —para
  colgar la cruz de una esquina— le devuelve el flujo del documento: el diálogo
  se dibuja donde está escrito en el HTML, al final del `<body>`, y en un
  teléfono aparece medio cortado por arriba. La cruz se resuelve con una fila
  flexible, que no necesita posicionar nada.
*/
.dialogo {
  width: min(520px, calc(100vw - 32px));
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r);
  background: var(--papel);
  color: var(--gris);
}

/* El velo lo pinta el navegador: con `<dialog>` no hace falta un div encima, y
   el fondo queda inerte de verdad. */
.dialogo::backdrop {
  background: rgb(36 28 23 / 58%);
}

/* La cruz cuelga de una fila propia, arriba a la derecha. El margen negativo
   la sube dentro del margen del diálogo en vez de empujar el texto. */
.dialogo__sup {
  display: flex;
  justify-content: flex-end;
  margin: -10px -10px 2px 0;
}

/*
  44 y no 34. Es el primer foco del diálogo y la salida de una pantalla que
  habla de dar de baja los datos de una persona: el botón que cancela no puede
  ser el más difícil de acertar con el dedo.
*/
.dialogo__cruz {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--r-chico);
  background: transparent;
  color: var(--gris);
}

.dialogo__cruz:hover {
  border-color: var(--tinta);
  color: var(--tinta);
}

.dialogo__rotulo {
  font-family: var(--fuente-dato);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracota-fuerte);
}

.dialogo__titulo {
  margin-top: 10px;
  max-width: 24ch;
  color: var(--tinta);
  font-size: clamp(1.2rem, 3vw, 1.45rem);
  font-weight: var(--peso-titulo);
  letter-spacing: -0.025em;
  line-height: 1.18;
}

.dialogo__parrafo {
  margin-top: 12px;
  max-width: 40ch;
  font-size: 0.96rem;
}

/*
  La barra de carga, en ocre. Es relleno —lo único que el ocre puede hacer
  sobre claro— y es determinada a propósito: tres puntitos que laten no dicen
  si algo avanza. Con movimiento reducido, `marca.css` deja la animación en una
  sola pasada de 0,01 ms y la barra queda llena; el texto de arriba es el que
  lleva el mensaje en los dos casos.
*/
.dialogo__barra {
  margin-top: 20px;
  height: 6px;
  border-radius: 3px;
  background: var(--crema-2);
  overflow: hidden;
}

.dialogo__barra span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: var(--ocre);
  transform-origin: left center;
  animation: dialogo-carga 1400ms var(--curva) forwards;
}

@keyframes dialogo-carga {
  from {
    transform: scaleX(0.04);
  }
  to {
    transform: scaleX(1);
  }
}

.dialogo__acciones {
  display: flex;
  justify-content: flex-end;
  margin-top: 26px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Pie
   ═══════════════════════════════════════════════════════════════════════ */

/* Dos columnas y no tres: esta página no es el índice del sitio. */
.pie__alto {
  grid-template-columns: 1.7fr 1fr;
}

/*
  **La línea de honestidad.** Una línea, no un cartel: sin caja, sin filo de
  color y sin negrita. Se queda porque acá se simula el ejercicio de un
  derecho, y eso no puede quedar ambiguo ni por un minuto.
*/
.pie__honestidad {
  margin-top: 16px;
  max-width: 74ch !important;
  font-family: var(--fuente-dato);
  font-size: 0.72rem !important;
  line-height: 1.7;
  color: var(--claro-tenue);
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive — de 360 px para arriba
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .opcion {
    grid-template-columns: minmax(0, 1fr);
  }

  .opcion .boton {
    justify-self: start;
  }

  .pie__alto {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .volver {
    font-size: 0.86rem;
  }

  /* A este ancho la miga de cuatro entradas parte en dos líneas y deja de
     leerse como una línea. Se queda con las dos últimas: de dónde vengo y
     dónde estoy, que es lo que se mira. La cabecera lleva el enlace de vuelta
     y el pie el de la portada, así que no se pierde ningún camino. */
  .miga li:not(:nth-last-child(-n + 2)) {
    display: none;
  }

  .miga li:nth-last-child(2)::before {
    content: none;
  }

  .hoja__campos .campo--rut,
  .hoja__campos .campo--codigo {
    max-width: none;
  }

  .opcion .boton,
  .limite__acciones .boton {
    width: 100%;
  }

  .dialogo__acciones .boton {
    width: 100%;
  }
}

/* A 360 px la fila del renglón ya se apiló por `site.css`; lo que falta es que
   la fila de la ficha no parta la fecha larga del acceso en cuatro líneas. */
@media (max-width: 420px) {
  .dato-cifra {
    font-size: 0.88rem !important;
  }
}