/* ==========================================================================
   Vitrall Saúde · 02 BASE
   Reset curto + escala tipografica da secao 2 do guia.
   Peso 700 nao e usado em texto de interface — so logo e iniciais de avatar.
   ========================================================================== */

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

/* `hidden` tem que ganhar de `display: flex`.
   O padrao do navegador e `display: none` com a especificidade mais baixa que
   existe, entao qualquer componente com display proprio — .bloco-troca, .linha,
   .item-lista — continua aparecendo com o atributo posto. O sintoma e um bloco
   que deveria estar escondido e nao esta, e sem erro nenhum no console. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fundo-tela);
  font-family: var(--fonte);
  font-size: 15px;
  color: var(--texto-corrente);
  -webkit-font-smoothing: antialiased;
}

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

/* A LISTA ABERTA DO `select` É DESENHADA PELO SISTEMA, E NÃO POR NÓS.
   O `color: inherit` da linha acima serve ao campo fechado, e ali está certo.
   Só que ele também desce para os `<option>`, e o fundo deles nasce
   transparente — quem pinta a lista aberta é o widget nativo, que no Windows
   segue o tema do SISTEMA OPERACIONAL e não o `color-scheme` da página.
   No tema escuro com o Windows no claro dá o que foi relatado: texto quase
   branco sobre lista branca, e os desfechos aparecendo em branco. Fixar as
   duas cores tira a lista da heurística do navegador e vale para todo
   `select` do sistema, não só o do desfecho. */
select option,
select optgroup {
  background-color: var(--cartao);
  color: var(--texto);
}
button { background: none; border: 0; cursor: pointer; }
a { color: var(--azul-primario); text-decoration: none; }
/* --tinta-forte, e nao --azul-escuro: o mesmo valor no tema claro, mas no
   escuro o --azul-escuro continua sendo a SUPERFICIE do menu (quase preta) e
   este aqui e' TINTA — precisa clarear, senao o link visitado some. */
a:hover { color: var(--tinta-forte); }

/* Alvo de foco visivel — secao 8 (acessibilidade) */
:focus-visible { outline: 2px solid var(--azul-primario); outline-offset: 2px; }

/* Rolagem interna dos cartoes: fina, sem canto reto */
.rolavel { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--contorno) transparent; }
.rolavel::-webkit-scrollbar { width: 6px; }
.rolavel::-webkit-scrollbar-thumb { background: var(--contorno); border-radius: 3px; }
.rolavel::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------------------
   2. Tipografia
   -------------------------------------------------------------------------- */

.t-tela        { font-size: 28px; font-weight: 600; letter-spacing: -.03em; color: var(--texto); }
.t-login       { font-size: 32px; font-weight: 600; letter-spacing: -.03em; color: var(--texto); }
.t-marca       { font-size: 50px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.t-paciente    { font-size: 23px; font-weight: 600; letter-spacing: -.02em; color: var(--texto); }
.t-cartao      { font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--texto); }
.t-sub         { font-size: 16px; font-weight: 600; color: var(--texto); }
.t-sub-p       { font-size: 15px; font-weight: 600; color: var(--texto); }
.t-corpo       { font-size: 15px; line-height: 1.6; color: var(--texto-corrente); }
.t-apoio       { font-size: 14px; color: var(--texto-apoio); }
.t-apoio-p     { font-size: 13px; color: var(--texto-apoio); }

/* Rotulo de secao: 11/600 caixa alta, tracking 0,07–0,09em */
.t-rotulo {
  font-size: 12px; font-weight: 600; color: var(--texto-apoio);
  text-transform: uppercase; letter-spacing: .09em;
}
.t-rotulo-tab { letter-spacing: .07em; }

/* Numeros: sempre mono */
.mono   { font-family: var(--mono); }
.t-metrica {
  font-family: var(--mono); font-size: 31px; font-weight: 400;
  letter-spacing: -.04em; color: var(--texto);
}
.t-metrica-g { font-size: 34px; }
.t-metrica-m { font-size: 28px; }
.t-dado { font-family: var(--mono); font-size: 14px; color: var(--texto-corrente); }

/* Texto longo em celula de largura fixa — secao 6 */
.corta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nowrap { white-space: nowrap; }

/* Utilitarios de fluxo (secao 3: sempre flex/grid com gap) */
.linha   { display: flex; align-items: center; }
.entre   { display: flex; align-items: center; justify-content: space-between; }
.coluna  { display: flex; flex-direction: column; }
.cresce  { flex: 1; min-width: 0; min-height: 0; }
.empurra { margin-left: auto; }