/* Folha única da interface.
 *
 * Os números daqui foram MEDIDOS nas capturas de docs/refs (Rupa Health,
 * Blood Lab Dashboard) e convertidos para px de CSS — a captura é 3840px de
 * largura com a página em zoom, o que dá 2 pixels de captura por px de CSS.
 * A grade de cartões, por exemplo, mediu 2551px na captura: 1275px aqui, que
 * é exatamente 4×303 + 3×21. Onde um número parece arbitrário, ele foi medido.
 *
 * A pele agora é própria ("papel e tinta": papel quente, sem gradiente, número
 * em serifa, cor só onde diz estado), mas o esqueleto medido continua sendo o
 * da referência — larguras e grade não se mexem.
 */

/* As fontes são servidas daqui, não de um CDN: cada carregamento de página
   contaria a um terceiro que alguém abriu o prontuário. */
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/static/fontes/source-sans-3-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/static/fontes/source-sans-3-600.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/static/fontes/source-sans-3-700.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/static/fontes/source-serif-4-600.woff2") format("woff2");
}

:root {
  /* --- papel e tinta -------------------------------------------------- */
  --papel: #f7f4ee;          /* fundo da página */
  --papel-alto: #fffefb;     /* cartão, linha, modal */
  --papel-recuo: #efeadf;    /* cabeçalho de painel e de tabela */
  --traco: #e6dfd2;
  --traco-forte: #d5cbb8;
  --tinta: #23201c;
  --tinta-media: #6b6357;
  --tinta-fraca: #9a9084;    /* NÃO serve para texto: rende 2,9:1 sobre --papel,
                                e o mínimo da WCAG AA para texto normal é 4,5:1.
                                É para régua, eixo e ícone. Texto de apoio, por
                                menor que seja, usa --tinta-media. */
  --acao: #1f5f5b;           /* petróleo: não pode ser nenhum estado, senão
                                "Detalhes" pareceria um veredito */
  --acao-forte: #174a47;     /* o mesmo petróleo no hover */
  /* anel de foco: o petróleo lavado, mas lavado só até onde a WCAG 1.4.11
     permite — indicador de interface pede 3:1, e este rende 3,80:1 sobre
     --papel-alto, 3,49 sobre --papel e 3,19 sobre --papel-recuo. Era #cfe0dd,
     1,36:1: um anel que só funcionava porque a mesma regra também troca a
     borda para --acao, ou seja, decoração */
  --foco: #548c88;

  /* --- estado: quatro famílias, três papéis cada ----------------------
     Os seis estados do banco caem em quatro famílias porque a cor responde
     "que gravidade?" — quem responde "para que lado?" é a seta ▲▼.
     txt escreve · forte preenche a zona ativa e o ponto · fraco pinta a
     zona inativa e a faixa sombreada do gráfico.
     "sem referência" não tem txt de propósito: não julgado é a ausência de
     veredito, e ausência de veredito se escreve na tinta neutra. */
  --alterado-txt: #a8443a;  --alterado-forte: #c25a4b;  --alterado-fraco: #f0d9d4;
  --fora-txt:     #946814;  --fora-forte:     #c9922f;  --fora-fraco:     #f2e0cf;
  --ideal-txt:    #3d7049;  --ideal-forte:    #5d9166;  --ideal-fraco:    #e2e8dc;
                            --sem-forte:      #b8b0a2;  --sem-fraco:      #ebe6db;

  /* --- tipo ------------------------------------------------------------ */
  --f-serifa: "Source Serif 4", Georgia, serif;
  --f-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --t-capa: 44px;
  --t-secao: 30px;
  --t-valor: 30px;
  --t-sub: 21px;
  --t-corpo: 17px;
  --t-apoio: 14px;
  --t-rotulo: 12px;

  /* --- espaço: base 4 --------------------------------------------------
     Só os degraus que a folha usa. O resto do espaçamento (21, 26, 30, 62,
     68, 90…) foi MEDIDO na referência, nunca vai cair na base 4 e continua
     literal de propósito — não "conserte" arredondando. */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px;
  --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;

  /* --- forma ----------------------------------------------------------- */
  --r-p: 8px;                /* cartão, campo, botão — papel é recortado */
  --r-g: 12px;               /* modal */
  --r-pilula: 999px;         /* zona da barra */
  --sombra: 0 1px 2px rgba(35, 32, 28, .05);
  --sombra-alta: 0 20px 50px rgba(35, 32, 28, .18);   /* modal e cartão de entrada */
}

