/*
 * EL CENTRO DE AYUDA (`/ayuda`): portada, públicos, secciones, páginas,
 * buscador y capturas.
 *
 * Copiado de la hoja de Presupeso (`presupeso/src/publico/css/ayuda.css`), que
 * lleva más tiempo probándose, y puesto sobre los tokens de OneIoT con el
 * puente de abajo: así las reglas se pueden comparar con las de allá línea a
 * línea, y ningún color de aquí es suelto — todo sale de `oneiot.css`, también
 * el oscuro.
 *
 * Primero el teléfono (360 px) y después hacia el escritorio con `min-width`:
 *   · 960 px  aparece el árbol de secciones a la izquierda;
 *   · 1240 px aparece el índice de la página a la derecha («espía»).
 */

/* ── EL PUENTE: los nombres de Presupeso, con los colores de OneIoT ─────── */
.zona-ayuda {
    --texto: var(--tinta);
    --texto-2: color-mix(in srgb, var(--tinta) 78%, var(--tinta-suave));
    --texto-3: var(--tinta-suave);
    --superficie: var(--papel);
    --superficie-2: color-mix(in srgb, var(--tinta-suave) 9%, var(--papel));
    --acento-tinta: var(--acento);
    --marca: #0f2f2c;
    --marca-2: #0b3d39;
    --sobre-marca: #ffffff;
    --sobre-marca-2: rgba(255, 255, 255, .78);
    --sobre-marca-3: rgba(255, 255, 255, .14);
    --info: #2563eb;
    --info-fondo: color-mix(in srgb, #2563eb 10%, var(--papel));
    --positivo-tinta: var(--bueno);
    --positivo-fondo: color-mix(in srgb, var(--bueno) 11%, var(--papel));
    --negativo-tinta: var(--malo);
    --negativo-fondo: color-mix(in srgb, var(--malo) 10%, var(--papel));
    --aviso: var(--atencion);
    --aviso-fondo: color-mix(in srgb, var(--atencion) 13%, var(--papel));
    --radio-chico: 10px;
    --radio-grande: 18px;
    --sombra-1: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px rgba(15, 23, 42, .06);
    --sombra-2: 0 2px 4px rgba(15, 23, 42, .06), 0 18px 40px rgba(15, 23, 42, .12);
    --margen: 1.25rem;
    --margen-der: 1.25rem;
    --cabecera-alto: 64px;
    --hueco-seccion: 3.5rem;
    --letra: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --seguro-arriba: env(safe-area-inset-top, 0px);
    --seguro-der: env(safe-area-inset-right, 0px);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .zona-ayuda { --marca: #061b19; --marca-2: #0a2b28; --info: #60a5fa; }
}
:root[data-tema="oscuro"] .zona-ayuda { --marca: #061b19; --marca-2: #0a2b28; --info: #60a5fa; }

/* El centro de ayuda ocupa el ancho: su armazón pone sus propios márgenes. */
.zona-ayuda .marco { max-width: none; padding: 0; }
.zona-ayuda .contenedor { max-width: 1180px; margin: 0 auto; padding: 0 var(--margen); }
.zona-ayuda .seccion { padding-bottom: var(--hueco-seccion); }
.solo-lector { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.zona-ayuda .icono { width: 20px; height: 20px; flex: none; }
.zona-ayuda .antetitulo { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* El buscador: un campo grande con su lupa dentro. */
.buscador { position: relative; }
.buscador > .icono { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.buscador input { width: 100%; min-height: 52px; margin: 0; padding: 12px 16px 12px 48px; border-radius: 14px; border: 1.5px solid var(--borde); background: var(--superficie); color: var(--texto); font: inherit; font-size: 1.02rem; }
.buscador input:focus { outline: 3px solid color-mix(in srgb, var(--acento) 45%, transparent); outline-offset: 1px; border-color: var(--acento); }

/* La prosa del manual: lo que pinta el Markdown. */
.prosa { font-size: 1.04rem; line-height: 1.7; color: var(--texto); overflow-wrap: break-word; }
.prosa p, .prosa ul, .prosa ol { margin: 0 0 1em; }
.prosa ul { padding-left: 1.3em; }
.prosa li { margin-bottom: .35em; }
.prosa h2 { font-size: 1.45rem; font-weight: 800; margin: 1.8em 0 .6em; letter-spacing: -.01em; }
.prosa h3 { font-size: 1.15rem; font-weight: 750; margin: 1.5em 0 .5em; }
.prosa strong { font-weight: 700; }
.prosa a { color: var(--acento); text-underline-offset: 3px; }
.prosa code { padding: .1em .35em; border-radius: 6px; background: var(--superficie-2); font-size: .88em; }
.prosa pre { padding: 14px 16px; border-radius: var(--radio); background: var(--superficie-2); overflow-x: auto; font-size: .88rem; line-height: 1.5; }
.prosa pre code { padding: 0; background: none; }
.prosa table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prosa th, .prosa td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.prosa th { font-weight: 700; }
.prosa img { max-width: 100%; height: auto; }
.prosa hr { border: 0; border-top: 1px solid var(--borde); margin: 2em 0; }

/* Las tarjetas y los botones que usa el armazón. */
.zona-ayuda .tarjeta { padding: 20px; border-radius: var(--radio-grande); background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra-1); }
.zona-ayuda .tarjeta h3 { margin: 10px 0 6px; font-size: 1.08rem; }
.zona-ayuda .tarjeta p { margin: 0; color: var(--texto-2); }
.tarjeta__icono { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--acento-claro); color: var(--acento); }
.ayuda-pie { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 720px) { .ayuda-pie { grid-template-columns: 1fr 1fr; } }

.abrir-app { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: 32px; padding: 18px 20px; border-radius: var(--radio-grande); background: var(--acento-claro); border: 1px solid color-mix(in srgb, var(--acento) 25%, var(--borde)); }
.abrir-app strong { display: block; font-size: 1.02rem; }
.abrir-app p { margin: 2px 0 0; color: var(--texto-2); font-size: .95rem; }
.abrir-app .boton { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

/* «¿Te sirvió?» */
.sirvio { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 36px; padding: 18px 20px; border-radius: var(--radio-grande); border: 1px solid var(--borde); background: var(--superficie); }
.sirvio__pregunta { margin: 0; font-weight: 750; }
.sirvio__botones { display: flex; gap: 8px; }
.sirvio__boton { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 12px; border: 1.5px solid var(--borde); background: var(--superficie); color: var(--texto); font: inherit; font-weight: 650; cursor: pointer; }
.sirvio__boton[aria-pressed="true"] { border-color: var(--acento); background: var(--acento-claro); color: var(--acento); }
.sirvio__gracias { flex-basis: 100%; margin: 0; color: var(--texto-2); font-size: .95rem; }
@media (hover: hover) { .sirvio__boton:hover { border-color: var(--acento); } }

/* Anterior / siguiente. */
.salto { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--radio-grande); border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); text-decoration: none; }
.salto small { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-3); font-size: .82rem; font-weight: 700; }
.salto small .icono { width: 15px; height: 15px; }
.salto strong { font-weight: 750; }
.salto--siguiente { text-align: right; }
.salto--siguiente small { justify-content: flex-end; }
@media (hover: hover) { .salto:hover { border-color: var(--acento); box-shadow: var(--sombra-1); } }

/* Quién lo hace (`rol` en la cabecera de la página). */
.articulo__rol { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; background: var(--superficie-2); color: var(--texto-2); font-size: .86rem; font-weight: 600; }
.articulo__rol .icono { width: 15px; height: 15px; color: var(--acento); }

/* El 404 del manual. */
.error-tarjeta { max-width: 640px; padding: clamp(24px, 5vw, 40px); border-radius: var(--radio-grande); background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra-1); text-align: center; }
.error-tarjeta__codigo { display: block; font-family: Outfit, sans-serif; font-size: 3.4rem; font-weight: 800; color: var(--texto-3); line-height: 1; }
.error-tarjeta__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.error-tarjeta__botones .boton { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

/* Los públicos de la portada: cliente, comunidad y equipo de YSNOne. */
.publicos { display: grid; gap: 16px; }
@media (min-width: 760px) { .publicos { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.publico-tarjeta { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--radio-grande); background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra-1); color: var(--texto); text-decoration: none; }
.publico-tarjeta h3 { margin: 0; font-size: 1.2rem; }
.publico-tarjeta p { margin: 0; color: var(--texto-2); }
.publico-tarjeta__pie { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--acento); }
.publico-tarjeta--staff { border-style: dashed; }
@media (hover: hover) { .publico-tarjeta:hover { border-color: var(--acento); box-shadow: var(--sombra-2); } }

/* ── EL COLOR DE CADA SECCIÓN ───────────────────────────────────────────── */
.color-acento { --c: var(--acento-tinta); --c-fondo: color-mix(in srgb, var(--acento) 16%, var(--superficie)); }
.color-info { --c: color-mix(in srgb, var(--info) 78%, var(--texto)); --c-fondo: var(--info-fondo); }
.color-positivo { --c: var(--positivo-tinta); --c-fondo: var(--positivo-fondo); }
.color-negativo { --c: var(--negativo-tinta); --c-fondo: var(--negativo-fondo); }
.color-aviso { --c: color-mix(in srgb, var(--aviso) 55%, var(--texto)); --c-fondo: var(--aviso-fondo); }
.color-marca { --c: var(--marca); --c-fondo: color-mix(in srgb, var(--marca) 10%, var(--superficie)); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .color-marca { --c: var(--texto); --c-fondo: var(--superficie-2); } }
:root[data-tema="oscuro"] .color-marca { --c: var(--texto); --c-fondo: var(--superficie-2); }

.chip-seccion { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; color: var(--c, var(--acento-tinta)); background: var(--c-fondo, var(--superficie-2)); }
.chip-seccion .icono { width: 18px; height: 18px; }
.chip-seccion--grande { width: 48px; height: 48px; border-radius: 14px; }
.chip-seccion--grande .icono { width: 26px; height: 26px; }

/* ── EL TEMA: lo que solo se ve en claro o en oscuro ────────────────────── */
.solo-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .solo-oscuro { display: block; }
    :root:not([data-tema="claro"]) .solo-claro { display: none; }
}
:root[data-tema="oscuro"] .solo-oscuro { display: block; }
:root[data-tema="oscuro"] .solo-claro { display: none; }

