/* ═══════════════════════════════════════════════════════════════════ Widget de accesibilidad del formulario público de Carroceros — v1 Cargado desde `base_publico.html`. Coexiste con `theme-config.css` y toma sus variables --c-* del :root. Portado desde la Plataforma Unificada (proyectos MultisitiosDeportes y prototipoUnificacionWordpress — este último es donde vive el cursor de lectura y la fuente para dislexia, que MultisitiosDeportes todavía no tiene). La estructura del FAB/panel (líneas de abajo hasta "TOGGLES") es genérica y se reutiliza tal cual. La sección de TOGGLES sí está reescrita: la original apuntaba a clases del page builder (`.portal-main`, `.portal-navbar`, `footer`...) que acá no existen — el layout real de esta página es `.idp-hero` (chrome, columna izquierda) + `.idp-form-side`/`.idp-card` (contenido, columna derecha). Además, a diferencia del portal, `base_publico.html` no consume `--c-bg`/`--c-text` en sus estilos (usa hex fijo con fallback), así que los modos de contraste pisan directamente las clases `.idp-*` en vez de reasignar variables. Las clases de los toggles se aplican en `` (`:root.a11y-*`), no en ``: el JS se carga desde el `` y las pinta antes de que exista el body, para que no haya un flash de tema claro al recargar. ═══════════════════════════════════════════════════════════════════ */ .a11y-widget { position: fixed; /* Abajo a la IZQUIERDA, igual que en la Plataforma Unificada: la idea es que el ciudadano encuentre el botón en el mismo lugar en todos los sitios del gobierno, sin tener que reaprender por sitio. */ left: 1.25rem; bottom: 1.25rem; /* Debajo del modal del video obligatorio (9999): ese modal no se puede cerrar hasta terminar, así que nada del widget debe poder taparlo. */ z-index: 9990; } /* ── FAB (botón flotante) ────────────────────────────────────────── El costado izquierdo de esta página es el hero, pintado con --c-primary (más la foto tratada por encima) — el mismo color que usaría el FAB, así que ahí se invierte la pareja: fondo de card e ícono primary. Cuando el hero deja de ocupar ese costado (≤992px pasa a ser un banner arriba y abajo-izquierda queda el formulario blanco) se vuelve a la pareja normal. La Plataforma resuelve esto en runtime, midiendo con `elementFromPoint` qué color hay realmente detrás del botón en cada scroll, porque en un portal armado con bloques cualquier zona puede tener fondo de marca. Acá el layout es fijo y el punto de quiebre es conocido, así que alcanza una media query: determinista y sin JS. Los dos colores viven en variables propias para que el anillo de foco los siga automáticamente en ambos estados (ver :focus-visible). */ .a11y-fab { --a11y-fab-bg: var(--c-bg-card, #ffffff); --a11y-fab-fg: var(--c-primary, #13304D); width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--a11y-fab-bg); color: var(--a11y-fab-fg); cursor: pointer; box-shadow: 0 .55rem 1.2rem rgba(0, 0, 0, .22); display: inline-flex; align-items: center; justify-content: center; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } @media (max-width: 992px) { /* Mismo breakpoint que usa base_publico.html para colapsar el hero. */ .a11y-fab { --a11y-fab-bg: var(--c-primary, #13304D); --a11y-fab-fg: var(--c-text-light, #f2f2f2); } } .a11y-fab:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 .85rem 1.6rem rgba(0, 0, 0, .28); } /* Anillo de foco de DOS tonos via box-shadow, no `outline`: el aro interno lleva el color del ícono (contrasta contra el fondo del FAB) y el externo el color del fondo del FAB (contrasta contra lo que haya detrás). Como los dos salen de las variables, la pareja se invierte sola junto con el botón y el foco queda visible en los dos estados — con un color fijo se perdía en uno de los dos. El aro va antes de la sombra de elevación para que esta siga leyéndose. */ .a11y-fab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--a11y-fab-fg), 0 0 0 6px var(--a11y-fab-bg), 0 .85rem 1.6rem rgba(0, 0, 0, .28); } .a11y-fab-icono { width: 30px; height: 30px; } /* ── Panel ─────────────────────────────────────────────────────── */ .a11y-panel { position: absolute; bottom: 70px; left: 0; /* alineado al FAB, que está anclado a la izquierda */ width: 340px; max-height: 75vh; background: var(--c-bg-card, #FFFFFF); color: var(--c-text, #212529); border-radius: 14px; box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .22); display: flex; flex-direction: column; overflow: hidden; animation: a11y-panel-aparecer .18s ease-out; } .a11y-panel[hidden] { display: none; } @keyframes a11y-panel-aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .a11y-panel-header { background: var(--c-primary, #13304D); color: var(--c-text-light, #f2f2f2); padding: 1rem 1.15rem; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .a11y-panel-titulo { margin: 0; font-size: 1.15rem; font-weight: 700; display: inline-flex; align-items: center; gap: .55rem; } .a11y-panel-titulo-icono { background: var(--c-text-light, #f2f2f2); color: var(--c-primary, #13304D); width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .a11y-panel-titulo-icono svg { width: 18px; height: 18px; } .a11y-panel-acciones { display: flex; gap: .3rem; } .a11y-panel-accion { background: transparent; border: 0; color: var(--c-text-light, #f2f2f2); width: 32px; height: 32px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s ease; } .a11y-panel-accion:hover { background: rgba(255, 255, 255, .18); } /* Estos dos botones viven sobre el header navy, así que un aro claro alcanza. Antes solo cambiaban de fondo, que es un indicador de foco demasiado sutil para navegación por teclado. */ .a11y-panel-accion:focus-visible { background: rgba(255, 255, 255, .18); outline: 2px solid var(--c-text-light, #f2f2f2); outline-offset: 1px; } .a11y-panel-accion svg { width: 18px; height: 18px; } .a11y-panel-body { padding: .85rem 1rem 1rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; } .a11y-grupo + .a11y-grupo { margin-top: 1rem; } .a11y-grupo-titulo { margin: 0 0 .55rem; font-size: .82rem; font-weight: 600; color: var(--c-muted, #6c757d); text-transform: uppercase; letter-spacing: .03em; } .a11y-grupo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; } .a11y-card { background: var(--c-bg-subtle, #f8f9fa); border: 1px solid transparent; border-radius: 10px; padding: .75rem .5rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; color: var(--c-text, #212529); text-align: center; transition: background .12s ease, border-color .12s ease, transform .08s ease; } /* El aro cae FUERA de la tarjeta, sobre el fondo claro del panel, así que el primary contrasta igual esté la tarjeta activa (navy) o no. */ .a11y-card:focus-visible { outline: 2px solid var(--c-primary, #13304D); outline-offset: 2px; } .a11y-card:active { transform: scale(.97); } .a11y-card.is-activo { background: var(--c-primary, #13304D); color: var(--c-text-light, #f2f2f2); border-color: var(--c-primary, #13304D); } .a11y-card-glyph { font-size: 1.4rem; line-height: 1; font-weight: 700; } .a11y-card-label { font-size: .82rem; line-height: 1.25; font-weight: 500; } .a11y-card-nivel { font-size: .72rem; opacity: .8; font-variant-numeric: tabular-nums; } /* ═══════════════════════════════════════════════════════════════════ TOGGLES — reglas que aplican cuando hay una clase `a11y-*` en ``. Todo apunta a `.idp-*` (el layout real de esta página), no a `.portal-*` (page builder de origen). ═══════════════════════════════════════════════════════════════════ */ /* 1. Tamaño del texto — escala el font-size raíz, así todo lo que la página define en `rem` acompaña (por eso las plantillas públicas pasaron de `px` a `rem`). Va en `` porque `rem` siempre se resuelve contra la raíz: puesto en el body no tendría ningún efecto. */ :root.a11y-text-110 { font-size: 110%; } :root.a11y-text-120 { font-size: 120%; } :root.a11y-text-130 { font-size: 130%; } /* 2. Altura de línea — apunta al contenido de lectura de la card (intro, labels, help-text, alerts) sin tocar el hero (es chrome institucional, no prosa). */ :root.a11y-lh-150 .idp-card-body { line-height: 1.5; } :root.a11y-lh-175 .idp-card-body { line-height: 1.75; } :root.a11y-lh-200 .idp-card-body { line-height: 2; } /* 3. Fuente legible — swap a Verdana en toda la página (hero incluido, igual la fuente institucional ahí es solo de marca, no de lectura extensa). */ :root.a11y-readable-font .idp-split, :root.a11y-readable-font .idp-split * { font-family: Verdana, Tahoma, 'Trebuchet MS', Arial, sans-serif !important; letter-spacing: 0.02em; word-spacing: 0.04em; } /* 3.b Fuente para dislexia (MHF-HU042) — OpenDyslexic real, no una sans-serif del sistema como "Fuente legible". El @font-face NO vive acá (este CSS se sirve siempre) — lo inyecta el JS bajo demanda, solo la primera vez que este toggle se activa (`asegurarFuenteDislexia` en accesibilidad-widget.js), así el .woff2 nunca se descarga para quien no lo pidió. A propósito va DESPUÉS de "Fuente legible" en la hoja: si un visitante llegara a activar los dos toggles a la vez, con igual especificidad y ambos `!important`, gana la regla que aparece último — priorizamos el soporte real de dislexia por sobre el ajuste genérico. */ :root.a11y-dyslexic-font .idp-split, :root.a11y-dyslexic-font .idp-split * { font-family: 'OpenDyslexic', Verdana, Tahoma, sans-serif !important; letter-spacing: 0.01em; } /* 4. Contraste — tres modos, cada uno con un objetivo distinto: - "claro": refuerza WCAG dentro del esquema institucional claro (texto más oscuro, bordes más marcados), sin tocar el hero. - "oscuro": modo nocturno. El hero (chrome, ya es navy con texto blanco) queda igual; la card pasa a fondo oscuro y TODO su texto pasa a --c-text-light — se acepta perder el color de marca en los labels a cambio de contraste garantizado. - "alto": máximo contraste, blanco/negro puro en TODA la página, hero incluido (ahí sí se sacrifica el branding por completo). */ :root.a11y-contrast-claro .idp-form-side { background: #fff !important; } :root.a11y-contrast-claro .idp-card { background: #fff !important; } :root.a11y-contrast-claro .idp-card-header { border-color: #495057 !important; } :root.a11y-contrast-claro .idp-card-footer { background: #fff !important; color: #000 !important; border-color: #495057 !important; } :root.a11y-contrast-claro .idp-intro, :root.a11y-contrast-claro .idp-form .help-text, :root.a11y-contrast-claro .idp-card-header .subtitle, :root.a11y-contrast-claro .idp-step-indicator { color: #000 !important; } :root.a11y-contrast-claro .idp-form input { border-color: #495057 !important; } /* `color-scheme: dark` le avisa al navegador que pinte de oscuro lo que dibuja él y no el CSS: scrollbars, checkboxes, selects nativos y el date picker. Gana por especificidad al `html { color-scheme: light }` de base_publico.html. Los scrollbars del contenedor que scrollea sí están definidos a mano ahí, así que hay que pisarlos aparte. */ :root.a11y-contrast-oscuro { color-scheme: dark; } :root.a11y-contrast-oscuro .idp-form-side { background: #1c1c1c !important; scrollbar-color: #4a4a4a #1c1c1c !important; } :root.a11y-contrast-oscuro .idp-form-side::-webkit-scrollbar-track { background: #1c1c1c !important; } :root.a11y-contrast-oscuro .idp-form-side::-webkit-scrollbar-thumb { background: #4a4a4a !important; } :root.a11y-contrast-oscuro .idp-card { background: #1c1c1c !important; box-shadow: none !important; } :root.a11y-contrast-oscuro .idp-card-header { border-color: #3a3a3a !important; } :root.a11y-contrast-oscuro .idp-card-footer { background: #161616 !important; border-color: #3a3a3a !important; } /* Sweep de texto: todo el cuerpo de la card pasa a text-light, salvo los elementos con su propio fondo de color (botón primario, badge) que ya contrastan por sí mismos. Con !important: varios labels/textos del formulario (ej. "Sin número (S/N)") tienen su color puesto inline en el HTML — sin !important, un inline le gana a esta regla y el texto queda con su gris claro de siempre sobre el fondo oscuro, invisible. */ :root.a11y-contrast-oscuro .idp-card :is(h1, h2, p, label, span, div, small, strong) { color: var(--c-text-light, #f2f2f2) !important; } :root.a11y-contrast-oscuro .idp-btn-primary, :root.a11y-contrast-oscuro .ins-badge, :root.a11y-contrast-oscuro .idp-btn-primary * { color: #fff !important; } :root.a11y-contrast-oscuro .idp-btn-secondary { background: transparent !important; color: var(--c-text-light, #f2f2f2) !important; border-color: #3a3a3a !important; } :root.a11y-contrast-oscuro .idp-form input, :root.a11y-contrast-oscuro .idp-form select, :root.a11y-contrast-oscuro .idp-form textarea { background: #262626 !important; color: var(--c-text-light, #f2f2f2) !important; border-color: #3a3a3a !important; } /* select2 (inscripcion.html, y el modal "Editar datos" de gestión): reemplaza el real), y el sweep de texto claro de más arriba fuerza el /

interno a texto claro — sin este override queda texto claro sobre el fondo claro que le pone el