/* ============================================================================
   aurora-clinico.css — casca do painel Atendimento clinico (units/02.js).
   Reconstrucao de 2026-08-21: a fila deixou de ser dividida por Normal/
   Preferencial (que escondia a etapa do fluxo dentro do cartao) e passou a ser
   dividida pela ETAPA: aguardando triagem -> aguardando consulta -> em
   andamento. Preferencial virou etiqueta + ordenacao no topo da coluna.

   - Escopado sob .aur, prefixo .cl-* (nao existia no projeto: sem colisao).
   - Zero cor fora dos tokens do aurora-core.css. Carregar DEPOIS dele.
   - Escuro herda os tokens; so o que tem cor propria repete em .theme-dark.
   ============================================================================ */

/* ---------------------- barra de comando (uma linha) ---------------------- */
.aur .cl-bar{ display:flex; align-items:center; gap:8px; padding:9px 12px; flex-wrap:wrap;
  /* O z-index aqui e OBRIGATORIO: sem ele o cartao fixo (z-index 15) e as colunas
     passam por cima do menu "Mais" aberto. Ate 28/08/2026 o contexto de
     empilhamento vinha de graca do backdrop-filter do .glass; o vidro saiu, e este
     position+z-index passou a ser a unica coisa que cria o contexto — nao remover. */
  position:relative; z-index:30 }
.aur .cl-sala{
  display:flex; align-items:center; gap:8px; padding:4px 5px 4px 11px; border-radius:11px;
  border:1px solid var(--line); background:rgba(255,255,255,.4);
}
body.theme-dark .aur .cl-sala, .aur[data-theme="dark"] .cl-sala{ background:rgba(255,255,255,.06) }
.aur .cl-sala label{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft) }
.aur .cl-sala input{
  font-family:inherit; font-size:13px; font-weight:650; color:var(--ink); width:150px;
  border:none; background:transparent; outline:none;
}
/* salvar o consultorio: fica gravado no aparelho e volta preenchido no proximo acesso */
.aur .cl-save{
  width:28px; height:28px; flex:none; border-radius:9px; display:grid; place-items:center; cursor:pointer;
  border:1px solid rgba(92,111,58,.22); background:rgba(92,111,58,.12); color:var(--brand); transition:.16s;
}
.aur .cl-save:hover{ background:rgba(92,111,58,.2) }
.aur .cl-save.saved{ color:#fff; border-color:transparent; background:var(--p3) }
/* :not(.saved) — este seletor mede (0,3,1) e vencia o ".aur .cl-save.saved"
   (0,3,0) logo acima: no escuro o botao NUNCA ficava verde depois de salvar
   o consultorio, ficava igual ao nao salvo. Confirmacao que nao confirma. */
body.theme-dark .aur .cl-save:not(.saved), .aur[data-theme="dark"] .cl-save:not(.saved){ color:var(--brand2); background:rgba(147,185,80,.14) }
.aur .cl-saved-msg{ font-size:11.5px; font-weight:700; color:#2f8659; display:none; align-items:center; gap:4px }
.aur .cl-saved-msg.show{ display:inline-flex }
body.theme-dark .aur .cl-saved-msg, .aur[data-theme="dark"] .cl-saved-msg{ color:var(--au-ok) }
.aur .cl-sep{ width:1px; align-self:stretch; margin:2px 4px; background:var(--line) }
.aur .cl-spacer{ margin-left:auto }
.aur .cl-more{ position:relative }
/* dropdown: camada sobreposta de verdade, entao a sombra FICA. A palavra no
   comentario e proposital — o conversor do kit decide pelo texto que antecede
   a chave, e sem ela removeria a sombra do menu na proxima passada. */
.aur .cl-menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:20; min-width:236px; padding:6px;
  border-radius:16px; display:none; flex-direction:column;
  border:1px solid var(--line); box-shadow:var(--shadow);
  /* Superficie OPACA. Era necessario porque o menu abria sobre um elemento com
     backdrop-filter e o blur amostrava o pai, deixando o texto de tras aparecer no
     meio dos itens. O vidro saiu do portal em 28/08/2026, mas opaco continua certo
     para popover: menu de acao nao deve deixar ver o que ha atras. */
  background:rgba(255,255,255,.98);
}
body.theme-dark .aur .cl-menu, .aur[data-theme="dark"] .cl-menu{ background:rgba(48,56,37,.98) }
.aur .cl-more.open .cl-menu{ display:flex }
.aur .cl-menu button{
  font-family:inherit; font-size:13px; font-weight:600; color:var(--ink); text-align:left;
  display:flex; align-items:center; gap:8px; padding:9px 11px; border:none; border-radius:11px;
  background:transparent; cursor:pointer; width:100%;
}
.aur .cl-menu button:hover{ background:rgba(92,111,58,.1) }
.aur .cl-menu .cl-menu-fld{ padding:6px 8px 8px }
.aur .cl-menu .cl-menu-fld label{ display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:5px }
.aur .cl-menu .cl-menu-fld select{
  width:100%; font-family:inherit; font-size:13px; color:var(--ink); padding:8px 10px;
  border-radius:10px; border:1px solid var(--fld-bd); background:rgba(255,255,255,.5);
}
body.theme-dark .aur .cl-menu .cl-menu-fld select, .aur[data-theme="dark"] .cl-menu .cl-menu-fld select{ background:rgba(255,255,255,.06) }
.aur .cl-menu hr{ border:none; border-top:1px solid var(--line); margin:5px 6px }
.aur .cl-menu .cl-badge{ margin-left:auto; font-size:11px; padding:2px 8px }

/* ------------- "Em atendimento agora": UM cartao, fixo no topo ------------- */
.aur .cl-now{ position:sticky; top:8px; z-index:15; padding:11px 14px; display:flex; flex-direction:column; gap:8px }
.aur .cl-now-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.aur .cl-live{
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:var(--on-brand); padding:4px 9px; border-radius:20px; display:inline-flex; align-items:center; gap:4px;
  background:var(--brand);
}
/* o ponto segue a tinta do selo (currentColor): no escuro o --brand e claro e
   o --on-brand escurece o texto — um ponto branco fixo sumiria ali. */
.aur .cl-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; animation:auPulse 1.5s ease-in-out infinite }
@media (prefers-reduced-motion:reduce){ .aur .cl-live::before{ animation:none } }
.aur .cl-now-card{
  display:flex; align-items:center; gap:14px; padding:11px 14px; border-radius:14px; flex-wrap:wrap;
  border:1px solid rgba(92,111,58,.28); background:rgba(92,111,58,.09);
}
body.theme-dark .aur .cl-now-card, .aur[data-theme="dark"] .cl-now-card{ background:rgba(147,185,80,.1); border-color:rgba(147,185,80,.26) }
.aur .cl-now-card .av{ width:44px; height:44px; border-radius:13px; font-size:13px }
.aur .cl-now-id{ min-width:220px; flex:1 }
.aur .cl-now-id b{ display:block; font-size:16px; font-weight:700; letter-spacing:-.02em; line-height:1.2 }
.aur .cl-now-meta{ display:flex; align-items:center; gap:8px; margin-top:4px; flex-wrap:wrap }
.aur .cl-timer{
  font-variant-numeric:tabular-nums; font-size:12px; font-weight:700; color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:4px;
}
.aur .cl-now-acts{ display:flex; gap:8px; flex-wrap:wrap }
.aur .cl-now-empty{
  padding:11px; border-radius:16px; border:1px dashed var(--fld-bd); text-align:center;
  font-size:12.5px; color:var(--ink-soft);
}

