/* ============================================================
   PRONTO-SOCORRO — folha de estilo

   Software clínico noturno, usado 12 horas seguidas sob luz
   fluorescente, por gente cansada. A decisão estética é a
   contenção — mas contenção executada com precisão.

   REGRA DURA, herdada do documento de requisitos:
   cor é exclusiva de risco clínico. Navegação, botões, títulos e
   estados do sistema vivem em neutro. Se a interface tiver azul
   decorativo, o azul da classificação perde força.

   DOIS PAPÉIS TIPOGRÁFICOS:
   · texto — sans do sistema, para tudo que se LÊ
   · dado  — mono tabular, para o que se MEDE: horários,
             cronômetros, sinais vitais, números de atendimento.
             É o que dá à tela caráter de instrumento, e é a
             assinatura visual do produto.
   ============================================================ */

:root {

  /* --- neutros frios ---------------------------------------
     Cinza com leve viés azul-esverdeado. Foge do bege quente e
     do cinza morto, e faz o vermelho e o amarelo do risco
     saltarem mais.                                            */
  --fundo:        #eceff0;
  --superficie:   #ffffff;
  --superficie-2: #f5f7f8;
  --borda:        #d5dbdd;
  --borda-forte:  #9aa5a9;
  --texto:        #11181b;
  --texto-medio:  #3f4a4e;
  --texto-fraco:  #667378;

  /* --- risco — 4 cores do protocolo do MS -------------------
     Escuras o suficiente para contraste com texto branco.
     Não usar em mais nada, nunca.                             */
  --risco-vermelho: #b3121a;
  --risco-amarelo:  #9a6b00;
  --risco-verde:    #1a6b38;
  --risco-azul:     #1a5680;

  /* --- acento ----------------------------------------------
     Exceção deliberada à regra "cor é só risco", e a única.
     Vive em CONTORNO: rótulo de bloco, moldura de ícone, borda de
     campo focado. Nunca preenche superfície grande, nunca marca
     estado clínico, nunca aparece em botão de ação. É mais escuro
     e menos saturado que o azul do protocolo justamente para não
     ser confundido com classificação AZUL.                     */
  --acento:       #1a4f9c;
  --acento-bg:    #eef3fa;
  --acento-borda: #cbdaee;

  /* --- estado do sistema — dessaturado de propósito -------- */
  --erro:       #8f1d1d;
  --erro-bg:    #fbeeee;
  --ok:         #1f5c33;
  --ok-bg:      #eef4ef;
  --atencao:    #7a5800;
  --atencao-bg: #fbf4e4;

  /* --- escala de espaçamento, base 4 ----------------------- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px;

  --raio: 6px;
  --raio-s: 4px;

  --transicao: 140ms cubic-bezier(0.2, 0, 0.2, 1);

  --sombra:    0 1px 2px rgba(17, 24, 27, 0.05);
  --sombra-md: 0 2px 8px rgba(17, 24, 27, 0.07);

  --texto-fonte: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
                 "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --dado-fonte:  ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
                 Menlo, Consolas, monospace;
}

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

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--texto-fonte);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Foco sempre visível: todo fluxo aqui funciona pelo teclado. */
:focus-visible {
  outline: 2px solid var(--texto);
  outline-offset: 2px;
  border-radius: var(--raio-s);
}

h1, h2, h3 { margin: 0; font-weight: 650; line-height: 1.25; letter-spacing: -0.012em; }
a { color: var(--texto); text-underline-offset: 2px; }

/* ============================================================
   CONTROLES — estilo por ELEMENTO, não só por classe.
   Assim qualquer tela nova nasce apresentável, mesmo antes de
   receber classes próprias.
   ============================================================ */

input[type="text"], input[type="search"], input[type="password"],
input[type="email"], input[type="number"], input[type="date"],
input[type="tel"], input[type="datetime-local"], input:not([type]),
select, textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 16px;              /* 16px+ evita zoom automático no iOS */
  line-height: 1.4;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-s);
  transition: border-color var(--transicao), box-shadow var(--transicao);
  appearance: none;
}

input:hover, select:hover, textarea:hover { border-color: var(--texto-fraco); }

input:focus, select:focus, textarea:focus {
  border-color: var(--texto);
  box-shadow: 0 0 0 3px rgba(17, 24, 27, 0.09);
  outline: none;
}

input::placeholder, textarea::placeholder { color: var(--texto-fraco); opacity: 1; }
textarea { min-height: 88px; resize: vertical; line-height: 1.55; }

/* Seta própria: o select nativo é o que mais denuncia tela sem acabamento. */
select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23667378' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px;
  cursor: pointer;
}

input[type="checkbox"], input[type="radio"] {
  width: 18px; height: 18px; min-height: 0;
  margin: 0; flex: none; accent-color: var(--texto); cursor: pointer;
}

input[type="file"] {
  padding: 8px; font-size: 14px;
  background: var(--superficie-2); cursor: pointer;
}

/* Botão sem classe também precisa parecer botão. */
button {
  min-height: 42px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 550;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-s);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}
button:hover { background: var(--superficie-2); border-color: var(--texto-fraco); }

.btn-principal, .btn-secundario, .btn-texto {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 42px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 550;
  text-align: center;
  text-decoration: none;
  border-radius: var(--raio-s);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}

.btn-principal {
  width: 100%;
  color: var(--superficie);
  background: var(--texto);
  border: 1px solid var(--texto);
  box-shadow: var(--sombra);
}
.btn-principal:hover { background: #000; }
.btn-principal.estreito { width: auto; }

.btn-secundario {
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
}
.btn-secundario:hover { background: var(--superficie-2); border-color: var(--texto-fraco); }

.btn-texto {
  padding: 8px 10px;
  font-weight: 500;
  color: var(--texto-medio);
  background: none;
  border: 1px solid transparent;
}
.btn-texto:hover { color: var(--texto); background: var(--superficie-2); }

.btn-emergencia {
  width: 100%; margin-top: var(--e2);
  min-height: 40px; padding: 9px 12px;
  font: inherit; font-size: 13px; font-weight: 650;
  color: #fff; background: var(--risco-vermelho);
  border: 1px solid var(--risco-vermelho); border-radius: var(--raio-s);
  cursor: pointer;
}
.btn-emergencia:hover { background: #96070f; }

/* ============================================================
   ENTRADA
   ============================================================ */

.tela-entrada {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: var(--e5) var(--e4);
}
.cartao-entrada {
  width: 100%; max-width: 392px;
  padding: var(--e6) var(--e5) var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-md);
}
.marca { font-size: 22px; letter-spacing: -0.02em; }
.marca-sub { margin: 3px 0 var(--e5); font-size: 14px; color: var(--texto-fraco); }
.rodape-entrada {
  margin: var(--e5) 0 0; padding-top: var(--e4);
  border-top: 1px solid var(--borda);
  font-size: 13px; color: var(--texto-fraco); text-align: center;
}

/* ============================================================
   BARRA SUPERIOR

   Cartão flutuante, não faixa colada no topo. A faixa de borda a
   borda fazia a barra parecer parte da janela do navegador; o
   cartão a devolve para dentro da aplicação e dá ao conteúdo um
   respiro no alto que a tela não tinha.

   A organização é por GRUPOS separados por divisor fino, e os
   divisores são de CSS, não de marcação: quase todo item da barra
   é condicional — posto só existe para quem tem posto, contador
   só para quem tem fila — e divisor escrito à mão vira parede
   vertical solta no dia em que o grupo ao lado some.

   O relógio é do SERVIDOR: em registro clínico, a hora que vale
   é a do sistema, e deixá-la à vista evita discussão depois.
   ============================================================ */

.barra {
  position: sticky; top: 0; z-index: 20;
  padding: var(--e3) var(--e4) var(--e2);
  background: var(--fundo);
}

.barra-caixa {
  display: flex; align-items: center; gap: var(--e4);
  max-width: 1560px; margin: 0 auto;
  padding: 10px var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 14px;
  box-shadow: var(--sombra-md);
}

/* Divisor entre grupos, desenhado como borda do grupo seguinte.
   O bloco do usuário entra inteiro como um grupo só — avatar, nome
   e porta de saída —, então a última parede da barra cai à esquerda
   do avatar e não entre o nome e o botão de sair. Uma parede ali
   faria parecer que são duas coisas diferentes. */
.barra-caixa > * + *:not(.barra-sair) {
  padding-left: var(--e4);
  border-left: 1px solid var(--borda);
}

.barra-marca {
  font-size: 15px; font-weight: 650; letter-spacing: -0.01em;
  color: var(--texto); text-decoration: none;
  white-space: nowrap;
}

.barra-grupo { display: flex; align-items: center; gap: var(--e3); }

/* Moldura de ícone: quadrado claro em acento. É o uso que a folha
   permite para a cor — contorno e moldura, nunca superfície
   grande e nunca estado clínico. */
.barra-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none;
  color: var(--acento);
  background: var(--acento-bg);
  border-radius: 7px;
}

.barra-relogio strong {
  font-family: var(--dado-fonte);
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.barra-contador {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; color: var(--texto-medio);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.barra-contador svg { color: var(--texto-fraco); flex: none; }

.barra-menu { display: flex; align-items: center; gap: var(--e3); font-size: 13.5px; }
.barra-menu a {
  padding: 4px 2px;
  color: var(--acento); font-weight: 550; text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--transicao);
}
.barra-menu a:hover { border-bottom-color: var(--acento-borda); }

/* ------------------------------------------------------- usuário */

.barra-fim {
  display: flex; align-items: center; gap: var(--e3);
  margin-left: auto;
}

.barra-usuario { display: flex; align-items: center; gap: 10px; }

.barra-avatar {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  font-size: 12.5px; font-weight: 650; letter-spacing: 0.02em;
  color: var(--acento);
  background: var(--acento-bg);
  border: 1px solid var(--acento-borda);
  border-radius: 50%;
}
/* Sessão ativa. Pequeno de propósito: é informação de rodapé que
   ganhou lugar de destaque na diagramação, não um estado que
   alguém precise vigiar. */
.barra-ponto {
  position: absolute; right: -1px; bottom: -1px;
  width: 9px; height: 9px;
  background: var(--ok);
  border: 2px solid var(--superficie);
  border-radius: 50%;
}

.barra-quem { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.barra-quem strong {
  font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 22ch;
}
.barra-quem small { font-size: 11.5px; color: var(--texto-fraco); }

/* Sair virou ícone. O rótulo escrito ocupava a largura de um botão
   de ação para uma coisa que se usa uma vez por plantão — e ficava
   com o mesmo peso visual de tudo o que se usa o tempo todo. O
   title e o aria-label seguram o significado. */
.barra-sair button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; min-height: 0; padding: 0;
  color: var(--texto-medio);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 9px;
}
.barra-sair button:hover {
  color: var(--erro);
  border-color: var(--borda-forte);
  background: var(--superficie-2);
}

.conteudo { max-width: 980px; margin: 0 auto; padding: var(--e5) var(--e4) var(--e7); }

/* As filas são tabulares: nome, vitais, tempo e ações lado a lado.
   Em 980px as colunas fixas somam mais que o espaço disponível e a
   coluna do nome colapsa, quebrando o texto palavra a palavra. */
.conteudo.secao-fila { max-width: 1400px; }

/* ============================================================
   CABEÇALHOS
   ============================================================ */

.cabecalho-pagina {
  display: flex; align-items: baseline; gap: var(--e4);
  margin-bottom: var(--e5); padding-bottom: var(--e3);
  border-bottom: 1px solid var(--borda);
}
.cabecalho-pagina h1 { font-size: 24px; }
.cabecalho-acao { margin-left: auto; display: flex; gap: var(--e2); }

.secao-titulo {
  margin: var(--e6) 0 var(--e3);
  font-size: 12px; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--texto-fraco);
}

.nota, .detalhe { margin: var(--e2) 0 0; font-size: 14px; color: var(--texto-medio); }
.nota-mini { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--texto-fraco); }
.contagem {
  margin: 0 0 var(--e2); font-size: 11px; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--texto-fraco);
}
.rotulo-mini {
  display: block; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--texto-fraco);
}

/* ============================================================
   AVISOS — o erro explica o que houve e como resolver
   ============================================================ */

.aviso-erro, .aviso-ok, .aviso-info {
  margin: 0 0 var(--e4);
  padding: var(--e3) var(--e4);
  font-size: 14px; line-height: 1.5;
  border-left: 3px solid;
  border-radius: 0 var(--raio-s) var(--raio-s) 0;
}
.aviso-erro { color: var(--erro);    background: var(--erro-bg);    border-color: var(--erro); }
.aviso-ok   { color: var(--ok);      background: var(--ok-bg);      border-color: var(--ok); }
.aviso-info { color: var(--atencao); background: var(--atencao-bg); border-color: var(--atencao); }
.aviso-inline { display: block; margin-top: 5px; font-size: 13px; color: var(--erro); }

/* ============================================================
   FORMULÁRIOS
   ============================================================ */

.formulario { max-width: 640px; }

.grupo {
  margin: 0 0 var(--e4);
  padding: var(--e4) var(--e5) var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.grupo legend {
  padding: 0 var(--e2);
  font-size: 11px; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--texto-fraco);
}

.campo { margin-bottom: var(--e4); }
.campo label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 550; color: var(--texto-medio); }
.campo small { display: block; margin-top: 5px; font-size: 12.5px; color: var(--texto-fraco); }
.obrig { color: var(--erro); }

.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e3); }
.linha-3 { display: grid; grid-template-columns: 1fr 1.2fr 1.4fr; gap: 0 var(--e3); }

.marcador { display: flex; gap: var(--e2); align-items: center; padding: 7px 0; font-size: 15px; cursor: pointer; }

.confirmacao {
  display: flex; gap: var(--e2); align-items: flex-start;
  padding: var(--e3) var(--e4); margin-bottom: var(--e4);
  font-size: 14px; line-height: 1.5;
  background: var(--atencao-bg);
  border-left: 3px solid var(--atencao);
  border-radius: 0 var(--raio-s) var(--raio-s) 0;
  cursor: pointer;
}

.acoes { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e3); flex-wrap: wrap; }
.atalhos { display: flex; gap: var(--e4); margin: 0 0 var(--e4); font-size: 14px; }

.busca-linha { display: flex; gap: var(--e2); margin-bottom: var(--e4); }
.busca-linha input { flex: 1; }

.linha-inline { display: flex; gap: var(--e2); margin-bottom: var(--e4); flex-wrap: wrap; align-items: center; }
.linha-inline input, .linha-inline select { flex: 1; min-width: 150px; width: auto; }

.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oculto-total { display: none !important; }

/* ============================================================
   LISTAS E FILAS
   ============================================================ */

.lista-pacientes { list-style: none; margin: 0; padding: 0; }
.lista-pacientes a, .linha-escolha {
  display: block; width: 100%; text-align: left;
  padding: var(--e3) var(--e4); margin-bottom: 6px;
  font: inherit; color: var(--texto); text-decoration: none;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  cursor: pointer;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.lista-pacientes a:hover, .linha-escolha:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); }
.linha-escolha-form { margin: 0; }

.lp-nome { display: block; font-size: 16px; font-weight: 600; }
.lp-dados, .lp-mae, .lp-historico { display: block; font-size: 13px; color: var(--texto-fraco); }
.lp-dados { font-variant-numeric: tabular-nums; }
.lp-historico { margin-top: 3px; font-weight: 550; color: var(--texto-medio); }
.civil { font-weight: 400; color: var(--texto-fraco); }

.etiqueta {
  display: inline-block; padding: 2px 7px; margin-left: 4px;
  font-size: 10.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--texto-medio);
  background: var(--superficie-2);
  border: 1px solid var(--borda-forte);
  border-radius: 3px; vertical-align: middle;
}

.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: var(--e3) var(--e4); margin-bottom: 6px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
}
.lista-simples li.esmaecido { opacity: 0.5; }
.lista-simples small { display: block; font-size: 12px; color: var(--texto-fraco); }

.fila { list-style: none; margin: 0; padding: 0; }
.fila-item {
  display: flex; gap: var(--e4); align-items: flex-start;
  padding: var(--e3) var(--e4); margin-bottom: 6px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  transition: border-color var(--transicao);
}
.fila-item:hover { border-color: var(--borda-forte); }
.fila-item.esmaecido { opacity: 0.55; }

/* Cronômetro: elemento de assinatura. Mono tabular, leitura de
   instrumento. Ao estourar o alvo muda o PESO, nunca a cor —
   a cor pertence à classificação.                              */
.fi-hora {
  min-width: 76px;
  font-family: var(--dado-fonte);
  font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.fi-hora small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--texto-fraco); }

.fi-corpo { flex: 1; min-width: 0; }
.fi-nome { display: block; font-size: 16px; font-weight: 600; color: var(--texto); text-decoration: none; }
.fi-nome:hover { text-decoration: underline; }
.fi-dados { display: block; font-size: 13px; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.fi-motivo { display: block; margin-top: 2px; font-size: 14px; color: var(--texto-medio); }

.fi-estado { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; text-align: right; font-size: 13px; }
.estado-rotulo { font-size: 12px; font-weight: 600; color: var(--texto-fraco); }
.chamado-info { display: block; margin-top: 3px; font-size: 12px; color: var(--texto-fraco); }

.remover summary { padding: 4px 0; font-size: 13px; color: var(--texto-fraco); cursor: pointer; list-style: none; }
.remover summary::-webkit-details-marker { display: none; }
.remover summary::before { content: "⌄ "; }
.remover form { display: flex; gap: 5px; margin-top: 5px; }
.remover select, .remover input { min-height: 36px; padding: 6px 9px; font-size: 13px; width: auto; }
.remover button { min-height: 36px; padding: 6px 12px; font-size: 13px; }

.acao-chamar { display: flex; gap: 5px; justify-content: flex-end; }
.acao-chamar select { min-height: 36px; padding: 6px 9px; font-size: 13px; width: auto; }
.acao-chamar button { min-height: 36px; padding: 6px 12px; font-size: 13px; }

/* ============================================================
   VAZIO — convite para agir, não lamento
   ============================================================ */

.vazio {
  padding: var(--e6) var(--e5); text-align: center;
  background: var(--superficie);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
}
.vazio p { margin: 0 0 var(--e3); }
.vazio p:last-child { margin-bottom: 0; }
.vazio-linha { font-size: 14px; color: var(--texto-fraco); }

/* ============================================================
   FICHA E CARTÕES
   ============================================================ */

.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e5); margin: 0; }
.ficha > div { padding: var(--e2) 0; border-bottom: 1px solid var(--borda); }
.ficha dt {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-fraco);
}
.ficha dd { margin: 2px 0 0; font-size: 15px; }

.cartao-paciente {
  padding: var(--e4) var(--e5); margin-bottom: var(--e4);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
}
.cartao-paciente h2 { margin: 0 0 4px; font-size: 19px; }
.cartao-paciente p { margin: 3px 0; font-size: 14px; }

.lista-atendimentos { list-style: none; margin: 0; padding: 0; }
.lista-atendimentos li {
  display: flex; gap: var(--e3); align-items: baseline;
  padding: var(--e2) 0; border-bottom: 1px solid var(--borda); font-size: 14px;
}
.la-data { min-width: 122px; font-family: var(--dado-fonte); font-size: 13px; color: var(--texto-fraco); }
.la-numero { font-family: var(--dado-fonte); font-weight: 600; }
.la-motivo { flex: 1; }
.la-estado { font-size: 12px; color: var(--texto-fraco); }

.bloco-semelhantes {
  padding: var(--e4); margin-bottom: var(--e4);
  background: var(--superficie); border: 1px solid var(--atencao); border-radius: var(--raio);
}
.bloco-semelhantes h2 { margin: 0 0 var(--e2); font-size: 15px; }
.lista-pacientes.compacta a { padding: var(--e2) var(--e3); }

.comparacao { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); margin-bottom: var(--e5); }
.lado { padding: var(--e4); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.lado.destaque { border-color: var(--texto); border-width: 2px; }
.lado h2 {
  margin: 0 0 var(--e2); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--texto-fraco);
}
.lado p { margin: 3px 0; font-size: 14px; }

.senha-gerada {
  padding: var(--e4) var(--e5); margin-bottom: var(--e4);
  background: var(--superficie); border: 2px solid var(--texto); border-radius: var(--raio);
}
.senha-gerada code {
  display: block; margin: var(--e2) 0; padding: var(--e3) var(--e4);
  font-family: var(--dado-fonte);
  font-size: 25px; font-weight: 600; letter-spacing: 0.1em; text-align: center;
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-s);
  user-select: all;
}