/* ── LA BARRA DE AYUDA ──────────────────────────────────────────────────── */
.ayuda-barra { background: var(--superficie); border-bottom: 1px solid var(--borde); position: relative; z-index: 30; }
.ayuda-barra__dentro { display: flex; align-items: center; gap: 10px; max-width: 1400px; margin: 0 auto; min-height: 60px; padding: 8px var(--margen-der) 8px var(--margen); }
.ayuda-barra__marca { display: none; align-items: center; gap: 8px; color: var(--texto); font-weight: 800; text-decoration: none; white-space: nowrap; padding: 8px 6px; border-radius: 10px; }
.ayuda-barra__marca .icono { color: var(--acento-tinta); }
.ayuda-barra__buscar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px 8px 14px; border-radius: 12px; border: 1.5px solid var(--borde); background: var(--fondo); color: var(--texto-3); text-decoration: none; font-size: .96rem; }
.ayuda-barra__buscar-texto { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ayuda-barra__teclas, .buscador__teclas, .buscador-ventana kbd { font: 600 .75rem/1 var(--letra); padding: 5px 7px; border-radius: 6px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-3); white-space: nowrap; }
.ayuda-barra__tema { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; border: 1.5px solid var(--borde); background: var(--superficie); color: var(--texto-2); cursor: pointer; }
@media (hover: hover) {
    .ayuda-barra__buscar:hover { border-color: var(--texto-3); color: var(--texto-2); }
    .ayuda-barra__tema:hover, .ayuda-barra__marca:hover { background: var(--superficie-2); }
}
@media (max-width: 559px) { .ayuda-barra__teclas { display: none; } }
@media (min-width: 720px) {
    .ayuda-barra__marca { display: inline-flex; }
    .ayuda-barra__buscar { max-width: 440px; margin-left: auto; }
}
@media (min-width: 960px) { .ayuda-barra { position: sticky; top: var(--cabecera-alto); } }

