/**
 * assets/css/accesibilidad.css
 * ---------------------------------------------------------------------
 * Botón flotante y panel de accesibilidad (v2, 2026-10-06), más todos
 * los ajustes visuales que el panel aplica a la página.
 *
 * Organización en la línea del menú de accesibilidad de Kontrol School
 * (perfiles arriba + cuadrícula de ajustes con niveles), pero con el
 * estilo y los colores propios de la Fundación: encabezado azul noche
 * #1c2340, tarjetas blancas con borde suave, azul institucional para
 * lo activo y naranja de acento.
 *
 * Reglas de diseño de este archivo:
 *   - Los tamaños del PANEL van en px a propósito: así el panel no
 *     crece cuando la persona agranda el texto de la página y nunca
 *     queda inutilizable a 150 %.
 *   - Los ajustes se aplican solo a la página (encabezado, contenido y
 *     pie: .site-header, #contenido, .site-footer), no al panel, para
 *     que el propio panel siga siendo legible con cualquier ajuste.
 *   - Cada ajuste es una clase en <html> (la pone assets/js/fuc.js (bloque 2)).
 *     Los de color (contraste alto y saturación) usan además un filtro
 *     CSS combinado que el JS escribe en html.style.filter.
 *
 * Secciones:
 *   1. Botón flotante          5. Ajustes de color y contraste
 *   2. Panel (estructura)      6. Ajustes de texto y lectura
 *   3. Perfiles                7. Herramientas: máscara, lupa, estructura
 *   4. Tarjetas de ajustes     8. Responsive y movimiento reducido
 * ---------------------------------------------------------------------
 */

/* ======================================================================
   1. BOTÓN FLOTANTE (igual que antes: círculo azul abajo a la izquierda)
   ====================================================================== */
