/* botão */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--espaco-2) var(--espaco-5);
  border: none;
  border-radius: var(--raio-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.botao-primario {
  background: var(--cor-primaria);
  color: #ffffff;
}

.botao-primario:hover,
.botao-primario:focus-visible {
  background: var(--cor-primaria-escura);
}

.botao-secundario {
  background: transparent;
  color: var(--cor-primaria);
  border: 1px solid var(--cor-primaria);
}

.botao-secundario:hover,
.botao-secundario:focus-visible {
  background: var(--cor-fundo);
}

.botao:focus-visible {
  outline: 2px solid var(--cor-primaria-escura);
  outline-offset: 2px;
}

/* campo de formulário */
.campo {
  margin-bottom: var(--espaco-4);
}

/* cartão */
.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
  padding: var(--espaco-5);
}

.tela-centralizada {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espaco-4);
}

.cartao-login {
  width: 100%;
  max-width: 24rem;
}

/* alerta */
.alerta {
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: var(--raio-sm);
  margin-bottom: var(--espaco-4);
}

.alerta-erro {
  background: var(--cor-erro-fundo);
  border: 1px solid var(--cor-erro-borda);
  color: var(--cor-erro);
}

/* cabeçalho — sempre no topo. Sair fica aqui, discreto e longe do
   alcance do polegar (que na navegação mobile fica ocupado pela barra
   de abas no rodapé). */
.cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espaco-3) var(--espaco-4);
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
}

.cabecalho .marca {
  font-weight: 700;
  text-decoration: none;
  color: var(--cor-texto);
}

.form-sair {
  margin: 0;
}

.link-sair {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: var(--espaco-2);
  color: var(--cor-texto-suave);
  font-size: 0.8125rem;
  cursor: pointer;
}

.link-sair:hover,
.link-sair:focus-visible {
  color: var(--cor-primaria);
}

/* barra de navegação — mobile: abas fixas no rodapé, largura toda.
   A partir de 768px: barra horizontal no topo, sem fixar. */
.barra-navegacao {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: var(--cor-superficie);
  border-top: 1px solid var(--cor-borda);
  padding-bottom: env(safe-area-inset-bottom);
}

.lista-navegacao {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.lista-navegacao li {
  flex: 1;
}

.item-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  text-align: center;
  text-decoration: none;
  color: var(--cor-texto-suave);
  font-size: 0.8125rem;
  font-weight: 600;
}

.item-nav.ativo {
  color: var(--cor-primaria);
}

.item-nav.indisponivel {
  color: var(--cor-indisponivel);
  cursor: default;
}

.conteudo {
  padding-bottom: calc(56px + env(safe-area-inset-bottom) + var(--espaco-4));
}

@media (min-width: 768px) {
  .barra-navegacao {
    position: static;
    border-top: none;
    border-bottom: 1px solid var(--cor-borda);
    padding-bottom: 0;
  }

  .lista-navegacao {
    flex-wrap: nowrap;
  }

  .lista-navegacao li {
    flex: none;
  }

  .item-nav {
    min-height: auto;
    padding: var(--espaco-4);
  }

  .conteudo {
    padding-bottom: var(--espaco-4);
  }
}

/* seções de listagem/CRUD */
.topo-secao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-4);
}

@media (max-width: 479px) {
  .topo-secao {
    flex-direction: column;
    align-items: stretch;
  }
}

.form-busca {
  display: flex;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-4);
}

.form-busca input {
  flex: 1;
}

.lista-itens {
  list-style: none;
  margin: 0 0 var(--espaco-4);
  padding: 0;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
  background: var(--cor-superficie);
}

.lista-itens li + li {
  border-top: 1px solid var(--cor-borda);
}

.item-lista {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--espaco-1);
  padding: var(--espaco-4);
  min-height: 64px;
  text-decoration: none;
  color: var(--cor-texto);
}

.item-lista:hover,
.item-lista:focus-visible {
  background: var(--cor-fundo);
}

.item-lista-detalhe {
  color: var(--cor-texto-suave);
  font-size: 0.875rem;
}

.texto-vazio {
  color: var(--cor-texto-suave);
}

.link-voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  min-height: 44px;
  padding: var(--espaco-2) 0;
  margin-bottom: var(--espaco-2);
  color: var(--cor-texto-suave);
  font-weight: 600;
  text-decoration: none;
}

.link-voltar:hover,
.link-voltar:focus-visible {
  color: var(--cor-primaria);
}