* { box-sizing: border-box; }

/* O atributo hidden do HTML só esconde por causa de [hidden]{display:none} na
   folha PADRÃO do navegador — e qualquer regra de classe daqui ganha dela. Sem
   esta linha, .cartao{display:flex} e .linha{display:grid} venciam o hidden e o
   filtro da busca marcava os elementos sem que nada sumisse da tela: os blocos
   de sistema (que não têm display próprio) desapareciam, e os cartões dentro do
   bloco encontrado continuavam todos à mostra. O JavaScript estava certo; era
   a cascata que o anulava, calada.

   !important porque [hidden] tem a mesma especificidade de .cartao, e quem
   vem depois na folha vence — não dá para garantir a ordem para sempre. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 var(--t-corpo)/1.55 var(--f-sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acao); text-decoration: none; }

/* --- topo e faixa do título ---------------------------------------------- */

/* papel não tem gradiente: só uma régua separando o topo do resto */
.faixa { background: var(--papel-alto); border-bottom: 1px solid var(--traco); }

.barra-topo {
  display: flex;
  /* a barra QUEBRA: são sete itens numa linha e a página declara
     `viewport width=device-width`, então o navegador de telefone não dá mais
     zoom-out para caber. Sem isto o documento inteiro rolava de lado a 375px
     (703px de scrollWidth) e o seletor de diretriz saía da tela */
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  padding: 20px 0 var(--e-1);
  font-size: var(--t-corpo);
}

.marca {
  font-size: var(--t-sub);
  font-weight: 700;
  letter-spacing: 2.4px;
  color: var(--tinta);
  margin-right: var(--e-2);
}

.barra-topo a { color: var(--tinta-media); font-weight: 600; }
.barra-topo a:hover { color: var(--acao); }
.barra-topo .direita { margin-left: auto; display: flex; gap: 22px; align-items: center; }
/* "diretriz" é o rótulo do seletor, e rótulo é texto de apoio: --tinta-media
   (5,87:1) e --t-apoio. Era #8b96af/15px inline — o cinza-azulado da referência
   que esta pele abandonou, 2,94:1, reprovado na WCAG AA, e num tamanho que não
   é degrau da escala */
.barra-topo .direita .rotulo { color: var(--tinta-media); font-size: var(--t-apoio); }

.envelope { max-width: 1600px; margin: 0 auto; padding: 0 var(--e-5); }

h1.titulo {
  font-family: var(--f-serifa);
  font-size: var(--t-capa);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.5px;
  margin: var(--e-6) 0 var(--e-4);
}

.identificacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
  padding-bottom: var(--e-7);
  font-size: var(--t-corpo);
  color: var(--tinta);
}

.identificacao span { display: inline-flex; align-items: center; gap: 9px; }
.identificacao .direita { margin-left: auto; display: flex; gap: 26px; }
.identificacao .direita a { font-weight: 600; }
.identificacao .separa { color: var(--traco-forte); }

/* --- duas colunas --------------------------------------------------------- */

.colunas {
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: 68px;
  align-items: start;
  /* a busca e a primeira seção encostavam na régua da faixa do topo: o grid
     começava colado na borda. O respiro vale para as duas colunas de uma vez */
  padding-top: var(--e-5);
  padding-bottom: 90px;
}

