/* ============================================================================
   Bovex Vet — sistema de design
   ----------------------------------------------------------------------------
   Sem framework. Na Fase 3 este arquivo cabe inteiro no precache do service
   worker — o app tem de abrir no curral, sem rede.

   Clima: instrumento clínico, não app de startup. Papel branco, texto grafite
   esverdeado, verde-garrafa como única cor de ação — escuro o bastante para
   nunca se confundir com o verde claro de "prenha", que é o único outro verde
   que a tela usa. IBM Plex Sans na interface e IBM Plex Mono em tudo que é
   número: brinco, dia do protocolo, contagem, dose.

   Duas restrições vêm do campo e mandam no resto:
     1. Sol a pino  ->  contraste alto, nada de cinza sobre cinza.
     2. Celular, de pé, com pressa  ->  alvo grande e ação sempre ao alcance.
   ========================================================================= */

/* ---- tokens ------------------------------------------------------------- */
/* Os verdes são os da logo, medidos nela e não escolhidos por perto:
   verde-garrafa #0f3d20, que desenha o touro e o BOVEX, e verde-folha #579828,
   que assina o IATF e o arco. O garrafa manda — é ele a cor de ação e a cor da
   barra; o folha entra só como acento, do mesmo jeito que entra na logo. Um
   terceiro verde no meio do caminho era o que fazia a tela parecer de outra
   marca que não a do adesivo na porta da caminhonete. */
:root {
  color-scheme: light;

  /* grafite esverdeado, na matiz do garrafa */
  --tinta:    #101612;
  --tinta-2:  #46534b;
  --tinta-3:  #77887d;
  --tinta-4:  #a1afa6;

  /* papel e linhas */
  --papel:      #ebedec;
  --superficie: #ffffff;
  /* O campo de digitar é superfície própria, e não a do cartão. No claro os
     dois são brancos e quem desenha a caixa é a borda; no escuro borda sozinha
     não dá conta, e sem este token o input virava um buraco preto dentro de um
     cartão preto. */
  --campo:      #ffffff;
  --linha:      #d3dad5;
  --linha-2:    #e6eae8;
  --repouso:    #f0f2f1;

  /* verde-garrafa — a única cor de ação */
  --acao:       #0f3d20;
  --acao-forte: #0a2c17;
  --acao-tenue: #edf5f0;
  --acao-linha: #bfd9c9;

  /* a barra lateral: o verde quase preto do fundo da arte da logo */
  --barra:         #021709;
  --barra-tinta:   #e4edde;
  --barra-tinta-2: #afc89d;
  --barra-ativo:   rgba(255,255,255,.12);
  --barra-hover:   rgba(255,255,255,.06);
  --barra-linha:   rgba(255,255,255,.13);
  /* O verde-folha, onde a logo o usa: como acento sobre o garrafa. É o
     #71cb32 exato que a arte em fundo escuro usa no IATF — barra e logo
     falando a mesma cor, e não duas parecidas. */
  --barra-icone:   #71cb32;
  --barra-icone-forte: #8ade4a;
  /* o miolo do ícone: o dado dentro da coisa */
  --barra-icone-detalhe: #cee3bf;
  /* a pastilha atrás do ícone, e o garrafa que ele vira quando ela acende */
  --barra-pastilha:       rgba(255,255,255,.08);
  --barra-pastilha-forte: rgba(255,255,255,.15);
  --barra-pastilha-tinta: #0f3d20;

  /* estados do domínio.
     `prenha` é verde e a ação também. Agora que a ação é o garrafa da logo, o
     que separa os dois é a claridade e o modo de aparecer: a ação é quase
     preta e só existe em preenchimento sólido (botão, item ativo); a prenhez é
     um verde médio e só existe em etiqueta pálida. Botão com a cara do melhor
     resultado possível de um DG faz o veterinário ler a tela com o olho
     errado. */
  --prenha:       #1f7a52;
  --prenha-bg:    #e6f4ec;
  --prenha-linha: #b9ddc9;
  --vazia:        #c0392b;
  --vazia-bg:     #fdecea;
  --vazia-linha:  #f2c9c4;
  --atencao:      #b87a0a;
  --atencao-bg:   #fef5de;
  --atencao-linha: #ecd9a6;

  /* forma */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-full: 999px;

  --sombra: 0 1px 3px rgba(20,24,15,.06), 0 1px 2px rgba(20,24,15,.04);
  --sombra-alta: 0 8px 24px rgba(20,24,15,.12), 0 4px 8px rgba(20,24,15,.06);

  /* Tipografia: UMA família, e só. O que separa título de texto é peso e
     entreletra; o que alinha número em coluna é `font-variant-numeric:
     tabular-nums`. */
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --lateral: 250px;
  --lateral-recolhida: 68px;
  --respiro: 2.25rem;
}

/* ---- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -.028em;
  margin: 0;
  line-height: 1.2;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
h4, h5 { font-family: var(--fonte); font-weight: 650; margin: 0; }
p { margin: 0 0 .85rem; }
a { color: var(--tinta); text-decoration-color: var(--tinta-4); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--acao); color: var(--acao); }
img { max-width: 100%; }
table { border-collapse: collapse; width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
td, th, .num { font-variant-numeric: tabular-nums; }
::selection { background: var(--acao-tenue); }

/* ---- estrutura ---------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }

/* A lateral carrega a cor. É a única região que não muda de tela para tela,
   então é onde o verde pode ser sólido sem competir com o dado. */
