/* ===================================================== */
/* VARIÁVEL GLOBAL DA ESCALA DE FONTE                    */
/* ===================================================== */

html {
    --a11y-font-scale: 1;
}

/* ===================================================== */
/* ESCALA DE FONTE NO CONTEÚDO PRINCIPAL                 */
/* ===================================================== */

#main p,
#main span,
#main a,
#main li,
#main label,
#main input,
#main textarea,
#main select,
#main button,
#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main h6,
#main td,
#main th {
    font-size: calc(1em * var(--a11y-font-scale, 1));
}

/* ===================================================== */
/* ALTO CONTRASTE                                       */
/* ===================================================== */

html.a11y-contrast {
    filter: contrast(1.15);
}


/* ===================================================== */
/* 2. Inversão de cores (alto contraste) */
/* 3. Escala de Cinza (Monocromático) */
/* 4. Modo Sépia (Conforto Visual/Redução de luz azul) */
/* 5. Alta Saturação (Cores mais vivas) */
/* 6. Baixa Saturação (Cores lavadas) */
/* ===================================================== */

html.a11y-invert {
    filter: invert(100%);
}

html.a11y-grayscale {
    filter: grayscale(100%);
}

html.a11y-sepia {
    filter: sepia(100%);
}

html.a11y-saturate-high {
    filter: saturate(200%);
}

html.a11y-saturate-low {
    filter: saturate(50%);
}

/* ===================================================== */
/* SUBLINHAR LINKS                                      */
/* ===================================================== */

html.a11y-underline-links a {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* ===================================================== */
/* ESPAÇAMENTO PARA LEITURA                             */
/* ===================================================== */

html.a11y-spacing #main {
    line-height: 1.65;
    letter-spacing: 0.02em;
}

/* ===================================================== */
/* FOCO VISÍVEL                                         */
/* ===================================================== */

html.a11y-focus-strong :focus-visible {
    outline: 3px solid currentColor !important;
    outline-offset: 3px !important;
}


/* ===================================================== */
/* RESET DO WIDGET (ISOLAMENTO DO CSS GLOBAL)           */
/* ===================================================== */

.a11y-panel,
.a11y-panel * {
    box-sizing: border-box;
}

.a11y-panel {
    all: initial;
    position: fixed;

    /* 1. Centralização absoluta na tela */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* 2. Responsividade de Largura */
    width: 90%;
    /* Ocupa 90% da tela em celulares... */
    max-width: 340px;
    /* ...mas não ultrapassa os 340px originais em telas maiores */

    /* 3. Responsividade de Altura e Rolagem */
    max-height: 90vh;
    /* O painel nunca será maior que 90% da altura da tela */
    overflow-y: auto;
    /* Adiciona barra de rolagem interna se o conteúdo for muito grande */

    /* Estilos visuais mantidos do original */
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
    z-index: 9999;
    font-family: system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #111;
    display: block;
}

.a11y-panel[hidden],
.a11y-overlay[hidden] {
    display: none !important;
}

.a11y-panel * {

    all: revert;

    box-sizing: border-box;

    font-family: inherit;

    color: inherit;
}

/* ===================================================== */
/* CABEÇALHO DO PAINEL                                  */
/* ===================================================== */

.a11y-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 14px;

    border-bottom: 1px solid #eee;
}

.a11y-title {

    margin: 0;

    font-size: 16px;

    font-weight: 700;
}

.a11y-icon-btn {

    border: 1px solid #1351b4;

    color: #1351b4;

    background: #fff;

    border-radius: 16px;

    padding: 4px 6px;

    cursor: pointer;
}

/* ===================================================== */
/* CORPO DO PAINEL                                      */
/* ===================================================== */

.a11y-body {

    padding: 12px 14px;
}

/* ===================================================== */
/* LINHAS DO MENU                                       */
/* ===================================================== */

.a11y-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

    padding: 8px 0;
}

.a11y-row--end {

    justify-content: flex-end;
}

/* ===================================================== */
/* LABELS                                               */
/* ===================================================== */

.a11y-label {

    display: inline-block;

    flex: 1;

    margin-right: 12px;

    font-size: 14px;

    font-weight: 500;

    color: #111;

    white-space: normal;

    visibility: visible;

    opacity: 1;
}

/* ===================================================== */
/* ÁREA DE BOTÕES                                       */
/* ===================================================== */

.a11y-actions {

    display: flex;

    gap: 8px;

    flex-shrink: 0;
}

/* ===================================================== */
/* BOTÕES                                               */
/* ===================================================== */

.a11y-btn,
.a11y-toggle {

    border: 1px solid #1351b4;

    background: #fff;

    border-radius: 16px;

    padding: 6px 10px;

    cursor: pointer;

    font-weight: 600;

    font-size: 14px;

    color: #1351b4;
}

/* BOTÃO ATIVO */

.a11y-toggle[aria-pressed="true"] {

    background: #1351b4;

    color: #fff;
}

/* ===================================================== */
/* BOTÃO RESTAURAR                                      */
/* ===================================================== */

#a11y-reset {

    width: 100%;

    margin-top: 12px;
}

/* ===================================================== */
/* TEXTO DE DICA                                        */
/* ===================================================== */

.a11y-hint {

    margin-top: 10px;

    margin-bottom: 0px;

    font-size: 12px;

    color: #555;
}

/* ===================================================== */
/* BOTÃO FLUTUANTE                                      */
/* ===================================================== */

.a11y-fab {

    position: fixed;

    right: 8px;

    bottom: 8px;

    z-index: 9999;

    border: none;

    border-radius: 50%;

    padding: 2px;

    width: 36px;

    height: 36px;

    font-weight: 700;

    background: #1351b4;

    color: #fff;

    cursor: pointer;

    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

/* ===================================================== */
/* OVERLAY                                              */
/* ===================================================== */

.a11y-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .35);

    z-index: 9998;
}