body.painel { padding-bottom: 5.5rem; background: var(--papel); }

.painel-topo {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--marca);
  color: var(--sobre-marca);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--marca-linha);
}

.painel-topo .envelope { display: flex; align-items: center; gap: 0.7rem; justify-content: space-between; }
.painel-topo h1 { font-size: var(--t-h3); color: var(--sobre-marca); letter-spacing: -0.01em; }
.painel-topo .quem { margin: 0.1rem 0 0; font-size: var(--t-micro); color: var(--marca-suave); }
/* Vive sobre a barra da marca, e não sobre a página: a cor do texto tem que ser
   a da marca, senão herda a do botão comum e some no modo escuro. */
.painel-topo button {
  min-height: 38px;
  background: transparent;
  color: var(--sobre-marca);
  border: 1px solid var(--marca-linha);
  font-size: var(--t-corpo);
  font-weight: 600;
}

/* Abas na base, ao alcance do polegar. O painel é usado em pé, no balcão. */
.abas {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--superficie);
  border-top: 1px solid var(--linha);
  padding-bottom: env(safe-area-inset-bottom);
}

.abas button {
  position: relative;
  min-height: 58px;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--tinta-suave);
  font-size: var(--t-micro);
  font-weight: 600;
  padding: 0.7rem 0.2rem 0;
}

/* A aba atual ganha um traço verde em cima e o texto escuro. Antes era um bloco
   de fundo verde-claro inteiro, que pesava mais que o conteúdo da tela. */
.abas button[aria-current="page"] { color: var(--folha-escura); font-weight: 700; }
.abas button[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22%;
  right: 22%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--folha);
}

/* O contador é um selo no canto da aba, e não texto ao lado do nome: ao lado,
   ele empurrava o nome para cima e as cinco abas ficavam desalinhadas. */
.abas .marcador {
  position: absolute;
  top: 0.2rem;
  left: calc(50% + 1.3rem);
  min-width: 1.15rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--perigo);
  color: var(--sobre-perigo);
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15rem;
}

/* No computador, o trilho.
   Tela larga não tem polegar: tem mouse e muito espaço dos lados. As mesmas
   abas sobem para uma barra lateral escura, como nos outros sistemas da casa, e
   o conteúdo ganha o centro. Os botões são os mesmos, só muda o lugar. */
@media (min-width: 64rem) {
  body.painel { padding-bottom: 2rem; }
  #tela-painel { padding-left: 15rem; }

  .abas {
    top: 0;
    right: auto;
    width: 15rem;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
    align-content: start;
    gap: 0.2rem;
    padding: 5.2rem 0.8rem 1rem;
    background: var(--marca-funda);
    border-top: 0;
  }

  .abas button {
    min-height: var(--toque);
    padding: 0 0.9rem;
    display: flex;
    align-items: center;
    border-radius: var(--raio);
    text-align: left;
    font-size: var(--t-corpo);
    color: var(--marca-suave);
  }

  .abas button[aria-current="page"] {
    background: var(--marca-linha);
    color: var(--sobre-marca);
  }

  .abas button[aria-current="page"]::before { display: none; }

  .abas .marcador { position: static; display: inline-block; margin-left: 0.45rem; font-size: var(--t-micro); line-height: 1.4rem; min-width: 1.35rem; }

  /* O brasão no alto do trilho: a assinatura da casa, no lugar em que os
     outros sistemas põem a marca. */
  .abas::before {
    content: "";
    position: absolute;
    top: 1.1rem;
    left: 1.6rem;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: #fff url("/img/icone-192.png") center / cover no-repeat;
    box-shadow: 0 0 0 2px var(--ouro);
  }

  @media (hover: hover) {
    .abas button:not([aria-current="page"]):hover { color: var(--sobre-marca); }
  }

  .painel .barra-cesta { bottom: 0; left: 15rem; }
  #tela-painel .envelope { max-width: 52rem; }
}

.aba { padding: 1.1rem 0 1.5rem; }