.lateral {
  width: var(--lateral);
  flex: 0 0 var(--lateral);
  background: var(--barra);
  color: var(--barra-tinta);
  padding: 1.6rem 0 1.2rem;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
/* A marca é a logo, e não um texto que a imita. São dois arquivos com o mesmo
   desenho e tintas diferentes — `bovex.png` para papel claro, `bovex-claro.png`
   para fundo escuro — porque a logo veio achatada sobre branco e um caixote
   branco dentro da barra verde seria pior do que não ter logo nenhuma.

   A barra e o topo do celular são escuros nos dois temas, então pedem o claro
   direto, sem condição. Só o login precisa escolher, e escolhe pela mesma
   regra do sol e da lua lá embaixo.

   O recuo é do container, não dela: o cabeçalho da barra já afasta 1.4rem, que
   é onde a coluna de ícones começa. Quando a marca era texto os dois recuos se
   somavam e ela nascia desalinhada dos itens. */
.marca {
  display: block; padding: 0;
  text-decoration: none; line-height: 0;
}
.marca img { display: block; width: 176px; height: auto; }
.marca .marca-simbolo { display: none; }
.marca-noite { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .marca-dia { display: none; }
  :root:not([data-tema="claro"]) .marca-noite { display: block; }
}
:root[data-tema="noite"] .marca-dia { display: none; }
:root[data-tema="noite"] .marca-noite { display: block; }
:root[data-tema="claro"] .marca-dia { display: block; }
:root[data-tema="claro"] .marca-noite { display: none; }

.nav { display: flex; flex-direction: column; gap: 1px; padding: 0 .75rem; }
/* O botão entra na mesma regra do link porque "Sair" é uma ação do mesmo peso
   que as outras — só é <button> porque logout é POST. O <form> some com
   `display: contents` para não quebrar a coluna. */
.nav a, .nav button {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; border: 0; background: transparent;
  padding: .62rem .7rem; border-radius: var(--r);
  color: var(--barra-tinta-2); text-decoration: none;
  font: inherit; font-weight: 500; text-align: left;
  cursor: pointer;
  position: relative;
}
.nav form { display: contents; }
.nav a:hover, .nav button:hover { background: var(--barra-hover); color: var(--barra-tinta); }
.nav a.ativo { background: var(--barra-ativo); color: #fff; font-weight: 600; }
/* O ícone mora numa pastilha, e isso não é enfeite: risco fino de verde
   sobre a barra verde vibra e some ao mesmo tempo — falta chão para o desenho.
   A pastilha dá esse chão, e de quebra alinha a coluna de rótulos.

   No item ativo ela acende no verde da logo e o ícone vira garrafa: é o par de
   cores da marca, invertido. Como isso já grita o suficiente, o marcador
   vertical que existia aqui saiu — era a tela dizendo a mesma coisa duas vezes. */
.nav .ico {
  width: 18px; height: 18px; flex: 0 0 18px;
  box-sizing: content-box; padding: 6px; border-radius: 8px;
  background: var(--barra-pastilha);
  color: var(--barra-icone);
  --ico-detalhe: var(--barra-icone-detalhe);
  transition: background .12s ease, color .12s ease;
}
.nav a:hover .ico, .nav button:hover .ico {
  background: var(--barra-pastilha-forte); color: var(--barra-icone-forte);
}
.nav a.ativo .ico {
  background: var(--barra-icone); color: var(--barra-pastilha-tinta);
  --ico-detalhe: var(--barra-pastilha-tinta);
}

.rodape-lateral {
  margin-top: auto; padding-top: .85rem;
  border-top: 1px solid var(--barra-linha);
}
/* Quem sou eu é informação, não ação: fica como texto, sem alvo de clique, e é
   o contraste com as três linhas abaixo que diz isso sem precisar de rótulo. */
.rodape-lateral .quem {
  padding: 0 1.45rem .7rem;
  font-size: .82rem; line-height: 1.45; color: var(--barra-tinta-2);
}
.rodape-lateral .quem b { display: block; color: var(--barra-tinta); font-weight: 600; }
.nav-fim a, .nav-fim button { font-weight: 500; font-size: .93rem; }
/* Equipe, trocar, sair e tema são ações do sistema, não do rebanho: sem
   pastilha e na cor do texto, para que os seis itens de cima leiam como um grupo
   só. A caixa continua do mesmo tamanho — o que alinha a coluna de rótulos. */
.nav-fim .ico {
  background: transparent; color: inherit; --ico-detalhe: currentColor;
}
.nav-fim a:hover .ico, .nav-fim button:hover .ico {
  background: var(--barra-pastilha); color: inherit;
}

.conteudo {
  flex: 1; min-width: 0; margin-inline: auto;
  padding: var(--respiro) 2.5rem 6rem; max-width: 1240px;
}
.topo-mobile { display: none; }
.perfil-menu { display: none; }

/* ---- cabeçalho de página ------------------------------------------------ */
.cabecalho {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.25rem; margin-bottom: 1.75rem; flex-wrap: wrap;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--linha);
}
.cabecalho .sub { color: var(--tinta-3); font-size: .95rem; margin-top: .35rem; }
.acoes { display: flex; gap: .55rem; flex-wrap: wrap; }

/* ---- cartões ------------------------------------------------------------ */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra);
}
.cartao.pad { padding: 1.4rem 1.5rem; }
/* A margem do último campo somava com o padding do cartão e deixava um vazio
   de 36px lá embaixo, que era o cartão seguinte começando mais tarde do que
   precisava — caro no celular, onde o que importa vem depois. */
.cartao.pad > .campo:last-child { margin-bottom: 0; }
/* Só na pilha. Dentro da grade quem afasta é o `gap`, e esta margem
   empurrava para baixo todo cartão que tivesse outro antes dele — o primeiro
   da linha ficava 16px mais alto que os três seguintes, que era o painel
   parecendo torto sem nada no HTML explicando por quê. */
:not(.grade) > .cartao + .cartao { margin-top: 1rem; }
.cartao-topo {
  padding: 1rem 1.5rem; border-bottom: 1px solid var(--linha-2);
  font-weight: 650; font-size: .95rem;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}

.grade { display: grid; gap: 1rem; }
.grade.c2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grade.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grade.c4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* ---- indicadores -------------------------------------------------------- */
.indicador { padding: 1.15rem 1.3rem; }
.indicador .rotulo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinta-3); font-weight: 650;
}
.indicador .valor {
  font-size: 2.4rem; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1.05; margin-top: .3rem; letter-spacing: -.03em;
}
.indicador .valor.prenha { color: var(--prenha); }
.indicador .valor.vazia  { color: var(--vazia); }

/* ---- botões ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; padding: 0 1.15rem;
  border: 1px solid transparent; border-radius: var(--r);
  background: var(--acao); color: #fff;
  font-weight: 600; font-size: .95rem;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .12s ease, transform .04s ease;
}
.btn:hover { background: var(--acao-forte); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-acento { background: var(--acao); color: #fff; }
.btn-acento:hover { background: var(--acao-forte); color: #fff; }
.btn-contorno { background: var(--superficie); color: var(--tinta); border-color: var(--linha); }
.btn-contorno:hover { background: var(--repouso); color: var(--tinta); border-color: var(--tinta-4); }
.btn-fantasma { background: transparent; color: var(--tinta-3); }
.btn-fantasma:hover { background: var(--repouso); color: var(--tinta); }
.btn-perigo { background: var(--superficie); color: var(--vazia); border-color: var(--vazia-linha); }
.btn-perigo:hover { background: var(--vazia-bg); color: var(--vazia); }
.btn-sm { min-height: 36px; padding: 0 .8rem; font-size: .88rem; }
.btn-bloco { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---- formulários -------------------------------------------------------- */
.campo { margin-bottom: 1.25rem; }
.campo > label {
  display: block; font-weight: 600; font-size: .88rem;
  margin-bottom: .4rem; color: var(--tinta-2);
}
.ajuda { font-size: .85rem; color: var(--tinta-3); margin-top: .35rem; line-height: 1.45; }
.erro  { font-size: .85rem; color: var(--vazia); margin-top: .35rem; font-weight: 500; }

input[type=text], input[type=date], input[type=number], input[type=password],
input[type=email], input[type=time], input[type=search], select, textarea {
  width: 100%; min-height: 46px; padding: .5rem .8rem;
  background: var(--campo); border: 1px solid var(--linha);
  border-radius: var(--r); outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--acao);
  box-shadow: 0 0 0 3px var(--acao-tenue);
}
input::placeholder { color: var(--tinta-4); }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237c818a' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center;
  padding-right: 2rem;
}
input[type=checkbox], input[type=radio] { width: 19px; height: 19px; accent-color: var(--acao); }
.linha-form { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.campo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.campo ul li label {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem; border: 1px solid var(--linha);
  border-radius: var(--r-full); cursor: pointer; font-size: .9rem;
  background: var(--superficie);
}
.campo ul li label:has(input:checked) {
  background: var(--acao-tenue); border-color: var(--acao); color: var(--acao-forte);
  font-weight: 600;
}

/* ---- entrada ------------------------------------------------------------ */
/* A única tela sem barra lateral. Sem a barra não há cor nem âncora: quem
   segura a página é a logo, então ela vai no eixo e o resto se alinha nela.
   Coluna estreita, bloco centrado, e uma linha embaixo do cartão para o
   formulário não terminar no vazio. */
.entrada {
  max-width: 372px; margin: 0 auto; padding: 5vh 0 1rem;
  text-align: center;
}
.marca-entrada { display: flex; justify-content: center; padding: 0 0 1.1rem; }
.marca-entrada img { width: 208px; }
.entrada-sub {
  color: var(--tinta-3); font-size: .95rem; line-height: 1.5;
  margin: 0 auto 1.6rem; max-width: 30ch;
}
/* O cartão volta para a esquerda: rótulo e campo se leem em coluna, não
   centrados. */
.entrada .cartao { text-align: left; }
.entrada .cartao.pad { padding: 1.6rem 1.5rem 1.5rem; }
.entrada .campo:last-of-type { margin-bottom: 1.5rem; }
.entrada-rodape {
  color: var(--tinta-4); font-size: .82rem; margin: 1.15rem 0 0;
}

/* ---- tabelas ------------------------------------------------------------ */
.tabela-rolagem { overflow-x: auto; border-radius: var(--r-lg); }
table.dados { background: var(--superficie); }
table.dados th {
  text-align: left; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--tinta-3); font-weight: 700;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--linha);
  background: var(--superficie); position: sticky; top: 0; z-index: 1;
}
table.dados td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--linha-2); }
table.dados tr:last-child td { border-bottom: none; }
table.dados tbody tr:hover { background: var(--papel); }
table.dados td.acao { text-align: right; white-space: nowrap; }
.brinco { font-weight: 700; font-size: 1.02rem; font-variant-numeric: tabular-nums; }

