/* ==========================================================================
   EconoRadar - base
   ==========================================================================
   Reset enxuto, tipografia e comportamento padrao de elemento nativo.
   Nenhum valor literal: tudo vem de tokens.css.
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Compensa o cabecalho fixo quando um link de ancora salta para a secao. */
    scroll-padding-top: calc(var(--altura-cabecalho) + var(--esp-4));
    /* Header denso ou trilha de carrossel nao podem alargar a pagina:
       o visitante veria a casca colada a esquerda e um vazio a direita. */
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: var(--familia-base);
    font-size: var(--fonte-base);
    line-height: var(--altura-linha-base);
    letter-spacing: var(--espaco-letra-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Numero tabular vale para toda a interface: e o que impede a coluna de
       tabela de "dancar" quando o valor muda de 9 para 10. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'cv05' 1;
}

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: var(--peso-semi);
    line-height: var(--altura-linha-titulo);
    letter-spacing: var(--espaco-letra-titulo);
    color: var(--cor-texto);
    text-wrap: balance;
}

h1 { font-size: var(--fonte-2xl); }
h2 { font-size: var(--fonte-xl); }
h3 { font-size: var(--fonte-lg); }
h4 { font-size: var(--fonte-md); }
h5 { font-size: var(--fonte-base); }
h6 {
    font-size: var(--fonte-xs);
    font-weight: var(--peso-semi);
    letter-spacing: var(--espaco-letra-rotulo);
    text-transform: uppercase;
    color: var(--cor-texto-terciario);
}

p {
    margin: 0;
    text-wrap: pretty;
}

small {
    font-size: var(--fonte-xs);
    color: var(--cor-texto-secundario);
}

strong, b { font-weight: var(--peso-semi); }

code, kbd, pre, samp {
    font-family: var(--familia-mono);
    font-size: var(--fonte-xs);
}

code {
    padding: var(--esp-1) var(--esp-2);
    border-radius: var(--raio-sm);
    background-color: var(--cor-superficie-afundada);
    color: var(--cor-accent-texto);
}

pre {
    margin: 0;
    padding: var(--esp-4);
    overflow-x: auto;
    border: var(--borda-fina) solid var(--cor-borda);
    border-radius: var(--raio-md);
    background-color: var(--cor-superficie-afundada);
}

pre code {
    padding: 0;
    background: none;
    color: var(--cor-texto-secundario);
}

hr {
    height: 0;
    margin: var(--esp-6) 0;
    border: 0;
    border-top: var(--borda-fina) solid var(--cor-borda);
}

ul, ol {
    margin: 0;
    padding-left: var(--esp-5);
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

a {
    color: var(--cor-accent-texto);
    text-decoration: none;
    transition: color var(--transicao-rapida) var(--curva-padrao);
}

a:hover {
    color: var(--cor-accent-forte);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   Foco visivel
   --------------------------------------------------------------------------
   Requisito de acessibilidade: tudo que recebe foco mostra foco. Usa-se
   :focus-visible para que o anel apareca na navegacao por teclado e nao
   incomode no clique de mouse.
   -------------------------------------------------------------------------- */

:focus {
    outline: none;
}

:focus-visible {
    outline: var(--borda-media) solid var(--cor-foco);
    outline-offset: var(--borda-media);
    border-radius: var(--raio-sm);
}

::selection {
    background-color: var(--cor-selecao);
    color: var(--cor-texto);
}

/* --------------------------------------------------------------------------
   Midia e tabela
   -------------------------------------------------------------------------- */

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* O conjunto de icones e so tracado (fill="none" no <svg>). Sem isto, o CSS
   ganha do atributo de apresentacao e o radar do cabecalho vira um disco. */
svg {
    fill: none;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}

th {
    font-weight: var(--peso-semi);
    text-align: left;
}

caption {
    text-align: left;
    color: var(--cor-texto-terciario);
}

/* --------------------------------------------------------------------------
   Formulario
   -------------------------------------------------------------------------- */

input, button, textarea, select {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

textarea {
    resize: vertical;
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

legend {
    padding: 0;
}

::placeholder {
    color: var(--cor-texto-terciario);
    opacity: 1;
}

/* Remove a setinha do input number, que nao faz sentido em campo de valor. */
input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* --------------------------------------------------------------------------
   Barra de rolagem
   -------------------------------------------------------------------------- */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--cor-borda-controle) transparent;
}

::-webkit-scrollbar {
    width: var(--esp-2);
    height: var(--esp-2);
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--cor-borda-controle);
    border-radius: var(--raio-completo);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--cor-texto-terciario);
}

/* --------------------------------------------------------------------------
   Utilitarios de acessibilidade
   -------------------------------------------------------------------------- */

/* Visivel apenas para leitor de tela. Usado no texto que explica alta e
   baixa sem depender de cor nem de simbolo grafico. */
.apenas-leitor-tela {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Link "pular para o conteudo": primeiro foco tabulavel da pagina. */
.pular-para-conteudo {
    position: absolute;
    top: var(--esp-2);
    left: var(--esp-2);
    z-index: var(--z-toast);
    padding: var(--esp-2) var(--esp-4);
    border: var(--borda-fina) solid var(--cor-accent-borda);
    border-radius: var(--raio-md);
    background-color: var(--cor-superficie-elevada);
    color: var(--cor-texto);
    font-weight: var(--peso-medio);
    transform: translateY(calc(-1 * var(--esp-16)));
    transition: transform var(--transicao-rapida) var(--curva-saida);
}

.pular-para-conteudo:focus-visible {
    transform: translateY(0);
    text-decoration: none;
}

.numero-tabular {
    font-variant-numeric: tabular-nums;
}

[hidden] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Respeito a preferencia de menos movimento
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   Impressao
   -------------------------------------------------------------------------- */

@media print {
    body {
        background: var(--cor-impressao-fundo);
        color: var(--cor-impressao-texto);
    }

    .barra-lateral,
    .barra-inferior,
    .cabecalho-app,
    .nao-imprimir {
        display: none !important;
    }
}