/* Painel da recepção — Vida Card
   Mesma stack do BI (disparo-whu): Bootstrap 5.3.8 vendorizado, numa camada abaixo deste
   arquivo, e o design system Vida Card por cima (tokens de bi/theme.py e bi/web/estilo.css):
   verde-água da marca, neutros de preto com opacidade, raio de 4px, sem sombra, sem caixa alta
   com espaçamento, e cor com significado: verde ok, laranja atenção, vermelho só cancelado.
   Toda regra deste arquivo vence a do Bootstrap, seja qual for a especificidade. */

@layer bootstrap;
@import url("/painel/estatico/vendor/bootstrap-5.3.8.min.css") layer(bootstrap);

:root {
  --fundo: #F5F5F5;                     /* off-white do manual */
  --superficie: #FFFFFF;
  --superficie-2: #FAFAFA;
  --texto: #1F1F1F;
  --texto-apoio: rgba(0, 0, 0, .62);
  --texto-suave: rgba(0, 0, 0, .45);
  --borda: rgba(0, 0, 0, .12);
  --borda-leve: rgba(0, 0, 0, .07);
  --marca: #00AA8D;                     /* verde-água: âncora da marca */
  --marca-600: #008F76;                 /* texto branco só daqui para baixo */
  --marca-700: #00745F;                 /* texto verde sobre branco */
  --marca-100: #DAFFF6;
  --marca-fundo: rgba(0, 170, 141, .06);
  --citrico: #AEC130;                   /* só decorativo, nunca texto */
  --atencao: #F0821A;
  --atencao-fundo: rgba(240, 130, 26, .12);
  --atencao-borda: rgba(240, 130, 26, .45);
  --critico: #C0392B;                   /* só cancelado e erro */
  --critico-fundo: rgba(192, 57, 43, .07);
  --critico-borda: rgba(192, 57, 43, .30);
  --nota-fundo: rgba(174, 193, 48, .12);
  --raio: 4px;
  --topo: 64px;
  --fonte: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* ponte para os tokens do Bootstrap: raio, foco e links na cor da marca */
  --bs-font-sans-serif: var(--fonte);
  --bs-body-font-size: 14px;
  --bs-body-line-height: 1.45;
  --bs-body-color: var(--texto);
  --bs-body-bg: var(--fundo);
  --bs-border-color: var(--borda);
  --bs-border-radius: var(--raio);
  --bs-border-radius-sm: var(--raio);
  --bs-primary: var(--marca);
  --bs-primary-rgb: 0, 170, 141;
  --bs-link-color-rgb: 0, 143, 118;
  --bs-link-hover-color-rgb: 0, 116, 95;
  --bs-focus-ring-color: rgba(0, 170, 141, .25);
}

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 14px/1.45 var(--fonte);
  font-feature-settings: "tnum" 1;
}

h1, h2, p, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
/* O Bootstrap está numa camada, e regra fora de camada ganha de qualquer regra de dentro, por
   mais específica que ela seja: um "a" solto pintaria o texto dos botões que são links. O
   :where() deixa o seletor com o peso de um "a" simples, e as classes do painel continuam valendo. */
a:where(:not(.btn)) { color: var(--marca-600); text-decoration: none; }
a:where(:not(.btn)):hover { color: var(--marca-700); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}

.icone {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  flex: none;
}

.numerico { font-variant-numeric: tabular-nums; }
.suave { color: var(--texto-suave); }

/* ---------- Topo ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}
.topo .navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--topo);
  padding: 0 24px;
  flex-wrap: nowrap;
}

/* símbolo da marca ao lado do nome, como no cabeçalho do BI */
.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
}
.marca:hover { text-decoration: none; }
.marca img { display: block; height: 38px; width: auto; }
.marca .texto {
  display: block;
  color: var(--marca-600);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.marca:hover .texto { color: var(--marca-700); }
.marca .texto small {
  display: block;
  margin-top: 1px;
  color: var(--texto-apoio);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
}

.topo-fim {
  display: flex;
  align-items: center;
  gap: 20px;
}

.status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--texto-apoio);
  font-size: 12.5px;
}
/* ponto "ao vivo" do BI: pulsa enquanto a lista está atualizando */
.vivo {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--texto-suave);
  flex: none;
}
.status.ao-vivo .vivo { background: var(--marca); }
.status.ao-vivo .vivo::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--marca);
  border-radius: 50%;
  opacity: 0;
  animation: pulso 2.2s ease-out infinite;
}
.status.sem-conexao { color: var(--texto); }
.status.sem-conexao .vivo { background: var(--atencao); }
@keyframes pulso {
  0% { transform: scale(.5); opacity: .8; }
  70% { transform: scale(1.4); opacity: 0; }
  100% { opacity: 0; }
}

