/**
* =============================================================================
* css/accesibilidad.css
* -----------------------------------------------------------------------------
* Estilos del botón flotante de accesibilidad de casurid.com (tanda 3).
*
* Colores tomados de la identidad visual del sitio (mismo azul que
* en todas las páginas), para
* que se sienta parte del sitio y no un plugin genérico pegado encima.
*
* UBICACIÓN: el botón va abajo a la IZQUIERDA (bottom-left). El botón de
* WhatsApp ya existente (app-whatsApp.css) vive abajo a la derecha — se
* evita a propósito que se superpongan.
*
* Cada opción del panel activa/desactiva una clase sobre (ver
* js/accesibilidad.js). Las reglas de esas clases están al final de este
* archivo, agrupadas por función.
* =============================================================================
*/
/* ---- Botón flotante ------------------------------------------------------ */
.accesibilidad-container {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 1000;
font-family: Arial, Helvetica, sans-serif;
}
.accesibilidad-boton {
width: 60px;
height: 60px;
background-color: #478ac9;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
transition: transform 0.15s ease;
}
.accesibilidad-boton:hover,
.accesibilidad-boton:focus-visible {
transform: scale(1.08);
outline: 3px solid #ffffff;
outline-offset: 2px;
}
.accesibilidad-boton svg {
width: 32px;
height: 32px;
fill: #ffffff;
}
/* ---- Panel ----------------------------------------------------------------
Se despliega hacia arriba desde el botón, como en el mockup de referencia
(tarjetas de dos columnas con icono + etiqueta). En pantallas angostas
pasa a una sola columna (ver media query al final).
----------------------------------------------------------------------------*/
.accesibilidad-panel {
position: absolute;
bottom: 72px;
left: 0;
width: 320px;
max-height: 70vh;
overflow-y: auto;
background: #ffffff;
border-radius: 14px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
padding: 14px;
display: none;
}
.accesibilidad-panel.abierto {
display: block;
}
.accesibilidad-panel-titulo {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 6px 12px;
border-bottom: 1px solid #e7edf3;
margin-bottom: 10px;
}
.accesibilidad-panel-titulo span {
font-weight: 700;
color: #22405c;
font-size: 0.95rem;
}
.accesibilidad-cerrar {
background: none;
border: none;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
color: #6b7d8f;
padding: 4px 6px;
}
.accesibilidad-reset {
width: 100%;
background: #eaf2fa;
color: #22405c;
border: 1px solid #cfe0ef;
border-radius: 10px;
padding: 10px;
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
margin-bottom: 12px;
}
.accesibilidad-reset:hover {
background: #dcebf7;
}
.accesibilidad-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.accesibilidad-opcion {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
background: #f6f9fc;
border: 1px solid #e7edf3;
border-radius: 12px;
padding: 12px 6px;
cursor: pointer;
font-size: 0.78rem;
color: #22405c;
text-align: center;
line-height: 1.15;
}
.accesibilidad-opcion:hover,
.accesibilidad-opcion:focus-visible {
background: #eaf2fa;
border-color: #478ac9;
}
.accesibilidad-opcion.activa {
background: #478ac9;
border-color: #478ac9;
color: #ffffff;
}
.accesibilidad-opcion svg {
width: 26px;
height: 26px;
fill: currentColor;
}
@media (max-width: 420px) {
.accesibilidad-panel {
width: calc(100vw - 40px);
}
}
/* =============================================================================
REGLAS QUE ACTIVA CADA OPCIÓN — se agregan sobre , así cubren TODO
el documento sin tener que tocar el CSS propio de cada página.
============================================================================= */
/* Contraste alto: fondo negro, texto blanco, sin imágenes de fondo que
compitan con el texto. */
html.acc-contraste-alto,
html.acc-contraste-alto body {
background: #000000 !important;
color: #ffffff !important;
}
html.acc-contraste-alto * {
background-color: #000000 !important;
color: #ffffff !important;
border-color: #ffffff !important;
}
html.acc-contraste-alto a {
color: #ffff00 !important;
}
html.acc-contraste-alto img {
filter: brightness(0.9) contrast(1.2);
}
/* Escala de grises. */
html.acc-escala-grises {
filter: grayscale(100%);
}
/* Agrandar texto: escala relativa, no un tamaño fijo, para que respete la
jerarquía de títulos vs párrafos que ya tiene el sitio. */
html.acc-texto-grande {
font-size: 120% !important;
}
/* Espaciado de texto: ayuda a lectores con dislexia o baja visión. */
html.acc-espaciado-texto * {
letter-spacing: 0.06em !important;
word-spacing: 0.12em !important;
line-height: 1.7 !important;
}
/* Resaltar enlaces: todo queda inconfundible. */
html.acc-resaltar-enlaces a {
background-color: #ffe066 !important;
color: #22405c !important;
text-decoration: underline !important;
font-weight: 700 !important;
}
/* Lectura fácil: tipografía sin serifas, más espaciada e interlineada,
pensada para dislexia y lectores con dificultades cognitivas. */
html.acc-lectura-facil,
html.acc-lectura-facil * {
font-family: Arial, Helvetica, sans-serif !important;
line-height: 1.8 !important;
}
/* Detener animaciones: apaga animaciones y transiciones CSS de todo el
sitio (incluye las de Nicepage). No detiene un GIF animado dentro de una
imagen — eso no se puede controlar por CSS, solo animaciones/transiciones
propias del sitio. */
html.acc-sin-animaciones *,
html.acc-sin-animaciones *::before,
html.acc-sin-animaciones *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
/* Ocultar imágenes: útil para quien usa lector de pantalla y quiere que el
navegador no pierda tiempo renderizando imágenes decorativas. */
html.acc-ocultar-imagenes img {
visibility: hidden !important;
}
/* Alinear texto a la izquierda: el sitio centra varios bloques de texto;
la alineación centrada dificulta la lectura a personas con dislexia. */
html.acc-alinear-izquierda * {
text-align: left !important;
}
/* Cursor grande: cursor de flecha ampliado en SVG embebido (no depende de
un archivo externo, así que funciona igual en cualquier página). */
html.acc-cursor-grande,
html.acc-cursor-grande * {
cursor:
url('data:image/svg+xml;utf8,') 4 4,
auto !important;
}