.u-a11y {
--a11y-accent: var(--u-accent, #003d7a);
--a11y-ink: var(--u-ink, #13243a);
--a11y-surface: var(--u-surface, #fff);
--a11y-hairline: var(--u-hairline, #e3e5ea);
--a11y-font: var(--u-font-body, 'Inter', ui-sans-serif, system-ui, sans-serif);
position: fixed;
left: 16px;
bottom: 16px;
z-index: 999999;
font-family: var(--a11y-font);
}
.u-a11y__toggle {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--a11y-accent);
color: #fff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
cursor: pointer;
transition: transform 0.15s ease;
}
.u-a11y__toggle:hover {
transform: scale(1.06);
}
.u-a11y__toggle svg {
width: 28px;
height: 28px;
}
.u-a11y__toggle[aria-expanded='true'] {
outline: 3px solid #ffd60a;
outline-offset: 2px;
}
.u-a11y__panel {
position: absolute;
left: 0;
bottom: 64px;
width: 300px;
max-width: calc(100vw - 32px);
background: var(--a11y-surface);
border: 1px solid var(--a11y-hairline);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
padding: 16px;
max-height: 70vh;
overflow-y: auto;
}
.u-a11y__panel[hidden] {
display: none;
}
.u-a11y__title {
margin: 0 0 12px;
padding-right: 28px;
font-size: 16px;
font-weight: 700;
color: var(--a11y-ink);
}
.u-a11y__close {
position: absolute;
top: 12px;
right: 12px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
color: var(--a11y-ink);
cursor: pointer;
}
.u-a11y__close:hover {
background: var(--a11y-hairline);
}
.u-a11y__close svg {
width: 16px;
height: 16px;
}
.u-a11y__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.u-a11y__btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px 6px;
border: 1px solid var(--a11y-hairline);
border-radius: 8px;
background: var(--a11y-surface);
color: var(--a11y-ink);
font-family: inherit;
font-size: 12px;
line-height: 1.2;
text-align: center;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.u-a11y__btn:hover {
border-color: var(--a11y-accent);
}
.u-a11y__btn svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.u-a11y__btn-icon {
display: flex;
align-items: center;
justify-content: center;
height: 22px;
font-weight: 700;
font-size: 15px;
}
.u-a11y__btn[aria-pressed='true'] {
background: var(--a11y-accent);
border-color: var(--a11y-accent);
color: #fff;
}
.u-a11y__reset {
grid-column: 1 / -1;
margin-top: 4px;
background: transparent;
border-style: dashed;
}  html.u-a11y-grayscale {
filter: grayscale(100%);
} html.u-a11y-contraste-alto,
html.u-a11y-contraste-alto body {
background: #000 !important;
}
html.u-a11y-contraste-alto body * {
background-color: transparent !important;
color: #fff !important;
border-color: #ffd60a !important;
box-shadow: none !important;
text-shadow: none !important;
}
html.u-a11y-contraste-alto a,
html.u-a11y-contraste-alto a * {
color: #ffd60a !important;
text-decoration: underline !important;
}
html.u-a11y-contraste-alto button,
html.u-a11y-contraste-alto input,
html.u-a11y-contraste-alto select,
html.u-a11y-contraste-alto textarea {
border: 2px solid #ffd60a !important;
}
html.u-a11y-contraste-alto .u-a11y__panel {
background: #000 !important;
}
html.u-a11y-contraste-alto .u-a11y__btn[aria-pressed='true'] {
background: #ffd60a !important;
color: #000 !important;
} html.u-a11y-contraste-negativo {
filter: invert(100%) hue-rotate(180deg);
} html.u-a11y-contraste-negativo.u-a11y-grayscale {
filter: invert(100%) hue-rotate(180deg) grayscale(100%);
} html.u-a11y-fundo-claro,
html.u-a11y-fundo-claro body {
background: #fffef8 !important;
}
html.u-a11y-fundo-claro body *:not(.u-a11y, .u-a11y *) {
background-color: transparent !important;
background-image: none !important;
color: #10202f !important;
border-color: #10202f !important;
box-shadow: none !important;
}
html.u-a11y-fundo-claro a,
html.u-a11y-fundo-claro a * {
color: #003d7a !important;
text-decoration: underline !important;
} html.u-a11y-legible body,
html.u-a11y-legible body *:not(.u-a11y, .u-a11y *) {
font-family: Verdana, Arial, 'Segoe UI', Roboto, Helvetica, sans-serif !important;
letter-spacing: 0.02em !important;
line-height: 1.6 !important;
}
@media (max-width: 480px) {
.u-a11y {
left: 12px;
bottom: 12px;
}
.u-a11y__panel {
width: 264px;
}
}