.endereco-painel { margin: 0 0 var(--e4); }
.endereco-painel code {
  display: block; padding: var(--e2) var(--e3); margin-top: 4px;
  font-family: var(--dado-fonte); font-size: 12.5px; word-break: break-all;
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-s);
}

.modelo-doc {
  margin-bottom: 6px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); overflow: hidden;
}
.modelo-doc summary {
  padding: var(--e3) var(--e4); font-weight: 550; cursor: pointer;
  transition: background var(--transicao);
}
.modelo-doc summary:hover { background: var(--superficie-2); }
.modelo-doc[open] summary { border-bottom: 1px solid var(--borda); }
.modelo-doc summary small { font-size: 12px; font-weight: 400; color: var(--texto-fraco); }
.modelo-doc .formulario { padding: var(--e4); max-width: none; }
.modelo-doc .campo { margin-bottom: var(--e3); }

/* ============================================================
   PAINEL DE NÚMEROS
   ============================================================ */

.painel-numeros { display: flex; gap: var(--e2); margin-bottom: var(--e5); }
.painel-numeros div {
  flex: 1; padding: var(--e4) var(--e3); text-align: center;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
}
.painel-numeros strong {
  display: block;
  font-family: var(--dado-fonte);
  font-size: 32px; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.painel-numeros span {
  display: block; margin-top: 3px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-fraco);
}

/* ============================================================
   FILA MÉDICA
   ============================================================ */

.abas { display: flex; gap: 2px; margin-bottom: var(--e4); border-bottom: 1px solid var(--borda); }
.aba {
  padding: var(--e3) var(--e4);
  font-size: 14px; font-weight: 550;
  color: var(--texto-fraco); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--transicao), border-color var(--transicao);
}
.aba:hover { color: var(--texto-medio); }
.aba.ativa { color: var(--texto); font-weight: 650; border-bottom-color: var(--texto); }

.aba-num {
  display: inline-block; min-width: 21px; padding: 1px 6px; margin-left: 4px;
  font-family: var(--dado-fonte); font-size: 11.5px; font-weight: 600; text-align: center;
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 10px;
}

.marca-cor { flex: none; width: 6px; align-self: stretch; border-radius: 3px; background: var(--borda-forte); }
.marca-cor.cor-vermelho { background: var(--risco-vermelho); }
.marca-cor.cor-amarelo  { background: var(--risco-amarelo); }
.marca-cor.cor-verde    { background: var(--risco-verde); }
.marca-cor.cor-azul     { background: var(--risco-azul); }

.fila-medica .fila-item { gap: var(--e3); }

.tempo-espera {
  display: block; font-family: var(--dado-fonte);
  font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.tempo-espera.excedido { font-weight: 800; color: var(--erro); }
.excedido { color: var(--erro); font-weight: 700; }
.alvo { display: block; font-size: 11.5px; color: var(--texto-fraco); }

/* ============================================================
   PRESCRIÇÃO E MEDICAÇÃO
   ============================================================ */

.medicamento-escolhido { margin: 0 0 4px; font-size: 18px; font-weight: 600; }

/* Alergia dispara na SELEÇÃO, não ao salvar. */
.alerta-alergia {
  padding: var(--e4); margin-bottom: var(--e3);
  background: var(--erro-bg);
  border-left: 4px solid var(--erro);
  border-radius: 0 var(--raio-s) var(--raio-s) 0;
}
.alerta-alergia strong { display: block; font-size: 16px; color: var(--erro); }
.alerta-alergia span { font-size: 14px; color: var(--texto-medio); }

.item-prescricao {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e3) var(--e4); margin-bottom: 6px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
}
.item-prescricao.suspenso { opacity: 0.72; border-style: dashed; }
.item-prescricao.suspenso .ip-corpo strong,
.item-prescricao.suspenso .ip-dose { text-decoration: line-through; }

.ip-corpo { flex: 1; min-width: 0; }
.ip-corpo strong { display: block; font-size: 15px; }
.ip-dose { display: block; margin-top: 2px; font-family: var(--dado-fonte); font-size: 15px; font-weight: 600; }
.ip-detalhes {
  display: block; margin-top: 4px; padding: 6px 10px;
  font-size: 14px; background: var(--superficie-2); border-radius: var(--raio-s);
}
.ip-suspenso { display: block; margin-top: 4px; font-size: 12px; font-weight: 650; color: var(--erro); }

.acoes-adm { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.acoes-adm form { display: flex; gap: 5px; align-items: center; }
.acoes-adm input, .acoes-adm select { min-height: 36px; padding: 6px 9px; font-size: 13px; width: auto; }
.acoes-adm button { min-height: 36px; padding: 6px 13px; font-size: 13px; }

.registro-adm { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 650; color: var(--ok); }
.registro-adm.negativo { color: var(--atencao); }

/* A quarta coluna é o X da linha, com alvo de 36px: some quando há
   uma linha só, porque receita sem nenhuma linha parece tela quebrada. */
.linha-receita {
  display: grid; grid-template-columns: 2fr 1fr 1.6fr 36px;
  gap: 6px; margin-bottom: 6px; align-items: center;
}
.lr-x {
  width: 36px; height: 36px; min-height: 0; padding: 0;
  font-size: 13px; line-height: 1;
  color: var(--texto-fraco);
  background: none; border: 1px solid transparent; border-radius: var(--raio-s);
}
.lr-x:hover { color: var(--erro); background: var(--erro-bg); border-color: var(--erro-bg); }
#linhas-receita .linha-receita:only-child .lr-x { visibility: hidden; }
.grade-exames { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 var(--e3); }

/* ============================================================
   TABELAS
   ============================================================ */

.tabela-consumo {
  width: 100%; border-collapse: collapse; overflow: hidden; font-size: 14px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
}
.tabela-consumo th {
  padding: var(--e3); text-align: left;
  font-size: 10.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-fraco);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda-forte);
}
.tabela-consumo td { padding: var(--e3); border-bottom: 1px solid var(--borda); }
.tabela-consumo tr:last-child td { border-bottom: none; }
.tabela-consumo .n { text-align: right; font-family: var(--dado-fonte); font-variant-numeric: tabular-nums; }
.tabela-consumo th.n { font-family: var(--texto-fonte); }
.tabela-consumo small { display: block; font-size: 12px; color: var(--texto-fraco); }
.linha-baixa { background: var(--atencao-bg); }
.linha-baixa td:last-child { color: var(--atencao); }

.input-num {
  width: 96px; min-height: 36px; padding: 7px 9px;
  font-family: var(--dado-fonte); font-size: 15px; text-align: right;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 900px) {
  .atendimento-grade { grid-template-columns: 1fr; }
  .barra-lateral { position: static; display: flex; flex-wrap: wrap; gap: 5px; }
  .acao-lateral { flex: 1 1 145px; margin-bottom: 0; }
}

@media (max-width: 820px) {
  .colunas-classificacao { grid-template-columns: 1fr; }
  .cores { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .conteudo { padding: var(--e4) var(--e3) var(--e6); }
  .linha-2, .linha-3, .ficha, .comparacao, .linha-receita, .grade-exames {
    grid-template-columns: 1fr;
  }
  .barra { flex-wrap: wrap; gap: var(--e2) var(--e3); padding: var(--e2) var(--e3); }
  .barra-menu { order: 9; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .fila-item { flex-wrap: wrap; }
  .fi-estado { width: 100%; text-align: left; align-items: stretch; }
  .acao-chamar { justify-content: flex-start; }
  .acoes-adm { align-items: stretch; }
  .abas { overflow-x: auto; }
  .painel-numeros { flex-wrap: wrap; }
  .tabela-consumo { font-size: 13px; }
  .tabela-consumo th, .tabela-consumo td { padding: var(--e2) 7px; }
}

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

/* ============================================================
   POSTO DE TRABALHO, CONDUTA E PAINEL DO GESTOR
   Regras das telas das etapas finais. Mantidas com os mesmos
   tokens do restante da folha.
   ============================================================ */

/* ------------------------------------------------ encerramento */

.grupo-desfecho { margin-bottom: 26px;
}
.titulo-grupo {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texto-fraco);
}
.cartoes-conduta { display: grid; gap: 8px;
}
.cartao-conduta {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.cartao-conduta.destaque { border-color: var(--borda-forte); border-width: 2px;
}
.cartao-conduta summary {
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.cartao-conduta[open] summary { border-bottom: 1px solid var(--borda);
}
.cartao-conduta .formulario { max-width: none;
}
.acao-encerrar { border-color: var(--borda-forte); font-weight: 600;
}
.modelo-doc.vencida { border-color: var(--atencao); border-width: 2px;
}
/* ------------------------------------------------ painel do gestor */

.grade-painel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.bloco-numero {
  padding: 16px 14px;
  text-align: center;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.bloco-numero strong { display: block; font-size: 30px; line-height: 1.1;
}
.bloco-numero span { font-size: 12px; color: var(--texto-fraco);
}
.bloco-numero em { display: block; font-style: normal; font-size: 12px; font-weight: 600;
}
.bloco-numero.zerado { opacity: 0.5;
}
.linha-alerta { border-left: 3px solid var(--atencao);
}
/* ============================================================
   Posto de trabalho
   Médico e enfermagem não trabalham "no sistema" — trabalham
   num lugar. A escolha define onde eles caem ao entrar.
   ============================================================ */

.barra-posto {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 10px 5px 9px;
  font-size: 13.5px; font-weight: 600;
  color: var(--texto); text-decoration: none;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
  white-space: nowrap;
  transition: border-color var(--transicao), background var(--transicao);
}
.barra-posto:hover { border-color: var(--borda-forte); background: var(--superficie-2); }

/* As duas setas ficam apagadas até o hover: elas dizem o que o
   clique FAZ, e isso só interessa a quem já parou o cursor ali.
   Em peso cheio competiam com o nome do posto, que é o que a
   pessoa lê de passagem para saber onde está. */
.bp-trocar   { color: var(--texto-fraco); flex: none; }
.barra-posto:hover .bp-trocar { color: var(--texto-medio); }
.bp-chevron  { color: var(--texto-fraco); flex: none; }
.bp-nome     { overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }

/* Barra apertada: o nome do posto sai e ficam a moldura e as
   setas. O ícone sozinho continua dizendo "posto de trabalho", e o
   title carrega o resto. */
@media (max-width: 980px) {
  .bp-nome, .bp-chevron { display: none; }
  .barra-posto { padding: 5px 8px; }
}

/* ============================================================
   CLASSIFICAÇÃO DE RISCO — versão 2

   Meta: 90 segundos. É o único momento em que o sistema compete
   diretamente com a caneta.

   A tela é longa por necessidade, então a organização faz o
   trabalho: seções numeradas, cada uma com um assunto só, e a
   decisão de cor isolada no fim, com peso visual próprio.
   ============================================================ */

.form-classificacao { max-width: none; }

/* ------------------------------------------------ identificação */

.ident-paciente {
  display: flex; align-items: stretch; gap: var(--e3);
  padding: var(--e4) var(--e5); margin-bottom: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.ident-dados { flex: 1; min-width: 0; }
.ident-dados h1 { font-size: 22px; }
.ident-linha { margin: 3px 0 0; font-size: 14px; color: var(--texto-fraco); }
.ident-linha .dado { font-family: var(--dado-fonte); font-variant-numeric: tabular-nums; }
.ident-motivo { margin: 6px 0 0; font-size: 14px; color: var(--texto-medio); }

.ident-cartao {
  min-width: 176px;
  padding: var(--e3) var(--e4);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-s);
}
.ident-cartao.atencao { background: var(--atencao-bg); border-color: var(--atencao); }
.ident-cartao.critico { background: var(--erro-bg);    border-color: var(--erro); }
.ic-rotulo {
  display: block; font-size: 10.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--texto-fraco);
}
.ident-cartao.atencao .ic-rotulo { color: var(--atencao); }
.ident-cartao.critico .ic-rotulo { color: var(--erro); }
.ic-valor { display: block; margin-top: 3px; font-size: 14px; font-weight: 600; }

/* ------------------------------------------------ seções */

.grade-classificacao {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e3);
  align-items: start;
  margin-bottom: var(--e3);
}
.sec-larga { grid-column: 1 / -1; }

.sec {
  padding: var(--e4) var(--e5) var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.sec h2 {
  display: flex; align-items: center; gap: var(--e2);
  margin: 0 0 var(--e4);
  font-size: 12px; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--texto-fraco);
}
/* Numeração encoda ordem real de preenchimento, não é enfeite. */
.sec-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px;
  font-family: var(--dado-fonte); font-size: 12px; font-weight: 700;
  color: var(--superficie); background: var(--texto); border-radius: 3px;
}

.divisor { margin: var(--e5) 0; border: none; border-top: 1px solid var(--borda); }

/* ------------------------------------------------ opções */

.opcoes-linha { display: flex; flex-wrap: wrap; gap: 6px; }

.opcao {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px;
  font-size: 14px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-s);
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.opcao:hover { border-color: var(--borda-forte); }
.opcao:has(input:checked) { border-color: var(--texto); background: var(--superficie-2); font-weight: 550; }
.opcao:has(input:focus-visible) { outline: 2px solid var(--texto); outline-offset: 2px; }
.opcao.empilhada { display: flex; margin-bottom: 5px; }
.opcao.desabilitada { opacity: 0.4; cursor: not-allowed; }
.opcao.desabilitada:hover { border-color: var(--borda); }

.contador-caracteres {
  display: block; margin-top: 4px;
  font-family: var(--dado-fonte); font-size: 11px; color: var(--texto-fraco); text-align: right;
}

/* ------------------------------------------------ sinais vitais */

.grade-vitais { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }

.vital {
  padding: var(--e2) var(--e3) 7px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-s);
  transition: border-color var(--transicao), background var(--transicao);
}
.vital label {
  display: block; margin-bottom: 2px;
  font-size: 10.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--texto-fraco);
}
.vital input {
  min-height: 0; padding: 0; width: 100%;
  font-family: var(--dado-fonte);
  font-size: 25px; font-weight: 600; line-height: 1.15; text-align: center;
  font-variant-numeric: tabular-nums;
  background: none; border: none; border-radius: 0;
}
.vital input:focus { box-shadow: none; }
.vital-par { display: flex; align-items: baseline; justify-content: center; gap: 3px; }
.vital-par span { font-family: var(--dado-fonte); font-size: 22px; color: var(--texto-fraco); }
.vital-un {
  display: block; text-align: center;
  font-size: 10.5px; color: var(--texto-fraco);
}

/* Destaque visual, sem NENHUM texto interpretativo: valor fora da
   faixa pode ser erro de digitação — ou o paciente grave.        */
.vital.fora-faixa { background: var(--atencao-bg); border-color: var(--atencao); border-width: 2px; }
.fora-faixa { border-color: var(--atencao) !important; }

/* ------------------------------------------------ peso e dor */

.linha-peso-dor { display: grid; grid-template-columns: 260px 1fr; gap: var(--e5); align-items: start; }

.peso-entrada {
  display: flex; align-items: baseline; gap: 6px;
  padding: var(--e2) var(--e3);
  margin-bottom: var(--e2);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-s);
}
.peso-entrada input {
  min-height: 0; padding: 0; width: 100%;
  font-family: var(--dado-fonte); font-size: 25px; font-weight: 600; text-align: center;
  background: none; border: none;
}
.peso-entrada input:focus { box-shadow: none; }
.peso-entrada .vital-un { flex: none; }

.dor-faces { display: flex; gap: 5px; margin-top: var(--e2); }
.face {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 2px;
  background: var(--superficie);
  border: 2px solid var(--borda); border-radius: var(--raio-s);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}
.face input { position: absolute; opacity: 0; width: 0; height: 0; }
.face:hover { border-color: var(--borda-forte); }
.face:has(input:checked) { border-color: var(--texto); background: var(--superficie-2); }
.face-svg { width: 100%; max-width: 42px; height: auto; }
.face-pele { fill: var(--superficie); stroke: var(--texto); stroke-width: 2; }
.face-olho { fill: var(--texto); }
.face-traco { fill: none; stroke: var(--texto); stroke-width: 2.4; stroke-linecap: round; }
.face-traco.fino { stroke-width: 1.6; }
.face-boca-aberta { fill: var(--texto); }
.face-num { font-family: var(--dado-fonte); font-size: 13px; font-weight: 600; }

.linha-3-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e5); }

/* ------------------------------------------------ prioridades */

.grade-prioridades { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); margin-bottom: var(--e3); }
.prioridade-auto {
  padding: var(--e2) var(--e3);
  background: var(--superficie-2);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-s);
}
.prioridade-auto.ativa { background: var(--superficie); border-style: solid; border-color: var(--texto); }
.prioridade-auto strong { display: block; font-size: 14px; }
.prioridade-auto span { font-size: 11.5px; color: var(--texto-fraco); }

.grade-marcadores { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: var(--e3); }

/* ============================================================
   DECISÃO — a única seção com peso visual próprio.
   Toda a contenção do resto da tela existe para que esta parte
   seja a primeira coisa que o olho encontra.
   ============================================================ */

.sec-decisao {
  border: 2px solid var(--borda-forte);
  box-shadow: var(--sombra-md);
}

.cores { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e2); margin-bottom: var(--e4); }
.cor {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--e4) var(--e2);
  color: #fff; text-align: center;
  border: 3px solid transparent; border-radius: var(--raio-s);
  cursor: pointer;
  transition: border-color var(--transicao), filter var(--transicao);
}
.cor:hover { filter: brightness(1.08); }
.cor input { position: absolute; opacity: 0; width: 0; height: 0; }
.cor:has(input:checked) { border-color: var(--texto); }
.cor:has(input:focus-visible) { outline: 2px solid var(--texto); outline-offset: 2px; }

.cor-vermelho { background: var(--risco-vermelho); }
.cor-amarelo  { background: var(--risco-amarelo); }
.cor-verde    { background: var(--risco-verde); }
.cor-azul     { background: var(--risco-azul); }

.cor-nome   { font-size: 16px; font-weight: 700; letter-spacing: 0.04em; }
.cor-rotulo { font-size: 12px; opacity: 0.92; }
.cor-alvo   { font-family: var(--dado-fonte); font-size: 12px; font-weight: 600; opacity: 0.92; }

.decisao-baixo { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: var(--e5); align-items: start; }
.pendencias { margin: 0; }

.resumo {
  padding: var(--e3) var(--e4);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-s);
}
.resumo-titulo {
  display: block; margin-bottom: var(--e2);
  font-size: 10.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--texto-fraco);
}
.resumo dl { margin: 0; }
.resumo dl > div { display: flex; gap: var(--e2); padding: 3px 0; font-size: 13px; }
.resumo dt { min-width: 92px; color: var(--texto-fraco); }
.resumo dd { margin: 0; font-weight: 550; word-break: break-word; }

/* ------------------------------------------------ barra de ações */

.barra-acoes {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e4);
  margin-top: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  position: sticky; bottom: var(--e3);
  box-shadow: var(--sombra-md);
}
.barra-acoes-espaco { flex: 1; }

/* Pendência informa, não bloqueia. */
.pendencia-chip {
  padding: 5px 11px;
  font-size: 12.5px; font-weight: 600;
  color: var(--atencao); background: var(--atencao-bg);
  border: 1px solid var(--atencao); border-radius: var(--raio-s);
}

@media (max-width: 1000px) {
  .decisao-baixo  { grid-template-columns: 1fr; }
  .linha-3-col    { grid-template-columns: 1fr; gap: var(--e4); }
  .linha-peso-dor { grid-template-columns: 1fr; gap: var(--e4); }
}

@media (max-width: 820px) {
  .grade-classificacao { grid-template-columns: 1fr; }
  .cores { grid-template-columns: repeat(2, 1fr); }
  .ident-paciente { flex-wrap: wrap; }
  .ident-cartao { flex: 1 1 160px; }
}

@media (max-width: 620px) {
  .grade-vitais { grid-template-columns: repeat(2, 1fr); }
  .grade-prioridades, .grade-marcadores { grid-template-columns: 1fr; }
  .barra-acoes { flex-wrap: wrap; position: static; }
}