/* A barra da cesta nasceu na página pública, onde o pé da tela é livre. Aqui o
   pé é da barra de abas, então a cesta sobe e senta em cima dela. Sem isto ela
   fica escondida atrás das abas, e o botão de concluir simplesmente não existe
   para quem está no celular: a reserva fica impossível de terminar. */
.painel .barra-cesta {
  bottom: calc(58px + env(safe-area-inset-bottom));
  z-index: 5;
}

/* Espaço para a última linha da prateleira não nascer debaixo da cesta. São as
   duas barras somadas: a das abas e a da cesta em cima dela. */
#aba-reserva { padding-bottom: 9rem; }

/* O cartão do pedido.
   ---------------------------------------------------------------------------
   A hierarquia foi invertida de propósito. Antes o código do pedido era o maior
   texto do cartão, em serifada, e o nome da pessoa vinha depois, em negrito de
   parágrafo. Mas o trabalho da dama no balcão não é achar um código: é olhar
   para a pessoa na frente dela e conferir se é quem está na tela. O nome virou
   o herói e o código virou etiqueta pequena, que é o papel que ele de fato tem.

   A faixa colorida na lateral esquerda diz o estado sem gastar uma palavra nem
   um espaço de linha. É a mesma ideia da etiqueta colorida na lombada de pasta
   de arquivo: de longe, você já sabe qual é qual. */
.cartao {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra);
  padding: 1.1rem 1.1rem 1.1rem 1.35rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.cartao::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--folha);
}

/* Pedido com item que exige receita: a faixa vira dourada, a mesma cor da tarja
   de receita, para que a caixa e o cartão falem a mesma língua. */
.cartao.urgente::before { background: var(--ouro); }
.cartao.encerrado::before { background: var(--linha); }

.cartao .cabeca {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.55rem;
}

/* Etiqueta, não título. Tabular para os códigos ficarem alinhados na coluna. */
.cartao .codigo-pedido {
  font-size: var(--t-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--folha-escura);
  background: var(--folha-clara);
  border-radius: var(--raio-pilula);
  padding: 0.24rem 0.65rem;
}

.cartao .quem-recebe {
  display: block;
  font-family: var(--serifada);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0 0 0.1rem;
}

.cartao ul { margin: 0.6rem 0; padding-left: 1.1rem; }
.cartao .botoes { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.9rem; }
.cartao .botoes button { flex: 1 1 8rem; }
/* Cancelar não se estica: desfazer o pedido de alguém é ação rara, e botão
   largo na base do cartão parece a ação principal. */
.cartao .botoes .sutil { flex: 0 1 auto; }

/* Avisar é conversa, entregar e cancelar mexem no estoque. A cor separa as duas
   naturezas, e a linha inteira dá ao aviso o destaque de quem é usado mais. */
.acao-zap {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--toque);
  padding: 0 1rem;
  border-radius: var(--raio);
  background: var(--aviso-acao);
  color: var(--sobre-aviso);
  font-weight: 600;
  text-decoration: none;
}

.assumido { background: var(--folha-clara); color: var(--folha-escura); border-radius: var(--raio); padding: 0.35rem 0.7rem; font-size: var(--t-corpo); font-weight: 600; }

/* Flex, e não grade fixa: linha sem foto devolve a largura ao nome do remédio
   em vez de reservar um quadrado vazio. */
.linha-estoque {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.75rem 0;
  border-top: 1px solid var(--linha);
  width: 100%;
  text-align: left;
  background: none;
  border-radius: 0;
  color: var(--tinta);
  min-height: 0;
  font-weight: 400;
}

.linha-estoque .foto { width: 52px; height: 52px; flex: none; border-radius: 8px; background: var(--folha-clara); object-fit: cover; }
.linha-estoque .dados { flex: 1; min-width: 0; }
.linha-estoque strong,
.linha-estoque .discreta { display: block; }
/* O número de caixas fica dentro de uma etiqueta, como a que se cola na
   prateleira. Solto, ele se perdia ao lado do nome do remédio. */