/* ------ indicadores enxutos: so o que a contagem das colunas NAO diz ------ */
.aur .cl-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px; padding:9px 12px }
.aur .cl-stat{ display:flex; align-items:center; gap:8px; padding:2px 4px }
.aur .cl-stat-ico{ width:28px; height:28px; border-radius:10px; display:grid; place-items:center; color:var(--on-brand); flex:none; background:var(--brand) }
.aur .cl-stat.warn .cl-stat-ico{ background:var(--p2); color:var(--on-fill) }
.aur .cl-stat.alert .cl-stat-ico{ background:var(--p0); color:#fff }
.aur .cl-stat.ok .cl-stat-ico{ background:var(--p3); color:#fff }
.aur .cl-stat-txt strong{ display:block; font-size:17px; font-weight:750; letter-spacing:-.03em; line-height:1.1 }
.aur .cl-stat-txt span{ font-size:11.5px; color:var(--ink-soft) }

/* --------- filtros em linha (o aside da direita deixou de existir) -------- */
.aur .cl-filters{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 12px }
.aur .cl-search{ position:relative; flex:1; min-width:220px; max-width:420px }
.aur .cl-search svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--ink-soft) }
.aur .cl-search input{
  width:100%; font-family:inherit; font-size:13px; color:var(--ink);
  padding:8px 12px 8px 34px; border-radius:11px; border:1px solid var(--fld-bd); background:rgba(255,255,255,.5);
}
body.theme-dark .aur .cl-search input, .aur[data-theme="dark"] .cl-search input{ background:rgba(255,255,255,.06) }
.aur .cl-search input:focus{ outline:none; border-color:var(--brand2); box-shadow:0 0 0 3px rgba(92,111,58,.15) }
.aur .cl-risk{ display:flex; gap:4px; flex-wrap:wrap }
.aur .cl-risk .chip{ padding:7px 11px; font-size:12px }
.aur .cl-risk .chip .dot{ margin-right:6px }
.aur .d-r0{ background:#e23a6d } .aur .d-r1{ background:#e8863a } .aur .d-r2{ background:#c68a2c }
.aur .d-r3{ background:#3f9d6a } .aur .d-r4{ background:#3a6fd8 }

/* ------------------------- colunas por ETAPA ----------------------------- */
.aur .cl-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:start }
.aur .cl-cols.cl-cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
/* O `overflow:hidden` daqui existia so para aparar os cantos arredondados, mas
   ele tambem PRENDE o sticky do cabecalho: um sticky so gruda no scrollport mais
   proximo, e um box com overflow:hidden vira um scrollport que nao rola. Por isso
   o corte volta como border-radius explicito nas pontas (head em cima, foot/body
   embaixo) e a coluna passa a deixar o cabecalho grudar na rolagem da PAGINA. */
.aur .cl-col{ display:flex; flex-direction:column }
.aur .cl-col > :first-child{ border-radius:inherit; border-bottom-left-radius:0; border-bottom-right-radius:0 }
.aur .cl-col > :last-child{ border-radius:inherit; border-top-left-radius:0; border-top-right-radius:0 }

/* O cartao "Em atendimento agora" e sticky (.cl-now, top:8px) e passava POR CIMA
   dos titulos das colunas ao rolar — "Aguardando triagem" sumia atras dele. Agora
   o titulo tambem gruda, logo ABAIXO do cartao: --cl-now-h e medida em JS a cada
   render (a altura do cartao varia com o nome do paciente e as acoes). O z-index
   fica abaixo do .cl-now (15) para o cartao continuar por cima quando se cruzam. */
.aur .cl-col-head{
  display:flex; align-items:center; gap:8px; padding:10px 13px 9px;
  border-bottom:1px solid var(--line);
  position:sticky; top:calc(var(--cl-now-h, 0px) + 14px); z-index:12;
  background:var(--surface);
}
.aur .cl-step{ width:26px; height:26px; border-radius:9px; display:grid; place-items:center; color:#fff; font-size:11px; font-weight:800; flex:none }
.aur .cl-col-head h2{ margin:0; font-size:14.5px; font-weight:700; letter-spacing:-.02em; flex:1; min-width:0 }
.aur .cl-count{ font-size:12px; font-weight:800; padding:3px 10px; border-radius:20px; color:var(--ink-soft); background:rgba(77,90,54,.1) }
body.theme-dark .aur .cl-count, .aur[data-theme="dark"] .cl-count{ background:rgba(147,185,80,.12) }
/* As quatro etapas guardam a familia de cor que ja tinham (ouro, azul, oliva,
   verde): quem opera reconhece a coluna pela cor do selo. O que muda e que
   agora sao os tokens chapados, em AA sob a tinta que cada um carrega. */
.aur .cl-s1 .cl-step{ background:var(--p2); color:var(--on-fill) }
.aur .cl-s2 .cl-step{ background:var(--p4) }
.aur .cl-s3 .cl-step{ background:var(--brand); color:var(--on-brand) }
.aur .cl-s4 .cl-step{ background:var(--p3) }
.aur .cl-col-body{ padding:9px; display:flex; flex-direction:column; gap:8px; max-height:min(64vh,760px); overflow:auto }
.aur .cl-col-body::-webkit-scrollbar{ width:8px }
.aur .cl-col-body::-webkit-scrollbar-thumb{ background:rgba(77,90,54,.22); border-radius:8px }
.aur .cl-col-foot{ padding:9px 12px; border-top:1px solid var(--line); text-align:center; font-size:11.5px; font-weight:600; color:var(--ink-soft) }

/* ------- cartao enxuto: risco = tarja lateral, etapa = a propria coluna ---- */
.aur .cl-card{
  position:relative; display:flex; flex-direction:column; gap:4px; padding:9px 11px 9px 14px;
  border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.5); transition:.16s;
}
/* :not(.next) porque este seletor mede (0,3,1) e vencia o ".aur .cl-card.next"
   (0,3,0): no escuro o cartao do proximo a ser chamado perdia o fundo de
   destaque e ficava igual aos outros da coluna. */
body.theme-dark .aur .cl-card:not(.next), .aur[data-theme="dark"] .cl-card:not(.next){ background:rgba(255,255,255,.05) }
.aur .cl-card:hover{ transform:translateY(-1px); border-color:rgba(92,111,58,.34) }
.aur .cl-card::before{ content:""; position:absolute; left:0; top:9px; bottom:9px; width:4px; border-radius:0 4px 4px 0; background:rgba(77,90,54,.2) }
/* a tarja lateral e a classificacao de MANCHESTER do paciente, a mesma que o
   .pc-risco do modal e o .prio da fila mostram. Estava com os cinco literais
   antigos, ou seja: o mesmo risco saia de uma cor no cartao e de outra no
   modal. Passa a ler --p0..--p4, que sao a fonte unica desde o aurora-core. */
.aur .cl-card.r0::before{ background:var(--p0) } .aur .cl-card.r1::before{ background:var(--p1) }
.aur .cl-card.r2::before{ background:var(--p2) } .aur .cl-card.r3::before{ background:var(--p3) }
.aur .cl-card.r4::before{ background:var(--p4) }
.aur .cl-card.next{ border-color:rgba(92,111,58,.45); background:rgba(92,111,58,.1); box-shadow:0 0 0 3px rgba(92,111,58,.1) }
.aur .cl-card-top{ display:flex; align-items:center; gap:8px; min-width:0 }
.aur .cl-card-top b{ font-size:13.5px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0 }
.aur .cl-card-top b.cl-sem-nome{ color:var(--ink-soft); font-style:italic; font-weight:600 }
.aur .cl-card .av{ width:28px; height:28px; border-radius:9px; font-size:10px }
.aur .cl-line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-soft); font-weight:600 }
.aur .cl-dot{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.55 }
.aur .cl-tag{ font-size:10px; font-weight:800; letter-spacing:.03em; padding:3px 7px; border-radius:7px; color:#fff; font-style:normal; white-space:nowrap }
.aur .cl-tag.prio{ background:var(--p1); color:var(--on-fill) }
.aur .cl-tag.mine{ background:var(--brand); color:var(--on-brand) }
.aur .cl-card-acts{ display:flex; gap:4px; flex-wrap:wrap; margin-top:1px }
.aur .cl-card-acts .btn{ font-size:12px; padding:7px 11px; border-radius:9px }
.aur .cl-next-flag{
  position:absolute; right:10px; top:-9px; font-size:9.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--on-brand); padding:3px 8px; border-radius:20px;
  background:var(--brand);
}
.aur .cl-empty{ padding:22px 12px; text-align:center; font-size:12px; color:var(--ink-soft) }
.aur .cl-empty strong{ display:block; font-size:13px; color:var(--ink); margin-bottom:3px; font-weight:650 }

