/* ==========================================================================
   Acessibilidade Hard — Moodle Premium UI v19
   Single, consolidated dark theme (previous versions stacked three
   redesigns in this same file with !important overrides; only the last
   one ever rendered, the other two were dead weight). This is a clean
   rewrite matching the approved visual reference.
   ========================================================================== */

/* Bug fix: several tools here resize a lot of content at once (font size on
   the root element affects any rem-based spacing/sizing site-wide, high
   contrast/spacing changes recompute box sizes broadly, etc.). Browsers try
   to be "helpful" when content above the viewport resizes by automatically
   nudging the scroll position to keep the same visual anchor in place
   ("scroll anchoring") — but the heuristic that picks which element to
   anchor to isn't always right, and on a page that's being resized by the
   very tools meant to help someone read it, an unexpected jump is the
   opposite of helpful. Turning it off keeps the scroll position exactly
   where the person left it no matter which tool is toggled.
   ========================================================================== */
html { overflow-anchor: none; }

/* Bug fix: several tools here (font size, letter/word/line spacing, high
   contrast, colour filters) change how much vertical space the page's
   content needs. Depending on whether that pushes the page just past the
   point of needing a scrollbar or just under it, the vertical scrollbar can
   appear or disappear as a *side effect* of toggling a tool that has
   nothing to do with scrolling — and since the scrollbar itself takes up
   horizontal space, everything on the page (sidebar icons, buttons, the
   whole layout) visibly shifts left or right by the scrollbar's width the
   moment that happens. Reserving that space unconditionally means the
   scrollbar's presence never changes the available content width, so
   toggling any tool here can no longer shift anything sideways as a side
   effect of that. Supported in current Chrome, Firefox and Safari; browsers
   without support simply keep their previous (unaffected) behaviour. */
html { scrollbar-gutter: stable; }

#local-acessibilidade-widget {
    --la-primary: #0F6CBF;
    --la-primary-tint: color-mix(in srgb, var(--la-primary) 45%, #fff);
    --la-bg: #1e2125;
    --la-surface: #262b31;
    --la-surface-hover: #323841;
    --la-border: #34393f;
    --la-text: #f4f5f7;
    --la-muted: #9aa0a8;
    --la-danger: #d72f3c;
    --la-danger-hover: #c0212d;
    font-family: inherit;
    z-index: 2147483000;
}
#local-acessibilidade-widget * {
    box-sizing: border-box;
    font-family: inherit;
}

/* Floating launcher button ------------------------------------------------ */
/* Bug fix: this used to be pinned to the vertical middle of the screen edge
   (top: 50%, right/left: 0) — a 54×58px hit zone that, on some Moodle
   themes/course formats, sits right on top of the page's own controls in
   that same band (a right-hand block column, an "add block" +, etc.). Since
   this button is always on top (very high z-index, by design) and always
   present regardless of any toggle, it silently won the click there instead
   of whatever Moodle control was underneath — with no visible overlap and
   no console error, since it's a real, correctly-working button, just one
   the person never intended to click. Anchoring it to a corner instead is
   the placement most accessibility-overlay widgets use precisely because a
   corner is far less likely to already be in use by the host page's own
   layout. Which corner (top or bottom) is admin-configurable — only one of
   `--la-launcher-top` / `--la-launcher-bottom` is ever set by the JS at a
   time, matching the chosen setting; the other stays `auto` via its
   fallback below, so it never fights with the one actually in use.
   ========================================================================== */
.la-launcher {
    position: fixed;
    top: var(--la-launcher-top, auto);
    bottom: var(--la-launcher-bottom, auto);
    width: var(--la-launcher-size, 44px);
    height: var(--la-launcher-size, 44px);
    border: 0;
    background: var(--la-primary);
    color: #fff;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .35);
    cursor: pointer;
    z-index: 2147483001;
}
/* Admin-configurable: "Sempre visível ao rolar" off switches the launcher
   from position: fixed (stays put on screen, the default) to position:
   absolute (stays put on the PAGE instead, scrolling away with it like any
   other page content) — same top/bottom/edge offsets either way, since
   both position values respect them the same way. */