/* ============================================================
   MODAL
   Prescrição, exames, documentos e encerramento abrem SOBRE o
   atendimento. O contexto nunca é abandonado — por isso nenhuma
   dessas telas tem botão "voltar".
   ============================================================ */

.modal {
  width: min(760px, 94vw);
  max-height: 88vh;
  padding: 0;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: 0 12px 40px rgba(17, 24, 27, 0.22);
  overflow: hidden;
}
.modal::backdrop { background: rgba(17, 24, 27, 0.45); }

.modal-topo {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 2;
}
.modal-titulo { flex: 1; font-size: 15px; font-weight: 650; }
.modal-fechar {
  min-height: 32px; padding: 4px 11px;
  font-size: 15px; line-height: 1;
  color: var(--texto-fraco); background: none; border: 1px solid transparent;
}
.modal-fechar:hover { color: var(--texto); background: var(--superficie); border-color: var(--borda); }

.modal-corpo { padding: var(--e4) var(--e5) var(--e5); overflow-y: auto; max-height: calc(88vh - 52px); }
.modal-corpo .cabecalho-pagina { margin-bottom: var(--e3); }
.modal-corpo .cabecalho-pagina h1 { font-size: 17px; }
.modal-corpo .formulario { max-width: none; }
.modal-corpo[aria-busy="true"] { opacity: 0.55; }
.modal-carregando { color: var(--texto-fraco); font-size: 14px; }

/* ============================================================
   AUTOCOMPLETE
   Substitui campo + botão "Buscar". Em PS, cada clique a menos conta.
   ============================================================ */

.ac-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 40;
  max-height: 300px; overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-s);
  box-shadow: var(--sombra-md);
}
.ac-item {
  padding: 9px var(--e3);
  border-bottom: 1px solid var(--borda);
  cursor: pointer;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.marcado { background: var(--superficie-2); }
.ac-item strong { display: block; font-size: 15px; font-weight: 600; }
.ac-item span   { display: block; font-size: 12.5px; color: var(--texto-fraco); }
.ac-vazio { padding: 11px var(--e3); font-size: 14px; color: var(--texto-fraco); }

.busca-linha { position: relative; }

/* ============================================================
   EXAMES E CONDUTA
   ============================================================ */

.lista-exames { list-style: none; margin: 0 0 var(--e3); padding: 0; }
.lista-exames li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: var(--e2) var(--e3); margin-bottom: 5px;
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-s);
}
.acoes-linha { display: flex; gap: 5px; }
.acoes-linha button { min-height: 34px; padding: 6px 11px; font-size: 13px; }

.marcados { list-style: none; margin: 0 0 var(--e3); padding: 0; }
.marcados li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  padding: 7px var(--e3); margin-bottom: 4px;
  font-size: 14px;
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-s);
}

.bloco-medicado {
  padding: var(--e4); margin-bottom: var(--e4);
  background: var(--superficie-2);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
}
.bloco-medicado h3 { margin: 0 0 4px; font-size: 15px; }

.opcoes-conduta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); margin-top: var(--e3); }
.opcao-conduta {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--e3) var(--e4);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-s);
}
.opcao-conduta strong { font-size: 15px; }
.opcao-conduta span { font-size: 12.5px; color: var(--texto-fraco); }

/* ============================================================
   SELO DE COR NA FILA MÉDICA
   A cor é a primeira informação da linha e precisa ter presença.
   Mas nunca vai sozinha: sempre com rótulo textual e ordem
   posicional, porque daltonismo é comum e o erro é grave.
   ============================================================ */

.selo-cor {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; padding: var(--e2) var(--e2);
  align-self: stretch;
  font-family: var(--dado-fonte);
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em;
  color: #fff; text-transform: uppercase;
  border-radius: var(--raio-s);
}
.selo-cor.cor-vermelho { background: var(--risco-vermelho); }
.selo-cor.cor-amarelo  { background: var(--risco-amarelo); }
.selo-cor.cor-verde    { background: var(--risco-verde); }
.selo-cor.cor-azul     { background: var(--risco-azul); }

@media (max-width: 700px) {
  .opcoes-conduta { grid-template-columns: 1fr; }
  .modal { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 0; }
  .modal-corpo { max-height: calc(100vh - 52px); padding: var(--e4) var(--e3); }
}

/* ============================================================
   FILA — layout de duas colunas

   A pergunta que esta tela responde em menos de dois segundos é
   "quem eu atendo agora". Tudo aqui serve a isso: a cor primeiro,
   o tempo grande, os sinais vitais à vista e a ação principal
   sempre no mesmo lugar da linha.
   ============================================================ */

.tela-fila { display: grid; grid-template-columns: 1fr 290px; gap: var(--e4); align-items: start; }
.fila-principal { min-width: 0; }

.fila-cabecalho { margin-bottom: var(--e4); }
.fila-cabecalho h1 { font-size: 25px; }
.fila-cabecalho p { margin: 3px 0 0; font-size: 14px; color: var(--texto-fraco); }

.aba { display: inline-flex; align-items: center; gap: 7px; }
.aba-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--borda-forte); }
.aba-ponto.cor-vermelho { background: var(--risco-vermelho); }
.aba-ponto.cor-amarelo  { background: var(--risco-amarelo); }
.aba-ponto.cor-verde    { background: var(--risco-verde); }
.aba-ponto.cor-azul     { background: var(--risco-azul); }

/* ------------------------------------------------ barra da fila

   Busca, cor, ordem e retorno numa linha só, logo abaixo das abas.
   Antes isto vivia em três lugares — uma barra de ordenação solta, um
   painel de filtros na lateral e um bloco de atalhos que repetia as
   abas. Quatro pontos de controle para uma lista. */

.barra-fila {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  padding: var(--e2) var(--e3);
  margin-bottom: var(--e3);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-s);
}
.barra-fila select { width: auto; min-width: 168px; min-height: 38px; }

/* A busca é o que mais se usa e é a única que não cabe num rótulo
   curto: fica primeiro e cresce com a linha. */
.bf-busca { flex: 1 1 240px; min-width: 180px; min-height: 38px; }

.bf-opcao {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 var(--e2);
  font-size: 13.5px; color: var(--texto-medio); white-space: nowrap; cursor: pointer;
}
.bf-opcao input { width: 16px; height: 16px; margin: 0; }

/* Some quando o JS está ativo — os campos já enviam sozinhos. Fica
   para quem navega sem JavaScript, que continua tendo como filtrar. */
.bf-aplicar { min-height: 38px; padding: 8px 14px; font-size: 13.5px; }
.js-ligado .bf-aplicar { display: none; }

.aviso-filtro {
  margin: 0 0 var(--e3);
  padding: 7px var(--e3);
  font-size: 13px; color: var(--texto-medio);
  background: var(--atencao-bg);
  border-left: 3px solid var(--atencao);
  border-radius: 0 var(--raio-s) var(--raio-s) 0;
}

/* Fila acima do tempo-alvo: número que cobra ação, não que informa. */
.resumo-linhas .destaque-alerta dd { color: var(--erro); font-weight: 700; }

/* ------------------------------------------------ cartão da fila */

.cartao-fila {
  display: grid;
  /* A coluna de vitais existe sempre, mesmo vazia: sem ela, as linhas
     de verde e azul deslocariam o tempo e as ações, e o olho perderia
     a âncora ao correr a fila de cima a baixo.
     O nome tem mínimo garantido — foi o que faltava antes e fazia o
     texto quebrar palavra a palavra. */
  grid-template-columns: 52px minmax(230px, 1.6fr) minmax(0, 1fr) 128px 172px;
  gap: var(--e3);
  align-items: start;
  padding: var(--e3) var(--e4) var(--e3) 0;
  margin-bottom: var(--e2);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  /* Sem overflow:hidden — ele recortava o menu de três pontos.
     O selo de cor resolve o canto com raio próprio, não com recorte. */
  position: relative;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.cartao-fila:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); }

/* Cartão com o menu aberto sobe acima dos vizinhos. */
.cartao-fila:has(.cf-mais[open]) { z-index: 25; }
.cartao-fila.compacto { grid-template-columns: 52px minmax(230px, 1fr) 172px; }
.cf-vitais-vazio { border-left: 1px solid var(--borda); }

/* Selo de cor: primeira informação da linha, com presença real.
   Nunca sozinho — sempre com rótulo textual e ordem posicional,
   porque daltonismo é comum e o erro aqui é grave. */
.cartao-fila .selo-cor {
  align-self: stretch;
  margin: calc(var(--e3) * -1) 0;
  min-height: 100%;
  border-radius: var(--raio) 0 0 var(--raio);
  writing-mode: horizontal-tb;
  font-size: 13px;
}

.cf-paciente { min-width: 0; padding: 2px 0; }
.cf-paciente h2 { font-size: 18px; font-weight: 650; overflow-wrap: break-word; }
.cf-dados  { margin: 2px 0 0; font-size: 13px; color: var(--texto-fraco); }
.cf-queixa { margin: 5px 0 0; font-size: 15px; color: var(--texto-medio); }

.cf-marcas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--e2); }
.marca-alerta {
  display: inline-block;
  max-width: 100%;
  padding: 3px 9px;
  font-size: 11.5px; font-weight: 600;
  color: var(--texto-medio);
  background: var(--superficie-2);
  border: 1px solid var(--borda-forte);
  border-radius: 3px;
}
.marca-alerta.forte {
  color: #fff; background: var(--erro); border-color: var(--erro); letter-spacing: 0.02em;
}

/* "Em atendimento": destaque sem alarme. Não é risco clínico — é
   informação de fluxo, e vermelho aqui competiria com a alergia. */
.marca-alerta.forte-neutra {
  color: #fff; background: var(--texto); border-color: var(--texto);
  letter-spacing: 0.02em;
}

/* ------------------------------------------------ vitais na linha */

.cf-vitais { min-width: 0; padding: 2px 0; border-left: 1px solid var(--borda); padding-left: var(--e4); }
.cf-vitais-hora {
  display: block; margin-bottom: 5px;
  font-size: 11px; color: var(--texto-fraco);
}
.cf-vitais-grade { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); }
.cf-vital { min-width: 52px; }
.cfv-rotulo { display: block; font-size: 10.5px; font-weight: 600;
              text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-fraco); }
.cfv-valor  { display: block; font-family: var(--dado-fonte);
              font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cfv-un     { display: block; font-size: 10.5px; color: var(--texto-fraco); }

/* Fora da faixa por idade: peso e realce de atenção, nunca a cor do
   risco. Cor de risco é da classificação e não pode ser imitada. */
.cf-vital.atipico .cfv-valor  { color: var(--atencao); font-weight: 800; }
.cf-vital.atipico .cfv-rotulo { color: var(--atencao); }

/* ------------------------------------------------ tempo */

.cf-tempo { min-width: 132px; padding: 2px 0; text-align: left; }
.cft-rotulo  { display: block; font-size: 11px; color: var(--texto-fraco); }
.cft-valor {
  display: block;
  font-family: var(--dado-fonte);
  font-size: 30px; font-weight: 600; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cft-valor small { font-size: 14px; font-weight: 500; color: var(--texto-fraco); margin-left: 3px; }
/* Estourou o alvo: muda o PESO e ganha o vermelho de ERRO do sistema,
   que é dessaturado e não se confunde com o vermelho da classificação. */
.cft-valor.excedido { color: var(--erro); font-weight: 800; }
.cft-chegada { display: block; font-size: 11.5px; color: var(--texto-fraco); }
.cft-alvo { display: block; margin-top: 2px; font-size: 11px; color: var(--texto-fraco); }
.cft-alvo.excedido { color: var(--erro); font-weight: 700; }

/* ------------------------------------------------ ações */

.cf-acoes { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cf-acoes .btn-principal, .cf-acoes .btn-secundario { width: 100%; }
/* Registro fechado da passagem anterior. Cinza e recolhido: é contexto
   para a reavaliação, não o campo onde se escreve agora. */
.registro-anterior {
  margin-bottom: var(--e4); padding: var(--e3) var(--e4);
  background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: var(--raio-s);
}
.ra-titulo {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--texto);
}
.ra-selo {
  margin-left: auto; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em; color: var(--texto-fraco);
}
.ra-item { margin-top: var(--e3); }
.ra-item > summary {
  font-size: 13px; color: var(--texto-medio); cursor: pointer;
  padding: 5px 0; list-style: none;
}
.ra-item > summary::-webkit-details-marker { display: none; }
.ra-corpo { padding-left: var(--e3); border-left: 2px solid var(--borda); }
.ra-bloco { margin-bottom: var(--e3); }
.ra-rotulo {
  display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--texto-fraco);
}

/* Quem volta para reavaliação. Faixa e marca neutras: cor saturada no
   cartão é classificação de risco, e reaproveitá-la faria a equipe ler
   gravidade onde só existe um retorno. */
.cartao-fila.e-reavaliacao { border-color: var(--borda-forte); position: relative; }
.cf-faixa-reav {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--texto-fraco); border-radius: var(--raio-s) 0 0 var(--raio-s);
}
.marca-reavaliacao {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600; color: var(--texto);
  border-color: var(--borda-forte);
}
.cf-chamar select { font-size: 13px; min-height: 36px; padding: 6px 9px; }

/* Cartão de quem está na sala sem tarefa pendente. Borda tracejada e
   nada mais: é situação a resolver, não risco clínico, e cor saturada
   aqui competiria com o selo de classificação ao lado. */
.cartao-fila.sem-tarefa { border-style: dashed; }
.cf-definir { display: flex; flex-direction: column; gap: 5px; }
.cf-definir select { font-size: 13px; min-height: 36px; padding: 6px 9px; }

.cf-cancelar > summary {
  font-size: 12.5px; color: var(--texto-fraco); cursor: pointer;
  list-style: none; padding: 2px 0;
}
.cf-cancelar > summary::-webkit-details-marker { display: none; }
.cf-cancelar > summary:hover { color: var(--texto-medio); }
.cf-cancelar form { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; }
.cf-cancelar input { font-size: 13px; min-height: 36px; padding: 6px 9px; }

.cf-mais { position: relative; align-self: flex-end; }
.cf-mais[open] { z-index: 30; }
.cf-mais summary {
  list-style: none; cursor: pointer;
  padding: 4px 11px; font-size: 17px; line-height: 1;
  color: var(--texto-fraco);
  border: 1px solid var(--borda); border-radius: var(--raio-s);
  text-align: center;
}
.cf-mais summary::-webkit-details-marker { display: none; }
.cf-mais summary:hover { color: var(--texto); border-color: var(--borda-forte); }
.cf-mais-lista {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 60;
  min-width: 190px;
  background: var(--superficie);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-s);
  box-shadow: var(--sombra-md);
}
.cf-mais-lista a {
  display: block; padding: 9px var(--e3);
  font-size: 14px; text-decoration: none; color: var(--texto);
  border-bottom: 1px solid var(--borda);
}
.cf-mais-lista a:last-child { border-bottom: none; }
.cf-mais-lista a:hover { background: var(--superficie-2); }

.rodape-fila {
  display: flex; justify-content: space-between; gap: var(--e3); flex-wrap: wrap;
  margin-top: var(--e4); padding-top: var(--e3);
  border-top: 1px solid var(--borda);
  font-size: 12.5px; color: var(--texto-fraco);
}
.atualizado { font-family: var(--dado-fonte); }
.atualizado.velho { color: var(--atencao); font-weight: 600; }

/* ------------------------------------------------ lateral */

.fila-lateral {
  display: flex; flex-direction: column; gap: var(--e3);
  position: sticky; top: 72px;
  z-index: 1;   /* abaixo do menu de três pontos, que é 60 */
}

.painel-lateral {
  padding: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.painel-lateral h2 {
  margin: 0 0 var(--e3);
  font-size: 11px; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--texto-fraco);
}
.painel-lateral .campo { margin-bottom: var(--e3); }
.painel-lateral .acoes { margin-top: var(--e2); }

.resumo-cores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: var(--e3); }
.rc-item {
  padding: var(--e2) 4px; text-align: center;
  background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: var(--raio-s);
}
.rc-num {
  display: block; font-family: var(--dado-fonte);
  font-size: 21px; font-weight: 700; line-height: 1.1;
}
.cor-texto-vermelho { color: var(--risco-vermelho); }
.cor-texto-amarelo  { color: var(--risco-amarelo); }
.cor-texto-verde    { color: var(--risco-verde); }
.cor-texto-azul     { color: var(--risco-azul); }
.fila-nome { display: block; font-size: 10.5px; font-weight: 600; }
.rc-alvo { display: block; font-size: 9.5px; color: var(--texto-fraco); }

.resumo-linhas { margin: 0; }
.resumo-linhas > div {
  display: flex; justify-content: space-between; gap: var(--e2);
  padding: 7px 0; border-bottom: 1px solid var(--borda); font-size: 13px;
}
.resumo-linhas > div:last-child { border-bottom: none; }
.resumo-linhas dt { color: var(--texto-fraco); }
.resumo-linhas dd {
  margin: 0; font-family: var(--dado-fonte); font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.acoes-rapidas { display: flex; flex-direction: column; gap: 4px; }
.acoes-rapidas a {
  padding: 9px var(--e3);
  font-size: 13.5px; text-decoration: none; color: var(--texto);
  background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: var(--raio-s);
  transition: border-color var(--transicao);
}
.acoes-rapidas a:hover { border-color: var(--borda-forte); }

@media (max-width: 1280px) {
  .cartao-fila { grid-template-columns: 52px minmax(200px, 1fr) 120px 168px; }
  .cf-vitais { grid-column: 2 / -1; border-left: none; padding-left: 0;
               border-top: 1px solid var(--borda); padding-top: var(--e2); margin-top: var(--e2); }
}

@media (max-width: 1000px) {
  .tela-fila { grid-template-columns: 1fr; }
  .fila-lateral { position: static; }
  .painel-lateral .campo { max-width: 380px; }
}

@media (max-width: 820px) {
  .cartao-fila, .cartao-fila.compacto { grid-template-columns: 44px minmax(0, 1fr); gap: var(--e3); }
  .cf-tempo, .cf-acoes { grid-column: 2 / -1; min-width: 0; }
  .cf-acoes { flex-direction: row; flex-wrap: wrap; }
  .cf-acoes form { flex: 1 1 150px; }
  .cf-mais { align-self: center; }
  .resumo-cores { grid-template-columns: repeat(2, 1fr); }
}

.selo-cor.sem-cor { background: var(--borda-forte); }
.cf-mais-lista .menu-form { padding: var(--e2) var(--e3); border-bottom: 1px solid var(--borda); }
.cf-mais-lista .menu-form:last-child { border-bottom: none; }
.cf-mais-lista .menu-form select { margin-bottom: 5px; font-size: 13px; min-height: 34px; }

/* Formulário dentro do menu de três pontos. */
.cf-mais-lista .menu-form { display: flex; flex-direction: column; gap: 5px; }
.cf-mais-lista .menu-form select { width: 100%; }
.cf-mais-lista .menu-form .nota-mini { margin: 0; }
.cf-mais-lista .menu-form button { width: 100%; }

/* ============================================================
   ATENDIMENTO

   Sinais vitais e alergia ficam SEMPRE à vista, no alto — nunca em
   aba, nunca em modal. Aba esconde sinal vital, e é assim que se
   perde informação clínica no meio da consulta.

   O azul desta tela é CONTORNO, nunca preenchimento: rótulo de
   bloco, moldura de ícone, borda de foco. A superfície continua
   cinza-frio. Quem decide a cor da tela é a classificação, e ela
   aparece em três lugares só — ponto, nome da cor e faixa do
   resumo da triagem.
   ============================================================ */

.conteudo.secao-atendimento { max-width: 1340px; }

.tela-atendimento {
  display: grid; grid-template-columns: minmax(0, 1fr) 316px;
  gap: var(--e4); align-items: start;
}
.at-principal { min-width: 0; }

.ic { flex: none; vertical-align: -0.15em; }
.sep { color: var(--borda-forte); }

/* ------------------------------------------------ cabeçalho */

.at-cabecalho {
  padding: var(--e4) var(--e5);
  margin-bottom: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.at-topo { display: flex; align-items: flex-start; gap: var(--e4); }

/* Único disco de cor da tela. Azul de acento, não azul de risco:
   identidade do paciente não é estado clínico. */
.at-avatar {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  font-family: var(--dado-fonte); font-size: 18px; font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--acento);
  background: var(--acento-bg);
  border: 1px solid var(--acento-borda);
  border-radius: 50%;
}

.at-identificacao { flex: 1; min-width: 0; }
.at-nome { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.at-nome h1 { font-size: 26px; letter-spacing: -0.02em; }

.pilula {
  padding: 3px 11px;
  font-size: 12px; font-weight: 550;
  color: var(--texto-medio);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 999px;
}

.at-classificacao {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: 8px 0 0; font-size: 13.5px; color: var(--texto-fraco);
}
.at-classificacao strong { letter-spacing: 0.04em; font-weight: 700; }

.at-tempos {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 6px 0 0; font-size: 13px; color: var(--texto-fraco);
}
.at-tempos strong { color: var(--texto-medio); font-family: var(--dado-fonte); }
.at-tempos .destaque-dado { color: var(--acento); font-weight: 700; }
.at-tempos .ic { margin-left: var(--e3); }
.at-tempos .ic:first-child { margin-left: 0; }

.at-topo-acoes {
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--e2);
}
.at-numero {
  font-family: var(--dado-fonte); font-size: 13px;
  color: var(--texto-fraco); font-variant-numeric: tabular-nums;
}
.at-topo-botoes { display: flex; align-items: center; gap: 6px; }
.at-topo-botoes .btn-secundario {
  min-height: 38px; padding: 8px 14px; font-size: 13.5px; white-space: nowrap;
}
.at-topo-botoes .btn-secundario .ic { color: var(--texto-fraco); }

/* Menu de três pontos: reaproveita o da fila, só ajusta o alvo de
   toque, que aqui fica ao lado de um botão de 38px. */
.at-mais { align-self: auto; }
.at-mais > summary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border-color: var(--borda-forte);
}

