/* =============================================================================
   a11y.css — Módulo de accesibilidad reutilizable (WCAG 2.1 AA)
   Sin dependencias. Todo con prefijo "a11y-". Copiar junto con a11y.js.

   Personalización opcional (en el CSS del proyecto; por defecto #0b5cad / #ffffff,
   el contraste entre ambos debe ser >= 4.5:1):
     :root { --a11y-accent: #0E6F9E; --a11y-accent-fg: #ffffff; }
   ========================================================================== */

:root {
  --a11y-bg: #ffffff;
  --a11y-fg: #14181f;
  --a11y-muted: #4a5568;
  --a11y-border: #8a94a6;
  --a11y-z: 2147483000;
}

/* ---------- Skip link ---------- */
.a11y-skip {
  position: absolute; left: 8px; top: -100px; z-index: calc(var(--a11y-z) + 2);
  background: #000; color: #fff; padding: 12px 18px; border-radius: 8px;
  font: 600 1rem/1.2 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  text-decoration: none; border: 2px solid #fff;
}
.a11y-skip:focus { top: 8px; outline: 3px solid #ffd400; outline-offset: 2px; }

.a11y-sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Botón flotante (abajo a la izquierda) ---------- */
.a11y-fab {
  position: fixed; left: 16px; bottom: 16px; z-index: var(--a11y-z);
  width: 52px; height: 52px; min-width: 44px; min-height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 3px solid #fff; cursor: pointer;
  background: var(--a11y-accent, #0b5cad); color: var(--a11y-accent-fg, #ffffff);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.a11y-fab svg { width: 30px; height: 30px; display: block; pointer-events: none; }
.a11y-fab:focus-visible, .a11y-panel button:focus-visible {
  outline: 4px solid #ffd400; outline-offset: 2px; box-shadow: 0 0 0 7px #000;
}

/* ---------- Panel ---------- */
.a11y-backdrop {
  position: fixed; inset: 0; z-index: calc(var(--a11y-z) - 1);
  background: rgba(0, 0, 0, .45);
}
.a11y-backdrop[hidden], .a11y-panel[hidden] { display: none !important; }

.a11y-panel {
  position: fixed; left: 16px; bottom: 80px; z-index: var(--a11y-z);
  width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px);
  display: flex; flex-direction: column;
  background: var(--a11y-bg); color: var(--a11y-fg);
  border: 2px solid var(--a11y-border); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
  font: 400 16px/1.45 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  letter-spacing: normal; text-align: left;
}
.a11y-panel * { box-sizing: border-box; }
.a11y-panel:focus { outline: none; }

.a11y-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--a11y-border);
}
.a11y-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--a11y-fg); }
.a11y-body { padding: 8px 18px 12px; overflow-y: auto; overscroll-behavior: contain; }
.a11y-foot {
  padding: 12px 18px 14px; border-top: 1px solid var(--a11y-border);
  display: flex; flex-direction: column; gap: 8px;
}
.a11y-hint { margin: 0; font-size: .85rem; color: var(--a11y-muted); }

.a11y-group { margin: 12px 0 4px; padding: 0; border: 0; min-width: 0; }
.a11y-group > .a11y-legend {
  display: block; padding: 0; margin: 0 0 6px; font-size: .92rem; font-weight: 700; color: var(--a11y-fg);
}
.a11y-row { display: flex; flex-wrap: wrap; gap: 8px; }
.a11y-row.a11y-col { flex-direction: column; }