.accesibilidad-btn{
	position: fixed; left: 24px; bottom: 24px; z-index: 601;
	width: 50px; height: 50px; border-radius: 50%;
	background: var(--color-primario); color: #fff; border: none;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.2);
	transition: transform .15s ease;
}
.accesibilidad-btn:hover{ transform: scale(1.06); }
.accesibilidad-btn svg{ width: 26px; height: 26px; fill: #fff; }
/* Punto naranja sobre el botón cuando hay algún ajuste activo: la
   persona sabe de un vistazo que la página está modificada. */
.accesibilidad-btn__activo{
	position: absolute; top: 2px; right: 2px; width: 12px; height: 12px;
	border-radius: 50%; background: var(--color-secundario); border: 2px solid #fff;
	display: none;
}
html.a11y-hay-ajustes .accesibilidad-btn__activo{ display: block; }

/* ======================================================================
   2. PANEL
   ====================================================================== */
.accesibilidad-panel{
	/* z-index 600: por encima del encabezado fijo (500), si no, en
	   pantallas bajas el título del panel quedaba tapado. */
	position: fixed; left: 24px; bottom: 84px; z-index: 600;
	width: 460px; max-width: calc(100vw - 32px);
	max-height: min(760px, calc(100vh - 104px));
	background: #fff; border-radius: 16px; box-shadow: 0 16px 44px rgba(0,0,0,.25);
	display: none; flex-direction: column; overflow: hidden;
	font-family: var(--fuente-texto); font-size: 14px; line-height: 1.4;
	color: #1c1c2e; letter-spacing: normal; word-spacing: normal; text-align: left;
}
.accesibilidad-panel.abierto{ display: flex; }
.accesibilidad-panel__header{
	background: #1c2340; color: #fff;
	padding: 16px 18px; display: flex; align-items: center; justify-content: space-between;
	flex: 0 0 auto;
}
.accesibilidad-panel__header .accesibilidad-panel__titulo{
	margin: 0; font-family: var(--fuente-titulos); font-size: 16px; font-weight: 700; color: #fff;
}
.accesibilidad-panel__cerrar{
	background: rgba(255,255,255,.12); border: none; color: #fff;
	width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 16px;
	display: flex; align-items: center; justify-content: center;
}
.accesibilidad-panel__cerrar:hover{ background: rgba(255,255,255,.22); }
.accesibilidad-panel__body{ padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.accesibilidad-panel__subtitulo{
	font-family: var(--fuente-titulos); font-size: 13px; font-weight: 700; color: #1c2340;
	text-transform: uppercase; letter-spacing: .6px; margin: 4px 0 10px;
}
.accesibilidad-panel__separador{ border: 0; border-top: 1px solid var(--color-borde); margin: 16px 0; }
.accesibilidad-reset-todo{
	width: 100%; padding: 12px; margin-top: 16px;
	border-radius: 10px; border: none; color: #fff;
	background: #1c2340; font-weight: 700; font-size: 14px; cursor: pointer;
	font-family: var(--fuente-texto);
}
.accesibilidad-reset-todo:hover{ background: var(--color-primario); }
.accesibilidad-panel__pie{
	font-size: 12px; color: #6b6b6b; text-align: center; margin: 10px 0 0;
}

/* ======================================================================
   3. PERFILES (botones anchos con ícono, 2 columnas)
   ====================================================================== */
.accesibilidad-perfiles{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.accesibilidad-perfil{
	position: relative; display: flex; align-items: center; gap: 10px;
	border: 1.5px solid var(--color-borde); border-radius: 12px; background: #fff;
	padding: 11px 34px 11px 10px; cursor: pointer; text-align: left;
	font-family: var(--fuente-texto); font-size: 13px; font-weight: 700; color: #1c1c2e; line-height: 1.25;
	transition: border-color .15s ease, background .15s ease;
}
.accesibilidad-perfil:hover{ border-color: var(--color-primario); }
.accesibilidad-perfil__icono{
	flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
	background: var(--color-azul-muy-claro); display: flex; align-items: center; justify-content: center;
}
.accesibilidad-perfil__icono svg{ width: 18px; height: 18px; }
.accesibilidad-perfil.activo{ border-color: var(--color-primario); background: var(--color-azul-muy-claro); }
.accesibilidad-perfil.activo .accesibilidad-perfil__icono{ background: #fff; }

/* Insignia de "activo" (círculo con chulo) — compartida por perfiles y tarjetas. */
.a11y-check{
	position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%;
	background: var(--color-primario); display: none; align-items: center; justify-content: center;
}
.a11y-check svg{ width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 3; }
.accesibilidad-perfil .a11y-check{ top: 50%; transform: translateY(-50%); right: 10px; }
.activo > .a11y-check{ display: flex; }

/* ======================================================================
   4. TARJETAS DE AJUSTES (3 columnas)
   ====================================================================== */
.accesibilidad-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.accesibilidad-card{
	position: relative;
	border: 1.5px solid var(--color-borde); border-radius: 12px; background: #fff;
	padding: 16px 8px 12px; cursor: pointer; text-align: center; min-height: 104px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--fuente-texto); font-size: 13px; font-weight: 700; color: #1c1c2e; line-height: 1.2;
	transition: border-color .15s ease, background .15s ease;
}
.accesibilidad-card:hover{ border-color: var(--color-primario); }
.accesibilidad-card > svg{ width: 24px; height: 24px; flex: 0 0 auto; }
.accesibilidad-card.activo{ border-color: var(--color-primario); background: var(--color-azul-muy-claro); }
/* Nombre del nivel elegido ("Oscuro", "Guía", "150 %"…), en naranja de acento. */
.accesibilidad-card__estado{
	font-size: 11px; font-weight: 700; color: #b05a00; min-height: 13px; line-height: 1.1;
}
/* Indicador de niveles: un punto por nivel (mismo estilo de antes). */
.accesibilidad-card__puntos{ display: flex; gap: 4px; }
.accesibilidad-card__puntos span{ width: 6px; height: 6px; border-radius: 50%; background: var(--color-borde); }
.accesibilidad-card__puntos span.lleno{ background: var(--color-primario); }
/* Tarjetas de "acción" (leer página, estructura): mientras actúan. */
.accesibilidad-card.en-curso{ border-color: var(--color-secundario); background: #fff7ec; }

/* ======================================================================
   5. AJUSTES DE COLOR Y CONTRASTE
   El filtro de "Contraste alto" y de "Saturación" lo combina el JS en
   html.style.filter (un solo filtro: si se ponen dos clases con filter
   distinto, la última anularía a la primera).
   ====================================================================== */

/* 5.1 Contraste alto (nivel 1): fondo negro, texto blanco, enlaces
   amarillos. Se conserva la clase a11y-contraste de la v1, que también
   usan las correcciones de colores de marca de style.css (17.15). */
html.a11y-contraste body{ background: #000; color: #fff; }
html.a11y-contraste .site-header,
html.a11y-contraste .tarjeta,
html.a11y-contraste .form-contacto,
html.a11y-contraste .nav-principal{ background: #000; color: #fff; }
html.a11y-contraste #contenido a:not(.boton),
html.a11y-contraste .site-header a,
html.a11y-contraste .site-footer a{ color: #ffd166 !important; }

/* 5.2 Modo oscuro (nivel 2): azul noche suave, menos agresivo que el
   negro puro; útil con fotofobia o para leer de noche. */
html.a11y-contraste-oscuro body{ background: #12172b; color: #e8ecf7; }
html.a11y-contraste-oscuro .site-header,
html.a11y-contraste-oscuro .nav-principal,
html.a11y-contraste-oscuro .seccion,
html.a11y-contraste-oscuro .seccion--claro{ background: #12172b !important; color: #e8ecf7; }
html.a11y-contraste-oscuro .seccion--claro{ background: #1a2038 !important; }
html.a11y-contraste-oscuro .tarjeta,
html.a11y-contraste-oscuro .form-contacto input,
html.a11y-contraste-oscuro .form-contacto textarea{ background: #1c2340; color: #fff; border-color: #3a4470; }
html.a11y-contraste-oscuro h1, html.a11y-contraste-oscuro h2, html.a11y-contraste-oscuro h3,
html.a11y-contraste-oscuro .acordeon-pregunta{ color: #fff !important; }
html.a11y-contraste-oscuro .tarjeta p, html.a11y-contraste-oscuro .paso p,
html.a11y-contraste-oscuro .circulo-item p, html.a11y-contraste-oscuro .acordeon-respuesta,
html.a11y-contraste-oscuro .aviso-recaptcha, html.a11y-contraste-oscuro .aviso-recaptcha a{ color: #cfd6ea !important; }
html.a11y-contraste-oscuro .eyebrow, html.a11y-contraste-oscuro .hero__eyebrow{ color: #ffb768 !important; }
html.a11y-contraste-oscuro #contenido a:not(.boton),
html.a11y-contraste-oscuro .nav-principal a{ color: #9fc3ff !important; }
/* Los logos son azules: sobre negro o azul noche se les da una placa
   blanca para que sigan leyéndose (contraste alto y oscuro). */
html:is(.a11y-contraste, .a11y-contraste-oscuro) .site-header__logo img,
html:is(.a11y-contraste, .a11y-contraste-oscuro) #presentacion img,
html:is(.a11y-contraste, .a11y-contraste-oscuro) .tarjeta img{ background: #fff; border-radius: 8px; padding: 4px; }

/* 5.3 Contraste claro (nivel 3): fondo blanco puro, texto negro y los
   colores de marca oscurecidos hasta superar 7:1 (nivel AAA). */
html.a11y-contraste-claro body,
html.a11y-contraste-claro .seccion,
html.a11y-contraste-claro .seccion--claro{ background: #fff !important; color: #000; }
html.a11y-contraste-claro h1, html.a11y-contraste-claro h2, html.a11y-contraste-claro h3,
html.a11y-contraste-claro p, html.a11y-contraste-claro li, html.a11y-contraste-claro label,
html.a11y-contraste-claro .acordeon-pregunta, html.a11y-contraste-claro .acordeon-respuesta,
html.a11y-contraste-claro .aviso-recaptcha{ color: #000 !important; }
html.a11y-contraste-claro .eyebrow{ color: #7a3a00 !important; }
html.a11y-contraste-claro #contenido a:not(.boton),
html.a11y-contraste-claro .nav-principal a{ color: #0b2a8a !important; }
html.a11y-contraste-claro .boton--primario,
html.a11y-contraste-claro .bloque-servicio--primario,
html.a11y-contraste-claro .bloque-servicio--azul-claro{ background: #0b2a8a !important; color: #fff !important; }
html.a11y-contraste-claro .boton--secundario,
html.a11y-contraste-claro .paso__numero,
html.a11y-contraste-claro .volver-arriba{ background: #8a3d00 !important; color: #fff !important; }
html.a11y-contraste-claro .bloque-servicio--verde{ background: #3c5a12 !important; }
html.a11y-contraste-claro .bloque-servicio--salmon{ background: #9e1f1e !important; }
html.a11y-contraste-claro .bloque-servicio--morado{ background: #44306a !important; }
html.a11y-contraste-claro .hero__slide::before,
html.a11y-contraste-claro .seccion-destacada{ background: #0b1a4a !important; }
html.a11y-contraste-claro .hero__titulo,
html.a11y-contraste-claro .seccion-destacada h2,
html.a11y-contraste-claro .seccion-destacada p{ color: #fff !important; }
html.a11y-contraste-claro .hero__eyebrow{ color: #ffd166 !important; }
html.a11y-contraste-claro .site-footer{ background: #0b1a4a; }
html.a11y-contraste-claro .site-footer__copy{ background: #000; }
html.a11y-contraste-claro .footer-grid .etiqueta{ color: #ffd166; }

/* 5.4 Resaltar enlaces: subrayado grueso + fondo amarillo + borde.
   No depende del color (útil con daltonismo). */
html.a11y-enlaces #contenido a,
html.a11y-enlaces .site-header a,
html.a11y-enlaces .site-footer a{
	text-decoration: underline !important; text-decoration-thickness: 2px !important;
	text-underline-offset: 3px; outline: 2px solid #1c2340; outline-offset: 1px;
	background-color: #ffe48a !important; color: #1c2340 !important;
}
html.a11y-enlaces .site-header__logo{ background-color: transparent !important; }

/* 5.5 Resaltar encabezados: borde a la izquierda y fondo suave en
   todos los títulos, para ubicar la estructura de un vistazo. */
html.a11y-encabezados #contenido :is(h1, h2, h3, h4, [role="heading"]):not(.sr-only),
html.a11y-encabezados .site-footer h2{
	outline: 2px dashed var(--color-secundario); outline-offset: 4px;
	background-color: rgba(247,150,51,.12); border-radius: 4px;
}

/* ======================================================================
   6. AJUSTES DE TEXTO Y LECTURA (solo en la página, no en el panel)
   ====================================================================== */

/* 6.1 Agrandar texto (4 niveles). Funciona porque desde esta versión
   todo style.css usa rem. */
html.a11y-texto-1{ font-size: 112.5%; }
html.a11y-texto-2{ font-size: 125%; }
html.a11y-texto-3{ font-size: 137.5%; }
html.a11y-texto-4{ font-size: 150%; }

/* 6.2 Apto para dislexia. Nivel 1: letra sin adornos de sistema (sin
   descargar nada). Nivel 2: Atkinson Hyperlegible (diseñada por el
   Braille Institute para distinguir letras parecidas: b/d, I/l/1), que
   el JS descarga de Google Fonts solo cuando se activa, más un poco de
   espacio entre letras y sin cursivas. */
html.a11y-dislexia-1 :is(.site-header, #contenido, .site-footer),
html.a11y-dislexia-1 :is(.site-header, #contenido, .site-footer) *{
	font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif !important;
}
html.a11y-dislexia-2 :is(.site-header, #contenido, .site-footer),
html.a11y-dislexia-2 :is(.site-header, #contenido, .site-footer) *{
	font-family: "Atkinson Hyperlegible", Verdana, Tahoma, Arial, sans-serif !important;
	font-style: normal !important;
}
html.a11y-dislexia-2 #contenido :is(p, li, label, .acordeon-respuesta){ letter-spacing: .04em; word-spacing: .12em; }

/* 6.3 Espaciado de texto (3 niveles): letras y palabras. Valores dentro
   de lo que exige WCAG 1.4.12 (hasta 0.12em letras / 0.16em palabras). */
html.a11y-espaciado-1 :is(#contenido, .site-footer) :is(p, li, label, a, span, h1, h2, h3, legend, button){ letter-spacing: .04em !important; word-spacing: .08em !important; }
html.a11y-espaciado-2 :is(#contenido, .site-footer) :is(p, li, label, a, span, h1, h2, h3, legend, button){ letter-spacing: .08em !important; word-spacing: .16em !important; }
html.a11y-espaciado-3 :is(#contenido, .site-footer) :is(p, li, label, a, span, h1, h2, h3, legend, button){ letter-spacing: .12em !important; word-spacing: .24em !important; }

/* 6.4 Altura de la línea (3 niveles) + más espacio entre párrafos. */
html.a11y-altura-1 :is(#contenido, .site-footer) :is(p, li, label, .acordeon-respuesta){ line-height: 1.9 !important; }
html.a11y-altura-2 :is(#contenido, .site-footer) :is(p, li, label, .acordeon-respuesta){ line-height: 2.2 !important; }
html.a11y-altura-3 :is(#contenido, .site-footer) :is(p, li, label, .acordeon-respuesta){ line-height: 2.6 !important; }
html:is(.a11y-altura-1, .a11y-altura-2, .a11y-altura-3) #contenido p{ margin-bottom: 1.6em; }

/* 6.5 Texto alineado (4 niveles): izquierda, centro, derecha, justificado. */
html.a11y-alinear-izq :is(#contenido, .site-footer) :is(p, li, h1, h2, h3, span, div, legend){ text-align: left !important; }
html.a11y-alinear-centro :is(#contenido, .site-footer) :is(p, li, h1, h2, h3, span, div, legend){ text-align: center !important; }
html.a11y-alinear-der :is(#contenido, .site-footer) :is(p, li, h1, h2, h3, span, div, legend){ text-align: right !important; }
html.a11y-alinear-just #contenido :is(p, .acordeon-respuesta){ text-align: justify !important; hyphens: auto; }

/* 6.6 Ocultar imágenes (fotos, logos, íconos, video y fondos). */
html.a11y-sin-imagenes :is(.site-header, #contenido, .site-footer) :is(img, picture, video){ visibility: hidden !important; }
html.a11y-sin-imagenes .site-header__logo::after{
	content: "Fundación Uriel Castiblanco"; font-family: var(--fuente-titulos);
	font-weight: 800; color: var(--color-primario); font-size: 1rem;
	position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
}
html.a11y-sin-imagenes .site-header__logo{ position: relative; min-width: 230px; }
html.a11y-sin-imagenes .hero__slide{ background-image: none !important; }

/* 6.7 Detener animaciones (también lo lee fuc.js, bloque 1, para pausar el
   carrusel). */
html.a11y-sin-animaciones *,
html.a11y-sin-animaciones *::before,
html.a11y-sin-animaciones *::after{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-sin-animaciones .aparecer{ opacity: 1 !important; transform: none !important; }

/* 6.8 Cursor grande (con borde blanco para verse sobre fondos oscuros). */
html.a11y-cursor-grande,
html.a11y-cursor-grande *{
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path fill="%231c2340" stroke="white" stroke-width="1.2" d="M3 2l6 18 2.5-7L19 10z"/></svg>') 3 2, auto !important;
}
html.a11y-cursor-grande :is(a, button, label, input[type="radio"], input[type="checkbox"]){
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path fill="%23F79633" stroke="%231c2340" stroke-width="1.2" d="M3 2l6 18 2.5-7L19 10z"/></svg>') 3 2, pointer !important;
}

/* ======================================================================
   7. HERRAMIENTAS (elementos que crea el JS)
   ====================================================================== */

/* 7.1 Máscara de lectura: dos franjas oscuras arriba y abajo dejan una
   banda clara que sigue al mouse/dedo/foco. Nivel 1 = solo la guía
   (regla horizontal), niveles 2 y 3 = máscara estrecha / amplia. */
.a11y-mascara{ position: fixed; left: 0; right: 0; background: rgba(12,16,34,.62); pointer-events: none; z-index: 550; display: none; }
.a11y-mascara--sup{ top: 0; }
.a11y-mascara--inf{ bottom: 0; }
.a11y-guia{
	position: fixed; left: 0; right: 0; height: 8px; pointer-events: none; z-index: 550; display: none;
	background: var(--color-secundario); border-top: 2px solid #1c2340; border-bottom: 2px solid #1c2340;
	box-shadow: 0 0 0 2px rgba(255,255,255,.7);
}
html.a11y-mascara-1 .a11y-guia{ display: block; }
html.a11y-mascara-2 .a11y-mascara,
html.a11y-mascara-3 .a11y-mascara{ display: block; }

/* 7.2 Lupa de contenido: burbuja que muestra en grande el texto que
   está bajo el mouse o con el foco del teclado. */
.a11y-lupa{
	position: fixed; z-index: 2100; pointer-events: none; display: none;
	max-width: min(520px, calc(100vw - 24px));
	background: #1c2340; color: #fff; border: 3px solid var(--color-secundario);
	border-radius: 14px; padding: 14px 18px; box-shadow: 0 12px 30px rgba(0,0,0,.35);
	font-family: var(--fuente-texto); font-size: 26px; line-height: 1.35; font-weight: 600;
	word-wrap: break-word;
}
.a11y-lupa.visible{ display: block; }

/* 7.3 Estructura de la página: ventana con títulos, regiones y enlaces
   para saltar directamente a cualquier parte. */
.a11y-estructura-fondo{
	position: fixed; inset: 0; background: rgba(10,15,35,.55); z-index: 2200;
	display: none; align-items: center; justify-content: center; padding: 16px;
}
.a11y-estructura-fondo.abierto{ display: flex; }
.a11y-estructura{
	width: 560px; max-width: 100%; max-height: min(640px, calc(100vh - 32px));
	background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
	box-shadow: 0 16px 44px rgba(0,0,0,.3); font-family: var(--fuente-texto); font-size: 14px; color: #1c1c2e;
}
.a11y-estructura__header{
	background: #1c2340; color: #fff; padding: 14px 18px;
	display: flex; align-items: center; justify-content: space-between;
}
.a11y-estructura__header h2{ margin: 0; color: #fff; font-family: var(--fuente-titulos); font-size: 16px; }
.a11y-estructura__pestanas{ display: flex; gap: 6px; padding: 12px 14px 0; border-bottom: 1px solid var(--color-borde); }
.a11y-estructura__pestanas button{
	border: 1.5px solid var(--color-borde); border-bottom: none; background: var(--color-fondo-claro);
	border-radius: 10px 10px 0 0; padding: 9px 14px; font-weight: 700; font-size: 13px; cursor: pointer;
	font-family: var(--fuente-texto); color: #1c1c2e;
}
.a11y-estructura__pestanas button[aria-selected="true"]{ background: #fff; border-color: var(--color-primario); color: var(--color-primario); }
.a11y-estructura__lista{ list-style: none; margin: 0; padding: 10px 14px 16px; overflow-y: auto; }
.a11y-estructura__lista li{ margin: 0; }
.a11y-estructura__lista button{
	width: 100%; text-align: left; background: none; border: none; border-radius: 8px;
	padding: 9px 10px; cursor: pointer; font-family: var(--fuente-texto); font-size: 14px; color: #1c1c2e;
	display: flex; gap: 10px; align-items: baseline;
}
.a11y-estructura__lista button:hover{ background: var(--color-azul-muy-claro); }
.a11y-estructura__etiqueta{
	flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #fff; background: var(--color-primario);
	border-radius: 6px; padding: 2px 6px; min-width: 30px; text-align: center;
}
.a11y-estructura__vacio{ padding: 12px; color: #6b6b6b; }
/* Elemento al que se saltó desde la estructura: resaltado un momento. */
.a11y-destino{ outline: 3px solid var(--color-secundario) !important; outline-offset: 4px; }

/* ======================================================================
   8. RESPONSIVE Y MOVIMIENTO REDUCIDO
   ====================================================================== */
@media (max-width: 700px){
	.accesibilidad-btn{ left: 16px; bottom: 16px; }
	.accesibilidad-panel{ left: 8px; right: 8px; width: auto; max-width: none; bottom: 76px; max-height: calc(100vh - 92px); }
	.a11y-lupa{ font-size: 22px; }
}
@media (max-width: 480px){
	.accesibilidad-grid{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.accesibilidad-perfil{ padding-right: 28px; font-size: 12px; }
	.accesibilidad-perfil .a11y-check{ right: 6px; }
	.accesibilidad-card{ min-height: 96px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce){
	.accesibilidad-btn, .accesibilidad-card, .accesibilidad-perfil{ transition: none; }
	.accesibilidad-btn:hover{ transform: none; }
}
@media print{
	.a11y-mascara, .a11y-guia, .a11y-lupa, .a11y-estructura-fondo{ display: none !important; }
}