/* ============================================================
   SOAPerando — Painel de Consulta UBS · CSS do design Claude
   ============================================================ */

/* Fontes self-hosted (variáveis, subset latin — cobre acentos pt-BR).
   Antes vinham do Google Fonts (CDN): em rede instável de UBS, a 1ª carga
   dependia de terceiro. Arquivos em assets/fonts/ (~58 KB os dois). */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-var-latin.woff2') format('woff2');
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing: antialiased;
}
::placeholder { color:var(--text-faint); }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { background:#cdd9dc; border-radius:8px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:#b2c2c7; background-clip:content-box; }

@keyframes blink   { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes recpulse{ 0%{box-shadow:0 0 0 0 rgba(220,38,38,.5)} 70%{box-shadow:0 0 0 8px rgba(220,38,38,0)} 100%{box-shadow:0 0 0 0 rgba(220,38,38,0)} }
@keyframes fadeUp  { from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:translateY(0)} }
@keyframes slideIn { from{transform:translateX(100%)} to{transform:translateX(0)} }

/* ===== App shell ===== */
.app { height:100vh; display:flex; flex-direction:column; overflow:hidden; }

/* ===== Header ===== */
.hd {
  flex:0 0 auto;
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:18px;
  padding:10px 20px;
  background: #fff;
  border-bottom: 1px solid #e5eeeb;
  color: var(--text);
}
.hd-logo { display:flex; align-items:center; gap:11px; }
.logo-sq {
  width:38px; height:38px;
  border-radius:11px;
  overflow:hidden;
  position:relative;
  background:#0d3b3f;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.logo-sq img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.hd-title { font-weight:800; font-size:18px; letter-spacing:-.01em; line-height:1.05; color:#0a4f47; }
.hd-sub { font-size:11px; color:#7a8b92; font-weight:500; margin-top:3px; }

.hd-nav {
  justify-self: center;
  display:flex; gap:0;
  background:transparent;
  padding:0;
  border-radius:0;
  align-items:stretch;
}
.hd-nav button {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent;
  color:#7a8b92;
  border:none;
  border-bottom:2px solid transparent;
  padding:0 18px;
  border-radius:0;
  font-weight:700; font-size:12.5px;
  cursor:pointer;
  transition: color .12s, border-color .12s;
}
.hd-nav button.active {
  background:transparent;
  color:#0a4f47;
  font-weight:800;
  border:none;
  border-bottom:2px solid #0a4f47;
  padding:0 18px;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.hd-nav button:hover:not(.active) {
  background: rgba(10,79,71,.04);
  color: #0a4f47;
}

.hd-right { display:flex; align-items:center; gap:12px; }
.hd-privacy {
  display:inline-flex; align-items:center; gap:7px;
  font-size:10px; font-weight:600; color:#0a4f47;
  background:#e2f1ed;
  border:1px solid #c8dfd8;
  padding:5px 10px; border-radius:999px;
}
.hd-user {
  display:inline-flex; align-items:center; gap:8px;
  background:#f5f9f7;
  border:1px solid #dde8e5;
  color:#1e3a34;
  padding:6px 11px; border-radius:10px;
  font-weight:600; font-size:13px; cursor:pointer;
}
.hd-user:hover { background:#ebf4f0; }
.hd-user-name { display: none; }
.hd-user-arrow { opacity:.7; font-size:10px; }
.hd-user-av {
  width:24px; height:24px; border-radius:50%;
  background:var(--accent-mint); color:var(--accent-mint-ink);
  font-weight:700; font-size:11px;
  display:flex; align-items:center; justify-content:center;
}
.hd-novo {
  display:inline-flex; align-items:center; gap:7px;
  border:none;
  background: linear-gradient(120deg,#0a4f47,#13796b);
  color:#fff;
  padding:8px 14px; border-radius:999px;
  font-weight:800; font-size:11.5px; letter-spacing:.01em; cursor:pointer;
  box-shadow: 0 5px 16px rgba(15,118,110,.28);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition: filter .15s;
}
.hd-novo:hover {
  filter: brightness(1.05);
}

/* ===== Context bar 1 ===== */
/* Rastreios/Scores: viviam numa faixa verde própria (.ctx1) de 50px, com um
   botão só — mesclados na .ctx2 para devolver a altura no notebook 1366x768. */
.ctx1-actions {
  margin-left:auto;
  display:flex; gap:9px; align-items:center; flex:0 0 auto;
}
.ctx1-actions button {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface-soft);
  border:1px solid var(--border);
  color:var(--text-2);
  padding:7px 12px; border-radius:10px;
  font-weight:600; font-size:13px; cursor:pointer;
}
.ctx1-actions button:hover { background:var(--surface-muted); border-color:var(--brand); color:var(--brand); }
.ctx2.so-acoes > *:not(.ctx1-actions) { display:none; }
.pill {
  display:inline-block;
  font-size:11px; font-weight:700;
  padding:1px 7px; border-radius:999px;
}
.pill.red   { background:var(--danger); color:#fff; }
.pill.green { background:var(--accent-mint); color:var(--accent-mint-ink); }

/* ===== Context bar 2 ===== */
.ctx2 {
  flex:0 0 auto;
  display:flex; align-items:center; gap:12px;
  padding:8px 20px;
  background:var(--surface);
  border-bottom:1px solid #e3eaed;
}
.ctx2-lbl {
  font-size:11px; font-weight:700; letter-spacing:.06em;
  color:#9aa9af; text-transform:uppercase;
}
.seg {
  display:flex; background:#eef3f4; border-radius:9px; padding:3px;
}
.seg button {
  background:transparent; color:var(--text-muted); border:1px solid transparent;
  padding:6px 14px; border-radius:7px;
  font-weight:600; font-size:13px; cursor:pointer;
}
.seg button.active {
  background:var(--surface); color:#0d5247;
  border-color:#cfe2dc; font-weight:700;
}
.age-input {
  width:64px; text-align:center;
  background:#f5f8f9; border:1px solid var(--border-soft);
  border-radius:9px; color:var(--text);
  font-weight:700; font-size:14px; padding:7px 4px;
  outline:none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.age-input:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,118,110,.14); }
.age-input::placeholder { color:#a85d12; font-weight:600; font-size:12px; }
.age-input:placeholder-shown {
  border-color: #f3ddb8;
  background: #fdf4e7;
}
.age-input.age-needed {
  animation: agepulse .4s ease 3;
  border-color: var(--danger) !important;
  background: #fdecec !important;
}
@keyframes agepulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(220,38,38,.18); }
}
/* age-unit-toggle 2026-08-08: virou .seg (mesmo padrão pill+indicador do
   toggle M/F, ver setupLiquidIndicators) — .age-unit/.age-unit-btn removidas,
   estilo agora vem de ".ctx2 .seg"/".ctx2 .seg-ind" */
.age-required-tag {
  font: italic 500 11.5px/1 'Plus Jakarta Sans';
  color:#a85d12;
  background:#fdf4e7;
  border:1px solid #f3ddb8;
  border-radius:6px;
  padding:4px 8px;
}
/* Esconde tag quando idade preenchida */
body.has-age .age-required-tag { display:none; }
.lgpd {
  margin-left:auto;
  display:inline-flex; align-items:center; gap:8px;
  background:#fdf4e7; border:1px solid #f3ddb8;
  color:#a85d12;
  padding:6px 12px; border-radius:10px;
  font-size:12.5px; font-weight:600;
}

/* ===== Geriatric band ===== */
.geri-band {
  flex:0 0 auto;
  display:flex; align-items:center; gap:12px;
  padding:7px 20px;
  background: linear-gradient(90deg,#fbf6ec,#f6f1e6);
  border-bottom:1px solid #ecdfc4;
  overflow-x:auto;
}
.geri-band-lbl {
  display:inline-flex; align-items:center; gap:7px;
  font-weight:700; font-size:12px;
  color:#8a6d2f; text-transform:uppercase; letter-spacing:.04em;
  flex:0 0 auto;
}
.geri-band-desc { font-size:12.5px; color:#9a8042; font-weight:600; flex:0 0 auto; }
.geri-band-sep { width:1px; height:18px; background:#e3d3ab; flex:0 0 auto; }
.geri-band-chips { display:flex; gap:6px; align-items:center; flex:0 0 auto; }
.geri-band-chips button {
  background:var(--surface); border:1px solid #e6d5ae; color:#7a6328;
  padding:5px 11px; border-radius:9px;
  font-weight:600; font-size:12.5px; cursor:pointer;
  white-space:nowrap;
}
.geri-band-chips button:hover { background:#fffaf0; }
.geri-band-cta {
  flex:0 0 auto; margin-left:auto;
  background:#b8902f; color:#fff; border:none;
  padding:6px 13px; border-radius:9px;
  font-weight:700; font-size:12.5px; cursor:pointer;
  white-space:nowrap;
}
.geri-band-cta:hover { filter:brightness(1.05); }

/* ===== SOAP grid ===== */
.soap-grid {
  flex:1 1 auto;
  display:grid;
  grid-template-columns: minmax(330px,400px) minmax(0,1fr);
  gap:14px;
  padding:14px 20px;
  min-height:0;
}
.col { display:flex; flex-direction:column; gap:12px; min-height:0; min-width:0; overflow:hidden; }

.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl); }
.pad14 { padding:14px; }
.grow { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.pad-chip { padding:11px 14px; }

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

/* --- Tablet (≤1024px) --- */
@media (max-width: 1024px){
  .hd { padding: 10px 14px; gap: 10px; }
  .hd-novo { padding: 8px 14px !important; }
  .ctx1-actions button { padding: 6px 12px !important; font-size: 12.5px; }
  .calc-shell { padding: 16px; }
  .soap-overlay, #scores-overlay, #geri-overlay { width: min(440px, 90vw); }
  .modal-card { max-width: 92vw; }
}

/* --- Tablet portrait / small tablet (≤900px) --- */
@media (max-width: 900px){
  .hd {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    align-items: center;
  }
  .hd-logo { flex: 0 0 auto; }
  .hd-sub { display: none; }
  .hd-nav {
    order: 3;
    width: 100%;
    justify-self: stretch;
    justify-content: center;
  }
  .hd-nav button { flex: 1; justify-content: center; }
  .hd-right { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .hd-privacy { display: none; } /* Chip sumido em telas menores */
  .soap-grid { grid-template-columns: 1fr; overflow-y: auto; padding: 12px; gap: 12px; }
  .col { min-height: auto; overflow: visible; }
  /* Bug real 2026-08-13 (pré-existente, achado ao investigar reclamação "não
     aparece o campo de transcrição/digitação"): .col perde altura definida
     em mobile (regra acima), e .complaints-area/.complaints-scroll usam
     flex:1 1 0 — flex-basis 0 dentro de um flex column de altura auto NÃO
     cresce por falta de espaço livre pra distribuir, resolve pra 0 de
     verdade. Resultado: overflow-y:auto rolando uma caixa de 0px — as
     seções S/O/A/P (#transcript, #subj-text, etc.) ficam no DOM mas
     inalcançáveis, nenhuma rolagem revela o conteúdo. !important necessário
     porque .complaints-area/.complaints-scroll são definidos mais abaixo no
     arquivo (fora do bloco RESPONSIVO) — mesma especificidade, a ordem de
     origem vence a media query sem isso. Fix: larguras automáticas + rolagem
     única no .soap-grid (já overflow-y:auto acima), igual ao resto do mobile. */
  #complaints-area, .complaints-scroll { flex: none !important; overflow: visible !important; }
  .lgpd { width: 100%; margin-left: 0; font-size: 11px; }
  .ctx2 { flex-wrap: wrap; padding: 7px 12px; gap: 8px; }
  .ctx2 .age-required-tag { display: none; }
  /* Calc tabs scroll horizontal */
  #calc-tabs { overflow-x: auto; flex-wrap: nowrap; }
  #calc-tabs::-webkit-scrollbar { display: none; }
  .calc-tab { flex: 0 0 auto !important; font-size: 12.5px !important; padding: 8px 14px !important; }
  /* Drawer ocupa quase tela toda */
  .soap-overlay, #scores-overlay, #geri-overlay { width: min(100vw, 460px); }
  /* Geri band wraps */
  .geri-band { flex-wrap: wrap; padding: 8px 12px; }
  .geri-band-desc { width: 100%; }
}

/* --- Mobile (≤640px) --- */
@media (max-width: 640px){
  .hd { padding: 8px 10px; gap: 6px; }
  .hd-logo { gap: 8px; }
  .logo-sq { width: 30px; height: 30px; }
  .hd-title { font-size: 16px; }
  .hd-novo { padding: 7px 10px !important; font-size: 12.5px !important; }
  .hd-novo span:not(:first-child) { display: none; } /* só ícone "+" */
  .hd-user-av { width: 22px; height: 22px; font-size: 10px; }
  .ctx1-actions { gap: 6px; }
  .ctx1-actions button { padding: 5px 10px !important; font-size: 12px !important; }
  .ctx2 { padding: 6px 10px; font-size: 12.5px; }
  .ctx2 .seg button { padding: 4px 12px !important; font-size: 12px !important; }
  .ctx2 .age-input { width: 50px; }
  .calc-shell { padding: 10px; }
  .calc-tab { font-size: 11.5px !important; padding: 7px 11px !important; }
  /* SOAP cards menos padding */
  .card.pad14 { padding: 11px; }
  /* Botões SOAP drawer footer reorganizam */
  .soap-overlay .row-2 { flex-direction: column; gap: 7px; }
  .soap-overlay .row-2 button { width: 100%; flex: none; }
  /* Geri band cta */
  .geri-band-cta { font-size: 12px; padding: 6px 10px; }
  /* Calc btn-main/limpar empilham */
  #calc-panel .btn-main { width: 100% !important; float: none !important; margin-bottom: 8px; }
  #calc-panel .btn-limpar { width: 100% !important; float: none !important; }
  /* Score card opções menor */
  :is(#scores-overlay, #geri-overlay) .score-opcao { font-size: 14px; min-height: 42px; }
  /* Modal Rastreios fullscreen-like */
  .modal-card { max-width: 100vw; max-height: 100vh; border-radius: 0; }
  /* Forms calc - inputs em 1 coluna */
  #calc-panel .row2 { grid-template-columns: 1fr; gap: 10px; }
  #calc-panel .row3 { grid-template-columns: 1fr; }
}

/* --- Mobile small (≤420px) --- */
@media (max-width: 420px){
  .hd-title { font-size: 15px; }
  .hd-nav button { padding: 6px 10px !important; font-size: 12.5px; }
  .hd-novo svg { width: 14px; height: 14px; }
  .calc-tab { font-size: 11px !important; padding: 6px 9px !important; }
}

/* ===== Voz / recording ===== */
.rec-row { display:flex; gap:9px; align-items:center; }
.btn-rec {
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  background: var(--grad-brand);
  color:#fff; border:none;
  height:46px; border-radius:12px;
  font-weight:800; font-size:14.5px; cursor:pointer;
  transition: opacity .15s, filter .15s;
}
.btn-rec:hover:not(.disabled) { filter:brightness(1.06); }
.btn-rec.disabled {
  background: #cdd9dc;
  color: var(--text-muted);
  cursor: not-allowed;
}
.btn-rec.disabled .rec-dot { background:var(--text-faint); box-shadow:none; }
.rec-dot {
  width:11px; height:11px; border-radius:50%;
  background:#ff5d52;
  box-shadow:0 0 0 3px rgba(255,93,82,.25);
  flex:0 0 auto;
}
.btn-rec.recording .rec-dot { animation: recpulse 1.4s infinite; }
.btn-stop {
  flex:0 0 auto;
  display:flex; align-items:center; gap:7px;
  background:#f1f5f6; border:1px solid #dde6e8; color:#33454c;
  padding:0 15px; height:46px; border-radius:12px;
  font-weight:700; font-size:14px; cursor:pointer;
}
.btn-stop:hover { background:#e7eef0; }
.stop-sq { width:11px; height:11px; background:#33454c; border-radius:2px; }

.filled-badge {
  margin-top:10px;
  display:inline-flex; align-items:center; gap:7px;
  background:var(--surface-brand); border:1px solid #c9e6dd; color:var(--brand-strong);
  padding:6px 12px; border-radius:999px;
  font-weight:700; font-size:12.5px;
}

/* ===== Transcript ===== */
.trans-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.trans-lbl {
  display:flex; align-items:center; gap:7px;
  font-weight:700; font-size:11px; letter-spacing:.06em;
  color:var(--text-muted); text-transform:uppercase;
}
.live-dot { width:8px; height:8px; border-radius:50%; background:#c5d2d6; }
.live-dot.recording { background:var(--danger); animation: recpulse 1.4s infinite; }
.copy-trans {
  display:flex; align-items:center; gap:6px;
  background:transparent; border:1px solid #e1e8ea; color:var(--text-2);
  padding:5px 10px; border-radius:8px;
  font-weight:600; font-size:12px; cursor:pointer;
}
.copy-trans:hover { background:#f3f7f8; }

.transcript {
  flex:1 1 auto;
  min-height:170px;
  background:var(--surface-soft);
  border:1.5px solid #e6edee;
  border-radius:12px;
  padding:13px;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:13px; line-height:1.65;
  color:#1d3138;
  overflow:auto;
  white-space:pre-wrap; word-break:break-word;
}
.transcript.recording { border-color:var(--brand); }
.cursor-blink {
  display:inline-block; width:7px; height:16px;
  background:var(--brand); vertical-align:-3px; margin-left:1px;
  animation: blink 1s step-end infinite;
}
.trans-hint {
  margin-top:10px;
  display:flex; gap:9px; align-items:flex-start;
  background:#eef6f3; border:1px solid #d8ebe4;
  border-radius:10px; padding:9px 11px;
  font-size:12px; line-height:1.5; color:#2c5a4f;
}
.trans-hint svg { flex:0 0 auto; margin-top:1px; }

.add-row { margin-top:10px; display:flex; gap:7px; }
.add-row input {
  flex:1; min-width:0;
  background:#f5f8f9; border:1px solid var(--border-soft); border-radius:10px;
  padding:10px 12px; font-size:13px; outline:none;
}
.add-row input:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,118,110,.14); }
.add-row button {
  flex:0 0 auto;
  background:var(--brand); color:#fff; border:none;
  padding:0 15px; border-radius:10px;
  font-weight:700; font-size:13px; cursor:pointer;
}
.add-row button:hover { background:#0c5e57; }

/* ===== Empty state ===== */
.empty {
  flex:1 1 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  background:var(--surface);
  border:1.5px dashed #d6e0e3;
  border-radius:16px;
  padding:40px;
}
.empty-icon {
  width:60px; height:60px; border-radius:16px;
  background:#eef6f3;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.empty-title { font-weight:700; font-size:16px; color:#33454c; margin-bottom:6px; }
.empty-desc { font-size:13.5px; line-height:1.55; color:var(--text-faint); max-width:340px; }

/* ===== Complaints area ===== */
.complaints-area {
  flex:1 1 0;          /* base 0 + grow → ocupa o resto do .col */
  display:flex; flex-direction:column;
  min-height:0;
  gap:12px;
  overflow:hidden;
}
.queixa-chips {
  flex:0 0 auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
.queixa-chips-lbl {
  font-weight:700; font-size:11px; letter-spacing:.05em;
  color:var(--text-muted); text-transform:uppercase; margin-right:2px;
}
.q-chip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-brand); border:1px solid #cce6dd; color:var(--brand-strong);
  padding:5px 8px 5px 11px; border-radius:999px;
  font-weight:700; font-size:12.5px;
}
.q-chip-count {
  font-weight:700; font-size:10.5px;
  background:var(--surface); color:#5e8b80;
  padding:1px 6px; border-radius:999px;
}
.q-chip-close {
  background:none; border:none; color:inherit;
  cursor:pointer; font-size:13px; line-height:1;
  padding:0; opacity:.6;
}
.q-chip-close:hover { opacity: 1; }

.complaints-scroll {
  flex:1 1 0;
  overflow-y:auto;
  overflow-x:hidden;
  min-height:0;
  padding-right:8px;
  display:flex; flex-direction:column; gap:12px;
  scrollbar-width:thin;
  scrollbar-color:var(--text-faint) transparent;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.complaints-scroll::-webkit-scrollbar { width:10px; }
.complaints-scroll::-webkit-scrollbar-track { background:transparent; }
.complaints-scroll::-webkit-scrollbar-thumb {
  background:var(--text-faint); border-radius:10px;
}
.complaints-scroll::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }

/* ===== SOAP cards (S/O/A/P) ===== */
.soap-card {
  flex:0 0 auto;
  display:flex;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
}
.soap-card-bar { flex:0 0 5px; }
.soap-card.s .soap-card-bar { background:#5b8c7e; }
.soap-card.o .soap-card-bar { background:var(--brand); }
.soap-card.a .soap-card-bar { background:var(--ok); }
.soap-card.p .soap-card-bar { background:var(--info); }
.soap-card-body { flex:1; padding:14px 16px; }
.soap-card-head {
  display:flex; align-items:baseline; gap:9px;
  margin-bottom:13px;
}
.soap-card-head .letter { font-weight:800; font-size:14px; }
.soap-card-head .ttl    { font-weight:700; font-size:13px; color:#33454c; }
.soap-card.s .letter { color:#4f7d70; }
.soap-card.o .letter { color:var(--brand); }
.soap-card.a .letter { color:var(--ok); }
.soap-card.p .letter { color:var(--info); }

#subj-text {
  width:100%; box-sizing:border-box;
  min-height:58px; resize:vertical;
  padding:10px 12px; border-radius:10px;
  border:1px solid var(--border-soft); background:var(--surface-soft);
  font: 500 13px 'Plus Jakarta Sans';
  color:#1d3138; line-height:1.55;
  outline:none;
}
#subj-text:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,118,110,.14); }

.sec-group { margin-top:14px; }
.sec-group:first-child { margin-top:0; }
.sec-group-name {
  display:flex; align-items:center; gap:6px;
  margin-bottom:9px;
  font-weight:700; font-size:12.5px;
}
.sec-group-name .dot { width:6px; height:6px; border-radius:50%; }

.sec { margin-bottom:13px; }
.sec:last-child { margin-bottom:0; }
.sec-lbl {
  font-weight:700; font-size:10px; letter-spacing:.05em;
  color:var(--text-faint); text-transform:uppercase;
  margin-bottom:8px;
}
.sec-lbl.red { color:#c0853a; }

.sec-input, .sec-select {
  width:100%; box-sizing:border-box;
  padding:10px 12px; border-radius:10px;
  font: 600 14px 'Plus Jakarta Sans';
  color:var(--text);
  border:1px solid var(--border-soft);
  background:var(--surface-soft);
  outline:none; transition: all .15s;
}
.sec-input.voice, .sec-select.voice {
  border:1.5px solid var(--brand);
  background:#eef7f4;
  box-shadow:0 0 0 3px rgba(15,118,110,.14);
}
.sec-input:focus, .sec-select:focus {
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,118,110,.14);
}
.sec-select {
  cursor:pointer; appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%237a8b92' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}

.sec-chips { display:flex; flex-wrap:wrap; gap:7px; }
.chip {
  padding:6px 11px; border-radius:var(--r-pill);
  border:1px solid var(--border); background:var(--surface); color:var(--text-2);
  font: 600 12.5px var(--font-sans);
  cursor:pointer; white-space:nowrap;
  transition: all .12s; text-align:left; line-height:1.3;
  display:inline-flex; align-items:center; gap:6px;
}
.chip:hover { background:#f5f8f9; }
.chip.sel { background:var(--surface-brand-2); border-color:var(--brand); color:var(--brand-strong); }
.chip.red { border-color:#ecd6b4; color:var(--warn-ink); background:#fffdf8; }
.chip.red.sel { background:#fdecec; border-color:#e0524a; color:var(--danger-strong); }
.chip.voice.sel { box-shadow:0 0 0 3px rgba(15,118,110,.16); }
.chip-voice-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--brand);
}

/* ===== CID list ===== */
.cid-item {
  display:flex; gap:8px; align-items:center; margin-bottom:8px;
}
.cid-item:last-child { margin-bottom:0; }
.cid-code {
  width:90px; box-sizing:border-box;
  padding:9px 11px; border-radius:10px;
  border:1px solid var(--border-soft); background:var(--surface-soft);
  font: 600 13px 'JetBrains Mono', monospace; outline:none;
}
.cid-desc {
  flex:1; box-sizing:border-box;
  padding:9px 11px; border-radius:10px;
  border:1px solid var(--border-soft); background:var(--surface-soft);
  font-size:13px; outline:none;
}
.cid-name {
  display:flex; align-items:center; gap:6px;
  font-weight:700; font-size:12.5px; color:var(--info);
  margin-bottom:7px; margin-top:8px;
}
.cid-name .dot { width:6px; height:6px; border-radius:50%; background:var(--info); }

/* ===== Gerar SOAP button ===== */
.btn-gen-soap {
  flex:0 0 auto;
  background: var(--grad-brand);
  color:#fff; border:none;
  padding:15px; border-radius:var(--r-xl);
  font-weight:800; font-size:15px; cursor:pointer;
  box-shadow:var(--shadow-cta);
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.btn-gen-soap:hover { filter:brightness(1.06); }

/* ===== Calculadoras ===== */
.calc-shell {
  flex:1 1 auto;
  overflow-y:auto;
  padding:20px;
  display:flex; flex-direction:column; align-items:center;
}
.calc-wrap { width:100%; max-width:900px; }
.calc-tabs {
  display:flex; gap:4px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:5px;
  margin-bottom:16px;
}
.calc-tabs button {
  flex:1; min-width:140px;
  background:transparent; color:var(--text-2); border:none;
  padding:10px; border-radius:10px;
  font-weight:600; font-size:13.5px; cursor:pointer;
}
.calc-tabs button.active {
  background:var(--brand); color:#fff; font-weight:700;
}
.calc-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:18px; padding:24px;
}
.calc-ttl { font-weight:800; font-size:19px; margin-bottom:4px; }
.calc-sub {
  font-size:13px; color:var(--text-faint);
  margin-bottom:20px; border-bottom:1px solid #eef2f4; padding-bottom:16px;
}
.calc-row {
  display:grid; grid-template-columns:1fr 1fr;
  gap:14px; margin-bottom:16px;
}
.calc-field-lbl {
  font-weight:700; font-size:11px; letter-spacing:.04em;
  color:var(--text-faint); text-transform:uppercase;
  margin-bottom:7px;
}
.calc-input {
  width:100%; box-sizing:border-box;
  padding:13px 14px; border-radius:11px;
  border:1px solid var(--border-soft); background:var(--surface-soft);
  font-size:15px; outline:none;
}
.calc-input:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,118,110,.14); }
.calc-sex-row { display:flex; gap:9px; margin-bottom:20px; }
.calc-sex-btn {
  flex:1;
  background:var(--surface); color:var(--text-2);
  border:1px solid var(--border-soft);
  padding:13px; border-radius:11px;
  font-weight:600; font-size:14px; cursor:pointer;
}
.calc-sex-btn.active {
  background:var(--surface-brand-2); color:var(--brand-strong);
  border:1.5px solid var(--brand); font-weight:700;
}
.calc-checks {
  display:flex; flex-direction:column; gap:8px; margin-bottom:16px;
}
.calc-result {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:#f1f9f6; border:1px solid #cfe8e0;
  border-radius:14px; padding:16px 18px; margin-bottom:6px;
}
.calc-result-ttl {
  font-size:12px; font-weight:700;
  color:#5e8b80; text-transform:uppercase; letter-spacing:.05em;
}
.calc-result-val {
  font-size:30px; font-weight:800; color:var(--brand-strong); line-height:1.1;
}
.calc-result-unit { font-size:14px; font-weight:600; color:var(--text-muted); }
.calc-result-desc { font-size: 12px; color:var(--text-muted); margin-top:4px; }
.calc-stage {
  font-weight:700; font-size:13.5px;
  padding:9px 14px; border-radius:10px; white-space:nowrap;
}
.calc-fonte {
  font: italic 500 12px/1.3 'Plus Jakarta Sans';
  color:#9aa9af; margin: 4px 0 16px 2px;
}
.calc-actions { display:flex; gap:10px; }
.calc-actions button {
  border:none; cursor:pointer;
  padding:13px; border-radius:12px;
  font-weight:800; font-size:14px;
}
.calc-actions .primary {
  flex:1;
  background: var(--grad-brand);
  color:#fff;
}
.calc-actions .primary:hover { filter:brightness(1.06); }
.calc-actions .ghost {
  background:var(--surface); border:1px solid var(--border-soft); color:var(--text-2);
  padding:0 22px; font-weight:700; font-size:14px;
}
.calc-actions .ghost:hover { background:#f5f8f9; }

/* ===== Drawers ===== */
.drawer-overlay {
  position:fixed; inset:0; z-index:50;
  background:rgba(10,30,28,.4);
  display:none;
  animation: fadeUp .2s ease;
}
.drawer-overlay.open { display:block; }
.drawer-overlay.open .drawer { animation: slideIn .25s ease; }
.drawer {
  position:fixed; top:0; right:0; bottom:0;
  width:min(420px,92vw);
  background:#f4f8f8;
  z-index:51;
  display:flex; flex-direction:column;
  box-shadow:-12px 0 40px rgba(0,0,0,.22);
  overflow:hidden;     /* trava o drawer pra que o body role */
  min-height:0;
}
.drawer.wide { width:min(560px,94vw); }
.drawer-head {
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 18px;
  color:#fff;
}
.drawer-head.brand { background: var(--grad-brand); }
.drawer-head.geri  { background: linear-gradient(120deg,#8a6d22,#b8902f); }
.drawer-head-ttl {
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:16px;
}
.drawer-head-sub {
  font-weight:500; font-size:12px;
  color:rgba(255,255,255,.78);
  margin-top:2px;
}
.drawer-close {
  background:rgba(255,255,255,.16); border:none; color:#fff;
  width:30px; height:30px; border-radius:9px;
  cursor:pointer; font-size:17px;
}
.drawer-close:hover { background:rgba(255,255,255,.28); }
.drawer-body {
  flex:1 1 0;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:16px 18px;
  display:flex; flex-direction:column; gap:11px;
  scrollbar-width:thin;
  scrollbar-color:var(--text-faint) transparent;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.drawer-body::-webkit-scrollbar { width:10px; }
.drawer-body::-webkit-scrollbar-track { background:transparent; }
.drawer-body::-webkit-scrollbar-thumb { background:var(--text-faint); border-radius:10px; }
.drawer-body::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }
.drawer-foot {
  flex:0 0 auto;
  padding:14px 20px;
  border-top:1px solid var(--border);
  background:var(--surface);
}

/* ===== Score card ===== */
.score-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:13px; padding:13px;
  animation: fadeUp .3s ease;
}
.score-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:7px;
}
.score-name {
  display:flex; align-items:center; gap:8px;
  font-weight:800; font-size:15px; color:var(--text);
}
.score-cat {
  font-weight:800; font-size:10px; letter-spacing:.05em;
  padding:3px 8px; border-radius:6px;
}
.score-ignore {
  background:var(--surface-muted); border:1px solid var(--border-soft); color:var(--text-muted);
  padding:4px 10px; border-radius:8px;
  font-weight:600; font-size:12px; cursor:pointer;
}
.score-ignore:hover { background:#eaeff0; }
.score-desc { font-size:12.5px; line-height:1.5; color:var(--text-2); margin-bottom:11px; }
.score-hint {
  font-size:11.5px; color:#5e8b80;
  background:#f1f9f6; border:1px solid #d8ebe4;
  border-radius:8px; padding:6px 9px; margin-bottom:11px;
}
.score-hint.geri { color:#9a8042; background:#fbf6ec; border-color:#ecdfc4; }

.score-item { margin-bottom:11px; }
.score-item-lbl {
  font-size:12.5px; font-weight:600; color:#33454c;
  margin-bottom:7px; line-height:1.4;
}
.vote-row { display:flex; gap:5px; }
.vote-btn {
  flex:1; min-width:0;
  padding:9px 0; border-radius:8px;
  font-weight:700; font-size:13.5px; cursor:pointer;
  border:1px solid var(--border-soft); background:var(--surface-soft); color:var(--text-2);
}
.vote-btn.sel { border:1.5px solid #b8902f; background:#fbf3e2; color:#8a6d2f; }

.check-row {
  width:100%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  text-align:left;
  padding:9px 11px; border-radius:9px;
  font-weight:600; font-size:12.5px; cursor:pointer;
  margin-bottom:6px;
  border:1px solid var(--border-soft); background:var(--surface-soft); color:#34454c;
}
.check-row.sel { border:1.5px solid var(--brand); background:var(--surface-brand-2); color:var(--brand-strong); }
.check-w {
  flex:0 0 auto; font-weight:800; font-size:11px;
  background:#eef3f4; color:var(--text-2);
  padding:2px 7px; border-radius:6px;
}

.score-result {
  border-radius:12px; padding:12px 14px; margin-bottom:10px;
}
.score-result-lbl {
  font-size:10px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; opacity:.75;
}
.score-result-row {
  display:flex; align-items:baseline; gap:6px; margin:1px 0 4px;
}
.score-result-val { font-size:28px; font-weight:800; line-height:1; }
.score-result-max { font-size:12.5px; font-weight:700; opacity:.8; }
.score-result-band { font-size:12.5px; line-height:1.45; font-weight:700; }

.score-actions-row {
  display:flex; gap:8px; margin-bottom:8px;
}
.score-actions-row > button { flex:1; }
.score-to-soap {
  background:var(--brand); color:#fff; border:none;
  padding:9px; border-radius:9px;
  font-weight:700; font-size:12.5px; cursor:pointer;
}
.score-to-soap:hover { background:#0c5e57; }
.score-fonte {
  font: italic 500 11px/1.3 'Plus Jakarta Sans';
  color:#9aa9af; margin-top: 4px;
}

.score-calc-btn {
  width:100%; background:var(--brand); color:#fff; border:none;
  padding:10px; border-radius:9px;
  font-weight:800; font-size:13px; cursor:pointer; margin-top:4px;
}
.score-calc-btn:hover { background:#0c5e57; }
.score-calc-btn.geri { background:#b8902f; }
.score-calc-btn.geri:hover { filter:brightness(1.05); }
.score-reset-btn {
  width:100%; background:var(--surface);
  border:1px solid #d8e0e3; color:var(--text-2);
  padding:9px; border-radius:9px;
  font-weight:700; font-size:12.5px; cursor:pointer;
}
.score-reset-btn:hover { background:#f5f8f9; }
.score-reset-btn.geri { border-color:#e6d5ae; color:#8a6d2f; }
.score-reset-btn.geri:hover { background:#fffaf0; }

.no-scores {
  font-size:13px; line-height:1.6; color:var(--text-2);
  padding:8px 2px;
}
.score-add-btn {
  display:inline-block; margin:3px 4px 3px 0;
  background:var(--surface); border:1px solid #d8e0e3; color:var(--brand-strong);
  padding:6px 10px; border-radius:8px;
  font-weight:700; font-size:12px; cursor:pointer;
}
.score-add-btn:hover { background:#f1f9f6; }

/* ===== SOAP drawer footer buttons ===== */
.soap-text {
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:18px;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:12.5px; line-height:1.75;
  color:#1d3138;
  white-space:pre-wrap; word-break:break-word;
  margin:0;
}
.row-2 { display:flex; gap:9px; }
.mt9 { margin-top:9px; }
.btn-soap-primary {
  flex:1;
  background: var(--grad-brand);
  color:#fff; border:none;
  padding:13px; border-radius:11px;
  font-weight:800; font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-soap-primary:hover { filter:brightness(1.06); }
.btn-soap-outline {
  flex:1;
  background:var(--surface); border:1.5px solid var(--brand); color:var(--brand-strong);
  padding:13px; border-radius:11px;
  font-weight:800; font-size:14px; cursor:pointer;
}
.btn-soap-outline:hover { background:#f1f9f6; }
.btn-soap-soft {
  flex:1;
  background:var(--surface-muted); border:1px solid var(--border-soft); color:var(--text-2);
  padding:10px; border-radius:10px;
  font-weight:700; font-size:13px; cursor:pointer;
}
.btn-soap-soft:hover { background:#eaeff0; }
.btn-soap-danger {
  flex:1;
  background:var(--surface); border:1px solid #f0d3d0; color:var(--danger-strong);
  padding:10px; border-radius:10px;
  font-weight:700; font-size:13px; cursor:pointer;
}
.btn-soap-danger:hover { background:#fdf1f0; }
.row-4 { display:flex; gap:6px; }
.btn-soap-mini {
  flex:1;
  background:var(--surface-muted); border:1px solid var(--border-soft); color:var(--text-2);
  padding:8px 0; border-radius:9px;
  font-weight:800; font-size:12.5px; cursor:pointer;
}
.btn-soap-mini:hover { background:#eaeff0; }
.btn-soap-mini.copiado { background:#e3f5ee; border-color:#9fd9c3; color:var(--brand-strong); }

/* Janela em que o Groq ainda está substituindo o S: do parser pela versão de
   IA (~1-2s) — trava cópia da versão desatualizada (guarda funcional) e
   sinaliza com o mesmo spinner do badge, pra não parecer travado à toa. */
@keyframes ia-spin { to { transform:rotate(360deg); } }
.badge-ia-loading { display:inline-flex!important; align-items:center; gap:6px; }
.badge-ia-loading::before {
  content:''; width:9px; height:9px; flex:0 0 auto;
  border-radius:50%; border:1.6px solid currentColor; border-top-color:transparent;
  animation:ia-spin .7s linear infinite;
}
.btn-soap-primary.aguardando-ia, .btn-soap-outline.aguardando-ia, .btn-soap-mini.aguardando-ia {
  opacity:.5; cursor:wait; pointer-events:none;
}

/* ===== Modal ===== */
.modal-overlay {
  position:fixed; inset:0; z-index:54;
  background:rgba(10,30,28,.45);
  display:none;
  align-items:center; justify-content:center;
  padding:24px;
  animation: fadeUp .2s ease;
}
.modal-overlay.open { display:flex; }
.modal-card {
  width:min(600px,95vw); max-height:86vh;
  background:var(--surface); border-radius:18px;
  display:flex; flex-direction:column;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.32);
}
.modal-card.sm { width: min(420px, 95vw); }
.modal-head {
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  color:#fff;
}
.modal-head.brand { background: var(--grad-brand); }
.modal-head-ttl {
  display:flex; align-items:center; gap:11px;
  font-weight:800; font-size:17px;
}
.modal-head-sub {
  font-weight:500; font-size:12px;
  color:rgba(255,255,255,.72);
  margin-top:2px;
}
.modal-close {
  background:rgba(255,255,255,.16); border:none; color:#fff;
  width:34px; height:34px; border-radius:50%;
  cursor:pointer; font-size:18px;
}
.modal-close:hover { background:rgba(255,255,255,.28); }
.modal-body {
  flex:1 1 auto; overflow-y:auto;
  padding:16px 20px;
  display:flex; flex-direction:column; gap: 11px;
}
.newatd-msg {
  margin: 0;
  font-size: 13.5px; line-height: 1.5;
  color: var(--text-2);
}

.rastreio-card {
  background:#eaf6f1; border:1px solid #d3ebe1;
  border-radius:14px; padding:14px 16px;
}
.rastreio-card.relevante { background:#fdf4e7; border-color:#f3ddb8; }
.rastreio-card.empty { background:#f5f8f9; border-color:var(--border-soft); }
.rastreio-card h4 {
  font-weight:800; font-size:15.5px; color:var(--brand-strong);
  margin:0 0 6px;
}
.rastreio-card.relevante h4 { color:#a85d12; }
.rastreio-card.empty h4 { color:var(--text-2); }
.rastreio-card p {
  font:500 13.5px/1.55 'Plus Jakarta Sans';
  color:#4a5d64; margin: 0 0 8px;
}
.rastreio-card .fonte {
  font: italic 500 12.5px/1.3 'Plus Jakarta Sans';
  color:#9aa9af;
}

/* ===== Alerta urgente — banner vermelho opaco bloqueante (ref) ===== */
.alerta-urg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  transform: translateY(-100%);
  pointer-events: none;
  transition: transform .25s ease;
  background: transparent;
}
.alerta-urg.open {
  transform: translateY(0);
  pointer-events: auto;
}
.alerta-urg-box {
  background: #c1141d;
  color: #fff;
  padding: 22px 36px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 22px;
  row-gap: 4px;
  align-items: center;
  box-shadow: 0 14px 40px rgba(140, 12, 20, .35);
  border-radius: 0;
  border-left: none;
}
.alerta-urg-box::before {
  grid-row: 1 / 3;
  grid-column: 1;
  align-self: center;
}
.alerta-urg-box > h2 {
  grid-row: 1;
  grid-column: 2;
  align-self: end;
}
.alerta-urg-box > .alerta-urg-conduta,
.alerta-urg-box > .conduta {
  grid-row: 2;
  grid-column: 2;
  align-self: start;
}
.alerta-urg-box > .alerta-urg-btns {
  grid-row: 1 / 3;
  grid-column: 3;
  align-self: center;
}
/* Ícone ⚠ grande dentro de quadrado branco translúcido à esquerda */
.alerta-urg-box::before {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255,255,255,.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
  flex-shrink: 0;
}
.alerta-urg-box .alerta-urg-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.alerta-urg-box h2 {
  margin: 0;
  font: 800 12px/1 'Plus Jakarta Sans';
  text-transform: uppercase;
  letter-spacing: .08em;
  color: transparent;       /* esconde o texto que o engine setText injeta */
  text-indent: -9999px;
  position: relative;
  height: 14px;
  overflow: hidden;
}
.alerta-urg-box h2::before {
  content: "AÇÃO IMEDIATA";
  position: absolute;
  left: 0; top: 0;
  text-indent: 0;
  color: rgba(255,255,255,.92);
}
.alerta-urg-conduta {
  font: 800 16px/1.35 'Plus Jakarta Sans';
  color: #fff;
  margin: 0;
}
.alerta-urg-conduta ul, .alerta-urg-conduta ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.alerta-urg-conduta li {
  margin: 0;
  line-height: 1.35;
  display: inline;
}
.alerta-urg-conduta li + li::before { content: " · "; opacity: .65; }
.alerta-urg-btns {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.alerta-urg-btns button,
.alerta-urg-btns .btn-soap-primary,
.alerta-urg-btns .btn-soap-soft {
  padding: 12px 22px;
  border-radius: 12px;
  font: 700 14px/1 'Plus Jakarta Sans';
  cursor: pointer;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.5);
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.alerta-urg-btns .btn-soap-primary,
.alerta-urg-btns button:first-child {
  background: var(--surface);
  color: #c1141d;
  border-color: #fff;
}
.alerta-urg-btns button:hover { background: rgba(255,255,255,.12); color: #fff; }
.alerta-urg-btns button:first-child:hover,
.alerta-urg-btns .btn-soap-primary:hover {
  background: var(--surface);
  color: #8c0c14;
}
/* Sem reescrita estrutural do HTML, fallback: ícone interno do h2 inline será ocultado por h2 > * (acima),
   restando apenas o texto inserido por ::before. */

/* ===== Toasts — notificações flutuantes (ref) ===== */
#toast-container {
  position: fixed;
  bottom: 84px;
  right: 16px;
  z-index: 10000;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
  max-width: 360px;
}
.toast {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr 26px;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-2);
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(15,40,38,.18);
  font-family: var(--font-sans);
  padding: 14px 16px;
  pointer-events: auto;
  animation: fadeUp .25s ease;
  width: 320px;
  max-width: 100%;
  color: var(--text);
}
.toast.sair { animation: fadeOutRight .22s ease forwards; }
@keyframes fadeOutRight { to { opacity: 0; transform: translateX(20px); } }

.toast .toast-icon {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: var(--surface-muted);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
  flex-shrink: 0;
}
.toast .toast-icon svg {
  width: 18px; height: 18px;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.toast .toast-body {
  font: 700 14px/1.3 'Plus Jakarta Sans';
  color: var(--text);
  min-width: 0;
  word-break: break-word;
}
.toast .toast-body small,
.toast .toast-body .toast-desc {
  display: block;
  font: 500 12.5px/1.45 'Plus Jakarta Sans';
  color: var(--text-2);
  margin-top: 2px;
}
.toast .toast-close {
  background: transparent;
  border: none;
  color: var(--text-faint);
  font: 600 16px/1 'Plus Jakarta Sans';
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  align-self: flex-start;
}
.toast .toast-close:hover { color: #33454c; background: var(--surface-muted); }

/* SUCESSO — verde */
.toast[data-type="success"], .toast[data-type="ok"], .toast.toast-ok {
  border-left-color: #16a34a;
  background: #f0fdf4;
}
.toast[data-type="success"] .toast-icon,
.toast[data-type="ok"] .toast-icon,
.toast.toast-ok .toast-icon {
  background: var(--ok-soft);
  color: #16a34a;
}

/* ERRO TÉCNICO — roxo */
.toast[data-type="error"], .toast[data-type="erro"], .toast.toast-err {
  border-left-color: #7c3aed;
  background: #faf5ff;
}
.toast[data-type="error"] .toast-icon,
.toast[data-type="erro"] .toast-icon,
.toast.toast-err .toast-icon {
  background: #ede9fe;
  color: #7c3aed;
}

/* AVISO — amber */
.toast[data-type="warning"], .toast[data-type="warn"], .toast[data-type="amber"] {
  border-left-color: #f59e0b;
  background: #fffbeb;
}
.toast[data-type="warning"] .toast-icon,
.toast[data-type="warn"] .toast-icon,
.toast[data-type="amber"] .toast-icon {
  background: var(--warn-soft);
  color: var(--warn);
}

/* INFO — teal */
.toast[data-type="info"], .toast.toast-info {
  border-left-color: var(--brand);
  background: #f0fdfa;
}
.toast[data-type="info"] .toast-icon,
.toast.toast-info .toast-icon {
  background: #ccfbf1;
  color: var(--brand);
}

/* ============================================================
   Compatibilidade engine → layout zip
   ============================================================ */

/* engine-bootstrap totalmente escondido */
#engine-bootstrap { display: none !important; }

/* Queixa-sections dentro do Card O do zip — estilo legível */
#soap-o-sections > .queixa-section {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef2f4;
}
#soap-o-sections > .queixa-section:last-child {
  border-bottom: none;
}

/* qs-header (banda do engine com nome da queixa) — vira sub-título inline */
#soap-o-sections .qs-header {
  font: 700 13px/1 'Plus Jakarta Sans';
  color: var(--brand-strong);
  padding: 0 0 10px 0;
  border-radius: 0;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
#soap-o-sections .qs-header::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}
/* esconde o emoji original do qs-header (substituído pelo dot) */
#soap-o-sections .qs-header > span:first-of-type {
  display: none;
}
/* close (×) do qs-header — pequeno e à direita */
#soap-o-sections .qs-header > span:last-child,
#soap-o-sections .qs-header > span[onclick] {
  margin-left: auto;
  width: 20px; height: 20px;
  font-size: 14px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: .6;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
}
#soap-o-sections .qs-header > span[onclick]:hover {
  opacity: 1;
  background: #f0f4f5;
}

/* qs-body — container dos fields */
#soap-o-sections .qs-body {
  padding: 0;
  background: transparent;
  border: none;
}
#soap-o-sections .qs-body .card {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
#soap-o-sections .qs-body .card-title {
  font: 700 12px/1 'Plus Jakarta Sans';
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: 8px;
  border: none;
  padding: 0;
}

/* Fields */
#soap-o-sections .field {
  margin-bottom: 12px;
}
#soap-o-sections .field > label {
  display: block;
  font: 700 10px/1 'Plus Jakarta Sans';
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 7px;
}
#soap-o-sections .field input[type=text],
#soap-o-sections .field input[type=number],
#soap-o-sections .field select,
#soap-o-sections .field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--surface-soft);
  color: var(--text);
  font: 500 14px/1.4 'Plus Jakarta Sans';
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
#soap-o-sections .field input:focus,
#soap-o-sections .field select:focus,
#soap-o-sections .field textarea:focus {
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(15,118,110,.14);
}
/* Highlight de campos preenchidos por voz (engine usa .voz-auto) */
#soap-o-sections .voz-auto {
  border-color: var(--brand) !important;
  background: #eef7f4 !important;
  box-shadow: 0 0 0 3px rgba(15,118,110,.14) !important;
}

/* Radio/check pills do engine */
#soap-o-sections .radio-group,
#soap-o-sections .checks {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
#soap-o-sections .radio-group label,
#soap-o-sections .checks label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid #dbe3e6;
  background: var(--surface);
  color: #34454c;
  font: 600 12.5px/1.3 'Plus Jakarta Sans';
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
#soap-o-sections .radio-group label:hover,
#soap-o-sections .checks label:hover {
  border-color: #b2c2c7;
}
#soap-o-sections .radio-group label:has(input:checked),
#soap-o-sections .checks label:has(input:checked) {
  border-color: var(--brand);
  background: var(--surface-brand-2);
  color: var(--brand-strong);
  font-weight: 700;
}
#soap-o-sections .radio-group input,
#soap-o-sections .checks input {
  display: none;
}
#soap-o-sections .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#soap-o-sections .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

/* Análise auto + alertas do engine */
#soap-o-sections .analise-auto {
  margin-top: 12px;
  padding: 10px 12px;
  background: #eef6f3;
  border: 1px solid #d8ebe4;
  border-radius: 10px;
}
#soap-o-sections .analise-titulo {
  font: 700 11px/1 'Plus Jakarta Sans';
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #1f7a52;
  margin-bottom: 6px;
}
#soap-o-sections .ac-card {
  margin-top: 6px;
}
#soap-o-sections .ac-card-title {
  font: 700 11px/1 'Plus Jakarta Sans';
  color: var(--text-2);
  margin-bottom: 4px;
}
#soap-o-sections .ac-result {
  font: 500 12.5px/1.5 'Plus Jakarta Sans';
  color: #4a5d64;
}
#soap-o-sections .ac-pending { color: var(--text-faint); font-style: italic; }

/* Alertas urgentes inline (#alerta-pa-emergencia etc) — re-estilizar como chip vermelho */
#soap-o-sections .alerta,
#soap-o-sections [id^="alerta-qs-"],
#soap-o-sections #alerta-pa-emergencia {
  margin-top: 12px;
  padding: 12px 14px;
  background: #fdecec;
  border: 1px solid #e0524a;
  border-radius: 12px;
  color: var(--danger-strong);
  font: 500 13px/1.5 'Plus Jakarta Sans';
}
#soap-o-sections .alerta-critico h3,
#soap-o-sections .alerta-conduta h3 {
  font: 700 11px/1 'Plus Jakarta Sans';
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}

/* ===== Rastreios items dentro do modal do zip (#rastreios-overlay) ===== */
.rastreio-vazio { color: var(--text-muted); font-size: 13px; padding: 8px; }
#rastreios-overlay .rastreio-item {
  background:#eaf6f1;
  border:1px solid #d3ebe1;
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:11px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
#rastreios-overlay .rastreio-item:last-child { margin-bottom: 0; }
#rastreios-overlay .rastreio-item.relevante,
#rastreios-overlay .rastreio-item.urgente {
  background:#fff7ec;
  border-color:#f3ddb8;
}
/* esconde emoji/SVG legado — não cabe no novo layout */
#rastreios-overlay .rastreio-emoji {
  display: none !important;
}
#rastreios-overlay .rastreio-emoji svg,
#rastreios-overlay .rastreio-emoji .cr-i {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
#rastreios-overlay .rastreio-titulo {
  font:800 15px/1.3 'Plus Jakarta Sans';
  color:var(--brand-strong);
  margin-bottom:2px;
}
#rastreios-overlay .rastreio-item.relevante .rastreio-titulo,
#rastreios-overlay .rastreio-item.urgente .rastreio-titulo {
  color:#a85d12;
}
#rastreios-overlay .rastreio-desc {
  font:400 13.5px/1.55 'Plus Jakarta Sans';
  color:#4a5d64;
}
#rastreios-overlay .rastreio-fonte {
  font:italic 400 12px/1.4 'Plus Jakarta Sans';
  color:#9aa9af;
  margin-top:4px;
}
#rastreios-overlay .rastreio-texto {
  display:flex;
  flex-direction:column;
  gap:2px;
}

/* ===== Score cards dentro do drawer do zip (#scores-overlay) — ref Likert grid ===== */
:is(#scores-overlay, #geri-overlay) .score-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  margin-bottom:14px;
}
:is(#scores-overlay, #geri-overlay) .score-card:last-child { margin-bottom: 0; }
:is(#scores-overlay, #geri-overlay) .score-card-header {
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 6px;
}
:is(#scores-overlay, #geri-overlay) .score-card-titulo {
  display:flex;
  align-items:center;
  gap:10px;
  font:800 18px/1.2 'Plus Jakarta Sans';
  color:var(--text);
  flex-wrap:wrap;
}
/* Badge categoria — cor dinâmica por palavra-chave */
:is(#scores-overlay, #geri-overlay) .score-card-badge {
  background:var(--warn-soft);
  color:var(--warn-ink);
  font:800 11px/1 'Plus Jakarta Sans';
  letter-spacing:.06em;
  padding:5px 10px;
  border-radius:8px;
  text-transform:uppercase;
}
/* Cores por categoria via :has e atributos do texto */
:is(#scores-overlay, #geri-overlay) .score-card:has(.score-card-badge:where([data-cat="cognicao"], :is([class*="cog"]))) .score-card-badge,
:is(#scores-overlay, #geri-overlay) .score-card .score-card-badge:where([data-cat="cognicao"]) {
  background:#ede9fe; color:#7c3aed;
}
/* Fallback: detecta por texto contendo COGNI */
:is(#scores-overlay, #geri-overlay) .score-card-badge.is-cognicao   { background:#ede9fe !important; color:#7c3aed !important; }
:is(#scores-overlay, #geri-overlay) .score-card-badge.is-mobilidade { background:var(--info-soft) !important; color:#1d4ed8 !important; }
:is(#scores-overlay, #geri-overlay) .score-card-badge.is-medicacao  { background:var(--danger-soft) !important; color:var(--danger-strong) !important; }
:is(#scores-overlay, #geri-overlay) .score-card-badge.is-funcionalidade { background:var(--warn-soft) !important; color:var(--warn-ink) !important; }
:is(#scores-overlay, #geri-overlay) .score-card-badge.is-ansiedade,
:is(#scores-overlay, #geri-overlay) .score-card-badge.is-depressao { background:var(--warn-soft) !important; color:var(--warn-ink) !important; }
:is(#scores-overlay, #geri-overlay) .score-card-badge.is-alcool,
:is(#scores-overlay, #geri-overlay) .score-card-badge.is-tabaco { background:var(--danger-soft) !important; color:var(--danger-strong) !important; }
:is(#scores-overlay, #geri-overlay) .score-card-badge.is-fa { background:var(--info-soft) !important; color:#1d4ed8 !important; }
:is(#scores-overlay, #geri-overlay) .score-card-badge.is-fragilidade { background:var(--warn-soft) !important; color:var(--warn-ink) !important; }

:is(#scores-overlay, #geri-overlay) .score-card-header > div:last-child {
  display:flex;
  align-items:center;
  gap:8px;
}
:is(#scores-overlay, #geri-overlay) .score-card-chevron {
  color:var(--text-muted);
  font-size:14px;
  transition: transform .15s;
  font-family:'Plus Jakarta Sans' !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Esconde o SVG do icon-replacer e usa caracter direto via ::after */
:is(#scores-overlay, #geri-overlay) .score-card-chevron > .cr-i { display: none; }
:is(#scores-overlay, #geri-overlay) .score-card-chevron::after {
  content: "▾";
  font: 700 14px/1 'Plus Jakarta Sans', sans-serif;
  color: inherit;
}
:is(#scores-overlay, #geri-overlay) .score-card.expandido .score-card-chevron { transform: rotate(180deg); }

/* Botão Ignorar — pequeno tag-style cinza */
:is(#scores-overlay, #geri-overlay) .score-card-header button {
  background:var(--surface-muted) !important;
  color:var(--text-2) !important;
  border:1px solid var(--border-soft) !important;
  padding:4px 10px !important;
  border-radius:8px !important;
  font:600 12px/1 'Plus Jakarta Sans' !important;
  cursor:pointer;
}
:is(#scores-overlay, #geri-overlay) .score-card-header button:hover { background:#e8edee !important; }

:is(#scores-overlay, #geri-overlay) .score-card-body {
  display:none;
  margin-top:14px;
}
:is(#scores-overlay, #geri-overlay) .score-card.expandido .score-card-body { display: block; }

/* Descrição da escala — texto cinza após o título */
:is(#scores-overlay, #geri-overlay) .score-card-body > p,
:is(#scores-overlay, #geri-overlay) .score-card-body > .score-desc,
:is(#scores-overlay, #geri-overlay) .score-card-titulo + .score-desc {
  font:400 14px/1.45 'Plus Jakarta Sans';
  color:var(--text-2);
  margin: -2px 0 12px;
}

/* Hint amber explicando escala — "0 = totalmente dependente · 5 = totalmente independente" */
:is(#scores-overlay, #geri-overlay) .score-hint {
  background:var(--warn-soft);
  border:1px solid #fde68a;
  color:var(--warn-ink);
  border-radius:10px;
  padding:10px 14px;
  font:500 13px/1.4 'Plus Jakarta Sans';
  margin-bottom:14px;
  text-align:center;
}
:is(#scores-overlay, #geri-overlay) .score-hint.geri,
:is(#scores-overlay, #geri-overlay) .score-hint.is-funcionalidade { background:var(--warn-soft); color:var(--warn-ink); border-color:#fde68a; }

/* Gatilho — chip mint */
:is(#scores-overlay, #geri-overlay) .score-gatilho {
  display:inline-block;
  font:600 12px/1.3 'Plus Jakarta Sans';
  color:var(--brand-strong);
  background:var(--surface-brand);
  border:1px solid #d8ebe4;
  border-radius:8px;
  padding:5px 10px;
  margin-bottom:12px;
}

/* Pergunta — título + grid horizontal 0-5 */
:is(#scores-overlay, #geri-overlay) .score-pergunta {
  margin-bottom: 14px;
}
:is(#scores-overlay, #geri-overlay) .score-pergunta > label:first-of-type:not(.score-opcao) {
  display:block;
  font:600 15px/1.35 'Plus Jakarta Sans';
  color:var(--text);
  margin-bottom:10px;
  cursor:default;
}
:is(#scores-overlay, #geri-overlay) .score-opcoes {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap:8px;
}
/* Override: usa quantidade real de opções (até 6 numa linha; >=7 quebra em 2 linhas) */
:is(#scores-overlay, #geri-overlay) .score-opcoes:has(.score-opcao:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
:is(#scores-overlay, #geri-overlay) .score-opcoes:has(.score-opcao:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
:is(#scores-overlay, #geri-overlay) .score-opcoes:has(.score-opcao:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
:is(#scores-overlay, #geri-overlay) .score-opcoes:has(.score-opcao:nth-child(5):last-child) { grid-template-columns: repeat(5, 1fr); }
:is(#scores-overlay, #geri-overlay) .score-opcoes:has(.score-opcao:nth-child(6):last-child) { grid-template-columns: repeat(6, 1fr); }
/* 7-9 opções → quebra em 2 linhas */
:is(#scores-overlay, #geri-overlay) .score-opcoes:has(.score-opcao:nth-child(7)) { grid-template-columns: repeat(5, 1fr); }
/* 10+ opções → 5 cols x 2 linhas */
:is(#scores-overlay, #geri-overlay) .score-opcoes:has(.score-opcao:nth-child(10)) { grid-template-columns: repeat(5, 1fr); }

/* Layout vertical para opções com texto longo (marcado via classe pelo wire) */
:is(#scores-overlay, #geri-overlay) .score-opcoes.score-opcoes-long {
  grid-template-columns: 1fr !important;
}
:is(#scores-overlay, #geri-overlay) .score-opcoes-long .score-opcao {
  aspect-ratio: auto !important;
  min-height: 44px;
  padding: 10px 14px !important;
  justify-content: flex-start !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: left;
}
/* Cada .score-opcao vira BOTÃO 0-N (altura fixa, não mais aspect-ratio) */
:is(#scores-overlay, #geri-overlay) .score-opcao {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:8px 10px;
  border:1px solid var(--border);
  background:#f9fafa;
  border-radius:12px;
  font:700 17px/1.2 'Plus Jakarta Sans';
  color:var(--text-2);
  cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
  text-align:center;
}
:is(#scores-overlay, #geri-overlay) .score-opcao:hover {
  background:var(--surface);
  border-color:#cdd9dc;
}
:is(#scores-overlay, #geri-overlay) .score-opcao input[type=radio] {
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
:is(#scores-overlay, #geri-overlay) .score-opcao > span:not(.cr-i) {
  z-index:1;
  pointer-events:none;
}
:is(#scores-overlay, #geri-overlay) .score-opcao:has(input:checked) {
  background:var(--warn-soft);
  border-color:var(--warn);
  color:var(--warn-ink);
}
/* Para scores não-geriátricos (ansiedade GAD, depressão PHQ, etc.) — mint */
:is(#scores-overlay, #geri-overlay) .score-card:has(.score-card-badge.is-ansiedade,
                                .score-card-badge.is-depressao,
                                .score-card-badge.is-cognicao,
                                .score-card-badge.is-fa) .score-opcao:has(input:checked) {
  background:var(--surface-brand-2);
  border-color:var(--brand);
  color:var(--brand-strong);
}

/* Checkbox rows (MEEM, IVCF, Polifarmácia) — label horizontal com +N à direita */
:is(#scores-overlay, #geri-overlay) .score-check {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--border);
  background:#f9fafa;
  border-radius:10px;
  padding:11px 14px;
  margin-bottom:8px;
  cursor:pointer;
  font:500 14px/1.3 'Plus Jakarta Sans';
  color:#33454c;
  transition: background .12s, border-color .12s;
}
:is(#scores-overlay, #geri-overlay) .score-check:hover { background:var(--surface); border-color:#cdd9dc; }
:is(#scores-overlay, #geri-overlay) .score-check input[type=checkbox] { display:none; }
:is(#scores-overlay, #geri-overlay) .score-check:has(input:checked) {
  background:var(--warn-soft);
  border-color:var(--warn);
  color:var(--warn-ink);
  font-weight:700;
}
:is(#scores-overlay, #geri-overlay) .score-check-w,
:is(#scores-overlay, #geri-overlay) .score-check-weight {
  background:var(--surface-muted);
  color:var(--text-muted);
  font:700 12.5px/1 'Plus Jakarta Sans';
  padding:5px 9px;
  border-radius:8px;
  white-space:nowrap;
}
:is(#scores-overlay, #geri-overlay) .score-check:has(input:checked) .score-check-w,
:is(#scores-overlay, #geri-overlay) .score-check:has(input:checked) .score-check-weight {
  background:#fde68a;
  color:var(--warn-ink);
}

/* Botão Calcular escore — dourado para geriátrico, teal pra demais */
:is(#scores-overlay, #geri-overlay) .score-btn-calcular {
  width:100%;
  margin-top:4px;
  padding:14px;
  background:#b8902f;
  color:#fff;
  border:none;
  border-radius:12px;
  font:800 15px/1 'Plus Jakarta Sans';
  cursor:pointer;
  box-shadow: 0 4px 12px rgba(184,144,47,.25);
}
:is(#scores-overlay, #geri-overlay) .score-btn-calcular:hover { background:#a37e26; }
/* Scores teal (não-geriátricos) */
:is(#scores-overlay, #geri-overlay) .score-card:has(.score-card-badge.is-ansiedade,
                                .score-card-badge.is-depressao,
                                .score-card-badge.is-cognicao,
                                .score-card-badge.is-fa) .score-btn-calcular {
  background: var(--grad-brand);
  box-shadow: 0 4px 12px rgba(15,118,110,.28);
}
:is(#scores-overlay, #geri-overlay) .score-card:has(.score-card-badge.is-ansiedade,
                                .score-card-badge.is-depressao,
                                .score-card-badge.is-cognicao,
                                .score-card-badge.is-fa) .score-btn-calcular:hover {
  filter: brightness(1.05);
}

:is(#scores-overlay, #geri-overlay) .score-resultado {
  margin-top:12px;
  padding:14px 16px;
  border-radius:12px;
  font:700 14px/1.45 'Plus Jakarta Sans';
}
:is(#scores-overlay, #geri-overlay) .score-resultado.verde   { background:var(--ok-soft); color:#16a34a; }
:is(#scores-overlay, #geri-overlay) .score-resultado.amarelo { background:var(--warn-soft); color:var(--warn-ink); }
:is(#scores-overlay, #geri-overlay) .score-resultado.vermelho{ background:var(--danger-soft); color:var(--danger-strong); }

:is(#scores-overlay, #geri-overlay) .score-soap-registrado {
  margin-top:8px;
  padding:9px 12px;
  background:var(--ok-soft);
  border:1px solid #bbf7d0;
  border-radius:10px;
  font:700 13px/1.3 'Plus Jakarta Sans';
  color:#16a34a;
  display:flex;
  align-items:center;
  gap:7px;
}
/* Perguntas pendentes — "Perguntar ao paciente" */
:is(#scores-overlay, #geri-overlay) .score-pendentes {
  margin-top: 14px;
  padding: 14px 16px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
}
:is(#scores-overlay, #geri-overlay) .score-pendentes-titulo {
  display:flex;
  align-items:center;
  gap:7px;
  font: 700 12px/1 'Plus Jakarta Sans';
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--warn-ink);
  margin-bottom: 8px;
}
/* Substitui o emoji ❓ por ícone via ::before */
:is(#scores-overlay, #geri-overlay) .score-pendentes-titulo::before {
  content: "";
  display: inline-block;
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a6a23' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
/* Esconde o "❓ " (texto que sobrou após o ícone-replacer não mapear) */
:is(#scores-overlay, #geri-overlay) .score-pendentes-titulo > .cr-i { display: none; }
:is(#scores-overlay, #geri-overlay) .score-pendente-item {
  font: 500 13.5px/1.45 'Plus Jakarta Sans';
  color: #6b5a30;
  padding: 3px 0 3px 4px;
}
/* deixa a setinha "→" do engine destacada em laranja */
:is(#scores-overlay, #geri-overlay) .score-pendente-item::first-letter {
  color: var(--warn);
  font-weight: 700;
}
:is(#scores-overlay, #geri-overlay) .score-btn-soap {
  width:100%;
  margin-top:8px;
  padding:11px;
  background:var(--surface);
  color:var(--brand);
  border:1.5px solid var(--brand);
  border-radius:11px;
  font:700 13.5px/1 'Plus Jakarta Sans';
  cursor:pointer;
}
:is(#scores-overlay, #geri-overlay) .score-btn-soap:hover { background:#eaf6f1; }

/* ===== Queixa chips renderizados pelo wire ===== */
#queixa-chips {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:11px 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  margin-bottom:12px;
}
#queixa-chips .queixa-chips-lbl {
  font:700 11px/1 'Plus Jakarta Sans';
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-right:2px;
}
#queixa-chips .q-chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--surface-brand);
  border:1px solid #cce6dd;
  color:var(--brand-strong);
  padding:5px 8px 5px 11px;
  border-radius:999px;
  font:700 12.5px/1 'Plus Jakarta Sans';
}
#queixa-chips .q-chip-count {
  font:700 10.5px/1 'Plus Jakarta Sans';
  background:var(--surface);
  color:#5e8b80;
  padding:1px 6px;
  border-radius:999px;
}
#queixa-chips .q-chip-close {
  background:none;
  border:none;
  color:inherit;
  cursor:pointer;
  font:600 13px/1 'Plus Jakarta Sans';
  padding:0;
  opacity:.6;
}
#queixa-chips .q-chip-close:hover { opacity: 1; }

/* ===== CID list (Card P) ===== */
#cid-list .cid-item {
  margin-bottom:11px;
}
#cid-list .cid-item:last-child { margin-bottom: 0; }
#cid-list .cid-name {
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:7px;
  font:700 12.5px/1 'Plus Jakarta Sans';
  color:var(--info);
}
#cid-list .cid-name::before {
  content:"";
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--info);
}
#cid-list .cid-code {
  width:90px;
  box-sizing:border-box;
  padding:9px 11px;
  border-radius:10px;
  border:1px solid var(--border-soft);
  background:var(--surface-soft);
  font:600 13px/1 'JetBrains Mono';
  outline:none;
}
#cid-list .cid-desc {
  flex:1;
  box-sizing:border-box;
  padding:9px 11px;
  border-radius:10px;
  border:1px solid var(--border-soft);
  background:var(--surface-soft);
  font:400 13px/1.4 'Plus Jakarta Sans';
  outline:none;
}
#cid-list .cid-code:focus, #cid-list .cid-desc:focus {
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(15,118,110,.14);
}

/* ===== Geri band chips renderizados pelo wire ===== */
.geri-band-chip {
  background:var(--surface);
  border:1px solid #e6d5ae;
  color:#7a6328;
  padding:5px 11px;
  border-radius:9px;
  font:600 12.5px/1 'Plus Jakarta Sans';
  cursor:pointer;
  white-space:nowrap;
  flex:0 0 auto;
}
.geri-band-chip:hover { background:#fdf9ee; border-color:#d8c08a; }

/* ===== Card S textarea ===== */
#subj-text {
  width:100%;
  box-sizing:border-box;
  min-height:58px;
  resize:vertical;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border-soft);
  background:var(--surface-soft);
  font:500 13px/1.55 'Plus Jakarta Sans';
  color:#1d3138;
  outline:none;
}
#subj-text:focus {
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(15,118,110,.14);
}

/* ===== Card A — sub-grupos + red flag chips ===== */
#soap-a-sections .sec-group {
  margin-bottom:15px;
}
#soap-a-sections .sec-group:last-child { margin-bottom: 0; }
#soap-a-sections .sec-group-name {
  display:flex;
  align-items:center;
  gap:6px;
  font:700 12.5px/1 'Plus Jakarta Sans';
  color:#1f7a52;
  margin-bottom:10px;
}
#soap-a-sections .sec-group-name .a-dot {
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--ok);
}
#soap-a-sections .sec-lbl {
  font:700 10px/1 'Plus Jakarta Sans';
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:8px;
}
#soap-a-sections .sec-lbl.red { color:#c0853a; }
#soap-a-sections .sec-chips {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.rf-chip {
  padding:6px 11px;
  border-radius:999px;
  border:1px solid #ecd6b4;
  background:#fffdf8;
  color:var(--warn-ink);
  font:600 12.5px/1.3 'Plus Jakarta Sans';
  cursor:pointer;
  white-space:nowrap;
  transition:all .12s;
}
.rf-chip:hover { background:#fbf5e7; border-color:#d8c08a; }
.rf-chip.sel {
  border-color:#e0524a;
  background:#fdecec;
  color:var(--danger-strong);
}

/* ===== Esconde os blocos "Red flags" DENTRO da queixa-section (Card O)
   pois agora estão no Card A separado ===== */
#soap-o-sections .field:has(label:where([class*="rf"])),
#soap-o-sections .field > label:where([class*="rf"]) { /* fallback */
}
/* Mais simples: detectar pela label "Red flags" e esconder a label + o .checks irmão */
#soap-o-sections .field > label {
  position: relative;
}
/* Quando label começa com "Red flags" — usar JS via wire seria mais robusto;
   por enquanto deixamos visível pra não quebrar (chips do Card A são apenas mirror). */

/* ===== Calculadoras (#calc-tabs + #calc-panel) ===== */
.calc-shell {
  padding: 20px;
  overflow-y: auto;
}
.calc-wrap {
  max-width: 900px;
  margin: 0 auto;
}

/* qs-tabs (ui.js:updateTabsUi) 2026-08-08: antes sem CSS nenhum (herdava
   estilo cru do navegador) — mesma linguagem pill+gradiente de #calc-tabs,
   mas com fundo ESTÁTICO no .active (sem indicador deslizante): o conteúdo
   é recriado via innerHTML a cada troca/fechamento de queixa, o que apagaria
   o elemento do indicador (setupLiquidIndicator não sobrevive a innerHTML=). */
.qs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 5px;
}
.qs-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  font: 700 12.5px/1 'Plus Jakarta Sans';
  color: var(--text-2);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.qs-tab:hover:not(.active) { background: var(--surface); color: #33454c; }
.qs-tab.active {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(15,118,110,.32);
}
.qs-tab-count { font-family: var(--font-mono); font-size: 10px; opacity: .85; }
.qs-tab.complete:not(.active) .qs-tab-count { color: var(--ok); }
.qs-tab-close { opacity: .65; font-weight: 400; margin-left: 2px; }
.qs-tab-close:hover { opacity: 1; }

.calc-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 5px;
  margin-bottom: 16px;
  overflow-x: auto;
}
.calc-tab {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  font: 600 13.5px/1 'Plus Jakarta Sans';
  color: var(--text-2);
  border-radius: 10px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.calc-tab.active {
  background: var(--brand);
  color: #fff;
  font-weight: 700;
}
.calc-tab:hover:not(.active) { background: var(--surface-muted); color: #33454c; }

.calc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
}

/* Pendant: estiliza .painel (engine) dentro de #calc-panel */
#calc-panel > .painel { display: none; padding: 0; max-width: none; margin: 0; }
#calc-panel > .painel.active { display: block; }
#calc-panel .card {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
#calc-panel .card-title {
  font: 800 19px/1.25 'Plus Jakarta Sans';
  color: var(--text);
  margin-bottom: 4px;
  padding-bottom: 0;
  border-bottom: none;
  letter-spacing: -.005em;
}
#calc-panel .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
#calc-panel .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
#calc-panel .field { margin-bottom: 14px; }
#calc-panel .field label {
  display: block;
  font: 700 11px/1 'Plus Jakarta Sans';
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 7px;
}
#calc-panel .field input[type=text],
#calc-panel .field input[type=number],
#calc-panel .field select {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  border-radius: 11px;
  border: 1px solid var(--border-soft);
  background: var(--surface-soft);
  font: 500 15px/1 'Plus Jakarta Sans';
  color: var(--text);
  outline: none;
}
#calc-panel .field input:focus, #calc-panel .field select:focus {
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(15,118,110,.14);
}

#calc-panel .radio-group {
  display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 18px;
}
#calc-panel .radio-group label {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px;
  border-radius: 11px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  font: 600 14px/1 'Plus Jakarta Sans';
  color: var(--text-2);
  cursor: pointer;
}
#calc-panel .radio-group label:has(input:checked) {
  border: 1.5px solid var(--brand);
  background: var(--surface-brand-2);
  color: var(--brand-strong);
  font-weight: 700;
}
#calc-panel .radio-group input { display: none; }

#calc-panel .checks {
  display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px;
}
#calc-panel .checks label {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid #dbe3e6;
  background: var(--surface);
  font: 600 13px/1.3 'Plus Jakarta Sans';
  color: #34454c;
  cursor: pointer;
}
#calc-panel .checks label:has(input:checked) {
  border-color: var(--brand);
  background: var(--surface-brand-2);
  color: var(--brand-strong);
  font-weight: 700;
}
#calc-panel .checks input { display: none; }

/* Linha Calcular ~80% | Limpar ~20% — usa float com margens dentro do card */
#calc-panel .btn-main {
  float: left;
  width: calc(80% - 4px);
  padding: 14px;
  background: var(--grad-brand);
  color: #fff;
  border: none;
  border-radius: 12px;
  font: 800 15px/1 'Plus Jakarta Sans';
  cursor: pointer;
  margin-top: 4px;
  box-shadow: 0 5px 16px rgba(15,118,110,.28);
  box-sizing: border-box;
}
#calc-panel .btn-main:hover { filter: brightness(1.05); }
#calc-panel .btn-limpar {
  float: right;
  width: calc(20% - 4px);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--text-2);
  padding: 14px 8px;
  border-radius: 12px;
  font: 700 13px/1 'Plus Jakarta Sans';
  cursor: pointer;
  margin-top: 4px;
  text-align: center;
  box-sizing: border-box;
}
#calc-panel .btn-limpar:hover { background: var(--surface-muted); }
/* Clear o float pra próximos elementos */
#calc-panel .btn-limpar + .result,
#calc-panel .btn-limpar + .copiar { clear: both; }
/* Garante que o .card contenha os floats */
#calc-panel .card::after {
  content: "";
  display: table;
  clear: both;
}
#calc-panel .copiar {
  width: 100%;
  margin-top: 10px;
  padding: 11px;
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  color: var(--text-2);
  border-radius: 11px;
  font: 700 13px/1 'Plus Jakarta Sans';
  cursor: pointer;
}
#calc-panel .copiar:hover { background: #e8edee; }
#calc-panel .copiar { display: none; }
#calc-panel .copiar.show { display: inline-flex; }

#calc-panel .result {
  display: none;
}
#calc-panel .result.show {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 0;
  padding: 16px 18px;
  background: #f1f9f6;
  border: 1px solid #cfe8e0;
  border-radius: 14px;
  flex-wrap: wrap;
}
#calc-panel .result-valor {
  font: 800 30px/1.1 'Plus Jakarta Sans';
  letter-spacing: -.01em;
  color: var(--brand-strong);
}
#calc-panel .result-label {
  display: inline-block;
  background: #e3f3ec; color: var(--ok);
  font: 700 13.5px/1 'Plus Jakarta Sans';
  padding: 9px 14px;
  border-radius: 10px;
  white-space: nowrap;
}
/* ===== Semântica de cores: normal (bom), atencao (neutro), alto (ruim) ===== */
#calc-panel .result.normal {
  background: #f0fbf4;
  border-color: #c8ecd4;
}
#calc-panel .result.normal .result-valor { color: var(--ok); }
#calc-panel .result.normal .result-label {
  background: var(--ok-soft); color: #15803d;
}
#calc-panel .result.atencao {
  background: #fffbeb;
  border-color: #fde68a;
}
#calc-panel .result.atencao .result-valor { color: #b45309; }
#calc-panel .result.atencao .result-label {
  background: var(--warn-soft); color: #92400e;
}
#calc-panel .result.alto {
  background: #fef2f2;
  border-color: #fecaca;
}
#calc-panel .result.alto .result-valor { color: var(--danger-ink); }
#calc-panel .result.alto .result-label {
  background: var(--danger-soft); color: var(--danger-ink);
}
/* Medidor de 3 segmentos — leitura visual rápida de severidade sem precisar
   ler o texto, complementando (não substituindo) a cor/label já existentes.
   Puramente CSS: os segmentos acendem conforme a classe de tier que o JS já
   aplica no .result (normal/atencao/alto) — nenhuma lógica nova por
   calculadora, mesmo padrão de cor em todas as 6. */
