/* ============================================================
   Orion UI — CSS por PÁGINA (Fase 8)
   Estilos específicos de telas individuais, extraídos do corpo
   legado do orion.css. NÃO é framework: são regras de uma tela só.

   CARREGAMENTO: <link> próprio no index.html, DEPOIS do orion.css
   — de propósito. Assim estas regras mantêm exatamente a posição
   que tinham no corpo do orion.css (após todos os @import e após o
   CSS de shell/tema), e o cascade não muda ao extrair. Se virasse
   @import dentro do orion.css subiria pro topo e inverteria empates
   de especificidade com o que ficou no corpo.

   Cache-busting: versionado pelo ?v= do próprio <link> (ver index.html).
   ============================================================ */

/* ===================== VERSIONAMENTO (CHANGELOG) ===================== */
.orion-changelog-card{
  padding:20px;
}

/* ===================== PRECIFICACAO ODONTOLOGICA ===================== */
.prec-topbar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);
  padding:16px 20px;
}
.prec-topbar-info{display:flex;flex-direction:column;gap:2px;}
.prec-topbar-info strong{font-size:14px;}
.prec-topbar-info span{font-size:11px;color:var(--text-muted);}

.prec-shell{display:grid;grid-template-columns:1fr 220px;gap:var(--sp-5);align-items:start;}
.prec-main{display:flex;flex-direction:column;gap:var(--sp-5);min-width:0;}
.prec-summary{position:sticky;top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);font-size:11px;}
.prec-summary .prec-section-title{font-size:9.5px;margin-bottom:6px;}
.prec-summary .prec-result-list{font-size:11px;gap:0;}
.prec-summary .prec-result-row{padding:5px 0;}
.prec-summary .prec-result-row.is-total{font-size:12.5px;padding-top:7px;}

.prec-card.is-disabled{opacity:.5;pointer-events:none;}
.prec-card-header{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:16px 20px;cursor:pointer;user-select:none;
}
.prec-card-header h2{display:flex;align-items:center;gap:8px;font-size:15px;margin:0;}
.prec-card-header small{display:block;color:var(--text-muted);font-size:11px;font-weight:400;margin-top:2px;}
.prec-card-header .fa-chevron-down{transition:transform .16s ease;color:var(--text-muted);}
.prec-card.is-collapsed .fa-chevron-down{transform:rotate(-90deg);}
.prec-card-body{padding:0 20px 20px;display:flex;flex-direction:column;gap:var(--sp-5);}
.prec-card.is-collapsed .prec-card-body{display:none;}

.prec-section{border-top:1px solid rgba(255,255,255,.07);padding-top:var(--sp-4);}
.prec-section:first-child{border-top:0;padding-top:0;}
.prec-section-title{
  display:flex;align-items:center;gap:6px;font-size:11px;text-transform:uppercase;
  letter-spacing:.6px;color:var(--text-muted);margin-bottom:var(--sp-3);font-weight:700;
}

.prec-help-btn{
  background:none;border:0;color:var(--text-muted);cursor:pointer;font-size:13px;
  display:inline-flex;align-items:center;padding:0;line-height:1;transition:.16s;
}
.prec-help-btn:hover{color:var(--primary);}
.prec-help-popover{
  position:fixed;z-index:200;max-width:320px;padding:12px 14px;border-radius:var(--r-md);
  border:1px solid var(--panel-border);background:var(--panel-bg);
  backdrop-filter:blur(25px) saturate(160%);-webkit-backdrop-filter:blur(25px) saturate(160%);
  box-shadow:0 12px 32px rgba(0,0,0,.4);font-size:12px;line-height:1.55;color:var(--text-main);
}
.prec-help-popover strong{
  display:block;margin-bottom:4px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.4px;color:var(--primary);
}

.prec-horario-calc{
  border:1px dashed rgba(255,255,255,.12);border-radius:var(--r-sm);padding:var(--sp-3);
  background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:var(--sp-3);
}
.prec-horario-calc-title{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);font-weight:700;}
.prec-horario-calc-hint{font-size:11px;color:var(--text-muted);}
.prec-horario-calc-totais{display:flex;flex-wrap:wrap;gap:var(--sp-3);}
.prec-horario-calc-total{
  display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-pill);
  background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.25);
}
.prec-horario-calc-total span{font-size:11px;color:var(--text-muted);}
.prec-horario-calc-total strong{font-size:14px;font-weight:800;color:var(--primary);font-family:'Fira Code',monospace;}

.prec-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);}
.prec-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);}
.prec-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);}

.prec-checklist{
  max-height:220px;overflow-y:auto;border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-sm);padding:6px;display:flex;flex-direction:column;gap:1px;
}
.prec-checklist label{
  display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;
  font-size:12px;cursor:pointer;transition:.14s;
}
.prec-checklist label:hover{background:rgba(255,255,255,.05);}
.prec-checklist label small{color:var(--text-muted);margin-left:auto;font-size:10px;}
.prec-checklist input[type="checkbox"]{flex:none;}

.prec-item-list{display:flex;flex-direction:column;gap:8px;}
.prec-item-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr)) 32px;
  gap:8px;align-items:end;padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:var(--r-sm);
}
.prec-item-row .field-group{gap:2px;}
.prec-item-row label{font-size:9.5px;}
.prec-item-remove{
  width:30px;height:30px;border-radius:50%;border:0;background:rgba(244,63,94,.12);
  color:var(--rose);cursor:pointer;display:grid;place-items:center;align-self:center;transition:.16s;
}
.prec-item-remove:hover{background:rgba(244,63,94,.22);}
.prec-empty-hint{color:var(--text-muted);font-size:12px;font-style:italic;padding:8px 0;}

.prec-result-list{display:flex;flex-direction:column;gap:2px;font-size:13px;}
.prec-result-row{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px dashed rgba(255,255,255,.08);}
.prec-result-row span:first-child{color:var(--text-muted);}
.prec-result-row strong{color:var(--text-main);font-family:'Fira Code',monospace;}
.prec-result-row.is-total{font-weight:800;font-size:15px;border-bottom:0;padding-top:10px;}
.prec-result-row.is-total strong{color:var(--primary);}

.prec-badge{
  display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:var(--r-pill);
  font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:800;
}
.prec-badge.is-ativo{background:rgba(16,185,129,.15);color:var(--emerald);}
.prec-badge.is-rascunho{background:rgba(148,163,184,.15);color:var(--text-muted);}
.prec-badge.is-arquivado,.prec-badge.is-substituida,.prec-badge.is-inativo{background:rgba(148,163,184,.08);color:var(--text-muted);}

.prec-alert{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-sm);font-size:12px;line-height:1.5;}
.prec-alert i{margin-top:2px;}
.prec-alert.is-warning{background:rgba(249,115,22,.12);color:#fdba74;}
.prec-alert.is-danger{background:rgba(244,63,94,.12);color:var(--rose);}
.prec-alert.is-info{background:rgba(6,182,212,.1);color:#67e8f9;}
.prec-alerts{display:flex;flex-direction:column;gap:6px;}

.prec-table-wrap{overflow:auto;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-sm);}
.prec-table{border-collapse:collapse;width:100%;font-size:12px;}
.prec-table th,.prec-table td{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left;white-space:nowrap;}
.prec-table thead th{text-transform:uppercase;font-size:10px;letter-spacing:.4px;color:var(--text-muted);}
.prec-table tbody tr:hover{background:rgba(255,255,255,.03);}
.prec-table tbody tr:last-child td{border-bottom:0;}

/* Divulgacao progressiva da precificacao: 7 campos na base e 5 na simulacao ficam a
   vista; o resto (assistente de capacidade, detalhamento de custos, riscos, formas de
   pagamento) continua existindo atras de <details>. Nada foi removido do banco nem do
   motor — o que mudou e' o que a tela poe na frente de quem abre pela primeira vez. */
.prec-detalhe{
  border:1px dashed rgba(255,255,255,.14);border-radius:var(--r-sm);margin-top:12px;
}
.prec-detalhe > summary{
  cursor:pointer;list-style:none;padding:9px 12px;font-size:12px;font-weight:600;
  color:var(--text-muted);display:flex;align-items:center;gap:8px;user-select:none;
}
.prec-detalhe > summary::-webkit-details-marker{display:none;}
.prec-detalhe > summary::after{
  content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;font-size:10px;
  margin-left:auto;transition:transform .16s ease;
}
.prec-detalhe[open] > summary{color:var(--text-main);border-bottom:1px solid rgba(255,255,255,.08);}
.prec-detalhe[open] > summary::after{transform:rotate(180deg);}
.prec-detalhe > summary:hover{color:var(--primary);}
.prec-detalhe-corpo{padding:12px;}

/* Campo avancado que mora DENTRO de uma linha (ex.: vinculo do profissional). O
   interruptor e' um so: abrir "Opcoes avancadas" tira `prec-simples` do shell. */
.prec-simples .prec-campo-avancado{display:none;}

.prec-item-nota{
  grid-column:1/-1;font-size:11px;color:var(--text-muted);
  border-top:1px dashed rgba(255,255,255,.08);padding-top:6px;
}
.prec-item-nota strong{font-family:'Fira Code',monospace;color:var(--primary);}

/* Faixas que ligam as DUAS telas de precificacao (base -> simulacao). A base termina
   apontando para a etapa 2; a simulacao sem base salva mostra o bloqueio no lugar do
   formulario, em vez de um formulario que so recusa no fim do preenchimento. */
.prec-proxima-etapa,.prec-sem-base{
  display:flex;align-items:center;gap:var(--sp-4);padding:16px 20px;flex-wrap:wrap;
}
.prec-proxima-etapa > div,.prec-sem-base > div{display:flex;flex-direction:column;gap:2px;flex:1 1 260px;min-width:0;}
.prec-proxima-etapa strong,.prec-sem-base strong{font-size:14px;}
.prec-proxima-etapa span,.prec-sem-base span{font-size:11.5px;color:var(--text-muted);line-height:1.5;}
.prec-sem-base > i{font-size:22px;color:var(--primary);flex:none;}

.prec-summary-mobile-toggle{display:none;}

@media (max-width:1000px){
  .prec-shell{grid-template-columns:1fr;}
  .prec-summary{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:90;max-height:70vh;overflow:auto;
    margin:0;border-radius:var(--r-lg) var(--r-lg) 0 0;transform:translateY(calc(100% - 46px));
    transition:transform .25s ease;box-shadow:0 -12px 32px rgba(0,0,0,.4);
  }
  .prec-summary.is-expanded{transform:translateY(0);}
  .prec-summary-mobile-toggle{
    display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
    padding:12px;border:0;background:none;color:var(--text-main);font-weight:700;
    font-size:12px;text-transform:uppercase;letter-spacing:.4px;cursor:pointer;
  }
  .prec-grid-2,.prec-grid-3,.prec-grid-4{grid-template-columns:1fr;}
}

.orion-changelog-head h2{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 4px;
  font-size:18px;
  color:var(--text-main);
}

.orion-changelog-versao{
  font-size:12px;
  font-weight:600;
  font-family:'Courier New', monospace;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--primary);
}

.orion-changelog-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
}

.orion-changelog-item{
  border:1px solid var(--panel-border,rgba(255,255,255,.08));
  border-radius:var(--r-md,10px);
  overflow:hidden;
  background:rgba(255,255,255,.02);
}

.orion-changelog-item-head{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:14px 16px;
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  color:var(--text-main);
}

.orion-changelog-item-head:hover{
  background:rgba(255,255,255,.03);
}

.orion-changelog-hash{
  flex-shrink:0;
  font-family:'Courier New', monospace;
  font-size:11px;
  padding:3px 8px;
  border-radius:6px;
  background:rgba(255,255,255,.06);
  color:var(--primary);
}

.orion-changelog-item-title{
  flex:1;
  min-width:0;
  font-weight:600;
  font-size:14px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.orion-changelog-item-date{
  flex-shrink:0;
  font-size:12px;
  color:var(--text-muted);
  white-space:nowrap;
}

.orion-changelog-chevron{
  flex-shrink:0;
  font-size:12px;
  color:var(--text-muted);
  transition:transform .18s ease;
}

.orion-changelog-item-head.is-open .orion-changelog-chevron{
  transform:rotate(180deg);
}

.orion-changelog-item-body{
  padding:0 16px 16px 16px;
  border-top:1px solid var(--panel-border,rgba(255,255,255,.06));
  padding-top:14px;
}

.orion-changelog-item-desc{
  font-size:13px;
  line-height:1.6;
  color:var(--text-muted);
}

.orion-changelog-item-desc p{
  margin:0 0 10px;
  text-align:justify;
  text-justify:inter-word;
}

.orion-changelog-item-desc p:last-child{
  margin-bottom:0;
}

.orion-changelog-item-list{
  margin:0 0 10px;
  padding-left:20px;
  list-style:disc;
}

.orion-changelog-item-list:last-child{
  margin-bottom:0;
}

.orion-changelog-item-list li{
  margin-bottom:4px;
  text-align:left;
}

.orion-changelog-item-list li:last-child{
  margin-bottom:0;
}

.orion-changelog-empty{
  font-style:italic;
  color:var(--text-muted);
}

.orion-changelog-item-autor{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  font-size:12px;
  color:var(--text-muted);
}

/* ===================== DIAGNOSTICO FINANCEIRO ===================== */
.diag-page{
  max-width:1500px;
  padding-bottom:var(--sp-5);
  overflow:auto;
  font-size:12px;
}
.diag-header{
  align-items:flex-end;
  padding-top:var(--sp-4);
  padding-bottom:var(--sp-2);
}
.diag-header .orion-header-title h1{
  font-size:20px;
}
.diag-header .orion-header-title p{
  font-size:10px;
}
.diag-actions{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  flex-wrap:wrap;
}
.diag-actions .orion-btn,
.diag-section .orion-btn-mini{
  min-height:30px;
  height:30px;
  padding:0 12px;
  font-size:11px;
  border-radius:10px;
}
.diag-grid{
  display:grid;
  gap:var(--sp-3);
}
.diag-metrics{
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-bottom:var(--sp-3);
}
.diag-metric-card{
  padding:var(--sp-3);
  display:grid;
  gap:4px;
  border-radius:var(--r-sm);
}
.diag-metric-card span,
.diag-metric-card small,
.diag-section p{
  color:var(--text-muted);
}
.diag-metric-card span{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:800;
}
.diag-metric-card strong{
  font-size:18px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.diag-metric-card small{
  font-size:10px;
}
.diag-section{
  padding:var(--sp-3);
  border-radius:var(--r-sm);
  margin-bottom:var(--sp-3);
}
.diag-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-2);
  margin-bottom:var(--sp-2);
}
.diag-section h2{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  margin-bottom:2px;
}
.diag-section h2 i{
  color:var(--primary);
}
.diag-section p{
  font-size:10px;
}
.diag-form-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-3);
}
.diag-form-grid .field-group span{
  font-size:var(--fs-xs);
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:700;
}
/* Campo de imagem do relatório (logo e marca d'água, tela Config). O preview é
   uma moldura tracejada de altura fixa: sem ela o card pula de altura conforme
   a proporção do arquivo enviado. O texto de vazio vem do data-vazio via ::after
   pra o mesmo bloco servir aos dois campos com rótulos diferentes. */
.config-imagem-campo{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  flex-wrap:wrap;
}
.config-imagem-campo .orion-input[type="file"]{max-width:280px;}
.config-imagem-preview{
  min-width:120px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.03);
}
.config-imagem-preview:empty::after{
  content:attr(data-vazio);
  color:var(--text-muted);
  font-size:11px;
}
.config-imagem-preview img{
  max-height:44px;
  max-width:220px;
  object-fit:contain;
}
/* A marca d'água é impressa clara e girada; o preview aproxima isso pra a
   escolha do arquivo não surpreender no PDF. */
.config-imagem-preview--marca img{opacity:.45;}

.diag-warning{
  margin-top:var(--sp-3);
  padding:var(--sp-3);
  border-radius:var(--r-sm);
  background:rgba(244,63,94,.1);
  border:1px solid rgba(244,63,94,.3);
  color:var(--rose);
  font-size:var(--fs-sm);
  display:flex;
  align-items:center;
  gap:8px;
}
.diag-avisos{
  display:grid;
  gap:var(--sp-2);
  margin-bottom:var(--sp-3);
}
.diag-avisos .diag-warning{
  margin-top:0;
  align-items:flex-start;
}
.diag-warning.is-info{
  background:rgba(56,189,248,.1);
  border-color:rgba(56,189,248,.3);
  color:var(--sky, #38bdf8);
}
.diag-periodo{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:var(--sp-3);
}
.diag-periodo .field-group{
  min-width:150px;
}
.diag-periodo-rotulo{
  font-size:var(--fs-xs);
  color:var(--text-muted);
  padding-bottom:10px;
}
.diag-estimado{
  display:inline-block;
  margin-left:6px;
  padding:1px 6px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
  background:rgba(250,204,21,.15);
  border:1px solid rgba(250,204,21,.35);
  color:#facc15;
}
.diag-two-col{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-3);
}
.diag-two-col-wide{
  grid-template-columns:1fr;
}
.diag-table-wrap{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-sm);
}
.diag-edit-table{
  width:100%;
  min-width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  border-spacing:0;
}
.diag-edit-table th,
.diag-edit-table td{
  padding:4px 6px;
  border:1px solid rgba(255,255,255,.075);
  text-align:left;
  vertical-align:middle;
  height:32px;
}
.diag-edit-table th{
  position:sticky;
  top:0;
  z-index:2;
  background:rgba(6,20,34,.98);
  color:var(--text-main);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.25px;
  text-align:center;
  font-weight:800;
  line-height:1.15;
}
.diag-edit-table td{
  font-size:12px;
  overflow:hidden;
  line-height:1.2;
}
.diag-edit-table tfoot td{
  position:sticky;
  bottom:0;
  z-index:1;
  background:rgba(7,7,12,.94);
  color:var(--text-main);
  font-weight:800;
}
.diag-cell-input{
  width:100%;
  max-width:100%;
  min-width:0;
  height:24px;
  padding:2px 6px;
  font-size:11px;
  border-radius:4px;
  box-sizing:border-box;
  background:rgba(255,255,255,.025);
  box-shadow:none;
}
.diag-cell-input:focus{
  box-shadow:inset 0 0 0 1px var(--primary);
}
.diag-cell-input[type="number"]{
  appearance:textfield;
  -moz-appearance:textfield;
  text-align:right;
  font-family:'Fira Code',monospace;
}
.diag-cell-input[type="number"]::-webkit-outer-spin-button,
.diag-cell-input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.diag-money{
  text-align:right !important;
  font-family:'Fira Code',monospace;
  white-space:nowrap;
  font-size:12px;
}
.diag-edit-table select.diag-cell-input{
  text-align:left;
  font-family:inherit;
}
.diag-edit-table td:has(.orion-icon-btn){
  text-align:center;
}
.diag-fin-table th{text-align:center;}
.diag-fin-table th:nth-child(1),
.diag-fin-table td:nth-child(1){width:20%;text-align:left;}
.diag-fin-table th:nth-child(2),
.diag-fin-table td:nth-child(2){width:11%;text-align:right;}
.diag-fin-table th:nth-child(3),
.diag-fin-table td:nth-child(3){width:9%;text-align:right;}
.diag-fin-table th:nth-child(4),
.diag-fin-table td:nth-child(4){width:8%;text-align:center;}
.diag-fin-table th:nth-child(5),
.diag-fin-table td:nth-child(5){width:10%;text-align:right;}
.diag-fin-table th:nth-child(6),
.diag-fin-table td:nth-child(6){width:11%;text-align:right;}
.diag-fin-table th:nth-child(7),
.diag-fin-table td:nth-child(7){width:11%;text-align:right;}
.diag-fin-table th:nth-child(8),
.diag-fin-table td:nth-child(8){width:10%;text-align:right;}
.diag-fin-table th:nth-child(9),
.diag-fin-table td:nth-child(9){width:10%;text-align:right;}
.diag-fin-table th:nth-child(10),
.diag-fin-table td:nth-child(10){width:32px;text-align:center;}
.diag-colab-table th{text-align:center;}
.diag-colab-table th:nth-child(1),
.diag-colab-table td:nth-child(1){width:46%;text-align:left;}
.diag-colab-table th:nth-child(2),
.diag-colab-table td:nth-child(2){width:18%;text-align:center;}
.diag-colab-table th:nth-child(3),
.diag-colab-table td:nth-child(3){width:36%;text-align:right;}
.diag-compras-table th{text-align:center;}
.diag-compras-table th:nth-child(1),
.diag-compras-table td:nth-child(1){width:34%;text-align:left;}
.diag-compras-table th:nth-child(2),
.diag-compras-table th:nth-child(3),
.diag-compras-table th:nth-child(4){width:22%;}
.diag-compras-table td:nth-child(2),
.diag-compras-table td:nth-child(3),
.diag-compras-table td:nth-child(4){width:22%;text-align:right;}
.diag-markup-table th{text-align:center;}
.diag-markup-table th:nth-child(1),
.diag-markup-table td:nth-child(1){width:36%;text-align:left;}
.diag-markup-table th:nth-child(2),
.diag-markup-table th:nth-child(3),
.diag-markup-table th:nth-child(4){width:21.33%;}
.diag-markup-table td:nth-child(2),
.diag-markup-table td:nth-child(3),
.diag-markup-table td:nth-child(4){width:21.33%;text-align:right;}
.diag-custos-table th{text-align:center;}
.diag-custos-table th:nth-child(1),
.diag-custos-table td:nth-child(1){width:64px;text-align:center;font-weight:800;color:var(--primary);}
.diag-custos-table th:nth-child(2),
.diag-custos-table td:nth-child(2){width:auto;text-align:left;}
.diag-custos-table th:nth-child(3),
.diag-custos-table td:nth-child(3){width:92px;text-align:center;}
.diag-custos-table th:nth-child(4),
.diag-custos-table td:nth-child(4),
.diag-custos-table th:nth-child(5),
.diag-custos-table td:nth-child(5){width:118px;text-align:right;}
.diag-custos-table .diag-cost-group td,
.diag-custos-table .diag-cost-result td{
  background:rgba(255,255,255,.035);
  font-weight:900;
  color:var(--text-main);
}
.diag-custos-table .diag-cost-result td{
  background:rgba(0,229,255,.055);
}
.diag-read-table td:nth-child(1){
  color:var(--primary);
  font-weight:800;
  font-size:13px;
}
.diag-kv{
  display:flex;
  justify-content:space-between;
  gap:var(--sp-2);
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.diag-kv:last-child{
  border-bottom:0;
}
.diag-kv span{
  color:var(--text-muted);
  font-size:11px;
}
.diag-kv strong{
  text-align:right;
  font-size:13px;
}
.diag-page.is-loading{
  opacity:.55;
  pointer-events:none;
}

.dre-filters{
  display:flex;
  align-items:flex-end;
  gap:var(--sp-3);
  flex-wrap:wrap;
}
.dre-filters .field-group{
  min-width:120px;
}
.dre-table-wrap{
  overflow:auto;
  max-height:70vh;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-sm);
}
.dre-table{
  border-collapse:collapse;
  border-spacing:0;
  width:100%;
  font-size:12px;
}
.dre-table th,
.dre-table td{
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.06);
  white-space:nowrap;
}
.dre-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:rgba(6,20,34,.98);
  color:var(--text-main);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.3px;
  font-weight:800;
}
.dre-table tbody td:first-child{
  color:var(--primary);
  font-weight:700;
}
.dre-col-money{
  text-align:right;
  font-family:'Fira Code',monospace;
}
.dre-col-pct{
  text-align:right;
  color:var(--text-muted);
  font-size:11px;
}
.dre-table tr.dre-group td{
  background:rgba(255,255,255,.04);
  font-weight:900;
  color:var(--text-main);
  text-transform:uppercase;
  font-size:10.5px;
  letter-spacing:.3px;
}
.dre-table tr.dre-subtotal td{
  background:rgba(255,255,255,.025);
  font-weight:800;
  border-top:1px solid rgba(255,255,255,.15);
}
.dre-table tr.dre-result td{
  background:rgba(0,229,255,.06);
  font-weight:900;
  color:var(--text-main);
}
.dre-table tr.dre-result-final td{
  background:rgba(16,185,129,.1);
}
.dre-table tr.dre-pct-row td{
  background:rgba(255,255,255,.015);
  color:var(--text-muted);
  font-size:10.5px;
  font-style:italic;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.dre-table tr.dre-warning td{
  background:rgba(249,115,22,.12);
  color:#fdba74;
}
.dre-table tr.dre-warning-row td{
  background:rgba(249,115,22,.05);
  color:#fdba74;
}
.dre-aviso{
  margin-top:6px;
  color:#fdba74;
  font-size:var(--fs-xs);
  display:flex;
  align-items:center;
  gap:6px;
}
.dre-aviso i{font-size:11px;}
.dre-table.is-loading{
  opacity:.5;
  pointer-events:none;
}

/* diagnostico — responsivo. Estava parado no fim da secao do RELATORIO
   COMPARATIVO desde o corte da Fase 8 (as duas telas sairam juntas do
   orion.css); voltou para a secao dona das classes. */
@media (max-width:1100px){
  .diag-metrics,
  .diag-form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .diag-two-col,
  .diag-two-col-wide{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .diag-metrics,
  .diag-form-grid{
    grid-template-columns:1fr;
  }
  .diag-actions{
    width:100%;
  }
  .diag-actions .orion-btn{
    flex:1;
    justify-content:center;
  }
}

/* ===================== RELATORIO COMPARATIVO ===================== */
.rc-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--sp-3);
  margin-bottom:var(--sp-3);
}
.rc-kpi-card{
  padding:var(--sp-3);
  border-radius:var(--r-sm);
}
.rc-kpi-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:800;
  color:var(--text-muted);
}
.rc-kpi-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
  margin-top:6px;
  font-size:13px;
}
.rc-kpi-row .rc-kpi-tag{
  color:var(--text-muted);
  font-size:10px;
  white-space:nowrap;
}
.rc-kpi-row strong{
  font-family:'Fira Code',monospace;
  font-size:14px;
}
.rc-kpi-delta{
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11.5px;
  font-weight:700;
  padding:3px 9px;
  border-radius:20px;
}
.rc-kpi-delta.is-up{ color:var(--emerald); background:rgba(16,185,129,.12); }
.rc-kpi-delta.is-down{ color:var(--rose); background:rgba(244,63,94,.12); }
.rc-kpi-delta.is-flat{ color:var(--text-muted); background:rgba(255,255,255,.05); }

