/* Painel de Agentes IA — identidade PIE (preto + dourado). Só a paleta mudou:
   as variáveis abaixo alimentam o CSS inteiro, então trocar aqui repinta tudo
   sem reescrever regra nenhuma. */
:root {
  --bg: #0a0805; --bg2: #14100a; --card: #17130c; --card2: #1f1910;
  --tx: #f5efe2; --tx2: #b9a97f; --line: #3a2f18;
  --ok: #34d399; --warn: #fbbf24; --err: #f87171;
  --ac: #d4af37; --ac2: #f0cf6b;          /* dourado da marca */
  --ac-tx: #1a1408;                        /* texto sobre o dourado */
  --ac-fraco: rgba(212,175,55,.13); --ac-linha: rgba(212,175,55,.32);

  /* Mesmos tokens do portal do cliente: painel e portal sao o MESMO produto
     visto de dois lados. Divergir a escala aqui faria a operacao parecer dois
     sistemas colados. */
  --fs-1: 11px; --fs-2: 12px; --fs-3: 13px; --fs-4: 14px;
  --fs-5: 16px; --fs-6: 18px; --fs-7: 22px; --fs-8: 28px;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px;
  --r-p: 8px; --r-m: 10px; --r-g: 14px; --r-pill: 999px;
  --mv: 160ms cubic-bezier(.2,.6,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --mv: 1ms; }
  * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, "Segoe UI", Arial, sans-serif; background: radial-gradient(1200px 600px at 80% -10%, #241c0c 0%, var(--bg) 55%); color: var(--tx); min-height: 100vh; }

/* ---------- login ---------- */
.login-body { display: flex; align-items: center; justify-content: center; }
.login-card { background: linear-gradient(160deg, var(--card) 0%, var(--bg2) 100%); border: 1px solid var(--line); border-radius: 18px; padding: 42px 38px; width: min(400px, 92vw); text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: sobe .5s ease; }
.login-logo { font-size: 44px; margin-bottom: 10px; }   /* logotipo nao entra na
   escala de TEXTO: escala tipografica governa leitura, nao marca. */
.login-logo-img { width: min(230px, 70%); height: auto; display: block; margin: 0 auto 16px; }
.login-card h1 { font-size: var(--fs-7); margin-bottom: 4px; }
.login-card .sub { color: var(--tx2); font-size: var(--fs-3); margin-bottom: 26px; }
.login-card input { width: 100%; padding: 13px 15px; border-radius: 10px; border: 1px solid var(--line); background: #0d0a05; color: var(--tx); font-size: var(--fs-5); outline: none; transition: border .2s; }
.login-card input:focus { border-color: var(--ac); }
.login-card button { width: 100%; margin-top: 14px; padding: 13px; border: none; border-radius: 10px; background: linear-gradient(90deg, var(--ac), var(--ac2)); color: var(--ac-tx); font-size: var(--fs-5); font-weight: 700; cursor: pointer; transition: transform .15s, box-shadow .2s; }
.login-card button:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(212,175,55,.35); }
.erro { color: var(--err); font-size: var(--fs-3); margin-top: 12px; min-height: 18px; }

/* ---------- shell ---------- */
header { display: flex; align-items: center; gap: 14px; padding: 16px 26px; border-bottom: 1px solid var(--line); background: rgba(12,9,4,.78); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 50; }
header h1 { font-size: var(--fs-6); }
header .marca { height: 34px; width: auto; display: block; }
header .marca-sub { color: var(--tx2); font-size: var(--fs-2); border-left: 1px solid var(--line); padding-left: 14px; }
header .quando { color: var(--tx2); font-size: var(--fs-2); margin-left: auto; }
header button { background: none; border: 1px solid var(--line); color: var(--tx2); border-radius: 8px; padding: 7px 13px; cursor: pointer; }
nav.tabs { display: flex; gap: 6px; padding: 14px 26px 0; }
nav.tabs a { color: var(--tx2); text-decoration: none; padding: 9px 16px; border-radius: 10px 10px 0 0; font-size: var(--fs-4); border: 1px solid transparent; }
nav.tabs a.on { color: var(--tx); background: var(--card); border-color: var(--line); border-bottom-color: var(--card); }
main { padding: 22px 26px 60px; max-width: 1180px; margin: 0 auto; }

/* ---------- cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.card { background: linear-gradient(160deg, var(--card) 0%, var(--bg2) 100%); border: 1px solid var(--line); border-radius: 14px; padding: 20px; animation: sobe .35s ease; }
.card h3 { font-size: var(--fs-5); display: flex; align-items: center; gap: 9px; }
.card .meta { color: var(--tx2); font-size: var(--fs-3); margin-top: 8px; line-height: 1.55; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: pulsa 1.8s infinite; }
.dot.err { background: var(--err); }
.dot.warn { background: var(--warn); }
.badge { font-size: var(--fs-1); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--tx2); }
.badge.ok { color: var(--ok); border-color: rgba(52,211,153,.4); }
.badge.err { color: var(--err); border-color: rgba(248,113,113,.4); }
.badge.warn { color: var(--warn); border-color: rgba(251,191,36,.4); }
.kpis { display: flex; gap: 14px; margin: 14px 0 2px; }
.kpi { flex: 1; background: #0d0a05; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; text-align: center; }
.kpi b { font-size: var(--fs-7); display: block; }
.kpi span { font-size: var(--fs-1); color: var(--tx2); }

/* ---------- tabelas / conversas ---------- */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-4); }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--tx2); font-weight: 500; font-size: var(--fs-2); }
tr:hover td { background: rgba(212,175,55,.06); }
.btn { border: 1px solid var(--line); background: var(--card2); color: var(--tx); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: var(--fs-3); transition: all .15s; }
.btn:hover { border-color: var(--ac); }
.btn.perigo:hover { border-color: var(--err); color: var(--err); }
.btn.ac { background: linear-gradient(90deg, var(--ac), var(--ac2)); border: none; color: var(--ac-tx); font-weight: 700; }

