/* =========================================================================
   BASE — o chão do sistema: fontes, normalização, elementos e tipografia.
   =========================================================================
   Carrega DEPOIS de tokens.css e ANTES de tudo o mais. Aqui só entra o que
   vale para o documento inteiro; nada que pertença a um componente ou a uma
   tela.
   ========================================================================= */

/*
 * Bebas Neue Pro Expanded — servida pelo próprio servidor, em /fonts.
 *
 * Nada de Google Fonts: a família é licenciada e sobe junto no deploy. O
 * caminho é relativo A ESTE ARQUIVO (assets/css/ -> ../../fonts/), então
 * funciona igual na raiz e em subpasta. woff2 primeiro, ttf de reserva.
 *
 * DOIS pesos, e o CSS pede de 400 a 800 — as faixas abaixo cobrem tudo, para
 * o navegador nunca inventar um negrito falso.
 *
 * font-display: swap, e o que tira o desconforto é a RESERVA COM AS MESMAS
 * MEDIDAS (logo abaixo), não o modo de exibição.
 *
 * Cheguei a usar 'optional' para acabar com a troca no carregamento. Resolvia
 * o pulo, mas criava coisa pior: optional manda o navegador DESISTIR da fonte
 * se ela não chegar em ~100ms depois de começar a desenhar. No localhost são
 * 13ms e nunca falha; num 4G passa fácil, e aí a visita inteira sai na fonte
 * de reserva — o site aparecendo com duas caras diferentes.
 *
 * Com swap a fonte sempre entra. E como a reserva ocupa a mesma largura, a
 * troca não desloca mais nada: o que se via era o texto mudando de tamanho,
 * não a fonte trocando.
 *
 * O peso saiu do ARQUIVO, não do nome interno: os dois se dizem "Regular" e um
 * deles se chama "Exp Rg" justamente no arquivo -Bold. Medindo a tinta, o
 * -Bold tem 21% mais que o -Regular — é ele o negrito, como o nome sugere.
 *
 * Não há face itálica nesta família. Onde o CSS pede itálico (texto de
 * "sem dados", "não informado"), o navegador inclina a normal.
 */
@font-face {
    font-family: 'Bebas Neue Pro Expanded';
    src: url('../../fonts/Bebas-Neue-Pro-Expanded-Regular.woff2') format('woff2'),
         url('../../fonts/Bebas-Neue-Pro-Expanded-Regular.ttf') format('truetype');
    font-weight: 100 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bebas Neue Pro Expanded';
    src: url('../../fonts/Bebas-Neue-Pro-Expanded-Bold.woff2') format('woff2'),
         url('../../fonts/Bebas-Neue-Pro-Expanded-Bold.ttf') format('truetype');
    font-weight: 501 900;
    font-style: normal;
    font-display: swap;
}

/*
 * Reserva com as MESMAS medidas.
 *
 * A Bebas Expanded é 18% mais estreita que a Helvetica/Arial. Sem isto, no
 * carregamento a página desenhava com a reserva e depois pulava — o texto
 * mudava de largura e o conteúdo descia quase 50px de uma vez.
 *
 * O size-adjust encolhe a reserva para ocupar a mesma largura, então mesmo
 * quando ela é usada o layout fica no lugar. local() resolve na hora, sem
 * baixar nada.
 */
@font-face {
    font-family: 'Reserva Bebas';
    src: local('Helvetica Neue'), local('Arial'), local('Segoe UI'), local('Roboto');
    size-adjust: 82%;
    font-display: swap;
}

/* =========================================================================
   Normalização
   =========================================================================
   Isto era o "preflight" do Tailwind, que vinha por CDN. O app foi escrito
   em cima dele — margem zerada, título sem tamanho próprio, lista sem
   marcador, tabela colapsada — então tirá-lo sem repor mudaria centenas de
   telas de uma vez. Está aqui, servido por nós, pelos mesmos motivos que a
   fonte está: uma dependência externa no caminho crítico é uma tela quebrada
   no dia em que a CDN cair, e um 'unsafe-inline' a mais na CSP.
   ========================================================================= */

*,
::before,
::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--cor-borda-suave);
}

/* =========================================================================
   O TETO DOS 3px
   =========================================================================
   Regra universal, e de propósito: nenhum elemento do sistema é mais
   arredondado que isto — botão, cartão, modal, etiqueta, imagem, caixa de
   aviso, chave liga/desliga.

   Antes era uma LISTA de seletores no fim do arquivo ("input, select,
   .botao-primario, .etiqueta, …"), e por isso valia só para o que alguém
   tinha lembrado de escrever nela: 51 das 68 declarações de canto do CSS
   passavam de 3px sem ninguém notar. Lista é promessa; isto é regra — o que
   entrar amanhã já nasce dentro dela.
   ========================================================================= */
*,
::before,
::after {
    border-radius: var(--raio);
}

