/**
 * =============================================================================
 * 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
 * <meta name="theme-color" content="#478ac9"> 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 <html> (ver
 * js/accesibilidad.js). Las reglas de esas clases están al final de este
 * archivo, agrupadas por función.
 *
 * AMPLIADO (2026-09-18): se agregaron 4 perfiles (combos de un clic) y 6
 * opciones individuales nuevas, comparando contra un widget de referencia
 * más completo que mandó Jorge. Se mantuvo el mismo azul/formato de
 * tarjetas de CASURID — ver la sección "OPCIONES NUEVAS" más abajo.
 * =============================================================================
 */

/* ---- 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: 340px;
  max-height: 75vh;
  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-subtitulo {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7d8f;
  margin: 14px 2px 8px;
}

.accesibilidad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Perfiles: misma tarjeta que una opción normal pero un poco más baja
   (solo icono + etiqueta corta), para que se note que son un grupo aparte
   de la rejilla de opciones individuales. */
.accesibilidad-grid-perfiles .accesibilidad-opcion {
  padding: 10px 6px;
  font-size: 0.74rem;
}

.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 <html>, 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 <a> 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,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path fill="%23000000" stroke="%23ffffff" stroke-width="1" d="M4 2l14 12-6 1 3 7-3 1-3-7-4 4z"/></svg>') 4 4,
    auto !important;
}

/* =============================================================================
   OPCIONES NUEVAS (2026-09-18), agregadas tras comparar con el widget de
   referencia de Jorge. Mismo criterio que las de arriba: una clase sobre
   <html>, nada que dependa de tocar el CSS propio de cada página.
   ============================================================================= */

/* Resaltar encabezados: recuadro y fondo suave sobre cada h1-h6, para que
   se distingan del resto del texto de un vistazo. */
html.acc-resaltar-encabezados h1,
html.acc-resaltar-encabezados h2,
html.acc-resaltar-encabezados h3,
html.acc-resaltar-encabezados h4,
html.acc-resaltar-encabezados h5,
html.acc-resaltar-encabezados h6 {
  background-color: #fff3cd !important;
  color: #22405c !important;
  outline: 2px solid #478ac9 !important;
  outline-offset: 2px;
  padding: 2px 6px !important;
}

/* Baja saturación: a diferencia de "Escala de grises" (que quita todo el
   color), esta reduce la intensidad del color a la mitad -- útil para
   quien percibe los colores muy saturados como agresivos o distractores,
   sin perder la información de color por completo (importante para quien
   depende del color para distinguir elementos, a diferencia de alguien
   con daltonismo total). */
html.acc-baja-saturacion {
  filter: saturate(0.5);
}

/* Apto para dislexia: tipografía sin serifas con más espacio entre
   letras/palabras, sin cursivas (las itálicas son más difíciles de leer
   con dislexia) y sin justificado (que genera espacios irregulares entre
   palabras). Distinto de "Lectura fácil": aquí el espaciado es mayor y se
   fuerza además la alineación y el estilo de fuente. */
html.acc-apto-dislexia,
html.acc-apto-dislexia * {
  font-family: Verdana, Arial, sans-serif !important;
  letter-spacing: 0.04em !important;
  word-spacing: 0.15em !important;
  line-height: 1.7 !important;
  font-style: normal !important;
  text-align: left !important;
}

/* ---- Máscara de lectura ----------------------------------------------
   Dos overlays fijos (arriba/abajo del cursor) creados y posicionados por
   JS (ver js/accesibilidad.js). La franja clara entre ambos es simplemente
   el espacio que dejan -- no hay un tercer elemento, solo el hueco.
------------------------------------------------------------------------*/
.acc-mascara-overlay {
  position: fixed;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 999; /* debajo del botón/panel (1000) pero sobre todo lo demás */
  pointer-events: none; /* no debe bloquear clics en la página real */
}
#acc-mascara-arriba {
  top: 0;
}
#acc-mascara-abajo {
  bottom: 0;
}

/* ---- Lupa de contenido -------------------------------------------------
   Se aplica al elemento que está bajo el cursor en ese momento (ver
   alternarLupaContenido() en el JS). transform-origin a la izquierda para
   que el texto no "salte" hacia los costados al agrandarse.
------------------------------------------------------------------------*/
.acc-lupa-hover {
  display: inline-block;
  transform: scale(1.35);
  transform-origin: left center;
  background: #fff3cd;
  position: relative;
  z-index: 998;
  transition: transform 0.1s ease;
}

/* ---- Panel de estructura de la página -----------------------------------
   Lista fija de encabezados, en la esquina superior derecha para no
   chocar con el botón de accesibilidad (abajo-izquierda) ni con el de
   WhatsApp (abajo-derecha).
------------------------------------------------------------------------*/
#acc-estructura-panel {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  width: 280px;
  max-height: 70vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  padding: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

.acc-estructura-titulo {
  font-weight: 700;
  color: #22405c;
  font-size: 0.9rem;
  margin-bottom: 10px;
  padding-right: 24px; /* deja espacio al botón de cerrar */
}

#acc-estructura-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#acc-estructura-panel li {
  margin-bottom: 4px;
}

#acc-estructura-panel a {
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
  color: #22405c;
  text-decoration: none;
  font-size: 0.82rem;
  background: #f6f9fc;
}

#acc-estructura-panel a:hover,
#acc-estructura-panel a:focus-visible {
  background: #eaf2fa;
  outline: 2px solid #478ac9;
}

/* Sangría según el nivel del encabezado, para que se note la jerarquía. */
.acc-estructura-nivel-h2 { margin-left: 10px; }
.acc-estructura-nivel-h3 { margin-left: 20px; }
.acc-estructura-nivel-h4 { margin-left: 30px; }
.acc-estructura-nivel-h5 { margin-left: 40px; }
.acc-estructura-nivel-h6 { margin-left: 50px; }

.acc-estructura-cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: #6b7d8f;
  padding: 4px 6px;
}