.usuaria {
  color: var(--texto);
  font-weight: 600;
  font-size: 13px;
}
.sair { margin: 0; }

/* ---------- Botões e campos (componentes do Bootstrap nas cores da marca) ---------- */

.btn {
  --bs-btn-padding-y: 7px;
  --bs-btn-padding-x: 14px;
  --bs-btn-font-family: var(--fonte);
  --bs-btn-font-size: 13px;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 1.4;
  --bs-btn-border-radius: var(--raio);
  --bs-btn-focus-shadow-rgb: 0, 170, 141;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-sm {
  --bs-btn-padding-y: 4px;
  --bs-btn-padding-x: 10px;
  --bs-btn-font-size: 12.5px;
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--marca-600);
  --bs-btn-border-color: var(--marca-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--marca-700);
  --bs-btn-hover-border-color: var(--marca-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--marca-700);
  --bs-btn-active-border-color: var(--marca-700);
}
.btn-outline-secondary {
  --bs-btn-color: var(--texto);
  --bs-btn-bg: var(--superficie);
  --bs-btn-border-color: var(--borda);
  --bs-btn-hover-color: var(--marca-700);
  --bs-btn-hover-bg: var(--marca-100);
  --bs-btn-hover-border-color: var(--marca);
  --bs-btn-active-color: var(--marca-700);
  --bs-btn-active-bg: var(--marca-100);
  --bs-btn-active-border-color: var(--marca);
}

.form-control,
.form-select {
  min-height: 36px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background-color: var(--superficie);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:hover,
.form-select:hover { border-color: var(--marca-600); }
.form-control:focus,
.form-select:focus {
  border-color: var(--marca);
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(0, 170, 141, .22);
}
.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23008F76' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  width: auto;
  padding: 6px 32px 6px 12px;
  background-size: 12px 12px;
  background-position: right 11px center;
  cursor: pointer;
}

/* ---------- Página e filtros ---------- */

.pagina {
  padding: 20px 24px 40px;
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.js .sem-js { display: none; }

/* período: btn-group do Bootstrap, com o ativo preenchido, como no BI */
.segmento .btn {
  --bs-btn-padding-y: 7px;
  --bs-btn-padding-x: 14px;
  --bs-btn-font-size: 13px;
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--texto-apoio);
  --bs-btn-bg: var(--superficie);
  --bs-btn-border-color: var(--borda);
  --bs-btn-hover-color: var(--marca-700);
  --bs-btn-hover-bg: var(--marca-100);
  --bs-btn-hover-border-color: var(--marca);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--marca-600);
  --bs-btn-active-border-color: var(--marca-600);
  transition: color .15s, background-color .15s, border-color .15s;
}
.segmento .btn.ativa {
  z-index: 1;
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.busca {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 340px;
}
.busca .icone {
  position: absolute;
  left: 11px;
  color: var(--texto-suave);
  pointer-events: none;
}
.busca .form-control { width: 100%; padding-left: 34px; }

.seletor-unidade .form-select { max-width: 260px; }

/* ---------- Resumo, na primeira linha da tabela ---------- */

.tabela-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 12px 12px 11px;
  border-bottom: 1px solid var(--borda);
}
.resumo { font-size: 15px; }
.resumo strong { font-size: 17px; color: var(--marca-700); }
.resumo-apoio {
  display: flex;
  gap: 20px;
  color: var(--texto-apoio);
  font-size: 13px;
}
.resumo-apoio strong { color: var(--texto); }

/* ---------- Tabelas ---------- */

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

.tabela {
  width: 100%;
  border-collapse: collapse;
}
.tabela th {
  padding: 9px 12px;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
  color: var(--texto-apoio);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.tabela td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--borda-leve);
  vertical-align: top;
}
.tabela tbody tr:last-child td { border-bottom: 0; }

/* Sem rolagem própria: o cabeçalho da lista fica preso sob o topo enquanto a página rola. */
.tabela-caixa-lista { overflow: visible; }
.tabela-lista thead th {
  position: sticky;
  top: var(--topo);
  z-index: 1;
}
.tabela-lista tbody tr.linha { cursor: pointer; }
.tabela-lista tbody tr.linha:hover td,
.tabela-lista tbody tr.linha:focus-within td { background: var(--marca-fundo); }
.tabela-lista tbody tr.linha.selecionada td { background: rgba(0, 170, 141, .11); }
.tabela-lista tbody tr.linha.selecionada td:first-child { box-shadow: inset 3px 0 0 var(--marca-600); }