.rc-wf-group{ margin-bottom:14px; }
.rc-wf-row{
  display:grid;
  grid-template-columns:170px 1fr 120px;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  font-size:12px;
}
.rc-wf-label{ text-align:right; color:var(--text-main); }
.rc-wf-track{
  position:relative;
  height:22px;
  background:rgba(255,255,255,.05);
  border-radius:4px;
}
.rc-wf-track::before{
  content:'';
  position:absolute;
  left:50%;
  top:-3px;
  bottom:-3px;
  width:1px;
  background:rgba(255,255,255,.18);
}
.rc-wf-fill{
  position:absolute;
  top:2px;
  bottom:2px;
  border-radius:4px;
  opacity:.92;
}
.rc-wf-fill.is-up{ background:var(--emerald); }
.rc-wf-fill.is-down{ background:var(--rose); }
.rc-wf-val{
  font-family:'Fira Code',monospace;
  font-size:12px;
  font-weight:700;
}
.rc-wf-val.is-up{ color:var(--emerald); }
.rc-wf-val.is-down{ color:var(--rose); }
.rc-wf-total{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed rgba(255,255,255,.18);
  display:flex;
  justify-content:space-between;
  font-weight:800;
  font-size:13px;
}

.rc-subtitle{
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.4px;
  margin:16px 0 8px;
  color:var(--text-main);
  font-weight:800;
  display:flex;
  align-items:center;
  gap:8px;
}
.rc-subtitle:first-child{ margin-top:0; }

.rc-heat-table td.rc-heat-cell{
  text-align:right;
  font-family:'Fira Code',monospace;
  font-size:11px;
}

.rc-movers-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.4px;
  font-weight:800;
  color:var(--text-main);
  margin:16px 0 8px;
}
.rc-movers-title:first-child{ margin-top:0; }
.rc-movers-empty{ color:var(--text-muted); font-size:12px; }

.rc-recs{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
  counter-reset:rcacao;
}
.rc-recs li{
  counter-increment:rcacao;
  position:relative;
  padding:14px 16px 14px 54px;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}
.rc-recs li::before{
  content:counter(rcacao, decimal-leading-zero);
  position:absolute;
  left:14px;
  top:12px;
  font-size:20px;
  font-weight:800;
  color:var(--primary);
}
.rc-recs li h4{ margin:0 0 4px; font-size:13px; }
.rc-recs li p{ margin:0; font-size:12px; color:var(--text-muted); }
.rc-recs li .rc-tag{
  font-size:10px;
  color:var(--emerald);
  background:rgba(16,185,129,.12);
  padding:2px 8px;
  border-radius:20px;
  margin-left:8px;
  white-space:nowrap;
}

@media print{
  .orion-topbar, .orion-sidebar, .ai-float-btn, .rc-filters, #rcPrintBtn{ display:none !important; }
  #page-content{ margin:0 !important; padding:0 !important; }
  body{ background:#fff; }
  .orion-card{ break-inside:avoid; }
  .dre-table-wrap{ max-height:none !important; overflow:visible !important; }
}

@media (max-width:1100px){
  .dre-filters{
    width:100%;
  }
  .rc-wf-row{
    grid-template-columns:110px 1fr 90px;
  }
}

/* ===================== COMPARADOR T0xTF ===================== */
.comparador-tray{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:60;
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:12px 16px;
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  backdrop-filter:blur(25px) saturate(160%);
  -webkit-backdrop-filter:blur(25px) saturate(160%);
  border-radius:var(--r-lg);
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  max-width:calc(100vw - 48px);
}
.comparador-tray.hidden{display:none;}
.comparador-tray-chips{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  max-width:min(60vw,640px);
}
.comparador-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 8px 6px 12px;
  background:rgba(249,115,22,.1);
  border:1px solid rgba(249,115,22,.3);
  border-radius:999px;
  font-size:var(--fs-xs);
  color:var(--text-main);
  white-space:nowrap;
}
.comparador-chip button{
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:var(--text-muted);
  cursor:pointer;
  font-size:10px;
  flex-shrink:0;
}
.comparador-chip button:hover{color:var(--rose);}

/* O shell bespoke do comparador (.comparador-modal-overlay/-box/-head/-body) saiu na
   Fase 8: virou .orion-modal--xl. Só o conteúdo (loading, tabela, chips) segue aqui. */
.comparador-loading{
  text-align:center;
  color:var(--text-muted);
  padding:var(--sp-6);
}
.comparador-table-wrap{overflow-x:auto;}
.comparador-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);}
.comparador-table thead th{
  text-align:left;
  padding:10px 14px;
  color:var(--text-muted);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.5px;
  border-bottom:1px solid var(--panel-border);
  white-space:nowrap;
}
.comparador-table tbody td{
  padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.05);
  white-space:nowrap;
}
.comparador-row-label{color:var(--text-main);font-weight:600;}
.comparador-col-value{color:var(--text-main);}
.comparador-col-variacao{font-weight:700;text-align:right;}
.comparador-col-variacao.is-positive{color:var(--emerald);}
.comparador-col-variacao.is-negative{color:var(--rose);}
.comparador-section-row td{
  padding-top:20px;
  font-weight:700;
  color:var(--primary);
  text-transform:uppercase;
  font-size:var(--fs-xs);
  letter-spacing:.5px;
  border-bottom:1px solid var(--panel-border);
}
[data-theme="claro"] .comparador-table tbody td,
[data-theme="polar"] .comparador-table tbody td,
[data-theme="solar"] .comparador-table tbody td{
  border-bottom:1px solid rgba(15,23,42,.08);
}


/* ===================== PERMISSÕES ===================== */
/* Sem margem vertical: é filho único do .orion-modal__body, que já é flex com
   gap. A margem herdada do modal legado somava ao gap e deixava este modal com
   ~32px entre header/conteúdo e conteúdo/footer, contra os 16px de todos os
   outros. */
.permissions-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-4);
}
.permission-group-title{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:8px;
  margin:var(--sp-2) 0 calc(var(--sp-2) * -1);
  padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--panel-border);
  color:var(--primary);
  font-size:var(--fs-sm);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
}
.permission-group-title i{
  font-size:var(--fs-base);
}
.permission-module{
  padding:var(--sp-4);
  border-radius:var(--r-sm);
}
.permission-module h3{
  font-size:var(--fs-sm);
  margin-bottom:var(--sp-3);
  text-transform:uppercase;
  letter-spacing:1px;
}
.permission-options{
  display:grid;
  gap:8px;
}
.permission-option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--text-muted);
  font-size:var(--fs-sm);
  line-height:1.45;
}
.permission-option input{
  margin-top:2px;
  accent-color:var(--primary);
}

/* ===================== SELETOR DE MÓDULOS ===================== */
/* Cards por grupo de módulos em Tipos de Empresa, Empresas e Controlador Geral
   (assets/js/orion-modulos-picker.js). Reusa .permission-module/.permission-
   options/.permission-option do bloco acima — é o mesmo componente visual que
   o modal de Permissões, que foi o pedido.

   Grid com auto-fit em vez do repeat(2) fixo do .permissions-grid: aqui o
   número de cards varia com o cadastro de grupos (4 hoje, 1 numa base nova) e
   estas telas abrem em modal, que no celular ocupa a largura toda. Com duas
   colunas fixas um card de 19 módulos ficaria com ~150px de texto no mobile. */
.modulos-picker{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
.modulos-picker__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--sp-2);
}
.modulos-picker__resumo{
  color:var(--text-muted);
  font-size:var(--fs-sm);
}
.modulos-picker__bar-actions{
  display:flex;
  gap:var(--sp-2);
}
.modulos-picker__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--sp-4);
  /* Cards de 5 e de 19 módulos na mesma linha: sem isto o menor estica e fica
     com meio card de vazio embaixo. */
  align-items:start;
}
.modulos-picker__head{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  margin-bottom:var(--sp-3);
  padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--panel-border);
}
/* Zera o margin-bottom que .permission-module h3 aplica: aqui quem espaça é o
   .modulos-picker__head. */
.modulos-picker__head h3{
  flex:1;
  min-width:0;
  margin:0;
}
.modulos-picker__count{
  color:var(--text-muted);
  font-size:var(--fs-xs);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.modulos-picker__toggle{
  padding:0;
  border:none;
  background:none;
  color:var(--primary);
  font-size:var(--fs-xs);
  font-family:inherit;
  text-transform:uppercase;
  letter-spacing:.5px;
  white-space:nowrap;
  cursor:pointer;
}
.modulos-picker__toggle:hover{
  text-decoration:underline;
}
/* Módulo que não está em grupo NENHUM. Não é decoração: é o aviso de que falta
   cadastro em Grupos de Módulos — sem este card o módulo sumiria da tela e
   ninguém conseguiria liberá-lo. */
.modulos-picker__card--sem-grupo{
  border-color:var(--rose);
}
.modulos-picker__card--sem-grupo .modulos-picker__head h3{
  color:var(--rose);
}

/* ===================== DOCUMENTAÇÃO ===================== */
.docs-layout{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:var(--sp-5);
  align-items:start;
}
/* Indice fixo das telas de documentacao/manual. Duas medidas aqui nao sao estilo,
   sao o que faz o componente funcionar - as duas foram medidas no navegador:

   1. `top` e SOMADO ao padding-top:56px do .orion-main (o vao da topbar fixa),
      porque o offset do sticky conta a partir do content box do scroll container.
      Ou seja: top:20px assenta o card em y=76, colado embaixo da topbar. O valor
      antigo, 96px, jogava o card para y=152 e desperdicava meia dezena de itens
      de altura util no topo.

   2. `max-height` + `overflow-y` sao OBRIGATORIOS, nao enfeite. Sticky que e mais
      alto que o scrollport para de acompanhar a rolagem e ignora o `top` por
      completo (medido: com o indice em 736px contra 637px de tela, top:0, top:20
      e top:300 assentavam todos no mesmo lugar). O resultado era o rodape do
      indice cortado para sempre - o manual tem 19 itens e os ultimos 6 nao
      apareciam por mais que se rolasse a pagina. Limitando a altura, o excedente
      rola dentro do proprio card e o `top` volta a valer.
      96px = 76 do topo + 20 de respiro no rodape. */
.docs-index{
  position:sticky;
  top:20px;
  display:grid;
  gap:3px;
  padding:var(--sp-3);
  max-height:calc(100dvh - 96px);
  overflow-y:auto;
  /* Sem isto, chegar ao fim do indice passa a rolagem para a pagina atras dele. */
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.docs-index a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 12px;
  border-radius:var(--r-sm);
  color:var(--text-muted);
  text-decoration:none;
  font-size:var(--fs-sm);
  font-weight:700;
}
.docs-index a:hover{
  color:var(--text-main);
  background:rgba(255,255,255,.05);
}
.docs-index i{
  width:16px;
  color:var(--primary);
}
.docs-content{
  display:grid;
  /* Mesma armadilha do .docs-layout: coluna implicita de grid e `auto`, que tem
     minimo min-content — a .docs-section com uma .man-tabela larga dentro
     esticava a coluna para 577px e vazava da tela no mobile, sem ancestral que
     rolasse. Declarar minmax(0,1fr) zera esse minimo. No desktop nao muda nada
     (1fr ja e a largura inteira da coluna de conteudo). */
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-4);
}
.docs-section{
  padding:var(--sp-5);
  border-radius:var(--r-sm);
  scroll-margin-top:96px;
}
.docs-section h2{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:var(--sp-3);
  font-size:var(--fs-lg);
}
.docs-section h2 i{
  color:var(--primary);
  font-size:16px;
}
.docs-section p{
  color:var(--text-muted);
  line-height:1.65;
  margin-bottom:var(--sp-3);
}
.docs-section ul{
  display:grid;
  gap:8px;
  padding-left:18px;
  color:var(--text-muted);
  line-height:1.55;
}
.docs-section strong{
  color:var(--text-main);
}

@media (max-width:900px){
  /* minmax(0,1fr), nunca `1fr` puro: a faixa `1fr` tem minimo AUTOMATICO de
     min-content, entao a coluna nao encolhe abaixo do conteudo mais largo. Aqui
     o mais largo e uma .man-tabela de 520px — medido em 375px de viewport, a
     coluna resolvia para 561px dentro de um container de 343px, e como nenhum
     ancestral rola no eixo X o excedente ficava cortado e inalcancavel (455
     elementos fora da tela). A coluna de conteudo do desktop, logo acima, ja usa
     minmax(0,1fr) por este mesmo motivo; era o override do mobile que perdia o
     minimo zerado. Com ele, a tabela larga volta a rolar dentro do proprio
     .man-tabela-wrap (que ja tem overflow-x:auto), que e o desenho pretendido. */
  .docs-layout{grid-template-columns:minmax(0,1fr);}
  /* Fora do sticky o indice vira bloco normal no topo da pagina: limitar a altura
     ali criaria um scroll dentro de outro scroll, sem motivo - a pagina inteira ja
     rola. Por isso o max-height/overflow do bloco acima e desfeito aqui. */
  .docs-index{position:relative;top:auto;max-height:none;overflow-y:visible;}
}

/* ===================== DASHBOARD ===================== */
.dashboard-page{
  max-width:1480px;
}
.dashboard-header{
  align-items:center;
  margin-bottom:var(--sp-4);
}
.dashboard-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--sp-2);
}
.dashboard-overview{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-3);
  margin-bottom:var(--sp-4);
}
.dashboard-stat-card{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  border-radius:var(--r-sm);
  padding:var(--sp-4);
}
.dashboard-stat-icon,
.dashboard-module-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(249,115,22,.22), rgba(6,182,212,.12));
  color:var(--primary);
  font-size:17px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.dashboard-stat-content{
  min-width:0;
  display:grid;
  gap:3px;
}
.dashboard-stat-label{
  color:var(--text-muted);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.7px;
  font-weight:800;
}
.dashboard-stat-content strong{
  font-size:24px;
  line-height:1;
  letter-spacing:0;
}
.dashboard-stat-content small{
  color:var(--cyan);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.8px;
}
.dashboard-modules-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(280px,1fr));
  gap:var(--sp-3);
}
.dashboard-loading-card{
  grid-column:1 / -1;
  padding:var(--sp-5);
  color:var(--text-muted);
}

.dashboard-charts-section{
  margin-bottom:var(--sp-4);
}
.dashboard-charts-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--sp-3);
  margin-bottom:var(--sp-3);
  flex-wrap:wrap;
}
.dashboard-charts-head h2{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:var(--fs-lg);
}
.dashboard-charts-head h2 i{
  color:var(--primary);
}
.dashboard-charts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:var(--sp-3);
}
.dash-chart-card{
  --dash-color-1:var(--primary);
  --dash-color-2:var(--cyan);
  --dash-color-3:var(--emerald);
  --dash-color-4:var(--rose);
  --dash-color-5:#a855f7;
  padding:var(--sp-4);
  border-radius:var(--r-sm);
}
.dash-chart-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-3);
  margin-bottom:var(--sp-2);
  flex-wrap:wrap;
}
.dash-chart-head h3{
  font-size:var(--fs-sm);
  margin:0;
}
.dash-chart-head span{
  display:block;
  margin-top:2px;
  color:var(--text-muted);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.5px;
}
.dash-chart-legend{
  display:flex;
  gap:var(--sp-3);
  flex-wrap:wrap;
}
.dash-chart-legend-item{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:var(--fs-xs);
  color:var(--text-muted);
}
.dash-chart-legend-item i{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
}
.dash-chart-svg{
  width:100%;
  height:auto;
  display:block;
}
.dash-chart-svg *{pointer-events:none;}
.dash-chart-wrap{position:relative;}
.dash-chart-tooltip{
  position:absolute;
  z-index:5;
  min-width:150px;
  padding:8px 10px;
  border-radius:var(--r-sm);
  background:rgba(10,10,18,.96);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 28px rgba(0,0,0,.5);
  pointer-events:none;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.dash-chart-tooltip strong{
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--text-muted);
}
.dash-tip-row{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:var(--fs-xs);
  color:var(--text-main);
}
.dash-tip-row i{
  width:8px;
  height:8px;
  border-radius:50%;
  flex:0 0 auto;
}
.dash-tip-row b{margin-left:auto;font-weight:700;}
.dash-hover-guide{
  stroke:rgba(255,255,255,.35);
  stroke-width:1;
  stroke-dasharray:4 3;
}
.dash-chart-grid-line{
  stroke:rgba(255,255,255,.05);
  stroke-width:1;
}
.dash-chart-ytick{
  fill:var(--text-muted);
  font-size:8.5px;
}
.dash-chart-stats{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:var(--sp-2);
}
.dash-stat-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  font-size:var(--fs-xs);
  color:var(--text-muted);
}
.dash-stat-chip b{color:var(--text-main);font-weight:700;}
.dash-stat-chip i{width:8px;height:8px;border-radius:50%;display:inline-block;}
.dash-stat-chip.is-up{color:var(--emerald);border-color:rgba(16,185,129,.3);}
.dash-stat-chip.is-down{color:var(--rose);border-color:rgba(244,63,94,.3);}
.dash-chart-baseline{
  stroke:rgba(255,255,255,.12);
  stroke-width:1;
}
.dash-chart-axis-label{
  fill:var(--text-muted);
  font-size:9px;
  text-transform:uppercase;
}
.dash-chart-line{
  vector-effect:non-scaling-stroke;
  fill:none !important;
}
.dash-chart-area{
  fill-opacity:.16;
  stroke:none;
}
.dash-series-1{fill:var(--dash-color-1);stroke:var(--dash-color-1);}
.dash-series-2{fill:var(--dash-color-2);stroke:var(--dash-color-2);}
.dash-series-3{fill:var(--dash-color-3);stroke:var(--dash-color-3);}
.dash-series-4{fill:var(--dash-color-4);stroke:var(--dash-color-4);}
.dash-series-5{fill:var(--dash-color-5);stroke:var(--dash-color-5);}
[data-theme="claro"] .dash-chart-baseline,
[data-theme="polar"] .dash-chart-baseline,
[data-theme="solar"] .dash-chart-baseline{
  stroke:rgba(15,23,42,.15);
}
[data-theme="claro"] .dash-chart-grid-line,
[data-theme="polar"] .dash-chart-grid-line,
[data-theme="solar"] .dash-chart-grid-line{
  stroke:rgba(15,23,42,.07);
}
[data-theme="claro"] .dash-hover-guide,
[data-theme="polar"] .dash-hover-guide,
[data-theme="solar"] .dash-hover-guide{
  stroke:rgba(15,23,42,.35);
}
[data-theme="claro"] .dash-chart-tooltip,
[data-theme="polar"] .dash-chart-tooltip,
[data-theme="solar"] .dash-chart-tooltip{
  background:rgba(255,255,255,.98);
  border-color:rgba(15,23,42,.12);
  box-shadow:0 10px 28px rgba(15,23,42,.18);
}

.dashboard-module-card{
  --dash-color-1:var(--primary);
  --dash-color-2:var(--cyan);
  --dash-color-3:var(--emerald);
  --dash-color-4:var(--rose);
  --dash-color-5:#a855f7;
  display:grid;
  gap:var(--sp-3);
  padding:var(--sp-4);
  border-radius:var(--r-sm);
}
.dashboard-module-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--sp-3);
  align-items:center;
}
.dashboard-module-head h2{
  font-size:var(--fs-base);
  line-height:1.15;
  margin:0;
}
.dashboard-module-head span{
  display:block;
  margin-top:2px;
  color:var(--text-muted);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.7px;
  font-weight:800;
}
.dashboard-module-head strong{
  justify-self:end;
  font-size:var(--fs-md);
  white-space:nowrap;
}
.dashboard-module-charts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-3);
}
.dashboard-chart-panel{
  min-width:0;
  padding:var(--sp-3);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
}
.dashboard-chart-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-2);
  margin-bottom:var(--sp-2);
  color:var(--text-muted);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.6px;
  font-weight:800;
}
.dashboard-chart-title small{
  color:var(--primary);
  font-size:var(--fs-xs);
  text-transform:none;
  letter-spacing:0;
  font-family:'Fira Code',monospace;
}
.dashboard-donut{
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 24px;
  box-shadow:0 0 16px rgba(0,0,0,.12);
}
.dashboard-donut::before{
  content:'';
  width:13px;
  height:13px;
  border-radius:50%;
  background:rgba(7,7,12,.78);
}
[data-theme="claro"] .dashboard-donut::before,
[data-theme="polar"] .dashboard-donut::before,
[data-theme="solar"] .dashboard-donut::before{
  background:rgba(255,255,255,.76);
}
.dashboard-donut span{display:none;}
.dashboard-donut.is-empty{
  background:rgba(255,255,255,.06);
}
.dashboard-mini-row{
  display:grid;
  gap:5px;
}
.dashboard-mini-row + .dashboard-mini-row{
  margin-top:8px;
}
.dashboard-mini-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:var(--text-muted);
  font-size:var(--fs-xs);
}
.dashboard-mini-label span{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.dashboard-mini-label strong{
  color:var(--text-main);
  font-family:'Fira Code',monospace;
  font-size:var(--fs-xs);
}
.dashboard-mini-track{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.06);
}
.dashboard-mini-track span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--primary),var(--cyan));
  box-shadow:0 0 14px var(--primary-glow);
}
.dashboard-empty{
  color:var(--text-muted);
  font-size:var(--fs-xs);
  padding:var(--sp-2) 0;
}
[data-theme="claro"] .dashboard-chart-panel,
[data-theme="polar"] .dashboard-chart-panel,
[data-theme="solar"] .dashboard-chart-panel{
  background:rgba(255,255,255,.24);
  border-color:rgba(255,255,255,.52);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
}

@media (max-width:768px){
  .dashboard-overview,
  .dashboard-modules-grid,
  .dashboard-module-charts{
    grid-template-columns:1fr;
  }
  .dashboard-actions{
    justify-content:flex-start;
  }
}

@media (min-width:769px) and (max-width:1180px){
  .dashboard-overview,
  .dashboard-modules-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .dashboard-overview .dashboard-stat-card:last-child{
    grid-column:1 / -1;
  }
}

/* ===================== CONTROLADOR GERAL ===================== */
.controller-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  margin-bottom:var(--sp-5);
  flex-wrap:wrap;
}
.controller-search{
  position:relative;
  flex:1 1 320px;
  max-width:520px;
}
.controller-search i{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--text-muted);
  font-size:13px;
}
.controller-search .orion-input{
  width:100%;
  padding-left:38px;
}
.controller-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--sp-4);
}
.controller-card{
  border-radius:var(--r-sm);
  padding:var(--sp-4);
  min-height:172px;
  text-align:left;
  color:var(--text-main);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
.controller-card:hover{
  transform:translateY(-2px);
  border-color:rgba(249,115,22,.45);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.controller-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
}
.controller-company-id{
  font-family:'Fira Code',monospace;
  color:var(--text-muted);
  font-size:var(--fs-xs);
}
.controller-status{
  border-radius:var(--r-pill);
  padding:4px 9px;
  font-size:var(--fs-xs);
  font-weight:700;
  text-transform:uppercase;
  color:var(--rose);
  background:rgba(244,63,94,.12);
}
.controller-status.active{
  color:var(--emerald);
  background:rgba(16,185,129,.12);
}
.controller-company-name{
  display:block;
  font-size:var(--fs-base);
  line-height:1.35;
}
.controller-company-doc{
  font-family:'Fira Code',monospace;
  color:var(--text-muted);
  font-size:var(--fs-sm);
}
.controller-card-meta{
  margin-top:auto;
  display:grid;
  gap:var(--sp-2);
  color:var(--text-muted);
  font-size:var(--fs-sm);
}
.controller-card-meta span{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.controller-card-meta i{
  width:15px;
  color:var(--primary);
}
.controller-loading,
.controller-empty{
  grid-column:1/-1;
  padding:var(--sp-6);
  text-align:center;
  color:var(--text-muted);
}

/* ===================== COMISSOES ===================== */
/* Migrado de pages/comissoes.html (Fase 9, item 3 da Fase 8 — <style> embutido). */
  /* Diálogo bespoke entre md e lg: especificidade extra p/ vencer .orion-modal__dialog.
     Era 680, mas a 680 os três 1fr davam ~135px e "Especialidade odontológica"
     (158px de texto) não cabia no gatilho do combobox. */
  .orion-modal__dialog.comissoes-taxas-dialog{max-width:860px;}
  /* Form horizontal de "adicionar taxa" (5 controles) — layout de página, não inline.
     A trilha do "Comissionar por" é fixa porque seu rótulo mais largo é conhecido;
     as outras duas dividem o resto. */
  .comissoes-taxa-form{display:grid;grid-template-columns:1fr 220px 1fr 100px auto;gap:14px 16px;align-items:end;}
  #comissoesTaxasLista .flr-title{font-size:13px;}
  #comissoesTaxasLista .ficha-lista-card{padding:10px 14px;margin-bottom:8px;}
  /* Extrato e gerado automaticamente ao finalizar tratamento - sem criacao manual.
     Sao TRES superficies de criacao no OrionTable, nao duas: alem dos dois botoes da
     toolbar, o engine desenha a linha "+ Novo" no fim do corpo da grade
     (`.grid-add-row`, orion-table.js:1565) e o clique dela cai no mesmo
     `openModal(null)`. Sem `dataSource.create`, o modal salva so na tela: inventaria
     uma comissao com dentista e valor que some no proximo refresh. */
  #orionComissoesTable .grid-add-row,
  #orionComissoesTable [data-el="newItemBtn"],
  #orionComissoesTable [data-el="newItemBtnMobile"]{display:none;}
  @media (max-width:700px){
    .comissoes-taxa-form{grid-template-columns:1fr;}
  }

/* ===================== CONTAS A PAGAR ===================== */
/* Migrado de pages/contas-pagar.html (Fase 9, item 3 da Fase 8 — <style> embutido). */
/* Diálogo mais largo que o --xl (1040) do framework: especificidade extra p/ vencer .orion-modal__dialog. */
.orion-modal__dialog.conta-pagar-modal-box{width:min(1360px,100%);max-width:1360px;}
.conta-pagar-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);gap:22px;}
.conta-pagar-inline-action{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;}
/* Sem altura fixa: 42px deixava o botão 12px mais alto que o campo ao lado
   (.orion-input fecha em 30px). `align-self:stretch` casa com a altura da
   linha do grid, que passa a ser ditada pelo campo — e o `height:auto` é
   obrigatório para derrubar o .orion-btn{height:40px}, senão a linha volta
   a ser ditada pelo botão. */