.lista-pacientes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.paciente-item {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  padding: var(--espaco-3) 0;
  cursor: default;
}

.paciente-item + .paciente-item {
  border-top: 1px solid var(--cor-borda);
}

.paciente-item-detalhe {
  color: var(--cor-texto-suave);
  font-size: 0.875rem;
}

.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-4);
  color: var(--cor-texto-suave);
}

.lista-definicao {
  margin: 0;
}

.lista-definicao dt {
  font-weight: 600;
  margin-top: var(--espaco-4);
}

.lista-definicao dt:first-child {
  margin-top: 0;
}

.lista-definicao dd {
  margin: 0;
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border: 2px solid var(--cor-erro);
  background: var(--cor-erro-fundo);
}

.erro-campo {
  color: var(--cor-erro);
  font-size: 0.875rem;
  margin: var(--espaco-1) 0 0;
}

.acoes-formulario {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
}

.form-desativar {
  margin-top: var(--espaco-5);
}

/* rótulo de campo que não é um <label for> de verdade (ex.: acima de um
   grupo de radio) — mesmo peso visual de um label */
.rotulo-campo {
  display: block;
  margin-bottom: var(--espaco-2);
  font-weight: 600;
}

/* botões de escolha — grupo de radio nativo, mas com aparência de botão.
   Some com o círculo do radio (mantendo-o focável/acessível) e estiliza
   o <label> irmão como o alvo de clique. */
.escolha-radio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-1);
}

.escolha-radio input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.escolha-radio label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--espaco-2) var(--espaco-4);
  border: 1px solid var(--cor-borda-campo);
  border-radius: var(--raio-sm);
  font-weight: 600;
  color: var(--cor-texto);
  cursor: pointer;
}

.escolha-radio input[type='radio']:checked + label {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: #ffffff;
}

.escolha-radio input[type='radio']:focus-visible + label {
  outline: 2px solid var(--cor-primaria-escura);
  outline-offset: 2px;
}

/* checkbox "não sei a data exata" — troca data exata por idade
   aproximada sem JS, via :has() no ancestral comum */
.campo-idade-aproximada {
  display: none;
  gap: var(--espaco-3);
  margin-top: var(--espaco-3);
  padding-left: var(--espaco-5);
}

.campo-idade-aproximada > div {
  flex: 1;
}

.rotulo-checkbox {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  min-height: 44px;
  margin-top: var(--espaco-2);
  font-weight: 400;
  color: var(--cor-texto-suave);
  cursor: pointer;
}

.rotulo-checkbox input[type='checkbox'] {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.campo-toggle:has(.campo-toggle-gatilho:checked) .campo-idade-aproximada {
  display: flex;
}

.campo-toggle:has(.campo-toggle-gatilho:checked) > label[for='data_nascimento'],
.campo-toggle:has(.campo-toggle-gatilho:checked) > input#data_nascimento {
  display: none;
}

/* alergias/comorbidades — precisa saltar aos olhos antes de prescrever,
   mas sem parecer erro (por isso não usa --cor-erro) */
.destaque-clinico {
  border: 1px solid var(--cor-primaria);
  background: #eef6f5;
  border-radius: var(--raio-lg);
  padding: var(--espaco-4);
  margin: var(--espaco-4) 0;
}

.destaque-clinico h3 {
  margin-top: 0;
  font-size: 1rem;
}

.destaque-clinico h3 + p {
  margin-top: 0;
}

.destaque-clinico > * + h3 {
  margin-top: var(--espaco-4);
}

/* faixa de óbito — sóbria de propósito, tons neutros, nunca vermelho */
.faixa-obito {
  padding: var(--espaco-3) var(--espaco-4);
  margin-bottom: var(--espaco-4);
  border-radius: var(--raio-sm);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
}

.faixa-obito strong {
  color: var(--cor-texto);
}

.faixa-obito p {
  margin: var(--espaco-1) 0 0;
}

/* seções ainda não implementadas (Consultas, Exames, Vacinas) */
.secao-indisponivel h2 {
  color: var(--cor-texto-suave);
}

/* marca discreta ao lado do nome — status inativo/óbito, tutor principal */
.marca-status {
  display: inline-block;
  margin-left: var(--espaco-2);
  padding: 0 var(--espaco-2);
  border-radius: var(--raio-sm);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  vertical-align: middle;
}