.linha-estoque .numero {
  flex: none;
  min-width: 2.6rem;
  text-align: center;
  font-size: var(--t-h3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--folha-escura);
  background: var(--folha-clara);
  border-radius: var(--raio);
  padding: 0.3rem 0.5rem;
}
.linha-estoque .numero.baixo { color: var(--ouro-texto); background: var(--ouro-claro); }
.linha-estoque .numero.zero { color: var(--tinta-suave); background: var(--papel); }

.botao-largo { width: 100%; margin-bottom: 0.9rem; }

/* Os dois jeitos de tirar um documento: baixar o PDF e imprimir. Sempre
   juntos, sempre nesta ordem, e o bloco tem respiro em cima porque vem depois
   de uma lista. */
.saida-papel { display: grid; gap: 0.2rem; margin-top: 1.4rem; }
.saida-papel .botao-largo { margin-bottom: 0.5rem; }

.acoes-miudas { display: flex; gap: 0.4rem; align-items: center; flex: none; }
.alternativa { margin-bottom: 1.4rem; font-weight: 500; }

.leitor { position: relative; background: #000; border-radius: var(--raio); overflow: hidden; margin-bottom: 0.9rem; }
.leitor video { width: 100%; display: block; max-height: 55vh; object-fit: cover; }
.leitor .mira {
  position: absolute; inset: 22% 12%;
  border: 3px solid var(--ouro);
  border-radius: var(--raio);
  pointer-events: none;
}

/* A entrada do painel.
   Um cartão branco sobre o verde-mata, como a porta de um sistema e não como
   uma página qualquer. É a única tela em que a marca ocupa o fundo inteiro: a
   pessoa sabe de cara que está entrando na casa, e não no site público. */
body.painel:has(#tela-login:not(.oculto)),
body.painel:has(#tela-trocar-senha:not(.oculto)) {
  background: var(--marca);
  padding-bottom: 0;
}

.entrada-login {
  max-width: 24rem;
  margin: clamp(1rem, 7vh, 4.5rem) auto 2rem;
  padding: 2rem 1.4rem 1.5rem;
  background: var(--superficie);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-janela);
}

@media (max-width: 26rem) {
  .entrada-login { margin-inline: 0.75rem; }
}

.entrada-login img {
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--ouro);
}

.entrada-login h1 { text-align: center; font-size: var(--t-h1); }
.entrada-sub { text-align: center; color: var(--tinta-suave); margin: 0.3rem 0 1.5rem; }
#tela-trocar-senha h1 { margin-bottom: 0.6rem; }
.entrada-rodape { text-align: center; margin: 1rem 0 0; }

.instalar {
  background: var(--ouro-claro);
  border: 1px solid var(--ouro);
  border-radius: var(--raio);
  padding: 0.9rem;
  margin: 1.5rem 0 1rem;
}

.instalar-linha { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; margin: 0; }
.instalar-linha p { margin: 0; flex: 1 1 12rem; }
.instalar h2 { font-size: var(--t-h3); margin-bottom: 0.4rem; }
.instalar ol { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.instalar details { margin-top: 0.7rem; }
.instalar summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 600; color: var(--ouro-texto); }
.instalar details[open] summary { margin-bottom: 0.2rem; }

/* Uma linha do livro de registro é uma frase, e frase se lê como texto: sem
   negrito no meio, sem pontos separando pedaços, com a hora abaixo e discreta.
   O que se quer aqui é leitura corrida, não varredura de tabela. */
.registro {
  border-left: 3px solid var(--linha);
  padding: 0.15rem 0 0.15rem 0.8rem;
  margin-bottom: 0.9rem;
}

.registro .relato { margin: 0 0 0.1rem; line-height: 1.45; }
.registro time { color: var(--tinta-suave); font-size: var(--t-micro); display: block; }

/* Senha errada é a única linha do livro que merece ser vista de longe. */
.registro-atencao { border-left-color: var(--alerta); }