.conta-pagar-plus-btn{width:44px;height:auto;align-self:stretch;padding:0;justify-content:center;box-shadow:0 0 18px var(--primary-glow);}
.conta-pagar-checks{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px;color:var(--text-muted);}
.conta-pagar-checks label{display:flex;gap:8px;align-items:center;font-weight:700;}
/* "Data de pagamento" nasce colada no checkbox "Ja esta pago?" por causa do
   contrato do grid: .orion-row sobe `margin-top:calc(-1 * var(--orion-gutter-y))`
   para cancelar o `margin-top` que .orion-row > * poe na PRIMEIRA fileira de
   colunas. Numa linha unica os dois se anulam e sobra zero de respiro.
   Por isso o afastamento entra como PADDING, e nao como margin: margem aqui
   brigaria com a negativa do framework e o resultado passaria a depender do
   gutter em vigor. Vale so quando o bloco esta visivel -- .hidden e display:none. */
.conta-pagar-baixa-inline{padding-top:var(--sp-4);}
.conta-pagar-quick-plan{
  margin-top:16px;
  padding:14px;
  border:1px solid color-mix(in srgb, var(--primary) 42%, transparent);
  border-radius:8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 11%, transparent), rgba(255,255,255,.025)),
    rgba(10,10,18,.62);
  box-shadow:0 0 26px color-mix(in srgb, var(--primary) 18%, transparent);
}
.conta-pagar-quick-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  color:var(--primary);
  font-size:var(--fs-xs);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.2px;
}
.conta-pagar-quick-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px;}
.conta-pagar-parcela-editor{
  margin-top:16px;
  padding:14px;
  border:1px solid color-mix(in srgb, var(--cyan) 34%, transparent);
  border-radius:8px;
  background:
    radial-gradient(circle at 0% 0%, rgba(6,182,212,.14), transparent 42%),
    rgba(8,8,16,.66);
  box-shadow:0 0 24px rgba(6,182,212,.12), inset 0 1px 0 rgba(255,255,255,.05);
}
.conta-pagar-editor-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  color:var(--text-main);
}
.conta-pagar-editor-head strong{display:block;font-size:15px;}
.conta-pagar-editor-head span{
  display:inline-flex;
  margin-top:4px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(245,158,11,.13);
  color:#fbbf24;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.conta-pagar-editor-head span.pago{background:rgba(16,185,129,.14);color:#34d399;}
.conta-pagar-editor-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:12px;}
.conta-pagar-panel-title{
  background:linear-gradient(90deg, color-mix(in srgb, var(--primary) 92%, #ff7a18), color-mix(in srgb, var(--cyan) 72%, var(--primary)));
  color:#fff;
  text-align:center;
  font-weight:900;
  padding:13px;
  border-radius:8px 8px 0 0;
  letter-spacing:.2px;
  text-shadow:0 0 16px rgba(255,255,255,.28);
}
.conta-pagar-parcelas{
  border:1px solid color-mix(in srgb, var(--primary) 38%, transparent);
  border-radius:8px;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 36%),
    radial-gradient(circle at 95% 20%, rgba(6,182,212,.14), transparent 34%),
    rgba(8,8,16,.72);
  overflow:hidden;
  box-shadow:0 0 30px color-mix(in srgb, var(--primary) 16%, transparent), inset 0 1px 0 rgba(255,255,255,.06);
}
.conta-pagar-parcela-config{
  padding:13px;
  display:grid;
  gap:8px;
  color:var(--text-main);
  border-bottom:1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  background:rgba(255,255,255,.025);
}
.conta-pagar-parcela-config label{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text-muted);}
.conta-pagar-parcela-config input[type="radio"]{accent-color:var(--primary);}
.conta-pagar-parcela-table-wrap{max-height:280px;overflow:auto;padding:10px;}
.conta-pagar-parcela-table{width:100%;border-collapse:collapse;font-size:13px;}
.conta-pagar-parcela-table th{
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  color:var(--text-muted);
  padding:8px 6px;
  text-align:left;
  text-transform:uppercase;
  letter-spacing:.7px;
  font-size:11px;
  border-bottom:1px solid color-mix(in srgb, var(--primary) 28%, transparent);
}
.conta-pagar-parcela-table td{padding:5px;border-bottom:1px solid rgba(255,255,255,.06);}
.conta-pagar-parcela-table tbody tr:hover{background:color-mix(in srgb, var(--primary) 8%, transparent);}
.conta-pagar-parcela-table tbody tr{cursor:pointer;}
.conta-pagar-parcela-table tbody tr.selected{outline:1px solid var(--primary);background:color-mix(in srgb, var(--primary) 13%, transparent);}
.conta-pagar-parcela-table .parcela-cell-readonly{
  display:block;
  min-height:28px;
  padding:6px 7px;
  color:var(--text-main);
  border:1px solid transparent;
  border-radius:6px;
}
.conta-pagar-parcela-table input{
  width:100%;
  height:32px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  border-radius:6px;
  color:var(--text-main);
  padding:4px 7px;
  outline:none;
}
.conta-pagar-parcela-table input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);}
.conta-pagar-parcela-table input:disabled{opacity:.62;cursor:not-allowed;}
.conta-pagar-parcela-table tr.parcela-paga{background:rgba(16,185,129,.08);}
.parcela-lock{
  display:inline-flex;
  margin-left:6px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(16,185,129,.14);
  color:#34d399;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.conta-pagar-parcela-table tfoot td{
  padding-top:10px;
  color:var(--primary);
  font-weight:900;
  text-align:right;
  border-bottom:0;
}
.baixa-conta-box{max-width:780px;}
@media (min-width:577px){
  .baixa-conta-box{min-height:480px;}
}
.conta-pagar-delete-choice .orion-confirm-box{width:min(540px,100%);}
.conta-pagar-delete-choice .orion-confirm-actions{justify-content:stretch;flex-wrap:wrap;}
.conta-pagar-delete-choice .orion-confirm-actions .orion-btn{flex:1;min-width:150px;justify-content:center;}
@media (max-width:1100px){
  .conta-pagar-layout{grid-template-columns:1fr;}
}
/* Duas colunas: o aside já estica até a altura da coluna esquerda (grid stretch),
   mas o wrap travado em 280px deixava o resto do painel vazio e a lista de
   parcelas espremida rolando numa caixinha. `flex:1 1 0` (basis 0, não auto —
   com auto o conteúdo da tabela vira a base e o painel cresce empurrando a
   linha do grid) faz o wrap ocupar a sobra; o min-height mantém os 280px de
   antes quando a coluna esquerda é curta (editor de parcela fechado). */
@media (min-width:1101px){
  .conta-pagar-parcelas{display:flex;flex-direction:column;min-height:0;}
  .conta-pagar-parcela-table-wrap{flex:1 1 0;min-height:280px;max-height:none;}
}

/* ===================== CONTAS A RECEBER ===================== */
/* Migrado de pages/contas-receber.html (Fase 9, item 3 da Fase 8 — <style> embutido). */
/* Diálogo mais largo que o --xl (1040) do framework: especificidade extra p/ vencer .orion-modal__dialog. */
.orion-modal__dialog.conta-receber-modal-box{width:min(1360px,100%);max-width:1360px;}
.conta-receber-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);gap:22px;}
.conta-receber-inline-action{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;}
/* Mesma altura do campo ao lado — ver nota em .conta-pagar-plus-btn. */
.conta-receber-plus-btn{width:44px;height:auto;align-self:stretch;padding:0;justify-content:center;box-shadow:0 0 18px var(--primary-glow);}
.conta-receber-checks{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px;color:var(--text-muted);}
.conta-receber-checks label{display:flex;gap:8px;align-items:center;font-weight:700;}
.conta-receber-quick-plan{
  margin-top:16px;
  padding:14px;
  border:1px solid color-mix(in srgb, var(--primary) 42%, transparent);
  border-radius:8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 11%, transparent), rgba(255,255,255,.025)),
    rgba(10,10,18,.62);
  box-shadow:0 0 26px color-mix(in srgb, var(--primary) 18%, transparent);
}
.conta-receber-quick-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  color:var(--primary);
  font-size:var(--fs-xs);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.2px;
}
.conta-receber-quick-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px;}
.conta-receber-parcela-editor{
  margin-top:16px;
  padding:14px;
  border:1px solid color-mix(in srgb, var(--cyan) 34%, transparent);
  border-radius:8px;
  background:
    radial-gradient(circle at 0% 0%, rgba(6,182,212,.14), transparent 42%),
    rgba(8,8,16,.66);
  box-shadow:0 0 24px rgba(6,182,212,.12), inset 0 1px 0 rgba(255,255,255,.05);
}
.conta-receber-editor-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  color:var(--text-main);
}
.conta-receber-editor-head strong{display:block;font-size:15px;}
.conta-receber-editor-head span{
  display:inline-flex;
  margin-top:4px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(245,158,11,.13);
  color:#fbbf24;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.conta-receber-editor-head span.pago{background:rgba(16,185,129,.14);color:#34d399;}
.conta-receber-editor-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:12px;}
.conta-receber-panel-title{
  background:linear-gradient(90deg, color-mix(in srgb, var(--primary) 92%, #ff7a18), color-mix(in srgb, var(--cyan) 72%, var(--primary)));
  color:#fff;
  text-align:center;
  font-weight:900;
  padding:13px;
  border-radius:8px 8px 0 0;
  letter-spacing:.2px;
  text-shadow:0 0 16px rgba(255,255,255,.28);
}
.conta-receber-parcelas{
  border:1px solid color-mix(in srgb, var(--primary) 38%, transparent);
  border-radius:8px;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 36%),
    radial-gradient(circle at 95% 20%, rgba(6,182,212,.14), transparent 34%),
    rgba(8,8,16,.72);
  overflow:hidden;
  box-shadow:0 0 30px color-mix(in srgb, var(--primary) 16%, transparent), inset 0 1px 0 rgba(255,255,255,.06);
}
.conta-receber-parcela-config{
  padding:13px;
  display:grid;
  gap:8px;
  color:var(--text-main);
  border-bottom:1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  background:rgba(255,255,255,.025);
}
.conta-receber-parcela-config label{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text-muted);}
.conta-receber-parcela-config input[type="radio"]{accent-color:var(--primary);}
.conta-receber-parcela-table-wrap{max-height:280px;overflow:auto;padding:10px;}
.conta-receber-parcela-table{width:100%;border-collapse:collapse;font-size:13px;}
.conta-receber-parcela-table th{
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  color:var(--text-muted);
  padding:8px 6px;
  text-align:left;
  text-transform:uppercase;
  letter-spacing:.7px;
  font-size:11px;
  border-bottom:1px solid color-mix(in srgb, var(--primary) 28%, transparent);
}
.conta-receber-parcela-table td{padding:5px;border-bottom:1px solid rgba(255,255,255,.06);}
.conta-receber-parcela-table tbody tr:hover{background:color-mix(in srgb, var(--primary) 8%, transparent);}
.conta-receber-parcela-table tbody tr{cursor:pointer;}
.conta-receber-parcela-table tbody tr.selected{outline:1px solid var(--primary);background:color-mix(in srgb, var(--primary) 13%, transparent);}
.conta-receber-parcela-table .parcela-cell-readonly{
  display:block;
  min-height:28px;
  padding:6px 7px;
  color:var(--text-main);
  border:1px solid transparent;
  border-radius:6px;
}
.conta-receber-parcela-table input{
  width:100%;
  height:32px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  border-radius:6px;
  color:var(--text-main);
  padding:4px 7px;
  outline:none;
}
.conta-receber-parcela-table input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);}
.conta-receber-parcela-table input:disabled{opacity:.62;cursor:not-allowed;}
.conta-receber-parcela-table tr.parcela-paga{background:rgba(16,185,129,.08);}
.parcela-lock{
  display:inline-flex;
  margin-left:6px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(16,185,129,.14);
  color:#34d399;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.conta-receber-parcela-table tfoot td{
  padding-top:10px;
  color:var(--primary);
  font-weight:900;
  text-align:right;
  border-bottom:0;
}
.baixa-conta-box{max-width:780px;}
@media (min-width:577px){
  .baixa-conta-box{min-height:480px;}
}
.conta-receber-delete-choice .orion-confirm-box{width:min(540px,100%);}
.conta-receber-delete-choice .orion-confirm-actions{justify-content:stretch;flex-wrap:wrap;}
.conta-receber-delete-choice .orion-confirm-actions .orion-btn{flex:1;min-width:150px;justify-content:center;}
@media (max-width:1100px){
  .conta-receber-layout{grid-template-columns:1fr;}
}
/* Mesmo ajuste do painel de parcelas de contas a pagar — ver nota lá. */
@media (min-width:1101px){
  .conta-receber-parcelas{display:flex;flex-direction:column;min-height:0;}
  .conta-receber-parcela-table-wrap{flex:1 1 0;min-height:280px;max-height:none;}
}

/* ===================== ENCAMINHAMENTOS ===================== */
/* Migrado de pages/encaminhamentos.html (Fase 9, item 3 da Fase 8 — <style> embutido). */
  /* Bloco de detalhe (somente leitura) do encaminhamento — layout de página. */
  .enc-detalhe{padding:6px 0 16px;}
  .enc-det-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;}
  .enc-det-label{display:block;font-size:11.5px;color:var(--text-muted);}
  .enc-det-motivo-wrap{margin-top:12px;}
  .enc-det-motivo{margin:4px 0 0;color:var(--text-main);font-size:13.5px;}