.marca-principal {
  color: var(--cor-primaria);
  border-color: var(--cor-primaria);
  background: #eef6f5;
}

.acao-discreta {
  text-align: center;
  font-size: 0.875rem;
}

.acao-discreta a {
  color: var(--cor-texto-suave);
}

/* botão que se comporta como link — usado quando a ação secundária
   precisa ser um <button type=submit> (tem dado de formulário pra
   mandar), mas visualmente é só um link discreto */
.botao-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--cor-texto-suave);
  text-decoration: underline;
  cursor: pointer;
}

.botao-link:hover,
.botao-link:focus-visible {
  color: var(--cor-primaria);
}

.form-peso-rapido .campo {
  margin-bottom: var(--espaco-3);
}

.lista-tutores-vinculados {
  list-style: none;
  margin: 0 0 var(--espaco-4);
  padding: 0;
}

.tutor-vinculado-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2);
  padding: var(--espaco-3) 0;
}

.tutor-vinculado-item + .tutor-vinculado-item {
  border-top: 1px solid var(--cor-borda);
}

.acoes-inline {
  display: flex;
  gap: var(--espaco-2);
}

.acoes-inline form {
  margin: 0;
}

.paciente-item a {
  color: var(--cor-texto);
  text-decoration: none;
}

.paciente-item a:hover,
.paciente-item a:focus-visible {
  color: var(--cor-primaria);
}

.campo-avancado {
  margin-bottom: var(--espaco-4);
}

.campo-avancado summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--cor-texto-suave);
  padding: var(--espaco-2) 0;
}

.campo-avancado[open] summary {
  margin-bottom: var(--espaco-3);
}

/* painel "Ver lista" (raça/pelagem) — details pequeno, sem o peso
   visual do campo-avancado */
.lista-sugestoes {
  margin-top: var(--espaco-2);
}

.lista-sugestoes summary {
  list-style: none;
}

.lista-sugestoes summary::-webkit-details-marker {
  display: none;
}

.lista-sugestoes[open] summary {
  margin-bottom: var(--espaco-2);
}

/* corpo agrupado por espécie (raça) — troca com o radio de espécie via
   :has(), sem JS. Pelagem não tem data-lista-especie e fica sempre visível */
.lista-sugestoes-corpo[data-lista-especie] {
  display: none;
}

form:has(#especie_canina:checked) .lista-sugestoes-corpo[data-lista-especie='canina'],
form:has(#especie_felina:checked) .lista-sugestoes-corpo[data-lista-especie='felina'] {
  display: block;
}

.lista-sugestoes-grupo h3 {
  margin: var(--espaco-3) 0 var(--espaco-1);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cor-texto-suave);
}

.lista-sugestoes-grupo:first-child h3 {
  margin-top: 0;
}

.lista-sugestoes-itens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-1);
}

.lista-sugestoes-itens button {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  padding: var(--espaco-1) var(--espaco-2);
  font-size: 0.8125rem;
  color: var(--cor-texto);
  cursor: pointer;
}

.lista-sugestoes-itens button:hover,
.lista-sugestoes-itens button:focus-visible {
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
}

/* gráfico de evolução do peso — SVG inline gerado no servidor (src/lib/grafico.js) */
.grafico-peso {
  display: block;
  width: 100%;
  height: 200px;
  margin: var(--espaco-4) 0;
}

/* ponto único (sem 2+ pesagens pra traçar evolução) — só ponto + faixa-alvo,
   ~1/3 da altura cheia (ver src/lib/grafico.js gerarGraficoPontoUnico) */
.grafico-peso-compacto {
  height: 68px;
  margin-bottom: var(--espaco-2);
}

.grafico-eixo {
  stroke: var(--cor-borda-campo);
  stroke-width: 1;
}

.grafico-grade {
  stroke: var(--cor-borda);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.grafico-rotulo {
  fill: var(--cor-texto-suave);
  font-size: 10px;
  font-family: var(--fonte-sistema);
}

.grafico-linha {
  fill: none;
  stroke: var(--cor-primaria);
  stroke-width: 2;
}

/* consulta = círculo cheio; tutor = losango vazado — diferença de FORMA,
   não só de cor, pra não depender de percepção de cor no tooltip nativo */
.grafico-ponto-consulta circle {
  fill: var(--cor-primaria);
}

.grafico-ponto-tutor rect {
  fill: var(--cor-superficie);
  stroke: var(--cor-primaria-escura);
  stroke-width: 1.5;
}

.lista-pesos {
  list-style: none;
  margin: var(--espaco-3) 0 0;
  padding: 0;
}

.peso-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2);
  padding: var(--espaco-3) 0;
}