.linha-nova td:first-child { box-shadow: inset 3px 0 0 var(--marca); }
.linha-chegou td { animation: chegou 2.4s ease-out; }
@keyframes chegou {
  from { background: var(--marca-100); }
  to { background: transparent; }
}

.linha-cancelada td { color: var(--texto-suave); }
.linha-cancelada .paciente,
.linha-cancelada .destaque { text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .35); }

/* Os exames, o que a recepção mais procura, ficam com a maior parte da largura. */
.col-hora {
  width: 76px;
  font-weight: 600;
  white-space: nowrap;
}
.col-hora time { display: block; }
.col-hora .linha-apoio { font-weight: 400; }
.col-hora .etiqueta { margin: 4px 0 0; }
.col-paciente { width: 21%; min-width: 220px; }
.col-prescritor { width: 15%; }
.col-unidade { width: 12%; }
.col-exames { min-width: 260px; }
.col-num { width: 84px; text-align: right; white-space: nowrap; }
td.col-num { font-variant-numeric: tabular-nums; }
.col-situacao { width: 150px; white-space: nowrap; }
.col-acao { width: 110px; text-align: right; }

.paciente {
  color: var(--texto);
  font-weight: 600;
  font-size: 14.5px;
}
.paciente:hover { color: var(--marca-700); }
.linha-apoio {
  display: block;
  margin-top: 1px;
  color: var(--texto-apoio);
  font-size: 12.5px;
}
.destaque { font-weight: 600; }
.vazio { color: var(--texto-suave); }

/* A contagem flutua e a lista de exames vira um bloco ao lado: a linha que quebra
   continua alinhada ao texto, e não embaixo do número. */
.contagem {
  float: left;
  min-width: 22px;
  margin-right: 6px;
  padding: 0 5px;
  border-radius: var(--raio);
  background: var(--marca-100);
  color: var(--marca-700);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 20px;
  text-align: center;
}
.contagem-cancelada { background: rgba(0, 0, 0, .06); color: var(--texto-suave); }
.exames { display: flow-root; color: var(--texto); font-size: 13px; line-height: 20px; }

/* PDF pendente: o laranja fica no ponto; o número, legível, no texto */
.pdf-pendente { color: var(--texto); font-weight: 600; }
.pdf-pendente::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--atencao);
  vertical-align: 1px;
}

.sem-linhas td {
  padding: 48px 16px;
  color: var(--texto-apoio);
  text-align: center;
}

/* ---------- Etiquetas ---------- */

.etiqueta {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 18px;
  vertical-align: 1px;
  white-space: nowrap;
}
td > .etiqueta:first-child,
.col-situacao .etiqueta { margin-left: 0; }
.etiqueta-nova { background: var(--marca-700); color: #fff; }
.etiqueta-perigo { background: var(--critico-fundo); border-color: var(--critico-borda); color: var(--critico); }
.etiqueta-alerta { background: var(--atencao-fundo); border-color: var(--atencao-borda); color: var(--texto); }
.etiqueta-neutra { background: rgba(0, 0, 0, .06); color: var(--texto-apoio); }
.situacao-normal { color: var(--marca-700); font-weight: 600; font-size: 13px; }

.paginacao {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.paginacao-texto { color: var(--texto-apoio); }

/* ---------- Detalhe ---------- */

.trilha { margin-bottom: 12px; }
.voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--texto-apoio);
  font-weight: 600;
  font-size: 13px;
}
.voltar:hover { color: var(--marca-700); text-decoration: none; }

.cabecalho-detalhe {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}
/* barra lateral verde do manual à esquerda do título da página */
.cabecalho-detalhe h1 {
  padding-left: 12px;
  border-left: 5px solid var(--marca);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 6px;
  padding-left: 17px;
  color: var(--texto-apoio);
  font-size: 13px;
}
.meta span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin: 0 12px;
  background: var(--borda);
  vertical-align: -1px;
}

