/* LesionCare — folha de estilo única.
   ~12 KB contra os ~300 KB de um framework utilitário, e o layout fica sob controle.

   ⛔⛔ AS TRÊS REGRAS QUE ESTE ARQUIVO EXISTE PARA NÃO VIOLAR (RNF-LAY):
   1. conteúdo NÃO transborda a dobra — nada é cortado ao mudar de largura;
   2. margem é SIMÉTRICA — é proibido espremer conteúdo à esquerda deixando o lado
      direito vazio, que é o defeito mais comum de painel com barra lateral;
   3. largura de LEITURA fica entre 60 e 80 caracteres, mas só no texto corrido; o
      resto do espaço se ocupa com conteúdo, não com vazio.
*/

/* ============================================================ tokens */
:root {
  --tinta-1: #0f172a;
  --tinta-2: #334155;
  --tinta-3: #64748b;
  --tinta-4: #94a3b8;

  --fundo: #f6f8fb;
  --superficie: #ffffff;
  --borda: #e2e8f0;
  --borda-forte: #cbd5e1;

  --marca: #2e3a59;
  --marca-clara: #3f5080;
  --acento: #0d9488;
  --acento-fundo: #f0fdfa;

  --risco-baixo: #16a34a;
  --risco-medio: #ca8a04;
  --risco-alto: #dc2626;

  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;

  --barra: 264px;
  /* ⭐ O respiro lateral é UM token, usado dos dois lados. É assim que a simetria
     deixa de depender de alguém lembrar de repetir o valor. */
  --respiro: clamp(16px, 2.5vw, 40px);

  --sombra-1: 0 1px 2px rgba(15, 23, 42, .06);
  --sombra-2: 0 4px 16px rgba(15, 23, 42, .08);
}

/* ============================================================ base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* ⛔ `overflow-x: hidden` ESCONDE o transbordo em vez de resolvê-lo, e some com a
     evidência de que existe. Aqui ele não é usado: se algo estourar a largura, tem
     de aparecer na conferência. */
  background: var(--fundo);
  color: var(--tinta-1);
  font: 400 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .7em; }
p:last-child { margin-bottom: 0; }
a  { color: var(--marca-clara); }

/* ⛔ Largura de leitura SÓ no texto corrido. Aplicar isso a um painel de dados
   deixaria metade da tela vazia — foi exatamente a reclamação. */
.prosa { max-width: 68ch; }

/* ============================================================ estrutura */
.app {
  display: grid;
  grid-template-columns: var(--barra) minmax(0, 1fr);
  min-height: 100vh;
}
/* ⭐ `minmax(0, 1fr)` e não `1fr`: `1fr` tem mínimo `auto`, e uma tabela larga
   dentro dele empurra a coluna além da tela em vez de rolar dentro da própria caixa. */