/* ---- etiquetas ---------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .2rem .6rem; border-radius: var(--r-full);
  font-size: .78rem; font-weight: 600;
  background: var(--repouso); color: var(--tinta-2);
  border: 1px solid transparent;
}
.tag-prenha   { background: var(--prenha-bg); color: var(--prenha); }
.tag-vazia    { background: var(--vazia-bg);  color: var(--vazia); }
.tag-alerta   { background: var(--atencao-bg); color: var(--atencao); }
.tag-acento   { background: var(--acao-tenue); color: var(--acao-forte); }
.tag-ink      { background: var(--tinta); color: #fff; }
.tag-contorno { background: transparent; border-color: var(--linha); color: var(--tinta-3); }

/* O marcador de dia é o elemento mais repetido do sistema. */
.dia {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.8rem; height: 1.85rem; padding: 0 .5rem;
  border-radius: var(--r-sm);
  background: var(--tinta); color: #fff;
  font-weight: 700; font-size: .88rem; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.dia.iatf { background: var(--acao); color: #fff; }
.dia.dg   { background: transparent; color: var(--tinta-2); border: 1.5px dashed var(--tinta-4); }

/* ---- avisos ------------------------------------------------------------- */
.aviso {
  padding: .95rem 1.15rem; border-radius: var(--r);
  border: 1px solid var(--linha); background: var(--superficie);
  margin-bottom: 1rem; font-size: .95rem;
  border-left: 3px solid var(--tinta-4);
}
.aviso-ok      { background: var(--prenha-bg); border-color: var(--prenha-linha); border-left-color: var(--prenha); }
.aviso-erro    { background: var(--vazia-bg);  border-color: var(--vazia-linha); border-left-color: var(--vazia); }
.aviso-atencao { background: var(--atencao-bg); border-color: var(--atencao-linha); border-left-color: var(--atencao); }
.aviso-nota    { background: var(--acao-tenue); border-color: var(--acao-linha); border-left-color: var(--acao); }

/* ============================================================================
   FAIXA DE PROTOCOLO — o componente-assinatura
   É o desenho do manual da Zoetis: trilho horizontal, barra cheia enquanto há
   dispositivo, tarja hachurada no intervalo de 48 h até a IATF. Qualquer
   veterinário de IATF reconhece a forma antes de ler.
   ========================================================================= */
/* O respiro de cima tem de caber as acoes do marco (`.faixa-acoes` sobe 58px
   e ainda escreve tres linhas): com 3rem elas ficavam cortadas pelo topo do
   cartao e so a setinha aparecia. Nas laterais, meio rotulo de dia — os
   rotulos das pontas sao centrados no ponto, entao metade deles fica fora. */
.faixa { padding: 6rem 3rem 2.4rem; overflow-x: auto; }
.faixa-area { position: relative; min-width: 600px; height: 50px; }
.faixa-area::before {
  content: ""; position: absolute; inset: 0;
  background: var(--repouso); border-radius: var(--r-full);
}
.faixa-seg { position: absolute; top: 0; bottom: 0; background: var(--repouso); }
.faixa-seg.cheio {
  background: var(--tinta);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: .75rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.faixa-seg.ate-iatf {
  background: repeating-linear-gradient(-45deg,
    var(--acao-tenue), var(--acao-tenue) 6px, #fff 6px, #fff 12px);
  display: flex; align-items: center; justify-content: center;
  color: var(--acao-forte); font-weight: 700; font-size: .76rem;
}
.faixa-seg:first-child { border-radius: var(--r-full) 0 0 var(--r-full); }
.faixa-seg:last-child  { border-radius: 0 var(--r-full) var(--r-full) 0; }

.faixa-ponto { position: absolute; top: 0; transform: translateX(-50%); }
.faixa-no {
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 3px solid var(--tinta);
  margin: 17px auto 0;
}
.faixa-ponto.iatf .faixa-no {
  background: var(--acao); border-color: #fff; width: 20px; height: 20px;
  margin-top: 15px; box-shadow: 0 0 0 3px var(--acao);
}
.faixa-ponto.dg .faixa-no { border-style: dashed; border-color: var(--tinta-3); }

.faixa-rotulo { position: absolute; top: 58px; left: 50%; transform: translateX(-50%);
                text-align: center; white-space: nowrap; }
.faixa-acoes {
  position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%);
  text-align: center; white-space: nowrap; font-size: .8rem;
  color: var(--tinta-2); line-height: 1.35;
}
.faixa-acoes .seta { color: var(--tinta-4); font-size: .95rem; line-height: 1; }

/* lista de passos */
.passos { list-style: none; margin: 0; padding: 0; }
.passos li { display: flex; gap: 1.1rem; padding: .95rem 0; border-bottom: 1px solid var(--linha-2); }
.passos li:last-child { border-bottom: none; }
.passos .quando { flex: 0 0 5rem; }
.passos li { position: relative; }
.passos .oque { min-width: 0; }
.passos .oque b { font-weight: 600; }

/* ---- escolher matrizes: busca e opções ---------------------------------- */
/* `hidden` no <tr> precisa de regra própria: a do navegador é fraca demais e
   perde para qualquer `display` que a tabela defina. */
.matrizes tr[hidden] { display: none; }
.escolha-topo { padding: 1rem 1.1rem; }
.busca-brinco { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
/* O X nativo do `search` fica colado na borda e rouba o toque de quem
   queria o fim do campo; limpar aqui é teclar Enter, que já limpa. */
.busca-brinco::-webkit-search-cancel-button { -webkit-appearance: none; }
.escolha-opcoes {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: .8rem;
}
.escolha-opcoes label {
  display: flex; align-items: center; gap: .5rem;
  cursor: pointer; color: var(--tinta-2); font-size: .92rem;
}
/* Alvo de dedo: a caixa de 13px do navegador é pequena para mão de curral. */
.escolha-opcoes input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 auto; }

/* ---- menu em gaveta ----------------------------------------------------- */
/* Só existe no celular; a media query o acende. Fechar é a mesma setinha que
   recolhe no desktop — as duas são a mesma ideia: tirar a barra da frente. */
.abre-gaveta { display: none; }
.abre-gaveta {
  flex: 0 0 auto; width: 38px; height: 38px; margin-left: -.35rem;
  place-items: center; padding: 0; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--barra-tinta); cursor: pointer;
}
.abre-gaveta:active { background: var(--barra-hover); }
.abre-gaveta .ico { width: 24px; height: 24px; }
.fundo-gaveta[hidden] { display: none; }

/* ---- menu de ações do cartão ------------------------------------------- */
/* Três pontinhos no canto do cartão: editar e excluir são do protocolo, então
   moram nele, e não numa tela à parte só para abrigar dois botões. */
.menu-cartao { position: relative; }
.menu-botao {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  color: var(--tinta-3); font-size: 1.25rem; line-height: 1;
  transition: background .12s ease, color .12s ease;
}
.menu-botao:hover, .menu-botao[aria-expanded="true"] {
  background: var(--repouso); color: var(--tinta);
}
.menu-botao:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acao-tenue); }