.a11y-btn {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  min-height: 44px; min-width: 44px; padding: 8px 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: left;
  font: 600 .95rem/1.25 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--a11y-fg); background: #eef1f6;
  border: 2px solid var(--a11y-border); border-radius: 10px;
}
.a11y-btn:hover { background: #e1e6ef; }
.a11y-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.a11y-btn[aria-pressed="true"] {
  background: var(--a11y-accent, #0b5cad); color: var(--a11y-accent-fg, #ffffff);
  border-color: var(--a11y-fg); border-width: 3px; padding: 7px 11px;
}
/* El estado activo NO depende solo del color: agrega una marca ✔ */
.a11y-btn[aria-pressed="true"]::before { content: "\2714"; font-weight: 700; }
.a11y-row.a11y-col .a11y-btn { width: 100%; justify-content: flex-start; }
.a11y-size .a11y-btn { flex: 1 1 0; font-size: 1.05rem; justify-content: center; }
.a11y-size-info { margin: 6px 0 0; font-size: .85rem; color: var(--a11y-muted); }
.a11y-close { flex: 0 0 auto; }
.a11y-reset { width: 100%; background: #fff; }

@media (max-width: 480px) {
  .a11y-panel { left: 8px; right: 8px; bottom: 76px; width: auto; border-radius: 14px; }
  .a11y-fab { left: 12px; bottom: 12px; }
}
@media (max-height: 520px) { .a11y-panel { bottom: 8px; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); } }

/* ---------- Estados con ícono además del color (alertas Bootstrap) ---------- */
.alert-success::before { content: "\2714\00a0" / ""; font-weight: 700; }
.alert-danger::before  { content: "\2716\00a0" / ""; font-weight: 700; }
.alert-warning::before { content: "\26A0\00a0" / ""; font-weight: 700; }
.alert-info::before    { content: "\2139\00a0" / ""; font-weight: 700; }
.alert-dismissible::before { display: inline; }

/* =============================================================================
   1) Tamaño de texto — sobre el font-size de <html> (todo lo que usa rem escala)
   ========================================================================== */
html.a11y-fs { font-size: var(--a11y-fs, 100%) !important; }
/* Los breakpoints de Bootstrap usan px y no crecen con el texto: con texto grande la barra de navegación
   extendida se desbordaba. Se permite que envuelva en vez de generar scroll horizontal (WCAG 1.4.10). */
html.a11y-fs .navbar-expand-lg > .container, html.a11y-fs .navbar-expand-lg > .container-fluid { flex-wrap: wrap; }
html.a11y-fs .navbar-expand-lg .navbar-collapse { min-width: 0; }
html.a11y-fs .navbar-expand-lg .navbar-nav { flex-wrap: wrap; justify-content: flex-end; }
html.a11y-fs img, html.a11y-fs video, html.a11y-fs canvas { max-width: 100%; }

/* =============================================================================
   2) Alto contraste (claro / oscuro). Texto normal >= 4.5:1 (en realidad >= 7:1)
   ========================================================================== */
html.a11y-hc-light { --a11y-hc-bg: #ffffff; --a11y-hc-fg: #000000; --a11y-hc-link: #0000cc; --a11y-hc-bd: #000000; --a11y-hc-focus: #b30000; color-scheme: light; }
html.a11y-hc-dark  { --a11y-hc-bg: #000000; --a11y-hc-fg: #ffffff; --a11y-hc-link: #ffe600; --a11y-hc-bd: #ffffff; --a11y-hc-focus: #00e5ff; color-scheme: dark; }

html[class*="a11y-hc-"], html[class*="a11y-hc-"] body {
  background: var(--a11y-hc-bg) !important; color: var(--a11y-hc-fg) !important;
}
html[class*="a11y-hc-"] body *:not(.a11y-backdrop):not(.a11y-fab):not(.a11y-fab *) {
  background-color: var(--a11y-hc-bg) !important;
  background-image: none !important;
  color: var(--a11y-hc-fg) !important;
  border-color: var(--a11y-hc-bd) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
}
html[class*="a11y-hc-"] body a,
html[class*="a11y-hc-"] body a * { color: var(--a11y-hc-link) !important; text-decoration: underline !important; }
html[class*="a11y-hc-"] body .btn,
html[class*="a11y-hc-"] body button,
html[class*="a11y-hc-"] body input,
html[class*="a11y-hc-"] body select,
html[class*="a11y-hc-"] body textarea { border: 2px solid var(--a11y-hc-bd) !important; }
html[class*="a11y-hc-"] body ::placeholder { color: var(--a11y-hc-fg) !important; opacity: .85 !important; }
html[class*="a11y-hc-"] body :focus-visible { outline: 3px solid var(--a11y-hc-focus) !important; outline-offset: 2px !important; }
html[class*="a11y-hc-"] .modal-backdrop { background-color: #000 !important; opacity: .85 !important; }
html[class*="a11y-hc-"] body hr { border-top: 2px solid var(--a11y-hc-bd) !important; opacity: 1 !important; }
html[class*="a11y-hc-"] body table, html[class*="a11y-hc-"] body th, html[class*="a11y-hc-"] body td { border: 1px solid var(--a11y-hc-bd) !important; }
/* gráficos (canvas) pensados para fondo oscuro: se invierten en el modo claro */
html.a11y-hc-light canvas { filter: invert(1) hue-rotate(180deg); background: #fff !important; }
html.a11y-hc-dark canvas { background: #000 !important; }
/* iconos de fuente: heredan el color de texto del contraste */
html[class*="a11y-hc-"] body [class^="bi-"]::before, html[class*="a11y-hc-"] body .bi::before { color: inherit !important; }
/* el panel conserva su identidad pero sigue siendo legible en ambos modos */
html[class*="a11y-hc-"] .a11y-panel { border: 3px solid var(--a11y-hc-bd) !important; }
html[class*="a11y-hc-"] .a11y-fab { background: var(--a11y-hc-bg) !important; color: var(--a11y-hc-fg) !important; border: 3px solid var(--a11y-hc-bd) !important; }
html[class*="a11y-hc-"] .a11y-btn[aria-pressed="true"] { outline: 3px solid var(--a11y-hc-link); outline-offset: 1px; }

/* =============================================================================
   3) Modos para daltonismo (filtros SVG feColorMatrix inyectados por a11y.js)
   ========================================================================== */
html.a11y-cb-protan { filter: url(#a11y-f-protan); }
html.a11y-cb-deutan { filter: url(#a11y-f-deutan); }
html.a11y-cb-tritan { filter: url(#a11y-f-tritan); }
html.a11y-cb-achro  { filter: url(#a11y-f-achro); }
.a11y-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* =============================================================================
   4) Fuente legible / amigable para dislexia
   ========================================================================== */
html.a11y-font-legible body, html.a11y-font-legible body * {
  font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif !important;
  line-height: 1.7 !important; letter-spacing: .04em !important; word-spacing: .1em !important;
}
html.a11y-font-dislexia body, html.a11y-font-dislexia body * {
  font-family: "Comic Sans MS", "Comic Neue", "Trebuchet MS", Verdana, sans-serif !important;
  line-height: 1.9 !important; letter-spacing: .12em !important; word-spacing: .3em !important;
  text-align: left !important; font-style: normal !important;
}
html[class*="a11y-font-"] body p, html[class*="a11y-font-"] body li { max-width: 75ch; }

/* =============================================================================
   5) Resaltar enlaces
   ========================================================================== */
html.a11y-links body a:not(.a11y-skip) {
  text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important;
  outline: 2px solid currentColor !important; outline-offset: 2px !important; border-radius: 2px;
}

/* =============================================================================
   6) Reducir animaciones (opción del panel + preferencia del sistema)
   ========================================================================== */
html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after {
  animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not(.a11y-motion-ok) *, html:not(.a11y-motion-ok) *::before, html:not(.a11y-motion-ok) *::after {
    animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}

/* =============================================================================
   7) Cursor grande
   ========================================================================== */
html.a11y-cursor, html.a11y-cursor body, html.a11y-cursor body * {
  cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M3 2l7.5 19.5 3.2-8.2 8.2-3.2z' fill='black' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important;
}
html.a11y-cursor a, html.a11y-cursor a *, html.a11y-cursor button, html.a11y-cursor button *, html.a11y-cursor [role="button"],
html.a11y-cursor summary, html.a11y-cursor label, html.a11y-cursor select, html.a11y-cursor input[type="submit"],
html.a11y-cursor input[type="checkbox"], html.a11y-cursor input[type="radio"] {
  cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M3 2l7.5 19.5 3.2-8.2 8.2-3.2z' fill='%23ffd400' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, pointer !important;
}

@media print { .a11y-fab, .a11y-panel, .a11y-backdrop, .a11y-skip { display: none !important; } }