@media (max-width:1180px){
  .aur .cl-cols, .aur .cl-cols.cl-cols-4{ grid-template-columns:1fr }
  .aur .cl-col-body{ max-height:none }
  .aur .cl-now{ position:static }
}

/* Embutido no shell da unidade (#ubs-main-content), o .shell da view somava o
   proprio padding ao do host: sobrava um vao morto entre o cabecalho da unidade
   e a barra de comando. Solto (fora do shell) o respiro continua o de sempre. */
#view-ubs-clinical.embedded-in-shell > .shell{ padding:0 0 6px; gap:8px }

/* ── Faixa de identificacao do paciente (topo dos modais clinicos) ──────────
   O formulario de triagem abria direto nos sinais vitais: quem registra nao via
   de QUEM eram. Esta faixa e o que se confere em voz alta com a pessoa na
   frente — nome, nascimento, idade, documento e senha.
   Vive tambem dentro de #ubs-clinical-modal, que fica no <body> e ja carrega
   .aur, entao os tokens alcancam aqui. */
.aur .cl-pac{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:2px 0 14px; padding:11px 14px; border-radius:14px;
  border:1px solid rgba(92,111,58,.26); background:rgba(92,111,58,.08);
}
body.theme-dark .aur .cl-pac, .aur[data-theme="dark"] .cl-pac{ background:rgba(147,185,80,.1); border-color:rgba(147,185,80,.24) }
.aur .cl-pac .av{ width:40px; height:40px; border-radius:12px; font-size:12px }
.aur .cl-pac-id{ flex:1; min-width:200px }
.aur .cl-pac-id b{ display:block; font-size:15.5px; font-weight:700; letter-spacing:-.02em; line-height:1.25 }
.aur .cl-pac-linha{ margin-top:3px; font-size:12px; font-weight:600; color:var(--ink-soft) }
.aur .cl-pac-extra{ margin-top:2px; font-weight:500; opacity:.9 }
.aur .cl-pac-tags{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.aur .cl-pac-alerta{
  margin:-8px 0 14px; padding:9px 12px; border-radius:11px; font-size:12px; font-weight:600;
  color:#8a5a12; background:rgba(232,134,58,.14); border:1px solid rgba(232,134,58,.3);
}
body.theme-dark .aur .cl-pac-alerta, .aur[data-theme="dark"] .cl-pac-alerta{ color:var(--au-warn) }

/* ══════════════════════════════════════════════════════════════════════════
   COR NOS MODAIS CLINICOS (#ubs-clinical-modal)
   A caixa era branca de ponta a ponta, com o titulo num cinza-azulado que nem
   e do sistema (#1f2937, resquicio pre-padronizacao): todo formulario tinha o
   mesmo peso visual e nada dizia em que etapa voce estava. Aqui a cor tem
   funcao — separa titulo, blocos de campo e barra de acao, e da a cor do risco
   ao campo que classifica o paciente.
   Especificidade por id vence a base de 12-modais.css sem precisar de !important.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- titulo com faixa de marca --- */
#ubs-clinical-modal .modal-box > h3{
  position:relative; color:var(--brand); font-size:1.14rem; font-weight:750; letter-spacing:-.02em;
  margin:0 0 14px; padding:0 0 11px 13px; border-bottom:1px solid var(--line);
}
#ubs-clinical-modal .modal-box > h3::before{
  content:""; position:absolute; left:0; top:1px; bottom:12px; width:5px; border-radius:3px;
  background:var(--brand);
}
body.theme-dark #ubs-clinical-modal .modal-box > h3{ color:var(--brand2) }

