/* ════════════════════════════════════════════════════════════════════
   Design base do sistema.
   ════════════════════════════════════════════════════════════════════
   O NOME ENGANA: apesar de se chamar marcia.css, este arquivo é servido
   para TODAS as marcas — Flowin e os parceiros inclusive. Era ele que
   fazia a conta da Kruno, cuja marca é dourada, mostrar botões no ciano
   da MárcIA: o `:root{--brand:var(--crm-primary-2, #14A3B1)}` daqui vencia o <style> da própria
   tela, por vir depois no documento.

   Agora as cores vêm de `var(--crm-*)`, emitidos pelo crm_tokens_lib a
   partir da marca da conta. Cada uma leva o valor antigo como FALLBACK,
   então onde os tokens não forem emitidos a aparência é exatamente a de
   hoje — nenhuma tela muda por causa desta mudança.

   O QUE NÃO REPINTA: as cores de erro (--danger, .alert-err, .btn-danger).
   Erro é vermelho em qualquer marca.

   As cores com canal alfa (#2b2b2bb3) ficaram como estavam: são opacidade
   de texto, não cor de marca, e não têm token equivalente.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --brand:var(--crm-primary,#14A3B1);
  --ink:var(--crm-text,#1d1d1f);
  --ink-2:var(--crm-text-2,#2b2b2b);
  --muted:#2b2b2bb3;
  --line:var(--crm-border,#eef0f3);
  --bg:var(--crm-surface,#ffffff);
  --danger:var(--crm-danger-ink,#b02a20);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:14px/1.45 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto}

/* Topbar */
/* 1) menus à esquerda (troca space-between por flex-start) */
.topbar{
  position:sticky; top:0;
  background:var(--crm-surface,#fff);
  border-bottom:1px solid var(--line);
  z-index:1000;
  display:flex; align-items:center;
  justify-content:flex-start;   /* <- aqui */
  padding:10px 16px;
}

/* 2) bloco da direita vai pro canto usando margin-left:auto */
.topbar__right{
  margin-left:auto;             /* <- aqui */
  display:flex; align-items:center; gap:8px;
}
.logo{height:22px; margin: 15px;}

.topnav{display:flex;gap:8px; margin-left: 10px;}
.nav-item{position:relative}
.nav-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer}
.nav-btn:hover{background:var(--crm-surface-2,#f6f7f9)}
.nav-btn svg{width:18px;height:18px;color:var(--crm-text,#111);opacity:.8}
.nav-btn span{font-weight:500}
.dropdown{position:absolute;top:44px;left:0;background:var(--crm-surface,#fff);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.12);padding:8px 6px;min-width:220px;display:none}
.nav-item.open>.dropdown{display:block}
.dropdown{position:absolute;top:44px;left:0;background:var(--crm-surface,#fff);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.12);padding:8px 6px;min-width:220px;display:none}
.nav-item.open>.dropdown{display:block}
.dropdown ul{list-style:none;margin:0;padding:0}
.dropdown li a,
.dropdown li button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:8px;color:var(--ink);text-decoration:none;background:transparent;border:0;cursor:pointer}
.dropdown li a:hover,
.dropdown li button:hover{background:var(--crm-surface-2,#f4f6f8)}
.dropdown .disabled{opacity:.45;cursor:not-allowed}
.pill-new{font-size:10px;margin-left:6px;background:var(--crm-primary-bg,#eaf8fa);color:var(--crm-primary-dark,#0f6f78);border:1px solid var(--crm-primary-border,#cdecef);border-radius:999px;padding:2px 6px}

.topbar__right{display:flex;align-items:center;gap:8px}
.icon-ghost{background:transparent;border:none;padding:8px;border-radius:10px;cursor:pointer}
.icon-ghost:hover{background:var(--crm-surface-2,#f6f7f9)}
.icon-ghost svg{width:20px;height:20px;color:var(--crm-text,#111);opacity:.8}

/* Página */
.page{padding:18px}

/* Cartões e botões */
.card{background:var(--crm-surface,#fff);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.06)}
.btn{padding:10px 14px;border-radius:10px;border:1px solid var(--crm-border,#dfe3e6);background:var(--crm-surface-2,#f7f9fb);cursor:pointer}
.btn:hover{background:var(--crm-surface-2,#eef3f6)}
.btn-primary{background:var(--brand);border:none;color:var(--crm-surface,#fff)}
.btn-primary:hover{opacity:.92}
.btn-danger{background:var(--crm-danger-bg,#feeceb);border-color:var(--crm-danger-border,#f7d0cd);color:var(--danger)}

/* Inputs */
.input{width:100%;border:1px solid var(--crm-border,#dfe3e6);border-radius:10px;padding:10px 12px;background:var(--crm-surface,#fff)}
.label{display:block;font-size:12px;color:#2b2b2bb0;margin-bottom:6px}
input[type="checkbox"]{width:16px;height:16px;border:1px solid var(--crm-border-2,#cfd5da);border-radius:4px;appearance:none;display:inline-grid;place-content:center;vertical-align:middle}
input[type="checkbox"]:checked{background:var(--brand);border-color:var(--brand)}
input[type="checkbox"]:checked::after{content:"";width:9px;height:9px;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 20%,80% 0,43% 62%);background:var(--crm-surface,#fff)}

/* Tabela “linhas soltas” */
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table thead th{font-size:13px;color:#2b2b2bd9;text-align:left;padding:8px 10px}
.table tbody td{background:var(--crm-surface,#fff);padding:12px 10px;box-shadow:0 1px 0 rgba(0,0,0,.05)}

/* Modais (inclusive trocar de conta) */
.modal, #accountSwitchModal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;z-index:2000}
.modal .box, #accountSwitchModal .box{width:680px;max-width:94vw;background:var(--crm-surface,#fff);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.25);overflow:hidden}
.modal header, #accountSwitchModal header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal h3, #accountSwitchModal h3{margin:0;font-size:18px}
.modal .body, #accountSwitchModal .body{padding:18px}
#accountSwitchModal .search{display:flex;gap:8px;margin-bottom:12px}
#accountSwitchModal input[type="text"]{flex:1;border:1px solid var(--crm-border,#dfe3e6);border-radius:10px;padding:10px 12px;font-size:14px}
#accountSwitchModal .list{max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:12px}
#accountSwitchModal .item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--crm-surface-2,#f4f6f8)}
#accountSwitchModal .item:last-child{border-bottom:none}

/* Login */
.login-wrap{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:380px;max-width:94vw}
.login-card .brand{height:46px;margin-bottom:6px}
.login-title{margin:6px 0 16px 0;font-size:18px;text-align:center;color:var(--ink-2)}
.login-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.login-remember{display:flex;align-items:center;gap:8px;font-size:13px;color:#2b2b2bd0}
.alert-ok{background:var(--crm-primary-bg,#edf7f8);border:1px solid var(--crm-primary-border,#cdecef);color:var(--crm-primary-dark,#0f6f78);border-radius:10px;padding:10px 12px;margin-bottom:12px}
.alert-err{background:var(--crm-danger-bg,#fff1f1);border:1px solid var(--crm-danger-border,#ffd3d3);color:var(--crm-danger-ink,#b02a20);border-radius:10px;padding:10px 12px;margin-bottom:12px}

/* --- Ajustes do switch de conta (dropdown à direita) --- */
.dropdown.right{left:auto; right:8px; max-width:min(420px, calc(100vw - 24px))}

/* Pill com a conta atual ao lado da logo */
.scope-pill{
  display:inline-block; max-width:38vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:var(--crm-primary-bg,#eaf8fa); color:var(--crm-primary-dark,#0f6f78); border:1px solid var(--crm-primary-border,#cdecef); padding:4px 8px; border-radius:999px; font-size:12px;
}

/* Itens clicáveis do switch */
.switch-item{
  display:flex; align-items:center; gap:8px; width:100%; padding:10px 12px;
  background:transparent; border:0; text-align:left; border-radius:8px; cursor:pointer; color:var(--ink);
}
.switch-item:hover{ background:var(--crm-surface-2,#f4f6f8) }
.switch-item .dot{
  width:10px; height:10px; border-radius:50%; border:2px solid var(--brand); background:transparent; flex:0 0 auto;
}
.switch-item.is-active .dot{ background:var(--brand) }
.switch-item .label{ flex:1 1 auto; min-width:0 }
.tag-using{
  font-size:11px; padding:2px 6px; border-radius:999px; background:var(--crm-primary-bg,#edf7f8); border:1px solid var(--crm-primary-border,#cdecef); color:var(--crm-primary-dark,#0f6f78);
}

/* Evita clip/corte em ícones SVG (ex.: engrenagem de Ajustes) */
.nav-btn svg,
.icon-ghost svg { width:18px; height:18px; display:block; overflow:visible; }

/* Opcional: deixa todos os ícones com a mesma opacidade e cor neutra */
.nav-btn svg, .icon-ghost svg { color:var(--crm-text,#111); opacity:.85; }

.chip-group { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.chip { border:1px solid var(--crm-border-2,#ccc); border-radius:16px; padding:6px 12px; cursor:pointer; font-size:13px; background:var(--crm-surface-2,#f9f9f9); }
.chip input { display:none; }
.chip input:checked + span { background:var(--crm-primary,#14A3B1); color:var(--crm-surface,#fff); border-radius:14px; padding:4px 10px; }

.switch { position:relative; display:inline-flex; align-items:center; cursor:pointer; gap:8px; }
.switch input { display:none; }
.switch .slider { width:40px; height:20px; background:var(--crm-border-2,#ccc); border-radius:20px; position:relative; }
.switch .slider::after {
  content:''; width:16px; height:16px; border-radius:50%;
  background:var(--crm-surface,#fff); position:absolute; top:2px; left:2px; transition:.2s;
}
.switch input:checked + .slider { background:var(--crm-primary,#14A3B1); }
.switch input:checked + .slider::after { transform:translateX(20px); }
/* marcia.css (trecho) */
.kpi { font-size:22px; font-weight:700; margin-top:4px; }
.cards-grid .card { padding:12px 14px; }
.table { width:100%; border-collapse:collapse; }
.table th, .table td { padding:10px 12px; border-top:1px solid var(--crm-border,#eee); text-align:left; vertical-align:top; }