/* MárcIA — design base
   Paleta: marca #14A3B1; textos neutros e superfícies brancas
*/
:root{
  --brand:#14A3B1;
  --ink:#1d1d1f;
  --ink-2:#2b2b2b;
  --muted:#2b2b2bb3;
  --line:#eef0f3;
  --bg:#ffffff;
  --danger:#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:#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:#f6f7f9}
.nav-btn svg{width:18px;height:18px;color:#111;opacity:.8}
.nav-btn span{font-weight:500}
.dropdown{position:absolute;top:44px;left:0;background:#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:#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:#f4f6f8}
.dropdown .disabled{opacity:.45;cursor:not-allowed}
.pill-new{font-size:10px;margin-left:6px;background:#eaf8fa;color:#0f6f78;border:1px solid #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:#f6f7f9}
.icon-ghost svg{width:20px;height:20px;color:#111;opacity:.8}

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

/* Cartões e botões */
.card{background:#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 #dfe3e6;background:#f7f9fb;cursor:pointer}
.btn:hover{background:#eef3f6}
.btn-primary{background:var(--brand);border:none;color:#fff}
.btn-primary:hover{opacity:.92}
.btn-danger{background:#feeceb;border-color:#f7d0cd;color:var(--danger)}

/* Inputs */
.input{width:100%;border:1px solid #dfe3e6;border-radius:10px;padding:10px 12px;background:#fff}
.label{display:block;font-size:12px;color:#2b2b2bb0;margin-bottom:6px}
input[type="checkbox"]{width:16px;height:16px;border:1px solid #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:#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:#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:#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 #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 #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:#edf7f8;border:1px solid #cdecef;color:#0f6f78;border-radius:10px;padding:10px 12px;margin-bottom:12px}
.alert-err{background:#fff1f1;border:1px solid #ffd3d3;color:#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:#eaf8fa; color:#0f6f78; border:1px solid #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:#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:#edf7f8; border:1px solid #cdecef; color:#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:#111; opacity:.85; }

.chip-group { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.chip { border:1px solid #ccc; border-radius:16px; padding:6px 12px; cursor:pointer; font-size:13px; background:#f9f9f9; }
.chip input { display:none; }
.chip input:checked + span { background:#14A3B1; color:#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:#ccc; border-radius:20px; position:relative; }
.switch .slider::after {
  content:''; width:16px; height:16px; border-radius:50%;
  background:#fff; position:absolute; top:2px; left:2px; transition:.2s;
}
.switch input:checked + .slider { background:#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 #eee; text-align:left; vertical-align:top; }