/* ===================== MATERIAIS ===================== */
/* Migrado de pages/materiais.html (Fase 9, item 3 da Fase 8 — <style> embutido). */
  .cell-value.material-abaixo-minimo{color:#f43f5e;font-weight:800;}
  #movimentoHistorico .flr-title{font-size:12.5px;}

/* ===================== ORCAMENTOS ===================== */
/* Lista de procedimentos do orçamento odontológico (assets/js/orion-orcamento-itens.js).
   SEM prefixo de id de propósito: a mesma marcação é usada pela tela de orçamentos
   (#orcamentoForm) e pela aba Orçamentos da ficha do paciente (#orcForm). O bloco
   anterior existia duplicado, um para cada id, e as duas cópias já divergiam. */
  .orcamento-faturar-box{margin-top:10px;padding-top:10px;border-top:1px dashed var(--panel-border);}
  .orc-secao-titulo{display:flex;align-items:center;gap:10px;margin:14px 0 8px;}

  .orc-itens{display:block;}
  .orc-itens__bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 10px;}
  .orc-chips{display:flex;gap:4px;flex-wrap:wrap;margin-right:auto;}
  .orc-chip{display:flex;align-items:center;gap:6px;background:none;border:none;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--text-muted);cursor:pointer;white-space:nowrap;}
  .orc-chip:hover{color:var(--text-main);}
  .orc-chip.is-active{background:var(--accent, #0f766e);color:#fff;}
  .orc-chip__n{font-size:11px;opacity:.75;}
  .orc-add-btn{height:32px;padding:0 12px;font-size:12.5px;}

  .orc-itens__selecao{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 12px;margin-bottom:8px;border-radius:10px;background:var(--panel-hover, rgba(127,127,127,.06));}
  .orc-check-todos{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text-main);cursor:pointer;}
  .orc-selecao-info{font-size:12.5px;color:var(--text-muted);margin-right:auto;}
  .orc-selecao-acoes{display:flex;gap:6px;flex-wrap:wrap;}
  .orc-selecao-acoes .orion-btn{height:28px;padding:0 10px;font-size:12px;}

  .orc-lista{border-top:1px solid var(--panel-border);}
  .orc-lista__vazia{padding:18px 4px;color:var(--text-muted);font-size:13px;text-align:center;}
  .orc-item{display:grid;grid-template-columns:28px 1fr auto auto;align-items:center;gap:10px;padding:10px 6px;border-bottom:1px solid var(--panel-border);}
  .orc-item:hover{background:var(--panel-hover, rgba(127,127,127,.05));}
  .orc-item.is-sel{background:rgba(15,118,110,.08);}
  .orc-item__check{display:flex;justify-content:center;}
  .orc-item__main{min-width:0;}
  .orc-item__nome{font-size:13.5px;font-weight:600;color:var(--text-main);}
  .orc-item__dente{font-size:11px;font-weight:700;color:var(--accent, #0f766e);background:rgba(15,118,110,.12);border-radius:6px;padding:1px 6px;margin-left:4px;}
  .orc-item__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px;font-size:12px;color:var(--text-muted);}
  .orc-item__meta strong{color:var(--text-main);font-size:13px;}
  .orc-item__prof{white-space:nowrap;}
  /* Preco cheio riscado + quanto saiu. Menor que o valor cobrado de proposito: quem le a
     linha quer saber quanto o paciente paga; de onde veio esse numero e' a justificativa,
     nao a informacao principal. */
  .orc-item__desconto{font-size:11px;white-space:nowrap;}
  .orc-item__desconto s{opacity:.75;margin-right:4px;}
  .orc-item__acoes{display:flex;gap:2px;}
  .orc-tag{font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:999px;background:var(--panel-hover, rgba(127,127,127,.14));color:var(--text-muted);}
  .orc-tag--lock{background:rgba(37,99,235,.12);color:#2563eb;}
  .orc-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;}
  .orc-badge[data-tone="warn"]{background:rgba(180,83,9,.14);color:#b45309;}
  .orc-badge[data-tone="ok"]{background:rgba(15,157,104,.14);color:#0f9d68;}
  .orc-badge[data-tone="danger"]{background:rgba(190,18,60,.12);color:#be123c;}
  .orc-badge[data-tone="muted"]{background:var(--panel-hover, rgba(127,127,127,.14));color:var(--text-muted);}
  .orc-badge[data-tone="info"]{background:rgba(37,99,235,.12);color:#2563eb;}

  .orc-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px;}
  .orc-card{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:12px;}
  .orc-card__rotulo{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.85;}
  .orc-card__valor{font-size:17px;}
  .orc-card__nota{font-size:11px;opacity:.8;}
  .orc-card[data-tone="warn"]{background:rgba(180,83,9,.12);color:#b45309;}
  .orc-card[data-tone="ok"]{background:rgba(15,157,104,.12);color:#0f9d68;}
  .orc-card[data-tone="danger"]{background:rgba(190,18,60,.10);color:#be123c;}
  .orc-card[data-tone="info"]{background:rgba(15,118,110,.12);color:var(--accent, #0f766e);}

  .orc-fechamento{display:grid;grid-template-columns:1fr 260px;gap:16px;align-items:start;margin-top:18px;padding-top:14px;border-top:1px solid var(--panel-border);}
  /* min-width:0 em item de grid não é enfeite: sem ele o <select> de forma de
     pagamento estoura a coluna e empurra o painel de totais para fora do modal. */
  .orc-fechamento__campos{min-width:0;}
  .orc-fechamento__totais{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:12px;background:var(--panel-hover, rgba(127,127,127,.06));}
  .orc-fechamento__totais > div{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--text-muted);}
  .orc-fechamento__totais strong{color:var(--text-main);font-size:13.5px;}
  .orc-fechamento__total{padding-top:6px;border-top:1px solid var(--panel-border);}
  .orc-fechamento__total strong{font-size:17px;}

  /* Modal "Adicionar procedimento(s)": formulário à esquerda, carrinho à direita. */
  .orc-proc-body{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start;}
  .orc-proc-form{min-width:0;}
  .orc-proc-dentes{margin-top:12px;padding-top:12px;border-top:1px solid var(--panel-border);}
  .orc-proc-dentes__topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
  .orc-proc-dentes__topo strong{font-size:13px;color:var(--text-main);margin-right:auto;}
  .orc-proc-dentes__topo .orion-btn{height:28px;padding:0 10px;font-size:12px;}
  .orc-proc-dentes__input{margin-bottom:10px;}
  .orc-proc-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
  /* Barra de restaurar do modal minimizado. z-index acima do 1050 dos modais:
     ela existe justamente para ficar por cima do orçamento, que continua aberto. */
  .orc-proc-restaurar{position:fixed;right:20px;bottom:20px;z-index:1060;display:flex;align-items:center;gap:10px;padding:10px 16px;border:none;border-radius:999px;background:var(--accent, #0f766e);color:#fff;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.28);}
  .orc-proc-restaurar:hover{filter:brightness(1.08);}
  .orc-proc-restaurar strong{padding-left:10px;border-left:1px solid rgba(255,255,255,.35);font-size:12.5px;}
  .orc-proc-restaurar[hidden]{display:none;}
  .orc-dente-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 6px 3px 10px;border-radius:999px;background:rgba(15,118,110,.12);color:var(--accent, #0f766e);font-size:12px;font-weight:700;}
  .orc-dente-chip button{background:none;border:none;color:inherit;cursor:pointer;padding:0 2px;font-size:11px;}
  .orc-proc-hint{margin:8px 0 0;font-size:11.5px;color:var(--text-muted);}
  .orc-proc-cart{display:flex;flex-direction:column;border:1px solid var(--panel-border);border-radius:12px;overflow:hidden;}
  .orc-proc-cart__head,
  .orc-proc-cart__row{display:grid;grid-template-columns:1fr 52px 92px;gap:6px;align-items:center;padding:8px 10px;font-size:12px;}
  .orc-proc-cart__head{background:var(--panel-hover, rgba(127,127,127,.08));color:var(--text-muted);font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.03em;}
  .orc-proc-cart__row{border-top:1px solid var(--panel-border);color:var(--text-main);}
  .orc-proc-cart__row > span:last-child{display:flex;align-items:center;justify-content:flex-end;gap:4px;white-space:nowrap;}
  .orc-proc-cart__body{max-height:320px;overflow-y:auto;}
  .orc-proc-cart__vazio{padding:18px 10px;text-align:center;color:var(--text-muted);font-size:12px;}
  .orc-proc-cart__total{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding:10px 12px;background:var(--accent, #0f766e);color:#fff;}
  .orc-proc-cart__total strong{font-size:17px;}
  .orc-proc-modal.is-edicao .orc-proc-cart{display:none;}
  .orc-proc-modal.is-edicao .orc-proc-body{grid-template-columns:1fr;}

  /* ---- Plano de tratamento (aba única da ficha) ---- */
  /* Reaproveita .orc-item/.orc-chip/.orc-badge do orçamento de propósito: é a mesma
     linha de procedimento, vista de outro ângulo — divergir aqui faria a ficha e a
     tela de orçamentos parecerem dois produtos. */
  .plano-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  /* Nota que explica o critério da lista. Fica visualmente abaixo do peso de um card
     (sem fundo sólido, sem sombra): é legenda, não conteúdo — mas com a borda de
     destaque, senão vira rodapé que ninguém lê. */
  .plano-nota{display:flex;align-items:flex-start;gap:9px;margin:12px 0 0;padding:10px 13px;border-radius:10px;border-left:3px solid var(--primary);background:color-mix(in srgb, var(--primary) 8%, transparent);font-size:12.5px;line-height:1.5;color:var(--text-muted);}
  /* O texto TEM de estar dentro de um <span>: sendo flex, cada no de texto solto e cada
     <strong> viraria um item e a frase sairia em colunas. O min-width:0 e' o que deixa o
     item encolher abaixo do seu max-content - sem ele o paragrafo empurra a caixa. */
  .plano-nota > span{flex:1;min-width:0;text-align:justify;}
  .plano-nota i{flex-shrink:0;margin-top:2px;color:var(--primary);}
  .plano-nota strong{color:var(--text-main);font-weight:600;}
  .plano-topo__odonto{width:36px;padding:0;justify-content:center;}
  .plano-topo__odonto.is-active{background:var(--panel-hover, rgba(127,127,127,.14));color:var(--accent, #0f766e);}
  .plano-filtrar{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);}
  /* Chip apagado precisa parecer botao: sem fundo nenhum ele lia como legenda, e
     ninguem clica em legenda. So na ficha - a barra do orcamento tem outro ritmo. */
  #planoFiltros .orc-chip{border:1px solid var(--border, rgba(127,127,127,.24));}
  #planoFiltros .orc-chip.is-active{border-color:transparent;}
  .plano-chip__dot{font-size:7px;}
  .plano-chip__dot[data-tone="warn"]{color:#b45309;}
  .plano-chip__dot[data-tone="ok"]{color:#0f9d68;}
  .plano-chip__dot[data-tone="danger"]{color:#be123c;}
  .plano-chip__dot[data-tone="info"]{color:#2563eb;}
  .orc-chip.is-active .plano-chip__dot{color:#fff;}
  /* Separado dos chips de andamento por uma barrinha: ele não filtra a lista, ele
     inclui nela o que fica de fora por padrão. */
  #planoFiltros .plano-chip--aprovacao{margin-left:6px;padding-left:14px;border-left:1px solid var(--panel-border);border-radius:0 999px 999px 0;}
  #planoFiltros .plano-chip--aprovacao.is-active{border-left-color:transparent;}
  .plano-visao{display:flex;gap:2px;margin-left:auto;padding:2px;border-radius:999px;background:var(--panel-hover, rgba(127,127,127,.10));}
  .plano-visao__btn{display:flex;align-items:center;gap:6px;background:none;border:none;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;color:var(--text-muted);cursor:pointer;white-space:nowrap;}
  .plano-visao__btn:hover{color:var(--text-main);}
  .plano-visao__btn.is-active{background:var(--accent, #0f766e);color:#fff;}
  .plano-item__data{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;}
  .plano-item__origem{font-weight:600;}
  .plano-card{padding:14px 16px;margin-bottom:12px;}
  .plano-card__head{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;}
  .plano-card__id{margin-right:auto;min-width:0;}
  .plano-card__titulo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;font-weight:700;color:var(--text-main);}
  .plano-card__data{margin-top:3px;font-size:11.5px;color:var(--text-muted);}
  .plano-card__add{color:var(--accent, #0f766e);}
  .plano-item__estado{display:flex;align-items:center;justify-content:flex-end;gap:6px;}
  .plano-status-select{height:30px;width:auto;padding:0 26px 0 10px;font-size:12px;font-weight:700;border-radius:999px;}
  .plano-status-select[data-tone="warn"]{color:#b45309;border-color:rgba(180,83,9,.4);}
  .plano-status-select[data-tone="ok"]{color:#0f9d68;border-color:rgba(15,157,104,.4);}
  .plano-status-select[data-tone="danger"]{color:#be123c;border-color:rgba(190,18,60,.4);}
  .plano-status-select[data-tone="info"]{color:#2563eb;border-color:rgba(37,99,235,.4);}
  .plano-autorizar-btn{height:30px;padding:0 12px;font-size:12px;white-space:nowrap;}

  @media (max-width:900px){
    .orc-cards{grid-template-columns:repeat(2,1fr);}
    .orc-fechamento{grid-template-columns:1fr;}
    .orc-proc-body{grid-template-columns:1fr;}
  }
  @media (max-width:576px){
    .orc-item{grid-template-columns:28px 1fr auto;}
    .orc-item__acoes{grid-column:2 / -1;justify-content:flex-end;}
    .plano-item__estado{grid-column:2 / -1;justify-content:flex-start;}
  }

/* ===================== PACIENTES — FICHA ===================== */
/* Migrado de pages/pacientes-ficha.html (Fase 9, item 3 da Fase 8 — <style> embutido). */
  #fichaApp .ficha-topbar{margin-bottom:10px;}
  #fichaApp #fichaAtendimentoBanner{padding:8px 14px;margin-bottom:10px;border-left:3px solid #0f9d68;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
  #fichaApp #fichaAtendimentoBanner .fab-label{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#0f9d68;}
  #fichaApp #fichaAtendimentoBanner p{margin:1px 0 0;font-size:11.5px;color:var(--text-muted);}
  /* O botao do banner e um aviso, nao a acao principal da tela: altura de --sm. */
  #fichaApp #fichaAtendimentoBanner .orion-btn{height:30px;padding:0 10px;font-size:12px;gap:6px;}
  /* padding menor que o .orion-header padrao (20/12): o cabecalho da ficha fica
     logo abaixo do banner de atendimento e das abas, e somava altura demais. */
  #fichaApp .ficha-header{align-items:center;gap:12px;flex-wrap:wrap;padding-top:10px;padding-bottom:8px;}
  #fichaApp .ficha-avatar{width:40px;height:40px;border-radius:50%;background:var(--panel-hover, rgba(127,127,127,.12));display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text-muted);flex-shrink:0;}
  #fichaApp .ficha-header-info{flex:1;min-width:200px;}
  #fichaApp .ficha-header-info h1{margin:0;font-size:16px;line-height:1.25;}
  #fichaApp .ficha-header-info p{margin:2px 0 0;color:var(--text-muted);font-size:12px;}
  #fichaApp .ficha-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--panel-border);margin:14px 0 16px;}
  #fichaApp .ficha-tab{background:none;border:none;padding:10px 14px;font-size:13.5px;font-weight:600;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;}
  #fichaApp .ficha-tab:hover{color:var(--text-main);}
  #fichaApp .ficha-tab.active{color:var(--accent, #0f766e);border-bottom-color:var(--accent, #0f766e);}
  #fichaApp .ficha-painel.hidden{display:none;}
  #fichaApp .ficha-dados-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}
  #fichaApp .ficha-dados-grid span{display:block;font-size:11.5px;color:var(--text-muted);margin-bottom:2px;}
  #fichaApp .ficha-dados-grid strong{font-size:13.5px;color:var(--text-main);font-weight:600;}
  /* Visão geral da aba Sobre. Duas colunas em telas largas e uma no notebook estreito:
     o odontograma tem largura mínima própria (SVG das duas arcadas) e espremê-lo numa
     coluna de terço cortaria os dentes do fundo. */
  /* 420px de mínimo, não 330: com 330 cabem três colunas no notebook e o quarto card
     cai sozinho numa linha esticada. São quatro blocos — 2x2 é a única grade que fecha. */
  #fichaApp .ficha-vg{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px;margin-top:16px;}
  #fichaApp .ficha-vg__col{display:flex;flex-direction:column;}
  #fichaApp .ficha-vg__titulo{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--text-main);margin-bottom:12px;}
  #fichaApp .ficha-vg__titulo i{color:var(--accent, #0f766e);font-size:13px;}
  #fichaApp .ficha-vg__subtitulo{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);font-weight:700;margin:16px 0 8px;}
  #fichaApp .ficha-vg__linha{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--panel-border);}
  #fichaApp .ficha-vg__linha:last-child{border-bottom:none;}
  #fichaApp .ficha-vg__linha strong{display:block;font-size:13px;color:var(--text-main);font-weight:600;}
  #fichaApp .ficha-vg__linha span{display:block;font-size:11.5px;color:var(--text-muted);margin-top:2px;}
  #fichaApp .ficha-vg__data{font-size:12px;color:var(--text-muted);white-space:nowrap;flex-shrink:0;}
  #fichaApp .ficha-vg__tag{font-size:11px;padding:3px 9px;border-radius:999px;white-space:nowrap;flex-shrink:0;background:color-mix(in srgb, var(--text-main) 9%, transparent);color:var(--text-muted);}
  #fichaApp .ficha-vg__vazio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:34px 0;color:var(--text-muted);text-align:center;flex:1;}
  #fichaApp .ficha-vg__vazio i{font-size:22px;opacity:.4;}
  #fichaApp .ficha-vg__vazio span{font-size:12.5px;}
  #fichaApp .ficha-vg__fin{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  #fichaApp .ficha-vg__fin-box{padding:14px;border-radius:10px;border:1px solid var(--panel-border);}
  #fichaApp .ficha-vg__fin-box span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--text-muted);}
  #fichaApp .ficha-vg__fin-box strong{display:block;font-size:19px;font-weight:800;margin:5px 0 3px;color:var(--text-main);}
  #fichaApp .ficha-vg__fin-box small{font-size:11px;color:var(--text-muted);}
  /* Pendente sempre destacado, inclusive em zero: "R$ 0,00 a receber" é a informação
     boa da caixa, e pintá-la só quando há dívida faria o card mudar de forma. */
  #fichaApp .ficha-vg__fin-box[data-tone="alerta"]{background:color-mix(in srgb, var(--rose) 10%, transparent);border-color:color-mix(in srgb, var(--rose) 30%, transparent);}
  #fichaApp .ficha-vg__fin-box[data-tone="alerta"] strong{color:var(--rose);}
  /* Prescrição estruturada (#receitaModal e cards da aba Receituário). */
  .rec-entrada{border-top:1px solid var(--panel-border);margin-top:18px;padding-top:18px;}
  .rec-obs-linha{display:flex;gap:10px;align-items:flex-start;}
  .rec-obs-linha textarea{flex:1;}
  /* Alinha o botão ao topo do textarea (e não ao centro dele): "Adicionar" pertence à
     linha inteira do medicamento, não à observação. */
  .rec-obs-linha .orion-btn{flex-shrink:0;}
  .rec-lista{margin-top:18px;border-top:1px solid var(--panel-border);}
  .rec-lista__vazio{padding:26px 0;text-align:center;color:var(--text-muted);font-size:12.5px;}
  .rec-item{display:flex;align-items:flex-start;gap:12px;padding:12px 4px;border-bottom:1px solid var(--panel-border);}
  .rec-item:last-child{border-bottom:none;}
  .rec-item strong{display:block;font-size:13.5px;color:var(--text-main);font-weight:600;}
  .rec-item span{display:block;font-size:12.5px;color:var(--text-muted);margin-top:2px;}
  .rec-item small{display:block;font-size:11.5px;color:var(--text-muted);margin-top:2px;}
  .rec-item__remover{background:none;border:none;cursor:pointer;color:var(--emerald);font-size:16px;padding:0;line-height:1;margin-top:2px;}
  .rec-item__remover:hover{color:var(--rose);}
  #fichaApp .rec-card-meds{margin-top:10px;padding-top:10px;border-top:1px solid var(--panel-border);display:grid;gap:8px;}
  #fichaApp .rec-card-meds strong{font-size:12.5px;color:var(--text-main);font-weight:600;}
  #fichaApp .rec-card-meds span{display:block;font-size:12px;color:var(--text-muted);}
  #fichaApp .rec-card-meds small{display:block;font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;}
  /* Prévia do documento gerado: monoespaçada e com quebra preservada porque é
     exatamente o texto que vai para o papel — fonte proporcional aqui daria uma
     impressão de alinhamento que a impressão não cumpre. */
  .termo-previa{margin-top:18px;padding:16px;border-radius:8px;border:1px solid var(--panel-border);background:color-mix(in srgb, var(--text-main) 4%, transparent);white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.6;color:var(--text-main);max-height:320px;overflow-y:auto;}
  #fichaApp .odonto-consulta-row{padding:10px 0;border-bottom:1px solid var(--panel-border);}
  #fichaApp .odonto-consulta-row:last-child{border-bottom:none;}
  #fichaApp .odonto-consulta-row h4{margin:0 0 4px;font-size:13.5px;color:var(--text-main);}
  #fichaApp .odonto-consulta-row p{margin:2px 0;font-size:12.5px;color:var(--text-muted);}
  #fichaApp .ficha-lista-card{padding:14px 16px;margin-bottom:10px;}
  #fichaApp .ficha-lista-card .flr{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
  #fichaApp .ficha-lista-card .flr-title{font-size:13.5px;color:var(--text-main);font-weight:600;}
  #fichaApp .ficha-lista-card .flr-meta{font-size:12px;color:var(--text-muted);margin-top:2px;}
  /* Resumo em miniatura na linha do orcamento: os mesmos numeros dos cards grandes do
     topo da aba, por proposta. `flex-wrap` porque a linha tem 3 selos + o botao "Aprovar
     tudo" e a ficha e' usada em tela de recepcao, frequentemente estreita — sem quebrar,
     o botao sairia do card. `margin-top` separa do .flr sem precisar de outro wrapper. */
  #fichaApp .orc-linha-resumo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--panel-border);}
  #fichaApp .orc-mini{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-muted);background:var(--panel-hover, rgba(127,127,127,.10));border-radius:999px;padding:3px 10px;white-space:nowrap;}
  #fichaApp .orc-mini strong{color:var(--text-main);font-size:12px;}
  #fichaApp .orc-mini[data-tone="warn"] i{color:#b45309;}
  #fichaApp .orc-mini[data-tone="ok"] i{color:#0f9d68;}
  #fichaApp .orc-mini[data-tone="danger"] i{color:#be123c;}
  #fichaApp .orc-aprovar-tudo{margin-left:auto;font-size:12px;padding:4px 12px;}
  #fichaApp .ficha-badge{font-size:11px;padding:3px 9px;border-radius:999px;white-space:nowrap;}
  #fichaApp .ficha-badge[data-tone="ok"]{background:rgba(15,157,104,.14);color:#0f9d68;}
  #fichaApp .ficha-badge[data-tone="warn"]{background:rgba(180,83,9,.14);color:#b45309;}
  #fichaApp .ficha-badge[data-tone="danger"]{background:rgba(190,18,60,.12);color:#be123c;}
  #fichaApp .ficha-badge[data-tone="muted"]{background:rgba(127,127,127,.14);color:var(--text-muted);}
  #fichaApp .ficha-imagens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
  #fichaApp .ficha-imagem-card{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--panel-border);aspect-ratio:1;background:var(--panel-hover, rgba(127,127,127,.08));}
  #fichaApp .ficha-imagem-card img{width:100%;height:100%;object-fit:cover;display:block;}
  #fichaApp .ficha-imagem-card .ficha-imagem-remover{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:50%;width:26px;height:26px;cursor:pointer;}
  #fichaApp .anamnese-grupo{margin-bottom:18px;}
  #fichaApp .anamnese-grupo h3{margin:0 0 4px;font-size:15px;color:var(--text-main);}
  #fichaApp .anamnese-grupo p{margin:0 0 10px;font-size:12.5px;color:var(--text-muted);}
  #fichaApp .anamnese-item{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--panel-border);}
  #fichaApp .anamnese-item:last-child{border-bottom:none;}
  #fichaApp .anamnese-item-nome{flex:1 1 220px;font-size:13.5px;color:var(--text-main);}
  #fichaApp .anamnese-item-opcoes{display:flex;gap:6px;}
  #fichaApp .anamnese-item-opcoes label{display:flex;align-items:center;gap:4px;font-size:12px;padding:4px 8px;border-radius:8px;border:1px solid var(--panel-border);cursor:pointer;}
  #fichaApp .anamnese-item-opcoes input{margin:0;}
  #fichaApp .anamnese-item-obs{flex:1 1 220px;min-width:160px;}
/* ---- Débitos do paciente (aba Financeiro) ----
   Tabela própria, não OrionTable: o agrupamento por mês com subtotal e a linha
   de duas alturas (procedimento + parcela/execução) não existem no engine, e
   forçá-los lá custaria mais que o markup dedicado abaixo. */
  #fichaApp .deb-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
  #fichaApp .deb-icon-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--panel-border);background:var(--panel-solid, transparent);color:var(--text-muted);cursor:pointer;flex-shrink:0;}
  #fichaApp .deb-icon-btn:hover,
  #fichaApp .deb-icon-btn.active{color:var(--accent, #0f766e);border-color:var(--accent, #0f766e);}
  #fichaApp .deb-chips{display:flex;gap:4px;flex-wrap:wrap;}
  #fichaApp .deb-chip{background:none;border:none;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--text-muted);cursor:pointer;white-space:nowrap;}
  #fichaApp .deb-chip:hover{color:var(--text-main);}
  #fichaApp .deb-chip.active{background:var(--accent, #0f766e);color:#fff;}
  #fichaApp .deb-add-btn{width:34px;height:34px;border-radius:50%;border:none;background:var(--accent, #0f766e);color:#fff;cursor:pointer;flex-shrink:0;}
  #fichaApp .deb-pills{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;}
  #fichaApp .deb-pill{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:12px;}
  #fichaApp .deb-pill span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.85;}
  #fichaApp .deb-pill strong{font-size:15px;}
  #fichaApp .deb-pill[data-tone="warn"]{background:rgba(180,83,9,.12);color:#b45309;}
  #fichaApp .deb-pill[data-tone="danger"]{background:rgba(190,18,60,.10);color:#be123c;}
  #fichaApp .deb-pill[data-tone="ok"]{background:rgba(15,157,104,.12);color:#0f9d68;}
  #fichaApp .deb-pill[data-tone="info"]{background:rgba(37,99,235,.12);color:#2563eb;}
  #fichaApp .deb-pill[data-tone="neutral"]{background:var(--panel-solid, rgba(120,120,120,.10));color:var(--text-main);border:1px solid var(--panel-border);}
  #fichaApp .deb-pill--btn{cursor:pointer;text-align:left;font:inherit;}
  #fichaApp .deb-pill--btn:hover{border-color:var(--accent, #0f766e);color:var(--accent, #0f766e);}
  #fichaApp .deb-pill__seta{font-size:10px;opacity:.6;}
  /* ---- Aprovado, aguardando faturamento ----
     Bloco à parte da tabela de débitos: nada aqui é conta a receber ainda, então
     não pode se parecer com uma linha da tabela (mesma borda, mesmo accent de
     situação) — a semelhança visual é o que faria previsto ser lido como cobrado. */
  #fichaApp .deb-fat{margin-bottom:16px;}
  #fichaApp .deb-fat-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px;font-size:12.5px;font-weight:700;color:#2563eb;text-transform:uppercase;letter-spacing:.03em;}
  #fichaApp .deb-fat-head strong{font-size:14px;}
  #fichaApp .deb-fat-grupo{padding:12px 14px;margin-bottom:8px;border-left:3px solid #2563eb;}
  #fichaApp .deb-fat-grupo-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid var(--panel-border);font-size:13px;color:var(--text-main);}
  #fichaApp .deb-fat-grupo-head span{font-weight:600;}
  #fichaApp .deb-fat-grupo-head strong{margin-left:auto;font-size:13.5px;}
  #fichaApp .deb-fat-grupo-head input[type="checkbox"]{margin:0;width:16px;height:16px;cursor:pointer;}
  /* Barra de ação do bloco inteiro: um botão para todos os cards. */
  #fichaApp .deb-fat-acao{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap;padding-top:4px;font-size:12.5px;color:var(--text-muted);}
  #fichaApp .deb-fat-acao strong{font-size:13.5px;color:var(--text-main);}
  #fichaApp .deb-fat-acao .orion-btn{height:32px;padding:0 14px;font-size:12.5px;}
  #fichaApp .deb-fat-item{display:grid;grid-template-columns:20px minmax(160px,1.4fr) minmax(140px,1fr) 110px;align-items:center;gap:8px;padding:6px 0;font-size:12.5px;color:var(--text-main);cursor:pointer;}
  #fichaApp .deb-fat-item input{margin:0;}
  #fichaApp .deb-fat-proc{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #fichaApp .deb-fat-meta{font-size:11.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #fichaApp .deb-fat-valor{text-align:right;font-weight:600;white-space:nowrap;}
  @media (max-width:992px){
    #fichaApp .deb-fat-item{grid-template-columns:20px 1fr auto;}
    #fichaApp .deb-fat-meta{grid-column:2 / span 2;}
  }
  #fichaApp .deb-periodo{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
  #fichaApp .deb-periodo .field-group{margin:0;min-width:150px;}
  #fichaApp .deb-selecao{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px;margin-bottom:10px;border-radius:10px;background:rgba(15,118,110,.10);}
  #fichaApp .deb-selecao span{font-size:12.5px;font-weight:600;color:var(--text-main);margin-right:auto;}
  #fichaApp .deb-selecao .orion-btn{height:30px;padding:0 12px;font-size:12px;}
  #fichaApp .deb-tabela{padding:0;overflow:hidden;}
  #fichaApp .deb-head,
  #fichaApp .deb-row{display:grid;grid-template-columns:3px 34px 110px minmax(160px,1.1fr) minmax(220px,2fr) 120px 110px 40px;align-items:center;gap:8px;}
  #fichaApp .deb-head{padding:10px 12px 10px 0;border-bottom:1px solid var(--panel-border);font-size:11.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;}
  #fichaApp .deb-head::before{content:'';}
  #fichaApp .deb-head .deb-sort{background:none;border:none;padding:0;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;text-align:left;}
  #fichaApp .deb-head .deb-sort:hover{color:var(--accent, #0f766e);}
  #fichaApp .deb-grupo{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;background:var(--panel-hover, rgba(127,127,127,.06));font-size:12.5px;color:var(--text-muted);font-weight:600;}
  #fichaApp .deb-grupo strong{color:var(--text-main);font-size:13.5px;}
  #fichaApp .deb-row{padding:10px 12px 10px 0;border-bottom:1px solid var(--panel-border);font-size:12.5px;color:var(--text-main);}
  #fichaApp .deb-row:last-child{border-bottom:none;}
  #fichaApp .deb-row:hover{background:var(--panel-hover, rgba(127,127,127,.05));}
  #fichaApp .deb-row-accent{width:3px;height:26px;border-radius:0 3px 3px 0;background:transparent;}
  #fichaApp .deb-row[data-situacao="a_vencer"] .deb-row-accent{background:#f59e0b;}
  #fichaApp .deb-row[data-situacao="atrasado"] .deb-row-accent{background:#be123c;}
  #fichaApp .deb-row[data-situacao="recebido"] .deb-row-accent{background:#0f9d68;}
  #fichaApp .deb-col-check{display:flex;justify-content:center;}
  #fichaApp .deb-col-venc{white-space:nowrap;}
  #fichaApp .deb-col-prof{display:flex;align-items:center;gap:8px;min-width:0;}
  #fichaApp .deb-avatar{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;background:var(--panel-hover, rgba(127,127,127,.14));color:var(--text-muted);}
  #fichaApp .deb-prof-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #fichaApp .deb-col-proc{display:flex;align-items:center;gap:10px;min-width:0;}
  #fichaApp .deb-proc-icon{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(15,157,104,.14);color:#0f9d68;font-size:12px;}
  #fichaApp .deb-proc-nome{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #fichaApp .deb-proc-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--text-muted);margin-top:2px;}
  #fichaApp .deb-col-valor{text-align:right;font-weight:600;white-space:nowrap;}
  #fichaApp .deb-col-status{text-align:center;}
  #fichaApp .deb-col-acoes{position:relative;display:flex;justify-content:center;}
  #fichaApp .deb-kebab{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px 6px;border-radius:6px;}
  #fichaApp .deb-kebab:hover{color:var(--text-main);background:var(--panel-hover, rgba(127,127,127,.12));}
  /* Ancorado no #fichaApp, não na linha: dentro do card ele seria recortado pelo
     overflow:hidden que arredonda a tabela (o JS calcula top/right). */
  #fichaApp{position:relative;}
  /* Fundo vem do .orion-card (mesmo caminho do theme-popover). O `--panel-solid` que
     estava aqui não existe em nenhum tema: caía no branco do fallback e o "Receber"
     ficava branco no branco — invisível, mas ninguém via porque o menu já vinha
     recortado. */
  #fichaApp .deb-menu{position:absolute;z-index:40;min-width:170px;padding:6px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.28);}
  #fichaApp .deb-menu[hidden]{display:none;}
  #fichaApp .deb-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border:none;background:none;border-radius:8px;font-size:12.5px;color:var(--text-main);cursor:pointer;text-align:left;}
  #fichaApp .deb-menu button:hover{background:var(--panel-hover, rgba(127,127,127,.12));}
  #fichaApp .deb-menu .deb-menu-danger{color:#be123c;}
  #fichaApp .deb-paginacao{display:flex;justify-content:flex-end;gap:4px;flex-wrap:wrap;margin-top:12px;}
  /* Sem prefixo #fichaApp: o extrato virou modal, e os modais do fragmento ficam FORA
     do #fichaApp (ele fecha antes deles). Prefixar aqui deixaria o bloco sem estilo. */
  .deb-saldo-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--panel-border);}
  .deb-saldo-head span{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700;}
  .deb-saldo-head strong{font-size:18px;color:var(--text-main);}
  /* O extrato reproduz .ficha-lista-card por conta própria: as regras daquele card são
     todas prefixadas com #fichaApp e o modal mora fora dele, então nada delas chegava
     aqui — era por isso que o valor caía numa linha abaixo do texto em vez de ficar à
     direita. `min-width:0` no bloco de texto é o que deixa a linha longa truncar em vez
     de empurrar o valor para fora. */
  #saldoExtratoLista .ficha-lista-card{padding:12px 16px;margin-bottom:8px;}
  #saldoExtratoLista .flr{display:flex;justify-content:space-between;align-items:center;gap:16px;}
  #saldoExtratoLista .flr > div{min-width:0;}
  #saldoExtratoLista .flr-title{font-size:13.5px;color:var(--text-main);font-weight:600;}
  #saldoExtratoLista .flr-sub{font-size:12.5px;color:var(--text-main);margin-top:3px;}
  #saldoExtratoLista .flr-meta{font-size:12px;color:var(--text-muted);margin-top:2px;}
  #saldoExtratoLista .flr > strong{white-space:nowrap;font-size:14px;}
  /* Mesmo motivo: as cores de crédito/débito são #fichaApp-scoped, então dentro do modal
     o + e o - saíam os dois em branco — a única pista de sinal virava o caractere. */
  #saldoExtratoLista .deb-valor-credito{color:#0f9d68;}
  #saldoExtratoLista .deb-valor-debito{color:#be123c;}
  #fichaApp .deb-valor-credito{color:#0f9d68;}
  #fichaApp .deb-valor-debito{color:#be123c;}
  @media (max-width:992px){
    #fichaApp .deb-head{display:none;}
    #fichaApp .deb-row{grid-template-columns:3px 34px 1fr auto 40px;row-gap:6px;padding:12px 12px 12px 0;}
    #fichaApp .deb-col-venc{grid-column:3;}
    #fichaApp .deb-col-valor{grid-column:4;}
    #fichaApp .deb-col-prof,
    #fichaApp .deb-col-proc{grid-column:3 / span 2;}
    #fichaApp .deb-col-status{grid-column:3 / span 2;text-align:left;}
    #fichaApp .deb-pills{margin-left:0;width:100%;}
  }
  /* ---- Linha do tempo (aba Histórico) ----
     Eixo no CENTRO e cards alternando de lado. A cor não é enfeite: o histórico
     mistura sete origens (cadastro, consulta, tratamento, orçamento, anamnese,
     arquivo, prótese) numa lista só, e sem cor a única forma de saber de onde
     veio a linha era ler o texto inteiro. Cada tipo define --flt-cor, e a bolinha,
     a borda do card e o rótulo bebem daí — uma variável por item em vez de três
     regras por tipo.
     Hex literal em vez de token de tema: o tema só publica --primary/--cyan/--rose,
     e sete categorias precisam de sete matizes estáveis em todos os temas. É o
     mesmo caminho já usado por .orc-badge[data-tone] e .odonto-dot. */
  #fichaApp .ficha-timeline{position:relative;padding:4px 0;}
  #fichaApp .ficha-timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--panel-border);}
  #fichaApp .ficha-timeline-item{position:relative;width:50%;padding:0 30px 20px 0;text-align:right;--flt-cor:#64748b;}
  #fichaApp .ficha-timeline-item:nth-child(even){margin-left:50%;padding:0 0 20px 30px;text-align:left;}
  #fichaApp .ficha-timeline-item::before{content:'';position:absolute;top:13px;width:11px;height:11px;border-radius:50%;background:var(--flt-cor);border:2px solid var(--panel-solid, #fff);box-shadow:0 0 0 3px color-mix(in srgb, var(--flt-cor) 20%, transparent);}
  #fichaApp .ficha-timeline-item:nth-child(odd)::before{right:-6px;}
  #fichaApp .ficha-timeline-item:nth-child(even)::before{left:-6px;}
  #fichaApp .ficha-timeline-item[data-tipo="cadastro"]{--flt-cor:#2563eb;}
  #fichaApp .ficha-timeline-item[data-tipo="consulta"]{--flt-cor:#0f9d68;}
  #fichaApp .ficha-timeline-item[data-tipo="tratamento"]{--flt-cor:#b45309;}
  #fichaApp .ficha-timeline-item[data-tipo="orcamento"]{--flt-cor:#7c3aed;}
  #fichaApp .ficha-timeline-item[data-tipo="anamnese"]{--flt-cor:#0891b2;}
  #fichaApp .ficha-timeline-item[data-tipo="arquivo"]{--flt-cor:#64748b;}
  #fichaApp .ficha-timeline-item[data-tipo="protese"]{--flt-cor:#be123c;}
  /* inline-block para o card encostar no eixo em vez de esticar até a borda da tela:
     evento de uma linha vira um card curto, do tamanho do texto. */
  #fichaApp .flt-card{display:inline-block;max-width:100%;text-align:left;padding:10px 13px;border-radius:10px;border:1px solid var(--panel-border);background:color-mix(in srgb, var(--flt-cor) 7%, transparent);}
  #fichaApp .ficha-timeline-item:nth-child(odd) .flt-card{border-right:3px solid var(--flt-cor);}
  #fichaApp .ficha-timeline-item:nth-child(even) .flt-card{border-left:3px solid var(--flt-cor);}
  #fichaApp .flt-topo{display:flex;align-items:center;gap:7px;margin-bottom:3px;}
  #fichaApp .flt-tipo{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--flt-cor);}
  #fichaApp .flt-data{font-size:11px;color:var(--text-muted);}
  #fichaApp .flt-titulo{font-size:13.5px;color:var(--text-main);font-weight:600;}
  #fichaApp .flt-detalhe{font-size:12.5px;color:var(--text-muted);margin-top:2px;}
  /* Abaixo de 860px o eixo central deixa de caber: cada card ficaria com ~150px de
     largura útil. Volta ao eixo à esquerda e coluna única. */
  @media (max-width:860px){
    #fichaApp .ficha-timeline::before{left:5px;margin-left:0;}
    #fichaApp .ficha-timeline-item,
    #fichaApp .ficha-timeline-item:nth-child(even){width:auto;margin-left:0;padding:0 0 18px 22px;text-align:left;}
    #fichaApp .ficha-timeline-item:nth-child(odd)::before,
    #fichaApp .ficha-timeline-item:nth-child(even)::before{left:0;right:auto;}
    #fichaApp .ficha-timeline-item:nth-child(odd) .flt-card{border-right:1px solid var(--panel-border);border-left:3px solid var(--flt-cor);}
    #fichaApp .flt-card{display:block;}
  }
  .ficha-upload-btn{cursor:pointer;}
  /* Listas de grupos/itens dentro do modal "Gerenciar perguntas de anamnese". */
  #anamConfigModal .anam-cfg-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;margin-bottom:6px;}
  #anamConfigModal .anam-cfg-row--click{cursor:pointer;}
  #anamConfigModal .anam-cfg-nome{color:var(--text-main);font-size:13px;}
  #anamConfigModal .anam-cfg-empty{padding:8px;color:var(--text-muted);font-size:13px;}
  /* Gerenciador de anamnese (duas colunas: grupos | itens) — layout de página. */
  .anam-config-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:16px;}
  .anam-col-head{display:flex;align-items:center;gap:8px;padding:0 0 8px;}
  .anam-col-head strong{color:var(--text-main);font-size:13px;}
  @media (max-width:576px){ .anam-config-grid{grid-template-columns:1fr;} }

/* ===================== RECEPCAO ===================== */
/* Migrado de pages/recepcao.html (Fase 9, item 3 da Fase 8 — <style> embutido). */
  #recepcaoApp .orion-header-title p{color:var(--text-muted);font-size:13px;margin:4px 0 0;}
  #recepcaoApp #recepcaoAtendendoBox{padding:20px;margin-bottom:20px;border-left:4px solid #0f9d68;}
  #recepcaoApp #recepcaoAtendendoBox .rec-atendendo-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;}
  #recepcaoApp #recepcaoAtendendoBox .rec-atendendo-label{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#0f9d68;margin-bottom:4px;}
  #recepcaoApp #recepcaoAtendendoBox h3{margin:0;font-size:18px;color:var(--text-main);}
  #recepcaoApp #recepcaoAtendendoBox p{margin:4px 0 0;font-size:12.5px;color:var(--text-muted);}
  #recepcaoApp #recepcaoAtendendoBox .rec-atendendo-acoes{display:flex;gap:10px;flex-wrap:wrap;}
  #recepcaoApp #recepcaoPendentesTitulo{font-size:14px;color:var(--text-main);margin:0 0 12px;}
  #recepcaoApp .rec-pendente-card{padding:14px 16px;margin-bottom:10px;}
  #recepcaoApp .rec-pendente-card .flr{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;}
  #recepcaoApp .rec-pendente-card .flr-title{font-size:14px;color:var(--text-main);font-weight:600;}
  #recepcaoApp .rec-pendente-card .flr-meta{font-size:12px;color:var(--text-muted);margin-top:3px;}
  #recepcaoApp .rec-vazio{padding:20px;color:var(--text-muted);text-align:center;}
  #recepcaoApp .rec-bloqueado{padding:16px;color:var(--text-muted);font-size:13px;}

/* ===================== REGISTRADORA ===================== */
/* Migrado de pages/registradora.html (Fase 9, item 3 da Fase 8 — <style> embutido). */
.registradora-status-card{padding:20px;color:var(--text-main);}
.registradora-status-loading{color:var(--text-muted);}
.registradora-status-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;margin-bottom:16px;}
.registradora-status-badge{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;}
.registradora-status-badge.aberto{background:rgba(16,185,129,.14);color:#34d399;}
.registradora-status-badge.fechado{background:rgba(148,163,184,.14);color:#94a3b8;}
.registradora-status-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:18px;}
.registradora-tile{padding:14px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);}
.registradora-tile-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);margin-bottom:6px;}
.registradora-tile-value{font-size:20px;font-weight:800;}
.registradora-actions-row{display:flex;flex-wrap:wrap;gap:10px;}
.registradora-card-title{font-family:'Space Grotesk',sans-serif;font-size:var(--fs-lg);font-weight:700;margin-bottom:14px;}
.registradora-movimentos-card,.registradora-historico-card{margin-top:20px;padding:20px;}
/* 9 colunas num card só: o padding lateral padrão da célula (16px de cada lado)
   consumia 288px em respiro e empurrava a última coluna pra fora. Compacta só
   esta tabela — as larguras de coluna estão em registradora.js. */
.registradora-historico-card .orion-table th,
.registradora-historico-card .orion-table td{padding-left:9px;padding-right:9px;}
.registradora-historico-card .orion-table td{font-size:var(--fs-xs);}
.registradora-pendentes-lista{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow:auto;}
.registradora-pendente-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:8px;}
.registradora-pendente-info strong{display:block;}
.registradora-pendente-info small{color:var(--text-muted);}
.registradora-pendentes-empty{color:var(--text-muted);padding:20px 0;text-align:center;}
/* Movimentos e historico sao ledgers append-only (ver pages/registradora/_schema.php) -
   escondemos o botao "Novo" do OrionTable, que nao tem flag nativa de tabela somente leitura.
   Sao TRES superficies, nao duas: a linha "+ Novo" no fim do corpo da grade
   (`.grid-add-row`, orion-table.js:1565) abre o mesmo modal e nao estava coberta. */
#orionRegistradoraMovimentosTable .grid-add-row,
#orionRegistradoraMovimentosTable [data-el="newItemBtn"],
#orionRegistradoraMovimentosTable [data-el="newItemBtnMobile"],
#orionRegistradoraHistoricoTable .grid-add-row,
#orionRegistradoraHistoricoTable [data-el="newItemBtn"],
#orionRegistradoraHistoricoTable [data-el="newItemBtnMobile"]{display:none;}

/* ===================== FECHAMENTO DE CAIXA ===================== */
/* Tabelas montadas à mão e não com OrionTable: são quatro listas de leitura, sem busca,
   sem edição e sem ações por linha — o engine traria coluna de Ações, botão "Novo" e
   persistência de coluna em localStorage para nada (ver a nota do botão fantasma no
   CLAUDE.md). O que a tela precisa é caber junto na mesma folha impressa. */
.fc-data{width:auto;}
.fc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:20px;}
.fc-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;}
.fc-card__label{display:block;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-bottom:6px;}
.fc-card__valor{font-size:var(--fs-2xl);font-weight:800;}
.fc-card i{width:44px;height:44px;border-radius:var(--r-circle,50%);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.fc-card[data-tone="entrada"]{background:color-mix(in srgb, var(--emerald) 10%, var(--panel-bg));}
.fc-card[data-tone="entrada"] .fc-card__label,.fc-card[data-tone="entrada"] .fc-card__valor{color:var(--emerald);}
.fc-card[data-tone="entrada"] i{background:color-mix(in srgb, var(--emerald) 18%, transparent);color:var(--emerald);}
.fc-card[data-tone="saida"]{background:color-mix(in srgb, var(--rose) 10%, var(--panel-bg));}
.fc-card[data-tone="saida"] .fc-card__label,.fc-card[data-tone="saida"] .fc-card__valor{color:var(--rose);}
.fc-card[data-tone="saida"] i{background:color-mix(in srgb, var(--rose) 18%, transparent);color:var(--rose);}
.fc-card[data-tone="saldo"]{background:color-mix(in srgb, var(--cyan) 10%, var(--panel-bg));}
.fc-card[data-tone="saldo"] .fc-card__label,.fc-card[data-tone="saldo"] .fc-card__valor{color:var(--cyan);}
.fc-card[data-tone="saldo"] i{background:color-mix(in srgb, var(--cyan) 18%, transparent);color:var(--cyan);}
.fc-grid{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:16px;}
@media (max-width:900px){.fc-grid{grid-template-columns:1fr;}}
.fc-bloco-titulo{font-family:'Space Grotesk',sans-serif;font-size:var(--fs-lg);font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.fc-bloco-titulo i{color:var(--emerald);font-size:14px;}
.fc-forma{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--panel-border);}
.fc-forma:last-child{border-bottom:none;}
.fc-forma span{display:block;font-size:var(--fs-xs);color:var(--text-muted);}
.fc-forma__valor{color:var(--emerald);}
.fc-vazio-bloco{color:var(--text-muted);text-align:center;padding:28px 0;font-style:italic;}
/* A tabela rola dentro do próprio bloco: sem isto, sete colunas de conferência empurram
   o body inteiro para a horizontal no notebook. */
.fc-tabela-wrap{overflow-x:auto;}
.fc-tabela{width:100%;border-collapse:collapse;font-size:var(--fs-sm);}
.fc-tabela th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);font-weight:700;padding:0 10px 10px;white-space:nowrap;}
.fc-tabela td{padding:11px 10px;border-top:1px solid var(--panel-border);color:var(--text-main);vertical-align:top;}
.fc-tabela .fc-num{text-align:right;white-space:nowrap;}
.fc-tabela .fc-pos{color:var(--emerald);}
.fc-tabela .fc-neg{color:var(--rose);}
.fc-tabela .fc-sub{display:block;font-size:var(--fs-xs);color:var(--text-muted);}
.fc-tabela .fc-vazio td{text-align:center;color:var(--text-muted);font-style:italic;padding:32px 10px;}

/* ===================== DOCUMENTOS E TERMOS ===================== */
.doc-modelos__cabecalho{margin-bottom:16px;}
.doc-modelos__titulo{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-size:var(--fs-lg);font-weight:700;color:var(--text-main);}
.doc-modelos__sub{margin:6px 0 0;font-size:var(--fs-sm);color:var(--text-muted);}
/* width:100% explícito nos dois: `.orion-input` não declara largura — quem estica os
   campos por aí é o `.field-group` (flex column), e estes dois estão soltos no grid.
   Sem isto o textarea fica com a largura intrínseca de `cols`, ~155px. */
.doc-busca{margin-bottom:18px;width:100%;}
.doc-modelos{display:grid;grid-template-columns:minmax(210px,270px) 1fr;gap:20px;align-items:start;}
@media (max-width:860px){.doc-modelos{grid-template-columns:1fr;}}
.doc-modelos__lista-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.6px;font-weight:700;color:var(--text-muted);margin-bottom:10px;}
.doc-modelo-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;padding:10px 14px;margin-bottom:4px;border:none;border-radius:8px;background:transparent;color:var(--text-muted);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:.15s;}
.doc-modelo-btn:hover{background:color-mix(in srgb, var(--text-main) 8%, transparent);color:var(--text-main);}
.doc-modelo-btn i{font-size:10px;opacity:.7;flex-shrink:0;}
/* .is-ativo depois do :hover: as duas são 0,1,0 e disputam background — sem a ordem, o
   modelo selecionado perderia o destaque assim que o mouse passasse por cima. */
.doc-modelo-btn.is-ativo{background:var(--primary);color:#fff;}
.doc-modelos__vazio{padding:18px 4px;color:var(--text-muted);font-size:var(--fs-sm);}
.doc-editor__topo{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
.doc-editor__titulo{flex:1;min-width:220px;font-weight:700;}
.doc-editor__acoes{display:flex;gap:8px;flex-wrap:wrap;}
.doc-editor__texto{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-sm);line-height:1.6;resize:vertical;min-height:340px;white-space:pre-wrap;}
.doc-var{position:relative;}
.doc-var__seta{font-size:9px;margin-left:2px;}
.doc-var__menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:290px;max-height:340px;overflow-y:auto;padding:6px;}
.doc-var__grupo{padding:9px 10px 5px;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.6px;font-weight:700;color:var(--text-muted);}
.doc-var__item{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;padding:7px 10px;border:none;border-radius:6px;background:transparent;cursor:pointer;}
.doc-var__item:hover{background:color-mix(in srgb, var(--text-main) 10%, transparent);}
.doc-var__item strong{font-size:var(--fs-sm);font-weight:600;color:var(--text-main);}
.doc-var__item code{font-size:var(--fs-xs);color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.doc-dica{display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:12px 14px;border-radius:8px;background:color-mix(in srgb, var(--cyan) 10%, transparent);border:1px solid color-mix(in srgb, var(--cyan) 25%, transparent);font-size:var(--fs-sm);color:var(--text-main);}
.doc-dica i{color:var(--cyan);margin-top:2px;}
.doc-dica code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-xs);padding:1px 5px;border-radius:4px;background:color-mix(in srgb, var(--text-main) 10%, transparent);}

/* ===================== TAREFAS ===================== */
/* A tela tem cabeçalho próprio (título + período + cards), então o header
   interno do OrionTable seria um segundo título repetido — a contagem que ele
   mostra já está nos 4 cards acima.

   O que se esconde aqui é o TÍTULO e a CONTAGEM, não o header inteiro: o pill de
   ordenação não se repete em canto nenhum desta tela, e escondendo o pai ele ia
   junto (display:none no ancestral não tem como ser desfeito no filho). Sem isso
   esta era a única tela em que a ordem da lista não estava escrita em lugar nenhum. */
.tarefas-page #orionTarefasTable .orion-header{padding:0 0 var(--sp-2);}
.tarefas-page #orionTarefasTable .orion-header-title{display:none;}
.tarefas-page #orionTarefasTable .orion-pill:not(.table-sort-info){display:none;}

.tarefas-filterbar{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;}
.tarefas-filterbar .field-group{margin:0;}
.tarefas-filterbar .tarefas-filtro-data .orion-input{width:170px;}
.tarefas-filterbar .tarefas-filtro-usuario .orion-input,
.tarefas-filterbar .tarefas-filtro-status .orion-input{min-width:190px;}

.tarefas-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:16px 0;}
.tarefas-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 16px;border-top:3px solid var(--orion-color-muted);cursor:pointer;text-align:center;font:inherit;color:inherit;}
.tarefas-card-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);font-weight:700;}
.tarefas-card strong{font-size:26px;font-weight:800;line-height:1;}
.tarefas-card.is-atrasadas{border-top-color:var(--rose);}
.tarefas-card.is-atrasadas strong{color:var(--rose);}
.tarefas-card.is-pendentes{border-top-color:var(--primary);}
.tarefas-card.is-pendentes strong{color:var(--primary);}
.tarefas-card.is-hoje{border-top-color:var(--cyan);}
.tarefas-card.is-hoje strong{color:var(--cyan);}
.tarefas-card.is-concluidas{border-top-color:var(--emerald);}
.tarefas-card.is-concluidas strong{color:var(--emerald);}
.tarefas-card.is-active{box-shadow:var(--orion-focus-ring);}

.tarefas-hint{display:block;margin-top:6px;font-size:var(--fs-xs);color:var(--text-muted);}
.tarefas-atribuicao{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);background:rgba(255,255,255,.04);border:1px solid var(--panel-border);font-size:var(--fs-sm);color:var(--text-muted);}
.tarefas-atribuicao i{color:var(--primary);}
/* Relato de quem finalizou: mesmo bloco, mas alinhado ao topo (texto livre,
   quebra em varias linhas) e na cor de concluido. */
.tarefas-atribuicao.tarefas-conclusao{align-items:flex-start;color:var(--text-main);}
.tarefas-atribuicao.tarefas-conclusao i{color:var(--emerald);margin-top:3px;}
.tarefas-conclusao-alvo{margin:0 0 14px;font-weight:700;color:var(--text-main);}

/* ===================== CHAT INTERNO ===================== */
/* Layout de duas colunas (lista de conversas | painel da conversa) com altura
   fixa: o scroll tem que acontecer DENTRO da lista e DENTRO das mensagens, e
   nao na pagina — senao o campo de escrever sai da tela conforme a conversa
   cresce. */
.chat-page .chat-header-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;}
/* A altura NAO e' mais um numero magico. Era `height:calc(100vh - 230px)` +
   `min-height:460px`, e os dois erravam: 230 era um chute para topbar + cabecalho da
   tela, e quando o chute ficava curto (ou o min-height entrava) o shell passava do
   fundo do .orion-main — que no desktop e' o scroller de verdade (`height:100dvh`,
   `overflow-y:auto`, `padding-top:56px` para a topbar fixa). Resultado: quem rolava
   era a PAGINA inteira, levando o campo de escrever para fora da tela conforme a
   conversa crescia, que e' exatamente o oposto do que esta tela precisa.
   Agora a altura util desce pela cadeia flex: a pagina ocupa o espaco do .orion-main
   e o shell fica com o que sobra depois do cabecalho, medido em vez de adivinhado.
   Nada de min-height: em tela baixa o shell espreme, e espremer e' melhor que empurrar
   o form para fora. Os unicos scrollers continuam sendo .chat-lista-itens e
   .chat-mensagens. */
.chat-page{
  display:flex;flex-direction:column;
  height:calc(100dvh - 56px);min-height:0;
}
.chat-page .orion-header{flex:0 0 auto;}
.chat-shell{
  display:grid;grid-template-columns:320px 1fr;
  flex:1;min-height:0;
  padding:0;overflow:hidden;
}
/* `min-height:0` nas duas colunas nao e' enfeite: as duas sao ITENS DE GRID do
   .chat-shell, e item de grid nasce com `min-height:auto` — ou seja, recusa encolher
   abaixo do proprio conteudo. Sem isso a coluna cresce ate caber a conversa inteira,
   o `overflow-y:auto` de .chat-mensagens/.chat-lista-itens nunca chega a ser
   acionado (nao ha altura para estourar) e o .chat-form e' empurrado para fora do
   shell, que o corta com o `overflow:hidden`. Medido: com 60 mensagens o form ia
   parar em y=2800 numa tela de 720px. O `min-width:0` ao lado ja existia pelo mesmo
   motivo, no outro eixo. */
.chat-lista{display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid var(--panel-border);}
.chat-lista-head{padding:12px;border-bottom:1px solid var(--panel-border);display:flex;flex-direction:column;gap:10px;}
.chat-busca{position:relative;}
.chat-busca i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:12px;pointer-events:none;}
.chat-busca .orion-input{padding-left:32px;}
.chat-lista-tabs{display:flex;gap:6px;}
.chat-tab{
  flex:1;padding:6px 10px;border-radius:999px;border:1px solid var(--panel-border);
  background:transparent;color:var(--text-muted);font:inherit;font-size:var(--fs-xs);font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;
}
.chat-tab.is-active{background:var(--primary);border-color:var(--primary);color:#fff;}
.chat-tab-count{background:rgba(0,0,0,.2);border-radius:999px;padding:0 6px;font-size:10px;}
.chat-lista-itens{flex:1;min-height:0;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:4px;}

.chat-conversa{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px;border-radius:var(--r-sm);
  border:1px solid transparent;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:left;
}
.chat-conversa:hover{background:rgba(255,255,255,.05);}
.chat-conversa.is-active{background:rgba(255,255,255,.07);border-color:var(--panel-border);}
.chat-conversa-texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.chat-conversa-topo{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.chat-conversa-topo strong{font-size:var(--fs-sm);color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-conversa-topo small{color:var(--text-muted);font-size:10.5px;white-space:nowrap;}
.chat-conversa-previa{color:var(--text-muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-conversa.tem-nao-lidas .chat-conversa-topo strong,
.chat-conversa.tem-nao-lidas .chat-conversa-previa{color:var(--text-main);font-weight:700;}
.chat-badge{
  background:var(--primary);color:#fff;border-radius:999px;min-width:20px;height:20px;
  display:grid;place-items:center;padding:0 6px;font-size:10.5px;font-weight:800;
}

/* Avatar: foto quando existe, inicial sobre cor derivada do id quando nao.
   Ver chatAvatarHtml() em assets/js/pages/chat.js. */
.chat-avatar{
  width:38px;height:38px;min-width:38px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  color:#fff;font-weight:800;font-size:13px;letter-spacing:.5px;
}
.chat-avatar img{width:100%;height:100%;object-fit:cover;}
.chat-avatar--lg{width:44px;height:44px;min-width:44px;font-size:15px;}

.chat-painel{display:flex;flex-direction:column;min-width:0;min-height:0;}
.chat-painel-vazio{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:40px;text-align:center;color:var(--text-muted);
}
.chat-painel-vazio i{font-size:38px;opacity:.4;}
.chat-painel-vazio strong{color:var(--text-main);font-size:var(--fs-md);}
.chat-painel-vazio span{font-size:var(--fs-sm);max-width:340px;}
.chat-painel-conteudo{flex:1;display:flex;flex-direction:column;min-height:0;}

.chat-painel-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--panel-border);}
.chat-painel-titulo{flex:1;min-width:0;display:flex;flex-direction:column;}
.chat-painel-titulo strong{font-size:var(--fs-md);color:var(--text-main);}
.chat-painel-titulo span{font-size:var(--fs-xs);color:var(--text-muted);}
.chat-painel-acoes{display:flex;gap:8px;flex-wrap:wrap;}
.chat-voltar{display:none;}

.chat-arquivada-aviso{
  display:flex;align-items:center;gap:10px;padding:10px 16px;
  background:rgba(148,163,184,.12);color:var(--text-muted);font-size:var(--fs-sm);
  border-bottom:1px solid var(--panel-border);
}

.chat-mensagens{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;}
.chat-dia{
  align-self:center;padding:3px 12px;border-radius:999px;
  background:rgba(255,255,255,.06);color:var(--text-muted);
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
}
.chat-sistema{align-self:center;max-width:80%;text-align:center;color:var(--text-muted);font-size:var(--fs-xs);font-style:italic;}

.chat-msg{display:flex;gap:10px;max-width:76%;align-self:flex-start;}
.chat-msg.is-minha{align-self:flex-end;flex-direction:row-reverse;}
.chat-msg-balao{padding:8px 12px;border-radius:var(--r-md);background:rgba(255,255,255,.05);border:1px solid var(--panel-border);min-width:0;}
.chat-msg.is-minha .chat-msg-balao{
  background:color-mix(in srgb,var(--primary) 22%,transparent);
  border-color:color-mix(in srgb,var(--primary) 38%,transparent);
}
.chat-msg-head{display:flex;align-items:baseline;gap:8px;margin-bottom:2px;flex-wrap:nowrap;}
/* Nome longo (razao social inteira, que e o que muita conta usa) empurrava o
   cabecalho para tres linhas e espremia o balao. Corta com reticencias. */
.chat-msg-head strong{
  font-size:12px;color:var(--text-main);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-msg-head small{color:var(--text-muted);font-size:10.5px;flex-shrink:0;}
.chat-msg-corpo{font-size:var(--fs-sm);color:var(--text-main);line-height:1.45;white-space:pre-wrap;word-break:break-word;}
/* Sequencia do mesmo autor: esconde o avatar (mantendo o espaco) e o nome, pra
   conversa nao virar uma coluna de nomes repetidos. */
.chat-msg.is-sequencia .chat-msg-avatar{visibility:hidden;}
.chat-msg.is-sequencia .chat-msg-head strong{display:none;}

.chat-msg-acoes{margin-left:auto;display:flex;gap:2px;flex-shrink:0;opacity:0;transition:opacity .15s ease;}
.chat-msg:hover .chat-msg-acoes,
.chat-msg-acoes:focus-within{opacity:1;}
.chat-msg-acao{
  border:none;background:transparent;color:var(--text-muted);cursor:pointer;
  font:inherit;font-size:11px;padding:2px 5px;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;gap:5px;
}
.chat-msg-acao:hover{color:var(--text-main);background:rgba(255,255,255,.08);}

/* Rodape do balao: marca de "editada" (esquerda) e recibo de leitura (direita).
   Fica vazio na maioria das mensagens, por isso `min-height` nenhuma — some. */
.chat-msg-rodape{display:flex;align-items:center;gap:6px;margin-top:2px;}
.chat-msg-editado{
  font-size:10px;color:var(--text-muted);font-style:italic;
}
.chat-msg-recibo{
  position:relative;margin-left:auto;font-size:10px;color:var(--text-muted);
  line-height:1;display:inline-flex;align-items:center;gap:3px;cursor:pointer;
  padding:2px 4px;border-radius:var(--r-sm);
}
.chat-msg-recibo b{font-weight:700;font-size:10px;}
.chat-msg-recibo:hover{background:rgba(255,255,255,.08);}
/* Lida por todo mundo: o tique de dois vira cor do sistema, igual todo app de
   mensagem — a diferenca entre "entregue" e "lida" tem que ser vista de relance. */
.chat-msg-recibo.is-lida{color:var(--primary);}

/* Lista de quem ja viu. Abre ao mirar (hover/foco) e, no toque, com o clique —
   `is-aberto` e o equivalente do hover pra quem nao tem ponteiro. */
.chat-recibo-menu{
  display:none;position:absolute;bottom:calc(100% + 6px);right:0;z-index:30;
  min-width:190px;max-width:260px;max-height:220px;overflow-y:auto;
  padding:8px;border-radius:var(--r-md);
  background:var(--panel-bg);border:1px solid var(--panel-border);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  text-align:left;font-style:normal;cursor:default;
}
.chat-msg-recibo:hover .chat-recibo-menu,
.chat-msg-recibo:focus-within .chat-recibo-menu,
.chat-msg-recibo.is-aberto .chat-recibo-menu{display:block;}
/* A lista de mensagens rola (overflow-y:auto), entao o dropdown e recortado pelo
   container. Perto do topo ele abre pra baixo — a classe vem do JS, que e quem
   sabe quanto espaco sobrou. */
.chat-msg-recibo.is-abaixo .chat-recibo-menu{bottom:auto;top:calc(100% + 6px);}
.chat-recibo-titulo{
  display:block;font-size:10.5px;color:var(--text-main);
  padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid var(--panel-border);
}
.chat-recibo-item{
  display:flex;align-items:center;gap:6px;padding:2px 0;
  font-size:11px;color:var(--text-main);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.chat-recibo-item i{color:var(--primary);font-size:9px;flex-shrink:0;}
.chat-recibo-item.is-pendente{color:var(--text-muted);}
.chat-recibo-item.is-pendente i{color:var(--text-muted);}
.chat-recibo-sep{
  display:block;margin:6px 0 3px;font-size:9.5px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.5px;
}

/* Faixa de "ate aqui eu ja tinha lido". Marcador de posicao, nao um aviso
   permanente: some na proxima abertura, porque ate la ja foi lido. */
.chat-novas{
  display:flex;align-items:center;gap:10px;margin:4px 0;
  color:var(--primary);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;
}
.chat-novas::before,
.chat-novas::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--primary) 45%,transparent);}

/* Editor inline: ocupa o lugar do texto dentro do proprio balao, pra ficar
   evidente QUAL mensagem esta sendo reescrita. */
.chat-msg-editor{display:flex;flex-direction:column;gap:6px;margin-top:4px;}
.chat-msg-editor textarea{resize:vertical;min-height:52px;font-size:var(--fs-sm);line-height:1.4;}
.chat-msg-editor-acoes{display:flex;align-items:center;gap:6px;}
.chat-msg-editor-acoes small{color:var(--text-muted);font-size:10px;margin-right:auto;}
.chat-msg-editor-acoes .orion-btn{padding:3px 10px;font-size:11px;}

/* Lapide de mensagem ocultada para todos. NAO e uma mensagem apagada: a linha
   continua no banco (ver pages/chat/ocultar.php) e um administrador restaura. */
.chat-msg-oculta{
  align-self:center;max-width:80%;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:6px 12px;border-radius:var(--r-md);
  border:1px dashed var(--panel-border);color:var(--text-muted);font-size:var(--fs-xs);font-style:italic;
}
.chat-oculta-corpo{
  width:100%;font-style:normal;color:var(--text-muted);
  padding-top:4px;border-top:1px dashed var(--panel-border);white-space:pre-wrap;
}

.chat-form{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px 16px;border-top:1px solid var(--panel-border);}
.chat-input{resize:none;max-height:140px;overflow-y:auto;line-height:1.4;}
.chat-enviar{min-width:52px;justify-content:center;}

.chat-vazio{padding:24px 16px;text-align:center;color:var(--text-muted);font-size:var(--fs-sm);}
.chat-hint{display:block;margin-top:8px;font-size:var(--fs-xs);color:var(--text-muted);line-height:1.5;}

.chat-usuarios-lista{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin-top:8px;}
.chat-usuario{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:var(--r-sm);
  border:1px solid transparent;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:left;
}
.chat-usuario:hover{background:rgba(255,255,255,.05);}
.chat-usuario-texto{flex:1;min-width:0;display:flex;flex-direction:column;}
.chat-usuario-texto strong{font-size:var(--fs-sm);color:var(--text-main);}
.chat-usuario-texto small{font-size:11px;color:var(--text-muted);}
.chat-usuario-seta{color:var(--text-muted);font-size:11px;}
.chat-usuario-check{
  width:20px;height:20px;min-width:20px;border-radius:6px;border:1px solid var(--panel-border);
  display:grid;place-items:center;color:transparent;font-size:10px;
}
.chat-usuario-check.is-on{background:var(--primary);border-color:var(--primary);color:#fff;}

/* ---- Chat dentro do painel flutuante (aba "Chat" do Assistente Orion) ----
   Versao compacta: ler e responder. Grupo, moderacao e arquivamento continuam
   so na tela cheia — o botao "Abrir tela do chat" leva pra la. Reaproveita as
   classes .chat-* acima, encolhidas para caber nos 390px do painel. */
.ai-panel-pane[data-ai-pane="chat"]{grid-template-rows:1fr;}
.mini-chat-lista{display:grid;grid-template-rows:auto 1fr;min-height:0;}
.mini-chat-topo{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.08);
}
.mini-chat-acao{flex:1;min-width:0;justify-content:center;font-size:11px;padding:6px 10px;white-space:nowrap;}
.mini-chat-expandir{width:32px;height:32px;min-width:32px;flex:0 0 auto;}
.mini-chat-itens{min-height:0;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:2px;}
.mini-chat-itens .chat-conversa{padding:8px;gap:8px;}
.mini-chat-itens .chat-avatar{width:32px;height:32px;min-width:32px;font-size:11px;}
.mini-chat-itens .chat-conversa-topo strong{font-size:12px;}
.mini-chat-itens .chat-conversa-previa{font-size:11px;}

/* Escolha de com quem falar: mesma "terceira tela" que a conversa ocupa, com
   busca em cima. Reaproveita .chat-usuario da tela cheia. */
.mini-chat-novo{display:grid;grid-template-rows:auto auto 1fr;min-height:0;}
/* O grupo tem uma linha a mais que a nova conversa: o rodape com o "Criar". */
.mini-chat-grupo{grid-template-rows:auto auto 1fr auto;}
.mini-chat-busca{padding:8px 10px 0;display:flex;flex-direction:column;gap:6px;}
.mini-chat-busca .orion-input{height:32px;font-size:12px;}
.mini-chat-rodape{padding:8px 10px;border-top:1px solid rgba(255,255,255,.08);display:flex;}
.mini-chat-novo .chat-usuario{padding:7px 8px;gap:8px;}
.mini-chat-novo .chat-avatar{width:30px;height:30px;min-width:30px;font-size:10.5px;}
.mini-chat-novo .chat-usuario-texto strong{font-size:12px;}
.mini-chat-novo .chat-usuario-texto small{font-size:10.5px;}

.mini-chat-conversa{display:grid;grid-template-rows:auto 1fr auto;min-height:0;}
.mini-chat-head{
  display:flex;align-items:center;gap:8px;padding:6px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mini-chat-head .chat-avatar{width:28px;height:28px;min-width:28px;font-size:10px;}
.mini-chat-head .orion-icon-btn{width:28px;height:28px;min-width:28px;}
.mini-chat-titulo{min-width:0;display:flex;flex-direction:column;}
.mini-chat-titulo strong{font-size:12px;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mini-chat-titulo span{font-size:10px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mini-chat-mensagens{padding:10px;gap:8px;}
.mini-chat-mensagens .chat-msg{max-width:92%;gap:7px;}
.mini-chat-mensagens .chat-avatar{width:26px;height:26px;min-width:26px;font-size:9.5px;}
.mini-chat-mensagens .chat-msg-balao{padding:6px 9px;}
.mini-chat-mensagens .chat-msg-head strong{font-size:11px;}
.mini-chat-mensagens .chat-msg-corpo{font-size:12px;}
/* Ocultar mensagem tambem vale aqui. Como no painel nao ha hover confiavel
   (celular), as acoes ficam sempre visiveis, so mais discretas. */
.mini-chat-mensagens .chat-msg-acoes{opacity:.55;}
.mini-chat-mensagens .chat-msg-acao{font-size:10px;padding:1px 4px;}
/* O painel tem 390px: o dropdown de quem viu ancora pela direita e nao pode
   estourar essa largura. */
.mini-chat-mensagens .chat-recibo-menu{min-width:160px;max-width:220px;max-height:180px;}
.mini-chat-mensagens .chat-msg-oculta{font-size:10.5px;padding:5px 10px;}
.mini-chat-arquivada{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  background:rgba(148,163,184,.12);color:var(--text-muted);font-size:11px;
  border-top:1px solid rgba(255,255,255,.08);
}

/* Uma coluna so: a lista e a "primeira tela" e o painel entra por cima quando
   uma conversa e escolhida (classe is-conversa-aberta, posta pelo chat.js). */
@media (max-width:900px){
  /* So a troca para uma coluna. A ALTURA nao entra aqui de proposito: entre 769px e
     900px o .orion-main ainda e' o scroller, entao a cadeia flex do bloco base
     continua valendo e e' ela que da a altura. */
  .chat-shell{grid-template-columns:1fr;}
  .chat-lista{border-right:none;}
  .chat-page .chat-painel{display:none;}
  .chat-page.is-conversa-aberta .chat-lista{display:none;}
  .chat-page.is-conversa-aberta .chat-painel{display:flex;}
  .chat-voltar{display:inline-flex;}
  .chat-msg{max-width:92%;}
  .chat-painel-acoes .orion-btn{padding:6px 10px;font-size:11px;}
}

/* 768px e o corte do SHELL, nao do chat: e' onde o .orion-main larga o
   `height:100dvh/overflow-y:auto` e vira `height:auto/overflow:visible` — ou seja,
   quem rola volta a ser a pagina. Travar a altura da .chat-page aqui cortaria o
   conteudo, entao a cadeia flex e' desfeita e o shell volta a uma altura de viewport.
   Precisa vir DEPOIS do bloco de 900px para vencer no empate de especificidade. */
@media (max-width:768px){
  .chat-page{display:block;height:auto;}
  .chat-shell{flex:none;height:calc(100vh - 200px);}
}

/* ==========================================================================
   FORMAS DE PAGAMENTO - blocos condicionais do modal (tabela de MDR por
   parcela e antecipacao). Classes novas, sem homonimo no orion.css -
   nao disputam cascata com nada.
   ========================================================================== */
.forma-pgto-bloco{
  margin-top:18px;padding:14px 16px;border-radius:10px;
  background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.18);
}
.forma-pgto-bloco-title{
  display:flex;align-items:center;gap:8px;margin-bottom:6px;
  font-size:13px;font-weight:600;color:var(--text-strong,inherit);
}
.forma-pgto-hint{margin:6px 0 12px;font-size:11.5px;line-height:1.5;color:var(--text-muted);}
.forma-pgto-check{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:13px;}
/* Subtitulo que separa Debito de Credito dentro do bloco da maquininha. */
.forma-pgto-subtitulo{
  display:flex;align-items:center;gap:7px;margin:16px 0 8px;
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-muted);
}
/* Abas de bandeira. A aba "Padrao (todas)" e sempre a primeira e nao some -
   ela e a tabela que vale quando a bandeira nao tem a sua. */
.forma-pgto-bandeiras{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;}
.forma-pgto-bandeira-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.forma-pgto-bandeira-tab{
  padding:5px 12px;border-radius:999px;cursor:pointer;font-size:12px;
  background:transparent;color:var(--text-muted);
  border:1px solid rgba(148,163,184,.28);
}
.forma-pgto-bandeira-tab:hover{border-color:rgba(148,163,184,.55);}
.forma-pgto-bandeira-tab.is-ativa{
  font-weight:600;color:#fff;
  background:var(--orion-color-primary,#2563eb);
  border-color:var(--orion-color-primary,#2563eb);
}
.forma-pgto-bandeira-add{width:auto;min-width:180px;padding:5px 10px;font-size:12px;}
/* table-layout:fixed é obrigatório aqui: sem ele a tabela não encolhe abaixo da
   largura mínima do conteúdo, e um <input> sem atributo `size` pede ~170px de
   min-content. Três deles somavam 604px dentro de um modal de 440px e criavam
   barra de rolagem horizontal no corpo do modal. Com layout fixo as larguras
   das colunas abaixo mandam, e o 100% é respeitado de verdade. */
.forma-pgto-mdr-table{width:100%;border-collapse:collapse;margin-bottom:10px;table-layout:fixed;}
.forma-pgto-mdr-table th{
  text-align:left;padding:4px 6px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);
}
.forma-pgto-mdr-table th:nth-child(1){width:20%;}
.forma-pgto-mdr-table th:nth-child(2){width:auto;}
.forma-pgto-mdr-table th:nth-child(3){width:36%;}
.forma-pgto-mdr-table th:nth-child(4){width:48px;}
.forma-pgto-mdr-table td{padding:3px 6px;vertical-align:middle;}
.forma-pgto-mdr-table td:last-child{text-align:right;}
.forma-pgto-mdr-table .orion-input{padding:6px 8px;font-size:12.5px;width:100%;min-width:0;}
.forma-pgto-mdr-table .orion-btn{padding:6px 9px;}
/* O total antecipado e o numero que decide se vale parcelar. Destacado de
   proposito: e o que o lojista nao olha e devia. Escopo no bloco e nao na tabela
   porque o campo do debito vive fora dela, e o destaque vale nos dois. */
.forma-pgto-bloco .mdr-total{
  font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--orion-color-warning,#f59e0b);
}

/* ==========================================================================
   CONTAS A RECEBER - painel de antecipacao no modal de lancamento.
   ========================================================================== */
/* Modalidade + bandeira dividem um campo so: as duas respondem "o que foi
   passado na maquininha", e separadas em dois field-groups a linha do modal
   estouraria. */
.conta-receber-cartao{display:flex;gap:8px;}
.conta-receber-cartao .orion-input{min-width:0;flex:1 1 50%;}

.conta-receber-antecipacao{
  margin-top:14px;padding:12px 14px;border-radius:10px;
  background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.22);
}
.conta-receber-antecipacao.hidden{display:none;}
/* O titulo era um <label> com checkbox "Antecipar recebimento". A antecipacao virou
   automatica (quem decide e a caixa do cadastro da forma, nao a venda), entao o
   controle saiu e sobrou o texto - <label> sem controle e' rotulo de coisa nenhuma.
   O seletor antigo fica: o bloco de parcelamento logo acima ainda usa <label>. */
.conta-receber-antecipacao label,
.conta-receber-antecipacao-titulo{display:flex;align-items:center;gap:8px;font-size:13px;}
.conta-receber-antecipacao-info{margin:8px 0 0;font-size:11.5px;line-height:1.6;color:var(--text-muted);}
.conta-receber-antecipacao-info strong{color:var(--text-strong,inherit);}

/* ===== VENDA COM VÁRIAS FORMAS DE PAGAMENTO =====
   Só aparece quando o usuário clica no "+" ao lado da forma. Enquanto houver uma forma
   só, nada disto existe na tela e o modal é o de sempre — a divisão é aditiva, não um
   modo novo imposto a quem vende no crédito à vista. */
.conta-receber-pagamentos{
  margin-top:14px;padding:12px 14px;border-radius:10px;
  background:rgba(255,255,255,.025);
  border:1px solid color-mix(in srgb, var(--primary) 32%, transparent);
}
.conta-receber-pagamentos-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:10px;font-size:12px;color:var(--text-muted);
}
/* "Falta distribuir" é a invariante que o servidor cobra, visível desde a primeira tecla.
   Vermelho enquanto não fecha porque a venda não salva assim. */
.conta-receber-pagamentos-restante{font-weight:800;color:var(--rose,#f43f5e);}
.conta-receber-pagamentos-restante.ok{color:#34d399;}
.conta-receber-pagamento{
  padding:10px;margin-bottom:8px;border-radius:8px;
  background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.06);
}
.conta-receber-pagamento-topo{display:grid;grid-template-columns:26px minmax(0,1.4fr) minmax(0,1fr) 30px;gap:8px;align-items:center;}
.conta-receber-pagamento-num{
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:color-mix(in srgb, var(--primary) 65%, transparent);
  color:#fff;font-size:11px;font-weight:900;
}
.conta-receber-pagamento-linha{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.conta-receber-pagamento-linha label{
  display:flex;flex-direction:column;gap:4px;
  font-size:10.5px;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.04em;flex:1 1 120px;min-width:0;
}
.conta-receber-pagamento-linha .orion-input{height:32px;font-size:12px;}
.conta-receber-pagamento-desconto{display:grid;grid-template-columns:minmax(0,1fr) 62px;gap:6px;}
/* O checkbox fica na linha do texto, e não empilhado como os outros campos: sem isto o
   `flex-direction:column` acima jogaria a caixinha para cima do rótulo. */
.conta-receber-pagamento-recebido{flex-direction:row!important;align-items:center;gap:6px!important;flex:0 0 auto;align-self:flex-end;padding-bottom:7px;}
.conta-receber-pagamento-cartao{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:8px;}
.conta-receber-pagamento-cartao .orion-input{height:32px;font-size:12px;}

/* Cabeçalho de bloco dentro da demonstração: diz de qual forma são as linhas seguintes.
   Não é uma parcela — por isso o `data-parcela` que o JS usa para somar não vem aqui. */
.conta-receber-parcela-table tr.parcela-bloco{cursor:default;}
.conta-receber-parcela-table tr.parcela-bloco:hover{background:transparent;}
.conta-receber-parcela-table tr.parcela-bloco td{
  padding-top:12px;font-size:12px;font-weight:800;
  color:var(--text-strong,inherit);
  border-bottom:1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}
.parcela-bloco-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;margin-right:6px;border-radius:50%;
  background:color-mix(in srgb, var(--primary) 65%, transparent);
  color:#fff;font-size:10px;font-weight:900;
}
.parcela-bloco-detalhe{margin-left:8px;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:none;}
.conta-receber-parcela-table td.parcela-bloco-total{text-align:right;color:var(--primary);font-weight:900;}

/* A tabela de custo separada saiu: virou a coluna "Total antecipado" da propria
   tabela de MDR (.forma-pgto-mdr-table acima). Duas tabelas mostrando os mesmos
   parcelamentos, uma com o numero digitado e outra com o calculado, obrigavam a
   conferir linha contra linha. */

/* ==========================================================================
   CONCILIACAO BANCARIA
   Apensado no FIM do arquivo de proposito: sao classes novas (.conc-*), sem
   seletor em comum com nada acima, entao entrar por ultimo na cascata nao
   inverte disputa nenhuma. Ver a nota sobre @import x <link> no CLAUDE.md.
   ========================================================================== */
.conc-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--sp-3);
  margin-bottom:var(--sp-3);
}
.conc-kpi-card{padding:var(--sp-3);border-radius:var(--r-sm);}
.conc-kpi-label{
  display:flex;align-items:center;gap:6px;
  font-size:10px;text-transform:uppercase;letter-spacing:.8px;
  font-weight:800;color:var(--text-muted);
}
.conc-kpi-valor{
  margin-top:8px;
  font-family:'Fira Code',monospace;
  font-size:19px;font-weight:700;
}
/* A divergencia e o unico numero da tela que ganha cor: acima do previsto e
   custo que ninguem orcou, abaixo e credito nao aproveitado. Zero fica neutro
   porque "bateu" nao e boa nem ma noticia, e verde ali leria como meta batida. */
.conc-kpi-valor.is-acima{color:var(--rose);}
.conc-kpi-valor.is-abaixo{color:var(--emerald);}
.conc-kpi-valor.is-neutro{color:var(--text-muted);}
.conc-kpi-nota{margin-top:4px;font-size:11px;line-height:1.5;color:var(--text-muted);}

.conc-hint{margin:10px 0 0;font-size:11.5px;line-height:1.6;color:var(--text-muted);}
.conc-hint strong{color:var(--text-strong,inherit);}
.conc-hint--diverge{
  padding:10px 12px;border-radius:10px;
  background:rgba(244,63,94,.08);border:1px solid rgba(244,63,94,.22);
}
.conc-hint--diverge.hidden{display:none;}

/* ===================== CONTAS FINANCEIRAS ===================== */
/* Onde o dinheiro fica (pages/contas-financeiras.html). Os três KPIs repetem a
   grade da Conciliação de propósito — são duas telas financeiras irmãs e alinhar
   o cabeçalho delas evita que a navegação entre as duas pareça troca de sistema.
   Classes próprias em vez de reusar `.conc-*`: o dia em que uma das duas mudar,
   mudar a outra junto seria acidente, não decisão. */
.cfin-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--sp-3);
  margin-bottom:var(--sp-3);
}
.cfin-kpi-card{padding:var(--sp-3);border-radius:var(--r-sm);}
/* O card de formas sem conta só ganha moldura quando o número é maior que zero:
   com moldura permanente ele viraria decoração e pararia de ser lido. */
.cfin-kpi-card--alerta{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.06);}
.cfin-kpi-label{
  display:flex;align-items:center;gap:6px;
  font-size:10px;text-transform:uppercase;letter-spacing:.8px;
  font-weight:800;color:var(--text-muted);
}
.cfin-kpi-valor{
  margin-top:8px;
  font-family:'Fira Code',monospace;
  font-size:19px;font-weight:700;
}
.cfin-kpi-valor.is-negativo{color:var(--rose);}
.cfin-kpi-nota{margin-top:4px;font-size:11px;line-height:1.5;color:var(--text-muted);}

.cfin-hint{margin:10px 0 0;font-size:11.5px;line-height:1.6;color:var(--text-muted);}
.cfin-hint strong{color:var(--text-strong,inherit);}
.cfin-bloco{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--panel-border);}
.cfin-bloco.hidden{display:none;}
.cfin-bloco-title{
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--text-main);
}

.cfin-saldo{font-family:'Fira Code',monospace;font-weight:600;}
.cfin-saldo.is-negativo{color:var(--rose);}
.cfin-tag{
  display:inline-block;min-width:20px;padding:1px 6px;margin-right:6px;
  border-radius:999px;background:var(--panel-border);
  font-size:10.5px;font-weight:800;text-align:center;
}
.cfin-tag.is-alerta{background:rgba(245,158,11,.18);color:var(--amber,#b45309);}

/* O botão de atualizar alinha com a base dos dois inputs de data, e não com o
   topo da coluna: sem isso ele flutua na altura do <label>. */
.cfin-extrato-acao{display:flex;align-items:flex-end;}
.cfin-extrato-topo{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:var(--sp-3);margin:var(--sp-3) 0;
  padding:var(--sp-3);border:1px solid var(--panel-border);border-radius:var(--r-sm);
}
.cfin-extrato-topo span{
  display:block;font-size:10px;text-transform:uppercase;letter-spacing:.8px;
  font-weight:800;color:var(--text-muted);
}
.cfin-extrato-topo strong{
  display:block;margin-top:4px;
  font-family:'Fira Code',monospace;font-size:15px;
}
.cfin-extrato-topo .is-credito{color:var(--emerald);}
.cfin-extrato-topo .is-debito,
.cfin-extrato-topo .is-negativo{color:var(--rose);}

.cfin-extrato-tabela{width:100%;border-collapse:collapse;font-size:12.5px;}
.cfin-extrato-tabela th{
  padding:8px 10px;text-align:left;border-bottom:1px solid var(--panel-border);
  font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);
}
.cfin-extrato-tabela th:nth-child(3),
.cfin-extrato-tabela th:nth-child(4){text-align:right;}
.cfin-extrato-tabela td{padding:8px 10px;border-bottom:1px solid var(--panel-border);vertical-align:top;}
.cfin-extrato-meta{display:block;margin-top:2px;font-size:10.5px;color:var(--text-muted);}
.cfin-extrato-valor,
.cfin-extrato-saldo{text-align:right;font-family:'Fira Code',monospace;white-space:nowrap;}
.cfin-extrato-valor.is-credito{color:var(--emerald);}
.cfin-extrato-valor.is-debito{color:var(--rose);}
.cfin-extrato-saldo.is-negativo{color:var(--rose);}
.cfin-extrato-vazio{padding:var(--sp-4);text-align:center;color:var(--text-muted);}

/* ===================== TELA INICIAL — ODONTOLOGIA ===================== */
/* Home das empresas com tipos_empresa.chave = 'odontologia' (pages/inicio-odonto.html).
   As duas linhas usam a MESMA grade de propósito: os cards da segunda linha alinham
   com os da primeira, e a tela lê como um painel só em vez de quatro blocos soltos. */
/* Quatro quadrantes de mesma largura, e `stretch` (o padrão do grid, por isso não há
   `align-items` aqui) para os dois cards de uma linha terminarem na mesma altura. Já
   foi 2fr/1fr: dava um card de agenda largo e um de pacientes estreito, e as duas
   linhas não fechavam uma com a outra. */
.ini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
@media (max-width:1100px){.ini-grid{grid-template-columns:1fr;}}

.ini-bloco__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.ini-bloco__titulo{font-family:'Space Grotesk',sans-serif;font-size:var(--fs-lg);font-weight:700;display:flex;align-items:center;gap:8px;color:var(--text-main);}
.ini-bloco__titulo i{color:var(--primary);font-size:15px;}
.ini-bloco__sub{margin:4px 0 0;font-size:var(--fs-xs);color:var(--text-muted);}
.ini-destaque{color:var(--primary);}

/* 2×2 fixo, não auto-fit: com `auto-fit` a largura disponível decide quantos cabem, e
   no notebook os quatro grupos de situação viravam 3+1 — o quarto sozinho numa linha
   lê como se fosse outra coisa. */
.ini-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.ini-tiles--um{grid-template-columns:1fr;}
@media (max-width:560px){.ini-tiles{grid-template-columns:1fr;}}
.ini-tile{
  position:relative;display:block;width:100%;text-align:left;cursor:pointer;
  padding:16px 62px 14px 16px;border-radius:var(--r-lg,14px);
  background:var(--panel-bg);border:1px solid var(--panel-border);
  transition:transform .15s ease,box-shadow .15s ease;
}
.ini-tile:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.12);}
.ini-tile__label{display:block;font-size:var(--fs-xs);color:var(--text-muted);}
.ini-tile__valor{display:block;font-size:var(--fs-2xl);font-weight:800;line-height:1.2;margin:2px 0;color:var(--text-main);}
.ini-tile__pe{display:block;font-size:var(--fs-xs);color:var(--text-muted);}
.ini-tile i{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:var(--r-circle,50%);
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
/* Um tom por grupo de situação, o mesmo vocabulário de cor do resto do sistema:
   cyan = previsto, primary = acontecendo agora, emerald = fechado, rose = perdido. */
.ini-tile[data-tone="agendados"]{background:color-mix(in srgb, var(--cyan) 10%, var(--panel-bg));}
.ini-tile[data-tone="agendados"] .ini-tile__valor{color:var(--cyan);}
.ini-tile[data-tone="agendados"] i{background:color-mix(in srgb, var(--cyan) 18%, transparent);color:var(--cyan);}
.ini-tile[data-tone="atendimento"] .ini-tile__valor{color:var(--primary);}
.ini-tile[data-tone="atendimento"] i{background:color-mix(in srgb, var(--primary) 18%, transparent);color:var(--primary);}
.ini-tile[data-tone="atendidos"] .ini-tile__valor{color:var(--emerald);}
.ini-tile[data-tone="atendidos"] i{background:color-mix(in srgb, var(--emerald) 18%, transparent);color:var(--emerald);}
.ini-tile[data-tone="desmarcados"] .ini-tile__valor{color:var(--rose);}
.ini-tile[data-tone="desmarcados"] i{background:color-mix(in srgb, var(--rose) 18%, transparent);color:var(--rose);}
.ini-tile[data-tone="pacientes"]{background:color-mix(in srgb, var(--primary) 10%, var(--panel-bg));}
.ini-tile[data-tone="pacientes"] .ini-tile__valor{color:var(--primary);}
.ini-tile[data-tone="pacientes"] i{background:color-mix(in srgb, var(--primary) 18%, transparent);color:var(--primary);}

.ini-sublista{margin-top:18px;}
.ini-sublista__titulo{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.6px;font-weight:700;color:var(--text-muted);margin-bottom:8px;}

.ini-sexo{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;}
.ini-sexo div{padding:10px 6px;border-radius:var(--r-md,10px);background:color-mix(in srgb, var(--text-muted) 8%, transparent);}
.ini-sexo strong{display:block;font-size:var(--fs-xl);font-weight:800;color:var(--text-main);}
.ini-sexo span{font-size:var(--fs-xs);color:var(--text-muted);}

.ini-linha{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--panel-border);}
.ini-linha:last-child{border-bottom:none;}
.ini-linha--click{cursor:pointer;}
.ini-linha--click:hover{background:color-mix(in srgb, var(--primary) 6%, transparent);}
.ini-linha__hora{font-family:'Fira Code',monospace;font-size:var(--fs-sm);font-weight:700;color:var(--primary);white-space:nowrap;}
.ini-linha__corpo{flex:1;min-width:0;}
.ini-linha__corpo strong{display:block;font-size:var(--fs-sm);color:var(--text-main);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ini-linha__corpo span{display:block;font-size:var(--fs-xs);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.ini-badge{
  font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap;
  background:color-mix(in srgb, var(--text-muted) 14%, transparent);color:var(--text-muted);
}
/* Só o vocabulário de TAREFA (`tarefas_status_label()`: Agendada/Atrasada/Concluída) —
   os status de agendamento saíram junto com a lista "Próximos de hoje". */
.ini-badge[data-status="concluída"]{background:color-mix(in srgb, var(--emerald) 16%, transparent);color:var(--emerald);}
.ini-badge[data-status="agendada"]{background:color-mix(in srgb, var(--cyan) 16%, transparent);color:var(--cyan);}
.ini-badge[data-status="atrasada"]{background:color-mix(in srgb, var(--rose) 16%, transparent);color:var(--rose);}
.ini-badge[data-status="aniversario"]{background:color-mix(in srgb, var(--primary) 16%, transparent);color:var(--primary);}

.ini-filtros{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.ini-filtros .orion-input{max-width:280px;}
.ini-chips{display:flex;gap:6px;}
.ini-chip{
  cursor:pointer;font-size:var(--fs-xs);font-weight:700;padding:6px 14px;border-radius:999px;
  border:1px solid var(--panel-border);background:transparent;color:var(--text-muted);
}
.ini-chip.active{background:var(--primary);border-color:var(--primary);color:#fff;}

.ini-vazio{color:var(--text-muted);text-align:center;padding:26px 0;font-style:italic;font-size:var(--fs-sm);}

/* ===================================================== DASHBOARD ODONTOLÓGICA
   pages/dashboard-odonto.html — painel de gestão do PERÍODO (a Tela Inicial, `.ini-*`
   acima, responde pelo DIA). Bloco novo no FIM do arquivo de propósito: acrescentar no
   fim não move nenhuma regra existente de posição na cascata, e `orion-pages.css` é
   <link> separado (depois do orion.css), então nada aqui disputa com o framework.
   Só tokens de tema já usados pelo resto do sistema (--primary/--cyan/--emerald/
   --rose): cor fixa aqui quebraria nos temas claros. */
.dodo-header{align-items:flex-start;}
.dodo-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.dodo-chips{display:flex;gap:6px;flex-wrap:wrap;}
.dodo-chip{
  cursor:pointer;font-size:var(--fs-xs);font-weight:700;padding:6px 14px;border-radius:999px;
  border:1px solid var(--panel-border);background:transparent;color:var(--text-muted);
}
.dodo-chip.active{background:var(--primary);border-color:var(--primary);color:#fff;}
/* Container do OrionDateRange: o componente traz o próprio visual (.odr-*), aqui só
   se garante que ele não encolha junto dos chips quando a linha quebra. */
.dodo-periodo{flex:none;}

/* --------------------------------------------------- três indicadores-chave */
.dodo-destaques{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px;}
@media (max-width:1100px){.dodo-destaques{grid-template-columns:1fr;}}
.dodo-destaque{padding:18px 20px;display:flex;flex-direction:column;gap:6px;}
.dodo-destaque__topo{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.dodo-destaque__label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.6px;font-weight:700;color:var(--text-muted);}
.dodo-destaque__topo i{font-size:15px;color:var(--primary);}
.dodo-destaque__valor{font-family:'Space Grotesk',sans-serif;font-size:var(--fs-3xl,30px);font-weight:800;line-height:1.15;color:var(--text-main);}
.dodo-destaque__sub{margin:0;font-size:var(--fs-xs);color:var(--text-muted);}
.dodo-destaque__pe{margin:auto 0 0;padding-top:10px;font-size:var(--fs-xs);color:var(--text-muted);}
.dodo-destaque__linhas{margin-top:8px;display:flex;flex-direction:column;gap:6px;}
.dodo-destaque__linhas div{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--fs-sm);}
.dodo-destaque__linhas span{color:var(--text-muted);}
.dodo-destaque__linhas strong{color:var(--text-main);font-weight:700;}
.dodo-destaque__linhas strong.is-negativo{color:var(--rose);}
.dodo-destaque__rodape{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;font-size:var(--fs-xs);color:var(--text-muted);}
.dodo-destaque__rodape strong{color:var(--emerald);}
.dodo-destaque__rodape strong.is-alerta{color:var(--rose);}
.dodo-destaque[data-tone="receita"] .dodo-destaque__valor{color:var(--emerald);}
.dodo-destaque[data-tone="receita"] .dodo-destaque__topo i{color:var(--emerald);}
.dodo-destaque[data-tone="ticket"] .dodo-destaque__valor{color:var(--cyan);}
.dodo-destaque[data-tone="ticket"] .dodo-destaque__topo i{color:var(--cyan);}

/* Paleta de séries — seis tons a partir dos tokens de tema, para rosca, ranking e
   funil falarem a MESMA língua de cor. Fixar hex aqui prenderia a tela a um tema; as
   duas últimas são mistura porque o sistema só expõe quatro cores nomeadas. */
.dodo-cor-0{--dodo-serie:var(--primary);}
.dodo-cor-1{--dodo-serie:var(--cyan);}
.dodo-cor-2{--dodo-serie:var(--emerald);}
.dodo-cor-3{--dodo-serie:var(--rose);}
.dodo-cor-4{--dodo-serie:color-mix(in srgb, var(--primary) 55%, var(--cyan));}
.dodo-cor-5{--dodo-serie:color-mix(in srgb, var(--emerald) 55%, var(--cyan));}
[data-cor="0"]{--dodo-serie:var(--primary);}
[data-cor="1"]{--dodo-serie:var(--cyan);}
[data-cor="2"]{--dodo-serie:var(--emerald);}
[data-cor="3"]{--dodo-serie:var(--rose);}
[data-cor="4"]{--dodo-serie:color-mix(in srgb, var(--primary) 55%, var(--cyan));}
[data-cor="5"]{--dodo-serie:color-mix(in srgb, var(--emerald) 55%, var(--cyan));}

/* Barra de proporção reutilizada por conversão, ocupação, listas e funil.
   A entrada anima `scaleX`, não `width`: a largura chega por `style` inline (calculada
   no JS) e animar a mesma propriedade que o JS escreve faria as duas brigarem. Com
   `scaleX` a barra cresce da esquerda sem que o valor final saia do controle do JS —
   e a `transition` de width ainda cobre quem muda de valor depois (conversão,
   ocupação), que nascem com 0% e só recebem o número quando o payload chega. */
@keyframes dodo-barra-entra{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.dodo-barra{height:8px;border-radius:999px;overflow:hidden;background:color-mix(in srgb, var(--text-muted) 16%, transparent);margin-top:8px;}
.dodo-barra--fina{height:5px;margin-top:6px;}
.dodo-barra > span{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg, var(--dodo-serie, var(--primary)), color-mix(in srgb, var(--dodo-serie, var(--primary)) 45%, transparent));
  box-shadow:0 0 10px color-mix(in srgb, var(--dodo-serie, var(--primary)) 35%, transparent);
  transform-origin:left center;
  transition:width .45s cubic-bezier(.22,1,.36,1);
  animation:dodo-barra-entra .5s cubic-bezier(.22,1,.36,1) both;
}

/* ------------------------------------------------------------- mini-cards */
.dodo-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px;}
.dodo-tiles--tres{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:1100px){.dodo-tiles,.dodo-tiles--tres{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.dodo-tiles,.dodo-tiles--tres{grid-template-columns:1fr;}}
.dodo-tile{padding:16px 18px;display:flex;flex-direction:column;gap:2px;}
.dodo-tile__topo{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.dodo-tile__topo span{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.6px;font-weight:700;color:var(--text-muted);}
.dodo-tile__topo i{font-size:14px;color:var(--text-muted);}
/* `--fs-2xl` NAO existe no orion.css (a escala vai de --fs-xl a --fs-hero). Sem o
   fallback o var() inteiro fica invalido e o numero herda o tamanho do corpo — o tile
   perdia o destaque em silencio, que e' o modo mais chato de um bug de CSS falhar. */
.dodo-tile > strong{font-family:'Space Grotesk',sans-serif;font-size:var(--fs-2xl,23px);font-weight:800;line-height:1.2;color:var(--text-main);}
.dodo-tile small{font-size:var(--fs-xs);color:var(--text-muted);}
.dodo-tile__veredito{margin-top:4px;font-weight:700;color:var(--emerald);}
.dodo-tile__veredito.is-alerta{color:var(--rose);}
.dodo-tile[data-tone="ocupacao"] .dodo-tile__topo i{color:var(--cyan);}
.dodo-tile[data-tone="faltas"] .dodo-tile__topo i{color:var(--rose);}
.dodo-tile[data-tone="inadimplencia"] .dodo-tile__topo i{color:var(--rose);}
.dodo-tile[data-tone="orcamentos"] .dodo-tile__topo i{color:var(--primary);}
.dodo-tile--icone{flex-direction:row;align-items:center;gap:14px;}
.dodo-tile--icone > div{display:flex;flex-direction:column;gap:1px;min-width:0;}
.dodo-tile--icone span{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.6px;font-weight:700;color:var(--text-muted);}
.dodo-tile__icone{
  flex:none;width:46px;height:46px;border-radius:var(--r-circle,50%);
  display:flex;align-items:center;justify-content:center;font-size:17px;
  background:color-mix(in srgb, var(--primary) 16%, transparent);color:var(--primary);
}

/* ----------------------------------------------------------------- blocos */
.dodo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px;}
.dodo-grid--dois{grid-template-columns:minmax(0,2fr) minmax(0,1fr);}
@media (max-width:1100px){.dodo-grid,.dodo-grid--dois{grid-template-columns:1fr;}}
/* `min-width:0` nos itens dos três grids. Item de grid nasce com `min-width:auto`, ou
   seja, nunca encolhe abaixo do conteúdo — e o `min-width:520px` do SVG do gráfico
   esticava o CARD inteiro para 561px em tela de 375px, estourando a página na
   horizontal. Com isso a trilha volta a mandar e o `overflow-x` do .dodo-chart passa a
   agir (o gráfico rola dentro do card, que é o comportamento pretendido). */
.dodo-grid > *,.dodo-destaques > *,.dodo-tiles > *{min-width:0;}
.dodo-bloco{padding:18px 20px;}
.dodo-bloco__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.dodo-bloco__titulo{font-family:'Space Grotesk',sans-serif;font-size:var(--fs-lg);font-weight:700;display:flex;align-items:center;gap:8px;color:var(--text-main);}
.dodo-bloco__titulo i{color:var(--primary);font-size:15px;}
.dodo-bloco__sub{margin:4px 0 0;font-size:var(--fs-xs);color:var(--text-muted);}

.dodo-lista{display:flex;flex-direction:column;gap:12px;}
/* `min-width:0` no item: sem ele o nome longo do procedimento/paciente estica o flex
   e o valor à direita sai do card em vez de o nome ser truncado. */
.dodo-lista__item{min-width:0;}
.dodo-lista__topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:var(--fs-sm);}
.dodo-lista__topo span{color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dodo-lista__topo strong{color:var(--text-main);font-weight:700;white-space:nowrap;}
.dodo-vazio{color:var(--text-muted);text-align:center;padding:26px 0;font-style:italic;font-size:var(--fs-sm);}

/* ---------------------------------------------------------------- gráfico */
/* O SVG rola dentro do próprio container em tela estreita — o corpo da página nunca
   rola na horizontal. `min-width` mantém o gráfico legível em vez de espremê-lo. */
/* `position:relative` porque a dica (tooltip) e' posicionada em pixels de tela pelo JS
   e precisa deste container como bloco de contencao — nao o card, senao ela ficaria
   deslocada do gráfico assim que o card ganhasse padding diferente. */
.dodo-chart{overflow-x:auto;position:relative;}
.dodo-chart__svg{width:100%;min-width:520px;height:260px;display:block;}
.dodo-chart__grade{stroke:var(--panel-border);stroke-width:1;opacity:.55;}
/* A linha do zero e' a unica que o olho usa como referencia real; as outras quatro sao
   apoio. Mesma cor, opacidade cheia — nao uma cor propria, que viraria uma sexta cor. */
.dodo-chart__grade--base{opacity:1;stroke-width:1.5;}
.dodo-chart__tick{font-size:10px;fill:var(--text-muted);}
.dodo-chart__tick--dir{fill:var(--cyan);}
.dodo-chart__rotulo{font-size:10px;fill:var(--text-muted);}

/* Os `stop-color` dos gradientes declarados no <defs> do JS. Ficam aqui, e nao no SVG,
   porque cor fixa no markup prenderia o grafico a um tema — e o sistema tem nove. */
.dodo-grad__barra-topo{stop-color:var(--primary);stop-opacity:.95;}
.dodo-grad__barra-pe{stop-color:var(--primary);stop-opacity:.20;}
.dodo-grad__area-topo{stop-color:var(--cyan);stop-opacity:.30;}
.dodo-grad__area-pe{stop-color:var(--cyan);stop-opacity:0;}

/* Barra cresce da BASE, nao do centro: `transform-box:fill-box` faz o transform-origin
   valer sobre a caixa da propria forma (sem ele a origem seria o canto do viewBox e a
   barra entraria voando de canto). O `animation-delay` de cada barra vem inline do JS. */
@keyframes dodo-barra-sobe{from{transform:scaleY(0);opacity:.4;}to{transform:scaleY(1);opacity:1;}}
.dodo-chart__barra{
  fill:url(#dodoGradBarra);
  transform-box:fill-box;transform-origin:50% 100%;
  animation:dodo-barra-sobe .55s cubic-bezier(.22,1,.36,1) both;
  transition:fill .16s ease;
}
/* Destaque do bucket sob o cursor: gradiente -> cor cheia. Mudar opacidade das OUTRAS
   barras seria mais bonito e mais caro (repinta o grafico inteiro a cada movimento). */
.dodo-chart__barra.is-ativo{fill:var(--primary);}

@keyframes dodo-fade{from{opacity:0;}to{opacity:1;}}
.dodo-chart__area{fill:url(#dodoGradArea);animation:dodo-fade .9s ease both;}
.dodo-chart__linha{fill:none;stroke:var(--cyan);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 2px 6px color-mix(in srgb, var(--cyan) 40%, transparent));}
.dodo-chart__ponto{
  fill:var(--cyan);stroke:var(--bg);stroke-width:1.5;
  transform-box:fill-box;transform-origin:50% 50%;
  transition:transform .16s cubic-bezier(.22,1,.36,1);
  animation:dodo-fade .4s ease .55s both;
}
.dodo-chart__ponto.is-ativo{transform:scale(1.75);}

/* Guia vertical: nasce fora da area (x=0 no JS) e so aparece com o cursor. Tracejada
   para nao competir com a grade, que e' continua. */
.dodo-chart__guia{stroke:var(--text-muted);stroke-width:1;stroke-dasharray:3 4;opacity:0;pointer-events:none;transition:opacity .15s ease;}
.dodo-chart__guia.is-ativo{opacity:.6;}

/* Tooltip. Fundo SOLIDO (`--bg`), nao `--panel-bg`: o card ja e' translucido, e uma
   dica translucida sobre barras coloridas fica ilegivel justamente onde ela importa. */
.dodo-chart__dica{
  position:absolute;top:8px;transform:translateX(-50%);
  z-index:5;pointer-events:none;min-width:158px;
  padding:9px 11px;border-radius:10px;
  background:var(--bg);border:1px solid var(--panel-border);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  font-size:var(--fs-sm);line-height:1.6;
}
.dodo-chart__dica[hidden]{display:none;}
.dodo-chart__dica > strong{display:block;margin-bottom:5px;color:var(--text-main);font-weight:700;}
.dodo-chart__dica span{display:flex;align-items:center;gap:7px;color:var(--text-muted);}
.dodo-chart__dica b{margin-left:auto;color:var(--text-main);font-weight:700;}
.dodo-chart__dica i{flex:none;width:9px;height:9px;border-radius:3px;}
.dodo-chart__dica i[data-serie="receita"]{background:var(--primary);}
.dodo-chart__dica i[data-serie="atendimentos"]{background:var(--cyan);border-radius:999px;}

.dodo-legenda{display:flex;gap:14px;flex-wrap:wrap;}
.dodo-legenda__item{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--text-muted);}
.dodo-legenda__item::before{content:'';width:10px;height:10px;border-radius:3px;}
/* O swatch repete o GRADIENTE da barra, nao uma chapada: legenda que nao se parece com
   a forma que representa obriga a pessoa a adivinhar qual serie e' qual. */
.dodo-legenda__item--barra::before{background:linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 25%, transparent));}
.dodo-legenda__item--linha::before{background:var(--cyan);border-radius:999px;box-shadow:0 0 8px color-mix(in srgb, var(--cyan) 45%, transparent);}

/* ------------------------------------------------------------------ funil */
.dodo-funil{display:flex;flex-direction:column;gap:12px;}
@keyframes dodo-etapa-entra{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}
.dodo-funil__etapa{
  display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:center;gap:10px;
  animation:dodo-etapa-entra .45s cubic-bezier(.22,1,.36,1) both; /* delay inline, do JS */
}
@media (max-width:520px){.dodo-funil__etapa{grid-template-columns:90px minmax(0,1fr) auto;}}
.dodo-funil__label{font-size:var(--fs-xs);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dodo-funil__barra{height:22px;border-radius:6px;overflow:hidden;background:color-mix(in srgb, var(--text-muted) 12%, transparent);}
/* Usa `--dodo-serie` (vem do `data-cor` que o JS escreve), nao `--primary` fixo: sem
   isso o funil era a unica peca da tela fora da paleta de series — seis etapas, uma cor
   so, e nada ligando a etapa ao ranking/rosca que falam da mesma coisa. */
.dodo-funil__barra > span{
  display:block;height:100%;border-radius:6px;
  background:linear-gradient(90deg, var(--dodo-serie, var(--primary)), color-mix(in srgb, var(--dodo-serie, var(--primary)) 45%, transparent));
  box-shadow:0 0 12px color-mix(in srgb, var(--dodo-serie, var(--primary)) 28%, transparent);
  transform-origin:left center;
  transition:width .25s ease;
  animation:dodo-barra-entra .55s cubic-bezier(.22,1,.36,1) both;
}
.dodo-funil__valor{font-size:var(--fs-sm);font-weight:700;color:var(--text-main);white-space:nowrap;}
.dodo-funil__valor small{font-weight:600;color:var(--text-muted);}
/* A perda mora no VAO entre duas barras, alinhada com a coluna das barras — e' onde a
   queda acontece. Alinhada a esquerda com o resto viraria mais uma linha de lista. */
.dodo-funil__queda{
  display:flex;align-items:center;gap:6px;margin-left:120px;
  font-size:var(--fs-xs);font-weight:700;color:var(--rose);opacity:.85;
}
.dodo-funil__queda i{font-size:9px;}
@media (max-width:520px){.dodo-funil__queda{margin-left:100px;}}

/* ------------------------------------------------ ranking (lista de barras) */
/* Selo numerado na cor da serie. Faz o ranking e a rosca falarem a mesma lingua: o
   item 1 e' da mesma cor no numero, na barra e na fatia. */
.dodo-lista__rank{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;margin-right:8px;vertical-align:-4px;
  border-radius:6px;font-style:normal;font-size:10px;font-weight:800;
  background:color-mix(in srgb, var(--dodo-serie, var(--primary)) 20%, transparent);
  color:var(--dodo-serie, var(--primary));
}
.dodo-lista__topo strong small{margin-left:6px;font-size:var(--fs-xs);font-weight:600;color:var(--text-muted);}

/* -------------------------------------------------------------------- rosca */
/* Rosca so nas perguntas de FATIA DO TODO (origem dos pacientes, particular x
   convenio). Ranking continua em barra: rosca com 6 fatias e' ilegivel como ranking. */
.dodo-donut{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.dodo-donut__grafico{position:relative;flex:none;width:140px;height:140px;}
.dodo-donut__grafico svg{width:100%;height:100%;display:block;overflow:visible;}
.dodo-donut__trilho{fill:none;stroke:color-mix(in srgb, var(--text-muted) 14%, transparent);stroke-width:16;}
/* `transform-box:view-box` faz o `transform-origin` valer em coordenadas do viewBox,
   ou seja 70,70 = centro da rosca. Sem ele a fatia escalaria a partir da caixa do
   proprio arco e sairia girando para fora do circulo. */
@keyframes dodo-fatia-entra{from{opacity:0;transform:scale(.82);}to{opacity:1;transform:scale(1);}}
.dodo-donut__fatia{
  fill:none;stroke:var(--dodo-serie, var(--primary));stroke-width:16;
  transform-box:view-box;transform-origin:70px 70px;
  animation:dodo-fatia-entra .5s cubic-bezier(.22,1,.36,1) both; /* delay inline, do JS */
  transition:stroke-width .18s ease;
  cursor:default;
}
.dodo-donut__fatia:hover{stroke-width:20;}
.dodo-donut__centro{
  position:absolute;inset:0;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
}
.dodo-donut__centro strong{font-family:'Space Grotesk',sans-serif;font-size:var(--fs-xl);font-weight:800;line-height:1;color:var(--text-main);}
.dodo-donut__centro span{font-size:9px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);}
.dodo-donut__legenda{flex:1 1 170px;min-width:0;display:flex;flex-direction:column;gap:8px;}
.dodo-donut__linha{display:flex;align-items:center;gap:8px;min-width:0;font-size:var(--fs-sm);}
.dodo-donut__linha i{
  flex:none;width:9px;height:9px;border-radius:3px;
  background:var(--dodo-serie, var(--primary));
  box-shadow:0 0 8px color-mix(in srgb, var(--dodo-serie, var(--primary)) 45%, transparent);
}
.dodo-donut__linha span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted);}
.dodo-donut__linha strong{color:var(--text-main);font-weight:700;white-space:nowrap;}
.dodo-donut__linha em{flex:none;min-width:34px;text-align:right;font-style:normal;font-size:var(--fs-xs);font-weight:700;color:var(--text-muted);}

/* -------------------------------------------------------- movimento reduzido */
/* O CSS zera as animacoes; o JS zera o traco progressivo da linha por conta propria
   (`semMovimento` em dashboard-odonto.js) — sem isso a linha ficaria INVISIVEL, presa
   no `stroke-dashoffset` inicial que so a animacao desfaz. */
@media (prefers-reduced-motion: reduce){
  .dodo-barra > span,.dodo-chart__barra,.dodo-chart__area,.dodo-chart__ponto,
  .dodo-donut__fatia,.dodo-funil__etapa,.dodo-funil__barra > span{animation:none;}
}

/* ============================================================
   PACIENTES — linha rica da OrionTable
   ============================================================
   A grade continua sendo a OrionTable: o que muda aqui e' o DESENHO de
   quatro celulas (`col.render` em assets/js/pages/pacientes.js), mais a
   barra de filtro rapido injetada logo abaixo da toolbar do engine.

   Tudo escopado em `#orionPacientesTable` de proposito. Os nomes `pac-*`
   sao curtos e colidiriam facil com outra tela; e o engine reescreve o
   innerHTML do container, entao qualquer regra solta aqui atingiria a
   grade de todo mundo. */
#orionPacientesTable .pac-linha{display:flex;align-items:center;gap:10px;min-width:0;}
#orionPacientesTable .pac-avatar{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;letter-spacing:.5px;
  background:color-mix(in srgb, var(--primary) 16%, transparent);color:var(--primary);
}
#orionPacientesTable .pac-identidade{display:flex;flex-direction:column;min-width:0;line-height:1.3;}
#orionPacientesTable .pac-nome{
  font-size:var(--fs-sm);font-weight:700;color:var(--text-main);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#orionPacientesTable .pac-sub{
  font-size:var(--fs-xs);color:var(--text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

#orionPacientesTable .pac-selos{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
#orionPacientesTable .pac-selo{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;
  background:color-mix(in srgb, var(--text-muted) 14%, transparent);color:var(--text-muted);
}
#orionPacientesTable .pac-selo i{font-size:10px;}
#orionPacientesTable .pac-selo--info{background:color-mix(in srgb, var(--cyan) 16%, transparent);color:var(--cyan);}
#orionPacientesTable .pac-selo--alerta{background:color-mix(in srgb, var(--rose) 16%, transparent);color:var(--rose);}
#orionPacientesTable .pac-selo--ok{background:color-mix(in srgb, var(--emerald) 16%, transparent);color:var(--emerald);}
/* Celula sem dado: tracinho discreto em vez de vazio, senao a linha parece quebrada. */
#orionPacientesTable .pac-vazio{color:var(--text-muted);opacity:.6;}

#orionPacientesTable .pac-data{display:flex;flex-direction:column;line-height:1.3;}
#orionPacientesTable .pac-data strong{font-size:var(--fs-sm);font-weight:700;color:var(--text-main);}
#orionPacientesTable .pac-data span{font-size:var(--fs-xs);color:var(--text-muted);}

#orionPacientesTable .pac-abas{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;
}
#orionPacientesTable .pac-aba{
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-xs);font-weight:700;padding:7px 15px;border-radius:999px;
  border:1px solid var(--panel-border);background:transparent;color:var(--text-muted);
}
#orionPacientesTable .pac-aba:hover{color:var(--text-main);border-color:var(--primary);}
#orionPacientesTable .pac-aba.active{background:var(--primary);border-color:var(--primary);color:#fff;}
#orionPacientesTable .pac-aba-contagem{
  font-size:10px;font-weight:800;padding:1px 7px;border-radius:999px;
  background:color-mix(in srgb, var(--text-muted) 20%, transparent);
}
#orionPacientesTable .pac-aba.active .pac-aba-contagem{background:rgba(255,255,255,.25);color:#fff;}

