/* =========================================================================
   ADIPA - Widget de accesibilidad
   Plugin: local_adipa_accesibilidad
   Paleta oficial:
     --aacc-celeste:   #72CAF7  (primario, trigger)
     --aacc-navy:      #091E42  (texto / activos)
     --aacc-lavender:  #F3F4FF  (fondo panel)
     --aacc-lblue:     #CBE8FF  (botones inactivos)
     --aacc-lpurple:   #DFD5FF  (acento)
     --aacc-white:     #ffffff
   ========================================================================= */

@font-face {
    font-family: 'OpenDyslexic';
    src: url('fonts/opendyslexic.woff2') format('woff2'),
         url('fonts/opendyslexic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Paleta oficial ADIPA */
    --aacc-celeste: #2CB7FF;     /* trigger */
    --aacc-celeste-h: #11a4ef;
    --aacc-morado: #704EFD;      /* primario aula+sitio — header y estados activos */
    --aacc-morado-h: #5a3deb;
    --aacc-navy: #091E42;        /* texto sobre fondos claros */
    --aacc-lavender: #F3F4FF;    /* hover / fondo sutil */
    --aacc-panel-bg: #FAFAFF;
    --aacc-lblue: #CBE8FF;       /* tiles inactivos */
    --aacc-lblue-h: #b6dcf8;
    --aacc-lpurple: #DFD5FF;     /* bordes de grupos */
    --aacc-white: #ffffff;
    --aacc-radius: 10px;
    --aacc-radius-sm: 6px;
    --aacc-shadow: 0 8px 28px rgba(9, 30, 66, 0.18);
    --aacc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --aacc-readablefont: var(--aacc-font);
    --aacc-dyslexicfont: 'OpenDyslexic', var(--aacc-font);
}

/* =========================================================================
   TRIGGER (pill-shape arriba del Zendesk Ayuda)
   ========================================================================= */

.aacc-trigger {
    position: fixed;
    right: 20px;
    /* `bottom` se inyecta inline desde lib.php para que sea configurable */
    z-index: 99998; /* debajo del panel pero arriba del contenido */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Mismo ancho exacto que el botón Ayuda de Zendesk (~121×46). El texto
       "Accesibilidad" (13 chars) entra en ese ancho con padding mínimo +
       letter-spacing ligeramente cerrado, manteniendo 14px bold legible. */
    width: 121px;
    height: 46px;
    padding: 0 6px;
    background-color: var(--aacc-celeste);
    color: var(--aacc-white);
    border: none;
    border-radius: 999px;
    font-family: var(--aacc-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.015em;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--aacc-shadow);
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.25s cubic-bezier(0.34, 1.4, 0.5, 1),
        box-shadow 0.2s ease,
        opacity 0.18s ease,
        visibility 0s linear 0.18s;
    will-change: transform, opacity;
}

/* Mientras el panel está abierto, el trigger se desvanece para no aparecer
   detrás del panel (especialmente cuando el panel cubre menos altura que
   ocupa el trigger). Vuelve con un micro-bounce al cerrar. */
.aacc-trigger[aria-expanded="true"] {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.7);
    pointer-events: none;
    transition:
        opacity 0.16s ease,
        transform 0.18s cubic-bezier(0.4, 0, 1, 1),
        visibility 0s linear 0.18s;
}

.aacc-trigger:hover {
    background-color: var(--aacc-celeste-h);
    color: var(--aacc-white);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(9, 30, 66, 0.28);
    text-decoration: none;
}

.aacc-trigger:focus-visible {
    outline: 3px solid var(--aacc-navy);
    outline-offset: 3px;
}

.aacc-trigger:active {
    transform: translateY(0) scale(0.96);
    transition-duration: 0.08s;
}

/* El ícono SVG queda en el DOM por compatibilidad histórica pero NO se muestra
   en el trigger — el mockup oficial del cliente lo quiere sólo con texto. */
.aacc-trigger__icon {
    display: none;
}

.aacc-trigger__label {
    display: inline-block;
}

.aacc-trigger--active {
    background-color: var(--aacc-navy);
    color: var(--aacc-white);
}

.aacc-trigger--active:hover {
    background-color: var(--aacc-navy-h);
    color: var(--aacc-white);
}

