/* css/accesibilidad.css
   Lo que hacen las opciones del panel de accesibilidad del encabezado. Cada opción es una clase en <html>
   (la pone js/accesibilidad_core.js desde lo guardado en el navegador); el tamaño del texto es el font-size de <html>.
   Todo el sitio usa rem, así que cambiar ese tamaño escala los textos, los espacios y los componentes de Bootstrap. */

/* ===============================
   SALTAR AL CONTENIDO (se ve solo al enfocarlo con el teclado)
   =============================== */
.saltar-contenido {
    position: absolute;
    left: .5rem;
    top: -4rem;
    z-index: 2000;
    padding: .6rem 1rem;
    background: #ffffff;
    color: var(--color-principal-oscuro);
    font-weight: 700;
    border: 3px solid var(--color-terciario);
    border-radius: .4rem;
}

.saltar-contenido:focus {
    top: .5rem;
}

/* ===============================
   FOCO VISIBLE (tabulador): un contorno que se vea sobre fondo claro y sobre el encabezado azul
   =============================== */
:focus-visible {
    outline: 3px solid var(--color-principal-oscuro);
    outline-offset: 2px;
}

.encabezado :focus-visible,
.navbar :focus-visible,
.footer :focus-visible {
    outline-color: var(--color-terciario-claro);
}

/* ===============================
   PANEL
   =============================== */
.a11y-panel {
    min-width: 19rem;
    max-width: calc(100vw - 1rem);
    background: #ffffff;
    color: var(--color-texto);
}

.a11y-panel .form-check-label {
    font-weight: 500;
}

.a11y-panel [data-a11y-valor] {
    min-width: 4.5rem;
    border-color: var(--color-principal);
    color: var(--color-texto);
    font-variant-numeric: tabular-nums;
}

/* ===============================
   ALTO CONTRASTE: fondo negro, texto blanco, enlaces amarillos (contraste mayor que 15:1)
   =============================== */
html.a11y-contraste {
    color-scheme: dark;
    --bs-body-bg: #000000;
    --bs-body-color: #ffffff;
    --bs-link-color: #ffff00;
    --bs-link-hover-color: #ffffff;
    --bs-border-color: #ffffff;
    --color-texto: #ffffff;
    --color-fondo: #000000;
    --color-suave: #000000;
}

html.a11y-contraste body,
html.a11y-contraste body *:where(:not(img, svg, video, canvas, iframe, picture, source)) {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Los fondos decorativos se quitan; los que son un icono (la flecha de un select, la casilla marcada, el menú del celular) se dejan. */
html.a11y-contraste body *:where(:not(img, svg, .navbar-toggler-icon, .btn-close, .form-select, .form-check-input)) {
    background-image: none !important;
}

html.a11y-contraste .navbar-toggler-icon,
html.a11y-contraste .btn-close {
    filter: invert(1);
}

html.a11y-contraste .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

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

html.a11y-contraste a:hover,
html.a11y-contraste a:focus {
    color: #ffffff !important;
    outline: 3px solid #ffff00;
}

html.a11y-contraste .btn,
html.a11y-contraste .form-control,
html.a11y-contraste .form-select,
html.a11y-contraste .dropdown-menu,
html.a11y-contraste .card,
html.a11y-contraste .alert,
html.a11y-contraste .table,
html.a11y-contraste .list-group-item {
    border: 2px solid #ffffff !important;
}

html.a11y-contraste .btn.btn-link {
    border: 0 !important;
}

html.a11y-contraste .btn:hover,
html.a11y-contraste .btn:focus {
    background-color: #ffff00 !important;
    color: #000000 !important;
}

html.a11y-contraste .btn:hover *,
html.a11y-contraste .btn:focus * {
    background-color: transparent !important;         /* el icono de un botón amarillo no debe llevar su propio recuadro negro */
    color: #000000 !important;
}

html.a11y-contraste :focus-visible {
    outline: 3px solid #ffff00;
    outline-offset: 2px;
}

html.a11y-contraste .form-control::placeholder {
    color: #cccccc !important;
}

html.a11y-contraste .form-check-input:checked {
    background-color: #ffff00 !important;
    border-color: #ffffff !important;
}

html.a11y-contraste .badge {
    border: 1px solid #ffffff !important;
}

/* ===============================
   ENLACES SUBRAYADOS
   =============================== */
html.a11y-subrayado a {
    text-decoration: underline !important;
    text-underline-offset: .2em;
}

/* ===============================
   FUENTE LEGIBLE (sans-serif de trazo uniforme, sin tipos para descargar)
   =============================== */
html.a11y-fuente body,
html.a11y-fuente body *:not(code):not(pre):not(kbd):not(samp) {
    font-family: Verdana, Tahoma, Arial, "Segoe UI", sans-serif !important;
}

/* ===============================
   ESPACIADO DEL TEXTO (los valores mínimos del criterio 1.4.12 de las WCAG)
   =============================== */
html.a11y-espaciado body *:not(.bi):not([class*="bi-"]) {
    line-height: 1.5 !important;
    letter-spacing: .12em !important;
    word-spacing: .16em !important;
}

html.a11y-espaciado p {
    margin-bottom: 2em !important;
}

/* ===============================
   MOVIMIENTO REDUCIDO (también lo pide el sistema operativo con prefers-reduced-motion)
   =============================== */
html.a11y-movimiento *,
html.a11y-movimiento *::before,
html.a11y-movimiento *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===============================
   CURSOR GRANDE
   =============================== */
html.a11y-cursor,
html.a11y-cursor body * {
    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='M3 2l16 9-7 2-3 7z' fill='black' stroke='white' stroke-width='1.5' stroke-linejoin='round'/></svg>") 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 label,
html.a11y-cursor select,
html.a11y-cursor summary {
    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 3a1.5 1.5 0 013 0v7l1-.5a1.5 1.5 0 012 .8l.5-.2a1.5 1.5 0 012 .9l.3-.1a1.5 1.5 0 012 1.1V17c0 3-2 5-5 5h-2c-2 0-3-1-4-2.500L5 14.500a1.500 1.500 0 012.200-2L9 14z' fill='white' stroke='black' stroke-width='1.2' stroke-linejoin='round'/></svg>") 12 3, pointer !important;
}

/* ===============================
   IMPRESIÓN: el panel y la lupa no salen en el papel
   =============================== */
@media print {
    .a11y-menu,
    #busqueda-boton,
    .saltar-contenido {
        display: none !important;
    }
}