/* ============================================================
   OrionTableCards — barra de cards-resumo clicáveis
   ============================================================
   Usada por contas a pagar e contas a receber (assets/js/orion-table-cards.js).
   Diferente das pílulas de Pacientes, aqui o card carrega VALOR, então precisa de
   três linhas: rótulo, total e quantidade de títulos.

   `auto-fit` + `minmax` em vez de largura fixa: a barra tem 7 cards e o sistema roda
   de 1920px a celular. Com coluna fixa sobraria faixa vazia no desktop e faltaria
   espaço no notebook — aqui a linha se reorganiza sozinha. */
.orion-cards-barra{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:10px;margin:0 0 16px;
}
.orion-card-resumo{
  cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px;
  padding:12px 14px;border-radius:var(--r-sm, 10px);
  border:1px solid var(--panel-border);background:var(--panel-bg);
  transition:border-color .15s, transform .15s;
}
.orion-card-resumo:hover{border-color:var(--primary);transform:translateY(-1px);}
.orion-card-resumo__topo{
  font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  color:var(--text-muted);
}
.orion-card-resumo__valor{font-size:var(--fs-lg, 18px);font-weight:800;color:var(--text-main);line-height:1.25;}
.orion-card-resumo__qtd{font-size:var(--fs-xs);color:var(--text-muted);}