/* ---------- editor config ---------- */
textarea.config { width: 100%; min-height: 420px; background: #0d0a05; border: 1px solid var(--line); border-radius: 12px; color: var(--tx); font-family: Consolas, monospace; font-size: var(--fs-3); padding: 14px; outline: none; }
textarea.config:focus { border-color: var(--ac); }
.aviso { background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.35); color: var(--warn); border-radius: 10px; padding: 11px 14px; font-size: var(--fs-3); margin: 12px 0; }
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; font-size: var(--fs-4); box-shadow: 0 12px 40px rgba(0,0,0,.5); animation: sobe .3s ease; z-index: 99; }
.toast.ok { border-color: rgba(52,211,153,.5); }
.toast.err { border-color: rgba(248,113,113,.5); }

/* ---------- QR modal ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(8,6,3,.8); display: flex; align-items: center; justify-content: center; z-index: 80; }
.modal { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px; text-align: center; max-width: 380px; }
.modal img { width: 260px; height: 260px; border-radius: 10px; background: #fff; padding: 8px; }

/* ---------- árvore da infraestrutura ---------- */
.tronco { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 12px; background: linear-gradient(160deg, var(--card) 0%, var(--bg2) 100%); animation: sobe .35s ease; }
.tronco-cab { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.tronco-cab b { font-size: var(--fs-4); }
.tronco .seta { transition: transform .2s; color: var(--tx2); }
.tronco[data-aberto="1"] .seta { transform: rotate(90deg); }
.tronco .galhos { display: none; margin: 12px 0 2px 22px; border-left: 2px solid var(--line); padding-left: 16px; }
.tronco[data-aberto="1"] .galhos { display: block; }
.galho { margin-bottom: 12px; position: relative; }
.galho::before { content: ""; position: absolute; left: -18px; top: 10px; width: 12px; height: 2px; background: var(--line); }
.galho-cab { display: flex; align-items: center; gap: 8px; font-size: var(--fs-4); flex-wrap: wrap; }

/* ---------- editor visual (colaborador leigo) ---------- */
.sec { background: linear-gradient(160deg, var(--card) 0%, var(--bg2) 100%); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin-top: 14px; }
.sec h4 { font-size: var(--fs-4); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
label.cv { display: block; font-size: var(--fs-3); color: var(--tx2); margin-bottom: 11px; }
label.cv .dica { color: #5b688f; font-size: var(--fs-1); }
label.cv input, label.cv textarea { display: block; width: 100%; margin-top: 5px; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line); background: #0d0a05; color: var(--tx); font-size: var(--fs-4); outline: none; font-family: inherit; }
label.cv input:focus, label.cv textarea:focus { border-color: var(--ac); }
[data-campo="system_prompt"] { min-height: 200px; font-family: Consolas, monospace; font-size: var(--fs-3) !important; }
a.btn { display: inline-block; }
.item-card { background: #0d0a05; border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
label.mini { font-size: var(--fs-2); color: var(--tx2); display: flex; flex-direction: column; gap: 4px; min-width: 110px; flex: 1; }
label.mini.larga { flex-basis: 100%; }
label.mini input, label.mini textarea, label.mini select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); color: var(--tx); font-size: var(--fs-4); outline: none; font-family: inherit; }
label.mini input:focus, label.mini textarea:focus { border-color: var(--ac); }
.item-card .sub { flex-basis: 100%; display: flex; gap: 10px; flex-wrap: wrap; font-size: var(--fs-2); color: var(--tx2); align-items: flex-end; }
.mini-btn { padding: 5px 10px; font-size: var(--fs-2); }

/* ---------- wizard ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid label { font-size: var(--fs-3); color: var(--tx2); display: flex; flex-direction: column; gap: 5px; }
.form-grid input { padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line); background: #0d0a05; color: var(--tx); font-size: var(--fs-4); outline: none; }
.form-grid input:focus { border-color: var(--ac); }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

@keyframes sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.5); } 70% { box-shadow: 0 0 0 9px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }

/* ---------- conversas: busca + tabela + chat inline ---------- */
.conv-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 4px 0; }
.conv-toolbar input[type="text"], #conv-busca { flex: 1; min-width: 240px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); color: var(--tx); font-size: var(--fs-4); outline: none; }
#conv-busca:focus { border-color: var(--ac); }
.conv-check { font-size: var(--fs-3); color: var(--tx2); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.tbl-scroll { max-height: 52vh; overflow: auto; border-radius: 10px; }
tr.linha-pausada td { background: rgba(245,183,49,.09); }
tr.linha-pausada td:first-child { box-shadow: inset 3px 0 0 var(--warn); }

#chat-wrap { position: fixed; inset: 0; z-index: 50; }
.chat-bg { position: absolute; inset: 0; background: rgba(4,8,20,.55); }
.chat-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 94vw); background: var(--card); border-left: 1px solid var(--line); display: flex; flex-direction: column; box-shadow: -12px 0 40px rgba(0,0,0,.4); animation: entra .18s ease; }
@keyframes entra { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.chat-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.bolha { max-width: 80%; padding: 8px 12px; border-radius: 12px; font-size: var(--fs-4); line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
.bolha.cli { align-self: flex-start; background: var(--bg2); border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.bolha.eu { align-self: flex-end; background: rgba(212,175,55,.18); border: 1px solid rgba(212,175,55,.35); border-bottom-right-radius: 3px; }
.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); align-items: flex-end; }
.chat-input textarea { flex: 1; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); color: var(--tx); font-size: var(--fs-4); font-family: inherit; resize: vertical; outline: none; }
.chat-input textarea:focus { border-color: var(--ac); }

