/* D03: teclado y movimiento reducido. Se carga después de los estilos de página. */
:root {
    --wf-keyboard-focus: #155f99;
}

html[data-theme="dark"] {
    --wf-keyboard-focus: #7ec7ff;
}

/* La barra superior es oscura en ambos temas. */
.wf-navbar {
    --wf-keyboard-focus: #7ec7ff;
}

html {
    scroll-padding-top: 6rem;
}

.wf-skip-link {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 1080;
    max-width: calc(100vw - 1.5rem);
    padding: .75rem 1rem;
    border: 2px solid #155f99;
    border-radius: .35rem;
    background: #fffefa;
    color: #0d2b4e;
    font-weight: 700;
    text-decoration: underline;
    transform: translateY(calc(-100% - 1rem));
    --wf-keyboard-focus: #155f99;
}

.wf-skip-link:focus {
    transform: none;
    color: #0d2b4e;
}

/* Cubre también marca, idiomas, tema, accesos de Inicio y cierre del modal. */
body :is(a[href], button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--wf-keyboard-focus);
    outline-offset: 3px;
    scroll-margin-block: 6rem 1rem;
}

/* Destino del salto: recibe foco sin añadir una parada a la secuencia de Tab. */
#wf-main-content:focus {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    /* Solo efectos decorativos propios; conserva las transformaciones de posición. */
    .wf-toolbar-round-link,
    .wf-theme-icon-button,
    .wf-access-image-frame,
    .wf-collection-card,
    .wf-collection-item-image,
    .wf-collection-group-tab,
    .wf-collection-timeline-link,
    .wf-gormitero-card,
    .wf-gormitero-card-image,
    .wf-bobesponja-card,
    .wf-bobesponja-figure {
        transition: none !important;
        transform: none !important;
    }
}