/* Pulse animation triggered by JS when the panel opens */
.aacc-trigger--pulse {
    animation: aacc-pulse 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes aacc-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.08); }
    70%  { transform: scale(0.98); }
    100% { transform: scale(1); }
}

.aacc-trigger__label {
    display: inline-block;
}

/* =========================================================================
   PANEL
   ========================================================================= */

.aacc-panel {
    position: fixed;
    right: 20px;
    bottom: 90px;
    width: 420px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 120px);
    z-index: 99999;
    background-color: var(--aacc-white);
    border-radius: 14px;
    box-shadow: var(--aacc-shadow);
    font-family: var(--aacc-font);
    font-size: 15px;
    line-height: 1.4;
    color: var(--aacc-navy);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform-origin: 100% 100%; /* anclado al trigger */
    transform: translateY(18px) scale(0.96);
    /* Cierre: easing material-style, ligeramente más largo que antes para
       que no se sienta brusco. La caja se hunde hacia el trigger. */
    transition:
        opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.30s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.28s ease,
        visibility 0s linear 0.30s;
    will-change: transform, opacity;
}

.aacc-panel.aacc-panel--open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: 0 18px 48px rgba(112, 78, 253, 0.22);
    /* Apertura: un toque más larga, con micro-overshoot */
    transition:
        opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.38s cubic-bezier(0.34, 1.35, 0.5, 1),
        box-shadow 0.32s ease,
        visibility 0s linear 0s;
}

/* Cascada interna: header → secciones, escalonado */
@keyframes aacc-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.aacc-panel--open .aacc-panel__header {
    animation: aacc-rise 0.32s 0.04s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.aacc-panel--open .aacc-panel__body .aacc-section:nth-child(1) {
    animation: aacc-rise 0.34s 0.10s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.aacc-panel--open .aacc-panel__body .aacc-section:nth-child(2) {
    animation: aacc-rise 0.34s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.aacc-panel--open .aacc-panel__body .aacc-section:nth-child(3) {
    animation: aacc-rise 0.34s 0.20s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.aacc-panel--open .aacc-panel__body .aacc-section:nth-child(4) {
    animation: aacc-rise 0.34s 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.aacc-panel * {
    box-sizing: border-box;
}

/* Header */

.aacc-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background-color: var(--aacc-morado);
    color: var(--aacc-white);
}

.aacc-panel__header button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--aacc-white);
    font-family: var(--aacc-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--aacc-radius-sm);
}

.aacc-panel__header button:hover,
.aacc-panel__header button:focus {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--aacc-white);
    outline: none;
}

.aacc-panel__header svg {
    flex-shrink: 0;
}

/* Body */

.aacc-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 18px 22px;
    background-color: var(--aacc-panel-bg);
}

.aacc-panel__body::-webkit-scrollbar {
    width: 8px;
}
.aacc-panel__body::-webkit-scrollbar-thumb {
    background-color: rgba(9, 30, 66, 0.22);
    border-radius: 4px;
}

/* =========================================================================
   SECTIONS
   ========================================================================= */

.aacc-section {
    margin-bottom: 22px;
}

.aacc-section:last-child {
    margin-bottom: 0;
}

.aacc-section__title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    color: var(--aacc-navy);
    font-family: var(--aacc-font);
    font-size: 16px;
    font-weight: 700;
    padding: 0 0 12px;
    cursor: pointer;
}

.aacc-section__title:hover,
.aacc-section__title:focus {
    color: var(--aacc-navy);
    outline: none;
}

.aacc-section__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background-color: var(--aacc-morado);
    color: var(--aacc-white);
    border-radius: 4px;
}

.aacc-section[data-collapsed="true"] .aacc-section__content {
    display: none;
}

.aacc-section[data-collapsed="true"] .aacc-section__chevron svg:last-child {
    display: none;
}
.aacc-section:not([data-collapsed="true"]) .aacc-section__chevron svg:first-child {
    display: none;
}