/* --- blocos de campo: cada grupo vira um cartao com tom proprio --- */
#ubs-clinical-modal .prontuario-fields{
  padding:12px 13px; border-radius:14px; margin-bottom:12px;
  background:rgba(92,111,58,.06); border:1px solid rgba(92,111,58,.16);
}
body.theme-dark #ubs-clinical-modal .prontuario-fields{ background:rgba(147,185,80,.08); border-color:rgba(147,185,80,.2) }
#ubs-clinical-modal .au-form{
  padding:12px 13px; border-radius:14px; margin-bottom:12px;
  background:rgba(58,111,208,.05); border:1px solid rgba(58,111,208,.14);
}
body.theme-dark #ubs-clinical-modal .au-form{ background:rgba(143,178,255,.07); border-color:rgba(143,178,255,.18) }

/* --- barra de acao separada do conteudo --- */
#ubs-clinical-modal .modal-actions{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}

/* --- classificacao de risco: o campo assume a cor que o profissional escolheu.
       E a decisao mais pesada da triagem e era um <select> cinza como os outros. --- */
#ubs-clinical-modal select[data-risco]{
  border-width:2px; font-weight:700; transition:.18s;
}
#ubs-clinical-modal select[data-risco="vermelho"]{ border-color:#e23a6d; color:#c22a58; background:rgba(226,58,109,.09) }
#ubs-clinical-modal select[data-risco="laranja"] { border-color:#e8863a; color:#a65c1c; background:rgba(232,134,58,.1) }
#ubs-clinical-modal select[data-risco="amarelo"] { border-color:#c68a2c; color:#8a5f14; background:rgba(198,138,44,.12) }
#ubs-clinical-modal select[data-risco="verde"]   { border-color:#3f9d6a; color:#2c7a4f; background:rgba(63,157,106,.1) }
#ubs-clinical-modal select[data-risco="azul"]    { border-color:#3a6fd8; color:#2b56ab; background:rgba(58,111,208,.09) }
body.theme-dark #ubs-clinical-modal select[data-risco="vermelho"]{ color:var(--au-err) }
body.theme-dark #ubs-clinical-modal select[data-risco="laranja"] { color:var(--au-p1) }
body.theme-dark #ubs-clinical-modal select[data-risco="amarelo"] { color:var(--au-p2) }
body.theme-dark #ubs-clinical-modal select[data-risco="verde"]   { color:var(--au-p3) }
body.theme-dark #ubs-clinical-modal select[data-risco="azul"]    { color:var(--au-info) }