.menu-lista {
  position: absolute; top: calc(100% + .35rem); right: 0; z-index: 40;
  min-width: 11rem; padding: .35rem;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--r); box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
.menu-lista[hidden] { display: none; }
.menu-lista a, .menu-lista button {
  display: block; width: 100%; text-align: left;
  padding: .55rem .7rem; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--tinta); font: inherit;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.menu-lista a:hover, .menu-lista button:hover { background: var(--repouso); }
.menu-lista .perigo { color: var(--vazia); }
.menu-lista .perigo:hover { background: var(--vazia-bg); }

/* O cartão parou de ser link, então não finge mais que é: sem mãozinha e sem
   levantar no hover. Só o ⋯ age. */
.cartao-protocolo { cursor: default; }
/* O selo e o ⋯ não encolhem: espremidos, "prática de campo" quebrava em três
   linhas e empurrava o ⋯ para longe do cartão. Quem quebra é o nome, que é
   texto e se lê em duas linhas sem problema. */
.cartao-protocolo .tag { white-space: nowrap; }
.cartao-protocolo > .flex > .flex { flex: 0 0 auto; }

/* ---- estado vazio ------------------------------------------------------- */
/* Apagar nao divide barra com o resto: fica no fim, depois de um respiro que
   diz "acabou a leitura", e nao ao lado de nada que se clique sem pensar. */
.rodape-perigo { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--linha-2); }

.vazio { text-align: center; padding: 4rem 1.5rem; color: var(--tinta-3); }
.vazio h3 { color: var(--tinta); margin-bottom: .5rem; }
.vazio p { max-width: 42ch; margin: 0 auto 1.25rem; }

/* ---- barra fixa de ação ------------------------------------------------- */
/* Numa folha de 300 linhas, salvar não pode estar no fim da página. */
.barra-fixa {
  position: sticky; bottom: 0; z-index: 20;
  background: rgba(250,249,247,.93); backdrop-filter: blur(10px);
  border-top: 1px solid var(--linha);
  padding: .95rem 2.5rem; margin: 1.25rem -2.5rem -6rem;
  display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap;
}
.barra-fixa .cresce { flex: 1; min-width: 140px; }

/* Barra só com botões: o vão de 140px acima existe para a frase que as folhas
   de curral põem ali. Sem frase, ele jogava "Salvar" para a linha de baixo no
   celular. */
.barra-fixa.so-acoes { justify-content: flex-end; }

/* Página que cabe inteira na tela: sem nada para rolar, `sticky` não cola e os
   botões param no meio do vazio. Esticar o formulário até o rodapé empurra a
   barra para baixo; quando o protocolo cresce e a página passa a rolar, o
   sticky volta a mandar. O `:has` limita isso a quem pede — as outras telas
   continuam com o `.conteudo` em bloco. */
.conteudo:has(> .ate-o-rodape) { display: flex; flex-direction: column; }
.ate-o-rodape { flex: 1; display: flex; flex-direction: column; }
.ate-o-rodape > .barra-fixa { margin-top: auto; }

/* ---- etapas do protocolo ------------------------------------------------ */
/* Duas informações por etapa — o dia e o que fazer — não pedem tabela. A
   tabela virava rolagem horizontal no celular para mostrar dois campos.
   A linha não quebra nem no celular: uma etapa é uma linha, e a lista inteira
   se lê de cima a baixo como o protocolo no papel. */
.etapa-linha {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1.5rem; border-bottom: 1px solid var(--linha-2);
}
.etapa-linha:last-child { border-bottom: 0; }
.etapa-dia {
  flex: 0 0 auto; display: flex; align-items: center; gap: .2rem;
  font-weight: 650; color: var(--tinta-2);
}
.etapa-dia input { width: 3.5rem; text-align: center; padding-inline: .3rem; }
/* Sem as setinhas o campo cabe em 3.5rem e sobra linha para o "o que fazer",
   que é o texto longo. Quem digita o dia digita o número. */
.etapa-dia input::-webkit-outer-spin-button,
.etapa-dia input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.etapa-dia input { -moz-appearance: textfield; appearance: textfield; }
.etapa-linha select { flex: 1; min-width: 0; }
/* O ✕ no fim da própria etapa: "remover" por extenso comia um terço da linha
   no celular, e era a palavra mais gritante de um cartão que não fala de apagar. */
.etapa-linha .remover {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--r-full);
  display: grid; place-items: center; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  color: var(--tinta-3); font-size: 1.5rem; line-height: 1;
  transition: background .12s ease, color .12s ease;
}
.etapa-linha .remover:hover { background: var(--vazia-bg); color: var(--vazia); }
.etapa-linha .remover:focus-visible {
  outline: none; color: var(--vazia); box-shadow: 0 0 0 3px var(--acao-tenue);
}
.etapas-vazio { padding: 1.75rem 1.5rem; text-align: center; color: var(--tinta-3); }
/* Dica solta embaixo do título: espremida entre "Etapas" e "+ etapa" ela
   quebrava em duas linhas e empurrava o botão contra a borda. */
.cartao-topo.topo-com-dica { display: block; }
.cartao-topo.topo-com-dica .titulo-linha {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.cartao-topo.topo-com-dica > .mudo { display: block; margin-top: .2rem; font-weight: 400; }

/* ---- voltar ------------------------------------------------------------- */
/* Discreto de propósito: é caminho, não ação. Mas com alvo de dedo de verdade,
   porque é o botão que mais se usa com a mão ocupada. */
.voltar-tela {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-bottom: .9rem; padding: .45rem .8rem .45rem .55rem;
  background: transparent; border: 1px solid var(--linha);
  border-radius: var(--r-full); cursor: pointer;
  color: var(--tinta-2); font: inherit; font-size: .9rem; min-height: 38px;
}
.voltar-tela:hover { background: var(--repouso); color: var(--tinta); }
.voltar-tela .ico { width: 16px; height: 16px; }

/* ---- o tronco: lançar DG de um em um ------------------------------------ */
/* O `.curral` abaixo só alcança select, text e number. Esta tela usa search,
   date e button, e é a única em que o alvo tem de caber na mão com luva — daí
   regras próprias, escopadas para não respingar nas outras folhas. */
.tronco { border-color: var(--linha); transition: border-color .15s ease; }
.tronco.esperando { border-color: var(--acao); box-shadow: 0 0 0 3px var(--acao-tenue); }
#dg-brinco {
  font-size: 1.8rem; font-weight: 700; text-align: center;
  min-height: 60px; font-variant-numeric: tabular-nums;
}
#dg-brinco.erro { border-color: var(--vazia); box-shadow: 0 0 0 3px var(--vazia-bg); }
.dg-info { margin-top: .6rem; min-height: 2.6rem; color: var(--tinta-2); font-size: .95rem; }
.dg-info.erro { color: var(--vazia); font-weight: 600; }
.dg-info.atencao { color: var(--atencao-tinta, var(--tinta)); }
.dg-info .aviso-linha { margin-top: .25rem; color: var(--vazia); font-weight: 600; }
.dg-fora { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }

.dg-teclas { display: flex; gap: .6rem; margin-top: .9rem; flex-wrap: wrap; }
.dg-tecla { flex: 1 1 0; min-height: 60px; font-size: 1.05rem; }
/* O inconclusivo existe, mas não disputa espaço com os dois que se usam. */
.dg-tecla-menor { flex: 1 1 100%; min-height: 44px; font-size: .92rem; }
.dg-tecla kbd {
  margin-left: .45rem; padding: .05rem .4rem; border-radius: var(--r-sm);
  background: rgba(0,0,0,.14); font: inherit; font-size: .8em; font-weight: 700;
}
.dg-tecla[disabled] { opacity: .45; }

.dg-progresso { font-size: 1.02rem; color: var(--tinta-2); }
.dg-lista { list-style: none; margin: 0; padding: 0; max-height: 18rem; overflow-y: auto; }
.dg-lista li {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem 1.1rem; border-bottom: 1px solid var(--linha-2);
}
.dg-lista li:last-child { border-bottom: 0; }
.dg-faltam li { display: inline-flex; border-bottom: 0; padding: .3rem .5rem; }

/* ---- modo curral -------------------------------------------------------- */
.curral table.dados td { padding: .6rem .7rem; }
.curral select, .curral input[type=text], .curral input[type=number] {
  min-height: 46px; font-size: 1rem; padding: .4rem .55rem;
}

/* ============================================================================
   CALENDÁRIO — mês largo, painel embaixo
   O mês ocupa a largura toda porque a pergunta é de planejamento ("dá para
   encaixar a fazenda nova semana que vem?"), e isso se responde varrendo o mês.
   ========================================================================= */
.cal { background: var(--superficie); border: 1px solid var(--linha);
       border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sombra); }
.cal-topo {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--linha);
}
.cal-mes {
  font-weight: 700; font-size: 1.5rem; letter-spacing: -.03em;
  text-transform: capitalize;
}

