/* static/biblioteca/css/accesibilidad.css
   Lo que hace cada opción del panel de accesibilidad (§8.2 del diseño). Cada opción activa es una clase «acc-<opción>» en <html>, que pone
   js/accesibilidad_nucleo.js desde el <head>; el tamaño del texto es el font-size de <html>. Bootstrap y estos estilos usan rem, así que
   cambiar ese tamaño escala textos, espacios y componentes. */

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

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

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

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

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

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

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

/* ===============================
   ALTO CONTRASTE: fondo negro, texto blanco y enlaces amarillos
   =============================== */
html.acc-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-blanco: #000000;
    --color-suave: #000000;
    --color-fondo: #000000;
}

html.acc-contraste body,
html.acc-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;
}

/* Fuera los fondos decorativos; se dejan los que son un icono (la flecha del select, la casilla marcada, la X de cerrar). */
html.acc-contraste body *:where(:not(img, svg, .btn-close, .form-select, .form-check-input)) {
    background-image: none !important;
}

html.acc-contraste .btn-close {
    filter: invert(1);
}

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

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

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

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

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

html.acc-contraste .btn:hover *,
html.acc-contraste .btn:focus * {
    background-color: transparent !important;
}

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

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

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

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

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

/* ===============================
   FUENTE LEGIBLE: sans-serif de trazo uniforme, de las que trae el sistema
   =============================== */
html.acc-fuente body,
html.acc-fuente body *:not(code, pre, kbd, samp) {
    font-family: Verdana, Tahoma, Arial, "Segoe UI", sans-serif !important;
}

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

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

/* ===============================
   MOVIMIENTO REDUCIDO (también si el sistema operativo lo pide)
   =============================== */
html.acc-movimiento *,
html.acc-movimiento *::before,
html.acc-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: una flecha y una mano de 48 px, dibujadas aquí mismo
   =============================== */
html.acc-cursor,
html.acc-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='M4 2.5v17l4.6-4.3 2.9 6.3 2.6-1.2-2.9-6.2h6.3z' fill='black' stroke='white' stroke-width='1.4' stroke-linejoin='round'/></svg>") 8 4, auto !important;
}

html.acc-cursor a,
html.acc-cursor a *,
html.acc-cursor button,
html.acc-cursor button *,
html.acc-cursor [role="button"],
html.acc-cursor label,
html.acc-cursor select,
html.acc-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='M8.5 11V4a1.5 1.5 0 0 1 3 0v6l.6-.2a1.5 1.5 0 0 1 2 1l.5-.1a1.5 1.5 0 0 1 1.9 1.1l.4-.1a1.5 1.5 0 0 1 1.8 1.4V17c0 2.8-2.1 5-5 5h-1.6c-1.6 0-2.8-.7-3.7-2L4.3 15a1.5 1.5 0 0 1 2.3-1.9z' fill='white' stroke='black' stroke-width='1.2' stroke-linejoin='round'/></svg>") 16 4, pointer !important;
}

/* ===============================
   IMPRESIÓN
   =============================== */
@media print {
    .menu-accesibilidad,
    .saltar-contenido {
        display: none !important;
    }
}