.peso-item + .peso-item {
  border-top: 1px solid var(--cor-borda);
}

.link-excluir {
  color: var(--cor-texto-suave);
  font-size: 0.875rem;
  text-decoration: underline;
  white-space: nowrap;
}

.link-excluir:hover,
.link-excluir:focus-visible {
  color: var(--cor-erro);
}

/* módulo 2 — consultas e linha do tempo */
.cartao h3 {
  margin-top: var(--espaco-4);
}

.form-filtro-historico {
  margin-top: var(--espaco-3);
}

/* <details class="cartao"> — seção recolhível de nível superior (peso).
   O summary assume a função visual do h2 que os outros cartões têm solto. */
.cartao > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
}

.cartao[open] > summary {
  margin-bottom: var(--espaco-4);
}

/* chips de filtro da linha do tempo — compactos, rótulo dentro do próprio
   chip, quebram linha. O checkbox real fica invisível mas focável (mesma
   técnica do .escolha-radio), só que em pílula e mais baixo (~36px) */
.chips-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-3);
}

.chip-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 var(--espaco-3);
  border: 1px solid var(--cor-borda-campo);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cor-texto);
  cursor: pointer;
  white-space: nowrap;
}

.chip-input:checked + .chip {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: #ffffff;
}

.chip-input:focus-visible + .chip {
  outline: 2px solid var(--cor-primaria-escura);
  outline-offset: 2px;
}

/* módulo 2 — ficha estruturada por tipo de consulta (dermatológica) */

/* chip do filtro da timeline é compacto (~36px) de propósito — na ficha
   os campos multipla precisam ser grandes, alvo de toque confortável */
.chip-grande .chip {
  min-height: 44px;
  padding: 0 var(--espaco-4);
  font-size: 0.9375rem;
}

.campo-ficha {
  margin-bottom: var(--espaco-5);
}

.rotulo-campo-ficha {
  font-weight: 600;
  margin-bottom: var(--espaco-2);
}

.marca-veio-de-antes {
  display: inline-block;
  margin-left: var(--espaco-2);
  padding: 0 var(--espaco-2);
  border-radius: var(--raio-sm);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: middle;
  text-transform: none;
}

/* campo condicional (revela_se) — escondido até a regra CSS gerada por
   campo (ver parciais/campos_ficha.njk) bater o :has() no valor gatilho */
.campo-revelavel {
  display: none;
}

/* escala 0-10 / 1-9 como fileira de botões numerados — nunca slider,
   dedo não tem a precisão que um slider exige */
.escala-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
}

.escala-numeros input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.escala-numeros label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--cor-borda-campo);
  border-radius: var(--raio-sm);
  font-weight: 600;
  color: var(--cor-texto);
  cursor: pointer;
}

.escala-numeros input[type='radio']:checked + label {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: #ffffff;
}

.escala-numeros input[type='radio']:focus-visible + label {
  outline: 2px solid var(--cor-primaria-escura);
  outline-offset: 2px;
}

.escala-rotulos {
  display: flex;
  justify-content: space-between;
  margin-top: var(--espaco-1);
  color: var(--cor-texto-suave);
  font-size: 0.8125rem;
}

/* indicador de progresso do stepper — só números em círculo (sem título
   ao lado, ver ficha_secao.njk), cada um clicável, navegação livre
   (pular/voltar) é o comportamento padrão, não exceção. O título da
   seção atual já aparece no <h2> do cartão logo abaixo */
.progresso-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-4);
}

.passo-ficha-circulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  border: 1px solid var(--cor-borda-campo);
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
}

.passo-ficha-circulo:focus-visible {
  outline: 2px solid var(--cor-primaria-escura);
  outline-offset: 2px;
}

/* preenchida com marca sutil — borda/tom diferente, sem parecer "atual" */
.passo-ficha-circulo.passo-ficha-completa {
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
  background: #eef6f5;
}

/* atual — preenchido e destacado, o mais forte dos três estados */
.passo-ficha-circulo.passo-ficha-atual {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: #ffffff;
}

/* controle de peso — número grande + variação com sinal, sempre visíveis
   mesmo se o cartão nunca for aberto (é o que resolve o "gráfico sumiu":
   o dado principal não depende de abrir o <details>) */