.ponto-cor { width: 11px; height: 11px; border-radius: 2px; background: var(--borda-forte); flex: none; }
.ponto-cor.cor-vermelho { background: var(--risco-vermelho); }
.ponto-cor.cor-amarelo  { background: var(--risco-amarelo); }
.ponto-cor.cor-verde    { background: var(--risco-verde); }
.ponto-cor.cor-azul     { background: var(--risco-azul); }

/* ------------------------------------------------ vitais */

.at-vitais {
  display: flex; flex-wrap: wrap;
  margin-top: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-s);
  overflow: hidden;
}
.at-vital {
  flex: 1 1 108px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 9px var(--e3) 7px;
  border-right: 1px solid var(--borda);
}
.at-vital:last-child { border-right: none; }
.av-rotulo {
  font-size: 11px; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-fraco);
}
.av-valor {
  font-family: var(--dado-fonte);
  font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.av-un { width: 100%; margin-top: -2px; font-size: 10.5px; color: var(--texto-fraco); }

/* Fora da faixa por idade: o VALOR muda de cor, a célula não.
   Preencher a célula criaria um bloco colorido que compete com a
   classificação; o médico varre a linha e o número destoante salta
   sozinho. Vermelho aqui é do sistema (--erro), dessaturado, não é
   o vermelho do protocolo. */
.at-vital.atipico .av-valor { color: var(--erro); font-weight: 800; }
.at-vital.atipico .av-rotulo { color: var(--erro); }

/* ------------------------------------------------ alertas */

.at-alertas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--e3); }
.chip-alerta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: 12.5px; font-weight: 600;
  color: var(--texto-medio);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-s);
}
/* Só a alergia é preenchida. É o único aviso que mata se passar batido. */
.chip-alerta.critico {
  color: #fff; background: var(--erro); border-color: var(--erro);
  font-weight: 700; letter-spacing: 0.01em;
}
.chip-alerta.atencao { color: var(--atencao); background: var(--atencao-bg); border-color: var(--atencao); }
.chip-alerta.acento  { color: var(--texto-medio); border-color: var(--borda-forte); }
.chip-alerta.acento .ic { color: var(--acento); }

/* ------------------------------------------------ resumo da triagem */

/* A faixa herda a cor da classificação. Tinta baixíssima e só na
   borda e no rótulo: o médico reconhece de relance de que triagem
   veio o texto, sem que a caixa vire um bloco vermelho na tela. */
.resumo-triagem {
  --tri-cor: var(--borda-forte);
  --tri-bg:  var(--superficie-2);
  display: grid; grid-template-columns: 300px 1fr auto;
  gap: var(--e4); align-items: center;
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e3);
  background: var(--tri-bg);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--tri-cor);
  border-radius: 0 var(--raio) var(--raio) 0;
}
.resumo-triagem.tri-vermelho { --tri-cor: var(--risco-vermelho); --tri-bg: #fcf1f2; }
.resumo-triagem.tri-amarelo  { --tri-cor: var(--risco-amarelo);  --tri-bg: #fbf6e8; }
.resumo-triagem.tri-verde    { --tri-cor: var(--risco-verde);    --tri-bg: #eff6f1; }
.resumo-triagem.tri-azul     { --tri-cor: var(--risco-azul);     --tri-bg: #eef3f8; }

.rt-esquerda { min-width: 0; align-self: start; }
.rt-rotulo {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tri-cor);
}
.rt-legenda { margin: 6px 0 0; font-size: 12.5px; color: var(--texto-fraco); }
.rt-queixa  { margin: 2px 0 0; font-size: 16px; font-weight: 650; }

.rt-direita {
  align-self: start;
  padding-left: var(--e4);
  border-left: 1px solid var(--borda);
}
.rt-direita p { margin: 0 0 5px; font-size: 13.5px; line-height: 1.5; }
.rt-direita p:last-child { margin-bottom: 0; }
.rt-direita strong { color: var(--texto-medio); }

.rt-botao {
  min-height: 36px; padding: 7px 14px; font-size: 13px; white-space: nowrap;
  color: var(--tri-cor); border-color: var(--tri-cor); background: var(--superficie);
}
.rt-botao:hover { background: var(--superficie-2); border-color: var(--tri-cor); }

/* ------------------------------------------------ SOAP */

.bloco-soap {
  padding: var(--e3) var(--e4) var(--e4);
  margin-bottom: var(--e2);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.bs-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); margin-bottom: var(--e2);
}
.bloco-soap h2 {
  display: flex; align-items: center; gap: var(--e2); margin: 0;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--acento);
}
/* O quadrado fica cinza-escuro: é âncora de leitura, e quatro
   quadrados azuis empilhados viram decoração. */
.letra {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  font-family: var(--dado-fonte); font-size: 14px; font-weight: 700;
  color: var(--superficie); background: var(--texto); border-radius: 3px;
}
.titulo-simples {
  margin: 0 0 var(--e3);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--texto-fraco);
}
.bloco-soap textarea { font-size: 15.5px; line-height: 1.6; }
.bloco-soap textarea:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(26, 79, 156, 0.12);
}

.texto-fechado {
  padding: var(--e3);
  font-size: 15px; line-height: 1.6;
  background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: var(--raio-s);
}

.modelos { position: relative; }
.modelos summary {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--texto-fraco); cursor: pointer;
  list-style: none;
}
.modelos summary::-webkit-details-marker { display: none; }
.modelos summary::before { content: "\25B8"; }
.modelos[open] summary::before { content: "\25BE"; }
.modelos summary:hover { color: var(--texto-medio); }
.modelo-item { padding: 2px 0; }
.modelo-novo { display: flex; gap: var(--e2); margin-top: var(--e2); flex-wrap: wrap; }
.modelo-novo input { flex: 1; min-width: 150px; min-height: 34px; padding: 6px 10px; font-size: 13px; }

.linha-prescricao {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: var(--e3) var(--e4); margin-bottom: var(--e2);
  font-size: 14px;
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio);
}
.linha-prescricao > span { display: inline-flex; align-items: center; gap: 8px; }
.linha-prescricao > span .ic { color: var(--acento); }
.linha-prescricao .btn-secundario { min-height: 36px; padding: 7px 14px; font-size: 13px; }

.linha-cid-nova { display: flex; gap: var(--e2); margin-bottom: var(--e3); }
.linha-cid-nova input { flex: 1; }
.linha-cid-nova input:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(26, 79, 156, 0.12);
}
.linha-cid-nova .btn-secundario { white-space: nowrap; }

.cids { display: flex; flex-wrap: wrap; gap: 6px; }
.cid-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; font-size: 13px;
  background: var(--superficie-2);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-s);
}
.cid-chip strong { font-family: var(--dado-fonte); }
.cid-x {
  min-height: 0; padding: 0 2px;
  font-size: 13px; line-height: 1;
  color: var(--texto-fraco); background: none; border: none;
}
.cid-x:hover { color: var(--erro); background: none; }

/* ------------------------------------------------ rodapé */

/* Escopada: a barra da classificação é grudada no rodapé e não pode
   ser sobrescrita por esta, que só rola junto com o conteúdo.

   Um botão só. O lado esquerdo é do indicador de salvamento — sem
   botão de salvar, saber que gravou é a informação mais importante
   desta linha. */
.at-principal .barra-acoes {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4); margin-top: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio);
  position: static;
  box-shadow: none;
  flex-wrap: wrap;
}
.barra-acoes-espaco { flex: 1; }
.at-principal .barra-acoes .btn-principal.estreito { min-width: 200px; }

.rodape-salvamento {
  display: flex; align-items: center; gap: 7px;
  margin: 0;
  font-size: 12px; color: var(--texto-fraco);
}
.rodape-salvamento .ic { color: var(--ok); }
#status-rascunho { font-family: var(--dado-fonte); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ lateral */

.at-lateral { display: flex; flex-direction: column; gap: var(--e3); position: sticky; top: 72px; }
.at-lateral .painel-lateral h2 {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2);
}
.link-ver-todos {
  font-size: 11px; font-weight: 500; text-transform: none;
  letter-spacing: 0; color: var(--acento);
}

.lista-acoes { display: flex; flex-direction: column; gap: 5px; }
.acao-lateral {
  display: flex; align-items: center; gap: var(--e3);
  padding: 8px 10px;
  font-size: 13.5px; color: var(--texto); text-decoration: none;
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio-s);
  transition: border-color var(--transicao), background var(--transicao);
}
.acao-lateral:hover { border-color: var(--acento-borda); background: var(--acento-bg); }
.al-icone {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: var(--acento);
  background: var(--acento-bg);
  border: 1px solid var(--acento-borda); border-radius: var(--raio-s);
}
.al-rotulo { flex: 1; min-width: 0; }
.al-num {
  flex: none; min-width: 20px;
  font-family: var(--dado-fonte); font-size: 12px; font-weight: 650;
  text-align: right; color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}
/* Pendência de notificação compulsória tem prazo legal de 24h.
   Aqui o número deixa de ser contador e vira cobrança. */
.al-num.destaque {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; min-width: 20px;
  color: #fff; background: var(--erro);
  border-radius: 999px; font-size: 11px;
}
.acao-liberar { margin-top: var(--e3); }

.hist-item { padding: var(--e3) 0; border-bottom: 1px solid var(--borda); }
.hist-item:first-of-type { padding-top: 0; }
.hist-item:last-child { border-bottom: none; padding-bottom: 0; }
.hi-topo { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.hi-topo strong { font-family: var(--dado-fonte); font-variant-numeric: tabular-nums; }
.hi-numero { margin-left: auto; font-family: var(--dado-fonte); font-size: 11px; color: var(--acento); }
.hi-queixa { margin: 5px 0 0; font-size: 13.5px; }
.hi-cid { margin: 3px 0 0; font-size: 12px; color: var(--acento); }
.hi-fim { margin: 3px 0 0; font-size: 12px; color: var(--texto-fraco); }

/* ------------------------------------------------ referência */

.ref-conteudo, .ref-registro {
  padding: var(--e3) var(--e4); margin-bottom: var(--e4);
  background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: var(--raio-s);
}
.ref-lista { list-style: none; margin: var(--e2) 0 var(--e2); padding: 0; }
.ref-lista li {
  display: flex; align-items: baseline; gap: var(--e2);
  padding: 5px 0; font-size: 14px;
  border-bottom: 1px solid var(--borda);
}
.ref-lista li:last-child { border-bottom: none; }
.ref-lista li .ic { color: var(--ok); }
.ref-lista li small { margin-left: auto; font-size: 12.5px; color: var(--texto-fraco); text-align: right; }
.ref-destino { margin: 6px 0 0; font-size: 16px; }

/* ------------------------------------------------ triagem e histórico em modal */

.bloco-triagem {
  padding: var(--e3) var(--e4); margin-bottom: var(--e3);
  background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: var(--raio-s);
}
.bt-topo { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e3); }
.bt-topo .selo-cor { min-width: 46px; padding: var(--e2); align-self: center; border-radius: var(--raio-s); }
.bt-topo strong { font-size: 15px; }
.bt-topo .nota-mini { display: block; margin-top: 2px; }

.hist-completo { padding: var(--e3) 0; border-bottom: 1px solid var(--borda); }
.hist-completo:last-child { border-bottom: none; }
.hc-topo { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.hc-numero { margin-left: auto; font-family: var(--dado-fonte); font-size: 12px; color: var(--texto-fraco); }
.hc-queixa { margin: 4px 0 0; font-size: 15px; }
.hc-cid { margin: 2px 0 0; font-size: 13px; color: var(--texto-medio); }
.hc-fim { margin: 3px 0 0; font-size: 12.5px; color: var(--texto-fraco); }

.painel-inferior { margin-top: var(--e6); scroll-margin-top: 76px; }

@media (max-width: 1100px) {
  .tela-atendimento { grid-template-columns: 1fr; }
  .at-lateral { position: static; }
  .resumo-triagem { grid-template-columns: 1fr; }
  .rt-direita { padding-left: 0; border-left: none; }
  .rt-botao { justify-self: start; }
}
@media (max-width: 720px) {
  .at-topo { flex-wrap: wrap; }
  .at-topo-acoes {
    flex-direction: row; align-items: center; width: 100%; justify-content: space-between;
  }
  .at-vital { flex: 1 1 92px; }
  .at-principal .barra-acoes { flex-wrap: wrap; }
  .barra-acoes-espaco { display: none; }
  .at-principal .barra-acoes .btn-principal.estreito { width: 100%; }
}

/* ============================================================
   EXAMES — lista do pedido

   A lista É o pedido. O que está nela vai impresso; o que não está
   não existe. Por isso ela ocupa o meio da tela, e não um canto:
   antes o médico buscava, "selecionava" e nada acontecia visível.
   ============================================================ */

.lista-marcados { list-style: none; margin: 0 0 var(--e3); padding: 0; }

.item-exame {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center; gap: var(--e2);
  padding: 7px 8px 7px 11px; margin-bottom: 5px;
  background: var(--superficie);
  border: 1px solid var(--borda); border-left: 3px solid var(--acento);
  border-radius: var(--raio-s);
}
.ie-nome { font-size: 14px; font-weight: 550; min-width: 0; }
.ie-nome small {
  margin-left: 7px; font-size: 11px; font-weight: 400; color: var(--texto-fraco);
}
.ie-obs { min-height: 34px; padding: 5px 9px; font-size: 13px; }
.ie-obs:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(26, 79, 156, 0.12);
}

/* Alvo de 32px: é o botão que se aperta com pressa, e errar remove o
   exame errado sem aviso. */
.ie-x {
  flex: none;
  width: 32px; height: 32px; min-height: 0; padding: 0;
  font-size: 13px; line-height: 1;
  color: var(--texto-fraco);
  background: none; border: 1px solid transparent; border-radius: var(--raio-s);
}
.ie-x:hover { color: var(--erro); background: var(--erro-bg); border-color: var(--erro-bg); }

.chips-modelo { display: flex; flex-wrap: wrap; gap: 6px; margin: 5px 0; }
.chip-modelo {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 6px 12px;
  font-size: 13px; color: var(--texto);
  background: var(--acento-bg);
  border: 1px solid var(--acento-borda); border-radius: 999px;
}
.chip-modelo:hover { background: var(--superficie); border-color: var(--acento); }
.chip-modelo small {
  font-family: var(--dado-fonte); font-size: 11px; color: var(--acento);
}

/* Observação do exame na lista dos já solicitados. */
.obs-exame {
  display: block; margin-top: 2px;
  font-size: 12.5px; color: var(--texto-medio);
}

@media (max-width: 620px) {
  .item-exame { grid-template-columns: minmax(0, 1fr) auto; }
  .ie-obs { grid-column: 1 / -1; }
}

/* ============================================================
   FICHA DE REFERÊNCIA — vitais
   ============================================================ */

.vitais-proprios { border: none; margin: 0 0 var(--e3); padding: 0; }

/* Desabilitado, e não escondido: o médico marca "informar outros" e
   precisa ver onde vai digitar. Apagado o bastante para não competir
   com a opção que está valendo. */
.vitais-proprios.inativo { opacity: 0.45; }

/* Campos que só existem na transferência hospitalar. Desabilitados,
   ficam à vista e sem cor própria: esconder faria o médico procurar
   onde digitar o protocolo depois de escolher a modalidade errada. */
.ref-hospitalar { border: 0; padding: 0; margin: 0; }
.ref-hospitalar.inativo { opacity: 0.45; }

.ref-converter { margin-bottom: var(--e4); }
.ref-converter > summary {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--texto-fraco); cursor: pointer; list-style: none;
}
.ref-converter > summary::-webkit-details-marker { display: none; }
.ref-converter > summary:hover { color: var(--texto-medio); }
.ref-converter[open] > summary { margin-bottom: var(--e3); color: var(--texto-medio); }

.vitais-previa {
  display: block; margin: 2px 0 var(--e2) 26px;
  font-family: var(--dado-fonte); font-size: 12.5px;
  color: var(--texto-medio);
}

/* ============================================================
   ENCERRAMENTO — a decisão

   Nove em cada dez atendimentos terminam na primeira tela. Ela tem
   uma pergunta e, no máximo, duas respostas — nada mais compete por
   atenção. Tudo o que é exceção (observação, óbito, alta a pedido)
   fica recolhido embaixo.
   ============================================================ */

.decisao {
  padding: var(--e5) var(--e4);
  margin-bottom: var(--e4);
  text-align: center;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.decisao-pergunta { margin: 0 0 var(--e2); font-size: 20px; letter-spacing: -0.01em; }
.decisao-contexto { margin: 0 0 var(--e4); font-size: 14px; color: var(--texto-fraco); }
.decisao .acoes { justify-content: center; margin-bottom: var(--e3); }
.decisao .nota-mini { margin: 0; }

.decisao-opcoes {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3);
  margin-bottom: var(--e3);
}
.decisao-opcoes form { display: flex; }

/* Alvo grande e igual dos dois lados: as duas respostas são
   igualmente legítimas, e a tela não pode empurrar para nenhuma. */
.btn-decisao {
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  min-height: 88px; padding: var(--e3) var(--e4);
  text-align: left;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda-forte); border-radius: var(--raio);
  transition: border-color var(--transicao), background var(--transicao);
}
.btn-decisao:hover { border-color: var(--acento); background: var(--acento-bg); }
.btn-decisao strong { font-size: 16px; font-weight: 650; }
.btn-decisao span { font-size: 12.5px; font-weight: 400; color: var(--texto-fraco); line-height: 1.45; }

.btn-principal.grande { min-height: 52px; padding: 14px 34px; font-size: 16px; }

.outros-desfechos { border-top: 1px solid var(--borda); padding-top: var(--e3); }
.outros-desfechos > summary {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--texto-fraco); cursor: pointer; list-style: none;
}
.outros-desfechos > summary::-webkit-details-marker { display: none; }
.outros-desfechos > summary::before { content: "\25B8"; }
.outros-desfechos[open] > summary::before { content: "\25BE"; }
.outros-desfechos > summary:hover { color: var(--texto-medio); }
.od-lista { display: flex; flex-direction: column; gap: 6px; margin-top: var(--e3); }

@media (max-width: 560px) {
  .decisao-opcoes { grid-template-columns: 1fr; }
  .decisao { padding: var(--e4) var(--e3); }
}

/* Aviso que muda a decisão de quem lê, mas não é risco imediato —
   âmbar, nunca vermelho: vermelho aqui competiria com a alergia.

   A classe já era usada em quatro telas (inclusive "ALERGIA NÃO
   QUESTIONADA", na enfermagem) sem regra nenhuma no CSS: saía com a
   cor do texto comum e não avisava ninguém. */
.alerta-medio { color: var(--atencao); font-weight: 600; }
.alerta-medio strong { color: inherit; }

/* ------------------------------------------------ chamada e fim da fila */

