/*
 * EL CENTRO DE AYUDA (`/ayuda`): portada, secciones, páginas, buscador y capturas.
 *
 * Va encima de `base.css` y `sitio.css` y usa SUS tokens: aquí no se escribe
 * ningún color suelto. El color de cada sección sale de una clase
 * (`.color-info`…) que fija `--c` y `--c-fondo`: la CSP no deja estilos en
 * línea, y así tampoco hacen falta.
 *
 * 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 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 { --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--tip { --a: var(--positivo-tinta); --a-fondo: var(--positivo-fondo); }
.prosa .aviso--important { --a: var(--acento-tinta); --a-fondo: color-mix(in srgb, var(--acento) 12%, var(--superficie)); }
.prosa .aviso--warning { --a: color-mix(in srgb, var(--aviso) 55%, var(--texto)); --a-fondo: var(--aviso-fondo); }
.prosa .aviso--caution { --a: var(--negativo-tinta); --a-fondo: var(--negativo-fondo); }
.aviso-icono { flex: none; color: var(--a); margin-top: 2px; }
.aviso-icono .icono { width: 22px; height: 22px; }
.aviso-cuerpo { min-width: 0; }
.prosa .aviso-titulo { margin: 0 0 .2em; font-weight: 800; color: var(--a); font-size: .88rem; letter-spacing: .04em; text-transform: uppercase; }
.aviso-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; }
.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; } }