/* --- aviso de chamada fora da ordem (modal de justificativa) --- */
.aur .cl-fora-aviso{
  padding:11px 13px; border-radius:12px; font-size:12.5px; line-height:1.5;
  color:#8a5a12; background:rgba(232,134,58,.13); border:1px solid rgba(232,134,58,.32);
}
.aur .cl-fora-aviso b{ display:block; margin-bottom:3px; font-weight:750 }
body.theme-dark .aur .cl-fora-aviso, .aur[data-theme="dark"] .cl-fora-aviso{ color:var(--au-warn) }

/* --- aviso do rascunho da triagem --- */
.aur .cl-rascunho{ margin:0 0 12px; font-size:12px; line-height:1.5 }
.aur .cl-rascunho:empty{ display:none }
.aur .cl-rascunho.salvo{ color:var(--ink-soft); font-weight:600 }
.aur .cl-rascunho.recuperado{
  padding:10px 12px; border-radius:12px; font-weight:600; color:#2c7a4f;
  background:rgba(63,157,106,.12); border:1px solid rgba(63,157,106,.3);
}
.aur .cl-rascunho.recuperado b{ font-weight:750 }
body.theme-dark .aur .cl-rascunho.recuperado, .aur[data-theme="dark"] .cl-rascunho.recuperado{ color:var(--au-ok) }
.aur .cl-rascunho-btn{
  margin-left:6px; font:inherit; font-size:11.5px; font-weight:700; cursor:pointer;
  border:none; background:none; color:inherit; text-decoration:underline; padding:0;
}

/* Etiqueta no proprio botao da fila: existe triagem comecada e guardada neste
   computador. Sem ela, "Registrar triagem" e "Continuar triagem" pareciam a
   mesma coisa e quem tinha saido da caixa achava que ia recomecar do zero. */
.aur .cl-rasc-tag{
  margin-left:7px; padding:1px 7px; border-radius:999px;
  font-size:10px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.35); color:inherit;
}
.aur .btn.soft .cl-rasc-tag, .aur .btn.ghost .cl-rasc-tag{
  background:rgba(63,157,106,.14); border-color:rgba(63,157,106,.32); color:#2c7a4f;
}
body.theme-dark .aur .btn.soft .cl-rasc-tag, .aur[data-theme="dark"] .btn.soft .cl-rasc-tag{ color:var(--au-ok) }

/* Ato privativo fora do alcance de quem esta logado. Nao e botao: nao ha o que
   clicar. Ocupa o lugar do botao para a ausencia ser explicada, e nao apenas
   sentida como tela quebrada. */
.aur .cl-sem-ato{
  display:inline-flex; align-items:center; gap:6px; cursor:help;
  font-size:11.5px; font-weight:700;
}
.aur .cl-sem-ato i, .aur .cl-sem-ato svg{ width:13px; height:13px }