/* "Chamado 3× — não atendeu" é aviso de fluxo, não de risco clínico:
   âmbar, nunca a cor da classificação. */
.marca-alerta.atencao {
  color: var(--atencao); background: var(--atencao-bg); border-color: var(--atencao);
}

/* Botão travado pelos 10 s: fica visível e legível, contando. Sumir
   faria o médico procurar o que aconteceu. */
.js-chamar:disabled {
  color: var(--texto-fraco);
  background: var(--superficie-2);
  border-color: var(--borda);
  cursor: default;
  font-variant-numeric: tabular-nums;
}
.js-chamar:disabled:hover { background: var(--superficie-2); }

.atualizado.velho { color: var(--atencao); }

/* ============================================================
   CLASSIFICAÇÃO DE RISCO — nova organização

   Mesmo padrão da tela de atendimento: cartões brancos sobre fundo
   frio, rótulo de seção em maiúscula fina, e o azul só em contorno.

   A tela é longa por necessidade — são vinte e poucos campos que
   sustentam uma decisão clínica. O que a organiza é o agrupamento:
   cada bloco tem um assunto só, e a decisão de cor fica isolada no
   fim, com peso visual próprio.

   Os números "1, 2, 3..." saíram das seções. Numerar sugere ordem
   obrigatória, e não é assim que se classifica: o enfermeiro afere a
   saturação enquanto pergunta a queixa, e pesa depois.
   ============================================================ */

.cl-cabecalho {
  display: flex; align-items: flex-start; gap: var(--e4);
  padding: var(--e4) var(--e5); margin-bottom: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.cl-identificacao { flex: 1; min-width: 0; }
.cl-identificacao h1 { font-size: 26px; letter-spacing: -0.02em; }
.cl-linha { margin: 6px 0 0; font-size: 13.5px; color: var(--texto-fraco); }
.cl-linha strong { color: var(--texto-medio); }

/* Cartão de alerta: cor cheia na borda, tinta baixa no fundo. Só
   aparece quando tem o que dizer — ver o comentário no PHP. */
.cl-alerta {
  flex: none; min-width: 210px; max-width: 260px;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borda); border-radius: var(--raio-s);
  background: var(--superficie-2);
}
.cl-alerta.atencao { color: var(--atencao); background: var(--atencao-bg); border-color: var(--atencao); }
.cl-alerta.critico { color: var(--erro);    background: var(--erro-bg);    border-color: var(--erro); }
.cla-rotulo {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
}
.cla-valor {
  display: block; margin-top: 4px;
  font-size: 14.5px; font-weight: 650; color: var(--texto);
}

/* ------------------------------------------------ blocos */

.cl-bloco {
  padding: var(--e4) var(--e5) var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  margin-bottom: var(--e3);
}
.cl-bloco > h2 {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 var(--e4);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--texto-fraco);
}
.cl-bloco > h2 .ic { color: var(--acento); }
.h2-nota {
  margin-left: auto;
  font-size: 11px; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--texto-fraco);
}
.cl-bloco .campo:last-child { margin-bottom: 0; }

.cl-linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); align-items: start; }
.cl-linha-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
.cl-fundo   { align-items: start; gap: var(--e3); }
.cl-fundo > .cl-bloco { margin-bottom: var(--e3); height: 100%; }

.cl-peso-dor {
  display: grid; grid-template-columns: 240px 1fr; gap: var(--e5);
  align-items: start; margin-bottom: var(--e4);
  padding-bottom: var(--e4); border-bottom: 1px solid var(--borda);
}

/* ------------------------------------------------ pílulas de opção */

/* Alvo grande e estado óbvio. A enfermagem preenche isto de pé, com
   luva, muitas vezes no celular — caixa de rádio de 13px não serve. */
.pilulas { display: flex; flex-wrap: wrap; gap: 6px; }
.pilulas.empilhadas { flex-direction: column; }

.pilula-opcao {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 8px 14px;
  font-size: 13.5px; color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio-s);
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.pilula-opcao input { width: 15px; height: 15px; margin: 0; flex: none; accent-color: var(--acento); }
.pilula-opcao:hover { border-color: var(--borda-forte); }
.pilula-opcao:has(input:checked) {
  font-weight: 600;
  border-color: var(--acento);
  background: var(--acento-bg);
}
.pilula-opcao:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.pilula-opcao:has(input:disabled) { opacity: 0.4; cursor: not-allowed; }

/* ------------------------------------------------ prioridade */

.cl-auto { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 5px 0 var(--e3); }

/* ------------------------------------------------ resumo */

.cl-resumo dl { margin: 0; }
.cl-resumo dl > div {
  display: flex; gap: var(--e2); padding: 4px 0;
  font-size: 13px; border-bottom: 1px solid var(--borda);
}
.cl-resumo dl > div:last-child { border-bottom: none; }
.cl-resumo dt { min-width: 74px; color: var(--texto-fraco); }
.cl-resumo dd {
  margin: 0; font-weight: 600; word-break: break-word;
  font-variant-numeric: tabular-nums;
}
/* Vital fora da faixa também salta no resumo: é a última chance de
   ver "SpO₂ 88" digitado sem querer, antes de gravar a cor. */
.cl-resumo dd.fora-faixa { color: var(--erro); }

/* ------------------------------------------------ decisão */

.cl-decisao .cores { margin-bottom: var(--e4); }

.cor { position: relative; }
.cor-check {
  position: absolute; top: 8px; right: 8px;
  display: none; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--texto); background: #fff; border-radius: 50%;
}
.cor:has(input:checked) .cor-check { display: inline-flex; }

.cl-destino {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5); align-items: start;
}
.cl-info {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0; padding: var(--e3) var(--e4);
  font-size: 13.5px; line-height: 1.5;
  color: var(--texto-medio);
  background: var(--acento-bg);
  border: 1px solid var(--acento-borda); border-radius: var(--raio-s);
}
.cl-info .ic { flex: none; color: var(--acento); margin-top: 2px; }
.cl-info.alerta { color: var(--erro); background: var(--erro-bg); border-color: var(--erro); }
.cl-info.alerta .ic { color: var(--erro); }

/* Escolha do procedimento — aparece só quando o destino é a sala.
   Sem cor de superfície própria: cor saturada aqui é classificação de
   risco, e reaproveitá-la para decoração de formulário quebraria a
   única leitura que a equipe faz de relance. */
.cl-procedimentos {
  margin-top: var(--e3); padding: var(--e3) var(--e4);
  border: 1px solid var(--borda); border-radius: var(--raio-s);
  background: var(--superficie);
}
.cl-proc-titulo {
  margin: 0 0 var(--e2); font-size: 13.5px; font-weight: 600; color: var(--texto);
}
.cl-proc-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px; margin-bottom: 6px;
}
.cl-proc-invasivo {
  margin-left: 5px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texto-fraco);
}

.cl-pendencias { margin-top: var(--e3); }
.cl-pendencias > summary {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--texto-fraco); cursor: pointer; list-style: none;
}
.cl-pendencias > summary::-webkit-details-marker { display: none; }
.cl-pendencias > summary::before { content: "\25B8"; }
.cl-pendencias[open] > summary::before { content: "\25BE"; }
.cl-pendencias > summary:hover { color: var(--texto-medio); }
.cl-pendencias .opcao { display: flex; margin-bottom: 5px; }

.cl-nota {
  display: flex; align-items: flex-start; gap: 8px;
  margin: var(--e3) 0 0; padding: var(--e3);
  font-size: 12.5px; line-height: 1.5; color: var(--texto-medio);
  background: var(--acento-bg);
  border-radius: var(--raio-s);
}
.cl-nota .ic { flex: none; color: var(--acento); margin-top: 1px; }

.form-classificacao .barra-acoes {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e4); margin-top: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio);
  position: static; box-shadow: none; flex-wrap: wrap;
}

@media (max-width: 1000px) {
  .cl-linha-2, .cl-linha-3, .cl-peso-dor, .cl-destino { grid-template-columns: 1fr; }
  .cl-cabecalho { flex-wrap: wrap; }
  .cl-alerta { max-width: none; flex: 1 1 200px; }
}
@media (max-width: 620px) {
  .cores { grid-template-columns: 1fr 1fr; }
  .grade-vitais { grid-template-columns: 1fr 1fr; }
  .cl-auto { grid-template-columns: 1fr; }
}

/* ============================================================
   FILA DE ESPERA — componente compartilhado

   Usado pela recepção e pela classificação. As duas telas mostram a
   MESMA população — quem chegou e ainda não foi triado — só que a
   partir de papéis diferentes: a recepção acompanha, a triagem
   executa. Duas aparências para a mesma lista faziam parecer que eram
   coisas diferentes, e quem trabalha nas duas telas no mesmo plantão
   pagava por isso.

   Mesma linguagem da fila médica: cartão branco, faixa à esquerda,
   avatar de acento, ações à direita. O que muda é o conteúdo — aqui
   não existe cor de risco, porque o paciente ainda não foi
   classificado. É justamente por isso que a espera importa: paciente
   sem triagem é paciente sem risco conhecido.
   ============================================================ */

.sub-titulo { margin: 4px 0 0; font-size: 13.5px; color: var(--texto-fraco); }
.cabecalho-pagina .rotulo-mini { display: block; margin-bottom: 2px; }

/* O número que pede ação ganha contorno; os outros informam. */
.painel-numeros div.destaque { border-color: var(--acento); background: var(--acento-bg); }
.painel-numeros div.destaque strong { color: var(--acento); }

.fila-lista {
  padding: var(--e4);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.fila-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e3);
}
.fila-topo h2 {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--texto-fraco);
}
.fila-contagem {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  font-family: var(--dado-fonte); font-size: 12px; letter-spacing: 0;
  color: var(--acento); background: var(--acento-bg);
  border: 1px solid var(--acento-borda); border-radius: 999px;
}

.fila-busca { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fila-busca input { min-width: 260px; min-height: 38px; }
.fila-busca .btn-secundario { min-height: 38px; padding: 8px 14px; font-size: 13.5px; }

.fila-cartao {
  display: grid;
  grid-template-columns: 74px auto minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
  margin-bottom: 6px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--borda-forte);
  border-radius: 0 var(--raio) var(--raio) 0;
}
.fila-cartao:last-child { margin-bottom: 0; }

/* Passou do tempo-alvo de triagem: é a única coisa desta tela que a
   recepção precisa escalar. Âmbar, nunca vermelho — vermelho aqui
   seria confundido com classificação de risco, que ainda não existe. */
.fila-cartao.atrasado { border-left-color: var(--atencao); }
.fila-cartao.atrasado .fila-hora small { color: var(--atencao); font-weight: 700; }
.fila-cartao.esmaecido { opacity: 0.62; }

.fila-hora {
  text-align: center; padding-right: var(--e3);
  border-right: 1px solid var(--borda);
}
.fila-hora strong {
  display: block;
  font-family: var(--dado-fonte); font-size: 17px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.fila-hora small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--texto-fraco); }

.fila-corpo { min-width: 0; }
.fila-nome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fila-nome a { font-size: 16px; font-weight: 650; color: var(--texto); text-decoration: none; }
.fila-nome a:hover { text-decoration: underline; }
.fila-dados { margin: 3px 0 0; font-size: 12.5px; color: var(--texto-fraco); }
.fila-numero { font-family: var(--dado-fonte); font-variant-numeric: tabular-nums; }
.fila-queixa { margin: 4px 0 0; font-size: 13.5px; }
.fila-queixa span { color: var(--texto-fraco); }
.fila-marcas { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; }

.selo-estado {
  display: inline-block; padding: 4px 11px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--texto-medio);
  background: var(--superficie-2);
  border: 1px solid var(--borda-forte); border-radius: 3px;
  white-space: nowrap;
}
.selo-estado.atencao { color: var(--atencao); background: var(--atencao-bg); border-color: var(--atencao); }

.fila-acoes { display: flex; align-items: center; gap: 6px; }
.fila-acoes .btn-secundario,
.fila-acoes .btn-principal { min-height: 38px; padding: 8px 14px; font-size: 13.5px; white-space: nowrap; }
.fila-chamar { display: flex; align-items: center; gap: 6px; }
.fila-chamar select { width: auto; min-width: 108px; min-height: 38px; }
.fila-acoes .cf-mais > summary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border-color: var(--borda-forte);
}
.fila-acoes .cf-mais-lista select { width: 100%; margin-bottom: 5px; }

@media (max-width: 1100px) {
  .fila-cartao { grid-template-columns: 66px auto minmax(0, 1fr); }
  .fila-estado, .fila-acoes { grid-column: 1 / -1; }
  .fila-acoes { justify-content: flex-end; flex-wrap: wrap; }
}
@media (max-width: 620px) {
  .painel-numeros { flex-wrap: wrap; }
  .painel-numeros div { flex: 1 1 44%; }
  .fila-busca input { min-width: 0; flex: 1; }
  .fila-cartao { grid-template-columns: 60px minmax(0, 1fr); }
  .fila-cartao .at-avatar { display: none; }
}
/* ============================================================
   ESCOLHA DE POSTO

   Esta tela é o menu do profissional, e por isso a barra do topo
   some aqui. Segue o desenho das telas modernizadas: título
   grande, cartões com disco de ícone e ação na base. Nada de cor
   de risco — nenhum destes cartões representa gravidade.
   ============================================================ */

.po-topo {
  display: flex;
  align-items: flex-start;
  gap: var(--e4);
  margin-bottom: var(--e6);
}

.po-topo-icone {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  color: var(--acento);
  background: var(--acento-bg);
  border: 1px solid var(--acento-borda);
  border-radius: var(--raio);
}

.po-topo h1 { font-size: 25px; letter-spacing: -0.02em; line-height: 1.15; }

.po-topo p {
  margin-top: 5px;
  max-width: 52ch;
  font-size: 14px;
  color: var(--texto-fraco);
}

.po-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
  gap: var(--e3);
}

.po-cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  margin: 0;
  padding: var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.po-cartao:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); }

/* O posto atual fica marcado, não pintado de outra cor: a pessoa
   precisa reconhecer onde já está sem que isso pareça alerta. */
.po-cartao.ativo {
  border-color: var(--acento);
  box-shadow: 0 0 0 1px var(--acento);
  background: var(--acento-bg);
}

.po-marca {
  position: absolute;
  top: var(--e4); right: var(--e4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  color: #fff;
  background: var(--acento);
  border-radius: 50%;
}

.po-cabeca { display: flex; align-items: flex-start; gap: var(--e3); }
.po-cabeca > div { min-width: 0; }
.po-cabeca h2 { margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.25; }

.po-cabeca p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--texto-fraco);
}

.po-icone {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  color: var(--acento);
  background: var(--acento-bg);
  border: 1px solid var(--acento-borda);
}

.po-cartao select {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  font: inherit;
  font-size: 14.5px;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
}

.po-sem-sala {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--atencao);
}

.po-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  min-height: 46px;
  padding: 10px 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--acento);
  background: var(--superficie);
  border: 1px solid var(--acento-borda);
  border-radius: var(--raio);
  cursor: pointer;
}

.po-botao:hover { background: var(--acento-bg); }

.po-botao.ativo {
  color: #fff;
  background: var(--acento);
  border-color: var(--acento);
}

.po-botao.ativo:hover { background: #1e4f86; }

/* Gestão: borda tracejada porque não é posto de trabalho. Alguém
   apressado não deve confundir "abrir a gestão" com "trabalhar aqui
   hoje". */
.po-gestao { border-style: dashed; }
.po-gestao:hover { border-style: solid; }

.po-nota {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  margin-top: var(--e5);
  padding: var(--e4);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--acento);
  background: var(--acento-bg);
  border: 1px solid var(--acento-borda);
  border-radius: var(--raio);
}

.po-nota svg { flex: none; margin-top: 1px; }

/* --------------------------------- botões de contexto da barra

   Trocar posto e entrar na gestão. Os dois levam para FORA da tela
   atual, e o ícone é o que diz isso — o texto sozinho parecia o
   título da página em que a pessoa já estava. */

/* Gestão é outra área do sistema, não outro posto: tratamento
   visual distinto para não parecer mais um setor da escala.
   Hoje o botão não está na barra — a porta é a tela de escolha de
   posto — mas a regra fica, porque o botão volta em produto de
   hospital que não use posto de trabalho. */
.barra-gestao {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--acento);
  background: var(--acento-bg);
  border-color: var(--acento-borda);
}
.barra-gestao svg { flex: none; opacity: 0.75; }
.barra-gestao:hover svg { opacity: 1; }
.barra-gestao:hover { border-color: var(--acento); }

/* ------------------------------------------------ tendência de sinal vital

   As classes de gráfico moravam só em gestao.css, que a enfermagem não
   carrega — o SVG saía sem largura e a mensagem de série vazia sem
   estilo. Os poucos seletores usados fora da gestão vêm para cá.

   Duplicar .g-svg em dois arquivos é ruim; pior seria a enfermaria
   abrir a tela de vitais e ver o desenho estourado.
   ------------------------------------------------------------------ */

.g-svg { display: block; width: 100%; height: auto; }

.g-vazio {
  font-size: 13px;
  color: var(--texto-fraco);
  padding: var(--e3) 0;
}

.cartao-grafico {
  margin: var(--e4) 0;
  padding: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.cartao-grafico h2 {
  margin: 0 0 var(--e2);
  font-size: 14px;
}
.cartao-grafico h2 small {
  font-weight: 400;
  color: var(--texto-fraco);
}

/* A tabela de vitais tem onze colunas e não cabe em tela de celular.
   Rolagem horizontal preserva a linha inteira; quebrar em cartões
   perderia a comparação entre aferições, que é o motivo da tabela. */
.tabela-rolagem {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--e2) 0 var(--e4);
}
.tabela-rolagem .tabela-consumo { min-width: 640px; }

/* ================================================ prescrição de internamento

   Formulário longo, preenchido sentado. Diferente das telas de
   execução, aqui vale usar a largura: o médico compara os
   medicamentos entre si enquanto escreve, e uma coluna estreita
   obrigaria a rolar para conferir o que já lançou.

   Cartões brancos sobre fundo cinza, borda fina, respiro generoso. O
   contorno separa os três blocos sem precisar de régua nem de cor.
   ---------------------------------------------------------------- */

.presc-voltar { margin: 0 0 var(--e3); font-size: 13px; }
.presc-voltar a { color: var(--texto-fraco); text-decoration: none; }
.presc-voltar a:hover { color: var(--acento); }

.presc-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
  margin-bottom: var(--e4);
}
.presc-cabecalho h1 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.01em; }
.presc-sub { margin: 0; color: var(--texto-fraco); font-size: 14px; }
.presc-quando { min-width: 220px; margin: 0; }

/* ---------------------------------------------------- cartão do paciente */

.presc-paciente {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: 18px var(--e4);
  margin-bottom: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
  flex-wrap: wrap;
}

.presc-avatar {
  flex: none;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--acento-bg);
  color: var(--acento);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .03em;
}

.presc-ident { flex: 1 1 280px; min-width: 0; }
.presc-nome { margin: 0 0 5px; font-size: 15px; }
.presc-nome strong { font-size: 17px; letter-spacing: -.01em; }
.presc-nome span { color: var(--texto-fraco); margin-left: 6px; }
.presc-meta { margin: 0; font-size: 13px; color: var(--texto-fraco); }

.presc-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--acento-bg);
  color: var(--acento);
  font-size: 12px;
  font-weight: 600;
}

.presc-alergias { flex: none; text-align: right; }
.presc-rotulo {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-fraco);
}
/* Alergia é o único dado do cabeçalho que muda a conduta antes de
   qualquer outra coisa acontecer. É o único que ganha cor. */