/* item de grid nasce com min-width:auto, ou seja, não encolhe abaixo do
   próprio min-content: uma tabela larga dentro da coluna empurrava a COLUNA, e
   com ela o documento inteiro — a 375px o catálogo rolava de lado. Com o zero,
   quem é largo demais rola dentro da própria folha (ver .folha) */
.colunas > * { min-width: 0; }

.lateral { position: sticky; top: 20px; }

.busca {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--traco);
  border-radius: var(--r-p);
  /* o stroke da lupa é --tinta-fraca escrito à mão: var() não vale dentro de
     data-URI. Se o token mudar, mude aqui junto. */
  background: var(--papel-alto) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9084' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") no-repeat 12px center / 18px;
  font: inherit;
  font-size: var(--t-corpo);
  color: var(--tinta);
}
.busca::placeholder { color: var(--tinta-media); }
.busca:focus { outline: 2px solid var(--foco); border-color: var(--acao); }

.grupo-lateral {
  margin: 30px 0 10px;
  font-size: var(--t-rotulo);
  font-weight: 700;
  letter-spacing: .9px;
  color: var(--tinta-media);
}

.lateral a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;   /* medido: 47px de passo entre itens da coluna */
  margin-left: -14px;
  border-radius: var(--r-p);
  color: var(--tinta);
  font-size: var(--t-corpo);
}
.lateral a:hover { background: var(--papel-recuo); }
.lateral a .icone { font-size: 19px; line-height: 1; }

/* --- seções --------------------------------------------------------------- */

.secao {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  /* o ar vem ANTES do título, não depois do bloco anterior: .cartoes, .linhas
     e .painel não têm margem de baixo, e sem isto a régua da seção seguinte
     encosta no último cartão. Era `.secao + .secao { margin-top: 44px }`, que
     nunca casou — nas duas telas que usam .secao sempre há conteúdo no meio,
     e foi /estilo, com onze seções seguidas, que mostrou o buraco. */
  margin: 44px 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--traco);
  font-family: var(--f-serifa);
  font-size: var(--t-secao);
  font-weight: 600;
}
.secao .selo {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-p);
  background: var(--papel-recuo);
  font-size: 19px;
}
/* a primeira seção da coluna não recua: no painel ela precisa alinhar com o
   topo da lateral, e o grid é align-items:start */
.secao:first-child { margin-top: 0; }

h2.sistema {
  margin: 40px 0 var(--e-4);
  font-size: var(--t-sub);
  font-weight: 600;
}

/* --- linha do marcador alterado ------------------------------------------- */

.linhas { display: flex; flex-direction: column; gap: var(--e-3); }

.linha {
  display: grid;
  grid-template-columns: 300px 220px 1fr;
  align-items: center;
  gap: 20px;
  min-height: 92px;
  padding: var(--e-4) var(--e-5);
  background: var(--papel-alto);
  border: 1px solid var(--traco);
  border-radius: var(--r-p);
  box-shadow: var(--sombra);
  color: inherit;
}
/* linha e cartão são a mesma superfície clicável, então o hover é o mesmo */
.linha:hover, .cartao:hover { border-color: var(--traco-forte); box-shadow: 0 0 0 2px var(--traco); }
.linha .nome { font-size: var(--t-sub); font-weight: 700; }
.linha .detalhes { font-size: var(--t-corpo); font-weight: 600; color: var(--acao); }

/* --- cartão da grade ------------------------------------------------------ */

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 21px;
}

.cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 152px;
  padding: 20px 20px 26px;
  background: var(--papel-alto);
  border: 1px solid var(--traco);
  border-radius: var(--r-p);
  box-shadow: var(--sombra);
  color: inherit;
  overflow: hidden;
}
.cartao .nome { font-size: var(--t-sub); font-weight: 700; line-height: 1.25; }
.cartao .rodape {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-3);
  margin-top: auto;
  padding-top: 18px;
}
.cartao .detalhes { font-size: var(--t-corpo); font-weight: 600; color: var(--acao); white-space: nowrap; }
/* sem itálico: só baixamos pesos normais, e aqui a hierarquia se faz com tom */
.cartao .idade {
  font-size: var(--t-apoio);
  color: var(--tinta-media);
  margin-top: var(--e-1);
}

