/* ==========================================================================
   Community Go · Sistema de los manuales  (manual.css)
   Un solo archivo, sin compilar. Documentado en SISTEMA.md.

   Tres ideas que mandan sobre todo lo demás:
   1. Todo se mide en rem: A+ / A− cambian el tamaño de la raíz y la página
      entera crece junto (texto, botones, cajas, diagrama). Los únicos px son
      los que NO deben crecer: bordes, el círculo de las marcas y el gutter.
   2. Los cambios de diseño por ancho usan @container con rem, no @media: así,
      con la letra grande, un diseño de dos columnas pasa solo a una.
   3. Cero sombras. La profundidad sale de filetes de 1,5 y 2 px, como un
      estado de cuenta impreso.
   ========================================================================== */

/* ---------- Tokens (contrastes medidos, ver SISTEMA.md) ---------- */
:root {
  --escala: 1;

  --fondo: #F5F7FA;          /* el mismo gris azulado de communitygo.cl */
  --papel: #FFFFFF;
  --tinta: #0B2559;          /* 13,75:1 sobre fondo · 14,76:1 sobre papel */
  --tinta-2: #3A4763;        /* texto secundario · 8,65:1 sobre fondo */
  --filete: #C9D2E0;         /* bordes que separan, nunca texto */
  --filete-fuerte: #0B2559;

  --accion: #1E5BFA;         /* azul de acción de la web: marcas, foco, rellenos */
  --accion-texto: #1742B8;   /* enlaces: 8,37:1 sobre papel, 7,8:1 sobre fondo */
  --accion-suave: #E8EEF9;

  --lima: #60B418;           /* marca: SOLO relleno (2,4:1 como texto) */
  --lima-suave: #EEF7E6;
  --verde-texto: #2F5E0C;    /* 7,0:1 sobre lima-suave */
  --turquesa: #009CA8;       /* marca: SOLO relleno */
  --turquesa-suave: #E3F4F5;
  --turquesa-texto: #005A62; /* 7,02:1 sobre turquesa-suave */
  --ambar: #F2A516;
  --ambar-suave: #FFF4DC;
  --ambar-texto: #6A4300;    /* 7,96:1 sobre ambar-suave */
  --rojo: #D62C2C;
  --rojo-suave: #FDECEC;
  --rojo-texto: #8E1616;     /* 8,08:1 sobre rojo-suave */

  --marca: #1E5BFA;          /* marco de las marcas sobre capturas */
  --marca-borde: #FFFFFF;    /* halo que lo separa de fondos oscuros */
  --marca-num-fondo: #1742B8;
  --marca-num-texto: #FFFFFF;
  --foco: #1E5BFA;

  --radio: 6px;
  --gutter: 16px;
  --ancho-texto: 50rem;

  --letra-titulos: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --letra-cuerpo: "Inter", "Segoe UI", system-ui, sans-serif;
}

/* Alto contraste: negro sobre blanco, marcas amarillas. Se activa con el botón
   #contraste y también si el sistema lo pide. */