/* ---------- integração SaaS no card do agente ---------- */
.saas-box { margin-top: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg2); }
.saas-linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs-3); color: var(--tx2); }
.saas-linha .badge { cursor: help; }

/* ---------- teste-drive / saúde (20/08) ---------- */
.teste-drive { border: 1px dashed rgba(212,175,55,.45); border-radius: 12px; padding: 16px; margin-top: 16px; background: rgba(212,175,55,.04); }
.teste-drive textarea { width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line); background: #0d0a05; color: var(--tx); font: inherit; font-size: var(--fs-4); resize: vertical; }
.td-chat { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.td-msg { padding: 9px 13px; border-radius: 12px; max-width: 82%; font-size: var(--fs-4); line-height: 1.45; white-space: pre-wrap; }
.td-msg.cli { background: var(--card2); align-self: flex-start; border-bottom-left-radius: 4px; }
.td-msg.bot { background: linear-gradient(120deg, rgba(212,175,55,.20), rgba(212,175,55,.10)); border: 1px solid rgba(212,175,55,.30); align-self: flex-end; border-bottom-right-radius: 4px; }
.td-msg.bot.vazio { color: var(--err); font-style: italic; }
.td-diff { font-size: var(--fs-3); margin-top: 6px; line-height: 1.5; }
.td-diff .antes { color: var(--tx2); text-decoration: line-through; }
.td-diff .depois { color: var(--ac2); }
.txt-err { color: var(--err); }
.saude-badge { font-size: var(--fs-2); padding: 5px 11px; border-radius: 20px; border: 1px solid var(--line); }
.saude-badge.ok { color: var(--ok); border-color: rgba(52,211,153,.35); }
.saude-badge.err { color: var(--err); border-color: rgba(248,113,113,.45); background: rgba(248,113,113,.08); }
.btn.ok-btn { background: linear-gradient(90deg, var(--ac), var(--ac2)); color: var(--ac-tx); font-weight: 700; border-color: transparent; }
.saude-badge.naosei { color: var(--tx2); border-color: var(--line); background: rgba(255,255,255,.04); }
.aviso.perigo { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.45); color: var(--err); }