.presc-alergia-sim { color: #b3261e; font-size: 14px; }

/* ------------------------------------------------------------- blocos */

.presc-bloco {
  padding: 22px var(--e4);
  margin-bottom: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
}
.presc-bloco > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 16px;
  letter-spacing: -.01em;
}
.presc-num {
  display: grid; place-items: center;
  flex: none;
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--acento);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.presc-bloco .campo { margin-bottom: 0; }
.presc-bloco label {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--texto-fraco);
}
.presc-bloco input[type="text"],
.presc-bloco input[type="datetime-local"],
.presc-bloco select,
.presc-bloco textarea,
.presc-quando input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borda);
  border-radius: 7px;
  background: var(--superficie);
  font: inherit;
  font-size: 14px;
}
.presc-bloco textarea { resize: vertical; line-height: 1.45; }
.presc-bloco input:focus,
.presc-bloco select:focus,
.presc-bloco textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-bg);
}
.presc-bloco input::placeholder,
.presc-bloco textarea::placeholder { color: #9aa5aa; }

.presc-grade { display: grid; gap: var(--e4); }
.presc-grade-dieta { grid-template-columns: minmax(220px, 1fr) 1.7fr; }
.presc-grade-hidra { grid-template-columns: 2fr 1fr 1fr 1fr; margin-bottom: var(--e4); }

.campo-sufixo { display: flex; align-items: center; gap: 8px; }
.campo-sufixo input { flex: 1; min-width: 0; }
.campo-sufixo span { flex: none; color: var(--texto-fraco); font-size: 13px; }

/* ------------------------------------------------ linha de medicamento */

.presc-med {
  padding: var(--e3) var(--e4) var(--e4);
  border: 1px solid var(--borda);
  border-radius: 9px;
  margin-bottom: var(--e3);
  background: var(--superficie);
}

.presc-med-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.presc-med-ordem {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--texto-fraco);
}

.presc-med-campos {
  display: grid;
  grid-template-columns: 2.4fr 1.3fr .7fr 1.1fr 1fr;
  gap: var(--e3);
  align-items: start;
  margin-bottom: var(--e3);
}

/* Valor e unidade coladas: são um dado só. "500" e "mg" separados por
   uma coluna de grade seriam lidos como dois campos independentes. */
.presc-dose { display: flex; gap: 6px; }
.presc-dose input  { flex: 1 1 55%; min-width: 0; }
.presc-dose select { flex: 1 1 45%; min-width: 0; }

.presc-dica {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #9a6a00;
}

.presc-med-remover {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: #99a4a9;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.presc-med-remover:hover {
  color: #b3261e;
  border-color: #e6c9c6;
  background: #fdf4f3;
}

.presc-med-sn { margin-bottom: var(--e3); }

/* O botão fica logo abaixo da última linha, na largura toda e em
   traço interrompido: lê-se como "espaço para mais um", não como
   ação principal do formulário. */
.presc-add {
  width: 100%;
  padding: 11px;
  border: 1px dashed var(--borda);
  border-radius: 8px;
  background: var(--superficie-2);
  color: var(--acento);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.presc-add:hover { border-color: var(--acento); background: var(--acento-bg); }
.presc-add span { font-weight: 700; margin-right: 4px; }

.presc-rodape {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4) 0 var(--e5, 24px);
}

/* Lista do autocomplete dentro dos cartões: sem isto ela abre atrás
   da linha de baixo, porque cada .presc-med cria contexto próprio. */
.presc-bloco .ac-lista { z-index: 30; }

/* Abaixo de 980px a grade de cinco colunas viraria cinco colunas de
   50px. Empilhar é a única leitura possível no celular, e prescrever
   no celular acontece — na visita, com o aparelho na mão. */
@media (max-width: 980px) {
  .presc-grade-dieta,
  .presc-grade-hidra,
  .presc-med-campos { grid-template-columns: 1fr; }
  .presc-alergias { text-align: left; flex-basis: 100%; }
  .presc-rodape { flex-direction: column-reverse; align-items: stretch; }
  .presc-rodape > * { text-align: center; }
}

/* Marcação de "se necessário": faixa própria, largura toda, dentro do
   cartão do medicamento. Um checkbox solto no meio da grade de cinco
   colunas ficaria do tamanho de um erro de digitação, e esta é a
   marcação que decide se o item entra ou não na rotina do turno. */
.presc-sn-marca {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: var(--e3);
  border: 1px solid var(--borda);
  border-radius: 7px;
  background: var(--superficie-2);
  cursor: pointer;
}
.presc-sn-marca input { margin-top: 3px; flex: none; }
.presc-sn-marca strong { display: block; font-size: 13.5px; }
.presc-sn-marca small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--texto-fraco);
}
.presc-sn-marca:has(input:checked) {
  border-color: var(--acento);
  background: var(--acento-bg);
}

/* --------------------------------------------- reordenar por arraste */

.presc-med-topo { display: flex; align-items: center; gap: 8px; }

.presc-alca {
  cursor: grab;
  color: #b3bcc0;
  font-size: 15px;
  line-height: 1;
  padding: 4px 2px;
  user-select: none;
}
.presc-alca:active { cursor: grabbing; }
.presc-med.arrastando { opacity: .45; }

/* Setas ao lado da alça: arrastar é impossível para quem usa leitor de
   tela, e a ordem da folha é decisão clínica, não enfeite. */
.presc-mover { display: flex; gap: 2px; margin-left: auto; }
.presc-mover button {
  width: 26px; height: 26px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  color: #97a2a7;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.presc-mover button:hover {
  color: var(--acento);
  border-color: var(--borda);
  background: var(--superficie-2);
}

/* ================================================ painel do internamento */

.int-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
  margin-bottom: var(--e4);
}
.int-topo h1 { margin: 0 0 4px; font-size: 23px; letter-spacing: -.01em; }
.int-sub { margin: 0; color: var(--texto-fraco); font-size: 13.5px; }
.int-atualizado { margin: 0; color: var(--texto-fraco); font-size: 12.5px; }

.int-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--e3);
  margin-bottom: var(--e4);
}
.int-cartao {
  padding: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
}
.int-cartao strong {
  display: block;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.int-cartao-rot { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 500; }
.int-cartao-pe {
  display: block;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--borda);
  font-size: 12px;
  color: var(--texto-fraco);
}
/* Pendência em zero fica igual ao resto. Só acende quando há o que
   fazer — cartão sempre colorido é cartão que ninguém mais enxerga. */
.int-cartao.aceso { border-color: #e3b7b2; }
.int-cartao.aceso strong { color: #b3261e; }

.int-aviso {
  display: flex;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e4);
  border: 1px solid #e8d5a8;
  border-left: 4px solid #d99b1c;
  border-radius: 8px;
  background: #fdf8ee;
}
.int-aviso strong { display: block; color: #7a5406; font-size: 14px; }
.int-aviso p { margin: 4px 0 0; font-size: 13px; color: #6b5a38; }

.int-bloco {
  padding: var(--e4);
  margin-bottom: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
}
.int-bloco h2 { margin: 0 0 4px; font-size: 16px; letter-spacing: -.01em; }
.int-bloco-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e3); margin-bottom: var(--e3); flex-wrap: wrap;
}

.int-tabela { width: 100%; border-collapse: collapse; min-width: 780px; }
.int-tabela th {
  padding: 9px 10px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-fraco);
  border-bottom: 1px solid var(--borda);
}
.int-tabela td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--borda);
  font-size: 13.5px;
  vertical-align: middle;
}
.int-tabela tr:last-child td { border-bottom: none; }
.int-tabela td strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.int-tabela td small { display: block; color: var(--texto-fraco); font-size: 11.5px; }
.int-nome strong { font-size: 14px; }
.int-alerta strong  { color: #b3261e; }
.int-atencao strong { color: #a8720c; }
.int-zero strong    { color: var(--texto-fraco); font-weight: 500; }
.int-acao { text-align: right; white-space: nowrap; }

.g-anel { display: inline-block; }
.g-anel svg { display: block; width: 100%; height: auto; }

.int-indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e3);
  margin: var(--e3) 0;
}
.int-ind {
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: var(--superficie-2);
}
.int-ind-rot { display: block; font-size: 12.5px; color: var(--texto-fraco); }
.int-ind strong {
  display: block;
  margin: 5px 0 3px;
  font-size: 24px;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.int-ind small { display: block; font-size: 11.5px; color: var(--texto-fraco); }
.int-ind .g-spark { margin-top: 5px; width: 100%; height: 30px; }

/* ------------------------------------------------------------- leitos */

.leitos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: var(--e3);
}
.leito {
  display: flex;
  flex-direction: column;
  padding: var(--e3) var(--e4) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
}
/* O leito vago tem a mesma altura do ocupado: é ele que a enfermeira
   procura quando o PS liga pedindo vaga. */
.leito-vago { background: var(--superficie-2); border-style: dashed; }

.leito-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
.leito-num {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.leito-situacao {
  padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  background: var(--superficie-2); color: var(--texto-fraco);
  border: 1px solid var(--borda);
}
.leito-ok      { color: #1c6b3f; border-color: #bfe0cd; background: #f0f8f3; }
.leito-atencao { color: #a8720c; border-color: #ecd9ad; background: #fdf8ee; }
.leito-alerta  { color: #b3261e; border-color: #e6c9c6; background: #fdf4f3; }

.leito-paciente { display: block; text-decoration: none; color: inherit; }
.leito-paciente strong { display: block; font-size: 15px; letter-spacing: -.01em; }
.leito-paciente small  { display: block; color: var(--texto-fraco); font-size: 12px; }
.leito-paciente:hover strong { color: var(--acento); }

.leito-hipotese { margin: 9px 0 0; font-size: 13px; }
.leito-alergia  { margin: 6px 0 0; font-size: 12.5px; color: #b3261e; font-weight: 500; }
.leito-meta     { margin: 8px 0 0; font-size: 11.5px; color: var(--texto-fraco); }
.leito-vazio    { margin: 6px 0 0; font-size: 13px; color: var(--texto-fraco); }
.leito-acoes {
  display: flex; align-items: center; gap: var(--e2);
  margin-top: auto; padding-top: var(--e3); flex-wrap: wrap;
}

/* ------------------------------------------------- paciente e timeline */

.pac-cabecalho {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap;
  padding: var(--e4);
  margin-bottom: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
}
.pac-cabecalho h1 { margin: 0 0 5px; font-size: 21px; letter-spacing: -.01em; }
.pac-meta { margin: 0 0 2px; font-size: 13px; color: var(--texto-fraco); }

.pac-marcadores {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: flex-end; max-width: 46%;
}
.pac-marca {
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--acento-bg); color: var(--acento);
}
.pac-marca-alergia { background: #fdf4f3; color: #b3261e; }
.pac-marca-vazia   { background: var(--superficie-2); color: var(--texto-fraco); font-weight: 400; }

.pac-dia {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); padding: var(--e2) 0 var(--e3);
  font-size: 13px;
}

.linha-tempo { list-style: none; margin: 0; padding: 0; }
.lt-item {
  display: flex; gap: var(--e3);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--borda);
}
.lt-item:last-child { border-bottom: none; }
.lt-hora {
  flex: none; width: 46px;
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--texto-fraco);
}
/* Faixa colorida em vez de ícone: o tipo do evento precisa ser
   distinguível na diagonal, e ícone pequeno em lista longa vira
   mancha. */
.lt-corpo {
  flex: 1; min-width: 0;
  padding-left: var(--e3);
  border-left: 3px solid var(--borda);
}
.lt-medicacao  .lt-corpo { border-left-color: #2f7d55; }
.lt-prescricao .lt-corpo { border-left-color: var(--acento); }
.lt-vitais     .lt-corpo { border-left-color: #7a5cc4; }
.lt-escala     .lt-corpo { border-left-color: #c07d1a; }
.lt-balanco    .lt-corpo { border-left-color: #1f8a9c; }
.lt-admissao   .lt-corpo { border-left-color: #55636a; }

.lt-tipo {
  display: block; margin-bottom: 2px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-fraco);
}
.lt-corpo strong { font-size: 14px; }
.lt-corpo p     { margin: 3px 0 0; font-size: 13px; }
.lt-corpo small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--texto-fraco); }

.pac-presc-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap; margin: var(--e3) 0;
}
.pac-presc-topo small { display: block; color: var(--texto-fraco); font-size: 12px; }

.pac-cartao {
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e3);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 9px;
  font-size: 13.5px;
}
.pac-cartao p { margin: 0 0 6px; }
.pac-cartao p:last-child { margin-bottom: 0; }

.pac-horario {
  display: inline-block;
  margin: 0 3px 3px 0;
  padding: 1px 7px;
  border: 1px solid var(--borda);
  border-radius: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.pac-horario.feito { background: #f0f8f3; border-color: #bfe0cd; color: #1c6b3f; }

/* Horário encerrado por recusa ou suspensão: a dose daquele horário
   não vai acontecer. Riscado, e não apenas apagado — "apagado" numa
   fileira de horários lê-se como "ainda não chegou". */
.pac-horario.encerrado {
  color: var(--texto-fraco);
  border-style: dashed;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* ------------------------------------------- linha de administração

   Formulário de administrar e menu do que não aconteceu, lado a lado.
   São dois formulários irmãos porque formulário não aninha, e cada um
   precisa levar um único botão de gravar. */
.adm-linha {
  display: flex;
  align-items: flex-end;
  gap: var(--e2);
}
.adm-linha > form { flex: 1; min-width: 0; }
.adm-linha > .cf-mais { margin-bottom: 3px; }

@media (max-width: 780px) {
  .pac-marcadores { max-width: 100%; justify-content: flex-start; }
  .int-cartao strong { font-size: 26px; }
}

/* ------------------------------------- linha do tempo: filtros e escopo */

.lt-filtros {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: var(--e3) 0 var(--e2);
}
.lt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  font-size: 12.5px;
  text-decoration: none;
}
.lt-chip span {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--superficie-2);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lt-chip:hover { border-color: var(--acento); color: var(--acento); }
.lt-chip.ativo {
  background: var(--acento); border-color: var(--acento); color: #fff;
}
.lt-chip.ativo span { background: rgba(255, 255, 255, .22); color: #fff; }
/* Categoria sem nada no período continua clicável — some do olho, não
   da tela. Esconder faria os filtros dançarem a cada troca de dia. */
.lt-chip.vazio { opacity: .5; }

.lt-escopo {
  margin: 0 0 var(--e3);
  font-size: 12.5px;
  color: var(--texto-fraco);
}

.lt-hora small {
  display: block;
  font-weight: 400;
  font-size: 11px;
}

/* ------------------------------------------ doses e itens na prescrição */

.pac-doses {
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e4);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--acento);
  border-radius: 9px;
  background: var(--superficie);
}
.pac-doses-titulo { margin: 0 0 10px; font-size: 13.5px; }

.pac-dose {
  border-top: 1px solid var(--borda);
  padding: 9px 0 0;
  margin-top: 9px;
}
.pac-dose:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.pac-dose > summary {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  cursor: pointer; list-style: none; font-size: 13.5px;
}
.pac-dose > summary::-webkit-details-marker { display: none; }
.pac-dose > summary strong { font-variant-numeric: tabular-nums; }
.pac-dose > summary small { color: var(--texto-fraco); font-size: 12px; }
.pac-dose.atrasada > summary strong { color: #b3261e; }

.pac-dose-corpo { padding: 10px 0 4px; }
.pac-dose-form {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.pac-dose-form select,
.pac-dose-form input { flex: 1 1 160px; min-width: 0; }

.pac-item {
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e3);
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: var(--superficie);
}
.pac-item-topo {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px;
}
.pac-item-ordem {
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 5px;
  border: 1px solid var(--borda);
  background: var(--superficie-2);
  font-size: 11.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--texto-fraco);
}
.pac-item-nome { flex: 1; min-width: 0; }
.pac-item-nome strong { font-size: 14.5px; }
.pac-item-nome small { display: block; color: var(--texto-fraco); font-size: 12.5px; }

.pac-horarios {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  margin: 10px 0;
}
/* O X de cancelar mora dentro da própria etiqueta do horário: um botão
   separado por horário encheria a linha de controles e faria a lista
   de horários deixar de ser lida de relance. */
.pac-horario { display: inline-flex; align-items: center; gap: 4px; }
.pac-horario form { display: inline; }
.pac-horario button {
  border: none; background: none; padding: 0 0 0 2px;
  color: #a9b3b7; font-size: 13px; line-height: 1; cursor: pointer;
}
.pac-horario button:hover { color: #b3261e; }
.pac-horario.feito button { display: none; }

.pac-aprazar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding-top: 10px;
  border-top: 1px dashed var(--borda);
}
.pac-aprazar input[type="datetime-local"] { flex: 0 1 220px; }
.pac-serie {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--texto-fraco);
}
.pac-serie input { margin: 0; }

/* ------------------------------------------ evoluções e anotações */

.evo-form {
  padding: var(--e4);
  margin-bottom: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
}
.evo-form h2 { margin: 0 0 6px; font-size: 16px; }
.evo-retifica { border-left: 4px solid #d99b1c; }

.evo-original {
  margin: 0 0 var(--e3);
  padding: var(--e3);
  border-left: 3px solid var(--borda);
  background: var(--superficie-2);
  font-size: 13px;
  color: var(--texto-fraco);
}

.evo {
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--borda);
  border-radius: 9px;
}
/* A faixa lateral diz de quem é o registro antes de qualquer leitura.
   Num prontuário longo, isso é o que permite achar "a evolução do
   médico de ontem" sem varrer texto. */
.evo-medica     { border-left-color: var(--acento); }
.evo-enfermagem { border-left-color: #2f7d55; }
.evo-anotacao   { border-left-color: #7a5cc4; }

/* Retificada não some e não fica ilegível: fica evidentemente
   superada. Esconder transformaria a retificação em edição
   silenciosa, que é o oposto do que ela existe para ser. */
.evo-substituida { opacity: .62; }
.evo-substituida .evo-corpo { text-decoration: line-through; text-decoration-thickness: 1px; }

.evo-topo {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.evo-cat {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-fraco);
}
.evo-quando { font-size: 12.5px; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.evo-selo {
  padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: #fdf8ee; color: #a8720c; border: 1px solid #ecd9ad;
}
.evo-selo-nova { background: #f0f8f3; color: #1c6b3f; border-color: #bfe0cd; }

.evo-corpo { font-size: 14px; line-height: 1.55; }
.evo-corpo p { margin: 0 0 8px; }
.evo-corpo p:last-child { margin-bottom: 0; }
.evo-corpo strong { color: var(--texto-fraco); font-size: 12.5px; }

.evo-pe {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--borda);
  font-size: 12px; color: var(--texto-fraco);
}
.evo-pe a { color: var(--acento); }

.lt-evolucao_medica     .lt-corpo { border-left-color: var(--acento); }
.lt-evolucao_enfermagem .lt-corpo { border-left-color: #2f7d55; }
.lt-anotacao            .lt-corpo { border-left-color: #7a5cc4; }

/* ============================================== evolução médica

   Duas colunas: o formulário à esquerda, o que se consulta à direita.
   A lateral não é menu — é a informação que o médico olha enquanto
   escreve, e por isso fica visível junto com os campos, não atrás de
   um clique.
   ---------------------------------------------------------------- */

.evm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--e4);
  align-items: start;
}

.evm-principal { min-width: 0; }

/* -------------------------------------------------- cartão do paciente */

.evm-paciente {
  display: flex; align-items: flex-start; gap: var(--e4);
  padding: 18px var(--e4);
  margin-bottom: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
  flex-wrap: wrap;
}
.evm-ident { flex: 1 1 320px; min-width: 0; }

.evm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.evm-chip {
  padding: 3px 10px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--superficie-2);
  font-size: 12.5px;
  color: var(--texto-fraco);
}
.evm-chip strong { color: var(--texto); font-weight: 600; }
/* Alergia é o único dado do cabeçalho que muda a conduta antes de
   qualquer outra coisa acontecer. É o único que ganha cor. */
.evm-chip-alerta { color: #b3261e !important; }

/* ----------------------------------------------- barra de sinais vitais */

.evm-vitais {
  display: flex; align-items: center; gap: 0;
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
  flex-wrap: wrap;
}
.evm-vitais-rot {
  flex: 0 0 120px;
  font-size: 13.5px; font-weight: 600;
}
.evm-vital {
  flex: 1 1 88px;
  padding: 0 var(--e3);
  border-left: 1px solid var(--borda);
}
.evm-vital-rot { display: block; font-size: 11.5px; color: var(--texto-fraco); }
.evm-vital strong {
  display: block; margin: 2px 0;
  font-size: 18px; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.evm-vital small { font-size: 11px; color: var(--texto-fraco); }

.evm-vitais-pe {
  flex: 0 0 auto; margin-left: auto; padding-left: var(--e3);
  text-align: right;
}
.evm-vitais-pe small { display: block; font-size: 11.5px; color: var(--texto-fraco); }
.evm-vitais-pe a { font-size: 13px; font-weight: 500; }

/* ------------------------------------------------------- formulário */

.evm-form { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; }
.evm-bloco { padding: var(--e4); border-bottom: 1px solid var(--borda); }
.evm-bloco:last-of-type { border-bottom: none; }
.evm-bloco h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 3px; font-size: 15.5px; letter-spacing: -.01em;
}
.evm-ajuda { margin: 0 0 12px; font-size: 13px; color: var(--texto-fraco); }

.evm-bloco textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font: inherit; font-size: 14px; line-height: 1.5;
  resize: vertical;
}
.evm-bloco textarea:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-bg);
}
.evm-contador {
  display: block; margin-top: 5px;
  text-align: right; font-size: 11.5px; color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}
.evm-contador.perto { color: #a8720c; }

/* ---------------------------------------------------- exames recentes */

.evm-exames {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--e3);
}
.evm-exame {
  padding: var(--e3);
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie);
}
.evm-exame-nome { display: block; font-size: 12.5px; color: var(--texto-fraco); }
.evm-exame strong {
  display: block; margin: 4px 0;
  font-size: 20px; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.evm-exame strong small {
  font-size: 12px; font-weight: 400; color: var(--texto-fraco);
  letter-spacing: 0;
}
.evm-exame > small { font-size: 11.5px; color: var(--texto-fraco); }

.evm-exame-todos {
  display: flex; flex-direction: column; justify-content: center;
  border-style: dashed; text-decoration: none;
  background: var(--superficie-2);
}
.evm-exame-todos strong { font-size: 13.5px; color: var(--acento); letter-spacing: 0; }
.evm-exame-todos:hover { border-color: var(--acento); }

.evm-rodape {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); padding: var(--e4);
  border-top: 1px solid var(--borda);
}

/* ---------------------------------------------------------- lateral */

.evm-lateral { position: sticky; top: var(--e3); }

.evm-caixa {
  padding: var(--e3) var(--e4) var(--e4);
  margin-bottom: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
}
.evm-caixa h2 { margin: 0 0 var(--e2); font-size: 14.5px; letter-spacing: -.01em; }
.evm-caixa-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.evm-caixa-topo a { font-size: 12.5px; font-weight: 500; }

.evm-acao {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
  text-decoration: none; color: inherit;
  font-size: 13.5px;
}
.evm-acao:last-child { border-bottom: none; }
.evm-acao:hover { color: var(--acento); }
.evm-acao small { margin-left: auto; color: var(--texto-fraco); font-size: 12px; }
.evm-acao span[aria-hidden] { margin-left: auto; color: #a9b3b7; }
.evm-acao small + span[aria-hidden] { margin-left: 6px; }

.evm-presc {
  display: block;
  margin: 10px 0 0;
  padding: var(--e3);
  border: 1px solid #bfe0cd;
  border-radius: 8px;
  background: #f0f8f3;
  font-size: 13px;
}
.evm-presc strong { display: block; color: #1c6b3f; }
.evm-presc span { color: var(--texto-fraco); }
.evm-presc-vencida { border-color: #e6c9c6; background: #fdf4f3; }
.evm-presc-vencida strong { color: #b3261e; }
.evm-presc-nao { border-color: var(--borda); background: var(--superficie-2); }

.evm-dica {
  padding: var(--e3) var(--e4);
  border-radius: 10px;
  background: var(--acento-bg);
  font-size: 12.5px;
  color: var(--texto-fraco);
  line-height: 1.5;
}
.evm-dica strong { display: block; color: var(--acento); margin-bottom: 3px; font-size: 13px; }

/* Abaixo de 1080px a lateral desce para baixo do formulário. Ela é
   consulta, não navegação: empurrada para o rodapé continua servindo,
   espremida em 200px deixa de ser legível. */
@media (max-width: 1080px) {
  .evm-layout { grid-template-columns: 1fr; }
  .evm-lateral { position: static; }
  .evm-vitais-rot { flex-basis: 100%; margin-bottom: 8px; }
  .evm-vital:first-of-type { border-left: none; padding-left: 0; }
  .evm-vitais-pe { margin-left: 0; flex-basis: 100%; text-align: left;
                   padding: 8px 0 0; }
}

/* ------------------------------------- evolução: salvo, rascunho, painéis */

/* Campos limpos depois de salvar parecem trabalho perdido. Esta faixa
   é a resposta: difícil de não ver, diz a hora e fica até o médico
   decidir o que fazer. */
.evm-salvo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap;
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e4);
  border: 1px solid #bfe0cd;
  border-left: 4px solid #2f7d55;
  border-radius: 10px;
  background: #f0f8f3;
}
.evm-salvo:focus { outline: 2px solid #2f7d55; outline-offset: 2px; }
.evm-salvo strong { display: block; color: #1c6b3f; font-size: 15px; }
.evm-salvo p { margin: 2px 0 0; font-size: 12.5px; color: var(--texto-fraco); }

.evm-rascunho {
  margin: 0;
  padding: 10px var(--e4);
  border-bottom: 1px solid var(--borda);
  background: #fdf8ee;
  color: #7a5406;
}

.evm-bloco-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap;
}
.evm-bloco-topo h2 { margin: 0; }

.evm-confirma { max-width: 460px; }
.evm-confirma .modal-corpo p { font-size: 14px; line-height: 1.55; }

/* ------------------------------------------------------ painel de exame */

.painel-grupo {
  margin: var(--e3) 0 8px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-fraco);
}
.painel-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--e3);
}
.painel-campo small {
  display: block; margin-top: 3px;
  font-size: 11.5px; color: var(--texto-fraco);
}

.pedido-linha {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 34px;
  gap: var(--e3);
  align-items: end;
  padding: var(--e3);
  margin-bottom: var(--e2);
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie-2);
}