#local-acessibilidade-widget.la-launcher-scrolls .la-launcher { position: absolute; }
/* Flush against the screen edge (no gap), rounded only on the inner
   corners — the edge touching the side of the screen stays square, like a
   tab, matching the original visual design. */
/* Bug fix: a pure-CSS trick (`100vw - 100%`) was tried here to compensate
   for the space scrollbar-gutter: stable reserves on the edge, but it
   didn't reliably evaluate to that gutter's actual width for a
   position:fixed element's `right`/`left` percentage basis across
   real-world testing — leaving the same visible gap it was meant to
   remove. Replaced with a value computed in JavaScript instead (see
   `--la-launcher-edge` in accessibility.js), which measures the real gap
   between `window.innerWidth` (includes the gutter) and
   `document.documentElement.clientWidth` (excludes it) directly, and
   folds that measurement into the same variable already used for the
   admin-configured edge offset — no CSS-side guessing involved. */
.la-right .la-launcher { right: var(--la-launcher-edge, 0px); border-radius: 14px 0 0 14px; }
.la-left .la-launcher { left: var(--la-launcher-edge, 0px); border-radius: 0 14px 14px 0; }
.la-launcher:focus-visible { outline: 3px solid #ffcf33; outline-offset: 2px; }
.la-launcher-icon { display: flex; align-items: center; justify-content: center; }
.la-a11y-svg { width: 26px; height: 26px; display: block; }
.la-launcher .la-a11y-svg { width: calc(var(--la-launcher-size, 44px) * 0.5); height: calc(var(--la-launcher-size, 44px) * 0.5); }

/* Panel --------------------------------------------------------------------*/
.la-panel {
    position: fixed;
    top: 14px;
    width: 360px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 28px);
    background: var(--la-bg);
    color: var(--la-text);
    border: 1px solid #14161a;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
    overflow: hidden;
    z-index: 2147483002;
}
.la-right .la-panel { right: 14px; }
.la-left .la-panel { left: 14px; }
.la-panel.la-full { width: min(760px, calc(100vw - 24px)); }

.la-header {
    min-height: 68px;
    padding: 16px 18px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--la-border);
}
.la-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.la-brand-mark, .la-logo {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--la-surface);
    color: var(--la-primary-tint);
    display: flex; align-items: center; justify-content: center;
    flex: none;
}
.la-brand strong { display: block; font-size: 19px; font-weight: 800; color: #fff; }
.la-brand small { display: block; color: var(--la-muted); font-size: 11px; margin-top: 2px; }
.la-actions { display: flex; gap: 2px; }
.la-iconbtn {
    width: 34px; height: 34px;
    border: 0; background: transparent; color: var(--la-muted);
    border-radius: 9px; font-size: 20px; cursor: pointer;
}
.la-iconbtn:hover, .la-iconbtn:focus-visible {
    background: var(--la-surface); color: #fff; outline: 2px solid var(--la-primary);
}

/* Scroll area / sections ---------------------------------------------------*/
.la-scroll {
    overflow-y: auto;
    max-height: calc(100vh - 190px);
    padding: 14px 16px;
    scrollbar-width: thin;
    scrollbar-color: #4a5058 transparent;
}
.la-scroll::-webkit-scrollbar { width: 7px; }
.la-scroll::-webkit-scrollbar-thumb { background: #4a5058; border-radius: 8px; }
.la-section { margin-bottom: 18px; }
.la-section h3 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--la-primary-tint);
}

/* Toggle / action buttons, list style (matches approved reference) ---------*/
/* Grid (not flex-wrap) so every button gets the same width regardless of
   label length ("A" vs "Aumentar fonte") — flex-wrap let each button size
   itself to its own text, producing an uneven, "bricked" layout row to row.
   A fixed 2-column grid keeps every row aligned and every button the same
   size, which reads as an organised panel instead of a pile of chips. */
.la-btn-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.la-btn-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: var(--la-surface);
    color: var(--la-text);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}
