@import url(icones-correios.css);
@import url(cores.css);
@import url(botoes.css);
@import url(inputs.css);
@import url(links.css);
@import url(cards.css);
@import url(chips.css);
@import url(dialog.css);
@import url(passos.css);
@import url(info-mais.css);
@import url(fix-bootstrap-datatable.css);

:root {
    /* Raio da borda padrão*/
    --raio-borda: 0.5rem;

    /* Espaçamentos multiplos de 8*/
    --espaco-xp: 0.25rem;
    --espaco-p: 0.5rem;
    --espaco-m: 1rem;
    --espaco-g: 1.5rem;
    --espaco-xg: 2rem;
    --espaco-2xg: 3rem;

    /* Tamanhos de telas para breakpoints */
    --tela-xp: 599px;
    --tela-p: 600px;
    --tela-m: 900px;
    --tela-g: 1240px;
    --tela-xg: 1440px;
}

body {
    font-family: "Trebuchet MS", "Roboto", "Helvetica", "Open Sans", sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    background-color: var(--cor-fundo);
    color: var(--cor-sobre-fundo);
}

/* ACESSIBILIDADE */
.esconder-visualmente {
    /* Esconde visualmente elementos e mantém a leitura através de leitores de tela */
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* FACILIDADE */
.borda-redonda {
    border-radius: var(--raio-borda);
}

/**** TIPOGRAFIA ****/
/* Display */
.display-g {
    font-size: 2.887rem;
    line-height: 48px;
    font-weight: bold;
}

.display-p {
    font-size: 2.027rem;
    line-height: 40px;
    font-weight: bold;
}

/* Títulos */
h1,
.t1 {
    font-size: 1.802rem;
    line-height: 32px;
    font-weight: bold;
}

h2,
.t2 {
    font-size: 1.602rem;
    line-height: 32px;
    font-weight: bold;
}

h3,
.t3 {
    font-size: 1.424rem;
    line-height: 24px;
    font-weight: bold;
}

h4,
.t4 {
    font-size: 1.266rem;
    line-height: 24px;
    font-weight: bold;
}

h5,
.t5 {
    font-size: 1.125rem;
    line-height: 24px;
    font-weight: bold;
}

h6,
.t6 {
    font-size: 1rem;
    line-height: 24px;
    font-weight: bold;
}

/* Subtítulos */
.subtitulo {
    font-size: 1rem;
    line-height: 24px;
    font-weight: 400;
}

.subtitulo-p {
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
}

/* Corpo */
p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: var(--espaco-m);
}

p.pequeno,
small {
    font-size: 14px;
    line-height: 20px;
}

strong.pequeno,
small {
    font-size: 14px;
    line-height: 20px;
}

p.mini {
    font-size: 12px;
    line-height: 16px;
    font-weight: bold;
}

/* Legendas */
figcaption,
.legenda {
    font-size: 14px;
    line-height: 16px;
    font-style: italic;
}

/* Quebra de Linha */
hr {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--cor-linha);
    opacity: 1;
}

/**** BACKGROUNDS E CORES DE TEXTO ****/
.bg-fundo {
    background-color: var(--cor-fundo);
    color: var(--cor-sobre-fundo);
}

.bg-superficie {
    background-color: var(--cor-superficie);
    color: var(--cor-sobre-superficie);
}

.bg-superficie-var {
    background-color: var(--cor-superficie-var);
    color: var(--cor-sobre-superficie-var);
}

.bg-primaria {
    background-color: var(--cor-primaria);
    color: var(--cor-sobre-primaria);
}

.bg-secundaria {
    background-color: var(--cor-secundaria);
    color: var(--cor-sobre-secundaria);
}

.bg-azul-correios {
    background-color: var(--primario20);
    color: var(--cor-sobre-primaria);
}

body.tema-escuro .bg-azul-correios {
    color: var(--primario100);
}

body.alto-contraste .bg-azul-correios {
    background-color: var(--cor-ac-preto);
    color: var(--cor-ac-branco);
    outline: 1px solid var(--cor-linha);
}

/**** ELEVAÇÕES ****/
.elev1 {
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15),
        0px 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.elev2 {
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15),
        0px 2px 6px 2px rgba(0, 0, 0, 0.15);
}

