/* =========================================================
   ACESSIBILIDADE — ACERVO ACOLHE
   ========================================================= */


/* =========================================================
   BOTÃO DE ACESSIBILIDADE
   ========================================================= */

.botao-acessibilidade {
    position: fixed !important;

    right: 20px !important;
    bottom: 20px !important;

    z-index: 999999 !important;

    width: 50px !important;
    height: 50px !important;

    min-width: 50px !important;
    min-height: 50px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;

    border-radius: 50% !important;

    background: var(--azul-escuro) !important;
    color: var(--branco) !important;

    font-size: 1.15rem !important;

    line-height: 1 !important;

    cursor: pointer !important;

    box-shadow:
        0 6px 20px rgba(23, 59, 87, 0.22) !important;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease !important;

    isolation: isolate;
}

.botao-acessibilidade:hover {
    transform: translateY(-2px);

    background: var(--azul) !important;
}

.botao-acessibilidade:focus-visible {
    outline: 3px solid var(--azul) !important;

    outline-offset: 3px;
}


/* =========================================================
   ÍCONE DO BOTÃO
   ========================================================= */

.botao-acessibilidade i {
    pointer-events: none;

    font-size: inherit;

    line-height: 1;
}


/* =========================================================
   PAINEL DE ACESSIBILIDADE
   ========================================================= */

.painel-acessibilidade {
    position: fixed !important;

    right: 20px !important;
    bottom: 82px !important;

    z-index: 999998 !important;

    width: 300px !important;

    max-width: calc(100vw - 40px) !important;

    max-height: calc(100vh - 110px) !important;

    overflow-y: auto !important;

    padding: 20px !important;

    display: none !important;

    box-sizing: border-box !important;

    border: 1px solid var(--borda) !important;

    border-radius: 16px !important;

    background: var(--branco) !important;

    color: var(--texto) !important;

    box-shadow:
        0 12px 35px rgba(23, 59, 87, 0.18) !important;

    isolation: isolate;
}

.painel-acessibilidade.aberto {
    display: block !important;
}


/* =========================================================
   BARRA DE ROLAGEM DO PAINEL
   ========================================================= */

.painel-acessibilidade::-webkit-scrollbar {
    width: 7px;
}

.painel-acessibilidade::-webkit-scrollbar-track {
    background: transparent;
}

.painel-acessibilidade::-webkit-scrollbar-thumb {
    background: var(--borda);

    border-radius: 10px;
}


/* =========================================================
   TÍTULO
   ========================================================= */

.titulo-acessibilidade {
    margin-bottom: 16px;
}

.titulo-acessibilidade span {
    display: block;

    margin: 0;

    color: var(--azul) !important;

    font-size: 0.62rem !important;

    font-weight: 700;

    letter-spacing: 1.2px;

    line-height: 1.3;

    text-transform: uppercase;
}

.titulo-acessibilidade h2 {
    margin: 4px 0 0;

    color: var(--azul-escuro) !important;

    font-size: 1rem !important;

    font-weight: 700;

    line-height: 1.3;
}


/* =========================================================
   GRUPOS
   ========================================================= */

.grupo-acessibilidade {
    padding: 15px 0;

    border-top: 1px solid var(--borda);
}

.grupo-acessibilidade:first-of-type {
    border-top: none;
}

.grupo-acessibilidade > span {
    display: block;

    margin: 0 0 9px;

    color: var(--azul-escuro) !important;

    font-size: 0.68rem !important;

    font-weight: 600;

    line-height: 1.4;
}


/* =========================================================
   CONTROLES DE TEXTO
   ========================================================= */

.controles-texto {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 6px;
}

.controle-texto {
    width: 100%;

    height: 37px;

    min-height: 37px;

    margin: 0;

    padding: 0 6px;

    box-sizing: border-box;

    border: 1px solid var(--borda);

    border-radius: 8px;

    background: var(--off-white);

    color: var(--azul-escuro);

    font-family: "Poppins", sans-serif;

    font-size: 0.72rem;

    font-weight: 600;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        opacity 0.2s ease;
}

.controle-texto:hover {
    background: var(--azul-claro);
}

.controle-texto:focus-visible {
    outline: 2px solid var(--azul);

    outline-offset: 2px;
}

.controle-texto:disabled,
.controle-texto.desabilitado {
    cursor: not-allowed;

    opacity: 0.45;
}


/* =========================================================
   INFORMAÇÃO DE TAMANHO
   ========================================================= */

.informacao-tamanho {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 5px;

    margin-top: 8px;

    color: var(--texto-claro);

    font-size: 0.62rem;

    line-height: 1.4;
}

.informacao-tamanho strong {
    color: var(--azul);

    font-weight: 700;
}


/* =========================================================
   OPÇÕES
   ========================================================= */

