/* ═══════════════════════════════════════════════════════════════════════ «VER MEJOR LA PÁGINA» · EL COMPONENTE (accesibilidad.js) Botón flotante, aviso de bienvenida y panel. Lo usan la página pública (index.html y el sitio de cada centro, después de salud.css, con sus tokens) y, desde la tanda TSC (2026-09-27), el panel del centro en /gerencia (surfaces/salud/ver-mejor-panel.js lo carga; styles.css le da los tokens bajo `html[data-vertical="salud"]`). Los EFECTOS de cada ajuste (clases en ) están en salud.css (página pública) y en styles.css (panel). ═══════════════════════════════════════════════════════════════════════ */ .a11y-filtros { position: absolute; width: 0; height: 0; overflow: hidden; } .a11y-btn { position: fixed; right: 20px; bottom: 20px; z-index: 1200; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--acento); background: var(--acento); color: var(--texto-inv); cursor: pointer; display: grid; place-items: center; box-shadow: var(--sombra-2); touch-action: manipulation; transition: background-color var(--dur-rapido) var(--ease), border-color var(--dur-rapido) var(--ease); } .a11y-btn:hover { background: var(--acento-hover); border-color: var(--acento-hover); } .a11y-btn svg { width: 28px; height: 28px; } .a11y-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 var(--sp-1); border-radius: var(--r-pill); background: var(--superficie); color: var(--acento-texto); font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 500; display: grid; place-items: center; border: 1px solid var(--borde-acento); } .a11y-badge[hidden] { display: none; } /* Bajo 1280 px (Bloque 6): el flotante tapaba chips, campos y botones al desplazarse (en 320/390 no hay margen libre a los lados; en 768–1279 el contenido llega al borde derecho y tapaba «Solicitar cita», «Abrir en Waze» o las preguntas de /pyp). Desde 1280 px sobra margen. «Ver mejor la página» pasa a la barra fija de arriba (`.barra-a11y`, index.html), junto a «Buscar» y el menú: siempre a mano y sin tapar nada. El panel se abre debajo de la barra. Con ≤ 400 px «Buscar» queda solo con su ícono (su nombre accesible sigue siendo «Buscar un centro») para que quepan los tres. El corte es el mismo del aviso de bienvenida en el flujo (accesibilidad.js MOVIL_BIENVENIDA). */ .barra-a11y { display: none; position: relative; } @media (max-width: 1279.98px) { .a11y-btn { display: none; } .barra-sitio .barra-a11y { display: inline-grid; place-items: center; } .barra-a11y .a11y-badge { top: -6px; right: -6px; font-size: var(--fs-xs); line-height: 1; } } @media (max-width: 400px) { .barra-buscar { width: var(--control); padding: 0; justify-content: center; } .barra-buscar > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @keyframes latir { 0%, 100% { box-shadow: 0 0 0 0 var(--acento-linea); } 50% { box-shadow: 0 0 0 9px transparent; } } .a11y-btn.llamando { animation: latir 2.4s ease-in-out infinite; } /* Aviso de bienvenida (primera visita), accesibilidad.js. Escritorio: junto al botón flotante, como el .a11y-tip de ayudatetutorias.com pero más compacto (≤ 256 px, 15 px): en 1366×768 solo roza la esquina inferior derecha del mapa y se va a los 5 s. Móvil (≤ 640 px, .a11y-tip-flujo): bloque EN EL FLUJO entre la barra y el contenido — empuja la página, no tapa los filtros —, con «Entendido» y ×. */ .a11y-tip { position: fixed; right: 84px; bottom: 20px; z-index: 1190; max-width: 256px; background: var(--superficie-elevada); border: 1px solid var(--borde-acento); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); box-shadow: var(--sombra-2); } .a11y-tip[hidden] { display: none; } .a11y-tip b { display: block; font-size: var(--fs-body); color: var(--texto); margin-bottom: var(--sp-1); } .a11y-tip span { display: block; font-size: var(--fs-sm); color: var(--texto-2); line-height: 1.5; } /* «Entendido»: .enlace (enlace de acción). */ .a11y-tipx { margin-top: var(--sp-2); } .a11y-tip::after { content: ""; position: absolute; right: -7px; bottom: 20px; width: 12px; height: 12px; background: var(--superficie-elevada); border-right: 1px solid var(--borde-acento); border-top: 1px solid var(--borde-acento); transform: rotate(45deg); } .a11y-tip-flujo { position: relative; right: auto; bottom: auto; z-index: auto; max-width: none; box-shadow: none; margin: var(--sp-3) var(--gutter) 0; padding: var(--sp-3) 52px var(--sp-2) var(--sp-4); background: var(--acento-suave); } .a11y-tip-flujo::after { display: none; } .a11y-tip-flujo .a11y-tipx { min-height: 44px; margin-top: 2px; } .a11y-tipc { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; color: var(--texto-2); font: inherit; font-size: var(--fs-h3); line-height: 1; } .a11y-tipc:hover { color: var(--texto); background: var(--superficie-2); } /* Una ventana angosta sin pasar por móvil al cargar (641–700 px): flotante a lo ancho, sobre el botón. */ @media (max-width: 700px) { .a11y-tip:not(.a11y-tip-flujo) { right: 14px; left: 14px; max-width: none; bottom: 76px; } .a11y-tip::after { display: none; } } .a11y-panel { position: fixed; right: 20px; bottom: 86px; z-index: 1210; width: 340px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; background: var(--superficie-elevada); color: var(--texto); border: 1px solid var(--borde-fuerte); border-radius: var(--r-lg); box-shadow: var(--sombra-2); font-size: var(--fs-body); } .a11y-panel[hidden] { display: none; } /* Bajo 1280 px se abre desde la barra (`.barra-a11y`): cuelga debajo de ella (a lo ancho en el teléfono; más ancho, de 340 px pegado a la derecha, bajo el ícono). */ @media (max-width: 1279.98px) { .a11y-panel { top: calc(var(--barra-alto) + var(--sp-2)); bottom: auto; right: var(--gutter); max-height: calc(100dvh - var(--barra-alto) - 24px); } } @media (max-width: 639.98px) { .a11y-panel { left: var(--gutter); width: auto; } } .a11y-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: var(--superficie-elevada); z-index: 2; } .a11y-h h2 { font-size: var(--fs-h4); margin: 0; } .a11y-sub { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--texto-3); } .a11y-b { padding: var(--sp-3) var(--sp-4) var(--sp-4); } .a11y-grp { margin-bottom: var(--sp-4); } .a11y-lb { display: block; font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--acento-texto); margin-bottom: var(--sp-2); } .a11y-nota { font-size: var(--fs-xs); color: var(--texto-3); line-height: 1.5; margin: var(--sp-2) 0 0; } .a11y-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } .a11y-seg button { min-height: var(--control); border-radius: var(--r-sm); border: 1px solid var(--borde); background: var(--fondo-2); color: var(--texto-2); font-family: var(--f-mono); font-size: var(--fs-xs); cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color var(--dur-rapido) var(--ease), border-color var(--dur-rapido) var(--ease), color var(--dur-rapido) var(--ease); } .a11y-seg button:hover { border-color: var(--borde-acento); color: var(--texto); } .a11y-seg button[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--texto-inv); font-weight: 500; } .a11y-list { display: flex; flex-direction: column; gap: 5px; } .a11y-op, .a11y-sw { display: block; width: 100%; text-align: left; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); border: 1px solid var(--borde); background: var(--fondo-2); color: var(--texto-2); cursor: pointer; font: inherit; transition: background-color var(--dur-rapido) var(--ease), border-color var(--dur-rapido) var(--ease); } .a11y-op b, .a11y-sw b { display: block; color: var(--texto); font-weight: 600; font-size: var(--fs-sm); } .a11y-op span, .a11y-swl span { display: block; font-size: var(--fs-xs); margin-top: 1px; color: var(--texto-3); line-height: 1.45; } .a11y-op:hover, .a11y-sw:hover { border-color: var(--borde-acento); } .a11y-op[aria-pressed="true"], .a11y-sw[aria-checked="true"] { background: var(--acento-suave); border-color: var(--acento); } .a11y-op[aria-pressed="true"] b { color: var(--acento-texto); } .a11y-sw { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px; } .a11y-swt { flex: 0 0 auto; width: 34px; height: 19px; border-radius: var(--r-pill); background: var(--superficie-3); border: 1px solid var(--borde-control); position: relative; margin-top: 2px; transition: background-color var(--dur-rapido) var(--ease), border-color var(--dur-rapido) var(--ease); } .a11y-swt i { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--texto-3); transition: transform var(--dur-rapido) var(--ease-out), background-color var(--dur-rapido) var(--ease); } .a11y-sw[aria-checked="true"] .a11y-swt { background: var(--acento); border-color: var(--acento); } .a11y-sw[aria-checked="true"] .a11y-swt i { transform: translateX(15px); background: var(--texto-inv); } .a11y-reset { width: 100%; }