/* ── LA PORTADA ─────────────────────────────────────────────────────────── */
.ayuda-heroe { color: var(--sobre-marca); background: radial-gradient(ellipse 60% 80% at 90% 0%, color-mix(in srgb, var(--acento) 22%, transparent), transparent 70%), linear-gradient(180deg, var(--marca), var(--marca-2)); padding: clamp(36px, 7vw, 76px) 0 clamp(36px, 6vw, 64px); text-align: center; }
.ayuda-heroe .antetitulo { color: var(--acento); }
.ayuda-heroe h1 { font-size: clamp(2rem, 7vw, 3.2rem); font-weight: 850; letter-spacing: -.03em; margin-bottom: 12px; text-wrap: balance; }
.ayuda-heroe__entrada { color: var(--sobre-marca-2); font-size: clamp(1.02rem, 2.4vw, 1.18rem); max-width: 40em; margin: 0 auto; }
.ayuda-heroe__cifras { color: var(--sobre-marca-2); font-size: .92rem; margin: 14px 0 0; }
.buscador--heroe { margin: 26px auto 0; max-width: 680px; text-align: left; }
.buscador--heroe input { min-height: 62px; font-size: 1.1rem; padding-right: 86px; }
.buscador__teclas { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
@media (max-width: 559px) { .buscador__teclas { display: none; } .buscador--heroe input { padding-right: 16px; } }

.ayuda-portada { padding-top: clamp(24px, 4vw, 44px); }
.ayuda-portada__titulo { font-size: clamp(1.35rem, 3.6vw, 1.7rem); font-weight: 850; margin: clamp(32px, 5vw, 52px) 0 18px; }

.primera-vez { padding: clamp(18px, 3vw, 28px); border-radius: var(--radio-grande); background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra-1); }
.primera-vez__cabeza { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.primera-vez__cabeza h2 { font-size: 1.35rem; font-weight: 850; margin: 2px 0 4px; }
.primera-vez__cabeza p { margin: 0; color: var(--texto-2); }
.primera-vez__pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.primera-vez__paso { display: flex; gap: 14px; align-items: center; height: 100%; padding: 14px; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--fondo); color: var(--texto); text-decoration: none; }
.primera-vez__numero { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--acento); color: var(--marca); font-weight: 850; }
.primera-vez__texto { display: grid; gap: 2px; min-width: 0; }
.primera-vez__texto strong { font-weight: 750; line-height: 1.3; }
.primera-vez__texto span { font-size: .86rem; color: var(--texto-3); }
@media (hover: hover) { .primera-vez__paso:hover { border-color: var(--acento-tinta); background: var(--superficie-2); } }
@media (min-width: 640px) { .primera-vez__pasos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .primera-vez__pasos { grid-template-columns: repeat(4, 1fr); } }

