/* B22G — Widget de accesibilidad Estilos del propio widget (botón + panel). Los ajustes que el usuario activa se aplican vía atributos data-b22g-a11y-* en . Namespace .b22ga11y / --b22ga11y-* para no colisionar con la web anfitriona. */ /* Fuentes de alta legibilidad, self-hosted (sin CDN, compatible con CSP estricto). Atkinson Hyperlegible (Braille Institute, OFL) · OpenDyslexic (OFL). */ @font-face { font-family: "B22G Atkinson"; src: url("../fonts/atkinson-regular.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "B22G OpenDyslexic"; src: url("../fonts/opendyslexic-regular.otf") format("opentype"); font-weight: 400; font-display: swap; } @font-face { font-family: "B22G OpenDyslexic"; src: url("../fonts/opendyslexic-bold.otf") format("opentype"); font-weight: 700; font-display: swap; } .b22ga11y-root { --b22ga11y-brand: #e8491d; --b22ga11y-bg: #14100e; --b22ga11y-surface: #1e1917; --b22ga11y-text: #f5f2f0; --b22ga11y-muted: #a89f9a; --b22ga11y-border: #332b27; --b22ga11y-radius: 12px; --b22ga11y-font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; position: fixed; z-index: 2147483000; /* por encima de casi todo, por debajo del techo de int32 */ font-family: var(--b22ga11y-font); line-height: 1.5; } .b22ga11y-root[data-position="bottom-right"] { right: 20px; bottom: 20px; } .b22ga11y-root[data-position="bottom-left"] { left: 20px; bottom: 20px; } .b22ga11y-root[data-position="top-right"] { right: 20px; top: 20px; } .b22ga11y-root[data-position="top-left"] { left: 20px; top: 20px; } /* ---------- Botón lanzador ---------- */ .b22ga11y-toggle { width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--b22ga11y-brand); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 16px rgba(0, 0, 0, .35); transition: transform .18s ease, box-shadow .18s ease; padding: 0; } .b22ga11y-toggle:hover { transform: scale(1.06); box-shadow: 0 6px 22px rgba(0, 0, 0, .45); } .b22ga11y-toggle:active { transform: scale(.97); } .b22ga11y-toggle svg { width: 28px; height: 28px; display: block; } /* Foco visible SIEMPRE en el widget: es una herramienta de accesibilidad, no puede depender de que la web anfitriona tenga buen :focus. */ .b22ga11y-root :focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 4px; } /* ---------- Panel ---------- */ .b22ga11y-panel { position: absolute; width: 320px; max-width: calc(100vw - 40px); max-height: min(560px, calc(100vh - 100px)); overflow-y: auto; overscroll-behavior: contain; background: var(--b22ga11y-bg); color: var(--b22ga11y-text); border: 1px solid var(--b22ga11y-border); border-radius: var(--b22ga11y-radius); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); padding: 16px; display: none; } .b22ga11y-panel[data-open="true"] { display: block; } .b22ga11y-root[data-position$="-right"] .b22ga11y-panel { right: 0; } .b22ga11y-root[data-position$="-left"] .b22ga11y-panel { left: 0; } .b22ga11y-root[data-position^="bottom-"] .b22ga11y-panel { bottom: 64px; } .b22ga11y-root[data-position^="top-"] .b22ga11y-panel { top: 64px; } .b22ga11y-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .b22ga11y-title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; } .b22ga11y-close { background: transparent; border: none; color: var(--b22ga11y-muted); cursor: pointer; font-size: 22px; line-height: 1; padding: 4px 6px; border-radius: 6px; } .b22ga11y-close:hover { color: var(--b22ga11y-text); background: var(--b22ga11y-surface); } .b22ga11y-sub { margin: 0 0 12px; font-size: 12px; color: var(--b22ga11y-muted); } /* ---------- Controles ---------- */ .b22ga11y-group { margin-bottom: 14px; } .b22ga11y-legend { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--b22ga11y-muted); margin-bottom: 6px; } .b22ga11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .b22ga11y-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; background: var(--b22ga11y-surface); border: 1px solid var(--b22ga11y-border); border-radius: 8px; color: var(--b22ga11y-text); font-family: inherit; font-size: 12.5px; font-weight: 500; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .b22ga11y-opt:hover { border-color: var(--b22ga11y-brand); } .b22ga11y-opt[aria-pressed="true"] { background: var(--b22ga11y-brand); border-color: var(--b22ga11y-brand); color: #fff; } .b22ga11y-opt svg { width: 16px; height: 16px; flex: none; } /* Stepper (texto / espaciado) */ .b22ga11y-step { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px 7px 10px; background: var(--b22ga11y-surface); border: 1px solid var(--b22ga11y-border); border-radius: 8px; } .b22ga11y-step-label { font-size: 12.5px; font-weight: 500; } .b22ga11y-step-ctrl { display: flex; align-items: center; gap: 4px; } .b22ga11y-step button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--b22ga11y-border); background: var(--b22ga11y-bg); color: var(--b22ga11y-text); font-family: inherit; font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .b22ga11y-step button:hover:not(:disabled) { border-color: var(--b22ga11y-brand); color: var(--b22ga11y-brand); } .b22ga11y-step button:disabled { opacity: .35; cursor: not-allowed; } .b22ga11y-step-val { min-width: 42px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--b22ga11y-muted); } /* ---------- Pie ---------- */ .b22ga11y-foot { border-top: 1px solid var(--b22ga11y-border); padding-top: 10px; margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .b22ga11y-reset { background: transparent; border: 1px solid var(--b22ga11y-border); color: var(--b22ga11y-text); border-radius: 7px; padding: 7px 11px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .b22ga11y-reset:hover { border-color: var(--b22ga11y-brand); color: var(--b22ga11y-brand); } .b22ga11y-stmt { font-size: 11px; color: var(--b22ga11y-muted); text-decoration: underline; text-underline-offset: 2px; } .b22ga11y-stmt:hover { color: var(--b22ga11y-brand); } /* Gancho comercial: banner clicable a la landing de venta */ .b22ga11y-promo { display: block; margin-top: 12px; padding: 11px 12px; border-radius: 9px; background: linear-gradient(135deg, var(--b22ga11y-brand), #b8371a); color: #fff; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } .b22ga11y-promo:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232, 73, 29, .35); } .b22ga11y-promo-t { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.01em; } .b22ga11y-promo-s { display: block; font-size: 11px; font-weight: 500; opacity: .9; margin-top: 2px; } /* Solo lectores de pantalla */ .b22ga11y-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================= AJUSTES APLICADOS A LA WEB ANFITRIONA Se activan por atributos en . Excluyen .b22ga11y-root para que el panel no se deforme a sí mismo. ========================================================= */ /* --- Escala de texto --- Se escala SOLO la raíz: una única aplicación (evita componer el factor en cada nivel de anidamiento) y arrastra todo lo definido en rem/em. Texto fijado en px no escala: limitación aceptada. */ html[data-b22g-a11y-text] { font-size: calc(var(--b22ga11y-text-scale, 1) * 100%) !important; } /* --- Espaciado (WCAG 1.4.12 Text Spacing) --- */ html[data-b22g-a11y-spacing="1"] body *:not(.b22ga11y-root):not(.b22ga11y-root *) { line-height: 1.7 !important; letter-spacing: .02em !important; word-spacing: .06em !important; } html[data-b22g-a11y-spacing="2"] body *:not(.b22ga11y-root):not(.b22ga11y-root *) { line-height: 2.1 !important; letter-spacing: .09em !important; word-spacing: .16em !important; } /* --- Fuente legible: Atkinson Hyperlegible (diseñada por el Braille Institute para maximizar la diferenciación de caracteres en baja visión) --- */ html[data-b22g-a11y-font="legible"] body *:not(.b22ga11y-root):not(.b22ga11y-root *) { font-family: "B22G Atkinson", Verdana, "Segoe UI", sans-serif !important; letter-spacing: .01em !important; } /* --- Dislexia: OpenDyslexic (base con peso que fija la orientación de las letras) --- */ html[data-b22g-a11y-font="dislexia"] body *:not(.b22ga11y-root):not(.b22ga11y-root *) { font-family: "B22G OpenDyslexic", "Comic Sans MS", Verdana, sans-serif !important; letter-spacing: .03em !important; word-spacing: .1em !important; } /* --- Contraste alto --- */ html[data-b22g-a11y-contrast="alto"] body *:not(.b22ga11y-root):not(.b22ga11y-root *) { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; text-shadow: none !important; } html[data-b22g-a11y-contrast="alto"] body a:not(.b22ga11y-root *), html[data-b22g-a11y-contrast="alto"] body a *:not(.b22ga11y-root *) { color: #ffea00 !important; } html[data-b22g-a11y-contrast="alto"] body img:not(.b22ga11y-root *) { filter: grayscale(1) contrast(1.25); } /* --- Invertir --- Un `filter` en body o en sus wrappers crea containing block y rompe el position:fixed de la web anfitriona (cookie banners, chats, pins GSAP). En su lugar: pseudo-elemento fijo con backdrop-filter — invierte todo lo pintado por debajo sin tocar el layout de nadie. Las imágenes quedan invertidas (mismo comportamiento que la inversión del SO). El widget (z-index superior) y la guía quedan por encima: no se invierten. */ html[data-b22g-a11y-contrast="invertido"]::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2147481000; backdrop-filter: invert(1) hue-rotate(180deg); -webkit-backdrop-filter: invert(1) hue-rotate(180deg); } /* --- Saturación --- */ html[data-b22g-a11y-sat="gris"] body > *:not(.b22ga11y-root):not(.b22ga11y-guide) { filter: grayscale(1); } html[data-b22g-a11y-sat="baja"] body > *:not(.b22ga11y-root):not(.b22ga11y-guide) { filter: saturate(.5); } html[data-b22g-a11y-sat="alta"] body > *:not(.b22ga11y-root):not(.b22ga11y-guide) { filter: saturate(1.7); } /* --- Resaltar enlaces --- */ html[data-b22g-a11y-links="1"] body a:not(.b22ga11y-root *) { outline: 2px solid #ffea00 !important; outline-offset: 1px; background: #000 !important; color: #ffea00 !important; text-decoration: underline !important; text-underline-offset: 2px; } /* --- Resaltar títulos --- */ html[data-b22g-a11y-titles="1"] body :is(h1,h2,h3,h4,h5,h6):not(.b22ga11y-root *) { outline: 2px dashed var(--b22ga11y-brand, #e8491d) !important; outline-offset: 3px; } /* --- Parar animaciones --- */ html[data-b22g-a11y-motion="off"] body *:not(.b22ga11y-root):not(.b22ga11y-root *) { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* --- Ocultar imágenes --- */ html[data-b22g-a11y-media="off"] body :is(img, picture, video, svg:not(.b22ga11y-root svg)):not(.b22ga11y-root *) { visibility: hidden !important; } html[data-b22g-a11y-media="off"] body *:not(.b22ga11y-root):not(.b22ga11y-root *) { background-image: none !important; } /* --- Cursor grande --- */ html[data-b22g-a11y-cursor="1"] body, html[data-b22g-a11y-cursor="1"] body *:not(.b22ga11y-root):not(.b22ga11y-root *) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3l28 17-12 3 7 13-5 3-7-13-8 8z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important; } /* --- Guía de lectura --- */ .b22ga11y-guide { position: fixed; left: 0; width: 100%; height: 44px; background: rgba(0, 0, 0, .82); border-top: 2px solid #ffea00; border-bottom: 2px solid #ffea00; pointer-events: none; z-index: 2147482500; display: none; mix-blend-mode: normal; } html[data-b22g-a11y-guide="1"] .b22ga11y-guide { display: block; } /* Respeta a quien ya pidió menos movimiento a nivel de sistema */ @media (prefers-reduced-motion: reduce) { .b22ga11y-toggle { transition: none; } }