/**
 * Accesibilidad — hoja de estilos del componente. ARCHIVO OBLIGATORIO.
 *
 * Acá viven las reglas de PÁGINA (alto contraste, modo oscuro, fuente para
 * dislexia, espaciado, resaltado de enlaces, foco visible) y las variables de
 * las que sale todo color y tipografía, incluidos los del panel, que está en
 * Shadow DOM y las hereda.
 *
 * PARA ADAPTARLO A OTRA INSTITUCIÓN no se edita este archivo ni el JS: se
 * redefine lo que se quiera en una hoja propia cargada DESPUÉS. Ver el README
 * y ejemplos/tema-personalizado.css.
 *
 * Criterios WCAG 2.1 AA de referencia:
 *   1.4.3 Contraste mínimo, 1.4.4 Redimensionar texto,
 *   1.4.12 Espaciado de texto, 2.4.1 Evitar bloques, 2.4.7 Foco visible.
 */

/* -------------------------------------------------------------------------- */
/* Paleta e identidad. Los valores de fábrica son los del MAG / SENASA.        */
/*                                                                            */
/* Van en :root y no solo en el custom element porque las usan las dos capas:  */
/* el panel (que hereda a través del Shadow DOM) y las reglas de página, que   */
/* se aplican a <html> y a <body>, fuera del alcance del componente.           */
/* -------------------------------------------------------------------------- */
:root {
  /* Tintas y superficies */
  --a11y-ink: #161410;          /* texto principal del panel */
  --a11y-ink-2: #4a453c;        /* texto secundario, ayudas */
  --a11y-ink-rgb: 22, 20, 16;   /* el mismo tono, para componer sombras */
  --a11y-paper: #f3efe4;        /* fondo del panel */
  --a11y-paper-2: #ece6d6;      /* fondo al pasar el puntero */
  --a11y-campo: #fff;           /* fondo de botones y campos */

  /* Color de marca */
  --a11y-leaf: #1a4d2e;
  --a11y-leaf-hover: #143d24;
  --a11y-leaf-rgb: 26, 77, 46;
  --a11y-sobre-leaf: #fff;      /* texto encima del color de marca */
  --a11y-harvest: #8a5a12;      /* rótulos de sección */
  --a11y-focus: #c45c00;        /* anillo de foco */
  --a11y-focus-rgb: 196, 92, 0; /* el mismo tono, para el halo del foco */
  --a11y-marcador: #ffe566;     /* resaltador de enlaces */

  /* Líneas y veladuras */
  --a11y-line: #cfc6b3;
  --a11y-line-2: #b9b09c;
  --a11y-velo: rgba(255, 255, 255, 0.45);   /* encabezado del panel */
  --a11y-brillo: rgba(255, 255, 255, 0.08); /* filo interior del botón */

  /* Tipografía */
  --a11y-fuente: 'Segoe UI', Candara, Calibri, sans-serif;
  --a11y-fuente-titulo: Palatino, 'Palatino Linotype', 'Book Antiqua', serif;
}

/* NO se tokenizan los colores del alto contraste ni del modo oscuro forzado.
   Ese amarillo sobre negro, y el cian de los enlaces visitados, no son decisiones
   de marca: son los valores que hacen que el modo cumpla. Volverlos configurables
   invita a que alguien los ajuste «para que combine» y rompa justamente aquello
   por lo que la persona encendió el modo. */

/* -------------------------------------------------------------------------- */
/* Skip link: visible solo al recibir foco (2.4.1 Bypass Blocks)              */
/* -------------------------------------------------------------------------- */
.a11y-skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 2147483646;
  padding: 0.65rem 1.1rem;
  background: var(--a11y-leaf);
  color: var(--a11y-sobre-leaf);
  font: 600 1rem/1.3 var(--a11y-fuente);
  text-decoration: none;
  border-radius: 0.25rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  transform: translateY(-170%);
  transition: transform 0.15s ease;
}