/* O tom colore o VALOR e a borda, nunca o fundo inteiro: sete cards com fundo
   saturado lado a lado viram um semáforo e nada se destaca. */
.orion-card-resumo--alerta .orion-card-resumo__valor{color:var(--rose);}
.orion-card-resumo--atencao .orion-card-resumo__valor{color:var(--primary);}
.orion-card-resumo--ok .orion-card-resumo__valor{color:var(--emerald);}
.orion-card-resumo--info .orion-card-resumo__valor{color:var(--cyan);}

/* Selecionado: só o card ativo ganha peso, e o `aria-pressed` no botão conta a
   mesma coisa para leitor de tela — o recorte da tabela não pode ser um estado que
   só existe em cor. */
.orion-card-resumo.active{
  border-color:var(--primary);
  box-shadow:inset 0 0 0 1px var(--primary), 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.orion-card-resumo.active .orion-card-resumo__topo{color:var(--primary);}

/* ===================== MANUAL DE USO =====================
   Blocos dos fragmentos pages/manual-odontologico.html e
   pages/manual-financeiro.html — as classes nao tem nada de odontologico nem de
   financeiro, um manual novo so precisa repetir o markup. Vive aqui e nao num
   <style> do fragmento porque o compat-check.py conta <style> embutido como
   estilo existente e mascara classe orfa. As classes reaproveitam .docs-* para
   layout (indice fixo + coluna de conteudo) e acrescentam so o que o manual
   precisa: passo a passo numerado, tabela de campos e caixas de aviso. */
.man-sub{
  margin:var(--sp-4) 0 var(--sp-2);
  font-size:var(--fs-base);
  font-weight:800;
  color:var(--text-main);
  display:flex;
  align-items:center;
  gap:8px;
}
.man-sub i{color:var(--primary);font-size:13px;}
.man-sub:first-child{margin-top:0;}

/* Passo a passo. Contador proprio em vez do marcador nativo do <ol>: o numero
   precisa ser um disco alinhado ao topo do texto, e ::marker nao aceita
   background nem tamanho. */
.man-steps{
  list-style:none;
  counter-reset:manstep;
  display:grid;
  gap:10px;
  padding:0;
  margin:0 0 var(--sp-3);
}
.man-steps > li{
  counter-increment:manstep;
  position:relative;
  padding:10px 12px 10px 42px;
  border:1px solid var(--panel-border);
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--panel-bg) 60%, transparent);
  color:var(--text-muted);
  line-height:1.55;
  font-size:var(--fs-sm);
}
.man-steps > li::before{
  content:counter(manstep);
  position:absolute;
  left:10px;
  top:10px;
  width:22px;
  height:22px;
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  font-size:11px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
}
.man-steps > li strong{color:var(--text-main);}
.man-steps ul{
  margin:6px 0 0;
  padding-left:16px;
  display:grid;
  gap:4px;
  font-size:var(--fs-xs);
}