.tarjetas-seccion { display: grid; gap: 16px; }
@media (min-width: 640px) { .tarjetas-seccion { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .tarjetas-seccion { grid-template-columns: repeat(3, 1fr); } }
.tarjeta-seccion { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--radio-grande); background: var(--superficie); border: 1px solid var(--borde); border-top: 4px solid var(--c); box-shadow: var(--sombra-1); min-width: 0; }
.tarjeta-seccion__cabeza { display: flex; gap: 14px; align-items: center; }
.tarjeta-seccion h3 { font-size: 1.12rem; font-weight: 800; margin: 0; }
.tarjeta-seccion h3 a { color: var(--texto); text-decoration: none; }
.tarjeta-seccion h3 a:hover { text-decoration: underline; }
.tarjeta-seccion__cuantas { margin: 2px 0 0; font-size: .84rem; color: var(--texto-3); font-weight: 600; }
.tarjeta-seccion__desc { margin: 0; color: var(--texto-2); font-size: .95rem; }
.tarjeta-seccion__paginas { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.tarjeta-seccion__paginas a { display: flex; gap: 6px; align-items: flex-start; padding: 8px 6px; border-radius: 8px; color: var(--texto); text-decoration: none; font-size: .95rem; line-height: 1.35; }
.tarjeta-seccion__paginas .icono { width: 16px; height: 16px; margin-top: 2px; color: var(--c); }
.tarjeta-seccion__todas { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 8px 6px 0; font-weight: 700; font-size: .92rem; color: var(--c); text-decoration: none; }
.tarjeta-seccion__todas .icono { width: 16px; height: 16px; }
@media (hover: hover) { .tarjeta-seccion__paginas a:hover { background: var(--superficie-2); } .tarjeta-seccion__todas:hover { text-decoration: underline; } }

/* ── EL ARMAZÓN DE UNA PÁGINA ───────────────────────────────────────────── */
.ayuda-pagina { display: grid; gap: 24px; max-width: 1400px; margin: 0 auto; padding: 20px var(--margen-der) var(--hueco-seccion) var(--margen); }
.ayuda-centro { min-width: 0; }
.ayuda-lateral, .ayuda-indice { display: none; }
@media (min-width: 960px) {
    .ayuda-pagina { grid-template-columns: 270px minmax(0, 1fr); gap: 40px; padding-top: 32px; }
    .ayuda-lateral { display: block; position: sticky; top: calc(var(--cabecera-alto) + 76px); align-self: start; max-height: calc(100vh - var(--cabecera-alto) - 96px); overflow-y: auto; overscroll-behavior: contain; padding: 0 6px 24px 0; }
    .temas-movil { display: none; }
    .ayuda-centro { max-width: 780px; }
}
@media (min-width: 1240px) {
    .ayuda-pagina { grid-template-columns: 270px minmax(0, 780px) 230px; justify-content: space-between; }
    .ayuda-pagina--sin-indice { grid-template-columns: 270px minmax(0, 860px); justify-content: start; }
    .ayuda-pagina--sin-indice .ayuda-centro { max-width: 860px; }
    .ayuda-indice { display: block; position: sticky; top: calc(var(--cabecera-alto) + 76px); align-self: start; max-height: calc(100vh - var(--cabecera-alto) - 96px); overflow-y: auto; }
    .indice-movil { display: none; }
}

/* El árbol de secciones (a la izquierda, o plegado arriba en el teléfono). */
.arbol, .arbol__paginas { list-style: none; margin: 0; padding: 0; }
.arbol__seccion { margin-bottom: 2px; }
.arbol summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: .95rem; color: var(--texto); }
.arbol summary::-webkit-details-marker { display: none; }
.arbol__titulo { flex: 1; min-width: 0; line-height: 1.25; }
.arbol__flecha { width: 16px; height: 16px; color: var(--texto-3); transition: transform .2s ease; }
.arbol details[open] .arbol__flecha { transform: rotate(180deg); }
.arbol__paginas { margin: 2px 0 8px 23px; padding-left: 12px; border-left: 1.5px solid var(--borde); }
.arbol__enlace { display: block; padding: 7px 10px; border-radius: 8px; color: var(--texto-2); text-decoration: none; font-size: .92rem; line-height: 1.35; }
.arbol__enlace[aria-current="page"] { background: color-mix(in srgb, var(--acento) 16%, var(--superficie)); color: var(--texto); font-weight: 700; box-shadow: inset 3px 0 0 var(--acento-tinta); }
@media (hover: hover) { .arbol summary:hover, .arbol__enlace:hover { background: var(--superficie-2); color: var(--texto); } }