.peso-destaque {
  display: flex;
  align-items: baseline;
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-3);
  flex-wrap: wrap;
}

.peso-destaque-numero {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cor-texto);
}

.peso-destaque-variacao {
  font-size: 1rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
}

/* faixa de fundo do peso-alvo (±5%), tom suave — não é grade, não é dado,
   é referência. Sempre atrás da linha/pontos na ordem do SVG */
.grafico-faixa-alvo {
  fill: var(--cor-primaria);
  opacity: 0.08;
}

/* linha do tempo — ícone + cor por tipo. A cor nunca é o único
   diferenciador (daltonismo, sol na tela) — o ícone muda de forma
   independente da cor, ver parciais/icones_tipo.njk */
.item-lista.item-timeline {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: var(--espaco-3);
  border-left: 3px solid transparent;
  padding-left: calc(var(--espaco-4) - 3px);
}

.item-timeline-icone {
  flex-shrink: 0;
  display: inline-flex;
  margin-top: 3px;
}

.item-timeline-corpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-1);
}

/* linha 1 do evento — ícone já dá o peso visual ao lado, o título só
   precisa se destacar do texto de apoio da linha 2 */
.item-timeline-titulo {
  font-size: 1.0625rem;
  font-weight: 700;
}

/* especificidade tem que IGUALAR .item-lista.item-timeline (2 classes) —
   um seletor de classe única aqui perderia pro "border-left: ... transparent"
   do shorthand da regra base, mesmo vindo depois no arquivo */
.item-timeline.cor-tipo-clinica        { border-left-color: var(--cor-tipo-clinica); }
.cor-tipo-clinica        .item-timeline-icone { color: var(--cor-tipo-clinica); }
.item-timeline.cor-tipo-dermato        { border-left-color: var(--cor-tipo-dermato); }
.cor-tipo-dermato        .item-timeline-icone { color: var(--cor-tipo-dermato); }
.item-timeline.cor-tipo-nutro          { border-left-color: var(--cor-tipo-nutro); }
.cor-tipo-nutro          .item-timeline-icone { color: var(--cor-tipo-nutro); }
.item-timeline.cor-tipo-procedimento   { border-left-color: var(--cor-tipo-procedimento); }
.cor-tipo-procedimento   .item-timeline-icone { color: var(--cor-tipo-procedimento); }
.item-timeline.cor-tipo-teleorientacao { border-left-color: var(--cor-tipo-teleorientacao); }
.cor-tipo-teleorientacao .item-timeline-icone { color: var(--cor-tipo-teleorientacao); }
.item-timeline.cor-tipo-retorno        { border-left-color: var(--cor-tipo-retorno); }
.cor-tipo-retorno        .item-timeline-icone { color: var(--cor-tipo-retorno); }
.item-timeline.cor-tipo-vacina         { border-left-color: var(--cor-tipo-vacina); }
.cor-tipo-vacina         .item-timeline-icone { color: var(--cor-tipo-vacina); }
.item-timeline.cor-tipo-exame          { border-left-color: var(--cor-tipo-exame); }
.cor-tipo-exame          .item-timeline-icone { color: var(--cor-tipo-exame); }
.item-timeline.cor-tipo-receita        { border-left-color: var(--cor-tipo-receita); }
.cor-tipo-receita        .item-timeline-icone { color: var(--cor-tipo-receita); }
.item-timeline.cor-tipo-emergencia     { border-left-color: var(--cor-tipo-emergencia); }
.cor-tipo-emergencia     .item-timeline-icone { color: var(--cor-tipo-emergencia); }
.item-timeline.cor-tipo-neutro         { border-left-color: var(--cor-tipo-neutro); }
.cor-tipo-neutro         .item-timeline-icone { color: var(--cor-tipo-neutro); }

/* módulo tags — chip de tag aplicada (pílula colorida, com "×" quando
   removível) e chip de filtro (checkbox com indicador de cor). A cor
   nunca é o único diferenciador de qual tag é qual: o nome sempre
   acompanha o chip, nunca abreviado. */
.chips-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  margin: var(--espaco-2) 0;
}

/* chips read-only nas linhas de listagem — mais discretos que os
   chips do detalhe (sem "×", sem margem extra empurrando o layout) */
.chips-tags-compactas {
  margin: var(--espaco-1) 0 0;
  gap: var(--espaco-1);
}