/* --- estado: rótulo e valor ----------------------------------------------- */

.rotulo-estado {
  font-size: var(--t-apoio);
  font-weight: 700;
  letter-spacing: .3px;
  margin-bottom: 2px;
}
.valor {
  font-family: var(--f-serifa);
  font-size: var(--t-valor);
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}
.valor .unidade { font-family: var(--f-sans); font-size: var(--t-apoio); font-weight: 600; }
.valor .seta { font-family: var(--f-sans); font-size: var(--t-apoio); margin-right: 3px; vertical-align: 2px; }

/* O mapa estado→família mora em src/estados.py; aqui só se pinta o que ele
   decidiu. Rótulo e número saem na mesma cor: sobre papel, dois tons do mesmo
   vermelho viram sujeira, e a serifa já dá ao número o peso que a diferença de
   tom dava. */
.e-baixo .rotulo-estado, .e-alto .rotulo-estado { color: var(--alterado-txt); }
.e-baixo .valor, .e-alto .valor { color: var(--alterado-txt); }
.e-abaixo_otimo .rotulo-estado, .e-acima_otimo .rotulo-estado { color: var(--fora-txt); }
.e-abaixo_otimo .valor, .e-acima_otimo .valor { color: var(--fora-txt); }
.e-otimo .rotulo-estado, .e-normal .rotulo-estado { color: var(--ideal-txt); }
.e-otimo .valor, .e-normal .valor { color: var(--ideal-txt); }
.e-sem_referencia .rotulo-estado { color: var(--tinta-media); }
.e-sem_referencia .valor { color: var(--tinta-media); }

/* --- a barra de faixas ----------------------------------------------------
 * Zonas de peso igual (as três do meio viram uma só quando não há faixa ótima
 * — ver src/estados.py). Cada zona é uma pílula chapada: viva quando o valor
 * está nela, pálida quando não.
 */

.faixas { --alt: 10px; }
.faixas .rotulos, .faixas .zonas, .faixas .limites { position: relative; }
.faixas .rotulos { height: 18px; }
.faixas .rotulos span {
  position: absolute;
  transform: translateX(-50%);
  font-size: var(--t-rotulo);
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--tinta-media);
  white-space: nowrap;
}
.faixas .rotulos span.ativa { color: var(--tinta); }

.faixas .zonas { height: var(--alt); margin-top: 6px; }
.faixas .zonas i {
  position: absolute;
  top: 0;
  height: var(--alt);
  border-radius: var(--r-pilula);
}
.faixas .bolinha {
  position: absolute;
  top: 50%;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 3px solid var(--papel-alto);
  box-shadow: 0 1px 3px rgba(35, 32, 28, .3);
}

.faixas .limites { height: 22px; margin-top: 3px; }
.faixas .limites span {
  position: absolute;
  transform: translateX(-50%);
  font-size: var(--t-apoio);
  font-weight: 600;
  color: var(--tinta-media);
  white-space: nowrap;
}
.faixas .limites span.forte { color: var(--tinta); }

/* uma regra por família, chapada. O gradiente e o espelhamento existiam para
   dizer de que lado ficava o problema; a família e a seta já dizem isso. */
.z-alterado { background: var(--alterado-fraco); }
.z-fora     { background: var(--fora-fraco); }
.z-ideal    { background: var(--ideal-fraco); }
.z-sem      { background: var(--sem-fraco); }
.z-alterado.viva { background: var(--alterado-forte); }
.z-fora.viva     { background: var(--fora-forte); }
.z-ideal.viva    { background: var(--ideal-forte); }
.z-sem.viva      { background: var(--sem-forte); }

.b-alterado { background: var(--alterado-forte); }
.b-fora     { background: var(--fora-forte); }
.b-ideal    { background: var(--ideal-forte); }
.b-sem      { background: var(--sem-forte); }