.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cabeca {
  padding: .7rem .5rem; text-align: center;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--tinta-3);
  border-bottom: 1px solid var(--linha);
}
.cal-dia {
  min-height: 118px; padding: .5rem .5rem .6rem;
  border-right: 1px solid var(--linha-2); border-bottom: 1px solid var(--linha-2);
  background: var(--superficie); text-align: left;
  display: flex; flex-direction: column; gap: .28rem;
  cursor: pointer; font: inherit; color: inherit; text-decoration: none;
  transition: background .1s ease;
}
.cal-dia:nth-child(7n) { border-right: none; }
.cal-dia:hover { background: var(--papel); text-decoration: none; color: inherit; }
.cal-dia.fora { background: #f4f7f6; }
.cal-dia.fora .cal-num { color: var(--tinta-4); }
.cal-dia.fora .cal-pilula { opacity: .5; }

.cal-num {
  font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums;
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; color: var(--tinta-2);
}
.cal-dia.hoje .cal-num { background: var(--acao); color: #fff; }
.cal-dia.sel { background: var(--acao-tenue); }
.cal-dia.sel .cal-num { background: var(--tinta); color: #fff; }
.cal-dia.sel:hover { background: var(--acao-tenue); }

/* A pílula diz o dia do protocolo e a fazenda — é o que se lê de relance. */
.cal-pilula {
  display: flex; align-items: baseline; gap: .35rem;
  font-size: .78rem; line-height: 1.3; padding: .2rem .45rem;
  border-radius: var(--r-sm); background: var(--repouso); color: var(--tinta-2);
  overflow: hidden; white-space: nowrap;
  border-left: 2px solid var(--tinta-4);
}
.cal-pilula b { font-weight: 700; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.cal-pilula span { overflow: hidden; text-overflow: ellipsis; }
.cal-pilula.iatf { background: var(--acao-tenue); color: var(--acao-forte);
                   border-left-color: var(--acao); font-weight: 600; }
.cal-pilula.dg { background: transparent; border: 1px dashed var(--linha);
                 border-left: 2px dashed var(--tinta-4); }
.cal-pilula.atrasado { background: var(--vazia-bg); color: var(--vazia);
                       border-left-color: var(--vazia); }
.cal-pilula.feito { opacity: .5; }
.cal-mais { font-size: .74rem; color: var(--tinta-3); padding-left: .45rem; font-weight: 600; }

/* painel do dia, logo abaixo do mês */
.painel-dia { margin-top: 1.5rem; }
.painel-dia h2 { text-transform: capitalize; }
.dia-conteudo[hidden] { display: none; }
.manejo-linha {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 1.15rem 1.5rem; border-bottom: 1px solid var(--linha-2);
}
.manejo-linha:last-child { border-bottom: none; }
.manejo-linha .onde { font-size: 1.05rem; font-weight: 600; }
.manejo-linha .oque { color: var(--tinta-2); font-size: .92rem; margin-top: .25rem; }
.manejo-linha .qual { color: var(--tinta-3); font-size: .85rem; }

/* ---- painel principal --------------------------------------------------- */
/* A agenda leva a coluna larga porque é a pergunta da manhã; lotes e
   propriedades ficam ao lado como atalho, não como leitura. */
.painel {
  display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr);
  gap: 1rem; align-items: start;
}
.painel-lado { display: grid; gap: 1rem; }
.painel > .cartao + .cartao, .painel-lado > .cartao + .cartao { margin-top: 0; }
@media (max-width: 1100px) { .painel { grid-template-columns: 1fr; } }

/* Painel principal em altura fixa: sobra da tela depois do cabeçalho e dos
   números. Cada cartão rola por dentro, com o título parado no topo. Só no
   desktop — no celular a página rola inteira, que é o gesto natural ali. */
@media (min-width: 1101px) {
  .painel-fixo { height: max(22rem, calc(100vh - 20.5rem)); align-items: stretch; }
  /* O respiro de baixo existe para a barra fixa das folhas; o painel não tem. */
  .conteudo:has(.painel-fixo) { padding-bottom: 1.5rem; }
  .painel-fixo > .cartao, .painel-lado > .cartao {
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  }
  /* Uma linha só: o lado do painel ficou com "Lotes em curso" sozinho, e as
     duas faixas de altura deixavam metade da coluna vazia embaixo dele. */
  .painel-fixo .painel-lado { min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .painel-fixo .rolagem { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .painel-fixo .cartao-topo { flex: 0 0 auto; }
}

.indicador .nota { margin-top: .35rem; font-size: .82rem; color: var(--tinta-3); }
.indicador .nota-vazia { color: var(--vazia); font-weight: 600; }
.indicador .valor.mudo { color: var(--tinta-4); }

.rodape-cartao {
  display: block; padding: .75rem 1.5rem; border-top: 1px solid var(--linha-2);
  color: var(--tinta-3);
}

.dia-bloco + .dia-bloco { border-top: 1px solid var(--linha-2); }
.dia-bloco-topo {
  padding: .6rem 1.5rem; background: var(--repouso);
  font-size: .75rem; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-3);
}
.dia-bloco-topo.hoje { background: var(--acao-tenue); color: var(--acao-forte); }
.dia-bloco-topo.atrasado { background: var(--vazia-bg); color: var(--vazia); }

.lote-linha {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .8rem 1.5rem; border-bottom: 1px solid var(--linha-2);
  color: inherit; text-decoration: none;
}
.lote-linha:last-child { border-bottom: none; }
.lote-linha:hover { background: var(--repouso); }
.lote-linha .tag { flex: 0 0 auto; white-space: nowrap; }
.vazio-curto { padding: 2rem 1.5rem; }

/* Faixa do modo offline: some quando não há nada a dizer. */
.faixa-offline[hidden] { display: none; }
.faixa-offline { position: sticky; top: 0; z-index: 20; }

/* ---- resultados: a taxa como barra ------------------------------------- */
/* Série única, na cor da prenhez: é a mesma coisa que a tag "prenha" diz, só
   que medida. Traço fino e ponta arredondada; o valor fica ao lado em tinta de
   texto, nunca pintado com a cor da barra. O traço vertical é a referência
   nacional — recessivo, para comparar sem competir. */
.recortes .cartao { overflow-x: auto; }
.recorte td, .recorte th { padding-top: .55rem; padding-bottom: .55rem; }
.taxa { display: flex; align-items: center; gap: .6rem; }
.taxa-trilho { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--repouso); }
.taxa-barra { height: 100%; border-radius: 4px; background: var(--prenha); max-width: 100%; }
.taxa-ref { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px;
            background: var(--tinta-3); opacity: .55; }
.taxa-valor { flex: 0 0 3.6rem; text-align: right; font-weight: 650;
              font-variant-numeric: tabular-nums; }

.meses { display: flex; gap: .6rem; align-items: flex-end; padding: 1.2rem 1.5rem; overflow-x: auto; }
.mes { flex: 0 0 auto; min-width: 3.4rem; text-align: center; }
.mes-barra { margin: 0 auto .35rem; width: 22px; border-radius: 4px 4px 0 0; background: var(--acao); }
.mes b { display: block; font-variant-numeric: tabular-nums; }
.mes span { color: var(--tinta-3); font-size: .78rem; text-transform: capitalize; }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.numeros > .cartao + .cartao { margin-top: 0; }
.numeros .indicador .valor { font-size: 2rem; }

/* ---- relatório para o produtor ----------------------------------------- */
/* Uma página que se imprime ou vira PDF pelo navegador. Fundo branco e
   tinta preta sempre, inclusive no modo noite: é papel, não tela. */
.relatorio { max-width: 900px; margin: 0 auto; background: #fff; color: #111;
             padding: 2rem 2.2rem; border-radius: var(--r-lg); box-shadow: var(--sombra); }
.relatorio .mudo, .relatorio .sub { color: #555; }
.relatorio .cartao { background: #fff; border-color: #d5d9d6; box-shadow: none; }
.relatorio .dados th { color: #444; }
.relatorio .dados td, .relatorio .dados th { border-color: #e3e6e4; }
.relatorio-topo { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
                  border-bottom: 2px solid #0f3d20; padding-bottom: 1rem; margin-bottom: 1.4rem; }
.relatorio-topo img { width: 150px; }
.relatorio h2 { font-size: 1.1rem; margin: 1.6rem 0 .7rem; }
.relatorio .indicador .valor { color: #111; }
.relatorio .indicador .valor.prenha { color: #1f7a45; }
.relatorio .taxa-trilho { background: #eceeed; }
.relatorio .taxa-barra { background: #2f8f5b; }
/* Na folha de 900 px as tabelas de recorte vão lado a lado: aperta o
   espaçamento e segura uma largura mínima na barra, senão ela some. */
.relatorio .recorte td, .relatorio .recorte th { padding: .4rem .55rem; font-size: .84rem; }
.relatorio .recorte th:first-child, .relatorio .recorte td:first-child { max-width: 9rem; }
.taxa-trilho { min-width: 48px; }
.relatorio .taxa-valor { flex-basis: 3.2rem; }
.relatorio-rodape { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #d5d9d6;
                    font-size: .85rem; color: #555; }
.relatorio-acoes { max-width: 900px; margin: 0 auto 1rem; }
.tabela-densa td, .tabela-densa th { padding: .35rem .5rem; font-size: .85rem; }

@media (max-width: 700px) {
  .relatorio { padding: 1.2rem 1rem; }
  .relatorio-topo { flex-direction: column; }
}

/* ---- utilitários mínimos ------------------------------------------------ */
.mudo { color: var(--tinta-3); }
.pequeno { font-size: .9rem; }
.micro { font-size: .82rem; }
.forte { font-weight: 600; }
.centro { text-align: center; }
.direita { text-align: right; }
.flex { display: flex; }
.entre { justify-content: space-between; }
.alinha { align-items: center; }
.g-xs { gap: .4rem; } .g-sm { gap: .7rem; } .g { gap: 1.1rem; }
.envolve { flex-wrap: wrap; }
.mt { margin-top: 1.5rem; } .mt-sm { margin-top: .7rem; }

/* A linha que a busca de brinco encontrou. Fica acesa: no sol a pino, um
   destaque que apaga sozinho e um destaque que nunca existiu sao a mesma coisa. */
tr.destaque > td { background: var(--atencao-bg); }
.mb { margin-bottom: 1.5rem; } .mb-sm { margin-bottom: .7rem; }
.nada { margin: 0; }

/* ---- celular ------------------------------------------------------------ */
@media (max-width: 900px) {
  .app { flex-direction: column; }

  /* ---- menu em gaveta ----------------------------------------------------
     A mesma lateral do desktop, deslizando da esquerda por cima do conteúdo.
     A barra de quatro ícones embaixo mostrava quatro das sete páginas e
     escondia três — Resultados, Produtos e Sêmen só existiam no desktop. */
  .lateral {
    position: fixed; top: 0; left: 0; bottom: 0; height: auto;
    width: var(--lateral); flex-basis: auto;
    z-index: 1100; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  .lateral.aberta { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.45); }
  /* Recolher não existe aqui: a gaveta está por cima do conteúdo, então sair
     da frente é fechar. O botão é o mesmo, e o JS dá o sentido. */
  .lateral.recolhida { width: var(--lateral); flex-basis: auto; }

  /* O rodapé da barra — equipe, tema, trocar e sair — já é o menu da bolha no
     topo. Dois caminhos para a mesma ação, um em cada canto da tela, é o tipo
     de coisa que faz o vet duvidar se são a mesma. A gaveta fica só com as
     páginas; a conta mora na bolha. */
  .rodape-lateral { display: none; }

  /* O fundo começa embaixo da barra do topo para o ☰ continuar clicável. */
  .fundo-gaveta {
    position: fixed; inset: 0; top: 60px; z-index: 1090;
    background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  .fundo-gaveta.ativo { opacity: 1; pointer-events: auto; }

  .abre-gaveta { display: grid; }

  /* Sem barra embaixo, a página acaba onde acaba. */
  .nav-inferior { display: none; }
  /* Em coluna, margem automática no eixo cruzado faz o item encolher para o
     conteúdo — e a tabela larga empurrava a página inteira para fora da
     tela, em vez de rolar dentro do cartão. */
  .conteudo { padding: 1.1rem 1.1rem 2rem; margin-inline: 0; width: 100%; }
  h1 { font-size: 1.6rem; }
  .cabecalho { align-items: flex-start; margin-bottom: .9rem; }
  /* Entre dois cartões da mesma tela, 1.5rem no celular é tela gasta com nada. */
  .mb { margin-bottom: .9rem; }

  .topo-mobile {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 1.1rem; background: var(--barra);
    color: var(--barra-tinta);
    position: sticky; top: 0; z-index: 30;
  }
  /* `.mudo` e cinza escuro: sobre o verde da barra ele sumiria. */
  .topo-mobile .mudo { color: var(--barra-tinta-2); }
  .topo-mobile .marca img { width: 140px; }

  /* Conta e configurações no celular: a bolha com a inicial é o alvo do polegar,
     e o nome da equipe ao lado diz em qual delas ele está antes de tocar. */
  .perfil-botao {
    display: flex; align-items: center; gap: .55rem;
    background: transparent; border: 0; padding: 0; cursor: pointer;
    color: var(--barra-tinta-2); font: inherit;
  }
  .perfil-bolha {
    width: 36px; height: 36px; border-radius: var(--r-full);
    display: grid; place-items: center;
    background: var(--barra-pastilha); color: var(--barra-tinta);
    font-weight: 700; font-size: .95rem; line-height: 1;
  }
  .perfil-botao[aria-expanded="true"] .perfil-bolha {
    background: var(--barra-icone-forte); color: var(--barra);
  }

  .perfil-menu {
    display: block; position: fixed; top: 60px; right: .7rem; z-index: 40;
    width: min(16rem, calc(100vw - 1.4rem));
    background: var(--barra); color: var(--barra-tinta);
    border-radius: var(--r); padding: .35rem 0 .5rem;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
  }
  .perfil-menu[hidden] { display: none; }
  .perfil-menu .quem { padding: .8rem 1.1rem .7rem; }

  /* Navegação embaixo: a mão alcança embaixo, não em cima. */
  /* No celular a lateral some e esta barra faz o papel dela, entao carrega o
     mesmo verde: senao a cor do app so existe no desktop, que e justamente
     onde o veterinario nao esta. */
  .nav-inferior {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
    display: flex; background: var(--barra);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .nav-inferior a {
    flex: 1; text-align: center; padding: .6rem .25rem .65rem;
    color: var(--barra-tinta-2); text-decoration: none; font-size: .7rem; font-weight: 600;
  }
  .nav-inferior a.ativo { color: #fff; }
  .nav-inferior a .ico {
    display: block; margin: 0 auto .2rem; width: 22px; height: 22px;
    color: var(--barra-icone); --ico-detalhe: var(--barra-icone-detalhe);
  }
  .nav-inferior a.ativo .ico { color: var(--barra-icone-forte); }

  .grade.c4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grade.c3, .grade.c2 { grid-template-columns: 1fr; }
  .barra-fixa { margin: 1.1rem -1.1rem 0; padding-left: 1.1rem; padding-right: 1.1rem;
                bottom: 0; }
  .ate-o-rodape > .barra-fixa { margin-bottom: -2rem; }

  /* Mesma linha única do desktop, só mais apertada: cada pixel devolvido ao
     "o que fazer", que é o campo com texto de verdade. */
  .etapa-linha { padding: .7rem 1rem; gap: .5rem; }
  .etapa-dia input { width: 3rem; }
  .etapa-linha select { padding-left: .6rem; padding-right: 1.6rem;
                        background-position: right .5rem center; }
  /* 40px é alvo de dedo; a margem negativa devolve para o select o respiro
     que o botão redondo já tem sobrando de cada lado. */
  .etapa-linha .remover { width: 40px; height: 40px; margin-right: -.5rem; }
  .cartao-topo.topo-com-dica { padding: 1rem 1.1rem; }
  /* ---- protocolo no celular ---------------------------------------------
     A faixa é o desenho do manual: 600px de largura mínima. Num aparelho ela
     vira uma tira cortada no primeiro terço, sem nada dizendo que se arrasta —
     e o que aparece é justamente o começo, que é a parte que todo protocolo
     tem igual. O passo a passo diz a mesma coisa de cima para baixo, que é como
     se lê um telefone. */
  .so-tela-larga { display: none; }

  /* Sem a faixa, o passo a passo é a linha do tempo: o fio ligando os dias faz
     o papel que a faixa fazia, e o traço cheio de separador vira ruído ao lado
     dele. Os 5rem da coluna do dia eram 80px para um selo de 45. */
  .passos .quando { flex: 0 0 2.8rem; }
  .passos li { gap: .9rem; border-bottom: 0; padding: .6rem 0 1rem; }
  .passos li:not(:last-child)::before {
    content: ""; position: absolute; left: calc(1.4rem - 1px);
    top: 2.5rem; bottom: -.1rem; width: 2px; background: var(--linha-2);
  }

  /* Clonar e editar no celular: lado a lado ocupando a linha, porque em cima
     do título eles o espremiam até o nome do protocolo quebrar em duas linhas. */
  .cabecalho .acoes-bloco { width: 100%; }
  .cabecalho .acoes-bloco > * { flex: 1 1 0; display: flex; }
  .cabecalho .acoes-bloco .btn { width: 100%; }

  /* Cartão dentro de cartão soma dois respiros de 1.5rem de cada lado: num
     telefone de 375px são 96px gastos com nada, e era o que fazia o "mL" cair
     sozinho numa linha. O de dentro encosta nas bordas do de fora e devolve
     ~60px à linha — largura que vai para o nome do produto. */
  .cartao.pad .cartao.pad {
    margin-left: -1.5rem; margin-right: -1.5rem;
    padding-left: 1.1rem; padding-right: 1.1rem;
    border-radius: 0; border-left: 0; border-right: 0;
  }
  /* O rótulo do manejo não precisa de 9rem reservados aqui. */
  #produtos .campo > .mudo.pequeno { min-width: 0 !important; }

  /* ---- barra de ação no celular ----------------------------------------
     Três itens numa linha de 340px não cabem: a frase ficava com "Voltar" e
     empurrava "Adicionar ao lote" para baixo, torto. A frase ganha a linha
     dela e os botões dividem a de baixo em partes iguais. */
  .barra-fixa .cresce { flex: 1 1 100%; min-width: 0; }
  .barra-fixa .btn { flex: 1 1 0; min-width: 0; }

  /* ---- a tabela de matrizes vira lista ------------------------------------
     Seis colunas em 375px só cabiam rolando de lado, e ninguém descobre que
     rola: o pós-parto e os avisos — o que decide se a vaca entra — ficavam
     escondidos fora da tela. Empilhado, cada matriz mostra tudo. */
  .matrizes thead { display: none; }
  .matrizes, .matrizes tbody, .matrizes tr, .matrizes td { display: block; }
  .matrizes tr {
    position: relative; padding: .8rem 1rem .8rem 3rem;
    border-bottom: 1px solid var(--linha-2);
  }
  .matrizes tr:last-child { border-bottom: 0; }
  /* `table.dados td` tem duas tags e uma classe — vence `.matrizes td` por
     especificidade, não por ordem. Daí o seletor repetir a tabela aqui. */
  table.dados.matrizes td { padding: 0; border: 0; }
  /* A caixa sobe para a altura do brinco e ganha área de dedo — mas quem
     recebe o toque mesmo é a linha inteira, pelo JS da tela. */
  .matrizes td.escolha {
    position: absolute; left: .75rem; top: .6rem;
    width: 2rem; height: 2rem; display: grid; place-items: center;
  }
  .matrizes td.escolha input { width: 20px; height: 20px; }
  .matrizes td.brinco { display: inline; margin-right: .5rem; }
  .matrizes td.categoria { display: inline; color: var(--tinta-2); }
  .matrizes td.parto, .matrizes td.pos-parto { font-size: .85rem; margin-top: .15rem; }
  .matrizes td[data-rotulo]::before {
    content: attr(data-rotulo) ": "; color: var(--tinta-3);
  }
  .matrizes td.marcas:not(:empty) { margin-top: .35rem; }
  .matrizes tr:active { background: var(--repouso); }

  .cal-dia { min-height: 76px; }
  .cal-mes { font-size: 1.2rem; }
  .cal-topo { padding: .85rem 1rem; }
  .faixa { padding: 2.6rem 1rem 2rem; }
  .manejo-linha { padding: 1rem 1.1rem; }
}
@media (min-width: 901px) { .nav-inferior { display: none; } }

@media (max-width: 560px) {
  .cal-dia { min-height: 58px; padding: .3rem .2rem; align-items: center; }
  /* A célula não cabe texto: vira ponto, e o painel embaixo conta o resto. */
  .cal-pilula { width: 7px; height: 7px; padding: 0; border-radius: 50%;
                border-left: none; }
  .cal-pilula * { display: none; }
  .cal-mais { display: none; }
  .cal-num { font-size: .92rem; width: 1.7rem; height: 1.7rem; }
  .cal-cabeca { font-size: .62rem; letter-spacing: .06em; padding: .55rem .2rem; }
}

/* ---- impressão ---------------------------------------------------------- */
@media print {
  .lateral, .nav-inferior, .topo-mobile, .barra-fixa, .acoes, .relatorio-acoes,
  .aviso, .nao-imprime { display: none !important; }
  .conteudo { padding: 0; max-width: none; }
  .tabela-rolagem, .recortes .cartao { overflow: visible; }
  .cartao { border: 1px solid #000; box-shadow: none; break-inside: avoid; }
  body { background: #fff; font-size: 11pt; }
  .relatorio { box-shadow: none; padding: 0; max-width: none; }
  .relatorio .grade.c2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .taxa-barra, .mes-barra { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* ===========================================================================
   Modo noite
   ---------------------------------------------------------------------------
   Só tokens: nenhum componente sabe que ele existe. Três estados, não dois —
   o padrão segue o sistema operacional, e a escolha explícita do veterinário
   vence em qualquer direção, inclusive "claro" num aparelho em modo escuro.

   O vet.css declara sol a pino como restrição, e ela continua valendo: por isso
   o claro é o padrão e o noite é escolha. No escritório à noite, fechando
   relatório, ele é o certo.

   Aqui a ação troca de verde: o garrafa da logo some num fundo quase preto, e
   quem assume é o verde-folha, que é a outra cor da mesma logo. Não é um verde
   novo — é o do IATF, que de dia fica como acento e de noite trabalha.
   ======================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --tinta: #e6eae8; --tinta-2: #b0bab4; --tinta-3: #85938a; --tinta-4: #606c64;
    --papel: #111513; --superficie: #1a201d; --campo: #212924;
    --linha: #344239; --linha-2: #262e29; --repouso: #29312c;
    --acao: #4f8924; --acao-forte: #66b12f; --acao-tenue: #1c2615; --acao-linha: #3b4d2d;
    --barra: #021709; --barra-tinta: #e4edde; --barra-tinta-2: #9cb38a;
    --barra-ativo: rgba(255,255,255,.09); --barra-hover: rgba(255,255,255,.045);
    --barra-linha: rgba(255,255,255,.07);
    --barra-icone: #71cb32; --barra-icone-forte: #8ade4a;
    --barra-icone-detalhe: #cee3bf;
    --barra-pastilha: rgba(255,255,255,.07);
    --barra-pastilha-forte: rgba(255,255,255,.14);
    --barra-pastilha-tinta: #0b2a15;
    --prenha: #4fb37a; --prenha-bg: #12301f; --prenha-linha: #275c3d;
    --vazia: #e0776c; --vazia-bg: #301a17; --vazia-linha: #5a322c;
    --atencao: #d2a851; --atencao-bg: #2b2513; --atencao-linha: #524622;
    --sombra: 0 1px 3px rgba(0,0,0,.5);
    --sombra-alta: 0 8px 24px rgba(0,0,0,.6);
  }
}

:root[data-tema="noite"] {
  color-scheme: dark;
  --tinta: #e6eae8; --tinta-2: #b0bab4; --tinta-3: #85938a; --tinta-4: #606c64;
  --papel: #111513; --superficie: #1a201d; --campo: #212924;
  --linha: #344239; --linha-2: #262e29; --repouso: #29312c;
  --acao: #4f8924; --acao-forte: #66b12f; --acao-tenue: #1c2615; --acao-linha: #3b4d2d;
  --barra: #021709; --barra-tinta: #e4edde; --barra-tinta-2: #9cb38a;
  --barra-ativo: rgba(255,255,255,.09); --barra-hover: rgba(255,255,255,.045);
  --barra-linha: rgba(255,255,255,.07);
  --barra-icone: #71cb32; --barra-icone-forte: #8ade4a;
  --barra-icone-detalhe: #cee3bf;
  --barra-pastilha: rgba(255,255,255,.07);
  --barra-pastilha-forte: rgba(255,255,255,.14);
  --barra-pastilha-tinta: #0b2a15;
  --prenha: #4fb37a; --prenha-bg: #12301f; --prenha-linha: #275c3d;
  --vazia: #e0776c; --vazia-bg: #301a17; --vazia-linha: #5a322c;
  --atencao: #d2a851; --atencao-bg: #2b2513; --atencao-linha: #524622;
  --sombra: 0 1px 3px rgba(0,0,0,.5);
  --sombra-alta: 0 8px 24px rgba(0,0,0,.6);
}

/* Estes três cravavam cor clara na mão e por isso não acompanhavam o tema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .cal-dia.fora { background: #0e120f; }
  :root:not([data-tema="claro"]) .tag-ink,
  :root:not([data-tema="claro"]) .dia { background: var(--tinta); color: #111513; }
}
:root[data-tema="noite"] .cal-dia.fora { background: #0e120f; }
:root[data-tema="noite"] .tag-ink,
:root[data-tema="noite"] .dia { background: var(--tinta); color: #111513; }

/* O sol e a lua se revezam: aparece o destino, não o estado atual. */
.ico-lua { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .ico-sol { display: none; }
  :root:not([data-tema="claro"]) .ico-lua { display: inline-block; }
}
:root[data-tema="noite"] .ico-sol { display: none; }
:root[data-tema="noite"] .ico-lua { display: inline-block; }
:root[data-tema="claro"] .ico-sol { display: inline-block; }
:root[data-tema="claro"] .ico-lua { display: none; }

/* ===========================================================================
   Barra recolhida
   ---------------------------------------------------------------------------
   Só o ícone fica. O rótulo some com `display:none` e não com largura zero,
   senão ele continuaria capturando o cursor. A dica vem do `title` de cada
   item, que é o que mantém a navegação usável nesse estado.
   ======================================================================== */

.lateral-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: 0 .9rem 1.4rem 1.4rem;
}

.recolher {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center;
  background: var(--barra-hover); color: var(--barra-tinta-2);
  border: 1px solid var(--barra-linha); border-radius: 50%;
  cursor: pointer; transition: background .15s, color .15s, transform .25s;
}
.recolher:hover { background: var(--barra-ativo); color: var(--barra-tinta); }
.recolher .ico { width: 17px; height: 17px; }

.lateral { transition: width .22s cubic-bezier(.4,0,.2,1), flex-basis .22s cubic-bezier(.4,0,.2,1); }

.lateral.recolhida {
  width: var(--lateral-recolhida);
  flex-basis: var(--lateral-recolhida);
}
.lateral.recolhida .lateral-topo {
  padding: 0 0 1.4rem; justify-content: center;
  flex-direction: column; gap: .9rem;
}
.lateral.recolhida .marca-cheia { display: none; }
.lateral.recolhida .marca .marca-simbolo { display: block; width: 40px; }
.lateral.recolhida .recolher { transform: rotate(180deg); }
.lateral.recolhida .nav { padding: 0 .6rem; }
.lateral.recolhida .nav a,
.lateral.recolhida .nav button { justify-content: center; padding: .62rem 0; }
.lateral.recolhida .nav span,
.lateral.recolhida .rotulo-tema,
.lateral.recolhida .quem { display: none; }
.lateral.recolhida .rodape-lateral { padding-top: .7rem; }

/* O botão de tema entra na mesma regra dos outros itens da navegação: é uma
   ação do mesmo peso, e duas aparências para coisas iguais foi o que já tinha
   feito este canto parecer sobra de tela uma vez. */
.tema-botao .ico { flex: 0 0 19px; }