#calc-panel .result-gauge {
  display: flex;
  gap: 3px;
  width: 100%;
  margin: 2px 0 2px;
}
#calc-panel .result-gauge span {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: #dde5e2;
  transition: background .2s;
}
#calc-panel .result.normal .result-gauge span:nth-child(1) { background: var(--ok); }
#calc-panel .result.atencao .result-gauge span:nth-child(1),
#calc-panel .result.atencao .result-gauge span:nth-child(2) { background: var(--warn-ink); }
#calc-panel .result.alto .result-gauge span:nth-child(1),
#calc-panel .result.alto .result-gauge span:nth-child(2),
#calc-panel .result.alto .result-gauge span:nth-child(3) { background: var(--danger-ink); }

#calc-panel .result-desc {
  font: 400 13px/1.5 'Plus Jakarta Sans';
  color: var(--text-muted);
  width: 100%;
  margin-top: 8px;
}
#calc-panel .result-fonte {
  font: italic 400 11px/1.4 'Plus Jakarta Sans';
  color: var(--text-faint);
  width: 100%;
}

/* SVG do icon-replacer do engine (.cr-i) — encaixar no botão sem ficar gigante */
.cr-i, .cr-i svg {
  width: 14px !important;
  height: 14px !important;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.cr-i.cr-i-x svg, .cr-i.cr-i-clipboard svg, .cr-i.cr-i-heart svg {
  width: 14px !important;
  height: 14px !important;
}
/* Botões grandes do engine podem ter ícones maiores (#btn-gen-soap) */
#calc-panel .copiar .cr-i, #calc-panel .copiar .cr-i svg { width: 14px !important; height: 14px !important; }
.btn-gen-soap .cr-i svg { width: 17px !important; height: 17px !important; }
/* Generic limit: nenhum SVG órfão grande no documento */
.modulo.mod-calc svg:not([width]) { width: 16px !important; height: 16px !important; }

/* ===== Feedback modal (engine #feedback-overlay) ===== */
#feedback-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(10,30,28,.40) !important;
  z-index: 9999 !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
#feedback-overlay[style*="display: block"] { display: flex !important; }
#feedback-overlay > div {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.32) !important;
  max-width: 480px !important;
  padding: 28px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Placeholder do #transcript quando vazio + cursor visible quando focado */
#transcript {
  cursor: text;
}
#transcript:empty::before {
  content: "Clique em Transcrever fala do paciente e fale naturalmente — ou digite aqui manualmente. As queixas são detectadas pelo conteúdo.";
  color: #b3c0c4;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.65;
  pointer-events: none;
  white-space: pre-wrap;
  display: block;
}
#transcript:focus {
  outline: 2px solid rgba(15,118,110,.18);
  outline-offset: 2px;
}

