/* ==========================================================================
   PRONTUÁRIO CLÍNICO INTEGRADO — folha do módulo

   DESTINO: ~/clinica-erp/public/css/prontuario.css

   Carregada só na tela do prontuário. Todo seletor daqui exige a casca
   `.pr-modulo` — mesma convenção de `css/rh.css`. Sem a casca, a tela aparece
   sem estilo, sem erro no console e sem pista do motivo.

   O tema (preto absoluto, dourado, caramelo, vidro jateado) vem de
   `liquid-glass.css`, que já está no ar. Aqui ficam só as variáveis que o
   prontuário acrescenta e o que é específico dos dez blocos.
   ========================================================================== */

.pr-modulo {
  /* Metais da marca — em BORDA e TEXTO, nunca preenchendo área grande. */
  --pr-dourado: #FFD700;
  --pr-caramelo: #D4A373;
  --pr-borda: rgba(212, 163, 115, 0.45);
  --pr-borda-sutil: rgba(212, 163, 115, 0.22);
  --pr-texto: #F5EFE6;
  --pr-texto-suave: rgba(245, 239, 230, 0.62);
  --pr-vidro: rgba(255, 255, 255, 0.05);
  --pr-vidro-forte: rgba(255, 255, 255, 0.08);

  /* Alerta clínico. Vermelho puro (#F00) sobre preto vibra e fica ILEGÍVEL;
     este tom dá 7.1:1 de contraste (AAA) e continua lendo como perigo.
     Não troque por vermelho saturado sem medir: o campo que some da vista é
     justamente o da alergia. */
  --pr-alerta: #FF6B6B;
  --pr-alerta-fundo: rgba(255, 107, 107, 0.10);
  --pr-rascunho: #E8B84B;
  --pr-rascunho-fundo: rgba(232, 184, 75, 0.10);
  --pr-assinado: #7FB685;
  --pr-assinado-fundo: rgba(127, 182, 133, 0.10);

  --pr-raio: 10px;
  --pr-raio-interno: 8px;

  color: var(--pr-texto);
}

/* ── Cabeçalho fixo ────────────────────────────────────────────────────── */
.pr-cabecalho { padding: 10px 16px 6px; }
.pr-nome { font-size: 19px; font-weight: 600; color: var(--pr-texto); margin: 0; }
.pr-meta { font-size: 12px; color: var(--pr-texto-suave); margin-top: 2px; }
.pr-meta .pr-estado-sujo     { color: var(--pr-rascunho); }
.pr-meta .pr-estado-salvando { color: var(--pr-caramelo); }
.pr-meta .pr-estado-salvo    { color: var(--pr-assinado); }
.pr-meta .pr-estado-erro,
.pr-meta .pr-estado-conflito { color: var(--pr-alerta); }

/* ── Faixa de alergias ─────────────────────────────────────────────────────
   O ÚNICO preenchimento de área colorida do módulo. A regra "metais só em
   borda e texto" vale para dourado e caramelo, que são identidade. Este
   vermelho é sinalização de segurança, e sinalização precisa quebrar o padrão
   para funcionar. Se parecesse com o resto da tela, não seria um alerta.     */
.pr-alergias {
  display: flex; margin: 8px 16px 12px;
  border: 1px solid var(--pr-borda-sutil);
  border-radius: var(--pr-raio-interno);
  overflow: hidden; cursor: pointer;
}
.pr-alergias-marca { width: 3px; background: var(--pr-borda-sutil); }
.pr-alergias-corpo { flex: 1; padding: 8px 14px; }
.pr-alergias-rotulo {
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--pr-texto-suave); margin-bottom: 3px;
}
.pr-alergias--tem { border-color: var(--pr-alerta); background: var(--pr-alerta-fundo); }
.pr-alergias--tem .pr-alergias-marca { background: var(--pr-alerta); }
.pr-alergias--tem .pr-alergias-rotulo,
.pr-alergias--tem .pr-alergias-lista { color: var(--pr-alerta); }
.pr-alergias-lista { font-size: 14px; font-weight: 600; line-height: 20px; }
/* Terceiro estado: NÃO INVESTIGADO. Lista vazia e "perguntamos e não tem" são
   clinicamente diferentes — e o primeiro é o mais perigoso dos três, então
   não pode ficar invisível. */
.pr-alergias--pendente { border-color: var(--pr-rascunho); background: var(--pr-rascunho-fundo); }
.pr-alergias--pendente .pr-alergias-marca { background: var(--pr-rascunho); }
.pr-alergias--pendente .pr-alergias-texto { color: var(--pr-rascunho); font-size: 13px; }
.pr-alergias--nega { border-color: var(--pr-borda-sutil); }
.pr-alergias--nega .pr-alergias-marca { background: var(--pr-assinado); }
.pr-alergias--nega .pr-alergias-texto { color: var(--pr-texto-suave); font-size: 13px; }

/* ── Barra de abas ─────────────────────────────────────────────────────────
   `position: sticky` e não `fixed`: fixed sairia do fluxo e cobriria o topo
   do primeiro bloco ao rolar de volta.                                       */
