/* =========================================================
   Sistema visual DigitalFlats — a fonte única.
   Portal do dentista, painel do laboratório, telas de acesso e cadastro
   carregam este arquivo antes de qualquer outro. Cor, espaço, tipo e forma
   só mudam aqui. Regras de uso em lab-digitalflats/PADRAO-UI.md.
   ========================================================= */
:root{
  /* superfícies e traços */
  --fundo:#F5F7FB;
  --papel:#FFFFFF;
  --papel-2:#FBFCFE;
  --lateral:#FCFDFE;
  --traco:#E6EBF2;
  --traco-leve:#F0F3F8;

  /* tinta: a terceira passou de #94A3B8 para um tom legível em telão e projetor */
  --tinta:#0E1B2E;
  --tinta-2:#50627A;
  --tinta-3:#7F8FA6;

  /* marca e estados */
  --marca:#1A66FF;
  --marca-forte:#0F4FC4;
  --marca-fundo:#EDF3FF;
  --marinho:#04203F;
  --verde:#0E9F6E;    --verde-fundo:#E7F7F0;   --verde-traco:#BCE5D3;
  --ambar:#C26A05;    --ambar-fundo:#FEF5E7;   --ambar-traco:#F5DFB8;
  --roxo:#6D4AFF;     --roxo-fundo:#F1EDFF;
  --vermelho:#DC3A2E; --vermelho-fundo:#FDEEEC; --vermelho-traco:#F5CFCB;

  /* espaço — escala única */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e7:32px; --e8:40px; --e9:56px;

  /* tipo — escala única (nada abaixo de 11px) */
  --t-xs:11px;    /* rótulo em caixa alta, contador */
  --t-s:12px;     /* apoio, data, legenda */
  --t-m:13px;     /* texto de tabela, botão, menu */
  --t-base:14px;  /* corpo */
  --t-l:15px;     /* título de cartão */
  --t-xl:18px;    /* título de bloco */
  --t-2xl:22px;   /* título de tela */
  --t-num:28px;   /* número de indicador */

  /* forma */
  --r-s:8px; --r-m:12px; --r-g:16px; --r-p:999px;
  --sombra-1:0 1px 2px rgba(14,27,46,.06);
  --sombra-2:0 6px 20px -6px rgba(14,27,46,.12);
  --sombra-3:0 24px 48px -16px rgba(14,27,46,.22);

  /* controles — botão e campo têm a mesma altura em qualquer tela */
  --controle-p:34px;
  --controle:40px;
  --controle-g:46px;
  --alvo-toque:44px;

  /* casco */
  --lateral-larg:248px;
  --painel-larg:400px;
  --topo-alt:64px;
  --conteudo-max:1360px;

  /* nomes antigos (laboratório, cadastro, documentos) apontando para os mesmos valores */
  --ground:var(--fundo); --surface:var(--papel); --line:var(--traco); --line-soft:var(--traco-leve);
  --ink:var(--tinta); --ink2:var(--tinta-2); --ink3:var(--tinta-3);
  --brand:var(--marca); --brand-deep:var(--marca-forte); --brand-soft:var(--marca-fundo);
  --s1:var(--sombra-1); --s2:var(--sombra-2); --s3:var(--sombra-3);
}

/* escondido é escondido, mesmo quando a classe define display */
[hidden]{display:none!important}

/* =========================================================
   Grade cheia — nenhuma linha pela metade.
   Quantas colunas cabem é decidido pelo grade.js a partir de data-min
   (largura mínima do item) e da quantidade de itens: prefere linhas
   iguais (3+3), depois equilibradas (4+3); a última linha estica e
   fecha a largura. Itens da mesma linha ficam com a mesma altura.
   ========================================================= */
.grade-cheia{--gap:var(--e3);display:flex;flex-wrap:wrap;gap:var(--gap);align-items:stretch}
.grade-cheia > *{
  flex:0 0 calc((100% - (var(--por-linha, 1) - 1) * var(--gap)) / var(--por-linha, 1) - .5px);
  min-width:0;
}
.grade-cheia > .fecha-linha{flex-grow:1}
.grade-cheia.gap-4{--gap:var(--e4)}
.grade-cheia.gap-2{--gap:var(--e2)}