/* -------------------------------------------- histórico agrupado por dia */

.hist-dia {
  margin-bottom: var(--e3);
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: var(--superficie);
}
.hist-dia > summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: var(--e3) var(--e4);
  cursor: pointer;
  list-style: none;
}
.hist-dia > summary::-webkit-details-marker { display: none; }
.hist-dia[open] > summary { border-bottom: 1px solid var(--borda); }
.hist-dia > summary strong { font-size: 14.5px; }
.hist-turno { font-size: 12px; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }

.hist-marca {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
}
.hist-evolucao_medica     { border-color: var(--acento); color: var(--acento); }
.hist-evolucao_enfermagem { border-color: #2f7d55; color: #2f7d55; }
.hist-prescricao          { border-color: var(--acento); color: var(--acento); }
.hist-medicacao           { border-color: #2f7d55; color: #2f7d55; }

.hist-dia .linha-tempo { padding: var(--e2) var(--e4) var(--e3); }

@media (max-width: 700px) {
  .pedido-linha { grid-template-columns: 1fr; }
  .evm-salvo { flex-direction: column; align-items: stretch; }
}

/* ============================================ tela central do paciente

   Cabeçalho persistente, abas por assunto, conteúdo à esquerda e
   lateral de ação à direita. A separação é entre ler e fazer: o que
   exige leitura fica no corpo, o que exige decisão fica na lateral.
   ---------------------------------------------------------------- */

.pcx-cabecalho {
  display: flex; align-items: flex-start; gap: var(--e4);
  padding: 20px var(--e4);
  margin-bottom: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  flex-wrap: wrap;
}

.pcx-avatar {
  flex: none;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--acento-bg);
  color: var(--acento);
  font-size: 17px; font-weight: 600; letter-spacing: .03em;
}

.pcx-ident { flex: 1 1 340px; min-width: 0; }
.pcx-nome { margin: 0 0 4px; font-size: 14px; }
.pcx-nome strong { font-size: 20px; letter-spacing: -.02em; }
.pcx-nome span { color: var(--texto-fraco); margin-left: 6px; }
.pcx-local { margin: 0 0 9px; font-size: 13px; color: var(--texto-fraco); }

.pcx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pcx-chip {
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  font-size: 12.5px;
  color: var(--texto-fraco);
}
.pcx-chip strong { color: var(--texto); font-weight: 600; }
/* Alergia é o único dado do cabeçalho que muda a conduta antes de
   qualquer outra coisa acontecer. É o único que ganha cor. */
.pcx-chip-alergia {
  background: #fdf4f3; border-color: #e6c9c6; color: #b3261e;
}
.pcx-chip-alergia strong { color: #b3261e; }

/* Três marcos, não estatística: dizem se o paciente foi visto hoje, se
   a folha está válida e se o exame já voltou. */
.pcx-marcos {
  display: flex; gap: 0; flex: 0 1 auto;
  border-left: 1px solid var(--borda);
}
.pcx-marcos > div { padding: 0 var(--e4); border-right: 1px solid var(--borda); }
.pcx-marcos > div:last-child { border-right: none; }
.pcx-marcos span { display: block; font-size: 11.5px; color: var(--texto-fraco); }
.pcx-marcos strong {
  display: block; margin-top: 3px;
  font-size: 15px; font-variant-numeric: tabular-nums;
}
.pcx-alerta { color: #b3261e; }

.pcx-abas { margin-bottom: var(--e4); }

.pcx-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: var(--e4);
  align-items: start;
}
.pcx-principal { min-width: 0; }

.pcx-bloco {
  padding: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
}
.pcx-bloco h1 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.01em; }
.pcx-bloco h2 { margin: var(--e4) 0 var(--e2); font-size: 15px; }

/* ------------------------------------------------- navegação por dia */

.pcx-dias {
  display: flex; align-items: stretch; gap: 8px;
  margin: var(--e4) 0 var(--e3);
  flex-wrap: wrap;
}
.pcx-seta, .pcx-hoje {
  display: grid; place-items: center;
  min-width: 40px; padding: 0 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--texto-fraco);
  text-decoration: none;
  font-size: 16px;
}
.pcx-seta.desligado { opacity: .35; pointer-events: none; }
.pcx-hoje { font-size: 13.5px; font-weight: 500; color: var(--acento); }
.pcx-hoje:hover, .pcx-seta:hover { border-color: var(--acento); color: var(--acento); }

.pcx-dias-lista { display: flex; gap: 8px; flex: 1 1 auto; flex-wrap: wrap; }
.pcx-dia {
  flex: 1 1 88px;
  padding: 9px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie);
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.pcx-dia strong { display: block; font-size: 13px; }
.pcx-dia small { display: block; font-size: 11.5px; color: var(--texto-fraco); }
.pcx-dia.ativo {
  border-color: var(--acento);
  background: var(--acento-bg);
  box-shadow: inset 0 0 0 1px var(--acento);
}
.pcx-dia.ativo strong { color: var(--acento); }

.pcx-resumo-dia {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e4);
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--superficie-2);
}
.pcx-resumo-titulo { flex: 1 1 220px; }
.pcx-resumo-titulo strong { display: block; font-size: 15px; }
.pcx-resumo-titulo small { font-size: 12px; color: var(--texto-fraco); }

.pcx-conta {
  padding: 8px 14px;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie);
  text-align: center;
}
.pcx-conta strong {
  display: block; font-size: 18px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.pcx-conta span { font-size: 11.5px; color: var(--texto-fraco); }

/* --------------------------------------------------- linha do tempo */

.pcx-tempo { list-style: none; margin: 0; padding: 0; }

.pcx-ev {
  display: grid;
  grid-template-columns: 54px 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--borda);
}
.pcx-ev:last-child { border-bottom: none; }

.pcx-ev-hora {
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--texto-fraco);
  padding-top: 2px;
}

/* Bolinha e fio ligando os eventos. Cor por categoria: numa lista
   longa é o que permite achar "a prescrição de ontem" na diagonal,
   sem ler. */
.pcx-ev-marca {
  position: relative;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: var(--superficie);
}
.pcx-ev-marca::after {
  content: '';
  position: absolute;
  left: 50%; top: 100%;
  width: 2px; height: calc(100% + var(--e3) * 2);
  transform: translateX(-50%);
  background: var(--borda);
}
.pcx-ev:last-child .pcx-ev-marca::after { display: none; }

.pcx-ev-corpo strong { display: block; font-size: 14px; margin-top: 2px; }
.pcx-ev-corpo p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; }
.pcx-ev-corpo small { display: block; margin-top: 5px; font-size: 12px; color: var(--texto-fraco); }

.pcx-ev-tipo {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em;
  color: currentColor;
}

.pcx-ev-selo {
  padding: 4px 11px;
  border-radius: 999px;
  background: #f0f8f3;
  border: 1px solid #bfe0cd;
  color: #1c6b3f;
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
}

/* A cor mora no item e é herdada pela bolinha e pelo rótulo, para não
   repetir seis seletores por categoria. */