/* --- a mesma barra, miniatura, colada no pé do cartão --------------------- */

.mini {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
}
.mini i {
  position: absolute;
  bottom: 0;
  height: 5px;
  border-radius: var(--r-pilula);
}

/* --- a série no tempo ----------------------------------------------------
 * As zonas reusam .z-* da barra: é a mesma regra de cor deitada. */

svg.serie { display: block; width: 100%; height: auto; }
svg.serie .z-alterado { fill: var(--alterado-fraco); }
svg.serie .z-fora     { fill: var(--fora-fraco); }
svg.serie .z-ideal    { fill: var(--ideal-fraco); }
svg.serie .z-sem      { fill: var(--sem-fraco); }

svg.serie .eixo { stroke: var(--traco); stroke-width: 1; }
svg.serie .degrau { stroke: var(--traco-forte); stroke-width: 1; stroke-dasharray: 3 3; }
svg.serie .meta { stroke: var(--ideal-forte); stroke-width: 1.2; stroke-dasharray: 5 4; }
svg.serie .meta-txt {
  font: 700 10px var(--f-sans); letter-spacing: .6px; fill: var(--ideal-txt);
}
/* rótulo de eixo é TEXTO: --tinta-media, não --tinta-fraca (que rende 2,9:1
   sobre papel e reprova AA — ver a seção de contraste na spec).

   Chamou-se .marca e saía "2 0 2 1": .marca já é a assinatura EXAMES da barra
   do topo, e o shorthand `font:` NÃO reseta letter-spacing — os 2,4px dela
   vazavam para dentro do gráfico. Toda classe daqui vive sob svg.serie e não
   reusa nome de fora; -txt casa com .meta-txt logo acima. */
svg.serie .eixo-txt { font: 400 11px var(--f-sans); fill: var(--tinta-media); }
svg.serie .traco { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linejoin: round; }
/* o anel claro separa o ponto da faixa colorida atrás dele, mas grosso demais
   ele engorda a bolinha e come a linha entre dois pontos próximos no tempo */
svg.serie .ponto { stroke: var(--papel-alto); stroke-width: 1.6; }
svg.serie .b-alterado { fill: var(--alterado-forte); }
svg.serie .b-fora     { fill: var(--fora-forte); }
svg.serie .b-ideal    { fill: var(--ideal-forte); }
svg.serie .b-sem      { fill: var(--sem-forte); }

/* o valor escrito acima de cada ponto. Nasce em tinta neutra: a zona ao fundo
   já diz quais estão fora, e repetir isso em sete números coloridos não
   destaca nenhum. Só o último ponto — o "e agora?" — recebe a cor da família,
   a mesma do número grande do cartão.
   `sem` não entra: não julgado é a ausência de veredito, e ausência de
   veredito se escreve na tinta neutra, que é o que .ponto-txt já é. */
svg.serie .ponto-txt { font: 600 11px var(--f-sans); fill: var(--tinta); }
svg.serie .t-alterado { fill: var(--alterado-txt); }
svg.serie .t-fora     { fill: var(--fora-txt); }
svg.serie .t-ideal    { fill: var(--ideal-txt); }

.legenda {
  display: flex; flex-wrap: wrap; gap: var(--e-4);
  padding: var(--e-2) 0 0;
  font-size: var(--t-apoio); color: var(--tinta-media);
}
/* a amostra não redeclara cor: o .z-* dela é literalmente a mesma regra que
   pinta a barra de faixas, que é o que esta seção inteira afirma */
.legenda i {
  display: inline-block; width: 16px; height: 9px; border-radius: 2px;
  margin-right: 6px; vertical-align: -1px;
}
.legenda i.meta { height: 2px; border-radius: 0; background: var(--ideal-forte); }
/* duas ausências diferentes que por acaso são da mesma cor: .excluidos são
   medições descartadas por unidade, .fora-escala é a meta que o desenho não
   alcança. Uma classe para dois significados é dívida barata de evitar */