.pr-abas {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 2px; overflow-x: auto;
  padding: 0 8px; background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--pr-borda-sutil);
  scrollbar-width: none;
}
.pr-abas::-webkit-scrollbar { display: none; }
.pr-aba {
  display: flex; align-items: center; gap: 6px;
  height: 46px; padding: 0 14px; white-space: nowrap;
  background: none; border: 0; cursor: pointer;
  color: var(--pr-texto-suave); font-size: 13px; position: relative;
}
.pr-aba-num { font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.pr-aba[aria-selected="true"] { color: var(--pr-texto); font-weight: 600; }
.pr-aba[aria-selected="true"] .pr-aba-num { color: var(--pr-dourado); font-weight: 700; }
/* Sublinhado da aba ativa: retângulo fino, dourado, sem brilho. */
.pr-aba[aria-selected="true"]::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: 0;
  height: 2px; background: var(--pr-dourado);
}
.pr-aba-ponto { width: 6px; height: 6px; border-radius: 1.5px; background: var(--pr-borda-sutil); }
.pr-aba-ponto--parcial   { background: var(--pr-caramelo); }
.pr-aba-ponto--completo  { background: var(--pr-assinado); }
.pr-aba-ponto--pendencia { background: var(--pr-alerta); }

/* ── Blocos (acordeão) ─────────────────────────────────────────────────── */
.pr-blocos { padding: 14px 16px 80px; }
.pr-bloco {
  border: 1px solid var(--pr-borda); border-radius: var(--pr-raio);
  background: var(--pr-vidro); backdrop-filter: blur(12px);
  margin-bottom: 14px; overflow: hidden;
  /* Sombra PRETA e difusa, sem cor: sombra dourada sob cartão dourado é o
     "glow" que o briefing proíbe. */
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
}
.pr-bloco[open] { border-color: var(--pr-dourado); background: var(--pr-vidro-forte); }
.pr-bloco--alerta { border-color: var(--pr-alerta); }

.pr-bloco-cabecalho {
  display: flex; align-items: center; gap: 14px;
  min-height: 58px; padding: 8px 14px; cursor: pointer;
  list-style: none;
}
.pr-bloco-cabecalho::-webkit-details-marker { display: none; }
.pr-bloco-num {
  width: 34px; height: 34px; border-radius: 7px;   /* quadrado suave, não círculo */
  border: 1px solid var(--pr-borda-sutil);
  display: grid; place-items: center;
  font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700;
  color: var(--pr-caramelo);
}
.pr-bloco[open] .pr-bloco-num { border-color: var(--pr-dourado); color: var(--pr-dourado); }
.pr-bloco-titulo { flex: 1; font-size: 15px; font-weight: 600; }
.pr-bloco[open] .pr-bloco-titulo { color: var(--pr-dourado); }
.pr-bloco-sub { font-size: 11.5px; color: var(--pr-texto-suave); margin-top: 2px; }
.pr-bloco-conta { font-size: 11.5px; color: var(--pr-texto-suave); font-family: ui-monospace, Menlo, monospace; }
.pr-bloco-corpo { padding: 0 14px 22px; }
.pr-bloco-regua { height: 1px; background: var(--pr-borda-sutil); margin-bottom: 18px; }

/* ── Campos ────────────────────────────────────────────────────────────── */
.pr-linha { display: flex; flex-wrap: wrap; gap: 14px; }
.pr-campo { flex: 1 1 200px; margin-bottom: 14px; min-width: 0; }
.pr-rotulo {
  display: block; font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--pr-caramelo); margin-bottom: 6px;
}
.pr-rotulo--alerta { color: var(--pr-alerta); }
.pr-obrigatorio { color: var(--pr-dourado); }  /* dourado, não vermelho: vermelho é alergia e erro */

.pr-campo input[type="text"], .pr-campo input[type="email"],
.pr-campo input[type="tel"], .pr-campo input[type="number"],
.pr-campo input[type="date"], .pr-campo select, .pr-campo textarea {
  width: 100%; box-sizing: border-box;
  min-height: 52px; padding: 0 14px;
  background: var(--pr-vidro); color: var(--pr-texto);
  border: 1px solid var(--pr-borda); border-radius: var(--pr-raio-interno);
  font: inherit; font-size: 15px;
}
.pr-campo textarea { padding: 14px; min-height: 120px; resize: vertical; line-height: 24px; }
.pr-campo :is(input, select, textarea):focus {
  outline: none; border-color: var(--pr-dourado);
  background: var(--pr-vidro-forte);
}
.pr-campo :is(input, select, textarea):disabled { opacity: 0.55; cursor: not-allowed; }
.pr-campo--erro :is(input, select, textarea) { border-color: var(--pr-alerta); }
.pr-dica { font-size: 12.5px; color: var(--pr-texto-suave); margin-top: 5px; line-height: 18px; }
.pr-erro { font-size: 12.5px; color: var(--pr-alerta); margin-top: 5px; }