/* Alerta urgente — handle <li> + emoji ⚠ inline */
.alerta-urg-box {
  position: relative;
}
.alerta-urg-conduta ul, .alerta-urg-conduta ol {
  margin: 0;
  padding-left: 18px;
}
.alerta-urg-conduta li {
  margin: 4px 0;
  line-height: 1.45;
}
.alerta-urg-conduta li:first-child { margin-top: 0; }
.alerta-urg-box h2 .cr-i,
.alerta-urg-box h2 .cr-i svg {
  width: 18px !important;
  height: 18px !important;
  color: var(--danger-strong);
}
/* dropdown setinha ▾ do user chip — força como texto plain, não SVG */
.hd-user > span:last-child {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Score card chevron — também forçar como texto não-SVG */
.score-card-chevron { font-family: 'Plus Jakarta Sans', sans-serif !important; }

/* ============================================================
   QUEIXA AUTOCOMPLETE — dropdown sob o input
   ============================================================ */
.queixa-autocomplete {
  position: relative;
}
/* Quando aplicada apenas como wrapper (engine HTML), também flexa */
.queixa-autocomplete:not(.add-row) { flex: 1; }
.qx-add {
  position: relative;
}
#queixa-ac-list {
  position: absolute;
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 1100;
  padding: 6px;
  display: none;
}
#queixa-ac-list.queixa-ac-list--down {
  top: calc(100% + 8px);
  bottom: auto;
  box-shadow: 0 18px 38px -10px rgba(13,30,33,.20), 0 2px 8px -2px rgba(13,30,33,.08);
}
#queixa-ac-list.queixa-ac-list--up {
  bottom: calc(100% + 8px);
  top: auto;
  box-shadow: 0 -18px 38px -10px rgba(13,30,33,.20), 0 -2px 8px -2px rgba(13,30,33,.08);
}
#queixa-ac-list.show { display: block; }
#queixa-ac-list .queixa-ac-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font: 500 14px/1.3 'Plus Jakarta Sans';
  color: var(--text);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