/*
 * A única atenuação do teto, e ela é PARA MENOS: elemento que encosta na
 * borda da janela fica reto. Arredondar uma faixa de largura total não
 * arredonda nada — mostra dois pedacinhos do fundo nos cantos, e a tela
 * parece quebrada. Continua dentro da regra: 0 é menos que 3px.
 */
html, body, .barra-topo, .faixa-sistema, .faixa-publica, .conteudo-principal {
    border-radius: 0;
}

html {
    font-size: 18px;                /* PC. No celular são 19px, lá embaixo. */
    -webkit-text-size-adjust: 100%;
}

/* Nunca rolar a página na horizontal: conteúdo largo rola dentro do próprio
   container. 'hidden' transformaria html/body em containers de rolagem e
   tiraria a barra normal da janela no PC; 'clip' recorta igual mantendo a
   viewport como scroller. A 1ª linha é reserva para quem não tem 'clip'. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    /* impede o "puxar para atualizar" do iOS de disparar sozinho quando um
       campo perto do topo ganha foco (ex.: abrir o seletor de data) */
    overscroll-behavior-y: contain;
}

body {
    margin: 0;
    font-family: var(--fonte-primaria);
    font-size: var(--texto-base);
    line-height: var(--entrelinha);
    background-color: var(--cor-fundo);
    color: var(--cor-texto-principal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Números em colunas alinhadas, no app inteiro. A Bebas Neue Pro tem
       dígitos PROPORCIONAIS por padrão — o "1" é 35% mais estreito que o
       "0" —, então telefone, cachê e quantidade sairiam serrilhados numa
       lista. O recurso 'tnum' da própria fonte é o que iguala a largura. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

p, blockquote, dl, dd, figure, pre, hr {
    margin: 0;
}

ol, ul, menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

strong, b { font-weight: var(--peso-forte); }
small { font-size: var(--texto-sm); }
code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1em; }

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
}

/* Controle herda a fonte do documento: sem isto o navegador desenha campo e
   botão com a fonte dele, e a tela sai com duas famílias. */
button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}
button, select { text-transform: none; }
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}
button, [role="button"] { cursor: pointer; }
:disabled { cursor: default; }
textarea { resize: vertical; }
::placeholder { opacity: 1; color: var(--cor-texto-suave); }
:-moz-focusring { outline: auto; }

img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
}
/* qualquer conteúdo largo (imagem, iframe, tabela, pre) respeita a largura */
img, video, iframe, canvas, svg, table, pre { max-width: 100%; }
img, video { height: auto; }

[hidden] { display: none !important; }

/* =========================================================================
   Elementos com identidade do sistema
   ========================================================================= */

/*
 * Link herda a cor de onde está, e o destaque vem do componente (menu, cartão,
 * tabela). Não é escolha de agora: com o Tailwind por CDN, a folha dele
 * chegava DEPOIS da nossa e o `a { color: inherit }` do reset dele vencia o
 * nosso `a { color: var(--cor-primaria) }` — que era, na prática, código
 * morto. Está aqui como estava lá para o app não trocar de cara em 200 telas
 * de uma vez; a cor de link do sistema é uma decisão a tomar, não um efeito
 * colateral de uma faxina. Ver visual/README.md, "o que ficou para decidir".
 */
a {
    color: inherit;
    text-decoration: none;
}
a:hover { opacity: 0.8; }

/* =========================================================================
   Tipografia — os degraus da escala, com nome
   =========================================================================
   Eram 30 tamanhos diferentes no app, boa parte deles a 0,05rem um do outro.
   Aqui são sete, e cada classe aponta para um token: mudar o degrau muda
   todas as telas que o usam, que é o ponto.
   ========================================================================= */

.texto-titulo-xl {
    font-size: var(--texto-xxl);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-curta);
}

.texto-titulo-lg {
    font-size: var(--texto-xl);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-curta);
}

.texto-titulo-base {
    font-size: var(--texto-lg);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-curta);
}

.texto-corpo {
    font-size: var(--texto-base);
    line-height: var(--entrelinha);
}

.texto-pequeno {
    font-size: var(--texto-sm);
    line-height: var(--entrelinha);
    color: var(--cor-texto-suave);
}

h1, .texto-titulo-xl { color: var(--cor-primaria); }

/* =========================================================================
   Trilho da página
   ========================================================================= */

.conteudo-principal {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--e5) var(--e4) var(--e7);
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* =========================================================================
   Celular — o único ponto de quebra do sistema
   ========================================================================= */
@media (max-width: 768px) {
    /* 19px: tudo que está em rem cresce junto, inclusive a altura dos
       controles. É a mesma tela, não uma versão reduzida. */
    html { font-size: 19px; }

    .conteudo-principal { padding: var(--e4) var(--e3) var(--e6); }

    .texto-titulo-xl { font-size: var(--texto-xl); }
    .texto-titulo-lg { font-size: var(--texto-lg); }
    .texto-titulo-base { font-size: var(--texto-md); }
}