/* Caixa de aviso. `tone` decide so a cor da borda esquerda e do icone. */
.man-nota{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  margin:0 0 var(--sp-3);
  border:1px solid var(--panel-border);
  border-left:3px solid var(--primary);
  border-radius:var(--r-sm);
  color:var(--text-muted);
  font-size:var(--fs-sm);
  line-height:1.55;
}
.man-nota i{margin-top:3px;color:var(--primary);}
.man-nota strong{color:var(--text-main);}
.man-nota[data-tone="alerta"]{border-left-color:var(--rose);}
.man-nota[data-tone="alerta"] i{color:var(--rose);}
.man-nota[data-tone="ok"]{border-left-color:var(--emerald);}
.man-nota[data-tone="ok"] i{color:var(--emerald);}

/* Tabela de campos/estados. Rola dentro do proprio container: em 900px a
   coluna de conteudo nao comporta 4 colunas de texto e o body nao pode rolar
   na horizontal. */
.man-tabela-wrap{overflow-x:auto;margin:0 0 var(--sp-3);}
.man-tabela{
  width:100%;
  border-collapse:collapse;
  font-size:var(--fs-sm);
  min-width:520px;
}
.man-tabela th,
.man-tabela td{
  padding:8px 10px;
  border-bottom:1px solid var(--panel-border);
  text-align:left;
  vertical-align:top;
  color:var(--text-muted);
  line-height:1.5;
}
.man-tabela th{
  color:var(--text-main);
  font-weight:800;
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
}
.man-tabela td strong{color:var(--text-main);}
.man-tabela tr:last-child td{border-bottom:0;}