.la-btn-item:hover { background: var(--la-surface-hover); }
.la-btn-item:focus-visible {
    outline: 3px solid var(--la-primary);
    outline-offset: 1px;
}
.la-btn-icon {
    font-size: 14px;
    line-height: 1; color: var(--la-muted);
    flex: 0 0 16px;
    text-align: center;
}
.la-btn-label {
    overflow: hidden;
    text-overflow: ellipsis;
}
/* When a section has an odd number of buttons, the trailing one would
   otherwise leave an empty gap in the 2-column grid — this makes that
   last, unpaired button stretch across the full row instead. */
.la-btn-row .la-btn-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}
/* Pressed/active state: uses aria-pressed so screen readers announce it too,
   see syncToggleUI() in accessibility.js. */
.la-btn-item[aria-pressed="true"] {
    background: var(--la-primary);
    border-color: var(--la-primary);
    color: #fff;
}
.la-btn-item[aria-pressed="true"] .la-btn-icon { color: #fff; }
@media (prefers-reduced-motion: no-preference) {
    .la-btn-item { transition: background .12s ease, transform .12s ease; }
    .la-btn-item:active { transform: translateY(1px); }
}

/* Reading/voice controls -----------------------------------------------------*/
.la-control {
    background: var(--la-surface);
    border: 1px solid var(--la-border);
    border-radius: 11px;
    padding: 12px;
    margin-bottom: 10px;
}
.la-control label {
    display: flex; justify-content: space-between;
    font-weight: 700; font-size: 12px; color: var(--la-muted);
    margin-bottom: 8px;
}
.la-control label span { color: #fff; }
.la-range { width: 100%; accent-color: var(--la-primary); }
.la-input {
    width: 100%;
    border: 1px solid var(--la-border);
    border-radius: 8px;
    padding: 9px;
    background: var(--la-bg);
    color: var(--la-text);
}

/* Footer / reset -------------------------------------------------------------*/
.la-footer {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--la-border);
}
.la-footer > span {
    display: block;
    font-size: 11px;
    color: var(--la-muted);
    text-align: center;
    margin-bottom: 10px;
}
.la-reset {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 999px;
    background: var(--la-danger);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    padding: 12px;
    cursor: pointer;
}
.la-reset:hover { background: var(--la-danger-hover); }
.la-reset:focus-visible { outline: 3px solid #ffcf33; outline-offset: 2px; }

/* Generic buttons used outside the card list (reader mode) --*/
.la-btn {
    border: 0; border-radius: 9px;
    padding: 10px 14px;
    background: var(--la-primary); color: #fff;
    font-weight: 800; font-size: 13px; cursor: pointer;
}
.la-btn.secondary { background: var(--la-surface); color: var(--la-text); }
#local-acessibilidade-widget .la-btn.secondary { border: 1px solid var(--la-border); }

.la-hidden { display: none !important; }

/* Toast ----------------------------------------------------------------------*/
.la-toast {
    position: fixed;
    bottom: 18px; left: 50%; transform: translateX(-50%);
    background: #14161a; color: #fff;
    padding: 10px 14px; border-radius: 9px;
    z-index: 2147483005; font-size: 13px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .5);
}

/* Full-page reader mode (renders over host page content, must stay legible
   regardless of the page's own colours, so it keeps its own light surface) */
.la-reading-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .68);
    z-index: 2147482998;
    display: none;
    padding: 30px 15px;
    overflow: auto;
}
.la-reading-overlay.open { display: block; }
.la-reading-sheet {
    max-width: 900px; margin: 0 auto;
    background: #fff; color: #222;
    border-radius: 14px;
    padding: 38px 44px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    font-size: 1.12rem; line-height: 1.8;
}
.la-reading-toolbar {
    position: sticky; top: 0;
    display: flex; justify-content: flex-end; gap: 8px;
    margin-bottom: 18px;
}