/* Filtros e seções: todas as opções à vista, numa grade.
   Até 06/10/2026 era uma faixa de pílulas que rolava de lado, para não gastar
   altura. Na prática, no celular, metade das opções ficava escondida atrás da
   borda da tela: o "Mais" tinha sete seções e só três apareciam, e quem não
   sabia que dava para deslizar achava que o resto não existia. O Daniel pediu
   o fim do deslizar, e ele tem razão: opção escondida é opção que não existe.

   Agora é grade: duas por linha no celular, todas lado a lado quando cabe. Gasta
   uma ou duas linhas a mais de altura, e em troca nada fica fora da vista. */
.chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.45rem;
  margin-bottom: 1.1rem;
}

/* Três opções curtas (30, 90 e 180 dias) cabem lado a lado em qualquer tela;
   em duas colunas, a terceira ficaria sozinha numa linha. */
.chips:has(> button:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }

.chips button {
  min-width: 0;
  min-height: 44px;
  padding: 0 0.5rem;
  border-radius: var(--raio);
  font-size: 0.94rem;
  line-height: 1.2;
  background: var(--superficie);
  border-color: var(--linha);
  color: var(--tinta-suave);
  font-weight: 600;
}

/* No celular, com número ímpar de opções, a última ocupa a linha inteira em vez
   de ficar sozinha pela metade, com um buraco do lado. */
@media (max-width: 40rem) {
  .chips > button:last-child:nth-child(odd):not(:nth-child(3)) { grid-column: 1 / -1; }
}

/* Par de tokens, e não branco fixo. No modo escuro `--folha-escura` clareia,
   como toda a paleta, e branco em cima dela some. É o par que sobrevive à
   virada do tema, e o base.css avisa isso em comentário. */
.chips button[aria-pressed="true"] {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--sobre-marca);
}

/* O segundo nível: escolhas dentro de uma seção (qual relatório, qual janela
   de vencimento). Mais leve que o primeiro, com o escolhido em verde-claro e
   não em verde-mata cheio, para não parecer outro menu do mesmo tamanho. Com
   os dois iguais, um embaixo do outro, não dava para saber qual mandava em qual. */
.chips.secundario { gap: 0.35rem; }

.chips.secundario button {
  min-height: 40px;
  font-size: var(--t-micro);
  background: transparent;
  border-color: var(--linha);
}

.chips.secundario button[aria-pressed="true"] {
  background: var(--folha-clara);
  border-color: var(--folha);
  color: var(--folha-escura);
}

/* O menu de seções do "Mais" fica separado do que ele abre por um filete. */
#conteudo-mais > .chips {
  padding-bottom: 1.1rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--linha);
}

/* A contagem viaja dentro da pílula. Saber que há três esperando sem tocar em
   nada é metade do motivo de abrir o painel. */
.chips button .conta {
  display: inline-block;
  margin-left: 0.4rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.tabela-escala { width: 100%; border-collapse: collapse; }
.tabela-escala th, .tabela-escala td { padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--linha); text-align: left; font-size: var(--t-corpo); }
.tabela-escala select { min-height: 40px; }

/* Onde a caixa está guardada. Ganha marca própria porque, na hora de buscar, é
   a informação que a dama procura na linha, e não o nome que ela já leu. */
.linha-estoque .lugar {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--folha-clara);
  color: var(--folha-escura);
  font-weight: 600;
  font-size: var(--t-micro);
}

/* ---- Papel ----------------------------------------------------------------
   O termo que o doador assina na hora e o relatório de destinação saem daqui.
   Não há biblioteca de PDF no projeto: todo celular e todo computador já sabem
   salvar uma página impressa em PDF, e baixar centenas de kilobytes de
   biblioteca na internet de Moju para fazer o que o aparelho já faz seria cobrar
   do público-alvo uma conveniência nossa.

   O estilo do documento fica fora da regra de impressão de propósito: assim a
   folha pode ser conferida na tela, do jeito que vai sair no papel. A regra de
   impressão decide só o que aparece. */