/* ---------- urgência das conversas (20/08) ---------- */
.esp { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--fs-3); }
.esp.alta { color: var(--err); font-weight: 700; }
.esp.media { color: var(--warn); }
.esp.ok { color: var(--ok); }
.esp.fria { color: var(--tx2); opacity: .65; }
tr.urg-alta td { background: rgba(248,113,113,.07); }
tr.urg-media td { background: rgba(251,191,36,.05); }
tr.urg-fria td { opacity: .72; }

/* ---------- Operação PIE (20/08) ---------- */
.op-valor { font-weight: 700; color: var(--ac2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.op-rec { font-weight: 400; color: var(--tx2); font-size: var(--fs-2); }
.faq-busca-wrap { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.faq-busca-wrap input { flex: 1; min-width: 200px; padding: 9px 13px; border-radius: 9px; border: 1px solid var(--line); background: #0d0a05; color: var(--tx); font-size: var(--fs-4); outline: none; }
.faq-busca-wrap input:focus { border-color: var(--ac); }

/* Lupa DENTRO do campo. placeholder e TEXTO PURO: um <svg> ali apareceria como
   tag crua na tela. Icone tem que ser elemento de verdade, sobreposto. (21/08) */
.campo-busca { position: relative; display: flex; align-items: center; flex: 1 1 200px; min-width: 0; }
.campo-busca > .ico { position: absolute; left: 11px; color: var(--tx2); pointer-events: none; }
.faq-busca-wrap .campo-busca input { flex: 1; min-width: 0; padding-left: 36px; }
.causa-queda { border-left: 3px solid var(--err); padding-left: 10px; margin-top: 8px; }
.causa-queda b { color: var(--err); }
.causa-dica { display: block; color: var(--tx2); font-size: var(--fs-2); margin-top: 3px; }
.badge.stack { color: var(--tx2); border-style: dashed; }

/* ---------- MOBILE de verdade (20/08) — o Richard opera do celular ---------- */
@media (max-width: 820px) {
  header { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  header .marca { height: 26px; }
  header .marca-sub { display: none; }
  header .quando { display: none; }
  main { padding: 16px 12px 60px; }

  /* abas viram faixa rolável em vez de quebrar em 3 linhas */
  nav.tabs { padding: 10px 12px 0; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  nav.tabs::-webkit-scrollbar { display: none; }
  nav.tabs a { white-space: nowrap; padding: 9px 13px; font-size: var(--fs-3); }

  /* o minmax(300px) estourava a viewport em tela de 360px */
  .grid { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 15px; }
  .sec { padding: 14px; }

  /* tabelas: rolam sozinhas em vez de espremer a coluna do telefone */
  .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: var(--fs-3); min-width: 520px; }
  th, td { padding: 8px 7px; }

  /* alvo de toque: dedo não acerta botão de 12px */
  .btn { padding: 10px 14px; font-size: var(--fs-4); }
  .btn.mini-btn { padding: 7px 11px; }
  .conv-toolbar { flex-direction: column; align-items: stretch; }
  .conv-toolbar input[type="text"], #conv-busca { min-width: 0; width: 100%; }
  .faq-busca-wrap input { min-width: 0; }
  label.mini { min-width: 0; }
  .form-grid { grid-template-columns: 1fr; }

  /* chat e modal ocupam a tela toda no celular */
  .chat-panel { width: 100%; max-width: 100%; border-radius: 0; }
  .modal { width: 92vw; padding: 20px; }
  .modal img { width: min(240px, 70vw); height: auto; }
  textarea.config { min-height: 260px; font-size: var(--fs-2); }
  .toast { left: 12px; right: 12px; bottom: 12px; }
}
@media (max-width: 420px) {
  nav.tabs a { padding: 8px 11px; font-size: var(--fs-3); }
  .kpis { flex-direction: column; gap: 8px; }
  header button { padding: 8px 12px; }
}

/* ============================================================
   ÍCONES, PONTOS DE STATUS E ACABAMENTO — 20/08/2026
   Mesma linguagem do portal do cliente. Painel e portal são o mesmo produto
   visto de dois lados; duas gramáticas visuais fariam parecer dois sistemas.
   ============================================================ */

.ico { width: 18px; height: 18px; flex-shrink: 0; vertical-align: -3px; display: inline-block; }
.ico-p { width: 14px; height: 14px; vertical-align: -2px; }
.ico-g { width: 22px; height: 22px; vertical-align: -4px; }
.ico-faltando { color: var(--err); }   /* nome errado grita, não some */

/* PONTO DE STATUS — estado é COR, assunto é ícone.
   Um círculo comunica "no ar / atenção / fora" mais rápido que qualquer
   desenho, e não disputa atenção com os ícones de navegação. */
.pt {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0; vertical-align: 1px; margin-right: 2px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}
.pt.ok { background: var(--ok); }
.pt.warn { background: var(--warn); }
.pt.err { background: var(--err); }
.pt.plano { background: #6b8cc4; }
.pt.fria { background: #6b6250; }

/* O toast ganhou ícone por TIPO (app.js). Ele alinha com a 1ª linha do texto,
   não com o centro do bloco: mensagem de 3 linhas com ícone centralizado fica
   com cara de erro de layout. */
.toast { display: flex; align-items: flex-start; gap: var(--e-2); }
.toast-ico { display: inline-flex; flex-shrink: 0; margin-top: 2px; }
.toast.ok .toast-ico { color: var(--ok); }
.toast.err .toast-ico { color: var(--err); }
.toast:not(.ok):not(.err) .toast-ico { color: var(--warn); }

/* Ícone do nó da árvore de infraestrutura (era emoji de 19px). */
.no-ico { display: inline-flex; color: var(--ac2); }
.no-ico .ico { width: 22px; height: 22px; }

/* FOCO DE TECLADO — uma regra, todo elemento interativo. O painel tinha ZERO
   :focus-visible: quem navegava por Tab não sabia onde estava. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ac2); outline-offset: 2px; border-radius: var(--r-p);
}

/* ESTADOS — o painel tinha 4 :hover no arquivo inteiro e nenhum :disabled. */
:where(.btn, button, .aba, .item-card a):not(:disabled) {
  transition: background-color var(--mv), border-color var(--mv), color var(--mv),
              transform var(--mv), box-shadow var(--mv);
}
.btn:hover:not(:disabled) { border-color: var(--ac-linha); color: var(--tx); }
.btn.ac:hover:not(:disabled), .btn.ok-btn:hover:not(:disabled) { filter: brightness(1.07); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.995); }
:where(.btn, button, a.btn)[disabled], :where(.btn, button)[aria-disabled="true"], button:disabled {
  opacity: .45; cursor: not-allowed; filter: grayscale(.35);
  transform: none !important; box-shadow: none !important;
}
/* Alvo de toque: o painel é usado do celular em plantão. */
:where(.btn, button, .aba) { min-height: 40px; }
.btn.mini-btn { min-height: 30px; }

/* Números de painel alinham pela coluna: 1.111 não pode parecer menor que 999. */
.kpi b, .badge, .esp, .num, .meta .n { font-variant-numeric: tabular-nums; }

/* Título e ícone: o ícone é do tamanho da linha, não do bloco. */
h3 .ico, h4 .ico, .aba .ico { color: var(--ac2); }
h3, h4 { text-wrap: balance; }

/* [hidden] TEM que ganhar de qualquer display. Foi exatamente assim que um modal
   travou a tela inteira do portal em 20/08: o elemento tinha [hidden], mas a
   classe trazia display:flex e a classe vence o padrao do navegador. Aqui o
   mesmo: #cli-lista tem .grid (display:grid), entao "esconder" nao escondia e a
   lista ficava aparecendo POR CIMA do detalhe do cliente. (21/08) */
[hidden] { display: none !important; }

/* ---------- BLOCO 1: visao por cliente (21/08) ---------- */
.tabs-sep {
  color: var(--tx2); font-size: var(--fs-1); text-transform: uppercase;
  letter-spacing: .08em; padding: 0 10px; opacity: .7; align-self: center;
  border-left: 1px solid var(--line); margin-left: 6px;
}
.cli-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cli-topo h2 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-7); }
.cli-topo #cli-busca {
  margin-left: auto; padding: 9px 13px; border-radius: 9px; border: 1px solid var(--line);
  background: #0d0a05; color: var(--tx); font-size: var(--fs-4); outline: none; min-width: 200px;
}
.cli-topo #cli-busca:focus { border-color: var(--ac); }
.cli-card { cursor: pointer; transition: border-color .18s, transform .12s; }
.cli-card:hover, .cli-card:focus-visible { border-color: var(--ac); transform: translateY(-2px); outline: none; }
.cli-card:focus-visible { box-shadow: 0 0 0 2px var(--ac); }
.cli-linha { display: flex; align-items: center; gap: 7px; margin: 6px 0; font-size: var(--fs-3); }
.cli-num { font-size: var(--fs-8); font-weight: 700; color: var(--ac); line-height: 1.1; }
/* bolinha de estado: verde/amarelo/vermelho/cinza — cinza e "nao sei", que NAO
   e a mesma coisa que "esta no ar". */
.bola { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.bola.verde    { background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.6); }
.bola.amarela  { background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,.5); }
.bola.vermelha { background: #f87171; box-shadow: 0 0 8px rgba(248,113,113,.5); }
.bola.cinza    { background: #6b7280; }
@media (max-width: 820px) {
  .cli-topo #cli-busca { margin-left: 0; width: 100%; }
  .tabs-sep { display: none; }
}

/* matriz de permissao por cliente (22/08) */
.perm-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:8px}
.perm-grade>*{min-width:0}
.perm-linha{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border:1px solid var(--linha,#2a2f3a);border-radius:9px;cursor:pointer}
.perm-linha:hover{border-color:var(--ac,#60a5fa)}
.perm-linha input{margin-top:3px;flex:0 0 auto}
.perm-linha small{color:var(--tinta-fraca,#94a3b8);line-height:1.35}


/* ═══════════ ÁREAS DE PERMISSÃO NA CRIAÇÃO (24/08) ═══════════
   Catorze interruptores soltos é tela de engenheiro. Quem vende pensa em
   produto: "esse leva o atendente e o CRM, mas não leva disparo". A chave da
   área marca o grupo; o detalhe item a item continua aberto embaixo, porque
   esconder o detalhe transformaria a área num segundo nível de permissão — e
   quem decide acesso tem que continuar sendo UMA lista só. */
.bloco-form { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: rgba(255,255,255,.015); }
.bloco-form h4 { margin: 0; display: flex; align-items: center; gap: 7px; }
/* o select do plano não herdava o visual dos inputs do form-grid e ficava com a
   cara do sistema operacional no meio de campos estilizados */
.form-grid select { padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line); background: #0d0a05; color: var(--tx); font-size: var(--fs-4); outline: none; }
.form-grid select:focus { border-color: var(--ac); }

.areas-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr)); gap: 10px; }
.areas-grade > * { min-width: 0; }
.area-bloco { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.area-chave { display: flex; gap: 9px; align-items: flex-start; padding: 10px 11px; cursor: pointer; background: rgba(255,255,255,.02); }
.area-chave:hover { background: rgba(212,175,55,.06); }
.area-chave input { margin-top: 3px; flex: none; }
.area-chave > span:first-of-type { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.area-chave b { display: flex; align-items: center; gap: 6px; }
.area-chave small { color: var(--tx2); line-height: 1.4; }
.area-conta { flex: none; font-size: var(--fs-2); color: var(--tx2); font-variant-numeric: tabular-nums; padding-top: 2px; }
.area-conta.on { color: var(--ac); }
.area-itens { padding: 6px 11px 10px 34px; display: grid; gap: 4px; }
.area-item { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-3); color: var(--tx2); cursor: pointer; }
.area-item:hover { color: var(--tx); }
.area-item input { margin-top: 3px; flex: none; }
.area-item small { opacity: .65; }

/* .linha-inteira era usada no formulário desde antes e NUNCA teve regra: num
   grid de 2 colunas ela virava só mais uma célula. Passava despercebido porque
   os itens que a usavam eram curtos; com os blocos de acesso e de senha ela
   passou a importar de verdade. */
.form-grid .linha-inteira { grid-column: 1 / -1; }

/* Guias da ficha do cliente (24/08) — as três perguntas de quem trabalha num
   cliente: quem ele é / o que o agente fala / o número está no ar. */
.ficha-guias { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
  border-bottom: 1px solid var(--line); padding-bottom: 12px; }

/* O cartão do cliente abre a janela dele. Antes só um botão abria, e o gesto
   óbvio — clicar no nome — não fazia nada. */
.cli-abre { cursor: pointer; }
.cli-card h3.cli-abre:hover { color: var(--ac); }
.cli-card:hover { border-color: rgba(212,175,55,.35); }

/* Label que É um checkbox precisa ser LINHA, não coluna. `.form-grid label` usa
   flex-direction:column (certo pra rótulo-em-cima-do-campo), e isso empurrava a
   caixinha do "é conta de teste" pro centro, solta, com o texto embaixo. */
.form-grid label:has(> input[type="checkbox"]) {
  flex-direction: row; align-items: center; gap: 8px;
}
.form-grid label > input[type="checkbox"] { flex: none; width: auto; margin: 0; }

/* ═══════════ OLHINHO DA SENHA (24/08) ═══════════
   Dentro da moldura do campo, não ao lado: ao lado empurra o input e quebra o
   alinhamento. `.login-card button` (0,1,1) perde pra `.campo-senha > .olho`
   (0,2,0), então o botão dourado de "Entrar" não vaza pra cá. */
.campo-senha { position: relative; display: block; }
/* `display: block` no input NAO e cosmetico: input e inline-block por padrao,
   e o pai ganha o espaco de descida da linha embaixo dele. Isso deixava o pai
   ~7px mais alto que o campo, e o `top:50%` do olhinho centralizava nessa
   altura maior — o botao ficava visivelmente baixo. Medido, nao deduzido. */
.campo-senha > input { width: 100%; padding-right: 46px; display: block; }
.campo-senha > .olho {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 8px;
  color: var(--tx2); cursor: pointer; line-height: 0;
}
.campo-senha > .olho:hover { color: var(--ac); background: rgba(212,175,55,.10); }
.campo-senha > .olho:focus-visible { outline: 2px solid var(--ac); outline-offset: 1px; }
.campo-senha > .olho[aria-pressed="true"] { color: var(--ac); }
/* `transform` e uma propriedade so: o scale do :active do botao apagaria o
   translateY(-50%) e o olhinho pularia. Reafirmo os dois juntos. */
.campo-senha > .olho:active { transform: translateY(-50%) scale(.94); }

/* ═══ BALANÇO (27/08) ═════════════════════════════════════════════════════
   O bloco de avisos vem ANTES dos totais e tem destaque próprio: ele é o que
   diz o que o número não sabe, e esconder isso embaixo da tabela transformaria
   um total honesto num total que parece completo. */
.bal-topo { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0 16px; }
.bal-topo label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--txt2, #9aa); }
.bal-topo input, .bal-topo select { padding: .45rem .6rem; min-width: 190px; }

.bal-avisos { border-left: 3px solid var(--aviso, #d9a441); margin-bottom: 16px; }
.bal-avisos ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.bal-avisos li { margin: .3rem 0; line-height: 1.45; }

.bal-num b { display: block; font-size: 1.5rem; margin: .3rem 0 .15rem; }
.bal-num .meta { font-size: .78rem; }

.bal-tab { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: .88rem; }
.bal-tab th { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--linha, #2a2f3a); font-weight: 600; }
.bal-tab td { padding: .6rem; border-bottom: 1px solid var(--linha, #1e222b); vertical-align: top; }
.bal-tab tr.bal-fora td { background: rgba(200, 60, 60, .07); }

.bal-tag { display: inline-block; font-size: .68rem; padding: .06rem .38rem; border-radius: .5rem;
           background: rgba(150,150,150,.16); white-space: nowrap; }
.bal-tag-ruim { background: rgba(200,60,60,.18); }
.bal-edit { background: none; border: 0; cursor: pointer; color: inherit; opacity: .55; font-size: .9rem; }
.bal-edit:hover { opacity: 1; }

/* a tabela rola dentro dela mesma; a página nunca rola de lado */
#bal-tabela { overflow-x: auto; }
@media (max-width: 620px) { .bal-topo input, .bal-topo select { min-width: 0; width: 100%; } }

/* ═══ BALANÇO — economia unitária (0016-v2, §B1–B12) ═══════════════════════
   As cores aqui carregam significado, não decoração: `bal-orig-*` diz a NATUREZA
   do número (medido / declarado / estimado / não medido), e naturezas diferentes
   nunca podem parecer a mesma coisa numa tela de dinheiro. */
.bal-orig { font-size: var(--fs-1); padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--line); white-space: nowrap; }
.bal-orig-ok  { color: var(--ok);   border-color: rgba(52,211,153,.4); }
.bal-orig-dec { color: var(--ac2);  border-color: var(--ac-linha); }
.bal-orig-est { color: var(--warn); border-color: rgba(251,191,36,.4); }
.bal-orig-nao { color: var(--tx2);  border-color: var(--line); opacity: .8; }

.bal-alerta { border-color: rgba(248,113,113,.45); }
.bal-ok-card { border-color: rgba(52,211,153,.3); }
.bal-ruim { color: var(--err); }
.bal-bom  { color: var(--ok); }
.bal-cinza { color: var(--tx2); opacity: .75; }
.bal-sem { font-size: var(--fs-5); cursor: help; }

/* a conta aberta: as duas últimas linhas (CUSTO TOTAL / RESULTADO) se destacam
   do detalhe, senão a soma se perde no meio das parcelas */
.bal-soma td { border-top: 1px solid var(--ac-linha); background: var(--ac-fraco); }

/* os dois equilíbrios lado a lado — mostrar um só esconderia a diferença entre
   "a conversa passou a custar mais do que rende" e "o cliente parou de pagar a
   própria infraestrutura", que são decisões diferentes */
.bal-eq { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--e-4); margin-top: var(--e-4); }
.bal-eq > div { border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--e-4); background: var(--bg2); }
.bal-eq h4 { font-size: var(--fs-3); color: var(--tx2); font-weight: 500; margin-bottom: var(--e-1); }
.bal-eq b { display: block; font-size: var(--fs-8); color: var(--ac2); line-height: 1.1; }
.bal-eq code { display: block; font-size: var(--fs-1); color: var(--tx2); margin: var(--e-2) 0; word-break: break-word; }
.bal-eq .meta { margin-top: var(--e-1); }

.bal-sim-premissa { border: 1px solid rgba(251,191,36,.4); background: rgba(251,191,36,.07); color: var(--tx); border-radius: var(--r-m); padding: var(--e-3) var(--e-4); margin-bottom: var(--e-4); font-size: var(--fs-3); line-height: 1.6; }
.bal-quando, #bal-quando { color: var(--tx2); font-size: var(--fs-2); align-self: center; }
.bal-conta code, .bal-avisos code { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-p); padding: 1px 6px; font-size: var(--fs-1); }
.bal-avisos li { margin-bottom: var(--e-2); line-height: 1.6; }
.bal-tab td, .bal-tab th { vertical-align: top; }

/* A MARCA VOLTA PARA A PÁGINA PRINCIPAL (05/09) — pedido do Richard.
   Clicar no símbolo da casa é o atalho que todo mundo tenta por instinto; até
   hoje o logo era só uma imagem e o clique não fazia nada. O <a> por fora
   preserva o layout do header (inline-flex) e ganha um foco visível, porque
   quem navega por teclado também usa esse atalho. */
a.marca-link { display: inline-flex; align-items: center; text-decoration: none; }
a.marca-link:focus-visible {
  outline: 2px solid var(--ac, #d4af37); outline-offset: 3px; border-radius: 6px;
}