.temas-movil, .indice-movil { margin-bottom: 14px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.temas-movil summary, .indice-movil summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 12px 16px; font-weight: 700; cursor: pointer; }
.temas-movil summary::-webkit-details-marker, .indice-movil summary::-webkit-details-marker { display: none; }
.temas-movil summary .icono, .indice-movil summary .icono { color: var(--texto-3); transition: transform .2s ease; }
.temas-movil[open] summary .icono, .indice-movil[open] summary .icono { transform: rotate(180deg); }
.temas-movil__lista { max-height: 65vh; overflow-y: auto; padding: 4px 8px 10px; border-top: 1px solid var(--borde); }
.temas-movil .arbol summary .icono { transform: none; }
.temas-movil .arbol details[open] .arbol__flecha { transform: rotate(180deg); }
.indice-movil nav { padding: 4px 16px 14px; border-top: 1px solid var(--borde); }
.indice-movil ol, .ayuda-indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.indice-movil a, .ayuda-indice a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--texto-2); text-decoration: none; font-size: .92rem; line-height: 1.35; }
.indice-movil .nivel-3 a, .ayuda-indice .nivel-3 a { padding-left: 24px; font-size: .87rem; }
.ayuda-indice__titulo { margin: 0 0 8px; padding: 0 10px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.ayuda-indice a { border-left: 2px solid var(--borde); border-radius: 0 8px 8px 0; }
.ayuda-indice a.activo { color: var(--texto); font-weight: 700; border-left-color: var(--acento-tinta); background: color-mix(in srgb, var(--acento) 10%, transparent); }
@media (hover: hover) { .indice-movil a:hover, .ayuda-indice a:hover { color: var(--texto); background: var(--superficie-2); } }

/* Las migas: Ayuda › Sección › Página. */
.migas-ayuda ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 16px; padding: 0; font-size: .9rem; color: var(--texto-3); }
.migas-ayuda li + li::before { content: "›"; margin-right: 4px; color: var(--texto-3); }
.migas-ayuda a { color: var(--texto-2); text-decoration: none; }
.migas-ayuda a:hover { color: var(--texto); text-decoration: underline; }
.migas-ayuda [aria-current] { color: var(--texto-3); }

/* ── LA CABEZA DE UNA PÁGINA Y DE UNA SECCIÓN ───────────────────────────── */
.articulo__cabeza { margin-bottom: 22px; }
.articulo__seccion { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--c-fondo); color: var(--c); font-weight: 750; font-size: .88rem; text-decoration: none; }
.articulo__seccion .chip-seccion { width: 26px; height: 26px; border-radius: 50%; background: var(--superficie); }
.articulo__seccion .chip-seccion .icono { width: 15px; height: 15px; }
.articulo__cabeza h1, .seccion-cabeza h1 { font-size: clamp(1.8rem, 5.6vw, 2.5rem); font-weight: 850; letter-spacing: -.03em; line-height: 1.12; margin: 0 0 10px; text-wrap: balance; }
.articulo__desc, .seccion-cabeza__desc { font-size: clamp(1.05rem, 2.6vw, 1.2rem); color: var(--texto-2); margin: 0 0 12px; line-height: 1.5; }
.articulo__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: .88rem; color: var(--texto-3); }
.articulo__meta span { display: inline-flex; align-items: center; gap: 6px; }
.articulo__meta .icono { width: 15px; height: 15px; }
.seccion-cabeza { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.seccion-lista__titulo { font-size: 1.1rem; font-weight: 800; margin: 28px 0 10px; }
.aviso-idioma { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radio-chico); background: var(--info-fondo); color: var(--texto); font-size: .95rem; margin-bottom: 20px; }
.aviso-idioma .icono { color: var(--info); margin-top: 2px; }