/* Trilha do fluxo principal, repetida no topo de cada secao envolvida. */
.man-fluxo{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:0 0 var(--sp-3);
}
.man-fluxo span{
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--panel-border);
  background:color-mix(in srgb, var(--panel-bg) 60%, transparent);
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--text-muted);
  white-space:nowrap;
}
.man-fluxo span.is-forte{
  border-color:var(--primary);
  color:var(--primary);
}
.man-fluxo i{color:var(--text-muted);font-size:10px;}

/* Onde fica: caminho de menu ate a tela da secao. */
.man-onde{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  margin:0 0 var(--sp-3);
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--primary) 8%, transparent);
  color:var(--text-main);
  font-size:var(--fs-xs);
  font-weight:700;
}
.man-onde i{color:var(--primary);}

.man-onde code{
  background:transparent;
  color:var(--text-muted);
  font-weight:600;
}

/* ---- Roteiro de apresentacao (pages/roteiro-apresentacao.html) --------------
   A tela reusa o motor e o visual dos manuais, e acrescenta duas pecas que os
   manuais nao tem porque nao precisam: a FALA (o que dizer em voz alta) e o
   TEMPO de cada bloco.

   .rot-fala usa --cyan de proposito: .man-nota ja ocupa --primary, --rose e
   --emerald nos tres tons dela, e a fala precisa se distinguir de aviso a
   primeira vista. Os quatro tokens sao redefinidos por TODOS os temas, entao
   isto acompanha a troca de tema sem cor literal nenhuma. */
.rot-fala{
  position:relative;
  padding:12px 14px;
  margin:0 0 var(--sp-3);
  border-radius:var(--r-sm);
  border-left:3px solid var(--cyan);
  background:color-mix(in srgb, var(--cyan) 8%, transparent);
  color:var(--text-main);
  font-size:var(--fs-base);
  line-height:1.6;
}
.rot-fala::before{
  content:"Você diz";
  display:block;
  margin-bottom:5px;
  color:var(--cyan);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.rot-fala p{margin:0 0 8px;}
.rot-fala p:last-child{margin-bottom:0;}
/* Grifo de marcador: a frase que carrega o argumento, para o olho achar no meio
   do paragrafo durante a leitura em voz alta. */
.rot-fala em{
  font-style:normal;
  font-weight:600;
  box-shadow:inset 0 -.5em 0 color-mix(in srgb, var(--cyan) 22%, transparent);
}

/* Tempo/uso do bloco, logo abaixo do <h2> da secao. */
.rot-meta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  margin:0 0 var(--sp-3);
  border-radius:var(--r-pill);
  border:1px solid var(--panel-border);
  color:var(--text-muted);
  font-size:var(--fs-xs);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.rot-meta i{color:var(--primary);font-size:10px;}


/* Indice do manual: <button>, nao <a>, porque ancora interna passaria pelo
   roteador da SPA (ver assets/js/pages/manual-odontologico.js). Repete o visual
   de .docs-index a e zera o que o UA aplica em botao. */
.docs-index button{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  /* Mesmo padding compacto de .docs-index a: sao 19 itens, e cada 3px a mais por
     item custa ~57px de altura - a diferenca entre caber na tela e nao caber. */
  padding:7px 12px;
  border:0;
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--text-muted);
  text-align:left;
  font-family:inherit;
  font-size:var(--fs-sm);
  font-weight:700;
  cursor:pointer;
}
.docs-index button:hover{
  color:var(--text-main);
  background:rgba(255,255,255,.05);
}
.docs-index button.is-ativo{
  color:var(--primary);
  background:color-mix(in srgb, var(--primary) 12%, transparent);
}

/* ===================== LOCAÇÃO DE SALAS ===================== */
/* Duas colunas iguais no modal de locatários, com minmax(0,1fr) e não 1fr puro: o
   1fr respeita o min-content e a coluna do formulário (que tem inputs) empurraria a
   lista para um terço da largura. Mesma correção já registrada em calendar.css. */
.locatarios-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-5);}
.locatarios-col h4{margin:0 0 var(--sp-3);font-size:var(--fs-sm);color:var(--text-main);}
.locatarios-lista{display:flex;flex-direction:column;gap:var(--sp-2);max-height:360px;overflow-y:auto;}
.locatario-item{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3);border:1px solid var(--panel-border);border-radius:var(--r-md);}
.locatario-item.is-inativo{opacity:.6;}
.locatario-item-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.locatario-item-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.locatario-item-info small{color:var(--text-muted);font-size:var(--fs-xs);}
.locatario-item-acoes{display:flex;gap:var(--sp-1);flex-shrink:0;}
.locatario-form-actions{display:flex;justify-content:flex-end;gap:var(--sp-2);}

/* O bloco do lançamento é um cartão DENTRO do modal — a separação visual é o que
   deixa claro que aquela caixinha decide se o financeiro entra na jogada ou não. */
.locacao-financeiro{padding:var(--sp-4);}
.locacao-hint{margin:var(--sp-2) 0 0;color:var(--text-muted);font-size:var(--fs-xs);}
.locacao-hint.is-alerta{color:var(--rose);}
.locacao-financeiro .orion-row{margin-top:var(--sp-3);}

@media (max-width: 860px){
  .locatarios-layout{grid-template-columns:1fr;}
}

/* ===================== PROCEDIMENTOS DA BASE ===================== */
/* Importador do catálogo de referência. São ~377 caixas num modal, então o corpo
   rola por DENTRO da lista: sem o min-height:0 no grid, o filho de altura
   automática empurra o container e quem rola vira a página inteira (o mesmo
   tropeço documentado em docs/css-layout.md). */
.base-identidade{padding:var(--sp-4);margin-bottom:var(--sp-4);}
.base-identidade h4{margin:0 0 var(--sp-1);font-size:var(--fs-sm);color:var(--text-main);}
.base-identidade p{margin:0;color:var(--text-muted);font-size:var(--fs-xs);}
.base-meta{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);}
.base-meta li{color:var(--text-muted);font-size:var(--fs-xs);}
.base-meta strong{color:var(--text-main);}
.base-aviso{margin:var(--sp-3) 0 0;padding:var(--sp-3);border-radius:var(--r-md);
  background:var(--panel-bg);color:var(--text-muted);font-size:var(--fs-xs);}
.base-aviso i{margin-right:var(--sp-2);}

.base-controles{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3);}
.base-controles .orion-input{flex:1 1 240px;min-width:0;}
.base-controles-acoes{display:flex;gap:var(--sp-2);flex-shrink:0;}

.base-lista{display:flex;flex-direction:column;gap:var(--sp-3);max-height:46vh;overflow-y:auto;min-height:0;}
.base-carregando{margin:0;padding:var(--sp-6);text-align:center;color:var(--text-muted);font-size:var(--fs-sm);}

.base-grupo{padding:var(--sp-3);}
.base-grupo-header{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin-bottom:var(--sp-2);padding-bottom:var(--sp-2);border-bottom:1px solid var(--panel-border);}
.base-grupo-contagem{color:var(--text-muted);font-size:var(--fs-xs);flex-shrink:0;}
/* minmax(0,1fr) e não 1fr: nome de procedimento da TUSS é longo e, com 1fr, a
   coluna cresce além da faixa em vez de truncar (mesma razão registrada no
   .locatarios-layout). */
.base-grupo-itens{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:var(--sp-1) var(--sp-3);}
.base-item.is-importado{opacity:.65;}
.base-codigo,.base-tag{margin-left:var(--sp-2);font-style:normal;font-size:var(--fs-xs);color:var(--text-muted);}
.base-tag{padding:1px var(--sp-2);border-radius:var(--r-sm);background:var(--panel-bg);}
.base-contador{color:var(--text-muted);font-size:var(--fs-xs);}

@media (max-width: 860px){
  .base-controles-acoes{width:100%;}
  .base-controles-acoes .orion-btn{flex:1;}
}

/* ===================== ESPECIALIDADES DO PROCEDIMENTO ===================== */
/* 13 caixas empilhadas numa coluna só ocupavam 291px de altura do modal e
   empurravam o resto do formulário para fora da vista.

   `auto-fill` em vez de `repeat(2, 1fr)` porque o modal muda muito de largura:
   medido, dá 3 colunas e 185px de altura num modal de 780px, 2 colunas quando o
   modal encolhe, e 1 no celular — sem transbordo em nenhuma das três. Fixar em
   duas deixaria o modal largo com metade da faixa vazia.

   A altura sozinha ganha menos do que parece (as caixas ficaram mais altas por
   causa da borda e do padding): o ganho maior é o estado MARCADO virar legível
   sem procurar o quadradinho, que é o que fazia a lista parecer bagunçada.

   O seletor é o ID, e não `.permission-options`: aquele bloco é o componente
   compartilhado do modal de Permissões e do seletor de módulos, e mexer nele
   mudaria três telas que ninguém pediu para mexer. */
#procedimentoEspecialidadesGrid{
  grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));
  gap:var(--sp-2);
}
#procedimentoEspecialidadesGrid .permission-option{
  align-items:center;
  gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--panel-border);
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease,color .15s ease;
}
#procedimentoEspecialidadesGrid .permission-option input{margin-top:0;}
#procedimentoEspecialidadesGrid .permission-option:hover{
  border-color:var(--primary);
  color:var(--text-main);
}
/* Marcado precisa ser legível SEM procurar a caixinha: espalhadas em colunas,
   varrer 13 quadradinhos para saber o que está ligado é pior do que era na
   lista única. A borda cheia e a tinta de 13% resolvem no relance. */
#procedimentoEspecialidadesGrid .permission-option:has(input:checked){
  border-color:var(--primary);
  background:color-mix(in srgb, var(--primary) 13%, transparent);
  color:var(--text-main);
}

/* Aviso de procedimento em uso, no lugar onde o botao Excluir estaria. Mesmo
   desenho do aviso da base -- é a mesma função: explicar uma regra dentro do
   modal, sem virar alerta de erro (não houve erro; o registro está protegido). */
.procedimento-uso-aviso{
  margin:0;
  padding:var(--sp-3);
  border-radius:var(--r-md);
  background:var(--panel-bg);
  color:var(--text-muted);
  font-size:var(--fs-xs);
  line-height:1.5;
}
.procedimento-uso-aviso i{margin-right:var(--sp-2);color:var(--primary);}
.procedimento-uso-aviso strong{color:var(--text-main);}

/* ===================== RELATÓRIOS COMERCIAIS ===================== */
/* Tela só de leitura, seis relatórios em abas. Duas coisas moram aqui por não terem
   chave de configuração no engine:
   1. o botão "Novo" da toolbar, que o OrionTable desenha sempre — a tela não tem
      endpoint de criação, e o botão abriria um modal que não salva (botão fantasma,
      ver docs/orion-table.md);
   2. o espaço entre a barra de filtros e as abas, que nenhuma das duas peças declara. */
.relcom-filtros{
  display:flex;
  align-items:flex-end;
  gap:var(--sp-3);
  flex-wrap:wrap;
  padding:var(--sp-4);
  margin-bottom:var(--sp-4);
}
.relcom-filtros .field-group{min-width:130px;}
/* `hidden` NAO basta aqui: `.field-group` declara `display:flex`, e regra de autor
   com especificidade de classe vence o `[hidden]{display:none}` da folha do
   navegador. Sem esta linha os sete campos aparecem em todas as abas — o filtro de
   periodo apareceria na Posicao, que e o saldo de HOJE e nao olha periodo nenhum.
   Medido no Browser pane em 2026-08-26: `hidden=true` e `display=flex` ao mesmo tempo. */
.relcom-filtros .field-group[hidden]{display:none;}
.relcom-filtros .orion-btn{margin-left:auto;}
@media (max-width:700px){
  .relcom-filtros .orion-btn{margin-left:0;width:100%;justify-content:center;}
}
.relcom-tabs{margin-bottom:var(--sp-4);}

/* Cards-resumo injetados na toolbar de cada grade. `flex-wrap` porque cinco números
   com rótulo não cabem ao lado da busca num notebook. */
.relcom-cards{flex-wrap:wrap;color:var(--text-muted);font-size:var(--fs-sm);}
.relcom-cards strong{color:var(--text-main);}
.relcom-alerta strong{color:var(--rose);}
.relcom-classe-a strong{color:var(--emerald);}
.relcom-classe-b strong{color:var(--cyan);}
.relcom-classe-c strong{color:var(--text-muted);}
.relcom-aviso{margin:0 0 var(--sp-4);}

/* Tabelas do CMV, montadas à mão pelo mesmo motivo das do fechamento de caixa: são
   listas curtas de leitura, e o engine traria busca, paginação e coluna de Ações
   para doze linhas. Rolagem no próprio bloco para o body não ir para a horizontal. */
.relcom-tabela-wrap{overflow-x:auto;}
.relcom-tabela{width:100%;border-collapse:collapse;font-size:var(--fs-sm);}
.relcom-tabela th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);font-weight:700;padding:0 10px 10px;white-space:nowrap;}
.relcom-tabela td{padding:11px 10px;border-top:1px solid var(--panel-border);color:var(--text-main);}
.relcom-tabela .num{text-align:right;white-space:nowrap;}
.relcom-tabela tfoot th{padding:11px 10px;border-top:2px solid var(--panel-border);color:var(--text-main);font-size:var(--fs-sm);text-transform:none;letter-spacing:0;}
.relcom-tabela tfoot th.num{text-align:right;}

/* O botao fantasma tem TRES superficies, nao duas — medido no Browser pane em
   2026-08-26. Alem de `newItemBtn` e `newItemBtnMobile` na toolbar, o engine desenha
   uma LINHA "+ Novo" no fim do corpo da grade (`.grid-add-row`, orion-table.js:1565)
   que chama o mesmo `openModal(null)`. Escondendo so os dois botoes, a linha continua
   la, clicavel, abrindo um modal que salva em `dataSource.create` — endpoint que uma
   tela de relatorio nao tem. Ver docs/orion-table.md. */
#orionRelcomPosicaoTable .grid-add-row,
#orionRelcomAbcTable .grid-add-row,
#orionRelcomGiroTable .grid-add-row,
#orionRelcomRupturaTable .grid-add-row,
#orionRelcomMargemTable .grid-add-row,
#orionRelcomMargemVendaTable .grid-add-row,
#orionRelcomPosicaoTable [data-el="newItemBtn"],
#orionRelcomPosicaoTable [data-el="newItemBtnMobile"],
#orionRelcomAbcTable [data-el="newItemBtn"],
#orionRelcomAbcTable [data-el="newItemBtnMobile"],
#orionRelcomGiroTable [data-el="newItemBtn"],
#orionRelcomGiroTable [data-el="newItemBtnMobile"],
#orionRelcomRupturaTable [data-el="newItemBtn"],
#orionRelcomRupturaTable [data-el="newItemBtnMobile"],
#orionRelcomMargemTable [data-el="newItemBtn"],
#orionRelcomMargemVendaTable [data-el="newItemBtn"],
#orionRelcomMargemVendaTable [data-el="newItemBtnMobile"],
#orionRelcomMargemTable [data-el="newItemBtnMobile"]{display:none;}

/* ===================== GRADES SÓ DE LEITURA (varredura 2026-08-26) ===================== */
/* Mesmo defeito das seções COMISSOES e REGISTRADORA acima, achado na varredura que
   fechou a Fase 5: o OrionTable não tem flag de "grade só de leitura", então toda grade
   nasce com três superfícies de criação — os dois botões "Novo" da toolbar e a linha
   "+ Novo" no fim do corpo (`.grid-add-row`, orion-table.js:1565). As três caem no mesmo
   `openModal(null)` (orion-table.js:1785).

   Nestas duas o "Novo" nunca fez sentido e ninguém tinha escondido nada:

   - Conciliação: o item nasce de uma venda/baixa e morre com ela (ver o comentário do
     `actions:` em assets/js/pages/conciliacao.js, que já tinha tirado lápis e lixeira
     pelo mesmo motivo e deixou o "Novo" passar).
   - Saldo de pacientes: cada linha é um saldo CALCULADO (disponível, a autorizar,
     aguardando execução). Não existe "novo saldo".

   Em nenhuma das duas há `dataSource.create`, então o modal grava só na tela: a linha
   inventada aparece, parece salva e some no próximo refresh. */
#orionConciliacaoTable .grid-add-row,
#orionConciliacaoTable [data-el="newItemBtn"],
#orionConciliacaoTable [data-el="newItemBtnMobile"],
#orionSaldoPacientesTable .grid-add-row,
#orionSaldoPacientesTable [data-el="newItemBtn"],
#orionSaldoPacientesTable [data-el="newItemBtnMobile"]{display:none;}