.opcao-acessibilidade {
    width: 100%;

    min-height: 40px;

    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0 0 7px;

    padding: 9px 11px;

    box-sizing: border-box;

    border: 1px solid var(--borda);

    border-radius: 8px;

    background: var(--off-white);

    color: var(--azul-escuro);

    font-family: "Poppins", sans-serif;

    font-size: 0.68rem;

    font-weight: 500;

    line-height: 1.3;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.opcao-acessibilidade:last-child {
    margin-bottom: 0;
}

.opcao-acessibilidade:hover {
    background: var(--azul-claro);
}

.opcao-acessibilidade:focus-visible {
    outline: 2px solid var(--azul);

    outline-offset: 2px;
}

.opcao-acessibilidade.ativo {
    border-color: var(--azul) !important;

    background: var(--azul) !important;

    color: var(--branco) !important;
}

.opcao-acessibilidade i {
    width: 17px;

    flex: 0 0 17px;

    text-align: center;

    pointer-events: none;
}


/* =========================================================
   TAMANHO DO TEXTO
   ========================================================= */

/*
   O tamanho dos textos é aumentado somente no conteúdo
   principal. O botão e o painel de acessibilidade ficam
   protegidos para não mudarem de posição.
*/

html[data-tamanho-fonte="85"] body {
    --escala-texto-site: 0.85;
}

html[data-tamanho-fonte="90"] body {
    --escala-texto-site: 0.90;
}

html[data-tamanho-fonte="95"] body {
    --escala-texto-site: 0.95;
}

html[data-tamanho-fonte="100"] body {
    --escala-texto-site: 1;
}

html[data-tamanho-fonte="110"] body {
    --escala-texto-site: 1.10;
}

html[data-tamanho-fonte="120"] body {
    --escala-texto-site: 1.20;
}

html[data-tamanho-fonte="130"] body {
    --escala-texto-site: 1.30;
}

html[data-tamanho-fonte="140"] body {
    --escala-texto-site: 1.40;
}


/*
   Aplicação nos elementos de conteúdo.
*/

html[data-tamanho-fonte="110"]
body h1,
html[data-tamanho-fonte="120"]
body h1,
html[data-tamanho-fonte="130"]
body h1,
html[data-tamanho-fonte="140"]
body h1 {
    font-size: calc(2em * var(--escala-texto-site)) !important;
}

html[data-tamanho-fonte="110"]
body h2,
html[data-tamanho-fonte="120"]
body h2,
html[data-tamanho-fonte="130"]
body h2,
html[data-tamanho-fonte="140"]
body h2 {
    font-size: calc(1.5em * var(--escala-texto-site)) !important;
}

html[data-tamanho-fonte="110"]
body h3,
html[data-tamanho-fonte="120"]
body h3,
html[data-tamanho-fonte="130"]
body h3,
html[data-tamanho-fonte="140"]
body h3 {
    font-size: calc(1.17em * var(--escala-texto-site)) !important;
}

html[data-tamanho-fonte="110"]
body p,
html[data-tamanho-fonte="120"]
body p,
html[data-tamanho-fonte="130"]
body p,
html[data-tamanho-fonte="140"]
body p {
    font-size: calc(1em * var(--escala-texto-site)) !important;
}

html[data-tamanho-fonte="110"]
body li,
html[data-tamanho-fonte="120"]
body li,
html[data-tamanho-fonte="130"]
body li,
html[data-tamanho-fonte="140"]
body li {
    font-size: calc(1em * var(--escala-texto-site)) !important;
}

html[data-tamanho-fonte="110"]
body label,
html[data-tamanho-fonte="120"]
body label,
html[data-tamanho-fonte="130"]
body label,
html[data-tamanho-fonte="140"]
body label {
    font-size: calc(1em * var(--escala-texto-site)) !important;
}


/*
   Proteção do sistema de acessibilidade.
*/

.botao-acessibilidade,
.painel-acessibilidade,
.painel-acessibilidade * {
    --escala-texto-site: 1 !important;
}

.painel-acessibilidade h2 {
    font-size: 1rem !important;
}

.painel-acessibilidade span {
    font-size: 0.68rem !important;
}

.painel-acessibilidade button {
    font-size: 0.68rem !important;
}


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

html.acessibilidade-alto-contraste {
    --branco: #ffffff;

    --off-white: #ffffff;

    --azul-claro: #eeeeee;

    --azul: #000000;

    --azul-escuro: #000000;

    --texto: #000000;

    --texto-claro: #000000;

    --borda: #000000;
}


html.acessibilidade-alto-contraste body {
    background: #ffffff !important;

    color: #000000 !important;
}


html.acessibilidade-alto-contraste
.cabecalho {
    background: #000000 !important;

    color: #ffffff !important;
}


html.acessibilidade-alto-contraste
.cabecalho h1,

html.acessibilidade-alto-contraste
.cabecalho p,

html.acessibilidade-alto-contraste
.menu a {
    color: #ffffff !important;
}


html.acessibilidade-alto-contraste
main {
    background: #ffffff !important;

    color: #000000 !important;
}


html.acessibilidade-alto-contraste
h1,

html.acessibilidade-alto-contraste
h2,

html.acessibilidade-alto-contraste
h3,

html.acessibilidade-alto-contraste
h4,

html.acessibilidade-alto-contraste
h5,

html.acessibilidade-alto-contraste
h6,

html.acessibilidade-alto-contraste
p,

html.acessibilidade-alto-contraste
span,

html.acessibilidade-alto-contraste
strong,

html.acessibilidade-alto-contraste
label {
    color: #000000;
}


html.acessibilidade-alto-contraste
a {
    color: #000000;
}


html.acessibilidade-alto-contraste
.card-acervo,

html.acessibilidade-alto-contraste
.card-reserva,

html.acessibilidade-alto-contraste
.card-emprestimo-aluno,

html.acessibilidade-alto-contraste
.login-card,

html.acessibilidade-alto-contraste
.filtro,

html.acessibilidade-alto-contraste
.controle-texto,

html.acessibilidade-alto-contraste
.opcao-acessibilidade {
    background: #ffffff !important;

    border: 2px solid #000000 !important;

    color: #000000 !important;

    box-shadow: none !important;
}


html.acessibilidade-alto-contraste
.painel-acessibilidade {
    background: #ffffff !important;

    border: 2px solid #000000 !important;

    color: #000000 !important;

    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 4px #000000 !important;
}


html.acessibilidade-alto-contraste
.painel-acessibilidade h2,

html.acessibilidade-alto-contraste
.painel-acessibilidade span,

html.acessibilidade-alto-contraste
.painel-acessibilidade strong {
    color: #000000 !important;
}


html.acessibilidade-alto-contraste
input,

html.acessibilidade-alto-contraste
select,

html.acessibilidade-alto-contraste
textarea {
    background: #ffffff !important;

    color: #000000 !important;

    border: 2px solid #000000 !important;
}


html.acessibilidade-alto-contraste
button:not(.botao-acessibilidade) {
    color: #ffffff;
}


html.acessibilidade-alto-contraste
.botao-acessibilidade {
    background: #000000 !important;

    color: #ffffff !important;

    border: 2px solid #ffffff !important;

    box-shadow:
        0 0 0 2px #000000 !important;
}


html.acessibilidade-alto-contraste
.botao-acessibilidade:hover {
    background: #000000 !important;

    color: #ffffff !important;
}


html.acessibilidade-alto-contraste
.botao-acessibilidade:focus-visible {
    outline:
        3px solid #000000 !important;
}


html.acessibilidade-alto-contraste
.opcao-acessibilidade.ativo {
    background: #000000 !important;

    color: #ffffff !important;

    border-color: #000000 !important;
}


html.acessibilidade-alto-contraste
.filtro.ativo {
    background: #000000 !important;

    color: #ffffff !important;
}


/* =========================================================
   ESCALA DE CINZA
   ========================================================= */

/*
   Importante:
   o filtro NÃO é aplicado ao body inteiro.
   Isso evita que o botão, painel e VLibras sejam arrastados
   para dentro do mesmo contexto visual.
*/

html.acessibilidade-cinza
.cabecalho,

html.acessibilidade-cinza
main,

html.acessibilidade-cinza
footer {
    filter: grayscale(100%);
}


/*
   Elementos de acessibilidade ficam protegidos.
*/

html.acessibilidade-cinza
.botao-acessibilidade {
    filter: none !important;

    opacity: 1 !important;
}


html.acessibilidade-cinza
.painel-acessibilidade {
    filter: none !important;

    opacity: 1 !important;
}


html.acessibilidade-cinza
[vw] {
    filter: none !important;
}


/* =========================================================
   VLibras
   ========================================================= */

[vw] {
    z-index: 999997 !important;
}


[vw-access-button] {
    z-index: 999997 !important;
}


/*
   O widget não deve herdar alterações de texto do
   sistema de acessibilidade.
*/

[vw],
[vw] * {
    font-size: initial;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .botao-acessibilidade {
        right: 14px !important;

        bottom: 14px !important;

        width: 46px !important;

        height: 46px !important;

        min-width: 46px !important;

        min-height: 46px !important;

        font-size: 1rem !important;
    }


    .painel-acessibilidade {
        right: 12px !important;

        bottom: 70px !important;

        width: min(
            300px,
            calc(100vw - 24px)
        ) !important;

        max-width:
            calc(100vw - 24px) !important;

        max-height:
            calc(100vh - 90px) !important;

        padding: 17px !important;
    }

}