/* Las filas de páginas (en la sección, en el 404). La fila bajo el ratón se sombrea. */
.lista-paginas { list-style: none; margin: 0; padding: 6px; display: grid; border-radius: var(--radio-grande); border: 1px solid var(--borde); background: var(--superficie); }
.fila-pagina { display: flex; align-items: center; gap: 12px; padding: 14px 12px; border-radius: var(--radio-chico); color: var(--texto); text-decoration: none; }
.lista-paginas li + li .fila-pagina { border-top: 1px solid var(--borde); border-radius: 0; }
.fila-pagina__texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fila-pagina__titulo { font-weight: 750; }
.fila-pagina__desc { font-size: .92rem; color: var(--texto-2); line-height: 1.4; }
.fila-pagina__min { display: none; align-items: center; gap: 4px; font-size: .82rem; color: var(--texto-3); white-space: nowrap; }
.fila-pagina__min .icono { width: 14px; height: 14px; }
.fila-pagina__flecha { width: 18px; height: 18px; color: var(--texto-3); }
@media (min-width: 640px) { .fila-pagina__min { display: inline-flex; } }
@media (hover: hover) { .fila-pagina:hover { background: var(--superficie-2); } .fila-pagina:hover .fila-pagina__flecha { color: var(--acento-tinta); } }

/* ── EL CUERPO: lo que añade el manual a `.prosa` ───────────────────────── */
.prosa h2, .prosa h3 { scroll-margin-top: calc(var(--cabecera-alto) + 80px); }
.prosa h2 { padding-top: .4em; border-top: 1px solid var(--borde); }
.prosa > h2:first-child { border-top: 0; padding-top: 0; }
.prosa mark, .resultado mark, .buscador-ventana mark { background: color-mix(in srgb, var(--acento) 28%, var(--superficie)); color: var(--texto); border-radius: 3px; padding: 0 2px; }

/* Los pasos: una lista numerada con su número en un círculo. */
.prosa ol.lista-pasos { list-style: none; counter-reset: paso; padding-left: 0; display: grid; gap: 10px; }
.prosa ol.lista-pasos > li { counter-increment: paso; position: relative; padding: 2px 0 0 44px; margin: 0; min-height: 30px; }
.prosa ol.lista-pasos > li::before { content: counter(paso); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--marca); color: var(--sobre-marca); font-weight: 800; font-size: .9rem; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .prosa ol.lista-pasos > li::before { background: var(--acento); color: var(--marca); } }
:root[data-tema="oscuro"] .prosa ol.lista-pasos > li::before { background: var(--acento); color: var(--marca); }
/* La leyenda de una captura: números pequeños, pegada a la figura. */
.prosa ol.leyenda { margin-top: -8px; padding: 14px 16px 14px 2.4em; border-radius: 0 0 var(--radio) var(--radio); background: var(--superficie); border: 1px solid var(--borde); border-top: 0; font-size: .95rem; }
.prosa ol.leyenda li { margin-bottom: .3em; }

/* Los avisos: Nota, Consejo, Importante, Ojo, Cuidado. */
.prosa .aviso-ayuda { --a: color-mix(in srgb, var(--info) 78%, var(--texto)); --a-fondo: var(--info-fondo); display: flex; gap: 12px; margin: 1.5em 0; padding: 14px 16px; border-radius: var(--radio); background: var(--a-fondo); border: 1px solid color-mix(in srgb, var(--a) 30%, transparent); border-left: 4px solid var(--a); }
.prosa .aviso-ayuda--tip { --a: var(--positivo-tinta); --a-fondo: var(--positivo-fondo); }
.prosa .aviso-ayuda--important { --a: var(--acento-tinta); --a-fondo: color-mix(in srgb, var(--acento) 12%, var(--superficie)); }
.prosa .aviso-ayuda--warning { --a: color-mix(in srgb, var(--aviso) 55%, var(--texto)); --a-fondo: var(--aviso-fondo); }
.prosa .aviso-ayuda--caution { --a: var(--negativo-tinta); --a-fondo: var(--negativo-fondo); }
.aviso-ayuda-icono { flex: none; color: var(--a); margin-top: 2px; }
.aviso-ayuda-icono .icono { width: 22px; height: 22px; }
.aviso-ayuda-cuerpo { min-width: 0; }
.prosa .aviso-ayuda-titulo { margin: 0 0 .2em; font-weight: 800; color: var(--a); font-size: .88rem; letter-spacing: .04em; text-transform: uppercase; }
.aviso-ayuda-cuerpo > :last-child { margin-bottom: 0; }