.faixa {
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--raio);
}
.faixa-perigo { background: var(--critico-fundo); border-color: var(--critico-borda); border-left-color: var(--critico); color: #7A231B; }
.faixa-alerta { background: var(--atencao-fundo); border-color: var(--atencao-borda); border-left-color: var(--atencao); color: var(--texto); }
/* Aviso de receita que mudou: fica preso sob o topo, visível mesmo com a página rolada. */
.faixa-aviso {
  position: sticky;
  top: var(--topo);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #EFFBF8;
  border-color: rgba(0, 170, 141, .35);
  border-left-color: var(--marca);
  color: var(--texto);
}
[hidden] { display: none !important; }

.grade-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.cartao,
.bloco {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.cartao { padding: 14px 16px 16px; }
.cartao h2 {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--borda-leve);
  color: var(--marca-700);
  font-size: 13px;
  font-weight: 600;
}

.dados {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px;
}
.dados dt { color: var(--texto-apoio); font-size: 13px; font-weight: 400; }
.dados dd { font-weight: 600; overflow-wrap: anywhere; }

.bloco { margin-bottom: 16px; }
.bloco .tabela-caixa { border: 0; border-top: 1px solid var(--borda); border-radius: 0; }
.bloco-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}
.bloco-topo h2 { font-size: 15px; font-weight: 600; }
.bloco-contagem {
  min-width: 22px;
  padding: 0 6px;
  border-radius: var(--raio);
  background: rgba(0, 0, 0, .06);
  color: var(--texto-apoio);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.bloco-vazio {
  padding: 14px 16px;
  border-top: 1px solid var(--borda-leve);
  color: var(--texto-suave);
}
.nota {
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--borda-leve);
  background: var(--nota-fundo);
  white-space: pre-line;
}

.lista-texto li {
  padding: 12px 16px;
  border-top: 1px solid var(--borda-leve);
}
.lista-texto-titulo { font-weight: 600; }
.lista-texto-corpo {
  margin-top: 4px;
  color: var(--texto-apoio);
  white-space: pre-line;
}

.ausentes {
  margin: -4px 0 16px;
  color: var(--texto-suave);
  font-size: 13px;
}

.avisos summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: var(--texto-apoio);
  font-weight: 600;
  cursor: pointer;
}
.avisos ul {
  padding: 4px 16px 14px 32px;
  list-style: square;
  color: var(--texto-apoio);
  font-size: 13px;
}

.vazio-pagina {
  max-width: 520px;
  margin: 64px auto;
  padding: 32px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.vazio-pagina h1 { margin-bottom: 8px; font-size: 20px; }
.vazio-pagina p { margin-bottom: 20px; color: var(--texto-apoio); }

/* ---------- Login ---------- */

.corpo-entrar {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}
.entrar {
  width: 100%;
  max-width: 400px;
  padding: 24px 16px;
}
.entrar .marca { margin-bottom: 20px; }
.entrar .marca img { height: 46px; }
.entrar-caixa {
  padding: 28px 28px 32px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-top: 4px solid var(--marca);
  border-radius: var(--raio);
}
.entrar-caixa h1 {
  font-size: 20px;
  font-weight: 700;
}
.entrar-apoio {
  margin: 6px 0 20px;
  color: var(--texto-apoio);
  font-size: 13px;
}
.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.campo-rotulo {
  font-size: 13px;
  font-weight: 600;
}
.campo .form-control { min-height: 42px; font-size: 15px; }
.entrar .btn-primary { min-height: 42px; --bs-btn-font-size: 14px; }
.entrar-rodape {
  margin-top: 16px;
  color: var(--texto-suave);
  font-size: 12.5px;
  text-align: center;
}

.aviso {
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--raio);
  font-size: 13px;
}
.aviso-perigo { background: var(--critico-fundo); border-color: var(--critico-borda); border-left-color: var(--critico); color: #7A231B; }

/* ---------- Telas menores ---------- */

@media (max-width: 1100px) {
  .grade-3 { grid-template-columns: 1fr; }
  .status-texto { display: none; }
  .tabela-caixa-lista { overflow-x: auto; }
  .tabela-lista thead th { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .linha-chegou td { animation: none; }
  .status.ao-vivo .vivo::after { animation: none; }
}

/* ---------- Impressão ---------- */

.so-impressao { display: none; }

@media print {
  body { background: #fff; font-size: 12px; }
  .topo, .trilha, .acoes, .col-acao, .faixa-aviso { display: none; }
  .so-impressao {
    display: block;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid #000;
    font-size: 11px;
    font-weight: 600;
  }
  .pagina { padding: 0; }
  .cartao, .bloco, .tabela-caixa { border-color: #bbb; break-inside: avoid; }
  .grade-3 { grid-template-columns: repeat(3, 1fr); }
  .faixa { border-color: #000; background: #fff; color: #000; }
  a:where(:not(.btn)) { color: #000; }
}