.barra {
  background: var(--marca);
  color: #e8edf7;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.barra .marca { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; }
.barra .marca b { font-size: 1.05rem; letter-spacing: -.02em; }
.barra .marca span { font-size: .72rem; color: #9fb0d0; display: block; font-weight: 400; }

.barra nav { display: flex; flex-direction: column; gap: 2px; }
.barra a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-1);
  color: #cdd8ee; text-decoration: none; font-size: .9rem;
  /* alvo de toque de 44px na vertical, com o padding (RNF-USO-03) */
  min-height: 40px;
}
.barra a:hover { background: rgba(255,255,255,.07); color: #fff; }
.barra a[aria-current="page"] { background: rgba(255,255,255,.14); color: #fff; font-weight: 600; }
.barra .rodape { margin-top: auto; padding-top: 16px; font-size: .78rem; color: #9fb0d0; }

/* ⛔⛔ AQUI MORA O DEFEITO QUE O TITULAR APONTOU. O padrão errado é
   `padding: 24px 24px 24px 32px` — conteúdo colado à esquerda e sobra à direita.
   O respiro é o MESMO token dos dois lados, e o miolo cresce até o limite de
   leitura confortável em telas largas, centralizado em vez de encostado. */
.miolo {
  min-width: 0;
  padding: var(--respiro);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.miolo > * { min-width: 0; }
.limite { width: 100%; max-width: 1320px; margin-inline: auto; }

/* ============================================================ cabeçalho de página */
.topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.topo .titulo { min-width: 0; }
.topo .titulo p { color: var(--tinta-3); font-size: .9rem; margin: 4px 0 0; }
.topo .acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================ superfícies */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-3);
  box-shadow: var(--sombra-1);
  padding: 18px;
  min-width: 0;
}
.cartao > h2, .cartao > h3 { margin-bottom: 4px; }
.cartao .sub { color: var(--tinta-3); font-size: .85rem; margin-bottom: 14px; }

/* ⭐ `auto-fit` com `minmax` preenche a linha em qualquer largura: em vez de deixar
   buraco à direita, os cartões crescem para ocupar o que sobra. */
/* ⛔ `align-items: start` é o que impede o cartão curto de ESTICAR até a altura do
   vizinho alto. Sem isso, um cartão com uma frase vira 700 px de branco ao lado de um
   formulário longo — e o vazio parece defeito de carregamento. */
.grade { display: grid; gap: 14px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grade-2 { display: grid; gap: 14px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* ============================================================ indicador */
.kpi { display: flex; flex-direction: column; gap: 2px; }
.kpi .rot { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.kpi .val { font-size: 1.85rem; font-weight: 680; letter-spacing: -.03em; color: var(--marca); }
/* ⛔ RF-IND-05: número sem denominador e sem período não informa. Esta linha é
   OBRIGATÓRIA no componente — o indicador não existe sem ela. */
.kpi .base { font-size: .8rem; color: var(--tinta-3); }

/* ============================================================ tabela */
/* ⛔ Tabela que não cabe ajusta LAYOUT, nunca elimina coluna. A rolagem acontece
   DENTRO da caixa, e não empurra a página inteira para o lado. */
.tabela-caixa { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--r-2); background: var(--superficie); }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borda); }
th { background: #f8fafc; font-weight: 620; color: var(--tinta-2); white-space: nowrap; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8fafc; }

/* ============================================================ etiquetas */
.etiqueta { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .76rem; font-weight: 600; border: 1px solid transparent; }
.etiqueta.baixo { background: #f0fdf4; color: var(--risco-baixo); border-color: #bbf7d0; }
.etiqueta.medio { background: #fefce8; color: var(--risco-medio); border-color: #fde68a; }
.etiqueta.alto  { background: #fef2f2; color: var(--risco-alto);  border-color: #fecaca; }
.etiqueta.neutro{ background: #f1f5f9; color: var(--tinta-2);     border-color: var(--borda-forte); }

/* ============================================================ formulário */
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > label { font-size: .84rem; font-weight: 600; color: var(--tinta-2); }
.campo .ajuda { font-size: .78rem; color: var(--tinta-3); }
.campo .erro { font-size: .8rem; color: var(--risco-alto); }

/* ⛔⛔ LISTA DE EXCEÇÕES, NÃO LISTA DE PERMISSÕES. Enquanto os tipos eram enumerados um
   a um, o `datetime-local` recém-acrescentado ao formulário ficou de fora e nasceu com
   21 px de altura — inutilizável com o dedo. Um seletor que precisa ser lembrado a cada
   campo novo é um seletor que um dia não será lembrado. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=submit]),
select, textarea {
  width: 100%;
  min-height: 42px;              /* alvo de toque (RNF-USO-03) */
  padding: 9px 11px;
  font: inherit;
  color: var(--tinta-1);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-1);
}
textarea { min-height: 88px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;           /* foco SEMPRE visível (RNF-USO-05) */
}

.linha { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ============================================================ botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px; padding: 0 16px;
  font: inherit; font-weight: 600; font-size: .9rem;
  border-radius: var(--r-1); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  background: var(--marca); color: #fff;
}
.botao:hover { background: var(--marca-clara); }
.botao.secundario { background: var(--superficie); color: var(--tinta-1); border-color: var(--borda-forte); }
.botao.secundario:hover { background: #f8fafc; }
.botao.acento { background: var(--acento); }
.botao:disabled { opacity: .55; cursor: not-allowed; }

/* ============================================================ avisos */
.aviso { display: flex; gap: 10px; padding: 11px 13px; border-radius: var(--r-2); font-size: .88rem; border: 1px solid; }
.aviso.erro { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.aviso.ok   { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.aviso.nota { background: var(--acento-fundo); border-color: #99f6e4; color: #115e59; }

/* ============================================================ entrada */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: var(--respiro); background: linear-gradient(160deg, #2e3a59 0%, #243050 55%, #17203a 100%); }
.entrada .caixa { width: 100%; max-width: 400px; background: var(--superficie); border-radius: var(--r-3); box-shadow: var(--sombra-2); padding: 28px; }
.entrada .marca { text-align: center; margin-bottom: 20px; }
.entrada .marca b { font-size: 1.3rem; color: var(--marca); letter-spacing: -.02em; }
.entrada .marca span { display: block; font-size: .82rem; color: var(--tinta-3); margin-top: 2px; }

/* ============================================================ telas estreitas */
/* ⛔ A barra lateral vira topo — ela NÃO some e não empurra o conteúdo para fora.
   Nenhuma largura de 360 px em diante pode produzir rolagem horizontal. */
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  /* ⛔⛔ QUEBRAR, NÃO ROLAR. Com `overflow-x: auto` a barra escondia "Alertas" e
     "Indicadores" fora da borda sem nenhum sinal de que existiam, e cortava o rótulo
     ativo pela metade. Menu que rola lateralmente num telefone é menu que não é
     encontrado. Seis itens curtos cabem em duas linhas — e duas linhas se veem. */
  .barra {
    position: static; height: auto; flex-direction: row; align-items: center;
    flex-wrap: wrap; gap: 6px 10px; overflow: visible; padding: 10px var(--respiro);
  }
  .barra .marca { padding: 0; border: 0; margin: 0; }
  .barra .marca span { display: none; }
  .barra nav { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .barra a { white-space: nowrap; padding: 8px 11px; }
  /* ⛔⛔ O "Sair" estava com `display: none` no telefone. Num tablet de posto, passado
     de mão em mão, não poder encerrar a sessão é um defeito de SEGURANÇA, não de
     layout: o próximo a pegar o aparelho continua no prontuário de quem usou antes. */
  .barra .rodape {
    display: flex; align-items: center; gap: 8px; margin-left: auto;
    padding: 0; border: 0; font-size: .82rem;
  }
  .barra .rodape form { margin: 0 !important; }
  .barra .rodape .botao { width: auto !important; min-height: 34px; padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================ mapa corporal */
/* ⛔⛔ A silhueta em 340 px de largura resulta em ~714 px de altura (proporção
   200×420), o que empurra o formulário para fora da dobra e deixa a coluna ao lado
   com um vão vazio embaixo. Conteúdo compactado não é conteúdo espremido: é o
   quadro ocupar a altura DISPONÍVEL em vez da altura que o desenho pediria.
   A altura manda, a largura acompanha, e o `viewBox` preserva a proporção. */
#palco { display: grid; place-items: center; }
#palco > svg {
  height: min(58vh, 460px);
  width: auto;
  max-width: 100%;
}
/* a aba ativa usa a cor de acento, para o profissional saber em que vista está */
.aba[aria-pressed="true"] { background: var(--acento); color: #fff; border-color: var(--acento); }

/* ============================================================ Fase 3 — cuidado */
/* `bom` é o verde de "está como deveria" — o mesmo tom de risco baixo, nome próprio
   porque aqui não se fala de risco e sim de conformidade. */
.etiqueta.bom { background: #f0fdf4; color: var(--risco-baixo); border-color: #bbf7d0; }

/* coluna numérica: alinhada à direita e sem quebrar, para a vista comparar de cima
   a baixo sem o olho procurar o dígito */
td.num, th.num { text-align: right; white-space: nowrap; }

.botao.compacto { min-height: 32px; padding: 0 11px; font-size: .82rem; }

/* ---------------------------------------------------------- série da evolução */
/* ⭐ Barras em CSS, não imagem nem biblioteca: a série cresce para baixo, então
   nenhuma quantidade de medidas estoura a dobra na horizontal. */
.serie { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.serie > li { min-width: 0; }
.serie-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.serie-data { font-size: .82rem; color: var(--tinta-3); }
.serie-valor { font-size: .95rem; font-weight: 650; color: var(--marca); letter-spacing: -.02em; }
.serie-trilho { height: 8px; margin: 5px 0 4px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.serie-barra { height: 100%; background: var(--acento); border-radius: 999px; }
.serie-pe { font-size: .82rem; color: var(--tinta-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

/* ---------------------------------------------------------- versões do plano */
.versao { border: 1px solid var(--borda); border-radius: var(--r-2); padding: 12px 14px; margin-top: 12px; background: #fbfcfe; }
/* a vigente se distingue por BORDA, não por cor de fundo: assim continua distinta
   em impressão, em alto contraste e para quem não separa os dois verdes */
.versao.vigente { border-color: var(--acento); border-left-width: 3px; background: var(--superficie); }
.versao-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 7px; }
.versao-corpo { font-size: .88rem; color: var(--tinta-2); line-height: 1.55; }
.motivo { margin-top: 8px; padding: 7px 10px; border-left: 3px solid var(--borda-forte); background: #f8fafc; border-radius: 0 var(--r-1) var(--r-1) 0; font-size: .84rem; }

.prescrever { margin-top: 18px; border-top: 1px solid var(--borda); padding-top: 14px; }
.prescrever > summary { cursor: pointer; font-weight: 620; color: var(--marca-clara); font-size: .92rem; min-height: 32px; display: flex; align-items: center; }

/* ---------------------------------------------------------- escolha conforme/desvio */
.plano-vigente { padding: 11px 13px; border: 1px solid var(--borda); border-left: 3px solid var(--acento); border-radius: 0 var(--r-2) var(--r-2) 0; background: var(--acento-fundo); font-size: .88rem; line-height: 1.55; }
.escolha { display: grid; gap: 8px; margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* ⭐ O rótulo inteiro é alvo de toque — no tablet, em pé ao lado do leito, ninguém
   acerta um círculo de 14 px. */
.opcao { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border: 1px solid var(--borda-forte); border-radius: var(--r-1); background: var(--superficie); cursor: pointer; font-size: .88rem; line-height: 1.45; min-height: 44px; }
.opcao:hover { border-color: var(--acento); }
.opcao input { margin-top: 2px; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--acento); }
.opcao:has(input:checked) { border-color: var(--acento); background: var(--acento-fundo); }