/* El «Ver más» (detalle) y las dudas (caso): plegados, pero que se VEA que se abren. */
.prosa details.detalle, .prosa details.caso { margin: 1.2em 0; border-radius: var(--radio); background: var(--superficie); border: 1.5px solid var(--borde); }
.prosa details.detalle { border-style: dashed; border-color: color-mix(in srgb, var(--acento-tinta) 55%, var(--borde)); }
.prosa details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; font-weight: 750; }
.prosa details > summary::-webkit-details-marker { display: none; }
.detalle-ver { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 4px 10px 4px 6px; border-radius: 999px; background: color-mix(in srgb, var(--acento) 18%, var(--superficie)); color: var(--acento-tinta); font-size: .8rem; font-weight: 800; letter-spacing: .02em; }
.detalle-ver .icono, .caso-signo { width: 16px; height: 16px; transition: transform .2s ease; }
.prosa details[open] .detalle-ver .icono, .prosa details[open] .caso-signo { transform: rotate(45deg); }
.detalle-titulo { min-width: 0; }
/* El «Ver más» va encima del título: al lado, en el teléfono, el título quedaba en una columna estrecha. */
.prosa details.detalle > summary { flex-direction: column; align-items: flex-start; gap: 6px; }
.prosa details.caso > summary { justify-content: space-between; }
.caso-signo { flex: none; color: var(--acento-tinta); width: 20px; height: 20px; }
.detalle-cuerpo, .caso-cuerpo { padding: 2px 18px 16px; border-top: 1px solid var(--borde); padding-top: 14px; }
.detalle-cuerpo > :last-child, .caso-cuerpo > :last-child { margin-bottom: 0; }
@media (hover: hover) { .prosa details > summary:hover { background: var(--superficie-2); border-radius: var(--radio); } }

/* Las tablas se desplazan solas en el teléfono, sin romper el ancho. */
.prosa .tabla-envoltura { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.prosa .tabla-envoltura table { display: table; margin: 0; min-width: 100%; }
.prosa .tabla-envoltura th { background: var(--superficie-2); }
.prosa .tabla-envoltura tr:last-child td { border-bottom: 0; }

/* Las capturas: marco de ventana, pie y lupa. */
.figura { margin: 1.6em 0; }
.figura-marco { display: block; width: 100%; padding: 0; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: var(--superficie); box-shadow: var(--sombra-1); cursor: zoom-in; text-align: left; color: inherit; transition: box-shadow .15s ease, transform .15s ease; }
.figura-barra { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; background: var(--superficie-2); border-bottom: 1px solid var(--borde); }
.figura-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--borde); flex: none; }
.figura-ruta { flex: 1; min-width: 0; margin-left: 6px; font-size: .8rem; font-weight: 600; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.figura-lupa { width: 16px; height: 16px; color: var(--texto-3); }
.figura-marco img { width: 100%; height: auto; border-radius: 0; }
/* Las capturas de la app: un teléfono, también en el ordenador. */
.figura--telefono .figura-marco, .figura--telefono figcaption { max-width: 320px; margin-left: auto; margin-right: auto; }
.figura figcaption { margin-top: 10px; font-size: .93rem; color: var(--texto-2); line-height: 1.5; }
.figura-ejemplo { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; padding: 2px 8px; border-radius: 999px; background: var(--aviso-fondo); color: color-mix(in srgb, var(--aviso) 55%, var(--texto)); font-size: .76rem; font-weight: 800; vertical-align: 1px; }
.figura-ejemplo .icono { width: 13px; height: 13px; }
@media (hover: hover) { .figura-marco:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); } .figura-marco:hover .figura-lupa { color: var(--acento-tinta); } }
/* En el teléfono, la captura del teléfono: más estrecha y centrada, como un teléfono. */
@media (max-width: 700px) {
    .figura--con-movil .figura-marco { max-width: 340px; margin: 0 auto; }
    .figura--con-movil figcaption { max-width: 340px; margin-left: auto; margin-right: auto; }
}

/* ── «¿TE SIRVIÓ?» Y ANTERIOR / SIGUIENTE ───────────────────────────────── */
.anterior-siguiente { display: grid; gap: 12px; margin-top: 24px; }
@media (min-width: 640px) { .anterior-siguiente { grid-template-columns: 1fr 1fr; } .anterior-siguiente .salto--siguiente:only-child { grid-column: 2; } }
.salto__seccion { font-size: .82rem; color: var(--texto-3); }