.elev3 {
    box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15),
        0px 1px 3px rgba(0, 0, 0, 0.15);
}

.elev4 {
    box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.15),
        0px 2px 3px rgba(0, 0, 0, 0.15);
}

.elev5 {
    box-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.15),
        0px 4px 4px rgba(0, 0, 0, 0.15);
}

/* ↳ Elevações no tema escuro */
body.tema-escuro .bg-superficie.elev1 {
    background-image: linear-gradient(
        0deg,
        rgba(245, 243, 240, 0.05),
        rgba(245, 243, 240, 0.05)
    );
}

body.tema-escuro .bg-superficie.elev2 {
    background-image: linear-gradient(
        0deg,
        rgba(245, 243, 240, 0.08),
        rgba(245, 243, 240, 0.08)
    );
}

body.tema-escuro .bg-superficie.elev3 {
    background-image: linear-gradient(
        0deg,
        rgba(245, 243, 240, 0.11),
        rgba(245, 243, 240, 0.11)
    );
}

body.tema-escuro .bg-superficie.elev4 {
    background-image: linear-gradient(
        0deg,
        rgba(245, 243, 240, 0.12),
        rgba(245, 243, 240, 0.12)
    );
}

body.tema-escuro .bg-superficie.elev5 {
    background-image: linear-gradient(
        0deg,
        rgba(245, 243, 240, 0.14),
        rgba(245, 243, 240, 0.14)
    );
}

body.tema-escuro .bg-superficie-var.elev1 {
    background-image: linear-gradient(
        0deg,
        rgba(239, 237, 234, 0.05),
        rgba(239, 237, 234, 0.05)
    );
}

body.tema-escuro .bg-superficie-var.elev2 {
    background-image: linear-gradient(
        0deg,
        rgba(239, 237, 234, 0.08),
        rgba(239, 237, 234, 0.08)
    );
}

body.tema-escuro .bg-superficie-var.elev3 {
    background-image: linear-gradient(
        0deg,
        rgba(239, 237, 234, 0.11),
        rgba(239, 237, 234, 0.11)
    );
}

body.tema-escuro .bg-superficie-var.elev4 {
    background-image: linear-gradient(
        0deg,
        rgba(239, 237, 234, 0.12),
        rgba(239, 237, 234, 0.12)
    );
}

body.tema-escuro .bg-superficie-var.elev5 {
    background-image: linear-gradient(
        rgba(239, 237, 234, 0.14),
        rgba(239, 237, 234, 0.14)
    );
}

/* ↳ Elevações em alto contraste */
body.alto-contraste .elev1,
body.alto-contraste .elev2,
body.alto-contraste .elev3,
body.alto-contraste .elev4,
body.alto-contraste .elev5 {
    border: 1px solid var(--cor-ac-branco);
}

body.alto-contraste .elev2 {
    box-shadow: 0px 1px 0px 1px rgba(255, 255, 255, 0.4);
}

body.alto-contraste .elev3 {
    box-shadow: 0px 2px 0px 1px rgba(255, 255, 255, 0.4);
}

body.alto-contraste .elev4 {
    box-shadow: 0px 3px 0px 1px rgba(255, 255, 255, 0.4);
}

body.alto-contraste .elev5 {
    box-shadow: 0px 4px 0px 1px rgba(255, 255, 255, 0.4);
}

/* Ajustes sobre css de ícones do Fontello */
[class^="ic-"]:before,
[class*=" ic-"]:before {
    font-size: 1.5em;
    width: 1.5rem;
    line-height: 1.5rem;
    margin-right: 0;
    margin-left: 0;
}

/* Ícones traco em img tag */
.ic-traco {
    max-width: 3rem;
    min-width: 3rem;
    filter: invert(24%) sepia(69%) saturate(2298%) hue-rotate(181deg) brightness(90%) contrast(101%);
}

body.tema-escuro .ic-traco {
    filter: invert(74%) sepia(63%) saturate(1638%) hue-rotate(173deg) brightness(99%) contrast(106%);
}

body.alto-contraste .ic-traco {
    filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(288deg) brightness(106%) contrast(101%);
}