/* --- linha do tempo do atendimento (Registros deste atendimento) --- */
.aur .cl-log, #ubs-clinical-modal .cl-log{
  margin:10px 0 4px; padding:12px 14px; border-radius:14px;
  background:rgba(92,111,58,.06); border:1px solid rgba(92,111,58,.16);
}
.aur .cl-log-head{
  display:flex; align-items:center; gap:8px; margin-bottom:9px;
  font-size:12.5px; font-weight:750; color:var(--brand);
}
.aur .cl-log-item{
  display:flex; gap:8px; padding:7px 0; font-size:12px; line-height:1.5;
  border-top:1px solid var(--line);
}
.aur .cl-log-item:first-of-type{ border-top:none }
.aur .cl-log-hora{ flex:none; width:92px; font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink-soft) }
.aur .cl-log-txt{ min-width:0 }
.aur .cl-log-txt i{ font-style:normal; color:var(--ink-soft); margin-left:5px }
.aur .cl-log-nota{ display:block; margin-top:2px; font-size:11.5px; color:var(--ink-soft) }
/* chamada fora da ordem salta aos olhos: e o registro que alguem vai procurar */
.aur .cl-log-item.alerta .cl-log-nota{ color:#a65c1c; font-weight:700 }
body.theme-dark .aur .cl-log-item.alerta .cl-log-nota{ color:var(--au-p1) }
body.theme-dark .aur .cl-log, .aur[data-theme="dark"] .cl-log{ background:rgba(147,185,80,.08); border-color:rgba(147,185,80,.2) }
body.theme-dark .aur .cl-log-head{ color:var(--brand2) }

/* --- reavaliacoes: afericoes seguintes a triagem --- */
.aur .cl-reav, #ubs-clinical-modal .cl-reav{
  margin:10px 0; padding:11px 13px; border-radius:14px;
  background:rgba(58,111,208,.06); border:1px solid rgba(58,111,208,.16);
}
.aur .cl-reav-head{
  display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap;
  font-size:12.5px; font-weight:750; color:#2b56ab;
}
.aur .cl-reav-head .btn{ margin-left:auto; font-size:12px; padding:6px 10px }
.aur .cl-reav-item{ display:flex; gap:8px; padding:7px 0; font-size:12px; border-top:1px solid var(--line) }
.aur .cl-reav-item:first-of-type{ border-top:none }
.aur .cl-reav-hora{ flex:none; width:92px; font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink-soft) }
.aur .cl-reav-autor{ font-style:normal; color:var(--ink-soft); margin-left:6px }
.aur .cl-reav-obs{ display:block; margin-top:2px; color:var(--ink-soft) }
.aur .cl-reav-vazio{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0;
  font-size:12px; color:var(--ink-soft);
}
body.theme-dark .aur .cl-reav, .aur[data-theme="dark"] .cl-reav{ background:rgba(143,178,255,.08); border-color:rgba(143,178,255,.2) }
body.theme-dark .aur .cl-reav-head{ color:var(--au-info) }

/* ── Construtor da prescricao ────────────────────────────────────────────────
   Era um grid inline de 6 colunas com 7 campos dentro: o botao caia sozinho
   numa linha e esticava de ponta a ponta, e os campos condicionais ("Qual via")
   apareciam sempre, porque o display inline perdia para o !important do CSS de
   modal. Aqui a grade e de 12 colunas com span por campo, e o esconder e por
   classe. */
#ubs-clinical-modal .cl-presc-grid,
.aur .cl-presc-grid{
  display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:8px 8px; align-items:end;
}
.aur .cl-c2{ grid-column:span 2 } .aur .cl-c3{ grid-column:span 3 }
.aur .cl-c4{ grid-column:span 4 } .aur .cl-c12{ grid-column:1 / -1 }
#ubs-clinical-modal .cl-c2{ grid-column:span 2 } #ubs-clinical-modal .cl-c3{ grid-column:span 3 }
#ubs-clinical-modal .cl-c4{ grid-column:span 4 } #ubs-clinical-modal .cl-c12{ grid-column:1 / -1 }
/* vence o !important que o CSS de modal aplica em campo de formulario */
.aur .cl-hide, #ubs-clinical-modal .cl-hide{ display:none !important }
.aur .cl-presc-chk, #ubs-clinical-modal .cl-presc-chk{
  display:flex; align-items:center; gap:8px; white-space:nowrap; padding-bottom:9px; font-size:13px;
}
.aur .cl-presc-acao, #ubs-clinical-modal .cl-presc-acao{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:2px;
  padding-top:10px; border-top:1px solid var(--line);
}
.aur .cl-presc-acao .btn, #ubs-clinical-modal .cl-presc-acao .btn{ margin-left:auto }
.aur .cl-presc-sug, #ubs-clinical-modal .cl-presc-sug{ font-size:12px; font-weight:700; color:var(--brand) }
.aur .cl-presc-sug:empty{ display:none }
body.theme-dark .aur .cl-presc-sug{ color:var(--brand2) }

@media (max-width:900px){
  .aur .cl-presc-grid, #ubs-clinical-modal .cl-presc-grid{ grid-template-columns:repeat(6, minmax(0,1fr)) }
  .aur .cl-c4, #ubs-clinical-modal .cl-c4{ grid-column:span 6 }
  .aur .cl-c3, #ubs-clinical-modal .cl-c3{ grid-column:span 3 }
  .aur .cl-c2, #ubs-clinical-modal .cl-c2{ grid-column:span 3 }
}
/* campo condicional ocupa a linha, mas o controle nao precisa da largura toda */
.aur .cl-presc-outra input, #ubs-clinical-modal .cl-presc-outra input{ max-width:360px }