/* Texto clínico longo — HMA, evolução, posologia, orientações.

   JUSTIFICADO EM REPOUSO, ALINHADO À ESQUERDA EM FOCO. Justificar enquanto se
   digita faz o parágrafo se reespaçar a cada palavra e o cursor pular. Contra
   "rios" de branco: entrelinha 1,6 e letter-spacing levemente negativo — a
   linha ganha palavras e o esticador de espaço tem menos trabalho por linha.
   Mexer nesses dois para baixo devolve os rios.                              */
.pr-clinico { text-align: justify; line-height: 24px; letter-spacing: -0.1px; }
.pr-clinico:focus { text-align: left; }

/* Chips de seleção: borda e texto dourados, NUNCA preenchimento chapado. */
.pr-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pr-chip {
  min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--pr-borda); border-radius: var(--pr-raio-interno);
  background: var(--pr-vidro); color: var(--pr-texto);
  font: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.pr-chip[aria-pressed="true"] {
  border-color: var(--pr-dourado); background: var(--pr-vidro-forte);
  color: var(--pr-dourado); font-weight: 600;
}
.pr-chip-nota { display: block; font-size: 11px; color: var(--pr-texto-suave); margin-top: 2px; }

/* Escala 1–10: dez alvos tocáveis em vez de slider. Slider em tela pequena
   entrega "6 ou 7?" conforme a grossura do dedo — e a escala é linha de base
   para o retorno. Só o número escolhido acende; sem degradê verde→vermelho,
   que seria o sistema dando diagnóstico. */
.pr-escala { display: flex; gap: 4px; }
.pr-escala button {
  flex: 1; min-width: 26px; height: 44px;
  border: 1px solid var(--pr-borda); border-radius: var(--pr-raio-interno);
  background: var(--pr-vidro); color: var(--pr-texto);
  font-family: ui-monospace, Menlo, monospace; cursor: pointer;
}
.pr-escala button[aria-pressed="true"] {
  border-color: var(--pr-dourado); color: var(--pr-dourado); font-weight: 700;
  background: var(--pr-vidro-forte);
}

/* ── Valores calculados (idade, IMC) ───────────────────────────────────── */
.pr-calculado {
  font-family: ui-monospace, Menlo, monospace; font-size: 22px; font-weight: 600;
  color: var(--pr-dourado); min-height: 52px; display: flex; align-items: center;
}
.pr-calculado--vazio { color: var(--pr-texto-suave); font-size: 18px; }

/* ── Selo de assinatura ────────────────────────────────────────────────── */
.pr-selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 6px; border: 1px solid;
  font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase;
}
.pr-selo--rascunho { border-color: var(--pr-rascunho); color: var(--pr-rascunho); background: var(--pr-rascunho-fundo); }
.pr-selo--assinado { border-color: var(--pr-assinado); color: var(--pr-assinado); background: var(--pr-assinado-fundo); }
.pr-selo--cancelado { border-color: var(--pr-alerta); color: var(--pr-alerta); background: var(--pr-alerta-fundo); }

/* ── Tabela comparativa ────────────────────────────────────────────────── */
.pr-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pr-tabela th {
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--pr-caramelo); text-align: right; font-weight: 500;
  padding: 10px 6px; border-bottom: 1px solid var(--pr-borda);
}
.pr-tabela th:first-child, .pr-tabela td:first-child { text-align: left; }
.pr-tabela td {
  padding: 10px 6px; text-align: right;
  font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--pr-borda-sutil);
}
/* Verde não é "diminuiu": é "andou na direção do objetivo DESTE paciente".
   Quem busca hipertrofia e ganhou massa magra teve uma vitória. */
.pr-var--sucesso { color: var(--pr-assinado); }
.pr-var--alerta  { color: var(--pr-alerta); }
.pr-var--neutro  { color: var(--pr-texto-suave); }

/* ── Botões ────────────────────────────────────────────────────────────── */
.pr-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.pr-btn {
  min-height: 48px; padding: 0 18px;
  border: 1px solid var(--pr-borda); border-radius: var(--pr-raio-interno);
  background: transparent; color: var(--pr-caramelo);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.pr-btn--primario { border-color: var(--pr-dourado); background: var(--pr-dourado); color: #0A0A0A; }
.pr-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Pendências ────────────────────────────────────────────────────────── */
.pr-pendencias {
  display: flex; border: 1px solid var(--pr-rascunho); border-radius: var(--pr-raio-interno);
  background: var(--pr-rascunho-fundo); overflow: hidden; margin-bottom: 14px;
}
.pr-pendencias-marca { width: 3px; background: var(--pr-rascunho); }
.pr-pendencias ul { margin: 0; padding: 8px 14px 8px 30px; color: var(--pr-rascunho); font-size: 12px; }

/* ── Tela estreita ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pr-campo { flex-basis: 100%; }
  /* Abaixo de ~34 caracteres por linha nenhum ajuste salva um parágrafo
     justificado — então em tela estreita simplesmente não justifica. */
  .pr-clinico { text-align: left; }
}