.pcx-ev.lt-evolucao_medica     { color: var(--acento); }
.pcx-ev.lt-evolucao_enfermagem { color: #2f7d55; }
.pcx-ev.lt-anotacao            { color: #c07d1a; }
.pcx-ev.lt-prescricao          { color: #7a5cc4; }
.pcx-ev.lt-medicacao           { color: #2f7d55; }
.pcx-ev.lt-exame               { color: #1f8a9c; }
.pcx-ev.lt-vitais              { color: #7a5cc4; }
.pcx-ev.lt-balanco             { color: #1f8a9c; }
.pcx-ev.lt-escala              { color: #c07d1a; }
.pcx-ev.lt-procedimento        { color: #55636a; }
.pcx-ev.lt-admissao            { color: #55636a; }
.pcx-ev-corpo strong,
.pcx-ev-corpo p { color: var(--texto); }

.pcx-conta.lt-evolucao_medica { border-left-color: var(--acento); }
.pcx-conta.lt-prescricao      { border-left-color: #7a5cc4; }
.pcx-conta.lt-exame           { border-left-color: #1f8a9c; }
.pcx-conta.lt-anotacao        { border-left-color: #c07d1a; }

/* ------------------------------------------------------------ lateral */

.pcx-lateral { position: sticky; top: var(--e3); }

.pcx-alerta {
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e3);
  border: 1px solid #e6c9c6;
  border-left: 4px solid #b3261e;
  border-radius: 10px;
  background: #fdf4f3;
}
.pcx-alerta strong { display: block; color: #b3261e; font-size: 14px; letter-spacing: .01em; }
.pcx-alerta p { margin: 4px 0 0; font-size: 13px; color: #7d3b36; line-height: 1.45; }
.pcx-alerta-atencao { border-color: #ecd9ad; border-left-color: #d99b1c; background: #fdf8ee; }
.pcx-alerta-atencao strong { color: #a8720c; }
.pcx-alerta-atencao p { color: #6b5a38; }

.pcx-filtro {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 7px;
  text-decoration: none;
  color: inherit;
  font-size: 13.5px;
}
.pcx-filtro:hover { background: var(--superficie-2); }
.pcx-filtro.ativo { background: var(--acento-bg); color: var(--acento); font-weight: 500; }
.pcx-filtro em {
  font-style: normal; font-size: 12.5px;
  color: var(--texto-fraco); font-variant-numeric: tabular-nums;
}
.pcx-filtro.ativo em { color: var(--acento); }

/* -------------------------------------------------------- exames */

.pcx-exames {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--e2);
  margin-top: 10px;
}
.pcx-exame {
  padding: 9px 11px;
  border: 1px solid var(--borda);
  border-radius: 7px;
  background: var(--superficie);
}
.pcx-exame > span { display: block; font-size: 12px; color: var(--texto-fraco); }
.pcx-exame strong {
  display: block; margin: 2px 0;
  font-size: 17px; font-variant-numeric: tabular-nums;
}
.pcx-exame strong small { font-size: 11.5px; font-weight: 400; color: var(--texto-fraco); }
.pcx-exame > small { font-size: 11px; color: var(--texto-fraco); }

@media (max-width: 1080px) {
  .pcx-layout { grid-template-columns: 1fr; }
  .pcx-lateral { position: static; }
  .pcx-marcos { flex-basis: 100%; border-left: none; padding-top: var(--e3); }
  .pcx-marcos > div:first-child { padding-left: 0; }
}
@media (max-width: 700px) {
  .pcx-ev { grid-template-columns: 46px 22px minmax(0, 1fr); }
  .pcx-ev-selo { grid-column: 3; justify-self: start; margin-top: 6px; }
  .pcx-marcos { flex-wrap: wrap; gap: var(--e3); }
  .pcx-marcos > div { padding: 0; border-right: none; flex: 1 1 100px; }
}

/* Telas de duas colunas. O padrão de 980px é largura de leitura — boa
   para texto corrido, apertada quando há conteúdo e lateral lado a
   lado: a lateral come 310px e o centro fica com 640px de coluna
   comprimida. */
.conteudo-largo { max-width: 1440px; }

/* ------------------------------------------- ícones na linha do tempo */

.pcx-ev-marca {
  display: grid; place-items: center;
  color: currentColor;
}
.pcx-ev-marca .ic { width: 13px; height: 13px; }

/* O corpo inteiro é o alvo do clique. Bloco, não inline: um link em
   volta de três linhas quebraria a caixa de foco em pedaços. */
a.pcx-ev-corpo {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  padding: 4px 8px;
  margin: -4px -8px;
}
a.pcx-ev-corpo:hover { background: var(--superficie-2); }
a.pcx-ev-corpo:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

.pcx-ev-fim {
  display: flex; align-items: center; gap: 8px;
  padding-top: 2px;
}
.pcx-ev-seta { color: #b3bcc0; display: grid; place-items: center; }
.pcx-ev:hover .pcx-ev-seta { color: var(--acento); }

.pcx-resumo-icone {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 9px;
  background: var(--acento-bg);
  color: var(--acento);
  flex: none;
}

/* ------------------------------------------------- ícones nos filtros */

.pcx-filtro .ic { flex: none; color: var(--texto-fraco); }
.pcx-filtro span { flex: 1; }
.pcx-filtro.ativo .ic { color: var(--acento); }

/* Cada categoria com a própria cor no ícone: é o mesmo código visual
   da linha do tempo, então o filtro e o evento se reconhecem. */
.pcx-f-evolucao_medica     .ic { color: var(--acento); }
.pcx-f-evolucao_enfermagem .ic { color: #2f7d55; }
.pcx-f-anotacao            .ic { color: #c07d1a; }
.pcx-f-prescricao          .ic { color: #7a5cc4; }
.pcx-f-medicacao           .ic { color: #2f7d55; }
.pcx-f-exame               .ic { color: #1f8a9c; }
.pcx-f-vitais              .ic { color: #7a5cc4; }
.pcx-f-balanco             .ic { color: #1f8a9c; }
.pcx-f-escala              .ic { color: #c07d1a; }
.pcx-f-procedimento        .ic { color: #55636a; }
.pcx-f-admissao            .ic { color: #55636a; }

.evm-caixa h2 { display: flex; align-items: center; gap: 7px; }
.evm-caixa h2 .ic { color: var(--texto-fraco); }
.evm-acao .ic { flex: none; color: var(--texto-fraco); }
.evm-acao:hover .ic { color: var(--acento); }

/* --------------------------------------- barra de ações do paciente

   Fora das abas, de propósito. Ação escondida numa aba é ação que só
   quem já sabe onde fica consegue executar — e criar evolução e
   imprimir a placa são as duas coisas mais feitas nesta tela.
   ------------------------------------------------------------------ */

.pcx-acoes {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  margin-bottom: var(--e3);
}
.pcx-acoes .btn-principal,
.pcx-acoes .btn-secundario {
  display: inline-flex; align-items: center; gap: 7px;
}
.pcx-acoes .ic { flex: none; }

/* ----------------------------------------------------------- escalas */

.pcx-escalas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--e2);
  margin-bottom: var(--e4);
}

.pcx-escala {
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--e3);
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: var(--superficie);
}
/* Escala nunca aplicada aparece esmaecida, não some: listar só as
   aplicadas esconde justamente a que falta aplicar. */
.pcx-escala.vazia { background: var(--superficie-2); border-style: dashed; }

.pcx-escala-nome { font-size: 12.5px; color: var(--texto-fraco); }
.pcx-escala strong {
  font-size: 24px; line-height: 1.1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.pcx-escala strong small {
  font-size: 11.5px; font-weight: 400; color: var(--texto-fraco); letter-spacing: 0;
}
.pcx-escala-faixa {
  align-self: flex-start;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  font-size: 11.5px; font-weight: 600;
  color: var(--texto-fraco);
}
/* Faixa que gerou marcador é a que muda o cuidado. Só ela ganha cor. */
.pcx-escala-faixa.alerta { background: #fdf8ee; border-color: #ecd9ad; color: #a8720c; }
.pcx-escala-quando { font-size: 11px; color: var(--texto-fraco); }
.pcx-escala-nunca { font-size: 13px; color: var(--texto-fraco); padding: 6px 0; }

.pcx-escala-acao {
  margin-top: auto; padding-top: 8px;
  font-size: 12.5px; font-weight: 500;
}

.pcx-chip small { color: var(--texto-fraco); font-size: 11px; margin-left: 4px; }
.pcx-chip-escala { background: #fdf8ee; border-color: #ecd9ad; color: #7a5406; }
.pcx-chip-escala strong { color: #7a5406; }

/* ------------------------------------------- menu de três pontos

   <details> em vez de JavaScript: o navegador já fecha ao clicar fora
   e já responde ao teclado. Menu feito à mão costuma esquecer os dois.
   ------------------------------------------------------------------ */

.menu-pontos { position: relative; margin-left: auto; }

.menu-pontos > summary {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--texto-fraco);
  cursor: pointer;
  list-style: none;
}
.menu-pontos > summary::-webkit-details-marker { display: none; }
.menu-pontos > summary:hover,
.menu-pontos[open] > summary {
  border-color: var(--borda);
  background: var(--superficie-2);
  color: var(--acento);
}

.menu-pontos-lista {
  position: absolute;
  right: 0; top: calc(100% + 4px);
  z-index: 40;
  min-width: 232px;
  padding: 5px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: var(--superficie);
  box-shadow: 0 6px 20px rgba(20, 35, 45, .13);
}
.menu-pontos-lista a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  text-decoration: none;
  color: inherit;
}
.menu-pontos-lista a:hover { background: var(--superficie-2); color: var(--acento); }
.menu-pontos-lista .ic { flex: none; color: var(--texto-fraco); }
.menu-pontos-lista a:hover .ic { color: var(--acento); }

/* Liberar leito encerra o atendimento. Separada por um traço e em
   vermelho no hover: é a única ação do menu que não tem volta. */
.menu-pontos-saida {
  border-top: 1px solid var(--borda);
  margin-top: 4px; padding-top: 10px !important;
  border-radius: 0 0 6px 6px !important;
}
.menu-pontos-saida:hover { color: #b3261e !important; background: #fdf4f3 !important; }
.menu-pontos-saida:hover .ic { color: #b3261e !important; }

/* O cartão do leito precisa deixar o menu escapar da caixa. */
.leito { overflow: visible; }
.leito-acoes { position: relative; }

.leito-saida { color: #1c6b3f; border-color: #bfe0cd; background: #f0f8f3; }

.pcx-alerta-saida {
  border-color: #bfe0cd; border-left-color: #2f7d55; background: #f0f8f3;
}
.pcx-alerta-saida strong { color: #1c6b3f; }
.pcx-alerta-saida p { color: #2f5c45; }
.pcx-alerta-saida a { color: #1c6b3f; font-weight: 500; }

/* ------------------------------------------- motivos de saída do leito

   Cartões e não lista suspensa: o motivo é a informação mais
   consequente da tela, e cada um tem um aviso próprio sobre o que
   precisa ser escrito. Numa lista suspensa o aviso só apareceria
   depois de escolher.
   ------------------------------------------------------------------ */

.saida-opcoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--e2);
}

.saida-opcao {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie);
  cursor: pointer;
}
.saida-opcao input { margin-top: 3px; flex: none; }
.saida-opcao strong { display: block; font-size: 13.5px; }
.saida-opcao em {
  display: block; margin-top: 2px;
  font-style: normal; font-size: 11.5px;
  color: #1c6b3f;
}
/* Sem registro médico não é erro — é pendência. Âmbar, não vermelho:
   vermelho diria "não faça", e a intenção é o contrário. */
.saida-opcao.sem-respaldo em { color: #a8720c; }
.saida-opcao:has(input:checked) {
  border-color: var(--acento);
  background: var(--acento-bg);
  box-shadow: inset 0 0 0 1px var(--acento);
}
.saida-opcao.sem-respaldo:has(input:checked) {
  border-color: #d99b1c; background: #fdf8ee;
  box-shadow: inset 0 0 0 1px #d99b1c;
}

/* ------------------------------- ação principal dentro da lateral

   Nova evolução é a ação mais frequente da tela. Concentrar tudo na
   lateral tirou o ruído do corpo; o preço seria a ação principal virar
   mais um item de lista. Ela volta a se distinguir aqui, sem precisar
   existir em dois lugares.
   ------------------------------------------------------------------ */

.evm-destaque {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 11px 14px;
  margin-bottom: var(--e2);
  border-radius: 8px;
  background: var(--acento);
  color: #fff;
  font-size: 14px; font-weight: 500;
  text-decoration: none;
}
.evm-destaque:hover { filter: brightness(1.08); color: #fff; }
.evm-destaque .ic { color: #fff; flex: none; }
.evm-destaque + .evm-acao { border-top: none; }

/* Abaixo de 1080px a lateral desce para o fim da página, e a ação
   principal ficaria no rodapé de uma linha do tempo longa — exatamente
   onde o médico não vai procurar durante a visita. Subindo a coluna,
   o alerta de prescrição vencida e as ações aparecem antes do
   conteúdo, que é a ordem certa numa tela estreita de qualquer forma. */
@media (max-width: 1080px) {
  .pcx-lateral   { order: -1; }
  .pcx-principal { order: 1; }
}
/* Pré-visualização do logo em gestao/instituicao.php. A regra mora aqui
   porque a CSP não aceita style inline: atributo style é bloqueado do
   mesmo jeito que <style> quando style-src não traz unsafe-inline. */
.logo-atual { margin: var(--e4) 0; }
.logo-atual img {
    max-height: 80px;
    max-width: 240px;
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 6px;
    background: #fff;
}

/* Bloco de pendência que exige ação da enfermagem, na visão geral do
   internamento. Borda âmbar à esquerda, como o .int-aviso, para ler
   como pendência sem usar cor de risco: cor saturada nesta tela é
   vocabulário de classificação, e um bloco vermelho aqui seria lido
   como gravidade do paciente, não como fila parada. */
.int-bloco-pendente {
    border-left: 4px solid #d99b1c;
    background: #fdfaf3;
}
.int-bloco-pendente h2 { color: #7a5406; }

/* Atalho para repetir o ciclo anterior, no topo da prescrição. Não usa
   .barra-acoes de propósito: aquela é sticky no rodapé e é a barra de
   salvar. Duas barras grudadas na tela competiriam pela mesma leitura
   de "a ação principal é esta". */
.presc-repetir {
    display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap;
    margin: var(--e3) 0 var(--e4);
}
.presc-repetir .nota-mini { margin: 0; flex: 1 1 240px; }

/* Confirmação depois de salvar a prescrição.
   <dialog open> não é modal — só dialog.showModal() é, e isso exige
   JavaScript, que a CSP não deixa rodar inline. O escurecido vem
   daqui e a barreira é de atenção, não técnica: é o suficiente para
   que ninguém saia da tela sem ter visto que salvou. */
.presc-confirma-fundo {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(16, 28, 34, .45);
}
.presc-confirma {
    /* inset:auto e margin:0 antes de tudo. O navegador aplica ao
       <dialog> um margin:auto com inset-inline 0, e é ele que puxava a
       caixa para fora do centro: o auto disputava a posição com o
       translate e ganhava na horizontal. */
    position: fixed; z-index: 91;
    inset: auto; margin: 0;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(460px, calc(100vw - 32px));
    max-height: calc(100vh - 48px); overflow-y: auto;
    padding: var(--e5) var(--e5) var(--e4);
    border: 1px solid var(--borda); border-radius: 14px;
    background: var(--superficie); box-shadow: var(--sombra-md);
    text-align: center;
}
.presc-confirma h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.01em; }
.presc-confirma p  { margin: 0 0 var(--e3); font-size: 14px; color: var(--texto-medio); }
.presc-confirma-ok { color: var(--risco-verde); margin: 0 0 var(--e2); }
.presc-confirma-prazo {
    display: flex; gap: 8px; align-items: flex-start; text-align: left;
    padding: var(--e3); margin-bottom: var(--e4);
    border: 1px solid #e8d5a8; border-left: 4px solid #d99b1c;
    border-radius: 8px; background: #fdf8ee; color: #6b5a38;
}
.presc-confirma-acoes {
    display: flex; gap: var(--e2); justify-content: center; flex-wrap: wrap;
    margin-bottom: var(--e2);
}

/* Atalhos do topo da prescrição: ícone + rótulo curto, no cabeçalho.
   align-self: flex-end alinha o botão com a base do campo de data, e
   não com o topo do rótulo dele — é o que faz os dois lerem como uma
   linha só de controles. */
.presc-atalhos {
    display: flex; gap: var(--e2); flex-wrap: wrap;
    align-self: flex-end; margin: 0;
}
.presc-atalhos .btn-secundario {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}

/* O título ocupa a sobra para que campo de data e atalhos fiquem
   juntos à direita. Sem isto o space-between abre um vão entre os
   dois, e o botão parece solto no meio do cabeçalho. */
.presc-cabecalho > div:first-child { flex: 1 1 240px; }

@media (max-width: 720px) {
    .presc-atalhos { width: 100%; }
    .presc-atalhos .btn-secundario { flex: 1 1 auto; justify-content: center; }
}

/* Contagem do que está no horário agora, no botão de medicação do
   turno. Neutro de propósito: cor saturada nesta tela é vocabulário
   de classificação de risco, e um selo vermelho aqui seria lido como
   gravidade do paciente e não como fila do turno. */
.selo-agora {
    display: inline-block; margin-left: 7px; padding: 1px 7px;
    border-radius: 999px; font-size: 12px; font-weight: 600;
    background: rgba(255, 255, 255, .22);
}

/* Marca de prioridade legal: símbolo colado ao rótulo. Herda a cor do
   texto de propósito — prioridade não atravessa a cor de risco, e um
   ícone colorido aqui contaria uma mentira sobre a ordem da fila. */
.marca-prioridade { display: inline-flex; align-items: center; gap: 5px; }
.marca-prioridade .ic { flex: none; opacity: .85; }

/* ============================================================
   OBSERVAÇÃO — lista larga com resumo lateral

   A linha é uma tabela que abre. Fechada, cabe o plantão inteiro
   numa tela e o olho varre coluna por coluna; aberta, traz os
   sinais vitais e os formulários sem tirar ninguém da lista.

   Cor continua sendo só do risco: o selo da classificação é a
   única superfície pintada aqui. Alerta de tempo usa o âmbar de
   estado do sistema, que já é vocabulário conhecido no resto do
   produto, e nunca as quatro cores do protocolo.
   ============================================================ */

.conteudo.secao-observacao { max-width: 1340px; }

.tela-obs {
  display: grid; grid-template-columns: 1fr 300px;
  gap: var(--e4); align-items: start;
}
.obs-principal { min-width: 0; }

.obs-tabela {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}

/* Uma grade só, repetida no cabeçalho e em cada linha, para as
   colunas não escorregarem entre uma linha e outra. */
.obs-cabecalho, .obs-topo {
  display: grid;
  grid-template-columns:
    46px minmax(190px, 1.6fr) 92px 116px 104px 132px minmax(150px, 1.1fr) 30px;
  gap: var(--e3);
  align-items: center;
}

.obs-cabecalho {
  padding: var(--e2) var(--e4);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
  font-size: 10.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--texto-fraco);
}

/* -------------------------------------------------- a linha */

.obs-linha { border-bottom: 1px solid var(--borda); }
.obs-linha:last-child { border-bottom: none; }

.obs-topo {
  padding: var(--e3) var(--e4);
  cursor: pointer;
  list-style: none;
  transition: background var(--transicao);
}
.obs-topo::-webkit-details-marker { display: none; }
.obs-topo:hover { background: var(--superficie-2); }
.obs-linha[open] > .obs-topo {
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
}

/* Faixa âmbar à esquerda. Fina e só na borda: diz "olha esta"
   sem competir com o selo de classificação ao lado. */
.obs-linha.em-alerta > .obs-topo { box-shadow: inset 3px 0 0 var(--atencao); }

.obs-topo .selo-cor {
  min-width: 46px; padding: var(--e2) 4px;
  align-self: center; border-radius: var(--raio-s);
  font-size: 11px;
}

.obs-paciente { min-width: 0; }
.obs-paciente strong {
  display: block; font-size: 15.5px; font-weight: 650;
  overflow-wrap: break-word;
}
.obs-paciente small {
  display: block; margin-top: 1px;
  font-size: 13px; color: var(--texto-fraco);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.obs-celula { min-width: 0; }
.obs-celula small {
  display: block; margin-top: 1px;
  font-size: 11.5px; color: var(--texto-fraco);
}

.obs-dado {
  display: block;
  font-family: var(--dado-fonte); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 600;
}

.obs-local {
  display: inline-block; max-width: 100%;
  padding: 3px 9px;
  font-size: 12.5px; font-weight: 600;
  background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: var(--raio-s);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.obs-vazio { font-size: 12.5px; color: var(--texto-fraco); }

/* O cronômetro é o dado que se MEDE — mono e tabular, como o
   resto dos números do produto. */
.obs-tempo {
  display: block;
  font-family: var(--dado-fonte); font-variant-numeric: tabular-nums;
  font-size: 19px; font-weight: 700; line-height: 1.15;
}
.obs-tempo small {
  margin-left: 3px;
  font-size: 12px; font-weight: 500; color: var(--texto-fraco);
}
.obs-tempo.excedido { color: var(--erro); font-weight: 800; }
.obs-tempo.excedido small { color: var(--erro); }

.obs-situacao { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.obs-situacao .chip-alerta {
  padding: 4px 9px; font-size: 11.5px; border-radius: var(--raio-s);
}
/* A situação principal da linha — observação ou estabilização — vem
   com contorno firme; os alertas de tempo vêm em âmbar ao lado. */
.obs-situacao .chip-alerta.forte-neutra {
  color: var(--texto); border-color: var(--texto-medio); font-weight: 700;
}

.obs-abrir {
  display: flex; justify-content: center;
  color: var(--texto-fraco);
  transition: transform var(--transicao), color var(--transicao);
}
.obs-topo:hover .obs-abrir { color: var(--texto-medio); }
.obs-linha[open] .obs-abrir { transform: rotate(180deg); }

/* --------------------------------------------- corpo aberto */

.obs-corpo { padding: var(--e4); }

.obs-origem {
  margin: 0 0 var(--e3);
  font-size: 13px; color: var(--texto-fraco);
}
.obs-origem .sep { color: var(--borda-forte); }

.obs-vitais {
  padding: var(--e3);
  margin-bottom: var(--e4);
  background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: var(--raio-s);
}
.obs-vitais-grade {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5);
  margin-top: var(--e2);
}

/* ---- tabela de afericoes da observacao ----
   Mesma tabela da tela de internacao, so mais compacta: aqui ela
   mora dentro de uma linha que abre, e nao ocupa a tela inteira. */
.obs-vitais .tabela-rolagem { margin: var(--e2) 0 0; }
.obs-serie { background: var(--superficie); font-size: 13px; }
.obs-serie th, .obs-serie td { padding: 7px var(--e2); }
.obs-serie th {
  font-size: 10.5px; letter-spacing: 0.06em; white-space: nowrap;
}
.obs-serie td { white-space: nowrap; }

/* A linha mais recente e a que decide conduta: fica em negrito, sem
   cor. As antigas continuam legiveis — sao o registro, nao rascunho. */
.obs-serie tr.obs-serie-atual td { font-weight: 700; }
.obs-serie tr.obs-serie-atual td:first-child { box-shadow: inset 2px 0 0 var(--texto); }

/* Fora da faixa de referencia por idade. Ambar de estado do sistema,
   nunca as cores do protocolo de risco. */
.obs-serie td.n.fora { color: var(--atencao); font-weight: 800; }

.obs-form-vitais { margin-bottom: var(--e4); }
.obs-campos {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  margin-top: 6px;
}
.obs-campos input { width: 92px; min-height: 38px; padding: 7px 10px; font-size: 14px; }
.obs-campos button { min-height: 38px; padding: 7px 15px; font-size: 13.5px; }

.obs-form-evolucao { max-width: 640px; margin-bottom: var(--e4); }
.obs-form-evolucao .campo { margin-bottom: var(--e2); }
.obs-form-evolucao select { width: auto; min-width: 220px; }

/* ---- evolucoes dentro da linha aberta ----
   Reaproveita o componente .evo da tela do paciente sem alterar nada
   dele: quem le prontuario nas duas telas nao deve reconhecer dois
   desenhos para o mesmo registro. So o espacamento muda, porque aqui
   ele mora dentro de uma linha e nao numa pagina inteira. */
.obs-evolucoes { margin-bottom: var(--e4); }
.obs-evolucoes .evo { margin-top: var(--e2); }
.obs-evolucoes .evo-corpo { font-size: 13.5px; }

.obs-acoes {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e3);
  padding-top: var(--e3); border-top: 1px solid var(--borda);
}
.obs-acoes .btn-secundario { min-height: 38px; padding: 8px 15px; font-size: 13.5px; }
.obs-acoes .nota-mini { margin: 0; }

.obs-prorrogar > summary {
  padding: 9px 15px;
  font-size: 13.5px; color: var(--texto-medio); cursor: pointer;
  list-style: none;
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio-s);
}
.obs-prorrogar > summary::-webkit-details-marker { display: none; }
.obs-prorrogar > summary:hover { border-color: var(--borda-forte); color: var(--texto); }
.obs-prorrogar form {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  margin-top: var(--e2);
}
.obs-prorrogar select { width: auto; min-height: 38px; }
.obs-prorrogar input  { min-width: 210px; min-height: 38px; }
.obs-prorrogar button { min-height: 38px; padding: 8px 15px; font-size: 13.5px; }

/* Evasao usa o mesmo desenho do prorrogar: as duas sao acoes que
   mudam o rumo do atendimento e por isso ficam atras de um clique,
   nunca soltas onde a mao passa. Sem cor de alerta — evasao e um
   fato registrado, nao um erro. */
.obs-evasao > summary {
  padding: 9px 15px;
  font-size: 13.5px; color: var(--texto-medio); cursor: pointer;
  list-style: none;
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio-s);
}
.obs-evasao > summary::-webkit-details-marker { display: none; }
.obs-evasao > summary:hover { border-color: var(--borda-forte); color: var(--texto); }
.obs-evasao form { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e2); }
.obs-evasao select { width: auto; min-height: 38px; }
.obs-evasao button { min-height: 38px; padding: 8px 15px; font-size: 13.5px; }
.obs-evasao .nota-mini { flex: 1 1 100%; margin: 0; }

/* ---------------------------------------------- lateral */

.obs-numerao {
  margin: 0;
  font-family: var(--dado-fonte); font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 700; line-height: 1.1;
}
.obs-numerao.alerta { color: var(--atencao); }

/* ---------------------------------------------- respiro */

@media (max-width: 1180px) {
  .obs-cabecalho, .obs-topo {
    grid-template-columns: 46px minmax(170px, 1.6fr) 92px 104px 124px minmax(140px, 1fr) 30px;
  }
  /* Idade/sexo sai antes do resto: é o que menos muda conduta. */
  .obs-cabecalho > span:nth-child(4), .obs-topo > .obs-celula:nth-of-type(2) { display: none; }
}

@media (max-width: 900px) {
  .tela-obs { grid-template-columns: 1fr; }
  .fila-lateral { position: static; }
}

/* No celular a linha para de ser tabela. Coluna que vira faixa
   de 40px não se lê — vira cartão, com rótulo antes do dado. */
@media (max-width: 700px) {
  .obs-cabecalho { display: none; }
  .obs-topo {
    grid-template-columns: 46px 1fr 30px;
    grid-template-areas:
      "selo paciente abrir"
      "selo dados    abrir"
      "sit  sit      sit";
    gap: var(--e2) var(--e3);
    align-items: start;
  }
  .obs-topo .selo-cor  { grid-area: selo; }
  .obs-paciente        { grid-area: paciente; }
  .obs-abrir           { grid-area: abrir; }
  .obs-situacao        { grid-area: sit; }
  .obs-topo > .obs-celula { display: none; }
  .obs-topo > .obs-celula:nth-of-type(4) {
    display: flex; grid-area: dados; align-items: baseline; gap: var(--e2);
  }
  .obs-topo > .obs-celula:nth-of-type(4) small { margin-top: 0; }
  .obs-campos input { flex: 1 1 84px; width: auto; }
}