/* ── EL BUSCADOR EN VENTANA (Ctrl K) ────────────────────────────────────── */
.buscador-ventana { width: min(660px, calc(100% - 24px)); max-height: min(640px, calc(100dvh - 48px)); margin: max(24px, 8vh) auto auto; padding: 0; border: 1px solid var(--borde); border-radius: var(--radio-grande); background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-2); overflow: hidden; }
.buscador-ventana[open] { display: flex; flex-direction: column; }
.buscador-ventana::backdrop { background: rgba(8, 18, 36, .55); }
.buscador-ventana__caja { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--borde); }
.buscador-ventana__caja > .icono { color: var(--texto-3); }
.buscador-ventana__caja input { flex: 1; min-width: 0; min-height: 48px; border: 0; background: transparent; color: var(--texto); font-size: 1.1rem; outline: none; -webkit-appearance: none; appearance: none; }
.buscador-ventana__cerrar { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 10px; background: transparent; color: var(--texto-2); cursor: pointer; }
.buscador-ventana__cerrar:hover { background: var(--superficie-2); }
.buscador-ventana__pista { margin: 0; padding: 14px 18px; font-size: .92rem; color: var(--texto-3); }
.buscador-ventana__lista { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
.buscador-ventana__lista:empty { display: none; }
.buscador-ventana__teclas { margin: 0; padding: 10px 18px; border-top: 1px solid var(--borde); font-size: .8rem; color: var(--texto-3); }
@media (hover: none) { .buscador-ventana__teclas { display: none; } }
.resultado { display: grid; gap: 3px; padding: 12px 14px; border-radius: var(--radio-chico); color: var(--texto); text-decoration: none; }
.resultado__seccion { font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--acento-tinta); }
.resultado__titulo { font-weight: 750; }
.resultado__fragmento { font-size: .92rem; color: var(--texto-2); line-height: 1.45; }
.resultado[aria-selected="true"] { background: color-mix(in srgb, var(--acento) 14%, var(--superficie)); box-shadow: inset 3px 0 0 var(--acento-tinta); }
@media (hover: hover) { .resultado:hover { background: var(--superficie-2); } }
.buscador-ventana__vacio { padding: 18px; color: var(--texto-2); text-align: center; }

/* La página de resultados sin JavaScript. */
.buscar-titulo { font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 850; }
.lista-resultados { list-style: none; margin: 16px 0 0; padding: 6px; display: grid; gap: 2px; border-radius: var(--radio-grande); border: 1px solid var(--borde); background: var(--superficie); }
.buscador input { border-color: var(--borde); }

/* ── LA CAPTURA AMPLIADA ────────────────────────────────────────────────── */
.captura-ampliada { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; }
.captura-ampliada[open] { display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 12px; padding: 64px 12px 20px; overflow-y: auto; overscroll-behavior: contain; }
.captura-ampliada::backdrop { background: rgba(6, 12, 24, .9); }
.captura-ampliada__marco { min-height: 0; flex: 0 1 auto; display: flex; justify-content: center; max-width: 100%; }
.captura-ampliada img { max-width: min(100%, 1600px); max-height: calc(100dvh - 170px); width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); background: var(--superficie); }
.captura-ampliada__pie { margin: 0; max-width: 720px; text-align: center; color: var(--sobre-marca); font-size: .9rem; line-height: 1.45; }
.captura-ampliada__cerrar { position: fixed; top: calc(10px + var(--seguro-arriba)); right: calc(10px + var(--seguro-der)); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--sobre-marca-3); color: var(--sobre-marca); cursor: pointer; }
.captura-ampliada__cerrar:hover { background: color-mix(in srgb, var(--sobre-marca) 26%, transparent); }

/* ── EL 404 DEL MANUAL ──────────────────────────────────────────────────── */
.ayuda-no-esta { padding: clamp(36px, 7vw, 80px) 0 var(--hueco-seccion); }
.ayuda-no-esta .error-tarjeta { margin: 0 auto; }
.ayuda-no-esta .lista-paginas { text-align: left; margin-bottom: 24px; }
.ayuda-no-esta__sugerencias { font-weight: 700; margin: 0 0 10px; }

@media (prefers-reduced-motion: reduce) { .figura-marco, .arbol__flecha, .detalle-ver .icono, .caso-signo { transition: none; } }
@media print { .ayuda-barra, .ayuda-lateral, .ayuda-indice, .temas-movil, .indice-movil, .sirvio, .anterior-siguiente, .abrir-app { display: none !important; } .prosa details { border: 0; } }
.resultados__cuenta { margin: 14px 0 0; font-size: .92rem; color: var(--texto-3); }
.resultados__vacio { margin-top: 14px; padding: 20px; border-radius: var(--radio); border: 1px dashed var(--borde); color: var(--texto-2); text-align: center; }
/* La «×» del navegador en los campos de búsqueda: ya hay un botón de cerrar. */
.buscador-ventana input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* En el teléfono, cada tarjeta de sección enseña dos páginas y el enlace a todas: la portada se recorre de un vistazo. */
@media (max-width: 639px) { .tarjeta-seccion__paginas li:nth-child(n+3) { display: none; } .tarjeta-seccion { padding: 16px; } }

/* El nombre del público arriba del árbol, y la entrada de cada sección en la portada de un público. */
.lateral-publico { display: block; margin: 0 0 10px; padding: 6px 8px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); text-decoration: none; }
.lateral-publico:hover { color: var(--acento); }
.seccion-lista__titulo a { color: var(--texto); text-decoration: none; }
.seccion-lista__titulo a:hover { text-decoration: underline; }
.seccion-lista__desc { margin: -4px 0 10px; color: var(--texto-2); }