#queixa-ac-list .queixa-ac-item:hover,
#queixa-ac-list .queixa-ac-item.active {
  background: var(--surface-brand);
  color: var(--brand-strong);
}
#queixa-ac-list .queixa-ac-item .ac-tag {
  font: 600 10px/1 'Plus Jakarta Sans';
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  padding: 3px 8px;
  background: var(--surface-muted);
  border-radius: 999px;
  margin-left: auto;
  flex-shrink: 0;
}
#queixa-ac-list .queixa-ac-item:hover .ac-tag,
#queixa-ac-list .queixa-ac-item.active .ac-tag {
  background: #cce7df;
  color: var(--brand-strong);
}
#queixa-ac-list .queixa-ac-item .ac-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#queixa-ac-list .queixa-ac-item .ac-text mark {
  background: transparent;
  color: var(--brand-strong);
  font-weight: 700;
  padding: 0;
}
#queixa-ac-list .queixa-ac-empty {
  padding: 14px 16px;
  font: 400 13px/1.45 'Plus Jakarta Sans';
  color: var(--text-muted);
  text-align: center;
}

/* ===== Espaço entre blocos de checks/radio e próximo campo ===== */
#soap-o-sections .checks,
#soap-o-sections .radio-group,
#soap-o-sections .row2,
#soap-o-sections .row3 {
  margin-bottom: 14px;
}
#soap-o-sections .row2 .field,
#soap-o-sections .row3 .field {
  margin-bottom: 0;
}
/* Espaço extra antes de qualquer .field que segue checks/radio-group */
#soap-o-sections .checks + .field,
#soap-o-sections .radio-group + .field,
#soap-o-sections .row2 + .field,
#soap-o-sections .row3 + .field {
  margin-top: 6px;
}

