saltándose el menú entero. 3. Destino del salto. `#main-content` es enfocable por script (tabindex=-1) sin anillo propio: el anillo lo lleva el primer control real de la página. La trampa de foco de los modales y el Escape que devuelve el foco viven en static/js/system/focus.js (necesitan saber quién abrió el modal). ============================================================================ */ /* 1 · Anillo de foco por defecto */ :where(a[href], button, input, select, textarea, summary, [tabindex], [contenteditable="true"]) :focus-visible:not([class*="focus:ring"]):not([class*="focus-visible:"]):not(.btn):not(.field-input):not(.field-select):not(.field-textarea):not(.table-sort) { outline: 2px solid var(--brand-color, #4f46e5); outline-offset: 2px; border-radius: inherit; } /* Casillas y radios: el anillo pegado al control, no separado. */ :where(input[type="checkbox"], input[type="radio"]):focus-visible:not([class*="focus:ring"]) { outline-offset: 1px; } /* Con ratón nunca hay anillo (el navegador ya lo hace, esto lo deja explícito). */ :where(a[href], button, [tabindex]):focus:not(:focus-visible) { outline: none; } /* 2 · Enlace de salto: fuera de pantalla hasta que se enfoca */ .skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 10000; padding: 0.6rem 1rem; border-radius: 0.75rem; background: var(--brand-color, #4f46e5); color: #fff; font: 600 0.875rem/1.2 system-ui, sans-serif; text-decoration: none; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25); transform: translateY(-150%); opacity: 0; pointer-events: none; transition: transform 150ms ease-out, opacity 150ms ease-out; } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); opacity: 1; pointer-events: auto; outline: 2px solid #fff; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } } /* 3 · Destino del salto */ #main-content:focus, #main-content:focus-visible { outline: none; }