.aacc-section__content {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.aacc-section--profiles .aacc-section__content {
    flex-direction: column;
}

/* =========================================================================
   PROFILE PILLS (full-width rows)
   ========================================================================= */

.aacc-pill {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: var(--aacc-lblue);
    border: 2px solid var(--aacc-lblue);
    color: var(--aacc-navy);
    border-radius: var(--aacc-radius);
    padding: 12px 16px;
    font-family: var(--aacc-font);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.2s cubic-bezier(0.34, 1.4, 0.5, 1),
        box-shadow 0.2s ease;
}

.aacc-pill:hover,
.aacc-pill:focus-visible {
    background-color: var(--aacc-lblue-h);
    border-color: var(--aacc-morado);
    color: var(--aacc-navy);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(112, 78, 253, 0.18);
    outline: none;
}

.aacc-pill:active {
    transform: translateY(0) scale(0.99);
    transition-duration: 0.06s;
}

.aacc-pill--active {
    background-color: var(--aacc-morado);
    border-color: var(--aacc-morado);
    color: var(--aacc-white);
}

.aacc-pill--active:hover,
.aacc-pill--active:focus {
    background-color: var(--aacc-morado-h);
    border-color: var(--aacc-morado-h);
    color: var(--aacc-white);
}

.aacc-pill__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    flex-shrink: 0;
}

.aacc-pill__text {
    flex: 1 1 auto;
}

/* =========================================================================
   TILES (square buttons, half-width)
   ========================================================================= */

.aacc-tile {
    width: calc(50% - 5px);
    min-height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: var(--aacc-lblue);
    border: 2px solid var(--aacc-lblue);
    color: var(--aacc-navy);
    border-radius: var(--aacc-radius);
    padding: 10px 8px;
    font-family: var(--aacc-font);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.2s cubic-bezier(0.34, 1.4, 0.5, 1),
        box-shadow 0.2s ease;
}

.aacc-tile:hover,
.aacc-tile:focus-visible {
    background-color: var(--aacc-lblue-h);
    border-color: var(--aacc-morado);
    color: var(--aacc-navy);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(112, 78, 253, 0.18);
    outline: none;
}

.aacc-tile:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.06s;
}

.aacc-tile--active {
    background-color: var(--aacc-morado);
    border-color: var(--aacc-morado);
    color: var(--aacc-white);
}

.aacc-tile--active:hover,
.aacc-tile--active:focus {
    background-color: var(--aacc-morado-h);
    border-color: var(--aacc-morado-h);
    color: var(--aacc-white);
}

.aacc-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.aacc-tile__text {
    line-height: 1.2;
}

.aacc-tile__sub {
    display: block;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.75;
    margin-top: 2px;
}

/* =========================================================================
   GROUPS (text size / line height / text spacing)
   ========================================================================= */

.aacc-group {
    width: 100%;
    background-color: transparent;
    border: 2px solid var(--aacc-lpurple);
    border-radius: var(--aacc-radius);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aacc-group__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--aacc-navy);
}

.aacc-group__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
}

