/* ui.css — utilidades y componentes transversales que el CSS heredado del * prototipo no traía: accesibilidad, variantes de botón, navegación móvil y * la región de avisos. Se carga en todas las rutas, después de components.css. */ /* ── Accesibilidad ───────────────────────────────────────────────────────── */ .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: 10000; width: auto; height: auto; padding: 12px 20px; clip: auto; clip-path: none; background: var(--color-primary); color: #fff; border-radius: 8px; font-weight: 700; } /* Foco visible y consistente en todo lo interactivo. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ══════════════════════════════════════════════════════════════════════════ * BOTONES — pedido del 2026-09-16: «los botones deben verse como botones, * tomá catalogo.html para ello» y «los textos en su mayoría parecen flotar». * * Había dos sistemas de botones conviviendo: * * 1. `.ds-btn` — el del prototipo, portado entero desde el catálogo de diseño * (cipdh/_assets/prototipos/catalogo.html). Completo: base, siete variantes, * cuatro tamaños, estados hover/active/focus/disabled. * 2. `.btn` — el que usan las 41 plantillas del tema, 71 veces sin variante. * * Y `.btn` no tenía NI `display` NI `background` declarados en ninguna hoja: * sus únicas definiciones eran dos bloques sueltos heredados de prototipos * viejos (components.css, «FROM: admin-publicaciones.html») que solo ponían * padding y tipografía. Un se renderizaba como texto en línea * con espacio alrededor — de ahí la sensación de que los textos flotaban. * * En vez de escribir un tercer sistema, `.btn` pasa a ser un ALIAS de `.ds-btn`. * El diseño es el del prototipo, que es el que vale; las plantillas no cambian * una sola clase; y queda un único lugar donde se decide cómo se ve un botón. * ═══════════════════════════════════════════════════════════════════════════ */ /* * Solo `.btn`, sin `button.btn` ni `a.btn` — corregido el 2026-09-16. * * Calificar la base con el tag la subía a especificidad (0,1,1), por encima de * TODAS las variantes, que son (0,1,0). Resultado: en un *