:root { --govco-azul: #004884; --govco-azul-cta: #3366CC; --govco-white: #fff; --govco-tooltip-bg: var(--govco-azul-cta); --govco-tooltip-color: #fff; --govco-btn-size: 48px; --govco-btn-radius: 14px; } /* ===== Barra (contenedor) ===== */ .govco-acc-wrap { position: relative; z-index: 9999; } .barra-accesibilidad-govco{ height: 156px; /* 3 botones de 40 + gaps */ width: var(--govco-btn-size); position: fixed; right: 0; /* pegada al borde */ top: 35%; background: var(--govco-azul); border-radius: var(--govco-btn-radius) 0 0 var(--govco-btn-radius); padding: 12px 0 20px 0; display: flex; flex-direction: column; gap: 8px; align-items: center; box-shadow: 0 4px 16px rgba(0,0,0,.25); } /* ===== Botón base ===== */ .barra-accesibilidad-govco .acc-btn{ width: var(--govco-btn-size); height: 40px; background: var(--govco-azul); border: none; outline: none; position: relative; cursor: pointer; } /* Cuadro blanco (debajo del icono) */ .barra-accesibilidad-govco .acc-btn::after{ content: ""; position: absolute; top: 8px; left: 12px; height: 24px; width: 24px; background: var(--govco-white); border-radius: 6px; z-index: 1; } /* ===== Íconos visibles sin fuentes ni SVG ===== */ .icon-contraste::before, .icon-reducir::before, .icon-aumentar::before{ position: absolute; top: 8px; left: 12px; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; font-family: Arial, Helvetica, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-weight: 700; font-size: 15px; color: var(--govco-azul); z-index: 2; /* encima del cuadro blanco */ line-height: 1; } .icon-contraste::before { content: "◐"; font-size: 18px; } .icon-reducir::before { content: "A−"; } /* usa signo menos real (U+2212) */ .icon-aumentar::before { content: "A+"; } /* ===== Tooltip ===== */ .acc-tooltip{ position: absolute; right: 48px; top: 50%; transform: translateY(-50%); background: var(--govco-tooltip-bg); color: var(--govco-tooltip-color); font-size: 14px; padding: 8px 10px; border-radius: 10px 0 0 10px; display: none; /* evita letras “detrás” */ z-index: 10; /* por encima de todo */ white-space: nowrap; } .barra-accesibilidad-govco .acc-btn:hover .acc-tooltip, .barra-accesibilidad-govco .acc-btn:focus-visible .acc-tooltip{ display: block; } /* Focus accesible */ .barra-accesibilidad-govco .acc-btn:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; } /* Seleccionado (aria-pressed="true") */ .barra-accesibilidad-govco .acc-btn[aria-pressed="true"]{ background: var(--govco-azul-cta); } /* ===== Modo contraste robusto ===== */ /* Aplica el filtro al , no al */ html.govco-contrast{ filter: invert(1) hue-rotate(180deg); overflow-anchor: none; /* <- evita el salto por scroll anchoring */ } /* Fondo/texto base para asegurar legibilidad */ html.govco-contrast body{ background:#000 !important; color:#fff !important; } /* Revertir medios para que no queden “negativos” */ html.govco-contrast img, html.govco-contrast video, html.govco-contrast iframe, html.govco-contrast picture, html.govco-contrast svg{ filter: invert(1) hue-rotate(180deg); } /* Mantener la barra sin invertir */ html.govco-contrast .barra-accesibilidad-govco, html.govco-contrast .barra-accesibilidad-govco *{ filter: none !important; } /* ===== Responsivo ===== */ @media (max-width: 782px){ .barra-accesibilidad-govco{ top: auto; bottom: 16px; right: 0; } }