/* ========================================================================== ACCESIBILIDAD — SBM Construction / ServePro Módulo independiente. Cárgalo DESPUÉS de main.css: ========================================================================== */ /* -------------------------------------------------------------------------- 0. INFRAESTRUCTURA DE ESCALADO TIPOGRÁFICO (A- / A / A+) -------------------------------------------------------------------------- El tamaño se controla en en píxeles absolutos (12px–24px) mediante JS (ver accessibility.js). Todo lo que esté en rem dentro de main.css escalará automáticamente porque 1rem = font-size de . -------------------------------------------------------------------------- */ html { font-size: 16px; /* valor por defecto; el JS lo sobrescribe en línea */ transition: font-size .15s ease; } /* Los componentes dinámicos del widget (panel, chips, botones) se definen en rem para heredar el escalado automáticamente. */ /* Contenedores flexibles para que el texto crezca sin desbordarse ni encimarse al aumentar el tamaño de fuente. Estas reglas SUMAN comportamiento; no eliminan tus estilos existentes en main.css. */ .info, .faq-msg, .faq-chip, #faq-chips, .faq-input-row { display: flex; flex-wrap: wrap; min-width: 0; word-break: break-word; overflow-wrap: anywhere; } .faq-body { display: flex; flex-direction: column; gap: .6rem; overflow-y: auto; } .info { flex-direction: column; } /* -------------------------------------------------------------------------- 1.a ALTO CONTRASTE -------------------------------------------------------------------------- Prioridad absoluta: usa !important y se aplica sobre .dark también, por lo que gana sin importar en qué tema estaba el sitio. -------------------------------------------------------------------------- */ body.high-contrast, body.high-contrast.dark { --primary: #FFFF00 !important; --secondary: #FFFFFF !important; --nav: #000000 !important; --navy: #000000 !important; --blue-deep: #FFFF00 !important; --blue-mid: #FFFF00 !important; --blue-brand: #000000 !important; --ink: #FFFF00 !important; --paper: #000000 !important; --line: #000000 !important; --bubble: #000000 !important; --faq: #000000 !important; } body.high-contrast { background-color: #000000 !important; color: #FFFFFF !important; } /* Fondo negro puro y texto blanco/amarillo en todos los bloques de contenido, preservando imágenes (solo se les añade un borde para que sigan siendo perceptibles como elementos independientes). */ body.high-contrast body, body.high-contrast main, body.high-contrast .navbar, body.high-contrast footer, body.high-contrast .content, body.high-contrast .info, body.high-contrast #faq-panel, body.high-contrast .faq-header, body.high-contrast .faq-body, body.high-contrast .faq-chips, body.high-contrast .faq-input-row { background-color: #000000 !important; color: #FFFFFF !important; border-color: #FFFF00 !important; } .high-contrast .tri-state-switch { color: var(--nav) !important; } .high-contrast .tri-state-switch label.selected { color: var(--nav); } body.high-contrast a { color: #FFFF00 !important; } body.high-contrast button, body.high-contrast .faq-chip, body.high-contrast input, body.high-contrast textarea { background-color: #000000 !important; color: #FFFF00 !important; border: 2px solid #FFFF00 !important; } .high-contrast .img { filter: grayscale(100%); } .high-contrast .olas { filter: grayscale(100%) } .high-contrast .about-photo-mission { filter: grayscale(100%) } .high-contrast .about-photo-vision { filter: grayscale(100%) } .high-contrast .services-card { filter: grayscale(100%); } .high-contrast .services-list { filter: grayscale(100%) } .high-contrast .work-grid { filter: grayscale(100%); } .high-contrast .wave-decor { fill: #FFFF00 !important; filter: grayscale(100%) contrast(1.2) !important; } .high-contrast .modal-price-card { background: #000000 !important; } /*body.high-contrast img { filter: grayscale(20%) contrast(1.1); border: 1px solid #FFFF00; }*/ body.high-contrast svg { fill: #FFFF00 !important; } .high-contrast .logo { filter: invert(1) } .high-contrast .labsol-logo { filter: grayscale(100%) sepia(100%) hue-rotate(40deg) saturate(200%); } .high-contrast .gpl-logo { filter: grayscale(100%) sepia(100%) hue-rotate(40deg) saturate(200%); } /* -------------------------------------------------------------------------- 1.b FILTRO PARA TRITANOPÍA (confusión azul/verde) -------------------------------------------------------------------------- La interfaz usa una paleta muy dominada por azules (--blue-brand, --nav, --navy). Aplicamos una matriz de color (feColorMatrix, definida en el SVG del panel HTML) que redistribuye parte de la señal azul hacia el canal rojo, aumentando el contraste percibido entre azul y verde. Es una aproximación práctica, no una corrección clínica exacta. -------------------------------------------------------------------------- */ body.tritanopia-filter { filter: url(#a11y-tritanopia-matrix) saturate(1.15); } /* Si el navegador no soporta filtros SVG referenciados, se aplica un fallback solo con funciones CSS nativas. */ @supports not (filter: url(#a11y-tritanopia-matrix)) { body.tritanopia-filter { filter: hue-rotate(-25deg) saturate(1.4) contrast(1.05); } } /* -------------------------------------------------------------------------- 2. ESTRUCTURA VISUAL SIN COLOR (subrayados + bordes gruesos) -------------------------------------------------------------------------- */ body.structure-mode a { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px; } body.structure-mode button, body.structure-mode .faq-chip, body.structure-mode #faq-form button, body.structure-mode #faq-launcher, body.structure-mode #dark-mode-toggle, body.structure-mode #menu-accesibility, body.structure-mode input[type="submit"] { border: 2px solid currentColor !important; border-radius: 6px; } /* Los chips de sugerencias del chat suelen depender solo de color de fondo; aquí se añade un borde discontinuo para diferenciarlos del resto de botones sin usar color. */ body.structure-mode .faq-chip { border-style: dashed !important; } /* Indicador de foco reforzado, útil junto con "sin color" para navegación por teclado. */ body.structure-mode a:focus-visible, body.structure-mode button:focus-visible, body.structure-mode input:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; } /* -------------------------------------------------------------------------- 3. PANEL / BARRA DE HERRAMIENTAS DE ACCESIBILIDAD -------------------------------------------------------------------------- */ #a11y-panel { position: fixed; top: 4.5rem; right: 1rem; z-index: 1200; width: min(19rem, calc(100vw - 2rem)); background-color: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: .75rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); padding: 1rem; display: none; flex-direction: column; gap: .85rem; font-size: 1rem; } #a11y-panel[data-open="true"] { display: flex; } #a11y-panel h2 { font-size: 1.05rem; margin: 0 0 .25rem; } .a11y-group { display: flex; flex-direction: column; gap: .4rem; } .a11y-group legend, .a11y-group .a11y-label { font-size: .85rem; font-weight: 600; opacity: .85; } .a11y-row { display: flex; flex-wrap: wrap; gap: .5rem; } .a11y-btn { flex: 1 1 auto; min-width: 2.5rem; padding: .5rem .7rem; font-size: .9rem; border-radius: .5rem; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; } .a11y-btn:hover { border-color: var(--blue-brand, var(--primary)); } .a11y-btn[aria-pressed="true"] { background-color: var(--blue-brand, var(--primary)); color: #ffffff; border-color: transparent; } .a11y-btn:focus-visible { outline: 3px solid var(--blue-brand, var(--primary)); outline-offset: 2px; } .a11y-font-controls { display: flex; align-items: center; gap: .5rem; } .a11y-font-controls .a11y-btn { flex: 0 0 auto; width: 2.4rem; font-weight: 700; } #a11y-font-value { font-size: .8rem; min-width: 3rem; text-align: center; opacity: .8; } .a11y-reset { align-self: flex-start; background: none; border: none; color: var(--blue-brand, var(--primary)); text-decoration: underline; font-size: .85rem; cursor: pointer; padding: 0; } /* Alto contraste también debe cubrir el propio panel del widget */ body.high-contrast #a11y-panel, body.high-contrast .a11y-btn { background-color: #000000 !important; color: #FFFF00 !important; border-color: #FFFF00 !important; } /* -------------------------------------------------------------------------- 4. ALTO CONTRASTE — BARRA DE SCROLL -------------------------------------------------------------------------- */ body.high-contrast::-webkit-scrollbar, body.high-contrast *::-webkit-scrollbar { background-color: #000000 !important; } body.high-contrast::-webkit-scrollbar-thumb, body.high-contrast *::-webkit-scrollbar-thumb { background: #FFFF00 !important; border: 1px solid #000000; } /* Firefox */ body.high-contrast { scrollbar-color: linear-gradient( #FFFF00 #000000); } /* -------------------------------------------------------------------------- 5. ALTO CONTRASTE — MENSAJES DEL CHAT -------------------------------------------------------------------------- #faq-widget-root redefine --charcoal, --concrete, --safety-yellow, --safety-orange, --paper y --line EN SU PROPIO SCOPE (ver main.css, selector #faq-widget-root). Eso "tapa" las variables que body.high-contrast sobrescribe más arriba, así que hay que repetir la sobrescritura aquí, anidada bajo #faq-widget-root, para que sí gane prioridad. Además se fuerza directamente el fondo/color de cada burbuja, porque el fondo de .faq-msg.bot está escrito en rgba() fijo (no usa variable). -------------------------------------------------------------------------- */ body.high-contrast #faq-widget-root { --charcoal: #000000 !important; --charcoal-soft: #000000 !important; --concrete: #FFFF00 !important; --paper: #ffffff !important; --safety-yellow: #FFFF00 !important; --safety-orange: #FFFF00 !important; --line: #FFFF00 !important; } body.high-contrast .faq-msg.bot { background-color: #000000 !important; color: #FFFF00 !important; border-left: 3px solid #FFFF00 !important; box-shadow: none !important; } body.high-contrast .faq-msg.user { background-color: #000000 !important; color: #FFFFFF !important; border: 1px solid #FFFF00 !important; } body.high-contrast .faq-msg.faq-typing { color: #FFFF00 !important; } body.high-contrast .faq-status .dot { background: #FFFF00 !important; box-shadow: none !important; } body.high-contrast .faq-input-row { background: #000000 !important; border-top-color: #FFFF00 !important; } body.high-contrast .faq-input-row button { background: #FFFF00 !important; color: #000000 !important; } /* -------------------------------------------------------------------------- 6. ALTO CONTRASTE — QUITAR EL DEGRADADO AZUL SOBRE LAS IMÁGENES DE INICIO -------------------------------------------------------------------------- .hero::after (main.css) pinta un degradado azul-marino encima de las 3 fotos del hero. En alto contraste lo cambiamos a un degradado negro puro, y el texto degradado azul de photo-overlay h2:last-child pasa a amarillo sólido. -------------------------------------------------------------------------- */ body.high-contrast .hero::after { background: linear-gradient(115deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.75) 100%) !important; } body.high-contrast .photo-overlay h2 { color: #FFFFFF !important; text-shadow: none !important; } body.high-contrast .photo-overlay h2:last-child { background: none !important; -webkit-text-fill-color: #FFFF00 !important; color: #FFFF00 !important; } /* -------------------------------------------------------------------------- 7. ALTO CONTRASTE — OLA (.olas): VERSIÓN OSCURA + TONO AMARILLO -------------------------------------------------------------------------- El cambio de imagen (light.png → dark.png) lo hace accessibility.js al activar/desactivar alto contraste. Aquí solo se aplica el tinte amarillo sobre esa imagen oscura, con la misma receta de filtro que ya usas para .labsol-logo / .gpl-logo. -------------------------------------------------------------------------- */ body.high-contrast .olas { filter: grayscale(1) contrast(150%) !important; } /* -------------------------------------------------------------------------- 8. ALTO CONTRASTE — MODALES (incluye el modal "About") -------------------------------------------------------------------------- */ body.high-contrast .modal-box, body.high-contrast .services-modal-overlay { background-color: #000000 !important; color: #FFFFFF !important; } body.high-contrast .modal-box::after { display: none !important; } body.high-contrast .about-member { background-color: #000000 !important; border-color: #FFFF00 !important; } body.high-contrast .about-contacts a { color: #FFFF00 !important; } body.high-contrast .about-contacts a:hover, body.high-contrast .about-contacts a:focus-visible { background-color: rgba(255, 255, 0, 0.15) !important; } body.high-contrast .services-modal-close { background-color: #000000 !important; color: #FFFF00 !important; border: 2px solid #FFFF00 !important; }