/* ── Testes rapidos e coletas (unidade sem laboratorio proprio) ───────────── */
.aur .cl-testes, #ubs-clinical-modal .cl-testes{
  margin-top:6px; padding:12px; border-radius:12px;
  border:1px solid rgba(63,157,106,.3); background:rgba(63,157,106,.07);
}
.aur .cl-testes-head, #ubs-clinical-modal .cl-testes-head{
  display:flex; align-items:center; gap:8px; margin-bottom:9px; flex-wrap:wrap; font-size:.92rem;
}
.aur .cl-testes-head strong{ font-weight:750 }
.aur .cl-testes-lista{ margin-bottom:10px }
.aur .cl-testes-item{ display:flex; gap:8px; padding:6px 0; font-size:12px; border-top:1px solid var(--line) }
.aur .cl-testes-item:first-child{ border-top:none }
.aur .cl-testes-hora{ flex:none; width:92px; font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink-soft) }
/* reagente/positivo salta aos olhos: e o que muda a conduta */
.aur .cl-testes-item.alerta b{ color:#c22a58 }
.aur .cl-testes-item.alerta{ background:rgba(226,58,109,.07); border-radius:8px; padding-left:6px }
body.theme-dark .aur .cl-testes-item.alerta b{ color:var(--au-err) }
.aur .cl-testes-form, #ubs-clinical-modal .cl-testes-form{
  display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto; gap:8px; align-items:end;
  padding-top:10px; border-top:1px solid var(--line);
}
@media (max-width:900px){ .aur .cl-testes-form, #ubs-clinical-modal .cl-testes-form{ grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
body.theme-dark .aur .cl-testes, .aur[data-theme="dark"] .cl-testes{ background:rgba(102,214,154,.08); border-color:rgba(102,214,154,.24) }

/* --- aviso do codigo SIGTAP preenchido automaticamente --- */
.aur .cl-sigtap-auto, #ubs-clinical-modal .cl-sigtap-auto{
  display:block; margin-top:3px; font-size:11.5px; font-weight:600; color:var(--ink-soft);
}
.aur .cl-sigtap-auto:empty{ display:none }
.aur .cl-sigtap-auto.ok, #ubs-clinical-modal .cl-sigtap-auto.ok{ color:#2f8659 }
.aur .cl-sigtap-auto.pend, #ubs-clinical-modal .cl-sigtap-auto.pend{ color:#a65c1c }
body.theme-dark .aur .cl-sigtap-auto.ok{ color:var(--au-ok) }
body.theme-dark .aur .cl-sigtap-auto.pend{ color:var(--au-p1) }

/* --- linhas de cuidado a partir do atendimento --- */
.aur .cl-linhas{ display:flex; flex-direction:column; gap:8px }
.aur .cl-linha{
  display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:12px;
  border:1px solid var(--line); background:rgba(255,255,255,.45);
}
body.theme-dark .aur .cl-linha{ background:rgba(255,255,255,.05) }
.aur .cl-linha.sugerida{ border-color:rgba(92,111,58,.4); background:rgba(92,111,58,.09) }
.aur .cl-linha.dentro{ border-color:rgba(63,157,106,.34); background:rgba(63,157,106,.09) }
.aur .cl-linha-txt{ flex:1; min-width:0 }
.aur .cl-linha-txt b{ display:block; font-size:13.5px; font-weight:700 }
.aur .cl-linha-txt span{ font-size:11.5px; color:var(--ink-soft) }

/* --- alergia medicamentosa: resposta obrigatoria na triagem --- */
.aur .cl-alergia, #ubs-clinical-modal .cl-alergia{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; margin:2px 0 12px;
  padding:11px 13px; border-radius:12px;
  border:1px solid rgba(232,134,58,.34); background:rgba(232,134,58,.09);
}
.aur .cl-alergia.tem, #ubs-clinical-modal .cl-alergia.tem{
  border-color:rgba(226,58,109,.42); background:rgba(226,58,109,.1);
}
.aur .cl-alergia.nao, #ubs-clinical-modal .cl-alergia.nao{
  border-color:rgba(63,157,106,.34); background:rgba(63,157,106,.08);
}
.aur .cl-alergia.duvida, #ubs-clinical-modal .cl-alergia.duvida{
  border-color:rgba(198,138,44,.4); background:rgba(198,138,44,.1);
}
.aur .cl-obrig, #ubs-clinical-modal .cl-obrig{
  font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:#fff; background:#c22a58; padding:2px 6px; border-radius:6px; margin-left:5px;
}
@media (max-width:700px){ .aur .cl-alergia{ grid-template-columns:1fr } }
/* alergia ja respondida: faixa informativa, sem campo */
.aur .cl-alergia-info, #ubs-clinical-modal .cl-alergia-info{ grid-template-columns:1fr; font-size:12.5px }