.aacc-group__buttons {
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.aacc-tile--level {
    flex: 1 1 0;
    width: auto;
    min-height: 38px;
    border-radius: 999px;
    padding: 8px 6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.aacc-tile--level .aacc-tile__label {
    line-height: 1;
}

/* =========================================================================
   GLOBAL ACCESSIBILITY EFFECTS (apply to <html> via aacc_ classes)
   ========================================================================= */

/* Readable / dyslexic fonts */
html.aacc_readablefont,
html.aacc_readablefont body,
html.aacc_readablefont h1, html.aacc_readablefont h2, html.aacc_readablefont h3,
html.aacc_readablefont h4, html.aacc_readablefont h5, html.aacc_readablefont h6,
html.aacc_readablefont .h1, html.aacc_readablefont .h2, html.aacc_readablefont .h3,
html.aacc_readablefont .h4, html.aacc_readablefont .h5, html.aacc_readablefont .h6 {
    font-family: var(--aacc-readablefont) !important;
}

html.aacc_dyslexic,
html.aacc_dyslexic body,
html.aacc_dyslexic h1, html.aacc_dyslexic h2, html.aacc_dyslexic h3,
html.aacc_dyslexic h4, html.aacc_dyslexic h5, html.aacc_dyslexic h6,
html.aacc_dyslexic .h1, html.aacc_dyslexic .h2, html.aacc_dyslexic .h3,
html.aacc_dyslexic .h4, html.aacc_dyslexic .h5, html.aacc_dyslexic .h6 {
    font-family: var(--aacc-dyslexicfont) !important;
}

/* Highlight (exclude widget itself) */
html.aacc_highlighttitles :is(h1, h2, h3, h4, h5, h6):not(.aacc-panel *):not(.aacc-trigger *) {
    background-color: #f0ff42 !important;
    border-color: #f0ff42 !important;
    color: #000 !important;
    text-shadow: none !important;
}

html.aacc_highlightlinks a:not(.aacc-panel a):not(.aacc-trigger):not(.aacc-trigger *) {
    background-color: #f0ff42 !important;
    border-color: #f0ff42 !important;
    color: #000 !important;
    text-shadow: none !important;
    text-decoration: underline !important;
    opacity: 1 !important;
}
html.aacc_highlightlinks a:not(.aacc-panel a):not(.aacc-trigger):not(.aacc-trigger *) * {
    background-color: transparent !important;
    color: inherit !important;
}

html.aacc_highlightbuttons button:not(.aacc-panel button):not(.aacc-trigger):not(.aacc-panel button *),
html.aacc_highlightbuttons [type="submit"]:not(.aacc-panel *),
html.aacc_highlightbuttons [role="button"]:not(.aacc-panel *) {
    background-color: #f0ff42 !important;
    border-color: #f0ff42 !important;
    color: #000 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Hide images */
html.aacc_hideimages img:not(.aacc-panel img),
html.aacc_hideimages .embed-video-bg:not(.aacc-panel *) {
    visibility: hidden !important;
}
html.aacc_hideimages *:not(.aacc-panel):not(.aacc-trigger):not(.aacc-panel *):not(.aacc-trigger *) {
    background-image: none !important;
}

/* Stop animations */
html.aacc_stopanimations *,
html.aacc_stopanimations *::before,
html.aacc_stopanimations *::after {
    transition: none !important;
    animation: none !important;
}

/* Text size */
html.aacc_textsizenormal { font-size: 105% !important; }
html.aacc_textsizelarge  { font-size: 115% !important; }
html.aacc_textsizebig    { font-size: 125% !important; }

/* Line height (applied broadly, but exclude widget) */
html.aacc_lineheightnormal :not(.aacc-panel):not(.aacc-trigger):not(.aacc-panel *):not(.aacc-trigger *) { line-height: 2 !important; }
html.aacc_lineheightlarge  :not(.aacc-panel):not(.aacc-trigger):not(.aacc-panel *):not(.aacc-trigger *) { line-height: 2.5 !important; }
html.aacc_lineheightbig    :not(.aacc-panel):not(.aacc-trigger):not(.aacc-panel *):not(.aacc-trigger *) { line-height: 3 !important; }

/* Text spacing */
html.aacc_textspacingnormal *:not(.aacc-panel *):not(.aacc-trigger *) {
    word-spacing: 0.28em !important;
    letter-spacing: 0.08em !important;
}
html.aacc_textspacinglarge *:not(.aacc-panel *):not(.aacc-trigger *) {
    word-spacing: 0.38em !important;
    letter-spacing: 0.18em !important;
}
html.aacc_textspacingbig *:not(.aacc-panel *):not(.aacc-trigger *) {
    word-spacing: 0.48em !important;
    letter-spacing: 0.28em !important;
}

/* Color filters — usamos filtros CSS sobre <html>, exceptuamos el widget
   manteniendo el filtro inverso sobre .aacc-panel y .aacc-trigger. */
html.aacc_highcontrast   { filter: contrast(135%); }
html.aacc_highsaturation { filter: saturate(200%); }
html.aacc_lowsaturation  { filter: saturate(50%); }
html.aacc_monochrome     { filter: grayscale(100%); }
html.aacc_invertcolors   { filter: invert(1) hue-rotate(180deg); }
html.aacc_changecolors   { filter: hue-rotate(90deg); }

/* El widget recibe el filtro inverso para neutralizarlo */
html.aacc_highcontrast .aacc-panel,
html.aacc_highcontrast .aacc-trigger { filter: contrast(calc(100% / 1.35)); }
html.aacc_highsaturation .aacc-panel,
html.aacc_highsaturation .aacc-trigger { filter: saturate(0.5); }
html.aacc_lowsaturation .aacc-panel,
html.aacc_lowsaturation .aacc-trigger { filter: saturate(2); }
html.aacc_monochrome .aacc-panel,
html.aacc_monochrome .aacc-trigger { filter: none; }
html.aacc_invertcolors .aacc-panel,
html.aacc_invertcolors .aacc-trigger { filter: invert(1) hue-rotate(180deg); }
html.aacc_changecolors .aacc-panel,
html.aacc_changecolors .aacc-trigger { filter: hue-rotate(-90deg); }

/* Reading guide / mask overlays */
.aacc-readingguide {
    position: fixed;
    left: 0;
    right: 0;
    height: 12px;
    background-color: #000;
    border-top: 2px solid #ffed00;
    border-bottom: 2px solid #ffed00;
    z-index: 99990;
    pointer-events: none;
}

.aacc-mask {
    position: fixed;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.32);
    z-index: 99989;
    pointer-events: none;
}

.aacc-mask--top { top: 0; }
.aacc-mask--bottom { bottom: 0; }

/* Big cursors */
html.aacc_bigblackcursor body,
html.aacc_bigblackcursor body * { cursor: var(--aacc-cursor-black, default) !important; }
html.aacc_bigblackcursor a, html.aacc_bigblackcursor button, html.aacc_bigblackcursor [role="button"],
html.aacc_bigblackcursor input, html.aacc_bigblackcursor label, html.aacc_bigblackcursor select,
html.aacc_bigblackcursor textarea {
    cursor: var(--aacc-pointer-black, pointer) !important;
}

html.aacc_bigwhitecursor body,
html.aacc_bigwhitecursor body * { cursor: var(--aacc-cursor-white, default) !important; }
html.aacc_bigwhitecursor a, html.aacc_bigwhitecursor button, html.aacc_bigwhitecursor [role="button"],
html.aacc_bigwhitecursor input, html.aacc_bigwhitecursor label, html.aacc_bigwhitecursor select,
html.aacc_bigwhitecursor textarea {
    cursor: var(--aacc-pointer-white, pointer) !important;
}

/* Tooltip element rendered by JS */
.aacc-tooltip {
    position: fixed;
    background-color: rgba(9, 30, 66, 0.92);
    color: #fff;
    border-radius: 6px;
    max-width: 380px;
    padding: 8px 12px;
    font-family: var(--aacc-font);
    font-size: 14px;
    line-height: 1.3;
    z-index: 99991;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease;
}

/* =========================================================================
   MOTION ACCESSIBILITY
   - Si el sistema pide menos movimiento o el toggle "Detener animaciones" está
     activo, neutralizamos las transiciones del widget.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .aacc-panel,
    .aacc-trigger,
    .aacc-pill,
    .aacc-tile {
        transition-duration: 0.01ms !important;
    }
    .aacc-panel--open .aacc-panel__header,
    .aacc-panel--open .aacc-panel__body .aacc-section {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .aacc-trigger--pulse {
        animation: none !important;
    }
}

html.aacc_stopanimations .aacc-panel--open .aacc-panel__header,
html.aacc_stopanimations .aacc-panel--open .aacc-panel__body .aacc-section,
html.aacc_stopanimations .aacc-trigger--pulse {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/* Tablet / mobile: el panel ocupa casi todo el ancho. */
@media (max-width: 600px) {
    .aacc-panel {
        right: 10px;
        left: 10px;
        bottom: 80px;
        width: auto;
        max-width: none;
    }
    .aacc-tile {
        width: calc(50% - 5px);
    }
}

/* Trigger en mobile: pasa a círculo 48x48 con ícono porque "Accesibilidad"
   en un pill horizontal ocuparía demasiado ancho. */
@media (max-width: 600px) {
    .aacc-trigger {
        right: 16px;
        width: 48px;
        height: 48px;
        padding: 0;
        border-radius: 50%;
    }
    .aacc-trigger__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
    }
    .aacc-trigger__icon svg {
        width: 26px;
        height: 26px;
    }
    .aacc-trigger__label {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* =========================================================================
   sr-only fallback (por si el tema activo no lo define)
   ========================================================================= */

.aacc-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}