@media (max-width: 600px) {
    .la-panel { top: 7px; bottom: 7px; max-height: none; width: auto !important; }
    .la-right .la-panel, .la-left .la-panel { right: 7px; left: 7px; }
    .la-scroll { max-height: calc(100vh - 190px); }
    /* Extra clearance added on top of whatever the admin configured
       (--la-launcher-top) — many themes show a fixed header bar only below
       this breakpoint, which the launcher's normal desktop offset isn't
       tall enough to clear. Only applies when anchored to the top (see the
       la-launcher-top/-bottom class set by the JS); the "bottom" position
       is unaffected. */
    #local-acessibilidade-widget.la-launcher-top .la-launcher {
        top: calc(var(--la-launcher-top, 24px) + 48px);
    }
    .la-reading-sheet { padding: 25px 20px; }
}

/* Compact mode + hide-launcher admin settings -------------------------------*/
#local-acessibilidade-widget.la-launcher-hidden .la-launcher { display: none !important; }
#local-acessibilidade-widget.la-compact .la-panel { width: 320px; }
#local-acessibilidade-widget.la-compact .la-scroll { padding: 10px 12px; }
#local-acessibilidade-widget.la-compact .la-section { margin-bottom: 12px; }
#local-acessibilidade-widget.la-compact .la-btn-item { padding: 7px 10px; }
#local-acessibilidade-widget.la-compact .la-header { min-height: 56px; padding: 12px 14px 10px; }

/* ==========================================================================
   Page-wide accessibility effects (applied to <html>, so they affect
   the whole Moodle page, not just the widget itself)
   ========================================================================== */
/* "Aumentar/Diminuir botões": enlarges clickable controls across the
   PLATFORM itself (bigger touch/click targets), not our own panel — our
   panel already lives outside <body> (see init() in accessibility.js), so
   scoping every selector here under "body" naturally excludes it without
   needing an explicit exclusion list. transform:scale() is used rather than
   resizing padding/font-size directly because it works uniformly no matter
   how a given theme built its buttons, without needing to know that CSS.
   The trade-off is that scaled buttons can visually overlap tightly-packed
   neighbours at higher scale values — a normal side effect of this
   technique, same as browser page-zoom. */
html.la-btn-scale-active body button,
html.la-btn-scale-active body .btn,
html.la-btn-scale-active body [role="button"],
html.la-btn-scale-active body input[type="submit"],
html.la-btn-scale-active body input[type="button"] {
    transform: scale(var(--la-page-btn-scale, 1));
    transform-origin: center;
}

html.la-highcontrast body, html.la-highcontrast body * {
    background: #000 !important; color: #fff !important; border-color: #fff !important;
}
html.la-highcontrast a { color: #ff0 !important; }
/* Bug fix: "Alto contraste" and "Inverter cores" must only affect the host
   page's content. Because our own panel is a descendant of <body>, the
   "body *" rule above (which uses !important) was bleeding into our own
   buttons and text too, forcing everything to flat black/white and wiping
   out the panel's own colours and pressed-state highlight (this is what
   made the panel unreadable in testing — see also the la-invert fix above).
   An id selector beats a class+type selector even among !important rules,
   so this reasserts our theme regardless of source order. */
html.la-highcontrast #local-acessibilidade-widget,
html.la-highcontrast #local-acessibilidade-widget * {
    background: var(--la-surface) !important;
    color: var(--la-text) !important;
    border-color: var(--la-border) !important;
}
html.la-highcontrast #local-acessibilidade-widget .la-panel {
    background: var(--la-bg) !important;
}
html.la-highcontrast #local-acessibilidade-widget .la-launcher,
html.la-highcontrast #local-acessibilidade-widget .la-btn,
html.la-highcontrast #local-acessibilidade-widget .la-btn-item[aria-pressed="true"] {
    background: var(--la-primary) !important;
    color: #fff !important;
    border-color: var(--la-primary) !important;
}
html.la-highcontrast #local-acessibilidade-widget .la-reset {
    background: var(--la-danger) !important;
    color: #fff !important;
    border-color: var(--la-danger) !important;
}
/* Bug fix: filter used to be applied to <body>. Per the CSS spec, any
   ancestor with a `filter` becomes the containing block for its
   `position: fixed` descendants — and Moodle's own modals (.modal,
   .modal-backdrop, "Adicionar uma atividade ou recurso", etc.) are
   Bootstrap-injected as direct children of <body> with position: fixed.
   With the filter on body, those modals stopped positioning relative to
   the viewport and could render off-screen or "stuck" — looking like the
   whole action just silently failed. Scoping the filter to #page (present
   in effectively every Moodle theme, including Boost) excludes the modals,
   since they live outside #page, not inside it. */