.a11y-skip-link:focus,
.a11y-skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--a11y-focus);
  outline-offset: 3px;
  color: var(--a11y-sobre-leaf);
}

@media (prefers-reduced-motion: reduce) {
  .a11y-skip-link {
    transition: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Escala de fuente en el documento (1.4.4 Resize Text, hasta 200 %)          */
/* Funciona de forma fiable cuando el sitio usa rem/em.                       */
/* -------------------------------------------------------------------------- */
html.a11y-scale-on {
  /* --a11y-font-scale la escribe el script sobre <html> cada vez que el usuario
     cambia el tamaño. NO la fije en un tema: quedaría clavada y los botones de
     agrandar y achicar dejarían de hacer efecto. */
  font-size: calc(100% * var(--a11y-font-scale, 1)) !important;
}

/* -------------------------------------------------------------------------- */
/* Alto contraste (1.4.3 Contraste mínimo) — el contraste gana al modo oscuro */
/* -------------------------------------------------------------------------- */
html.a11y-contrast {
  color-scheme: dark;
  background: #000 !important;
}

html.a11y-contrast body {
  background: #000 !important;
  color: #fff !important;
}

html.a11y-contrast *:not(img):not(svg):not(video):not(canvas):not(accessibility-toolbar) {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html.a11y-contrast a,
html.a11y-contrast a:link {
  color: #ffff00 !important;
  text-decoration: underline !important;
}

html.a11y-contrast a:visited {
  color: #00e5e5 !important;
}

html.a11y-contrast a:hover,
html.a11y-contrast a:focus {
  color: #fff !important;
  background: #0000aa !important;
}

html.a11y-contrast img,
html.a11y-contrast video,
html.a11y-contrast svg {
  filter: contrast(1.15);
}

html.a11y-contrast :focus-visible {
  outline: 3px solid #ffff00 !important;
  outline-offset: 3px !important;
}

/* -------------------------------------------------------------------------- */
/* Modo oscuro (1.4.3 / preferencia de visualización)                         */
/* -------------------------------------------------------------------------- */
html.a11y-dark:not(.a11y-contrast) {
  color-scheme: dark;
  background: #141414 !important;
}

html.a11y-dark:not(.a11y-contrast) body {
  background: #141414 !important;
  color: #f3f3f3 !important;
}

html.a11y-dark:not(.a11y-contrast) *:not(img):not(svg):not(video):not(canvas):not(accessibility-toolbar) {
  background-color: #141414 !important;
  color: #f3f3f3 !important;
  border-color: #6a6a6a !important;
  box-shadow: none !important;
}

html.a11y-dark:not(.a11y-contrast) a,
html.a11y-dark:not(.a11y-contrast) a:link {
  color: #8ec8ff !important;
}

html.a11y-dark:not(.a11y-contrast) a:visited {
  color: #c5a8ff !important;
}

html.a11y-dark:not(.a11y-contrast) img {
  opacity: 0.92;
}

/* -------------------------------------------------------------------------- */
/* Fuente amigable para dislexia (1.4.8 / 1.4.12)                             */
/* OpenDyslexic se usa si está instalada o en ./fonts/ junto al CSS.          */
/* -------------------------------------------------------------------------- */
@font-face {
  font-family: "OpenDyslexic";
  src:
    local("OpenDyslexic"),
    local("OpenDyslexic Regular"),
    url("fonts/OpenDyslexic-Regular.woff2") format("woff2"),
    url("fonts/OpenDyslexic-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html.a11y-dyslexia,
html.a11y-dyslexia body,
html.a11y-dyslexia *:not(script):not(style):not(svg):not(accessibility-toolbar) {
  font-family: "OpenDyslexic", Verdana, Tahoma, "Comic Sans MS", sans-serif !important;
  letter-spacing: 0.08em !important;
  word-spacing: 0.16em !important;
  line-height: 1.7 !important;
  font-variant-ligatures: none;
}

/* -------------------------------------------------------------------------- */
/* Lectura facilitada: espaciado de texto (1.4.12 Text Spacing)               */
/* -------------------------------------------------------------------------- */
/* Espaciado ENTRE LETRAS Y PALABRAS. El interlineado se separó a su propio control:
   antes este botón hacía las dos cosas, y quien solo quería más aire entre líneas se
   llevaba también un cambio de tracking que no había pedido. Un control, un efecto.

   Los valores son los que nombra WCAG 1.4.12: 0.12em entre letras y 0.16em entre
   palabras. El anterior 0.04em se quedaba corto frente a ese criterio. */
html.a11y-spacing body,
html.a11y-spacing p,
html.a11y-spacing li,
html.a11y-spacing td,
html.a11y-spacing th,
html.a11y-spacing label,
html.a11y-spacing h1,
html.a11y-spacing h2,
html.a11y-spacing h3,
html.a11y-spacing h4,
html.a11y-spacing h5,
html.a11y-spacing h6 {
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

/* Interlineado al doble, en su propio control. */
html.a11y-line-height body,
html.a11y-line-height p,
html.a11y-line-height li,
html.a11y-line-height td,
html.a11y-line-height th,
html.a11y-line-height label,
html.a11y-line-height h1,
html.a11y-line-height h2,
html.a11y-line-height h3,
html.a11y-line-height h4,
html.a11y-line-height h5,
html.a11y-line-height h6 {
  line-height: 2 !important;
}
html.a11y-line-height p,
html.a11y-line-height li {
  margin-bottom: 1.15em !important;
}



/* -------------------------------------------------------------------------- */
/* Resaltado de enlaces (1.4.1 Uso del color + 2.4.4 Propósito de los enlaces)*/
/* -------------------------------------------------------------------------- */
html.a11y-highlight-links a[href] {
  text-decoration: underline !important;
  text-decoration-thickness: 0.14em !important;
  text-underline-offset: 0.18em !important;
  background-image: linear-gradient(transparent 70%, var(--a11y-marcador) 70%) !important;
  outline: 2px solid var(--a11y-leaf);
  outline-offset: 2px;
  border-radius: 2px;
}

html.a11y-contrast.a11y-highlight-links a[href] {
  background-image: none !important;
  background-color: #0000aa !important;
  outline-color: #ffff00;
}

/* -------------------------------------------------------------------------- */
/* Foco reforzado (2.4.7 Focus Visible)                                       */
/* -------------------------------------------------------------------------- */
html.a11y-focus *:focus {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 3px !important;
}

html.a11y-focus *:focus:not(:focus-visible) {
  outline: none !important;
}

html.a11y-focus *:focus-visible {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(var(--a11y-focus-rgb), 0.28) !important;
}

html.a11y-contrast.a11y-focus *:focus-visible {
  outline-color: #ffff00 !important;
  box-shadow: 0 0 0 6px rgba(255, 255, 0, 0.35) !important;
}

/* Ganchos opcionales para personalizar el widget encapsulado */
/* -------------------------------------------------------------------------- */
/* Quitar el justificado                                                      */
/*                                                                            */
/* El texto justificado reparte el sobrante de cada renglón entre las palabras */
/* y abre «ríos» de espacio en blanco verticales. Para quien tiene dislexia    */
/* esos ríos compiten con el renglón y hacen perder la línea.                  */
/*                                                                            */
/* Alinea a la IZQUIERDA, no a la derecha. Las barras comerciales ofrecen      */
/* «alinear a la derecha» porque sirven sitios en árabe y hebreo; en español   */
/* eso mueve el punto de retorno del ojo a un lugar que no espera y empeora la */
/* lectura en vez de ayudarla.                                                 */
/*                                                                            */
/* Se excluyen las celdas de tabla con números: una columna de cifras alineada */
/* a la derecha se lee comparando unidades, y forzarla a la izquierda destruye */
/* esa lectura. Se detectan por la clase que suele marcarlas.                  */
/* -------------------------------------------------------------------------- */
html.a11y-sin-justificar body,
html.a11y-sin-justificar p,
html.a11y-sin-justificar li,
html.a11y-sin-justificar dd,
html.a11y-sin-justificar div,
html.a11y-sin-justificar blockquote {
  text-align: left !important;
  text-justify: none !important;
  hyphens: manual !important;
}

/* -------------------------------------------------------------------------- */
/* Ocultar imágenes                                                           */
/*                                                                            */
/* El JS quita el src y deja el alt visible; acá se le da forma al hueco para  */
/* que se lea como un texto y no como una imagen rota. Las decorativas         */
/* (alt vacío) desaparecen: no aportan nada y dejar su marco sería ruido.      */
/* -------------------------------------------------------------------------- */
html.a11y-sin-imagenes img[data-a11y-src] {
  min-width: 8rem;
  min-height: 2.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px dashed currentColor;
  border-radius: 0.25rem;
  font-style: italic;
  font-size: 0.9em;
  object-fit: contain;
}
html.a11y-sin-imagenes img[data-a11y-src][alt=""],
html.a11y-sin-imagenes img[data-a11y-src]:not([alt]) {
  display: none !important;
}
/* Las imágenes de fondo son decoración por definición: no llevan alt, así que
   no hay nada que preservar. */
html.a11y-sin-imagenes *:not(accessibility-toolbar) {
  background-image: none !important;
}

/* -------------------------------------------------------------------------- */
/* Saturación reducida                                                        */
/*                                                                            */
/* Para sensibilidad visual y sobrecarga sensorial: baja la intensidad del     */
/* color sin llegar a escala de grises, que borraría los estados que el sitio  */
/* codifica en color.                                                          */
/*                                                                            */
/* El filtro va sobre los hijos directos de <body> y NO sobre <html> o <body>: */
/* un filter crea un contexto de apilamiento, y eso convierte cualquier        */
/* position: fixed de adentro en relativo a ese elemento. Aplicado arriba, el  */
/* botón flotante se despegaría de la ventana y se iría con el desplazamiento. */
/* Se excluye el propio widget para que sus colores sigan siendo fiables.      */
/* -------------------------------------------------------------------------- */
html.a11y-saturacion-baja body > *:not(accessibility-toolbar) {
  filter: saturate(0.5);
}

/* -------------------------------------------------------------------------- */
/* Cursor grande                                                              */
/*                                                                            */
/* Flecha de 48 px, negra con contorno blanco, para que se distinga sobre      */
/* fondos claros y oscuros. Va como data-URI para no agregar una petición, y   */
/* siempre con un respaldo de palabra clave por si el SVG no se puede usar.    */
/* -------------------------------------------------------------------------- */
html.a11y-cursor-grande,
html.a11y-cursor-grande body,
html.a11y-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 d='M5 2l14 10-6.2 1.1 3.4 6.6-2.9 1.5-3.4-6.7L5 18z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/></svg>") 4 2, auto !important;
}
html.a11y-cursor-grande a,
html.a11y-cursor-grande button,
html.a11y-cursor-grande [role="button"],
html.a11y-cursor-grande label,
html.a11y-cursor-grande summary,
html.a11y-cursor-grande select {
  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 d='M9 11V4.5a1.5 1.5 0 013 0V11m0-1.5a1.5 1.5 0 013 0V12m0-1a1.5 1.5 0 013 0v5a4 4 0 01-4 4h-3a4 4 0 01-3.4-1.9L6 14.5a1.5 1.5 0 012.4-1.8L9 13.5' fill='%23000' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/></svg>") 8 2, pointer !important;
}
/* Escribir en un campo necesita ver dónde cae el punto de inserción: ahí la
   flecha grande estorba más de lo que ayuda. */
html.a11y-cursor-grande input,
html.a11y-cursor-grande textarea {
  cursor: text !important;
}

/* -------------------------------------------------------------------------- */
/* Detener animaciones — WCAG 2.2.2 «Pausar, detener, ocultar» (nivel A)       */
/*                                                                            */
/* Para quien tiene trastornos vestibulares o epilepsia fotosensible, un       */
/* carrusel que gira solo no es una molestia estética: marea o desencadena     */
/* una crisis. Y no siempre hay un botón de pausa en el sitio.                 */
/*                                                                            */
/* Se usa animation-play-state: paused y no animation: none porque parar deja  */
/* el fotograma actual a la vista, mientras que quitarla devuelve el elemento  */
/* a su posición inicial — y ahí un contenido que se anima para APARECER se    */
/* quedaría invisible. También se acortan las duraciones a un valor mínimo     */
/* distinto de cero: en 0s el navegador no dispara animationend y un carrusel  */
/* que espera ese evento para avanzar se cuelga en blanco.                     */
/* -------------------------------------------------------------------------- */
html.a11y-sin-animacion *,
html.a11y-sin-animacion *::before,
html.a11y-sin-animacion *::after {
  animation-play-state: paused !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* El propio panel conserva sus transiciones: son de 150 ms, no producen
   movimiento sostenido y sin ellas los cambios de estado se vuelven bruscos.
   Si la persona además tiene movimiento reducido en el sistema, la regla de
   prefers-reduced-motion de más arriba se las quita igual. */
html.a11y-sin-animacion accessibility-toolbar,
html.a11y-sin-animacion accessibility-toolbar * {
  animation-play-state: running !important;
  transition-duration: revert !important;
}

/* -------------------------------------------------------------------------- */
/* Modo de contraste del sistema (forced-colors)                              */
/*                                                                            */
/* Windows tiene su propio modo de contraste alto, y quien lo usa lo tiene     */
/* encendido en TODO el equipo. En ese modo el navegador reemplaza los colores */
/* por los que la persona eligió, y un componente que insiste con los suyos    */
/* mediante !important pelea contra esa decisión — que es justamente la que    */
/* esta barra dice defender.                                                   */
/*                                                                            */
/* Por eso acá el componente se aparta: cede los colores al sistema y apaga    */
/* sus propios modos de contraste y oscuro, que en ese contexto solo estorban. */
/* Las palabras clave (CanvasText, LinkText, ButtonText…) son las que el       */
/* navegador traduce a la paleta configurada por el usuario.                   */
/* -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .a11y-skip-link {
    background: ButtonFace;
    color: ButtonText;
    border: 2px solid ButtonText;
    box-shadow: none;
  }
  .a11y-skip-link:focus,
  .a11y-skip-link:focus-visible {
    outline: 3px solid Highlight;
    color: ButtonText;
  }

  /* Los modos propios se retiran: el del sistema ya está haciendo el trabajo,
     y superponerlos da resultados impredecibles. forced-color-adjust: auto
     devuelve el control al navegador. */
  html.a11y-contrast *,
  html.a11y-dark * {
    forced-color-adjust: auto !important;
    background-color: Canvas !important;
    color: CanvasText !important;
    border-color: CanvasText !important;
  }
  html.a11y-contrast a,
  html.a11y-contrast a:link,
  html.a11y-dark a,
  html.a11y-dark a:link {
    color: LinkText !important;
  }

  /* El resaltado de enlaces se conserva, pero con subrayado en vez de fondo:
     en forced-colors los fondos se descartan y el resalte desaparecería. */
  html.a11y-highlight-links a[href] {
    background-image: none !important;
    text-decoration: underline !important;
    outline: 2px solid LinkText;
  }

  html.a11y-focus *:focus-visible {
    outline: 3px solid Highlight !important;
    box-shadow: none !important;
  }

  /* La saturación no tiene sentido cuando el sistema ya impone su paleta, y el
     filtro encima de colores forzados da resultados impredecibles. */
  html.a11y-saturacion-baja body > *:not(accessibility-toolbar) {
    filter: none !important;
  }
  html.a11y-sin-imagenes img[data-a11y-src] {
    border-color: CanvasText;
  }
}

accessibility-toolbar::part(launcher) {
  /* Ejemplo: bottom: 2rem; */
}

accessibility-toolbar::part(panel) {
  /* Ejemplo: max-width: 22rem; */
}