/* --- alerta de sinais vitais alterados + sugestao de classificacao --- */
.aur .cl-vitais, #ubs-clinical-modal .cl-vitais{ margin:2px 0 12px }
.aur .cl-vitais:empty{ display:none }
.aur .cl-vitais.alterado, #ubs-clinical-modal .cl-vitais.alterado{
  padding:11px 13px; border-radius:12px;
  border:1px solid rgba(198,138,44,.4); background:rgba(198,138,44,.1);
}
.aur .cl-vitais.grave, #ubs-clinical-modal .cl-vitais.grave{
  padding:11px 13px; border-radius:12px;
  border:1px solid rgba(226,58,109,.44); background:rgba(226,58,109,.1);
}
.aur .cl-vitais-head{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:750; margin-bottom:6px }
.aur .cl-vitais-head i:not([data-lucide]){ font-style:normal; font-weight:600; color:var(--ink-soft); font-size:11.5px }
.aur .cl-vitais ul{ margin:0 0 4px; padding-left:18px; font-size:12.5px; line-height:1.6 }
.aur .cl-vitais li.g-grave{ color:#c22a58; font-weight:700 }
.aur .cl-vitais li.g-moderado{ color:#a65c1c; font-weight:600 }
body.theme-dark .aur .cl-vitais li.g-grave{ color:var(--au-err) }
body.theme-dark .aur .cl-vitais li.g-moderado{ color:var(--au-p1) }
.aur .cl-vitais-sug{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px;
  padding-top:8px; border-top:1px solid var(--line); font-size:12.5px;
}
.aur .cl-vitais-sug .btn{ font-size:12px; padding:6px 11px }
.aur .cl-vitais-sug .au-hint{ flex-basis:100%; color:var(--ink-soft); font-size:11.5px }
.aur .cl-vitais-ok{ font-size:12px; font-weight:600; color:#2f8659 }
body.theme-dark .aur .cl-vitais-ok{ color:var(--au-ok) }
/* regra da fila, escrita na coluna */
.aur .cl-col-regra{
  padding:6px 13px 8px; font-size:11px; font-weight:600; color:var(--ink-soft);
  border-bottom:1px solid var(--line);
}

/* --- itens do encaminhamento a regulacao --- */
.aur .cl-enc-lista, #ubs-clinical-modal .cl-enc-lista{ display:flex; flex-direction:column; gap:8px; margin-top:9px }
.aur .cl-enc-item{
  display:flex; align-items:center; gap:8px; padding:8px 11px; border-radius:11px;
  border:1px solid rgba(232,134,58,.3); background:rgba(255,255,255,.5); font-size:12.5px;
}
body.theme-dark .aur .cl-enc-item{ background:rgba(255,255,255,.05) }
.aur .cl-enc-prio{
  flex:none; font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:7px;
  color:var(--on-fill); background:var(--p1);
}
.aur .cl-enc-txt{ flex:1; min-width:0 }
.aur .cl-enc-txt b{ display:block; font-weight:650 }
.aur .cl-enc-txt i{ font-style:normal; font-size:11.5px; color:var(--ink-soft) }
.aur .cl-enc-item .btn{ font-size:11.5px; padding:5px 9px }

/* --- saude da mulher: DUM, gestacao e altura uterina --- */
.aur .cl-gest, #ubs-clinical-modal .cl-gest{
  margin:2px 0 12px; padding:11px 13px; border-radius:12px;
  border:1px solid rgba(226,58,109,.28); background:rgba(226,58,109,.06);
}
.aur .cl-gest-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; margin-bottom:9px }
.aur .cl-gest-head b{ font-weight:750 }
.aur .cl-gest-campos{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; align-items:end }
.aur .cl-gest-chk{ display:flex; align-items:center; gap:8px; white-space:nowrap; padding-bottom:9px; font-size:13px }
.aur .cl-gest-info{ margin-top:8px; font-size:12.5px; line-height:1.6 }
.aur .cl-gest-info:empty{ display:none }
.aur .cl-gest-info i{ font-style:normal; color:var(--ink-soft); font-size:11.5px }
.aur .cl-gest-erro{ color:#c22a58; font-weight:700 }
.aur .cl-gest-ok{ color:#2f8659; font-weight:600 }
.aur .cl-gest-linha{ color:var(--ink) }
body.theme-dark .aur .cl-gest-erro{ color:var(--au-err) }
body.theme-dark .aur .cl-gest-ok{ color:var(--au-ok) }
@media (max-width:700px){ .aur .cl-gest-campos{ grid-template-columns:1fr } }

/* prioridade por item no "Regular paciente" */
#ubs-clinical-modal .reg-item-row .reg-item-prio{ flex:0 0 168px; max-width:168px }
@media (max-width:760px){ #ubs-clinical-modal .reg-item-row{ flex-wrap:wrap } #ubs-clinical-modal .reg-item-row .reg-item-prio{ flex:1 1 100% ; max-width:none } }

/* --- fila por profissional --- */
.aur .cl-fp{ display:flex; flex-direction:column; gap:8px; max-height:56vh; overflow:auto }
.aur .cl-fp-item{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 12px; border-radius:12px;
  border:1px solid var(--line); background:rgba(255,255,255,.45);
}
body.theme-dark .aur .cl-fp-item{ background:rgba(255,255,255,.05) }
.aur .cl-fp-item.geral{ border-color:rgba(92,111,58,.36); background:rgba(92,111,58,.09) }
.aur .cl-fp-item.vazio{ opacity:.62 }
.aur .cl-fp-nome{ flex:1; min-width:180px }
.aur .cl-fp-nome b{ display:block; font-size:13.5px; font-weight:650 }
.aur .cl-fp-nome i{ font-style:normal; font-size:11.5px; color:var(--ink-soft); margin-right:8px }
.aur .cl-fp-nums{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--ink-soft) }
.aur .cl-fp-n b{ font-size:15px; font-weight:750; color:var(--ink); margin-right:3px }
.aur .cl-fp-espera{ font-variant-numeric:tabular-nums; font-weight:700 }