/* Painel Financeiro — Fechamento de contrato.
   Usa os tokens de styles/tokens.css. Acento azul (--fin-accent) coerente com a
   identidade do modulo Financeiro (mesma familia da Cobranca). */
:root {
  --fin-accent: #2f6fd6;
  --fin-grad: linear-gradient(135deg, #2f6fd6, #5aa0e8);
}

#financeiroTab { min-width: 0; max-width: 100%; }
/* ── WhatsApp oficial Meta Cloud API ── */
.wa-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.wa-title { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--text-primary); }
.wa-sub { margin: 3px 0 0; font-size: 0.86rem; color: var(--text-secondary); max-width: 60ch; }
.wa-status { flex: 0 0 auto; }
.wa-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.wa-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.wa-badge.wa-ok { background: #e8f7ee; color: #1f7a45; }
.wa-badge.wa-wait { background: #fdf1df; color: #a86404; }
.wa-badge.wa-off { background: #eef1f5; color: #566273; }
.wa-card { background: var(--bg-surface); border: 1px solid var(--line-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--space-5); margin-bottom: var(--space-4); }
.wa-card-title { margin: 0 0 var(--space-3); font-size: 0.95rem; font-weight: 800; color: var(--text-primary); }
.wa-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; margin-bottom: var(--space-4); }
.wa-field { display: flex; flex-direction: column; gap: 5px; }
.wa-field span { font-size: 0.74rem; font-weight: 600; color: var(--text-secondary); }
.wa-field em { font-style: normal; color: var(--text-secondary); font-weight: 400; }
.wa-field input { padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm, 10px); background: var(--bg-surface); color: var(--text-primary); font-size: 0.92rem; }
.wa-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wa-btn { border: 1px solid var(--line-soft); background: var(--bg-surface); color: var(--text-primary); font: 600 0.85rem/1 inherit; padding: 9px 14px; border-radius: var(--radius-sm, 10px); cursor: pointer; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; }
.wa-btn:hover { background: var(--bg-muted); border-color: var(--fin-accent, #2f6fd6); color: var(--fin-accent, #2f6fd6); }
.wa-btn:disabled { opacity: 0.6; cursor: default; }
.wa-btn-primary, .wa-btn-primary:hover { background: #1f9d57; border-color: #1f9d57; color: #fff; }
.wa-btn-danger, .wa-btn-danger:hover { background: var(--bg-surface); border-color: var(--danger-500, #d14343); color: var(--danger-500, #d14343); }
.wa-qrcard[hidden] { display: none; }
.wa-qr-grid { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: center; }
.wa-qr { flex: 0 0 auto; background: #fff; padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); line-height: 0; }
.wa-qr img { display: block; width: 264px; height: 264px; image-rendering: pixelated; }
.wa-steps { margin: 0; padding-left: 20px; color: var(--text-primary); font-size: 0.9rem; line-height: 1.9; max-width: 42ch; }
.wa-hint { margin: var(--space-3) 0 0; font-size: 0.82rem; color: var(--text-secondary); }
.wa-empty { color: var(--text-secondary); font-size: 0.9rem; }
.wa-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 9px 16px; margin: 0 0 var(--space-3); padding: 0; list-style: none; color: var(--text-primary); font-size: 0.86rem; }
.wa-checklist li { display: flex; align-items: center; gap: 8px; }

/* ── Toggle de canal no wizard de cobrança (e-mail | WhatsApp) ── */
.cob-canal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-4); }
.cob-canal-lbl { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); }
.cob-canal-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-soft); background: var(--bg-surface); color: var(--text-secondary); font: 600 0.85rem/1 inherit; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; }
.cob-canal-btn svg { width: 16px; height: 16px; }
.cob-canal-btn:hover { border-color: var(--fin-accent, #2f6fd6); color: var(--text-primary); }
.cob-canal-btn.is-active { background: var(--fin-accent, #2f6fd6); border-color: var(--fin-accent, #2f6fd6); color: #fff; }

/* ── Teste de envio na tela do WhatsApp ── */
.wa-test-desc { margin: 0 0 var(--space-3); font-size: 0.86rem; color: var(--text-secondary); }
.wa-test-input { display: block; width: 100%; padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm, 10px); background: var(--bg-surface); color: var(--text-primary); font-size: 0.92rem; font-family: inherit; resize: vertical; }
.wa-test-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.wa-test-hint { font-size: 0.78rem; color: var(--text-secondary); }
.wa-bindings { margin-top: var(--space-4); border-top: 1px solid var(--line-soft); padding-top: var(--space-3); }
.wa-bindings summary { cursor: pointer; font-size: 0.88rem; font-weight: 750; color: var(--text-primary); }
.wa-table-wrap { width: 100%; overflow-x: auto; }
.wa-table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 0.82rem; }
.wa-table th, .wa-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: middle; }
.wa-table th { color: var(--text-secondary); font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.03em; }
.wa-table-action { text-align: right !important; white-space: nowrap; }
.wa-mode-nav { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 var(--space-4); background: var(--bg-muted); border: 1px solid var(--line-soft); border-radius: 999px; }
.wa-mode-btn { border: 0; background: transparent; color: var(--text-secondary); font: 700 0.84rem/1 inherit; padding: 9px 16px; border-radius: 999px; cursor: pointer; }
.wa-mode-btn.is-active { background: var(--bg-surface); color: var(--fin-accent); box-shadow: var(--shadow-1); }
.wa-operation-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.wa-operation-head .wa-card-title { margin-bottom: 4px; }
.wa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; margin-bottom: var(--space-4); }
.wa-kpis article { min-width: 0; background: var(--bg-surface); border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: 15px; box-shadow: var(--shadow-1); }
.wa-kpis article > span, .wa-kpis article > small { display: block; color: var(--text-secondary); font-size: 0.74rem; }
.wa-kpis article > strong { display: block; margin: 4px 0 2px; color: var(--text-primary); font-size: 1.55rem; line-height: 1; }
.wa-kpis .wa-kpi-wait { border-color: #eac98f; background: #fffaf0; }
.wa-kpis .wa-kpi-danger { border-color: #efb0b0; background: #fff7f7; }
.wa-operation-filters { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-bottom: var(--space-3); }
.wa-operation-filters label { display: grid; gap: 5px; color: var(--text-secondary); font-size: 0.74rem; font-weight: 650; }
.wa-operation-filters select { min-width: 180px; padding: 9px 34px 9px 11px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm, 10px); background: var(--bg-surface); color: var(--text-primary); font: 500 0.84rem/1 inherit; }
.wa-operation-table { min-width: 980px; }
.wa-operation-table td strong, .wa-operation-table td small { display: block; }
.wa-operation-table td small { margin-top: 3px; color: var(--text-secondary); font-size: 0.72rem; }
.wa-event-time { white-space: nowrap; }
.wa-event { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 750; white-space: nowrap; }
.wa-event-ok { color: #1f7a45; background: #e8f7ee; }
.wa-event-wait { color: #96600b; background: #fff3dd; }
.wa-event-danger { color: #ad3434; background: #fdeaea; }
.wa-event-neutral { color: #566273; background: #eef1f5; }
.wa-bot-editor { margin-top: var(--space-4); border-top: 1px solid var(--line-soft); padding-top: var(--space-3); }
.wa-bot-editor > summary { cursor: pointer; color: var(--text-primary); font-size: 0.88rem; font-weight: 750; margin-bottom: var(--space-3); }
.wa-bot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 14px; margin-bottom: var(--space-4); }
.wa-bot-button-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; margin-bottom: var(--space-4); }
.wa-bot-field { display: grid; gap: 6px; align-content: start; }
.wa-bot-field > span { color: var(--text-primary); font-size: 0.8rem; font-weight: 700; }
.wa-bot-field textarea, .wa-bot-field input { width: 100%; border: 1px solid var(--line-soft); border-radius: var(--radius-sm, 10px); background: var(--bg-surface); color: var(--text-primary); padding: 10px 11px; font: 500 0.84rem/1.45 inherit; }
.wa-bot-field textarea { min-height: 92px; max-height: 340px; resize: vertical; field-sizing: content; }
.wa-bot-field small { color: var(--text-secondary); font-size: 0.72rem; }
.wa-bot-subtitle { margin: 0 0 10px; color: var(--text-primary); font-size: 0.84rem; }

@media (max-width: 680px) {
  .wa-mode-nav { display: flex; }
  .wa-mode-btn { flex: 1; }
  .wa-operation-head .wa-btn { width: 100%; }
  .wa-operation-filters label, .wa-operation-filters select { width: 100%; }
}

/* ── Prévia por canal no editor de modelos (E-mail | WhatsApp) ── */
.cob-prev-toggle { display: inline-flex; gap: 3px; padding: 3px; background: var(--bg-muted); border: 1px solid var(--line-soft); border-radius: 999px; margin-bottom: 10px; }
.cob-prev-tab { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--text-secondary); font: 600 0.8rem/1 inherit; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.cob-prev-tab svg { width: 14px; height: 14px; }
.cob-prev-tab.is-active { background: var(--bg-surface); color: var(--fin-accent, #2f6fd6); box-shadow: var(--shadow-1); }
.cob-prev-cap { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.cob-wa-preview { white-space: pre-wrap; word-break: break-word; font-size: 0.9rem; line-height: 1.5; color: #111b21; background: #e7ffdb; border: 1px solid #cfe9c4; border-radius: 10px; padding: 12px 14px; max-height: 420px; overflow: auto; }
.cob-wa-preview strong { font-weight: 700; }
.cob-wa-preview em { font-style: italic; }
.cob-wa-preview code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.82rem; background: rgba(0, 0, 0, 0.06); padding: 1px 4px; border-radius: 4px; word-break: break-all; }
.cob-wa-empty { color: var(--text-secondary); white-space: normal; }

/* Badges de canal na lista de modelos */
.cob-badge-wa { background: #e7f7ee; color: #1f7a45; }
.cob-badge-mail { background: #eef1f5; color: #566273; }

/* Teste de WhatsApp dentro do editor de modelos (campo de números + botão) */
.cob-tpltest { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; flex-wrap: wrap; }
.cob-tpltest-input { padding: 8px 11px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm, 10px); background: var(--bg-surface); color: var(--text-primary); font-size: 0.88rem; min-width: 220px; }

/* ═══════════ WhatsApp — visual repaginado (embonitado) ═══════════ */
.wa-mono { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }

/* Hero de status */
.wa-hero { background: var(--bg-surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg, 20px); box-shadow: var(--shadow-1); padding: 18px 20px; margin-bottom: var(--space-4); position: relative; overflow: hidden; }
.wa-hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #25d366, #5aa0e8 60%, #2f6fd6); }
.wa-hero-top { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.wa-hero-id { display: flex; align-items: center; gap: 13px; min-width: 0; }
.wa-hero-av { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(150deg, #25d366, #128c46); display: grid; place-items: center; flex: 0 0 auto; box-shadow: 0 6px 15px rgba(30,169,82,.3); }
.wa-hero-av svg { width: 25px; height: 25px; fill: #fff; }
.wa-hero-id .wa-title { font-size: 1.28rem; }
.wa-ready { display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; padding: 8px 15px 8px 12px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: .88rem; }
.wa-ready.is-ok { background: #e8f7ee; border: 1px solid #bfe6cd; color: #1f7a45; }
.wa-ready.is-off { background: #fdeaea; border: 1px solid #f0b3ad; color: #b3261e; }
.wa-ready-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(31,122,69,.14); }
.wa-ready.is-off .wa-ready-dot { box-shadow: 0 0 0 4px rgba(179,38,30,.14); }
.wa-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px,100%),1fr)); gap: 10px; margin-top: 16px; }
.wa-fact { background: var(--bg-muted); border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 12px; }
.wa-fact-k { font-size: .67rem; text-transform: uppercase; letter-spacing: .06em; color: #6b7688; font-weight: 700; }
.wa-fact-v { margin-top: 4px; font-weight: 700; font-size: .88rem; color: var(--text-primary); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* Mode nav — realce do ativo */
.wa-mode-btn.is-active { background: linear-gradient(135deg, #2f6fd6, #5aa0e8); color: #fff; box-shadow: 0 5px 12px rgba(47,111,214,.3); }

/* Cabeçalho de card com ícone */
.wa-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.wa-card-head .wa-card-title { margin: 0; }
.wa-card-ic { width: 30px; height: 30px; border-radius: 9px; background: #e9f1fc; color: #2f6fd6; display: grid; place-items: center; flex: 0 0 auto; }
.wa-card-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.wa-head-badge { margin-left: auto; }

/* KPIs em stat-tiles */
.wa-kpis { grid-template-columns: repeat(auto-fit, minmax(min(165px,100%),1fr)); }
.wa-kpi { position: relative; overflow: hidden; }
.wa-kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(#2f6fd6, #5aa0e8); }
.wa-kpi-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wa-kpi-ic { width: 29px; height: 29px; border-radius: 8px; background: #e9f1fc; color: #2f6fd6; display: grid; place-items: center; flex: 0 0 auto; }
.wa-kpi-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.wa-kpi-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7688; font-weight: 700; line-height: 1.12; }
.wa-kpis article > .wa-kpi-val { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 1.8rem; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; margin: 0; }
.wa-kpis article > .wa-kpi-sub { display: block; font-size: .73rem; color: #6b7688; margin-top: 4px; }
.wa-kpi-wa::before { background: linear-gradient(#25d366, #128c46); } .wa-kpi-wa .wa-kpi-ic { background: #e5fbec; color: #1ea952; }
.wa-kpi-warn { border-color: #eecf8c; background: #fffaf0; } .wa-kpi-warn::before { background: linear-gradient(#e8a53a, #c8720f); } .wa-kpi-warn .wa-kpi-ic { background: #fdf1df; color: #a86404; }
.wa-kpi-danger { border-color: #efb0b0; background: #fff7f7; } .wa-kpi-danger::before { background: linear-gradient(#e06a62, #b3261e); } .wa-kpi-danger .wa-kpi-ic { background: #fdeaea; color: #b3261e; }

/* Tabela de eventos com avatar + pílulas */
.wa-operation-table { min-width: 880px; }
.wa-operation-table thead th { background: var(--bg-muted); color: var(--brand-600, #31557f); }
.wa-operation-table tbody tr:hover td { background: var(--bg-muted); }
.wa-cli { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wa-av { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; font: 800 .8rem/1 'Plus Jakarta Sans', sans-serif; color: #fff; }
.wa-cli b { display: block; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.wa-cli small { display: block; color: #6b7688; font-size: .72rem; margin-top: 1px; }
.wa-operation-table .wa-when { white-space: nowrap; color: var(--text-secondary); }
.wa-operation-table .wa-sit small { display: block; color: #6b7688; font-size: .72rem; margin-top: 2px; }
.wa-event { gap: 6px; }
.wa-event::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Linhas de status (guardrails) */
.wa-srow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line-soft); }
.wa-srow:last-child { border-bottom: 0; }
.wa-srow .k { font-size: .82rem; color: var(--text-secondary); }
.wa-srow .v { font-weight: 700; font-size: .85rem; color: var(--text-primary); display: flex; align-items: center; gap: 8px; text-align: right; justify-content: flex-end; }

/* Preflight — resumo + grade de checks */
.wa-check-sum { display: inline-flex; align-items: center; gap: 7px; background: #e8f7ee; color: #1f7a45; border: 1px solid #bfe6cd; border-radius: 999px; padding: 5px 12px; font: 800 .8rem/1 'Plus Jakarta Sans', sans-serif; }
.wa-check-sum.warn { background: #fdf1df; color: #a86404; border-color: #eecf8c; }
.wa-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(205px,100%),1fr)); gap: 8px; margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.wa-check { display: flex; align-items: center; gap: 9px; padding: 8px 11px; background: var(--bg-muted); border: 1px solid var(--line-soft); border-radius: 10px; font-size: .83rem; color: var(--text-primary); }
.wa-check-ck { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; flex: 0 0 auto; }
.wa-check-ck svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.wa-check.is-ok .wa-check-ck { background: #e8f7ee; color: #1f7a45; }
.wa-check.is-off .wa-check-ck { background: #fdf1df; color: #a86404; }

/* Preview do template como bolha de celular */
.wa-phone { max-width: 330px; margin: 4px auto 0; background: #0a0f16; border-radius: 28px; padding: 8px; box-shadow: var(--shadow-2); }
.wa-phone-sc { background: #dcd3c8; border-radius: 21px; overflow: hidden; position: relative; }
.wa-phone-bar { display: flex; align-items: center; gap: 9px; padding: 11px 12px; background: #f0f2f5; }
.wa-b-av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(150deg, #25d366, #128c46); display: grid; place-items: center; color: #fff; font: 800 .82rem/1 'Plus Jakarta Sans', sans-serif; flex: 0 0 auto; }
.wa-phone-bar b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .84rem; color: #111b21; display: flex; align-items: center; gap: 5px; }
.wa-phone-bar b svg { width: 13px; height: 13px; }
.wa-phone-bar small { font-size: .68rem; color: #667781; display: block; }
.wa-phone-body { padding: 13px 12px 15px; }
.wa-bubble { position: relative; background: #e7ffdb; border: 1px solid #cfe9c4; border-radius: 12px; border-top-left-radius: 4px; padding: 9px 11px 7px; font-size: .84rem; line-height: 1.44; color: #111b21; box-shadow: 0 1px .5px rgba(0,0,0,.12); white-space: pre-wrap; }
.wa-doc { display: flex; align-items: center; gap: 9px; background: rgba(17,27,33,.06); border-radius: 8px; padding: 7px 9px; margin-bottom: 6px; white-space: normal; }
.wa-pdf { width: 30px; height: 36px; border-radius: 5px; background: #e7492f; color: #fff; display: grid; place-items: center; font: 800 .53rem/1 'Plus Jakarta Sans', sans-serif; flex: 0 0 auto; }
.wa-doc b { display: block; font-size: .76rem; color: #111b21; } .wa-doc small { font-size: .68rem; color: #61737e; }
.wa-b-meta { display: block; text-align: right; font-size: .64rem; color: #61737e; margin-top: 3px; }
.wa-qr { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; }
.wa-qr button { background: #e7ffdb; border: 1px solid #cfe9c4; color: #0a7cff; font: 700 .8rem/1 'DM Sans', sans-serif; padding: 8px; border-radius: 9px; text-align: center; cursor: default; }

/* Stat tiles (bot / consentimento) */
.wa-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(138px,100%),1fr)); gap: 10px; }
.wa-tile { background: var(--bg-muted); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; }
.wa-tile .n { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 1.32rem; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.wa-tile .l { font-size: .74rem; color: var(--text-secondary); margin-top: 5px; }
.wa-tile.is-ok { background: #e8f7ee; border-color: #bfe6cd; } .wa-tile.is-ok .n { color: #1f7a45; }
.wa-tile.is-warn { background: #fdf3e0; border-color: #eecf8c; } .wa-tile.is-warn .n { color: #a86404; }
.wa-tile.is-neutral { background: #eef1f5; } .wa-tile.is-neutral .n { color: #566273; }

/* Grid de configuração */
.wa-cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px,100%),1fr)); gap: var(--space-4); }
.wa-cfg-grid .wa-card { margin-bottom: 0; }

/* Editor do bot — repaginado (cards de mensagem + chips de botão) */
.wa-bot-editor > summary { display: inline-flex; align-items: center; gap: 8px; }
.wa-msg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px,100%),1fr)); gap: 14px; margin-bottom: var(--space-4); }
.wa-msg-card { position: relative; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow-1); padding: 12px 13px 11px 15px; display: flex; flex-direction: column; gap: 9px; }
.wa-msg-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(#25d366, #128c46); }
.wa-msg-head { display: flex; align-items: center; gap: 8px; }
.wa-msg-ic { width: 24px; height: 24px; border-radius: 7px; background: #e5fbec; color: #1ea952; display: grid; place-items: center; flex: 0 0 auto; }
.wa-msg-ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.wa-msg-label { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .82rem; color: var(--text-primary); }
.wa-msg-input { width: 100%; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg-muted); color: var(--text-primary); padding: 10px 11px; font: 500 .84rem/1.5 inherit; resize: vertical; min-height: 76px; max-height: 320px; field-sizing: content; transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; }
.wa-msg-input:focus { outline: 0; background: var(--bg-surface); border-color: var(--fin-accent, #2f6fd6); box-shadow: 0 0 0 3px var(--focus-ring, rgba(47,111,214,.2)); }
.wa-msg-hint { font-size: .72rem; color: #6b7688; line-height: 1.5; }
.wa-token { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: .72rem; background: #e9f1fc; color: #2f6fd6; border: 1px solid #d3e3fb; border-radius: 5px; padding: 0 5px; white-space: nowrap; }
.wa-btns-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px,100%),1fr)); gap: 12px; margin-bottom: var(--space-4); }
.wa-btn-card { background: var(--bg-surface); border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow-1); padding: 12px 13px; display: flex; flex-direction: column; gap: 8px; }
.wa-btn-card-label { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .78rem; color: var(--text-secondary); }
.wa-btn-chip { display: flex; align-items: center; gap: 7px; background: #e7ffdb; border: 1px solid #cfe9c4; border-radius: 10px; padding: 8px 11px; cursor: text; transition: border-color 140ms ease, box-shadow 140ms ease; }
.wa-btn-chip svg { width: 14px; height: 14px; fill: none; stroke: #0a7cff; stroke-width: 2; flex: 0 0 auto; }
.wa-btn-chip-input { flex: 1; min-width: 0; border: 0; background: transparent; color: #0a7cff; font: 700 .84rem/1.2 'DM Sans', sans-serif; text-align: center; }
.wa-btn-chip-input:focus { outline: 0; }
.wa-btn-chip:focus-within { border-color: var(--fin-accent, #2f6fd6); box-shadow: 0 0 0 3px var(--focus-ring, rgba(47,111,214,.2)); }

/* Analytics e custos — visível apenas no modo administrativo */
.wa-analytics-head { align-items: flex-start; }
.wa-analytics-title-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.wa-analytics-title-row .wa-card-title { margin: 0; }
.wa-card-ic-wa { background: #e5fbec; color: #1ea952; }
.wa-cost-source { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 10px; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.wa-cost-source::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.wa-cost-source.is-meta { color: #1f7a45; background: #e8f7ee; border: 1px solid #bfe6cd; }
.wa-cost-source.is-estimated { color: #96600b; background: #fff3dd; border: 1px solid #eac98f; }
.wa-cost-periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: var(--space-4); }
.wa-cost-card { position: relative; overflow: hidden; min-width: 0; padding: 16px 17px 15px; background: linear-gradient(180deg, var(--bg-surface), #f5faf6); border: 1px solid var(--line-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-1); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.wa-cost-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2, 0 10px 24px rgba(16, 40, 80, .1)); border-color: #bfe6cd; }
.wa-cost-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #25d366, #128c46); }
.wa-cost-top { display: flex; align-items: center; gap: 9px; }
.wa-cost-ic { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; background: #e5fbec; color: #1ea952; }
.wa-cost-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wa-cost-period { color: var(--text-secondary); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .045em; }
.wa-cost-card > strong { display: block; margin: 13px 0 10px; color: var(--text-primary); font: 800 clamp(1.4rem, 2.7vw, 2rem)/1 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wa-cost-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.wa-cost-stats span { color: var(--text-secondary); font-size: .74rem; }
.wa-cost-stats b { color: var(--text-primary); font-weight: 800; font-variant-numeric: tabular-nums; }
.wa-cost-detail { display: block; margin-top: 11px; padding-top: 9px; border-top: 1px dashed var(--line-soft); color: #1f7a45; font-size: .7rem; font-weight: 700; }
.wa-cost-card.is-primary { border-color: #bfe6cd; background: linear-gradient(180deg, #f2fbf5, #e9f7ee); }
.wa-cost-card.is-primary::before { height: 4px; }
.wa-analytics-card { padding-bottom: 18px; }
.wa-analytics-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.wa-analytics-metric { position: relative; overflow: hidden; min-width: 0; padding: 13px 14px 14px; background: var(--bg-surface); border: 1px solid var(--line-soft); border-radius: 13px; box-shadow: var(--shadow-1); transition: transform .16s ease, box-shadow .16s ease; }
.wa-analytics-metric:hover { transform: translateY(-2px); box-shadow: var(--shadow-2, 0 10px 24px rgba(16, 40, 80, .1)); }
.wa-metric-top { display: flex; align-items: center; gap: 8px; }
.wa-metric-ic { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center; background: var(--bg-muted); color: var(--text-secondary); }
.wa-metric-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wa-metric-top span { color: var(--text-secondary); font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .035em; line-height: 1.15; }
.wa-analytics-metric > strong { display: block; margin: 10px 0 3px; color: var(--text-primary); font: 750 1.28rem/1.1 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wa-analytics-metric > small { display: block; color: var(--text-secondary); font-size: .7rem; }
.wa-analytics-metric.is-ok { background: #f2fbf5; border-color: #cfead8; }
.wa-analytics-metric.is-ok .wa-metric-ic { background: #dff4e6; color: #1f9a52; }
.wa-analytics-metric.is-ok > strong { color: #1f7a45; }
.wa-analytics-metric.is-danger { background: #fff7f7; border-color: #efb0b0; }
.wa-analytics-metric.is-danger .wa-metric-ic { background: #fdeaea; color: #b3261e; }
.wa-analytics-metric.is-danger > strong { color: #b3261e; }
.wa-analytics-metric.is-money { background: #eef4ff; border-color: #cedff8; }
.wa-analytics-metric.is-money .wa-metric-ic { background: #e0ebfd; color: #2f6fd6; }
.wa-analytics-metric.is-money > strong { color: #2f6fd6; }
.wa-gauge { display: block; height: 6px; margin: 2px 0 7px; border-radius: 999px; background: rgba(90, 104, 130, .16); overflow: hidden; }
.wa-gauge-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f9bf0, #2f6fd6); transition: width .5s ease; }
.wa-metric-rate.is-ok .wa-gauge-fill { background: linear-gradient(90deg, #25d366, #128c46); }
.wa-analytics-alert { display: flex; align-items: flex-start; gap: 5px 12px; flex-wrap: wrap; margin-bottom: var(--space-3); padding: 11px 13px; color: #96600b; background: #fff8e9; border: 1px solid #eac98f; border-radius: 11px; font-size: .8rem; }
.wa-analytics-alert span { color: var(--text-secondary); }
.wa-analytics-note { margin: calc(var(--space-4) * -0.25) 0 var(--space-4); padding: 11px 13px; color: var(--text-secondary); background: var(--bg-muted); border: 1px solid var(--line-soft); border-radius: 11px; font-size: .78rem; line-height: 1.5; }
.wa-analytics-state { display: flex; align-items: center; gap: 13px; }
.wa-analytics-state strong, .wa-analytics-state small { display: block; }
.wa-analytics-state small { margin-top: 3px; color: var(--text-secondary); font-size: .78rem; }
.wa-analytics-spinner { width: 24px; height: 24px; flex: 0 0 auto; border: 3px solid #d9e5f7; border-top-color: var(--fin-accent, #2f6fd6); border-radius: 50%; animation: wa-spin .8s linear infinite; }
@keyframes wa-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .wa-analytics-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .wa-mode-nav { overflow-x: auto; max-width: 100%; }
  .wa-mode-btn { min-width: max-content; }
  .wa-cost-periods { grid-template-columns: 1fr; }
  .wa-cost-card > strong { font-size: 1.6rem; }
}

@media (max-width: 430px) {
  .wa-analytics-metrics { grid-template-columns: 1fr; }
}