html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Acessibilidade - Redimensionamento de texto: nível médio */
html.fonte-media {
    font-size: 18px !important;
}

@media (min-width: 768px) {
    html.fonte-media {
        font-size: 20px !important;
    }
}

/* Acessibilidade - Redimensionamento de texto: nível grande */
html.fonte-grande {
    font-size: 22px !important;
}

@media (min-width: 768px) {
    html.fonte-grande {
        font-size: 24px !important;
    }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.button {
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Acessibilidade - Controle de tamanho de texto */

/*
 * O sidebar usa font-size com px fixo (ex: 13px, 11px), o que impede o
 * escalonamento via html font-size. Aqui convertemos para rem equivalentes
 * (13/14 ≈ 0.929rem, 11/14 ≈ 0.786rem, 12/14 ≈ 0.857rem) para que todos
 * os níveis de acessibilidade funcionem corretamente.
 * Em 14px (padrão) os valores renderizados são idênticos aos originais.
 */
.side-menu .sub-category {
    font-size: 0.786rem !important; /* equivale a 11px no tamanho padrão */
}

.side-menu__item,
.slide-item,
.sub-slide-menu,
.sub-slide-item,
.sub-side-menu__item2,
.sub-slide-menu2,
.sub-slide-item2 {
    font-size: 0.929rem !important; /* equivale a 13px no tamanho padrão */
}

.angle {
    font-size: 0.786rem !important; /* equivale a 11px no tamanho padrão */
}

.sub-angle2 {
    font-size: 0.857rem !important; /* equivale a 12px no tamanho padrão */
}

/* Acessibilidade - Ícones do sidebar em rem para escalonamento correto */
/* 22px / 14px = 1.571rem | 21px / 14px = 1.5rem */
.side-menu .side-menu__icon {
    width: 1.571rem !important;
    height: 1.571rem !important;
    line-height: 1.571rem !important;
    font-size: 1.5rem !important;
}

.side-menu .side-menu__icon svg {
    width: 1.571rem !important;
    height: 1.571rem !important;
}

/* Acessibilidade - Grupo conectado de tamanho de texto */
.controle-fonte {
    display: flex;
    align-items: stretch;
    border: 1.5px solid rgba(128, 128, 128, 0.28);
    border-radius: 7px;
    overflow: hidden;
    margin: 0 6px;
    height: calc(2.25rem + 2px); /* fórmula exata do .btn Bootstrap: line-height(1.5rem) + padding(0.75rem) + border(2px) */
}

.dark-mode .controle-fonte {
    border-color: rgba(255, 255, 255, 0.18);
}

.controle-fonte .btn-fonte {
    border: none;
    border-right: 1px solid rgba(128, 128, 128, 0.22);
    background: transparent;
    color: #9aa0b5;
    cursor: pointer;
    font-weight: 700;
    line-height: 1.5;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.65rem;
}

.dark-mode .controle-fonte .btn-fonte {
    border-right-color: rgba(255, 255, 255, 0.12);
}

.controle-fonte .btn-fonte:last-child {
    border-right: none;
}

/* Letras progressivas: metáfora visual do tamanho */
.controle-fonte .btn-fonte[data-nivel="0"] { font-size: 10px; }
.controle-fonte .btn-fonte[data-nivel="1"] { font-size: 13px; }
.controle-fonte .btn-fonte[data-nivel="2"] { font-size: 17px; }

.controle-fonte .btn-fonte:hover {
    background: rgba(99, 108, 232, 0.09);
    color: #636CE8;
}

.controle-fonte .btn-fonte.ativo {
    background: #636CE8;
    color: #ffffff;
    border-right-color: #5059cc;
}

.controle-fonte .btn-fonte:focus-visible {
    outline: 2px solid #636CE8;
    outline-offset: -2px;
}