html.la-invert #page { filter: invert(1) hue-rotate(180deg); }
html.la-gray #page { filter: grayscale(1); }
html.la-highlight a { outline: 3px solid #0F6CBF !important; outline-offset: 2px !important; text-decoration: underline !important; }
html.la-highlight strong, html.la-highlight b { background: #ffeb3b !important; color: #000 !important; }
html.la-underline a { text-decoration: underline !important; }
html.la-imagesoff img, html.la-imagesoff picture, html.la-imagesoff video { visibility: hidden !important; }
html.la-cursor, html.la-cursor * { cursor: crosshair !important; }
html.la-dyslexic body, html.la-dyslexic body * { letter-spacing: .035em !important; word-spacing: .08em !important; }
html.la-focus p:hover, html.la-focus li:hover, html.la-focus h1:hover, html.la-focus h2:hover, html.la-focus h3:hover { background: #ffeb3b66; }
/* "Reduzir animações": switches off CSS transitions/animations/smooth-scroll
   site-wide for people sensitive to motion, on top of the OS-level
   prefers-reduced-motion media query already respected elsewhere.
   Bug fix: shrinking the duration to near-zero still technically RUNS the
   animation (just very fast), which can still cause a visible flash/jank on
   some properties (e.g. opacity/transform pop-ins). Fully disabling the
   animation/transition mechanism with `none` is stronger and more reliable.
   Note: this can only stop CSS-driven motion. Some modern interfaces animate
   via JavaScript (frame-by-frame style/transform updates from an animation
   library) instead of CSS — that kind of motion is outside what any CSS
   rule, from us or anyone else, can switch off from the outside. */
/* Bug fix: this used to be a blanket `*` selector, which also killed
   transitions/animations on Moodle's own modal dialogs (.modal,
   .modal-backdrop, .moodle-dialogue). Several Moodle modal flows —
   including "Adicionar uma atividade ou recurso" — wait for a
   `transitionend` event to know the fade-in finished before they consider
   themselves fully open; with transitions forced to none, that event can
   fail to fire, leaving the modal appearing stuck/frozen mid-open. Excluding
   modal/dialog elements (and their descendants) keeps the "reduce motion"
   promise for regular page content without freezing Moodle's own UI. */
html.la-reducemotion *:not(.modal):not(.modal-backdrop):not(.moodle-dialogue):not(.moodle-dialogue-bg):not(.modal *):not(.moodle-dialogue *),
html.la-reducemotion *::before,
html.la-reducemotion *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* Bug fix (platform-level, not introduced by this plugin): some modals on
   this platform set .modal AND .modal-backdrop to the exact same z-index
   (e.g. 2147483647, the max 32-bit signed integer) via inline style. When
   two elements tie on z-index, whichever is LATER in DOM order wins — for
   these modals that's the backdrop's wrapper, so the backdrop renders on
   top of the modal's own content and silently swallows every click meant
   for it (confirmed live: DevTools element-picker on a modal option
   returned the backdrop, not the option).
   This USED to be a blanket `.modal-backdrop { z-index: ... !important; }`
   rule — which broke every OTHER modal on the platform that already had
   correct, normal Bootstrap z-index values (backdrop below its modal):
   forcing every backdrop to a near-maximum z-index put it ABOVE modals
   that were never part of the problem, blocking their clicks too — a
   modal with no way to be dismissed is strictly worse than the one this
   was meant to fix. See fixModalBackdropStacking() in accessibility.js for
   the corrected version: it only touches a backdrop that's actually tied
   with (or above) its own modal, leaving every properly-stacked modal
   completely untouched. */


/* "Daltonismo": these are heuristic colour-assist filters (hue-shift +
   saturation/contrast boost tuned per deficiency type), applied only to
   the page content — never to our own widget, see the la-invert /
   la-highcontrast fixes above for why that matters. They are NOT a
   clinically-precise LMS-space daltonization transform; they are meant to
   make red/green or blue/yellow distinctions easier, similar to the
   simplified filters shipped by most commercial accessibility widgets.
   Users should try each option and keep whichever helps them the most. */
html.la-colorblind-protanopia #page { filter: saturate(1.7) contrast(1.05) hue-rotate(-15deg); }
html.la-colorblind-deuteranopia #page { filter: saturate(1.7) contrast(1.05) hue-rotate(15deg); }
html.la-colorblind-tritanopia #page { filter: saturate(1.6) contrast(1.05) hue-rotate(45deg); }

/* Element zoom lens: preview only, the original element is never resized or moved. */
#la-element-lens {
    position: fixed; z-index: 2147483004; display: none;
    background: #fff; color: #222;
    border: 3px solid var(--la-primary, #0F6CBF);
    border-radius: 13px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, .3);
    padding: 10px; pointer-events: none;
    max-height: 190px; overflow: hidden;
}
#la-element-lens.open { display: block; }
#la-element-lens .la-lens-inner { display: flex; align-items: center; justify-content: center; min-height: 60px; }
#la-element-lens .la-lens-copy { transform: scale(1.18); transform-origin: center; max-width: 100%; margin: 8px; }
#la-element-lens::after {
    content: "Ampliado"; position: absolute; right: 7px; top: 5px;
    font: 700 10px inherit; color: #666; background: #f1f1f1; padding: 2px 5px; border-radius: 4px;
}

#la-reading-pointer {
    position: fixed; z-index: 2147483003; display: none; pointer-events: none;
    background: #fff; border: 2px solid var(--la-primary, #0F6CBF);
    border-radius: 10px; box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
    padding: 6px 9px; align-items: center; gap: 7px; color: #222;
    font: 700 12px inherit;
}
#la-reading-pointer.open { display: flex; }
#la-reading-pointer .la-pointer-mouse { display: flex; width: 22px; height: 22px; align-items: center; justify-content: center; }
#la-reading-pointer .la-pointer-mouse svg { width: 20px; height: 20px; }
#la-reading-pointer .la-pointer-text { white-space: nowrap; }