.legenda .excluidos   { color: var(--fora-txt); }
.legenda .fora-escala { color: var(--fora-txt); }

/* --- modal do marcador ---------------------------------------------------- */

.veu {
  position: fixed;
  inset: 0;
  background: rgba(35, 32, 28, .34);
  display: grid;
  place-items: start center;
  padding: 60px 20px;
  overflow-y: auto;
  z-index: 20;
}

.modal {
  width: min(900px, 100%);   /* medido na captura: 900px de largura */
  background: var(--papel-alto);
  border-radius: var(--r-g);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}

.modal .cabeca {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 26px 30px 22px;
}
.modal .cabeca h2 {
  margin: 0 0 6px;
  font-family: var(--f-serifa);
  font-size: var(--t-secao);
  font-weight: 600;
}
.modal .fechar {
  margin-left: auto;
  border: 0;
  background: none;
  font-size: var(--t-secao);
  line-height: 1;
  color: var(--tinta-media);
  cursor: pointer;
}

.modal .corpo {
  padding: 22px;
  background: var(--papel);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.painel {
  background: var(--papel-alto);
  border: 1px solid var(--traco);
  border-radius: var(--r-p);
  overflow: hidden;
}
.painel > .cabecalho {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  background: var(--papel-recuo);
  font-size: var(--t-corpo);
  font-weight: 600;
}
.painel > .cabecalho .direita { margin-left: auto; font-size: var(--t-corpo); }
/* o quadradinho escuro do cabeçalho do painel, como na referência */
.painel > .cabecalho .ic {
  width: 21px; height: 21px; flex: none;
  display: grid; place-items: center;
  border-radius: 5px;
  background: var(--tinta);
  color: var(--papel-alto);
  font-size: var(--t-rotulo);
  font-weight: 700;
}
.painel > .conteudo { padding: 22px; font-size: var(--t-corpo); line-height: 1.62; color: var(--tinta); }

/* quatro variantes sobre papel: âmbar por padrão, .calmo sem cor quando é só
   recado, .ruim quando barra, .bom quando passa. As bordas e fundos aqui são
   hexes soltos de propósito: são mais pálidos que qualquer -fraco e existem
   uma vez cada, fora da matriz txt/forte/fraco. */
.aviso {
  border: 1px solid #eddfc4;
  background: #fffbf2;
  border-radius: var(--r-p);
  padding: var(--e-4) var(--e-5);
  font-size: var(--t-corpo);
  line-height: 1.6;
  color: var(--fora-txt);
}
.aviso.calmo { border-color: var(--traco); background: var(--papel-alto); color: var(--tinta); }
.aviso.bom   { border-color: #cfdfc9; background: #f5f9f2; color: var(--ideal-txt); }
/* o papel rosado do "algo está errado aqui" mora num lugar só: o aviso o usa
   com caixa, e a linha do laudo que veio com aviso (conferência) usa só o
   fundo — numa <tr> a borda e o padding do .aviso não fazem sentido */
.aviso.ruim, tr.atencao { background: #fdf5f3; }
.aviso.ruim  { border-color: #e8cdc7; color: var(--alterado-txt); }

.rodape-legal {
  font-size: var(--t-apoio);
  line-height: 1.6;
  color: var(--tinta-media);
  padding: 0 var(--e-1) var(--e-1);
}

/* --- tabelas e formulários (coletas, conferência, upload) ------------------ */

.folha {
  background: var(--papel-alto);
  border: 1px solid var(--traco);
  border-radius: var(--r-p);
  box-shadow: var(--sombra);
  padding: var(--e-5) 26px;
  margin-bottom: 22px;
  /* a tabela da conferência tem largura mínima própria — são campos com
     `size=`, que não encolhem — e mede 655px numa tela de 375. Ela rola DENTRO
     da folha em vez de arrastar o documento de lado: quebrar a tabela em
     cartões seria outra tela, e esta é a de conferir número por número contra
     o papel */
  overflow-x: auto;
}

table { width: 100%; border-collapse: collapse; font-size: var(--t-corpo); }
th, td { text-align: left; padding: var(--e-3) 14px; border-bottom: 1px solid var(--traco); }
th {
  font-size: var(--t-rotulo);
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--tinta-media);
}
tr:last-child td { border-bottom: 0; }

input[type=text], input[type=date], input[type=file], input[type=email],
input[type=password], input:not([type]) {
  font: inherit;
  font-size: var(--t-corpo);
  padding: var(--e-2) 10px;
  border: 1px solid var(--traco);
  border-radius: var(--r-p);
  background: var(--papel-alto);
  color: var(--tinta);
}
input:focus { outline: 2px solid var(--foco); border-color: var(--acao); }

button {
  font: inherit;
  font-size: var(--t-corpo);
  font-weight: 600;
  padding: 11px 22px;
  border: 0;
  border-radius: var(--r-p);
  background: var(--acao);
  color: var(--papel-alto);
  cursor: pointer;
}
button:hover { background: var(--acao-forte); }

/* --- entrada, código, recuperação ---------------------------------------- */

.entrada {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  background: var(--papel);
}

.cartao-entrada {
  width: min(400px, 100%);
  padding: 34px 34px 30px;
  background: var(--papel-alto);
  border-radius: var(--r-g);
  box-shadow: var(--sombra-alta);
}
.cartao-entrada .marca {
  font-size: var(--t-apoio);
  letter-spacing: 2.4px;
  font-weight: 700;
  color: var(--tinta-media);
  margin-bottom: 20px;
}
.cartao-entrada h1 {
  margin: 0;
  font-family: var(--f-serifa);
  font-size: var(--t-secao);
  font-weight: 600;
}
.cartao-entrada .ajuda {
  margin: var(--e-2) 0 0;
  font-size: var(--t-apoio);
  line-height: 1.55;
  color: var(--tinta-media);
}
.cartao-entrada label {
  display: block;
  margin: 18px 0 6px;
  font-size: var(--t-apoio);
  font-weight: 600;
  color: var(--tinta-media);
}
.cartao-entrada input { width: 100%; padding: 10px var(--e-3); }
.cartao-entrada input.codigo {
  font-size: var(--t-secao);
  text-align: center;
  letter-spacing: .32em;
  padding: 10px;
}
.cartao-entrada button { width: 100%; margin-top: 22px; }
.cartao-entrada .pe { margin: 20px 0 0; font-size: var(--t-apoio); }
.cartao-entrada .pe a { color: var(--tinta-media); }
.cartao-entrada code {
  display: block;
  margin: 10px 0;
  padding: 10px var(--e-3);
  background: var(--papel);
  border-radius: var(--r-p);
  font-size: var(--t-rotulo);
  word-break: break-all;
  color: var(--tinta-media);
}
.cartao-entrada .aviso { margin-top: 18px; padding: var(--e-3) 14px; font-size: var(--t-apoio); }

.vazio {
  padding: 60px 0;
  text-align: center;
  color: var(--tinta-media);
  font-size: var(--t-corpo);
}

@media (max-width: 1000px) {
  .colunas { grid-template-columns: 1fr; gap: 30px; }
  .lateral { position: static; }
  h1.titulo { font-size: 40px; margin-top: 28px; }
  .linha { grid-template-columns: 1fr; min-height: 0; gap: var(--e-3); }
  /* os 26px de gap foram medidos ENTRE LINKS, na horizontal; repetidos entre
     as linhas que a quebra cria eles davam 161px de barra num telefone. E o
     seletor de diretriz alinha à esquerda como o resto assim que vira linha
     própria — o `margin-left:auto` só faz sentido enquanto há uma linha só */
  .barra-topo { row-gap: var(--e-3); }
  .barra-topo .direita { margin-left: 0; }
  .identificacao { padding-bottom: 34px; gap: var(--e-4); font-size: var(--t-corpo); }
  .identificacao .direita { margin-left: 0; }
}