:root[data-contraste="alto"] {
  --fondo: #FFFFFF; --papel: #FFFFFF; --tinta: #000000; --tinta-2: #000000;
  --filete: #000000; --filete-fuerte: #000000;
  --accion: #0033CC; --accion-texto: #0033CC; --accion-suave: #FFFFFF;
  --lima-suave: #FFFFFF; --turquesa-suave: #FFFFFF; --ambar-suave: #FFFFFF; --rojo-suave: #FFFFFF;
  --verde-texto: #000000; --turquesa-texto: #000000; --ambar-texto: #000000; --rojo-texto: #000000;
  --marca: #FFD400; --marca-borde: #000000; --marca-num-fondo: #000000; --marca-num-texto: #FFD400;
  --foco: #000000;
}
@media (prefers-contrast: more) {
  :root:not([data-contraste="normal"]) {
    --tinta-2: #1A2540; --filete: #5B6781;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: calc(100% * var(--escala));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1.5rem;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--letra-cuerpo);
  font-size: 1.25rem;          /* 20 px a letra normal */
  line-height: 1.65;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
h1, h2, h3, h4 {
  font-family: var(--letra-titulos);
  line-height: 1.2;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
  hyphens: manual;
}
/* Títulos: topados por el ancho de la pantalla (vw) para que no revienten un
   teléfono, pero con piso en rem para que con A+ nunca queden más chicos que
   el texto del cuerpo. */
h1 { font-size: min(2.75rem, max(1.6rem, 10.5vw)); font-weight: 800; }
h2 { font-size: min(2rem, max(1.45rem, 8.4vw)); font-weight: 800; }
h3 { font-size: min(1.625rem, max(1.3rem, 7vw)); font-weight: 700; }
h4 { font-size: 1.25rem; font-weight: 700; }
p, ul, ol, dl { margin: 0 0 1rem; }
ul, ol { padding-left: 1.5rem; }
li + li { margin-top: .4rem; }
img { max-width: 100%; height: auto; display: block; }
strong, b { font-weight: 700; }
a { color: var(--accion-texto); text-decoration-thickness: 2px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--papel);  /* anillo blanco: el foco se ve también sobre azul */
}
.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ic {
  width: 1.2em; height: 1.2em; flex: none;
  vertical-align: -0.22em;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Esqueleto ---------- */
.saltar {
  position: absolute; left: var(--gutter); top: -10rem; z-index: 10;
  background: var(--tinta); color: #fff; padding: .75rem 1rem; border-radius: var(--radio);
  font-weight: 700; min-height: 48px;
}
.saltar:focus { top: .75rem; }

.contenido {
  max-width: var(--ancho-texto);
  margin: 0 auto;
  padding: 0 var(--gutter) 4rem;
  container-type: inline-size;
  container-name: contenido;
}

/* ---------- Barra de ajustes ---------- */
.barra-ajustes {
  background: var(--papel);
  border-bottom: 2px solid var(--filete);
}
.barra-ajustes__dentro {
  max-width: calc(var(--ancho-texto) + 12rem);
  margin: 0 auto;
  padding: .5rem var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
}
.barra-ajustes__marca {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--letra-titulos); font-weight: 800; font-size: 1.0625rem;
  margin-right: auto; color: var(--tinta); text-decoration: none; min-height: 48px;
}
.barra-ajustes__logo {
  width: 2.25rem; height: 2.25rem; border-radius: var(--radio);
  background: var(--tinta); color: #fff; display: grid; place-items: center;
}
.barra-ajustes__botones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.barra-ajustes__letra { font-size: 1.0625rem; color: var(--tinta-2); }

.boton-ajuste {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-width: 48px; min-height: 48px; padding: .25rem .8rem;
  border: 2px solid var(--filete-fuerte); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta);
  font: 700 1.0625rem/1.2 var(--letra-titulos); cursor: pointer;
}
.boton-ajuste:hover { background: var(--accion-suave); }
.boton-ajuste[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.boton-ajuste[aria-disabled="true"] { border-style: dashed; color: var(--tinta-2); cursor: default; }
.boton-ajuste[aria-disabled="true"]:hover { background: var(--papel); }

/* ---------- Portada ---------- */
.portada {
  display: grid; gap: 1.5rem; align-items: center;
  padding: 2.5rem 0 2rem;
}
@container contenido (min-width: 44rem) {
  .portada { grid-template-columns: 1.4fr 1fr; }
}
/* En pantallas angostas el dibujo empuja el primer paso muy abajo: se va. */
@container contenido (max-width: 36rem) {
  .portada__dibujo { display: none; }
}
.antetitulo {
  display: flex; align-items: center; gap: .6rem;
  font: 800 1.0625rem/1.3 var(--letra-titulos);
  text-transform: uppercase; letter-spacing: .06em; color: var(--turquesa-texto);
  margin-bottom: .75rem;
}
.antetitulo::before { content: ""; width: 1.75rem; height: 4px; background: var(--lima); border-radius: 2px; }
.portada__bajada { font-size: 1.375rem; line-height: 1.6; }
.portada__dibujo svg { width: 100%; max-width: 22rem; height: auto; margin: 0 auto; display: block; }
.datos-rapidos { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0 0; }
.datos-rapidos li {
  margin: 0; display: inline-flex; align-items: center; gap: .5rem;
  border: 1.5px solid var(--filete); border-radius: 999px; background: var(--papel);
  padding: .35rem .9rem; font-size: 1.0625rem; font-weight: 600;
}

/* Convención de lectura: explica los «» y el círculo numerado una sola vez */
.convencion {
  display: grid; gap: .75rem; margin: 0 0 2rem;
  border-top: 2px solid var(--filete); border-bottom: 2px solid var(--filete);
  padding: 1rem 0;
}
.convencion p { margin: 0; display: flex; gap: .75rem; align-items: flex-start; }
.convencion__muestra { flex: none; min-width: 3rem; display: inline-flex; justify-content: center; }

/* ---------- Glosario ---------- */
.glosario {
  background: var(--papel); border: 2px solid var(--filete); border-radius: var(--radio);
  margin: 0 0 2rem;
}
.glosario > summary, .desplegable > summary {
  list-style: none; cursor: pointer; min-height: 48px;
  display: flex; align-items: center; gap: .75rem; padding: .9rem 1.1rem;
  font: 700 1.25rem/1.35 var(--letra-titulos);
}
.glosario > summary::-webkit-details-marker, .desplegable > summary::-webkit-details-marker { display: none; }
.glosario > summary .glosario__pista { display: block; font: 400 1.0625rem/1.4 var(--letra-cuerpo); color: var(--tinta-2); }
.abre-cierra {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: .35rem;
  font: 700 1.0625rem/1 var(--letra-cuerpo); color: var(--accion-texto);
}
.abre-cierra::after { content: "Ver"; }
details[open] > summary .abre-cierra::after { content: "Cerrar"; }
@media (prefers-reduced-motion: no-preference) { .abre-cierra .ic { transition: transform .2s; } }
details[open] > summary .abre-cierra .ic { transform: rotate(180deg); }
.glosario dl {
  margin: 0; padding: 0 1.1rem 1.1rem;
  display: grid; gap: 1rem 2rem;
}
@container contenido (min-width: 40rem) { .glosario dl { grid-template-columns: 1fr 1fr; } }
.glosario dt { font: 700 1.25rem/1.3 var(--letra-titulos); display: flex; gap: .5rem; align-items: center; }
.glosario dd { margin: .25rem 0 0; }
.glosario dt .ic { color: var(--turquesa-texto); }

/* ---------- Índice de tareas ---------- */
.indice { margin: 0 0 2.5rem; }
.indice h2 { margin-bottom: .25rem; }
.indice > p { color: var(--tinta-2); }
.tareas__lista { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@container contenido (min-width: 40rem) { .tareas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tareas__lista li { margin: 0; }
.tarea-boton {
  display: flex; align-items: center; gap: 1rem; height: 100%;
  min-height: 5rem; padding: 1rem 1.1rem;
  background: var(--papel); color: var(--tinta); text-decoration: none;
  border: 2px solid var(--filete); border-radius: var(--radio);
}
.tarea-boton:hover { border-color: var(--tinta); }
.tarea-boton__icono {
  flex: none; width: 3rem; height: 3rem; border-radius: var(--radio);
  display: grid; place-items: center; background: var(--accion-suave); color: var(--tinta);
}
.tarea-boton__icono .ic { width: 1.6rem; height: 1.6rem; }
.tarea-boton__texto { display: block; flex: 1; }
.tarea-boton__titulo { display: block; font: 700 1.3125rem/1.25 var(--letra-titulos); }
.tarea-boton__sub { display: block; font-size: 1.0625rem; line-height: 1.4; color: var(--tinta-2); margin-top: .2rem; }
.tarea-boton__ir { flex: none; }
.tarea-boton--principal { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.tarea-boton--principal .tarea-boton__sub { color: #DCE4F2; }  /* 11,4:1 sobre tinta */
.tarea-boton--principal .tarea-boton__icono { background: var(--lima); color: var(--tinta); }
.tarea-boton[aria-current="true"] { outline: 4px solid var(--accion); outline-offset: 2px; }
.tarea-boton__abierta { display: none; font-size: 1.0625rem; font-weight: 700; margin-top: .3rem; }
.tarea-boton[aria-current="true"] .tarea-boton__abierta { display: flex; align-items: center; gap: .35rem; }

/* ---------- Buscador (opcional) ---------- */
.buscador { margin: 1.5rem 0 0; padding: 1rem 1.1rem; border: 2px dashed var(--filete); border-radius: var(--radio); }
.buscador label { display: block; font: 700 1.1875rem/1.3 var(--letra-titulos); margin-bottom: .5rem; }
.buscador__campo { display: flex; gap: .5rem; align-items: stretch; }
.buscador input {
  flex: 1; min-width: 0; min-height: 52px; padding: .5rem .9rem;
  font: 400 1.25rem/1.3 var(--letra-cuerpo); color: var(--tinta);
  border: 2px solid var(--tinta); border-radius: var(--radio); background: var(--papel);
}
.buscador input::placeholder { color: #5A6680; }  /* 5,9:1 · solo una pista */
.buscador__resultados { list-style: none; padding: 0; margin: .75rem 0 0; }
.buscador__resultados a {
  display: flex; gap: .6rem; align-items: center; min-height: 48px; padding: .4rem 0;
  font-weight: 600;
}
.buscador__vacio { margin: .75rem 0 0; }

/* ---------- Selector de dispositivo ---------- */
.dispositivo {
  margin: 0 0 2rem; padding: 1.1rem; background: var(--papel);
  border: 2px solid var(--tinta); border-radius: var(--radio);
}
.dispositivo__pregunta { font: 800 1.375rem/1.3 var(--letra-titulos); margin: 0 0 .25rem; }
.dispositivo__ayuda { margin: 0 0 1rem; color: var(--tinta-2); }
.dispositivo__opciones { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@container contenido (min-width: 30rem) { .dispositivo__opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dispositivo__boton {
  display: flex; align-items: center; gap: .9rem; text-align: left;
  min-height: 5rem; padding: .75rem 1rem; width: 100%;
  border: 2px solid var(--tinta); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta); cursor: pointer;
  font: 700 1.3125rem/1.25 var(--letra-titulos);
}
.dispositivo__boton:hover { background: var(--accion-suave); }
.dispositivo__boton .ic { width: 2.25rem; height: 2.25rem; }
.dispositivo__elegido { display: none; font: 700 1.0625rem/1.3 var(--letra-cuerpo); margin-top: .2rem; }
.dispositivo__boton[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.dispositivo__boton[aria-pressed="true"] .dispositivo__elegido { display: flex; align-items: center; gap: .35rem; }
.dispositivo__boton[aria-pressed="true"] > .ic { color: var(--lima); }

/* Lo que es de un solo aparato. Sin JS (y al imprimir) se ven los dos. */
:root[data-disp="pc"] [data-solo="tel"],
:root[data-disp="tel"] [data-solo="pc"] { display: none !important; }

/* ---------- Tarea ---------- */
.tarea { margin: 0 0 3rem; }
.tarea:focus { outline: none; }
.tarea__cabeza { border-top: 4px solid var(--tinta); padding-top: 1.25rem; margin-bottom: 1.5rem; }
.tarea__cabeza h2:focus { outline: none; }
.tarea__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; color: var(--tinta-2); font-size: 1.0625rem; margin: 0; }
.tarea__meta span { display: inline-flex; align-items: center; gap: .4rem; }

/* «Antes de empezar, ten a mano» */
.ten-a-mano {
  background: var(--papel); border: 2px solid var(--filete); border-left: 6px solid var(--turquesa);
  border-radius: var(--radio); padding: 1rem 1.25rem; margin: 0 0 2rem;
}
.ten-a-mano h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.ten-a-mano ul { list-style: none; padding: 0; margin: 0 0 .5rem; }
.ten-a-mano li { display: flex; gap: .7rem; align-items: flex-start; }
.ten-a-mano li .ic { margin-top: .25em; color: var(--turquesa-texto); }
.ten-a-mano p:last-child { margin: .75rem 0 0; color: var(--tinta-2); font-size: 1.125rem; }

/* ---------- Pasos ---------- */
.pasos { list-style: none; padding: 0; margin: 0; counter-reset: paso; }
.paso {
  counter-increment: paso;
  margin: 0 0 2.75rem; padding-bottom: 2.25rem;
  border-bottom: 1.5px solid var(--filete);
}
.paso:last-child { border-bottom: 0; }
.paso__cabeza { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.paso__num {
  flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tinta); color: #fff;
  font: 800 1.75rem/1 var(--letra-titulos);
}
.paso__num::before { content: counter(paso); }
.paso__titulos { flex: 1; min-width: 0; }
.paso__avance {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem;
  font: 800 1.0625rem/1.3 var(--letra-titulos); text-transform: uppercase; letter-spacing: .05em;
  color: var(--turquesa-texto); margin: .1rem 0 .35rem;
}
.avance { display: inline-flex; gap: 4px; }
.avance i { display: block; width: 1.1rem; height: .5rem; border-radius: 2px; border: 1.5px solid var(--tinta); }
.avance i.hecho { background: var(--tinta); }
.paso__cabeza h3 { margin: 0; font-size: min(1.875rem, max(1.35rem, 7.6vw)); font-weight: 800; }
/* Con la letra agrandada en un teléfono, el número va arriba y el título usa todo el ancho */
@container contenido (max-width: 20rem) {
  .paso__cabeza { flex-direction: column; gap: .5rem; }
}
.paso__accion { font-size: 1.375rem; font-weight: 600; line-height: 1.55; }
.paso__figuras { display: grid; gap: 1.25rem; margin: 1.25rem 0; grid-template-columns: minmax(0, 1fr); }

/* Variantes de texto por aparato: un párrafo por aparato */
p[data-solo], div[data-solo] { }

/* Literales de la pantalla */
.rotulo { font-weight: 700; white-space: normal; }
.rotulo::before { content: "«"; }
.rotulo::after { content: "»"; }
.pantalla-dice {
  margin: 1rem 0; padding: .9rem 1.1rem;
  background: var(--papel); border: 2px solid var(--tinta); border-radius: var(--radio);
}
.pantalla-dice__quien {
  display: flex; align-items: center; gap: .45rem; margin: 0 0 .3rem;
  font: 700 1.0625rem/1.3 var(--letra-cuerpo); color: var(--tinta-2);
}
.pantalla-dice blockquote, .pantalla-dice q { display: block; margin: 0; font-weight: 700; font-size: 1.3125rem; line-height: 1.5; quotes: "«" "»"; }
.pantalla-dice q::before { content: open-quote; }
.pantalla-dice q::after { content: close-quote; }
.icono-en-texto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6em; height: 1.6em; vertical-align: -0.4em; margin: 0 .1em;
  border: 1.5px solid var(--tinta); border-radius: 4px; background: var(--papel);
}
.icono-en-texto .ic { width: 1.1em; height: 1.1em; vertical-align: 0; }

/* ---------- Capturas ---------- */
.captura {
  margin: 0; background: var(--papel);
  border: 1.5px solid var(--filete); border-radius: var(--radio);
  padding: .9rem 1rem 1rem;
}
.captura__rotulo {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font: 700 1.0625rem/1.3 var(--letra-titulos); margin: 0 0 .75rem; color: var(--tinta);
}
.captura__rotulo .etiqueta-chica {
  font-family: var(--letra-cuerpo); font-weight: 600; color: var(--tinta-2);
  border: 1.5px solid var(--filete); border-radius: 999px; padding: 0 .6rem;
}
.captura__marco {
  position: relative; margin: 0 auto;
  width: min(100%, var(--ancho-max, 45rem));
  border: 1.5px solid var(--filete); border-radius: 4px;
  line-height: 0;
}
.captura__marco > img { width: 100%; border-radius: 3px; }
.captura__leyenda { margin: .9rem 0 0; font-size: 1.125rem; line-height: 1.55; }
.captura__leyenda p { margin: .35rem 0 0; display: flex; gap: .6rem; align-items: flex-start; }
.captura__leyenda p:first-child { margin-top: 0; }
.captura__leyenda p.captura__nota, .captura__nota { display: block; color: var(--tinta-2); }

/* Número de la leyenda: el mismo contador que el paso, así nunca se desalinean */
.leyenda__n {
  flex: none; display: inline-grid; place-items: center;
  min-width: 2rem; height: 2rem; padding: 0 .35rem; border-radius: 999px;
  background: var(--marca-num-fondo); color: var(--marca-num-texto);
  font: 800 1.0625rem/1 var(--letra-titulos); margin-top: .05em;
}
.leyenda__n::before { content: counter(paso) attr(data-sub); }
.leyenda__n[data-n]::before { content: attr(data-n); }
.leyenda__n--no { background: var(--rojo-texto); color: #fff; }
.leyenda__n--no::before { content: "✕"; }

/* La marca: marco azul con halo blanco + círculo numerado.
   --x --y --w --h en % DEL RECORTE (ver herramientas/recorte.py). */
.marca {
  position: absolute;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  border: 4px solid var(--marca);
  outline: 2px solid var(--marca-borde);
  box-shadow: inset 0 0 0 2px var(--marca-borde);
  border-radius: 6px;
  pointer-events: none;
  line-height: 1;
}
/* El círculo NO crece con A+: taparía más captura sin leerse mejor. */
.marca::after {
  content: counter(paso) attr(data-sub);
  position: absolute; box-sizing: border-box;
  min-width: 36px; height: 36px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: 999px; border: 3px solid var(--marca-borde);
  background: var(--marca-num-fondo); color: var(--marca-num-texto);
  font: 800 18px/1 var(--letra-titulos);
  /* por omisión: sobre la esquina de arriba a la derecha, afuera del texto */
  top: -22px; right: -18px;
}
.marca[data-n]::after { content: attr(data-n); }
.marca[data-lado="esquina"]::after { right: auto; left: -18px; }
.marca[data-lado="dentro-der"]::after { right: 10px; }
.marca[data-lado="dentro"]::after { right: auto; left: 10px; }
.marca[data-lado="izq"]::after { top: 50%; right: calc(100% + 8px); transform: translateY(-50%); }
.marca[data-lado="der"]::after { top: 50%; right: auto; left: calc(100% + 8px); transform: translateY(-50%); }
.marca[data-lado="arriba"]::after { top: auto; bottom: calc(100% + 6px); right: auto; left: 0; }
.marca[data-lado="arriba-der"]::after { top: auto; bottom: calc(100% + 6px); right: 0; }
.marca[data-lado="abajo"]::after { top: calc(100% + 6px); right: auto; left: 0; }
.marca[data-lado="abajo-der"]::after { top: calc(100% + 6px); right: 0; }
/* Lo que NO se toca: marco rojo de rayas y la palabra, no un número */
.marca--no { border: 4px dashed var(--rojo); }
/* La palabra va arriba a la derecha, casi toda afuera del botón: el rótulo
   del botón (centrado) tiene que seguir leyéndose. */
.marca--no::after { content: "✕ No tocar"; white-space: nowrap; padding: 0 12px; background: var(--rojo-texto); color: #fff; font-size: 17px; top: -30px; right: 8px; left: auto; bottom: auto; transform: none; }
:root[data-contraste="alto"] .marca--no { border-color: #000; }
/* Zona que se lee, no se toca: marco sin relleno y círculo con borde */
.marca--mira { border-style: solid; }

@media (prefers-reduced-motion: no-preference) {
  .marca { animation: latido 1.6s ease-in-out 0s 3; }
  @keyframes latido {
    0%, 100% { outline-offset: 0; }
    50% { outline-offset: 5px; outline-width: 3px; }
  }
}

/* ¿En qué parte de la pantalla está? Miniatura con la zona recortada */
.mapa {
  display: flex; gap: 1rem; align-items: center;
  margin: 0 0 .9rem; padding: .6rem .75rem;
  background: var(--fondo); border-radius: var(--radio);
  font-size: 1.125rem; line-height: 1.45;
}
.mapa__mini { position: relative; flex: none; width: var(--mini, 8rem); line-height: 0; border: 1.5px solid var(--tinta); border-radius: 3px; }
.mapa__mini img { width: 100%; }
.mapa__zona {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  border: 3px solid var(--marca); outline: 1.5px solid var(--marca-borde);
}
.mapa p { margin: 0; }

/* Antes y después (el mismo recorte, dos momentos). Uno debajo del otro:
   lado a lado, cada foto queda a la mitad y el texto de la pantalla no se lee. */
.antes-despues { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.antes-despues .captura { padding: .75rem; }

/* Dibujo (lo que no se puede fotografiar: la página del banco) */
.captura--dibujo .captura__marco { border-style: dashed; border-width: 2px; border-color: var(--tinta); }
.captura--dibujo .captura__marco > svg { width: 100%; height: auto; display: block; }
.aviso-dibujo {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 700;
  font-family: var(--letra-cuerpo); color: var(--tinta);
  background: var(--ambar-suave); border: 1.5px solid var(--ambar-texto);
  border-radius: 999px; padding: 0 .7rem;
}

/* ---------- Avisos ---------- */
.aviso {
  margin: 1.25rem 0; padding: 1rem 1.2rem;
  border: 2px solid; border-left-width: 8px; border-radius: var(--radio);
  background: var(--papel);
}
.aviso > :last-child { margin-bottom: 0; }
.aviso__titulo {
  display: flex; align-items: center; gap: .55rem; margin: 0 0 .35rem;
  font: 800 1.25rem/1.3 var(--letra-titulos);
}
.aviso__titulo .ic { width: 1.5rem; height: 1.5rem; }
.aviso--sepas { border-color: var(--turquesa); background: var(--turquesa-suave); }
.aviso--sepas .aviso__titulo { color: var(--turquesa-texto); }
.aviso--ojo { border-color: var(--ambar); background: var(--ambar-suave); }
.aviso--ojo .aviso__titulo { color: var(--ambar-texto); }
.aviso--alto { border-color: var(--rojo); background: var(--rojo-suave); }
.aviso--alto .aviso__titulo { color: var(--rojo-texto); }
.aviso--calma { border-color: var(--lima); background: var(--lima-suave); }
.aviso--calma .aviso__titulo { color: var(--verde-texto); }

/* Regla de oro: franja de tinta, una por tarea como mucho */
.regla-de-oro {
  margin: 2rem 0; padding: 1.25rem 1.4rem; border-radius: var(--radio);
  background: var(--tinta); color: #fff;
}
.regla-de-oro .aviso__titulo { color: #fff; }
.regla-de-oro .aviso__titulo .ic { color: var(--lima); }
.regla-de-oro p { margin: 0; }
.regla-de-oro .rotulo { color: #fff; }
.regla-de-oro a { color: #fff; }

/* Otra vía (por ejemplo, la app instalada): plegable y discreto a propósito */
.desplegable {
  margin: 1.25rem 0; border: 2px solid var(--filete); border-radius: var(--radio); background: var(--papel);
}
.desplegable > summary { font-size: 1.1875rem; }
.desplegable > summary > .ic { color: var(--tinta); }
.desplegable__cuerpo { padding: 0 1.1rem 1rem; }

/* ---------- Diagrama: el camino de tu pago ---------- */
.diagrama {
  margin: 2.5rem 0; padding: 1.25rem; background: var(--papel);
  border: 2px solid var(--filete); border-radius: var(--radio);
  container-type: inline-size;
}
.diagrama > h3 { margin-bottom: .25rem; }
.diagrama__bajada { color: var(--tinta-2); }
.diagrama__carriles { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 40rem) { .diagrama__carriles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carril { border-top: 4px solid var(--tinta); padding-top: .9rem; }
.carril--b { border-top-style: dashed; }
.carril__titulo { font: 800 1.25rem/1.3 var(--letra-titulos); margin: 0 0 .9rem; display: flex; gap: .6rem; align-items: center; }
.carril__letra {
  flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--tinta); font-weight: 800;
}
.carril ol { list-style: none; padding: 0; margin: 0; }
.nodo {
  position: relative; margin: 0 0 1.9rem; padding: .75rem .9rem;
  border: 2px solid var(--tinta); border-radius: var(--radio); background: var(--papel);
  display: flex; gap: .7rem; align-items: flex-start; line-height: 1.45;
}
.nodo + .nodo { margin-top: 0; }
.nodo > .ic { width: 1.6rem; height: 1.6rem; margin-top: .05em; }
/* la flecha hacia el siguiente */
.nodo:not(:last-child)::after {
  content: ""; position: absolute; left: 1.55rem; top: calc(100% + 2px);
  width: 0; height: 1.25rem; border-left: 3px solid var(--tinta);
}
.nodo:not(:last-child)::before {
  content: ""; position: absolute; left: calc(1.55rem - 6px); top: calc(100% + 1.1rem);
  border: 7px solid transparent; border-top: 9px solid var(--tinta); border-bottom: 0;
}
.carril--b .nodo:not(:last-child)::after { border-left-style: dashed; }
.nodo--fuera { border-style: dashed; background: var(--fondo); }
.nodo__etiqueta {
  display: inline-block; margin-top: .3rem; font-size: 1.0625rem; font-weight: 700;
  border: 1.5px dashed var(--tinta); border-radius: 999px; padding: 0 .6rem;
}
.nodo--fin-ok { background: var(--lima-suave); border-color: var(--verde-texto); }
.nodo--fin-ok > .ic { color: var(--verde-texto); }
.nodo--fin-espera { background: var(--ambar-suave); border-color: var(--ambar-texto); }
.nodo--fin-espera > .ic { color: var(--ambar-texto); }
.nodo strong { display: block; }
.diagrama__leyenda { margin: .5rem 0 0; font-size: 1.125rem; color: var(--tinta-2); display: flex; gap: .6rem; align-items: flex-start; }
.muestra-rayas { flex: none; width: 2.5rem; height: 1.5rem; border: 2px dashed var(--tinta); border-radius: 4px; margin-top: .15rem; background: var(--fondo); }

/* ---------- Listo, ¿qué sigue? ---------- */
.listo {
  margin: 2.5rem 0 0; padding: 1.25rem 1.4rem;
  background: var(--lima-suave); border: 2px solid var(--verde-texto); border-radius: var(--radio);
}
.listo h3 { display: flex; align-items: center; gap: .6rem; }
.listo h3 .ic { color: var(--verde-texto); width: 1.75rem; height: 1.75rem; }
.listo__acciones { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); }
@container contenido (min-width: 40rem) { .listo__acciones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.listo__acciones li { margin: 0; }
.boton {
  display: flex; align-items: center; justify-content: center; gap: .5rem; text-align: center;
  min-height: 3.5rem; height: 100%; padding: .6rem 1rem;
  border: 2px solid var(--tinta); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta); text-decoration: none;
  font: 700 1.1875rem/1.25 var(--letra-titulos); cursor: pointer;
}
.boton:hover { background: var(--accion-suave); }
.boton--principal { background: var(--tinta); color: #fff; }
.boton--principal:hover { background: #16336F; }

/* ---------- ¿Qué hago si…? ---------- */
.atajos { margin: 0 0 1.75rem; }
.atajos__titulo { font: 700 1.1875rem/1.3 var(--letra-titulos); margin: 0 0 .6rem; }
.atajos ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.atajos li { margin: 0; }
.atajos a {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 48px; padding: .35rem 1rem;
  border: 2px solid var(--tinta); border-radius: 999px; background: var(--papel);
  color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 1.125rem;
}
.atajos a:hover { background: var(--accion-suave); }

.problemas { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; grid-template-columns: minmax(0, 1fr); }
.problemas > li { margin: 0; }
.problema {
  background: var(--papel); border: 2px solid var(--filete); border-radius: var(--radio);
}
.problema[open] { border-color: var(--tinta); }
.problema > summary {
  list-style: none; cursor: pointer; min-height: 48px;
  padding: 1rem 1.1rem; display: grid; gap: .45rem; grid-template-columns: minmax(0, 1fr);
}
.problema > summary::-webkit-details-marker { display: none; }
.problema__pregunta { display: flex; gap: .75rem; align-items: flex-start; font: 700 1.3125rem/1.35 var(--letra-titulos); }
.problema__pregunta .abre-cierra { margin-top: .2rem; }
.problema__cuerpo { padding: 0 1.1rem 1.1rem; }
.problema__parte { margin: 0 0 .9rem; }
.problema__parte:last-child { margin: 0; }
.problema__parte h4 { margin: 0 0 .2rem; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-2); }
.problema__parte--hacer { background: var(--fondo); border-left: 6px solid var(--tinta); padding: .75rem 1rem; border-radius: 0 var(--radio) var(--radio) 0; }
.problema__parte--hacer h4 { color: var(--tinta); }
.problema .pantalla-dice { margin: 0; }
.problema:target, .problema.resaltado { border-color: var(--accion); border-width: 3px; }

/* Etiqueta de estado: SIEMPRE palabra + ícono (nunca solo color) */
.etiqueta {
  justify-self: start; display: inline-flex; align-items: center; gap: .4rem;
  padding: .15rem .7rem; border-radius: 4px; border: 1.5px solid;
  font: 800 1.0625rem/1.4 var(--letra-cuerpo);
}
.etiqueta--espera { color: var(--ambar-texto); background: var(--ambar-suave); border-color: var(--ambar-texto); }
.etiqueta--no-pagues { color: var(--rojo-texto); background: var(--rojo-suave); border-color: var(--rojo-texto); }
.etiqueta--reintenta { color: var(--turquesa-texto); background: var(--turquesa-suave); border-color: var(--turquesa-texto); }
.etiqueta--avisa { color: var(--tinta); background: var(--accion-suave); border-color: var(--tinta); }
.etiqueta--tranquilo { color: var(--verde-texto); background: var(--lima-suave); border-color: var(--verde-texto); }

/* ---------- Pie ---------- */
.pie { border-top: 2px solid var(--filete); padding: 1.5rem var(--gutter) 3rem; color: var(--tinta-2); font-size: 1.0625rem; text-align: center; }
.pie p { margin: 0 auto .4rem; max-width: var(--ancho-texto); }

/* ---------- Teléfonos ---------- */
@media (max-width: 520px) {
  .captura { padding: .75rem .5rem .9rem; border-left: 0; border-right: 0; border-radius: 0; margin-inline: calc(var(--gutter) * -1); overflow-x: clip; }
  .captura__rotulo, .captura__leyenda { padding-inline: .5rem; }
  .antes-despues .captura { padding: .6rem .5rem; }
  .paso__num { width: 2.75rem; height: 2.75rem; font-size: 1.375rem; }
  .paso__cabeza { gap: .75rem; }
  .regla-de-oro, .listo, .diagrama { padding-inline: 1rem; }
  .mapa { font-size: 1.0625rem; }
}

/* ---------- Impresión ---------- */
@media print {
  @page { margin: 14mm 12mm; }
  :root { --escala: 1 !important; --fondo: #fff; }
  html { font-size: 11pt; }
  body { background: #fff; font-size: 1.1rem; }
  .barra-ajustes, .saltar, .dispositivo, .buscador, .atajos, .listo__acciones,
  .abre-cierra, .no-imprimir { display: none !important; }
  .tarea[hidden] { display: block !important; }
  :root[data-disp] [data-solo], [data-solo] { display: revert !important; }
  .indice { display: none !important; }
  details > summary { cursor: default; }
  details::details-content { content-visibility: visible; display: contents; }
  .tarea { break-before: page; }
  .tarea__cabeza { break-after: avoid; }
  .paso { break-inside: auto; }
  .paso__cabeza, .captura, .aviso, .nodo, .problema, .pantalla-dice, .listo { break-inside: avoid; }
  /* Los dos aparatos lado a lado, rotulados */
  .paso__figuras { grid-template-columns: 1fr 1fr; align-items: start; }
  .paso__figuras > .antes-despues { grid-column: 1 / -1; }
  p[data-solo]::before { font-weight: 800; margin-right: .35em; }
  p[data-solo="pc"]::before { content: "En el computador:"; }
  p[data-solo="tel"]::before { content: "En el teléfono:"; }
  .antes-despues { grid-template-columns: 1fr 1fr; }
  .captura { padding: .5rem; margin: 0; border: 1px solid #999; border-radius: 0; }
  .marca { animation: none !important; }
  .marca, .marca::after, .leyenda__n, .paso__num, .avance i.hecho, .regla-de-oro, .tarea-boton--principal,
  .aviso, .etiqueta, .nodo, .listo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: inherit; text-decoration: none; }
  .diagrama { container-type: normal; }
  .diagrama__carriles { grid-template-columns: 1fr 1fr; }
  .portada { padding-top: 0; grid-template-columns: 1.4fr 1fr; }
  .portada__dibujo svg { max-width: 12rem; }
}

/* ---------- Letra grande en pantalla angosta ----------
   Con la letra al 175 % una palabra como «transferencia» ya no cabe en 360 px.
   Los hijos de flex y grid no se achican bajo su palabra más larga si no se les
   permite (min-width: 0), y entonces empujan la página hacia el costado. */
.tarea-boton__texto, .glosario > summary > span:not(.abre-cierra), .desplegable > summary > span:not(.abre-cierra), .problema__texto,
.dispositivo__boton > span, .paso__titulos, .nodo > span, .captura__leyenda p > span:not(.leyenda__n), .ten-a-mano li, .atajos a,
.etiqueta, .mapa p, .aviso__titulo, .problema__parte {
  min-width: 0; overflow-wrap: anywhere;
}

/* Enlaces dentro de una frase: el relleno vertical agranda la zona que se
   puede tocar hasta 48 px sin mover el renglón (el relleno de un elemento en
   línea no cambia el alto de la línea). */
a:not([class]) { padding-block: .62em; }

/* Un resumen plegable con letra grande: si el texto no cabe junto a «Ver», el
   «Ver» baja a su propia línea en vez de estrujar el texto a una letra por renglón. */
.glosario > summary, .desplegable > summary, .problema__pregunta { flex-wrap: wrap; }
.glosario > summary > span:not(.abre-cierra), .desplegable > summary > span:not(.abre-cierra),
.problema__texto { flex: 1 1 9rem; }
@container contenido (max-width: 20rem) {
  .glosario > summary > .ic:first-child, .desplegable > summary > .ic:first-child { display: none; }
}
.glosario dt { overflow-wrap: anywhere; }

/* Teléfono con la letra agrandada (el contenedor mide menos de 20 rem): las
   filas «ícono + texto + flecha» se apilan, o el texto queda de una sílaba
   por renglón. */
@container contenido (max-width: 20rem) {
  .tarea-boton { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .tarea-boton__icono { width: 2.5rem; height: 2.5rem; }
  .tarea-boton__ir { display: none; }
  .dispositivo__boton { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .dispositivo__boton > .ic { width: 1.75rem; height: 1.75rem; }
  .mapa { flex-direction: column; align-items: flex-start; }
  .datos-rapidos li { border-radius: var(--radio); }
  .glosario dt .ic { display: none; }
}