/* ============================================================
   LIQUID INDICATOR — destaque deslizante elástico para grupos
   ============================================================ */
.liquid-ind {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateX(0) translateY(-50%);
  pointer-events: none;
  will-change: transform, width;
  z-index: 0;
  opacity: 0;
}
.hd-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
.hd-nav button {
  position: relative;
  z-index: 1;
  transition: color .25s, border-color .25s;
  padding: 0 18px !important;
}
.hd-nav-ind {
  display: none;
}

#calc-tabs { display: flex; align-items: center; gap: 4px; position: relative; }
#calc-tabs .calc-tab { position: relative; z-index: 1; transition: color .25s; }
.calc-tabs-ind {
  height: calc(100% - 8px);
  background: var(--grad-brand);
  border-radius: 999px;
  box-shadow: 0 4px 12px -2px rgba(15,118,110,.32);
}

.ctx2 .seg { position: relative; }
.ctx2 .seg button { position: relative; z-index: 1; transition: color .25s; }
.ctx2 .seg-ind {
  height: calc(100% - 6px);
  background: var(--grad-brand);
  border-radius: 999px;
  box-shadow: 0 3px 10px -2px rgba(15,118,110,.28);
}

/* ============================================================
   HARMONIZAÇÃO PILL — todos os botões do header e atend tabs
   ============================================================ */
