:root {
    --a11y-accent: #5b3a8e;
    --a11y-accent-contrast: #ffffff;
    --a11y-panel-bg: #ffffff;
    --a11y-panel-text: #1a1a1a;
    --a11y-panel-border: #5b3a8e;
}
#a11y-toggle {
    position: fixed;
    bottom: 16px;
    z-index: 2147483000;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--a11y-accent);
    color: var(--a11y-accent-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#a11y-toggle:hover { filter: brightness(1.1); }
#a11y-tab {
    position: fixed;
    right: 16px;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 6px;
    border: 2px solid var(--a11y-accent);
    border-top: none;
    border-radius: 0 0 10px 10px;
    background: var(--a11y-accent);
    color: var(--a11y-accent-contrast);
    font: medium system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0,0,0,.25);
}
#a11y-tab span { font-size: .875em; line-height: 1.2; }
#a11y-tab svg { width: 18px; height: 18px; flex: none; }
#a11y-tab:hover { filter: brightness(1.1); }
#a11y-tab:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
#a11y-tab[aria-expanded="true"] { border-radius: 0; box-shadow: none; }
@media (max-width: 480px) { #a11y-tab span { display: none; } }
#a11y-toggle:focus-visible,
#a11y-panel a:focus-visible,
#a11y-panel button:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
}
#a11y-panel {
    position: fixed;
    bottom: 72px;
    z-index: 2147483000;
    width: 16.5em;
    max-width: calc(100vw - 32px);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--a11y-panel-bg);
    color: var(--a11y-panel-text);
    border: 2px solid var(--a11y-panel-border);
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    display: none;
    font-size: medium;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
#a11y-panel.open { display: block; }
#a11y-panel h2 {
    font-size: 1em;
    margin: 0 0 8px;
    text-align: center;
}
#a11y-panel hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 8px 0;
}
.a11y-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-radius: 6px;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-size: .875em;
    color: inherit;
}
.a11y-row:hover { background: rgba(91,58,142,.08); }
.a11y-row[aria-pressed="true"] { background: rgba(91,58,142,.15); }
.a11y-row[aria-pressed="true"] span::after { content: " \2713"; color: var(--a11y-accent); }
.a11y-row svg { flex: none; width: 18px; height: 18px; }
.a11y-row span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.a11y-textsize {
    font-size: .875em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px;
}
.a11y-textsize button {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--a11y-panel-border);
    background: #fff;
    cursor: pointer;
    font-size: 1em;
    line-height: 1;
}

/* El filtro NO se pone en un antepasado de la cabecera (como body):
   eso convertiría a ese antepasado en containing block de cualquier
   descendiente position:fixed suyo (tu nav.navbar-fixed-top incluido),
   y dejaría de quedarse fijo al hacer scroll. Se aplica directamente
   sobre la propia barra fija (no rompe su propia posición, solo la de
   hijos fijos que ELLA pudiera tener dentro) y, por separado, sobre el
   resto del contenido. */
html.a11y-grayscale .navbar-fixed-top,
html.a11y-grayscale #contenido_principal,
html.a11y-grayscale #pie {
    filter: grayscale(100%);
}
html.a11y-contrast, html.a11y-contrast *,
html.a11y-contrast *::before, html.a11y-contrast *::after {
    background-color: #000 !important;
    color: #fff !important;
}
html.a11y-contrast a:not(#a11y-panel a):not(#a11y-toggle),
html.a11y-contrast a:not(#a11y-panel a):not(#a11y-toggle)::before,
html.a11y-contrast a:not(#a11y-panel a):not(#a11y-toggle)::after {
    color: #ffdd33 !important;
}
html.a11y-contrast #a11y-panel,
html.a11y-contrast #a11y-panel * { color: inherit !important; }
html.a11y-lightbg body { background: #fff !important; color: #000 !important; }
html.a11y-lightbg *:not(#a11y-panel):not(#a11y-panel *),
html.a11y-lightbg *:not(#a11y-panel)::before,
html.a11y-lightbg *:not(#a11y-panel)::after {
    background-color: #fff !important;
    color: #000 !important;
}
html.a11y-lightbg #logo,
html.a11y-lightbg #logo *,
html.a11y-lightbg #menu #opObra #logo a {
    background-color: #2b2b2b !important;
}
html.a11y-underline a { text-decoration: underline !important; }
html.a11y-comfy p, html.a11y-comfy li, html.a11y-comfy h1,
html.a11y-comfy h2, html.a11y-comfy h3 {
    max-width: 70ch;
    line-height: 1.7;
}

/* Hace que las imágenes resalten sobre el fondo negro en alto contraste */
html.a11y-contrast img {
    background-color: #ffffff !important;
    border: 2px solid #ffdd33 !important; /* Borde amarillo brillante */
    padding: 0.3em;
    margin:0.2em !important;
}
/* 1. Forzar un fondo negro sólido y legible para la zona del pie en alto contraste */
html.a11y-contrast #pie {
    background-color: #000000 !important;
    background-image: none !important; /* Opcional: elimina la imagen de fondo si interfiere, o déjala si quieres que se mantenga */
    border-top: 2px solid #ffdd33 !important; /* Una línea divisoria amarilla para delimitar el pie */
    color: #ffffff !important;
}

/* 2. Asegurar que los enlaces y textos dentro del pie sean amarillo brillante o blanco */
html.a11y-contrast #pie a {
    color: #ffdd33 !important;
    text-decoration: underline !important;
}

/* 3. Ajuste perfecto y limpio para las flechas (botup y botdown) dentro del pie */
html.a11y-contrast #pie img[src*="bot"] {
    filter: invert(1) brightness(2) !important;
    background-color: #000000 !important;
}
/* Ocultamos el GIF que no contrasta bien en alto contraste */

html.a11y-contrast a[href="#PagFin"] img[src*="botdown.gif"] {
    display: none !important;
}


html.a11y-contrast a[href="#PagFin"]::after {
    content: " ▼ [Abajo]" !important;
    font-size: 12px !important;
    padding: 2px 6px !important;
    border: 1px solid #ffdd33 !important;
    color: #ffdd33 !important;
    font-weight: bold;
}