.chips-tags-compactas .chip-tag {
  min-height: 24px;
  padding: 0 var(--espaco-2);
  font-size: 0.75rem;
}

.form-chip-tag {
  display: inline-flex;
  margin: 0;
}

.chip-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  min-height: 32px;
  padding: 0 var(--espaco-1) 0 var(--espaco-3);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid currentColor;
}

.chip-tag-remover {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}

.chip-tag-remover:hover {
  background: rgba(0, 0, 0, 0.12);
}

.chip-tag-remover:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

/* tag fora do catálogo ativo, mas ainda aplicada a um registro —
   continua visível (não é apagada do histórico), só num tom apagado */
.chip-tag-arquivada {
  opacity: 0.55;
}

/* fundo levemente tingido da cor de cada tag. Primeiro uso de
   color-mix() no projeto (Safari 16.2+/Chrome 111+) — cada regra
   declara o background duas vezes: primeiro um hex sólido fixo
   (aproximação da mesma mistura 12%-cor/88%-branco), depois a linha
   com color-mix(). Navegador sem suporte ignora a segunda declaração e
   fica com o fallback sólido — funciona nos dois casos sem precisar
   testar depois. */
.chip-tag-cinza    { color: var(--cor-tag-cinza);    background: #eaeced; background: color-mix(in srgb, var(--cor-tag-cinza) 12%, white); }
.chip-tag-azul     { color: var(--cor-tag-azul);     background: #e4ecf5; background: color-mix(in srgb, var(--cor-tag-azul) 12%, white); }
.chip-tag-verde    { color: var(--cor-tag-verde);    background: #e4efe8; background: color-mix(in srgb, var(--cor-tag-verde) 12%, white); }
.chip-tag-ambar    { color: var(--cor-tag-ambar);    background: #f1ebe0; background: color-mix(in srgb, var(--cor-tag-ambar) 12%, white); }
.chip-tag-vermelho { color: var(--cor-tag-vermelho); background: #f5e8e8; background: color-mix(in srgb, var(--cor-tag-vermelho) 12%, white); }
.chip-tag-roxo     { color: var(--cor-tag-roxo);     background: #ede8f4; background: color-mix(in srgb, var(--cor-tag-roxo) 12%, white); }
.chip-tag-turquesa { color: var(--cor-tag-turquesa); background: #e2eef2; background: color-mix(in srgb, var(--cor-tag-turquesa) 12%, white); }

.form-aplicar-tag {
  display: flex;
  gap: var(--espaco-2);
  margin-top: var(--espaco-2);
}

.form-aplicar-tag input {
  flex: 1;
}

/* chip de filtro (checkbox) com indicador de cor da tag — reaproveita
   .chip/.chip-input já existentes, só adiciona a bolinha de cor antes do
   texto; o estado marcado continua usando --cor-primaria (mesma lógica
   do filtro da timeline), sem misturar duas paletas de "selecionado" */
.chip-cor-cinza::before,
.chip-cor-azul::before,
.chip-cor-verde::before,
.chip-cor-ambar::before,
.chip-cor-vermelho::before,
.chip-cor-roxo::before,
.chip-cor-turquesa::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--espaco-1);
}
.chip-cor-cinza::before    { background: var(--cor-tag-cinza); }
.chip-cor-azul::before     { background: var(--cor-tag-azul); }
.chip-cor-verde::before    { background: var(--cor-tag-verde); }
.chip-cor-ambar::before    { background: var(--cor-tag-ambar); }
.chip-cor-vermelho::before { background: var(--cor-tag-vermelho); }
.chip-cor-roxo::before     { background: var(--cor-tag-roxo); }
.chip-cor-turquesa::before { background: var(--cor-tag-turquesa); }

/* link de Configurações no cabeçalho, ao lado de Sair */
.acoes-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
}

.link-configuracoes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--cor-texto-suave);
}

.link-configuracoes:hover,
.link-configuracoes:focus-visible {
  color: var(--cor-primaria);
}

/* seletor de cor da tag — mesma técnica de radio invisível do
   .escolha-radio, mas o estado marcado NÃO pode sobrescrever o
   background (ele É a própria cor sendo escolhida); usa um anel em
   volta do chip em vez disso */
.escolha-cor {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-1);
}

.escolha-cor input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.escolha-cor input[type='radio']:checked + label {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.escolha-cor input[type='radio']:focus-visible + label {
  outline: 2px solid var(--cor-primaria-escura);
  outline-offset: 2px;
}