/* Reading mask: only the reading band stays clear, rest of viewport dimmed. */
#la-reading-mask {
    position: fixed; left: 0; right: 0; top: calc(50% - 55px); height: 110px;
    z-index: 2147482995; display: none; pointer-events: none;
    border-top: 3px solid #0F6CBF; border-bottom: 3px solid #0F6CBF;
    background: rgba(255, 255, 255, .025);
    box-shadow: 0 -100vh 0 100vh rgba(0, 0, 0, .60), 0 100vh 0 100vh rgba(0, 0, 0, .60);
}
#la-reading-mask.open { display: block; }
#la-reading-mask .la-mask-window { position: absolute; inset: 0; border-left: 0; border-right: 0; }

/* Reading guide: precise horizontal line that follows the pointer. */
#la-reading-guide {
    position: fixed; left: 0; right: 0; top: 50%; height: 0; display: none;
    z-index: 2147482996; pointer-events: none;
    border-top: 3px solid #0F6CBF;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}
#la-reading-guide.open { display: block; }
#la-reading-guide .la-guide-dot {
    position: absolute; right: 18px; top: -4px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #0F6CBF; box-shadow: 0 0 0 3px rgba(15, 108, 191, .18);
}

/* Bug fix: this used to be 2147483700 — a value ABOVE the valid ceiling for
   a 32-bit signed integer (2147483647), which is the exact z-index Moodle's
   own modal *and* modal-backdrop both use. An out-of-range value here gets
   silently clamped by the browser to that same ceiling, meaning our panel
   was tied with Moodle's modal/backdrop at the literal maximum possible
   z-index — and ties are broken by DOM order, not intent, which is how a
   click meant for a modal option ended up landing on the backdrop instead.
   Staying comfortably below that ceiling (matching the rest of this
   widget's z-index scale) avoids ever taking part in that tie. */
#local-acessibilidade-widget .la-panel { z-index: 2147483600 !important; }