/* hd-nav: underline tabs */
.hd-nav button {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 0 18px !important;
  color: #7a8b92 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.hd-nav button.active {
  color: #0a4f47 !important;
  font-weight: 800 !important;
  border-bottom-color: #0a4f47 !important;
}

/* Outros chips/botões do header */
.hd-privacy { border-radius: 999px; padding: 5px 10px; }
.hd-user { border-radius: 10px; padding: 6px 11px 6px 6px; }
.hd-novo {
  border-radius: 999px !important;
  background: linear-gradient(120deg,#0a4f47,#13796b) !important;
  border: none !important;
  color: #fff !important;
  padding: 8px 14px !important;
  box-shadow: 0 5px 16px rgba(15,118,110,.28) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hd-novo:hover {
  filter: brightness(1.05);
  background: linear-gradient(120deg,#0a4f47,#13796b) !important;
}

.ctx1-actions button { border-radius: 999px; padding: 7px 14px; }

/* Calc tabs — sobre fundo claro */
#calc-tabs {
  background: var(--surface) !important;
  border: 1px solid #dbe5e8 !important;
  border-radius: 999px !important;
  padding: 5px !important;
  box-shadow: 0 2px 6px rgba(20,50,45,.06) !important;
}
.calc-tab {
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--text-2) !important;
  font-weight: 700 !important;
}
.calc-tab.active {
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Patient sex toggle */
.ctx2 .seg {
  display: inline-flex;
  gap: 0;
  background: var(--surface);
  border: 1px solid #dbe5e8;
  border-radius: 999px;
  padding: 4px;
  box-shadow: 0 2px 6px rgba(20,50,45,.06);
}
.ctx2 .seg button {
  background: transparent !important;
  border: none !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  color: var(--text-2) !important;
  font-weight: 700;
  cursor: pointer;
}
.ctx2 .seg button.active {
  color: #fff !important;
  background: transparent !important;
}

/* ── Botão modo noturno ──────────────────────────────────────── */
.hd-dark-btn {
  background: none; border: none; color: #5a7580; cursor: pointer;
  padding: 6px 8px; border-radius: 6px; display: flex; align-items: center;
  gap: 5px; opacity: .75; transition: opacity .15s, background .15s;
}
.hd-dark-btn:hover { opacity: 1; background: rgba(10,79,71,.06); }

/* ── Card P: itens de plano ──────────────────────────────────── */
.plan-item {
  padding: 5px 8px 5px 11px;
  border-left: 3px solid var(--brand-teal);
  margin: 4px 0;
  font-size: 13px;
  color: #1e3a34;
  background: #f0faf8;
  border-radius: 0 4px 4px 0;
}
.plan-empty {
  color: var(--text-muted); font-size: 13px; text-align: center; padding: 10px 8px;
}

/* ── Modo noturno ────────────────────────────────────────────── */
html.dark               { background: #0d1c19; }
html.dark .soap-card-head .ttl { color: #7ec9bc; }
html.dark .letter       { background: rgba(127,227,200,.15); color: #7fe3c8; }
html.dark .soap-card-bar { background: #1e3830; }
html.dark #empty-state  { background: #152620; border-color: #1e3830; }
html.dark .empty-title  { color: #7ec9bc; }
html.dark .qs-header    { background: #1a3028; color: #7fe3c8; border-bottom-color: #1e3830; }
html.dark .qs-body      { background: transparent; }
html.dark .field > label { color: #7ec9bc; }
html.dark .checks label span, html.dark .radio-group label span { color: #b0d4cc; }
html.dark input[type=text], html.dark input[type=number],
html.dark textarea, html.dark select {
  background: #1a2e2a; color: #cce5df; border-color: #3a5a50;
}
html.dark input[type=text]::placeholder,
html.dark textarea::placeholder { color: #4a7a72; }
html.dark .seg          { background: #1a2e2a; }
html.dark .seg button.active { background: #1f3d37; color: #e2f5ee; }
html.dark .cid-item     { border-color: #1e3830; }
html.dark .cid-name     { color: #7ec9bc; }
html.dark .cid-code, html.dark .cid-desc {
  background: #1a2e2a; color: #cce5df; border-color: #2a4540;
}
html.dark .plan-item    { background: #1a2e2a; color: #b0d4cc; border-left-color: #0f9688; }
html.dark .plan-empty   { color: #4a7a72; }
html.dark .sec-group-name { color: #7ec9bc; }
html.dark .sec-lbl      { color: #7ec9bc; }
html.dark .rf-chip      { background: #1a2e2a; color: #b0d4cc; border-color: #2a4540; }
html.dark .rf-chip.sel  { background: #0f3d36; color: #7fe3c8; border-color: #0d9488; }
html.dark .q-chip       { background: #1f3d37; color: #7fe3c8; border-color: #0d9488; }
html.dark .queixa-chips-lbl { color: #5a9e92; }
html.dark #transcript   { color: #cce5df; }
html.dark .add-row input { background: #1a2e2a; color: #cce5df; border-color: #3a5a50; }
html.dark .add-row input::placeholder { color: #4a7a72; }
html.dark .subj-text, html.dark #subj-text {
  background: #1a2e2a; color: #cce5df; border-color: #2a4540;
}
html.dark .trans-hint   { color: #4a7a72; }
html.dark .ctx2         { background: #0e2420; border-bottom-color: #1a3028; }
html.dark .ctx2-lbl     { color: #5a9e92; }
html.dark .age-input    { background: #1a2e2a; color: #cce5df; border-color: #3a5a50; }
html.dark .lgpd         { color: #4a7a72; }
html.dark .geri-band    { background: #1a2410; border-color: #2a3820; }

/* ── Geral anchor (abaixo do card P) ───────────────────────── */
#geral-anchor { margin-top: 8px; }
#geral-anchor .qs-header { border-radius: 8px 8px 0 0; }
#geral-anchor .qs-body   { border-radius: 0 0 8px 8px; border: 1px solid var(--border-soft); border-top: none; }

/* ── Botão Limpar do Geral ──────────────────────────────────── */
/* 13a (handoff "sintomas/microfone/logo"): link sutil sublinhado, sem par
   de ação — "Salvar sintomas" (13b) não foi a opção escolhida. */
.btn-geral-limpar {
  background: none; border: none; color: #5a6c73;
  padding: 3px 2px; font-size: 12px; font-weight: 600; cursor: pointer;
  text-decoration: underline; transition: color .12s;
}
.btn-geral-limpar:hover { color: #1e3a34; }
html.dark .btn-geral-limpar { color: #5a9e92; }
html.dark .btn-geral-limpar:hover { color: #7fe3c8; }
html.dark #geral-anchor .qs-body { border-color: #1e3830; }

/* ── Transcript — dark mode fix ─────────────────────────────── */
html.dark .transcript {
  background: #142820;
  border-color: #244038;
  color: #cce5df;
}
html.dark .transcript.recording { border-color: #7fe3c8; }
html.dark #transcript:empty::before { color: #2e5f52; }

/* ── Geral — pill checkboxes (em qualquer tema) ─────────────── */
#geral-anchor .qs-header { display: none; }
#geral-anchor .qs-body   { padding: 0; }
#geral-anchor .card      { margin: 0; padding: 20px; border-radius: 12px; background: #f7faf9; }

#geral-anchor .field > label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #7a8b92; margin-bottom: 4px; display: block;
}
#geral-anchor .checks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
#geral-anchor .checks label { position: relative; cursor: pointer; }
#geral-anchor .field input[type=text] {
  width: 100%; box-sizing: border-box;
  padding: 8px 11px; border-radius: 10px;
  border: 1px solid #e2e8ec; background: #fff;
  color: var(--text); font: 500 14px/1.4 'Plus Jakarta Sans'; outline: none;
}
html.dark #geral-anchor .field input[type=text] {
  background: #1a2e2a; border-color: #2a4540; color: #cce5df;
}
#geral-anchor .checks input[type=checkbox] {
  position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
#geral-anchor .checks label span {
  display: inline-block; padding: 5px 13px; border-radius: 99px;
  border: 1.5px solid #e2e8ec; color: #3a6a5f; font-size: 13px;
  font-weight: 500; background: #fff; transition: all .12s; user-select: none;
}
#geral-anchor .checks label:has(input:checked) span {
  background: #e3f5f0; border-color: var(--brand-teal); color: #0d5c54; font-weight: 700;
}
#geral-anchor textarea {
  width: 100%; border-radius: 8px; border: 1.5px solid #d0e2dc;
  padding: 8px 10px; font-size: 13px; color: #1d3138;
  background: var(--surface); resize: vertical; font-family: inherit;
}
#geral-anchor textarea:focus { outline: none; border-color: var(--brand-teal); }

/* dark mode Geral pills */
html.dark #geral-anchor .card { background: rgba(255,255,255,.05); border-color: rgba(127,227,200,.1); }
html.dark #geral-anchor .field > label { color: #5a9e92; }
html.dark #geral-anchor .checks label span {
  background: rgba(255,255,255,.05); border-color: rgba(127,227,200,.2); color: #8bc8be;
}
html.dark #geral-anchor .checks label:has(input:checked) span {
  background: rgba(127,227,200,.15); border-color: #7fe3c8; color: #7fe3c8; font-weight: 700;
}
html.dark #geral-anchor textarea {
  background: rgba(255,255,255,.06); border-color: rgba(127,227,200,.15);
  color: #cce5df;
}
html.dark #geral-anchor textarea::placeholder { color: #2e5f52; }

html.dark .soap-card-bar { opacity: .6; }

/* ── Layout v2: col esquerda = Geral + add-queixa ──────────────── */
#left-panel { overflow-y: auto; }
#left-panel #geral-anchor .qs-body { border: none; }
#left-panel .add-queixa-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
html.dark #left-panel .add-queixa-row { border-top-color: #1e3830; }
html.dark #left-panel #geral-anchor .card { background: rgba(255,255,255,.04) !important; border: none !important; }

/* Transcript dentro do S card */
.s-trans-head { margin-top: 10px; }
.soap-card.s .transcript { min-height: 90px; margin-bottom: 8px; }
html.dark .copy-trans { background: transparent; border-color: #2a4540; color: #7ec9bc; }
html.dark .copy-trans:hover { background: #1a2e2a; }

/* ── Demanda administrativa (col esquerda) ──────────────────────── */
.demanda-adm-sep { margin-top: 12px; }
.demanda-adm-sep .card { background: #f4f8f7; border-radius: 12px; }


.demanda-adm-sep .field > label {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #5a8070; margin-bottom: 4px; display: block;
}
.demanda-adm-sep .checks {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px;
}
.demanda-adm-sep .checks input[type=checkbox] {
  position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.demanda-adm-sep .checks label { position: relative; cursor: pointer; }
.demanda-adm-sep .checks label span {
  display: inline-block; padding: 5px 10px; border-radius: 99px;
  border: 1.5px solid var(--border-strong); color: #3a6a5f; font-size: 12.5px;
  font-weight: 500; background: var(--surface); transition: all .12s; user-select: none;
  white-space: nowrap;
}
.demanda-adm-sep .checks label:has(input:checked) span {
  background: #e3f5f0; border-color: var(--brand-teal); color: #0d5c54;
  /* sem font-weight:700 para não alargar o pill ao selecionar */
}
html.dark .demanda-adm-sep .card {
  background: rgba(255,255,255,.04) !important; border: none !important;
}
html.dark .demanda-adm-sep .field > label { color: #5a9e92; }
html.dark .demanda-adm-sep .checks label span {
  background: rgba(255,255,255,.05); border-color: rgba(127,227,200,.2); color: #8bc8be;
}
html.dark .demanda-adm-sep .checks label:has(input:checked) span {
  background: rgba(127,227,200,.15); border-color: #7fe3c8; color: #7fe3c8; font-weight: 700;
}

/* Toggle "Realçar voz baixa" (AGC) + barra de nível de 10 segmentos —
   handoff design "sintomas/microfone/logo", opção 15c (toggle+barra). */
#voz-agc-toggle.on { background: var(--grad-brand) !important; box-shadow: 0 2px 6px -1px rgba(15,118,110,.4); }
#voz-agc-toggle.on #voz-agc-knob { left: 17px !important; }
.voz-agc-seg {
  display: inline-block; width: 4px; height: 12px; border-radius: 1px;
  background: #e2e8ec; transition: background .1s;
}
.voz-agc-seg.on { background: #0d9488; }
html.dark .voz-agc-seg { background: #2a4540; }
html.dark #voz-agc-toggle { background: #3a5a50 !important; }

/* Botão + inline no card de sintomas gerais */
.add-chip-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: #0a4f47;
  color: #fff; border: none; cursor: pointer;
  font-size: 22px; font-weight: 300; line-height: 1;
  transition: filter .15s;
}
.add-chip-pill:hover { filter: brightness(1.1); }

/* Inline add row (dentro do card geral) */
.inline-add-row {
  display: flex; gap: 6px; margin-top: 8px;
}
.inline-add-row input {
  flex: 1; padding: 7px 10px; border-radius: 10px;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  font: 500 13px/1.4 'Plus Jakarta Sans'; color: var(--text); outline: none;
}
.inline-add-row input:focus { border-color: var(--brand-teal); }
.inline-add-row button {
  padding: 7px 13px; border-radius: 10px;
  background: var(--brand); color: #fff; border: none;
  font-size: 14px; cursor: pointer;
}
.inline-add-row button:hover { background: #0d5c54; }
html.dark .inline-add-row input { background: #1a2e2a; border-color: #2a4540; color: #cce5df; }
html.dark .inline-add-row button { background: #1a5c50; }
html.dark .inline-add-row button:hover { background: #0f4a3e; }

/* Textareas pré-editáveis nos cards O, A, P */
.soap-pre-edit {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border-soft); border-radius: 10px;
  background: var(--surface-soft); padding: 10px 12px;
  font-size: 13px; line-height: 1.6; color: #1d3138;
  font-family: inherit; resize: vertical; outline: none;
  margin-bottom: 8px;
}
.soap-pre-edit:focus { border-color: var(--brand-teal); box-shadow: 0 0 0 3px rgba(13,148,136,.12); }
html.dark .soap-pre-edit {
  background: #142820; border-color: #244038;
  color: #cce5df;
}
html.dark .soap-pre-edit::placeholder { color: #2e5f52; }
html.dark .soap-pre-edit:focus { border-color: #7fe3c8; box-shadow: 0 0 0 3px rgba(127,227,200,.12); }

/* CIDs de demanda adm no card A */
#admin-cid-area { margin-bottom: 6px; }
#admin-cid-area .adm-cid-item {
  display: flex; gap: 8px; align-items: center; margin-bottom: 6px;
}
#admin-cid-area .adm-cid-code {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
  background: #eef6f3; border: 1px solid #c8e3da; border-radius: 7px;
  padding: 4px 9px; color: #1d5246; white-space: nowrap;
}
#admin-cid-area .adm-cid-desc {
  font-size: 13px; color: #334e58;
}
html.dark #admin-cid-area .adm-cid-code {
  background: #1a2e2a; border-color: #2a4540; color: #7fe3c8;
}
html.dark #admin-cid-area .adm-cid-desc { color: #b0d4cc; }

/* ── Plan chips — frases editáveis antes de gerar SOAP ─── */
.plan-chips-wrap {
  display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px;
}
.plan-chip {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px 8px 12px;
  border-left: 3px solid var(--brand-teal); border-radius: 0 8px 8px 0;
  background: #f4faf8; font-size: 13px; color: #1d3138; line-height: 1.5;
  transition: background .12s;
}
.plan-chip:hover { background: #eaf5f2; }
.plan-chip-txt { flex: 1; }
.plan-chip-x {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: var(--text-faint); font-size: 16px; line-height: 1; padding: 0 2px;
  border-radius: 4px; transition: color .12s, background .12s;
  margin-top: 1px;
}
.plan-chip-x:hover { color: var(--danger-strong); background: #fde8e7; }
html.dark .plan-chip { background: #142820; border-left-color: #0d9488; color: #cce5df; }
html.dark .plan-chip:hover { background: #1a3028; }
html.dark .plan-chip-x { color: #2e5f52; }
html.dark .plan-chip-x:hover { color: #f09090; background: rgba(180,35,24,.2); }

/* ── Fix inline styles aplicados por JS que escapam do CSS ─── */
html.dark #txt-soap { background: #1a2e2a !important; color: #cce5df !important; border-color: #2a4540 !important; }
html.dark #hd-user-menu { background: #152620 !important; border-color: #1e3830 !important; }
html.dark #hd-user-sair { background: none !important; }

/* ── Dark mode: pills das seções SOAP (checks/radio no formulário) ── */
html.dark #soap-o-sections .radio-group label,
html.dark #soap-o-sections .checks label {
  background: #1a2e2a; border-color: #2a4540; color: #b0d4cc;
}
html.dark #soap-o-sections .radio-group label:hover,
html.dark #soap-o-sections .checks label:hover {
  border-color: #3a6058;
}
html.dark #soap-o-sections .radio-group label:has(input:checked),
html.dark #soap-o-sections .checks label:has(input:checked) {
  background: rgba(127,227,200,.15); border-color: #0d9488; color: #7fe3c8;
}

/* ── Dark mode: chip genérico ── */
html.dark .chip { background: #1a2e2a; border-color: #3a5a50; color: #b0d4cc; }
html.dark .chip:hover { background: #1f3830; }
html.dark .chip.sel { background: rgba(127,227,200,.15); border-color: #0d9488; color: #7fe3c8; }
html.dark .chip.red { background: #2a1c1a; border-color: #5a2e28; color: #e0847c; }
html.dark .chip.red.sel { background: rgba(224,82,74,.2); border-color: #e0524a; color: #f09090; }

/* ── Dark mode: drawer e seus elementos ── */
html.dark .drawer { background: #0f2420; }
html.dark .drawer-foot { background: #0f2420; border-top-color: #1e3830; }
html.dark .score-cat { opacity: .8; }
:is(#scores-overlay, #geri-overlay) html.dark .score-check:hover { background: #1a2e2a; border-color: #2a4540; }

/* ── Dark mode: modal card ── */
html.dark .modal-card { background: #0f2420; }
html.dark .modal-body { color: #cce5df; }

/* ── Dark mode: painel de calculadoras ── */
html.dark .calc-sex-btn { background: #1a2e2a; border-color: #2a4540; color: #b0d4cc; }
html.dark .calc-sex-btn.active { background: rgba(127,227,200,.15); border-color: #0d9488; color: #7fe3c8; }

/* ===== Painel conduta encaixado (opção 1b) ===== */
#soap-editor-row { display:flex; flex:1; min-height:0; overflow:hidden; }
#soap-editor-col { flex:1; min-width:0; padding:16px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:11px; scrollbar-width:thin; scrollbar-color:var(--text-faint) transparent; }
#soap-editor-col::-webkit-scrollbar { width:10px; }
#soap-editor-col::-webkit-scrollbar-thumb { background:var(--text-faint); border-radius:10px; }
#conduta-panel { display:none; width:196px; flex:none; background:var(--surface-soft); border-left:1px solid var(--border); padding:14px 13px; overflow-y:auto; flex-direction:column; scrollbar-width:thin; scrollbar-color:var(--text-faint) transparent; }
#conduta-panel.ativo { display:flex; }
#conduta-panel.urgente { border-left:2px solid var(--danger); }
.conduta-panel-titulo { font-style:italic; font-weight:700; font-size:13px; color:var(--brand-deep); line-height:1.3; }
#conduta-panel.urgente .conduta-panel-titulo { color:var(--danger-strong); }
.conduta-panel-sub { font-size:11px; color:var(--text-2); margin-bottom:8px; }
.conduta-panel-itens { display:flex; flex-direction:column; }
.conduta-item { display:flex; gap:7px; align-items:flex-start; padding:7px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.conduta-item:last-of-type { border-bottom:none; }
.conduta-item input[type=checkbox] { margin-top:2px; accent-color:var(--brand); width:13px; height:13px; flex:none; }
#conduta-panel.urgente .conduta-item input[type=checkbox] { accent-color:var(--danger); }
.conduta-txt { flex:1; font-size:12px; color:var(--text); line-height:1.45; }
.conduta-fonte { display:inline-block; margin-top:4px; font-size:10px; font-weight:600; color:var(--brand-deep); background:var(--surface-brand-2); border-radius:var(--r-pill); padding:2px 7px; }
.conduta-panel-acoes { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.conduta-btn-add { width:100%; border:none; border-radius:var(--r-lg); padding:9px 0; color:#fff; font:800 11.5px var(--font-sans); background:var(--grad-brand); box-shadow:var(--shadow-cta); cursor:pointer; }
#conduta-panel.urgente .conduta-btn-add { background:var(--danger); box-shadow:none; }
.conduta-btn-ignorar { width:100%; border:none; background:transparent; color:var(--text-muted); font:600 11px var(--font-sans); cursor:pointer; padding:4px 0; }

/* ===== Fase 3: Assinaturas de marca ===== */

/* 3.1 Label de seção (uppercase + tracking) */
.brand-label {
  font: var(--label-weight) var(--label-size)/1 var(--font-sans);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* 3.2 Acento itálico editorial */
.brand-em { font-style: italic; color: var(--brand-strong); font-weight: 500; }

/* 3.3 Highlight mint */
.brand-mark {
  background: var(--accent-mint);
  color: var(--accent-mint-ink);
  padding: 0 .28em;
  border-radius: var(--r-xs);
}

/* ===== Popover flutuante: sugestão de conduta (P:) ===== */
/* Bug real 2026-08-09 (E2E): o popover é ancorado no canto inferior direito —
   exatamente onde o drawer do SOAP abre o `.drawer-foot`. Com o drawer aberto
   ele cobria "Copiar sem acentos"/"Limpar"/"Remover contexto clínico" no
   desktop e TODOS os 4 botões (inclusive "Copiar") no mobile, e não some
   sozinho: o médico mirando "Copiar" acertava "Adicionar" e injetava conduta
   que não escolheu. `--drawer-foot-h` é medido em runtime (_ajustarPopoverDrawer,
   clinical.js) porque a altura do rodapé muda com viewport/zoom de fonte. */
#queixa-sugestoes-flutuantes {
  position: fixed;
  right: 16px;
  bottom: 84px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  max-width: 320px;
}
body:has(#soap-overlay.open) #queixa-sugestoes-flutuantes {
  bottom: calc(var(--drawer-foot-h, 249px) + 12px);
}
.sug-conduta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--text-2);
  width: 320px;
  animation: fadeUp .18s ease;
}
.sug-conduta.urgente { border-color: var(--danger); }
.sug-conduta-head {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 13px;
  color: var(--text);
  margin-bottom: 10px;
}
.sug-conduta-head em {
  font-style: italic; font-weight: 500; color: var(--brand-strong);
}
.sug-conduta-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--border-soft);
}
.sug-conduta-item:first-of-type { border-top: none; }
.sug-conduta-item input[type=checkbox] { margin-top: 2px; accent-color: var(--brand); }
.sug-conduta-item .txt { flex: 1; line-height: 1.4; color: var(--text); }
.sug-conduta-item .fonte {
  display: inline-block; margin-top: 3px;
  font-size: 10.5px; font-weight: 600;
  color: var(--brand-strong);
  background: var(--surface-brand);
  border-radius: var(--r-pill);
  padding: 1px 8px;
}
.sug-conduta-acoes { display: flex; gap: 8px; margin-top: 12px; }
.sug-conduta-acoes button {
  flex: 1; font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 600;
  padding: 8px 10px; border-radius: var(--r-md);
  cursor: pointer;
}
.sug-add {
  border: none; color: #fff;
  background: var(--grad-brand);
  box-shadow: var(--shadow-cta);
}
.sug-conduta.urgente .sug-add { background: var(--danger); box-shadow: none; }
.sug-ignore {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
}

/* ===== Plan obs — texto livre acima do plano padrão ===== */
#plan-obs {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-soft);
  color: var(--text);
  font: 400 13px/1.5 var(--font-sans);
  padding: 8px 10px;
  resize: vertical;
  min-height: 44px;
  margin-bottom: 8px;
}
#plan-obs:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--accent-mint-soft); }
#plan-obs::placeholder { color: var(--text-faint); }
html.dark #plan-obs { background: #1a2e2a; border-color: #3a5a50; }

/* ── Dark mode: header branco ───────────────────────────────────────────── */
html.dark .hd {
  background: #0f2420;
  border-bottom-color: #1e3830;
  color: #cce5df;
}
html.dark .hd-title { color: #7fe3c8; }
html.dark .hd-sub { color: rgba(127,227,200,.5); }
html.dark .hd-nav button { color: rgba(127,227,200,.55) !important; border-bottom-color: transparent !important; }
html.dark .hd-nav button.active { color: #7fe3c8 !important; border-bottom-color: #7fe3c8 !important; }
html.dark .hd-privacy { color: #7fe3c8 !important; background: rgba(13,148,136,.15) !important; border-color: rgba(13,148,136,.3) !important; }
html.dark .hd-user { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.12) !important; color: #cce5df !important; }
html.dark .hd-user:hover { background: rgba(255,255,255,.12) !important; }
html.dark .hd-dark-btn { color: #7ec9bc; }
html.dark .hd-dark-btn:hover { background: rgba(127,227,200,.08); }

/* ── Faixa Beta ─────────────────────────────────────────────────────────── */
#beta-faixa {
  flex: 0 0 auto;
  background: linear-gradient(120deg,#0a4f47,#13796b);
  padding: 8px 18px;
  display: flex; align-items: center; gap: 10px;
  font: 700 11.5px 'Plus Jakarta Sans', system-ui, sans-serif;
  color: #fff;
}
#beta-faixa.hidden { display: none; }
#beta-faixa > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#beta-report-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid rgba(255,255,255,.6);
  background: transparent;
  color: #fff;
  font: 700 11px 'Plus Jakarta Sans', system-ui, sans-serif;
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
  transition: background .15s;
}
#beta-report-btn:hover { background: rgba(255,255,255,.1); }
#beta-faixa-close {
  color: rgba(255,255,255,.7);
  background: none; border: none;
  cursor: pointer; font-size: 15px;
  padding: 2px 6px; line-height: 1;
  flex-shrink: 0;
  border-radius: 4px;
  transition: color .12s;
}
#beta-faixa-close:hover { color: #fff; }

/* Aba recolhida */
#beta-tab {
  position: fixed; right: 0;
  top: 64px;
  background: #0a4f47; color: #fff;
  font: 700 10px 'Plus Jakarta Sans', system-ui, sans-serif;
  padding: 6px 10px;
  border-radius: 8px 0 0 8px;
  box-shadow: 0 3px 8px rgba(10,79,71,.2);
  display: none;
  cursor: pointer;
  z-index: 100;
  align-items: center; gap: 5px;
  letter-spacing: .04em;
}
#beta-tab.visible { display: flex; }