#folha {
  display: none;
  color: #000;
  background: #fff;
  font-size: 10.5pt;
  line-height: 1.45;
}

.papel-topo {
  display: flex;
  gap: 12px;
  align-items: center;
  border-bottom: 2px solid #000;
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.papel-topo img { width: 54px; height: 54px; }
.papel-topo h1 { font-size: 14pt; margin: 0 0 2px; line-height: 1.2; }
.papel-topo p { margin: 0; font-size: 9pt; }

#folha h2 { font-size: 12.5pt; margin: 0 0 10px; }

.papel-dados { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 12px; }
.papel-dados dt { font-weight: 700; }
.papel-dados dd { margin: 0; }

.papel-texto { margin: 0 0 8px; text-align: justify; }

.papel-tabela { width: 100%; border-collapse: collapse; margin: 10px 0 12px; font-size: 9.5pt; }
.papel-tabela th, .papel-tabela td { border: 1px solid #000; padding: 4px 6px; text-align: left; }
.papel-tabela thead th { background: #eee; }
.papel-tabela tfoot th { background: #eee; font-weight: 700; }
/* Cabeçalho repetido quando a tabela passa de uma página. */
.papel-tabela thead { display: table-header-group; }
.papel-tabela tr { break-inside: avoid; }

.papel-nota { font-size: 8.5pt; margin: 0 0 8px; }

.papel-assinatura { margin-top: 34px; break-inside: avoid; }
.papel-assinatura span { display: block; border-top: 1px solid #000; width: 62mm; margin-bottom: 4px; }
.papel-assinatura p { margin: 0; font-size: 9.5pt; }
.papel-assinatura.duas { display: flex; gap: 14mm; justify-content: space-between; }

@media print {
  @page { margin: 16mm 14mm; }
  body.painel { padding: 0; background: #fff; }
  body.painel > *:not(#folha) { display: none !important; }
  #folha { display: block; }
}

/* ---- Relatórios ------------------------------------------------------------
   Número primeiro, lista depois. Quem abre um relatório quer saber o tamanho
   da coisa antes de querer o detalhe, e número pequeno no fim de uma tabela
   longa é número que ninguém lê. */
.placar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.6rem;
  margin: 0.4rem 0 1.4rem;
}

.placar-item {
  background: var(--marca);
  color: var(--sobre-marca);
  border-radius: var(--raio-cartao);
  padding: 0.9rem 1rem;
}

.placar-item strong {
  display: block;
  font-family: var(--serifada);
  font-size: var(--t-heroi);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.placar-item span {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--t-micro);
  line-height: 1.3;
  opacity: 0.86;
}

.periodo { display: flex; gap: 0.7rem; }
.periodo label { flex: 1; }

/* Barra por remédio. Comparar quantidade é comparar comprimento, que o olho faz
   sozinho; comparar números exige que a pessoa leia e subtraia. A barra é a
   única peça decorativa do painel e ela está aqui porque faz trabalho. */
.barras { margin-bottom: 1.4rem; }

.barra-linha {
  display: grid;
  grid-template-columns: 1fr 5rem 2.5rem;
  gap: 0.6rem;
  align-items: center;
  padding: 0.55rem 0;
  border-top: 1px solid var(--linha);
}

.barra-nome { min-width: 0; line-height: 1.3; font-weight: 600; }
.barra-nome .discreta { display: block; font-size: var(--t-micro); font-weight: 400; }

.barra-trilho {
  height: 10px;
  border-radius: var(--raio-pilula);
  background: var(--folha-clara);
  overflow: hidden;
}

.barra-preenchida { display: block; height: 100%; background: var(--folha); }

.barra-valor {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.nada-aqui {
  background: var(--papel);
  border: 1px dashed var(--linha);
  border-radius: var(--raio-cartao);
  padding: 1.4rem 1rem;
  text-align: center;
  margin: 0.6rem 0;
}

#corpo-relatorio h3 { margin: 1.5rem 0 0.4rem; }

/* Em tela estreita a barra some e sobra nome e número: 5rem de trilho ao lado
   de um nome de remédio comprido vira duas tiras finas que não comparam nada. */
@media (max-width: 22rem) {
  .barra-linha { grid-template-columns: 1fr 2.5rem; }
  .barra-trilho { display: none; }
}

/* ---- Identidade do remédio ------------------------------------------------
   Em 19/09/2026 a farmácia teve dois QUEPSIA LP, um de 200 mg e outro de 50 mg,
   e ninguém conseguia dizer qual estava na mão. O nome comercial era igual nos
   dois e vinha em negrito grande; a dose vinha em cinza miúdo, com redação
   diferente em cada um. O olho não compara o que não está no mesmo formato e no
   mesmo lugar.

   Estas regras existem para a dose deixar de ser nota de rodapé. Ela não ganhou
   mais cinza: ganhou moldura, cor e peso, porque o que separa dois remédios
   parecidos tem que ser a primeira coisa que salta, e não a última que se lê. */

.remedio-nome {
  display: block;
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.25;
}

.remedio-dose {
  display: inline-block;
  vertical-align: baseline;
  margin-left: 0.15rem;
  padding: 0.05rem 0.45rem;
  border-radius: var(--raio-pilula);
  background: var(--indigo);
  color: var(--superficie);
  font-weight: 700;
  /* Números um debaixo do outro com a mesma largura: é o que permite ver de
     relance que 200 e 50 não são o mesmo número. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  .remedio-dose { color: var(--sobre-aviso); }
}

/* O princípio ativo é o que responde "é mesmo isto que o médico receitou?",
   porque a receita quase sempre traz o princípio e não a marca. Fica logo
   abaixo do nome, legível, e não escondido junto do resto. */
.remedio-principio {
  display: block;
  font-size: var(--t-corpo);
  color: var(--tinta);
  font-style: italic;
  line-height: 1.3;
}

.titulo-remedio { margin: 0 0 0.2rem; }
.titulo-remedio .remedio-nome { font-size: var(--t-h2); }

/* ---- Onde a caixa está ----------------------------------------------------
   A lista mostrava um lugar só, o do lote que vence antes. Com remessa nova
   numa prateleira diferente, a tela afirmava com segurança uma prateleira e
   calava a outra, e quem fosse buscar não achava. */

.onde-esta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  margin-top: 0.25rem;
}

.onde-esta .lugar { margin-top: 0; }

.lugar-aviso {
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--ouro-texto);
  background: var(--ouro-claro);
  border-radius: var(--raio-pilula);
  padding: 0.05rem 0.5rem;
}

/* Fora da linha de estoque o lugar também precisa de marca própria: ele aparece
   nos avisos e na ficha do lote, e é sempre a informação que se procura. */
.lugar {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: var(--raio-pilula);
  background: var(--folha-clara);
  color: var(--folha-escura);
  font-weight: 600;
  font-size: var(--t-micro);
}

/* ---- Qual lote é este -----------------------------------------------------
   A tela de corrigir MUDA a prateleira de um lote, e até agora ela dizia só o
   nome do remédio. Quem corrigia trabalhava sem saber de qual caixa estava
   falando. */

.lote-identidade {
  display: block;
  font-size: var(--t-corpo);
  color: var(--tinta);
  line-height: 1.35;
}

/* Fundo cheio e contorno inteiro, e não filete de um lado só: o filete lateral
   é o cacoete mais reconhecível de tela gerada por máquina, e aqui ele nem
   destacava melhor. O que faz este bloco saltar é a cor de fundo e o peso. */
.lote-em-foco {
  background: var(--ouro-claro);
  border: 2px solid var(--ouro);
  border-radius: var(--raio-cartao);
  padding: 0.8rem 0.9rem;
  margin: 0.8rem 0;
  font-weight: 600;
  color: var(--tinta);
}

.itens-a-entregar li { padding: 0.5rem 0; }