/* ═══════════════════════════════════════════════════════════════════════════
   Scale Labs — sistema de design profissional.
   Regra: neutros FRIOS como base, UM acento (azul da marca), tipografia Inter,
   espaçamento generoso, sombras discretas, bordas nítidas. O dourado/bege da
   marca fica SÓ no logotipo — na interface, cor é exceção, não regra.
   Barra lateral escura (estilo GHL) + área de trabalho clara. Mesmas classes.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --marca-gold:#C9A163;          /* só no logotipo */
  --royal:#0D3A7C; --marinho:#22314C;
  /* barra lateral: slate quase preto, premium */
  --barra:#171b26; --barra-hover:#232838; --barra-txt:#98a1b2; --barra-borda:#282e3d; --barra-ativo:#2563eb;
  /* neutros frios */
  --fundo:#f6f7f9; --superficie:#ffffff; --superficie-2:#f9fafb;
  --borda:#eceef1; --borda-2:#e0e3e9;
  --texto:#141a24; --texto-suave:#5b6573; --texto-fraco:#9aa2ae;
  /* acento único */
  --primario:#0066FF; --primario-forte:#0052cc; --primario-suave:#e6f0ff;
  /* semânticos, dessaturados */
  --ok:#0f9d58; --ok-bg:#eaf6ef;
  --erro:#c8372d; --erro-bg:#fbecea;
  --atencao:#a9760c; --atencao-bg:#faf2e0;
  --info:#2563eb; --info-bg:#eaf1fd;
  --sombra:0 1px 2px rgba(16,24,40,.04);
  --sombra-2:0 4px 16px rgba(16,24,40,.06);
  --sombra-forte:0 16px 48px rgba(16,24,40,.14);
  --raio:10px; --raio-sm:8px; --raio-lg:16px;
  --lateral:236px; --topo:58px;
}
* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body { background:var(--fundo); color:var(--texto);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  font-size:13.5px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:'cv11','ss01'; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
.oculto { display:none !important; }
.cresce { flex:1 1 auto; }
.logo { font-weight:750; letter-spacing:-.02em; }
.logo span { color:var(--marca-gold); }

/* ── SHELL ────────────────────────────────────────────────────────────────── */
#shell { display:grid; grid-template-columns:var(--lateral) 1fr; min-height:100vh; }
#shell.recolhido { grid-template-columns:66px 1fr; }

aside#lateral { background:var(--barra); color:var(--barra-txt);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow:hidden; }
#lateral .topo-logo { display:flex; align-items:center; padding:0 20px; height:var(--topo); border-bottom:1px solid var(--barra-borda); }
#lateral .topo-logo .logo { color:#fff; font-size:18px; }
#lateral .conta-atual { margin:14px 12px 4px; padding:9px 11px; background:rgba(255,255,255,.03);
  border:1px solid var(--barra-borda); border-radius:var(--raio-sm); font-size:12px; }
#lateral .conta-atual .rot { color:#69717f; font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:1px; }
#lateral .conta-atual .val { font-weight:600; color:#dfe3ea; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

nav#menu { flex:1; overflow-y:auto; padding:6px 10px 12px; }
nav#menu .grupo { color:#586173; font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; margin:18px 12px 7px; font-weight:700; }
nav#menu a { display:flex; align-items:center; gap:12px; padding:8px 11px; border-radius:var(--raio-sm);
  color:var(--barra-txt); font-weight:500; font-size:13px; margin-bottom:1px; white-space:nowrap; transition:background .12s,color .12s; }
nav#menu a:hover { background:var(--barra-hover); color:#eef1f5; }
nav#menu a.ativo { background:rgba(255,255,255,.09); color:#fff; }
nav#menu a.ativo .ic { color:#6ba4ff; }
nav#menu a .ic { width:19px; height:19px; display:grid; place-items:center; flex-shrink:0; opacity:.92; }
nav#menu a .ic svg { width:18px; height:18px; }
nav#menu a .badge { margin-left:auto; font-size:8.5px; letter-spacing:.05em; background:var(--barra-hover); color:#7b8494; padding:1px 6px; border-radius:10px; text-transform:uppercase; }
#shell.recolhido #menu a span:not(.ic), #shell.recolhido #menu .grupo,
#shell.recolhido .conta-atual, #shell.recolhido .topo-logo .logo { display:none; }

#lateral .rodape { border-top:1px solid var(--barra-borda); padding:11px; }
#lateral .rodape .usr { display:flex; align-items:center; gap:10px; font-size:12.5px; }
#lateral .rodape .avatar { width:30px; height:30px; background:var(--barra-ativo); color:#fff; }
#lateral .rodape .nome { font-weight:600; color:#dfe3ea; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#lateral .rodape .papel { color:#69717f; font-size:11px; }
#lateral .rodape .btn.sec { background:transparent; border-color:var(--barra-borda); color:var(--barra-txt); }
#lateral .rodape .btn.sec:hover { background:var(--barra-hover); color:#fff; }

/* ── ÁREA DE TRABALHO ──────────────────────────────────────────────────────── */
#area { display:flex; flex-direction:column; min-width:0; }
#topbar { height:var(--topo); background:var(--superficie); border-bottom:1px solid var(--borda);
  display:flex; align-items:center; gap:16px; padding:0 28px; position:sticky; top:0; z-index:20; }
#topbar .recolher { background:none; border:0; color:var(--texto-fraco); font-size:17px; padding:6px 8px; border-radius:8px; line-height:1; }
#topbar .recolher:hover { background:var(--fundo); color:var(--texto-suave); }
#topbar h1 { font-size:15px; margin:0; font-weight:650; letter-spacing:-.01em; }
#topbar .busca { flex:1; max-width:380px; }
#topbar .busca input { width:100%; background:var(--fundo); border:1px solid var(--borda-2); border-radius:8px; padding:8px 14px; font-size:12.5px; }
#topbar .busca input:focus { outline:none; border-color:var(--primario); background:#fff; box-shadow:0 0 0 3px var(--primario-suave); }
#topbar .acoes { display:flex; align-items:center; gap:8px; margin-left:auto; }

#view { padding:32px; flex:1; overflow-y:auto; }

/* ── COMPONENTES ───────────────────────────────────────────────────────────── */
.cabecalho { display:flex; align-items:center; gap:14px; margin-bottom:26px; flex-wrap:wrap; }
.cabecalho h2 { font-size:20px; margin:0; letter-spacing:-.025em; font-weight:700; }
.cabecalho .sub { color:var(--texto-suave); font-size:13px; margin-top:4px; }

.btn { display:inline-flex; align-items:center; gap:7px; background:var(--primario-forte); color:#fff; border:0;
  border-radius:var(--raio-sm); padding:9px 15px; font-weight:600; font-size:13px; letter-spacing:-.01em; transition:filter .12s; }
.btn:hover { filter:brightness(1.15); }
.btn:disabled { opacity:.5; cursor:progress; }
.btn.accent { background:var(--primario); }
.btn.sec { background:var(--superficie); border:1px solid var(--borda-2); color:var(--texto); }
.btn.sec:hover { background:var(--fundo); filter:none; }
.btn.fantasma { background:transparent; color:var(--primario); }
.btn.sm { padding:6px 11px; font-size:12px; }
.btn.lg { padding:11px 20px; font-size:14px; }
.btn svg { width:16px; height:16px; }

.card { background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra); }
.card.pad { padding:22px 24px; }
.card + .card { margin-top:16px; }

.grid { display:grid; gap:16px; }
.grid.k2 { grid-template-columns:repeat(2,1fr); }
.grid.k3 { grid-template-columns:repeat(3,1fr); }
.grid.k4 { grid-template-columns:repeat(4,1fr); }
.grid.auto { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

.kpi { background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio); padding:18px 20px; box-shadow:var(--sombra); }
.kpi .rot { color:var(--texto-suave); font-size:12px; font-weight:500; display:flex; align-items:center; gap:7px; }
.kpi .rot svg { width:15px; height:15px; color:var(--texto-fraco); }
.kpi .num { font-size:25px; font-weight:750; letter-spacing:-.03em; margin-top:9px; color:var(--texto); }
.kpi .delta { font-size:11.5px; margin-top:5px; color:var(--texto-fraco); }
.kpi .delta.up { color:var(--ok); } .kpi .delta.down { color:var(--erro); }
.kpi.mudo { opacity:.45; }

.tabela-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; }
table.tbl th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-fraco); padding:12px 16px; border-bottom:1px solid var(--borda); font-weight:600; }
table.tbl td { padding:13px 16px; border-bottom:1px solid var(--borda); font-size:13px; }
table.tbl tr:last-child td { border-bottom:0; }
table.tbl tbody tr:hover td { background:var(--superficie-2); }

.chip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; background:var(--superficie-2); border:1px solid var(--borda-2); color:var(--texto-suave); border-radius:6px; padding:2px 9px; margin:2px 4px 2px 0; }
.badge { font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:6px; letter-spacing:.01em; }
.badge.ok { background:var(--ok-bg); color:var(--ok); }
.badge.erro { background:var(--erro-bg); color:var(--erro); }
.badge.atencao { background:var(--atencao-bg); color:var(--atencao); }
.badge.info { background:var(--info-bg); color:var(--info); }
.badge.neutro { background:var(--superficie-2); border:1px solid var(--borda-2); color:var(--texto-fraco); }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--primario-suave); color:var(--primario); display:grid; place-items:center; font-weight:650; font-size:12px; flex-shrink:0; }

label.campo { display:block; font-size:12px; color:var(--texto-suave); margin:16px 0 6px; font-weight:500; }
.inp { width:100%; padding:9px 12px; border-radius:var(--raio-sm); border:1px solid var(--borda-2); background:var(--superficie); font-size:13.5px; }
.inp:focus { outline:none; border-color:var(--primario); box-shadow:0 0 0 3px var(--primario-suave); }
textarea.inp { resize:vertical; min-height:90px; }
.linha { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.aviso { padding:10px 14px; border-radius:var(--raio-sm); font-size:13px; margin-top:14px; }
.aviso.ok { background:var(--ok-bg); color:var(--ok); }
.aviso.erro { background:var(--erro-bg); color:var(--erro); }
.aviso.info { background:var(--info-bg); color:var(--info); }
#toaster { position:fixed; right:24px; bottom:24px; z-index:100; display:flex; flex-direction:column; gap:10px; }
#toaster .toast { background:var(--texto); color:#fff; padding:11px 16px; border-radius:var(--raio-sm); box-shadow:var(--sombra-forte); font-size:13px; max-width:340px; animation:sobe .2s ease; }
#toaster .toast.ok { background:var(--ok); } #toaster .toast.erro { background:var(--erro); }
@keyframes sobe { from { transform:translateY(8px); opacity:0; } }

.vazio { text-align:center; color:var(--texto-fraco); padding:52px 20px; }
.vazio .ic { margin-bottom:12px; display:flex; justify-content:center; }
.vazio .ic svg { width:40px; height:40px; stroke-width:1.25; opacity:.7; }
.construcao { text-align:center; padding:56px 24px; background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio-lg); box-shadow:var(--sombra); }
.construcao h3 { margin:14px 0 6px; font-size:18px; font-weight:700; }
.construcao p { color:var(--texto-suave); max-width:520px; margin:0 auto 4px; }
.construcao .lista { text-align:left; max-width:420px; margin:20px auto 0; }
.construcao .lista div { padding:10px 0; border-bottom:1px solid var(--borda); display:flex; gap:10px; align-items:center; font-size:13px; }
.construcao .lista div:last-child { border:0; }

.abas { display:flex; gap:4px; border-bottom:1px solid var(--borda); margin-bottom:24px; }
.abas button { background:none; border:0; padding:10px 14px; color:var(--texto-suave); font-weight:600; font-size:13px; border-bottom:2px solid transparent; margin-bottom:-1px; letter-spacing:-.01em; }
.abas button:hover { color:var(--texto); }
.abas button.ativa { color:var(--primario); border-bottom-color:var(--primario); }

/* Modal (editor de plano, diálogos) */
.modal-bg { position:fixed; inset:0; background:rgba(11,18,32,.5); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px; animation:fadeIn .12s ease; }
.modal { width:100%; max-width:540px; max-height:90vh; overflow:auto; padding:22px 24px; box-shadow:0 24px 70px rgba(0,0,0,.32); }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }

.kanban { display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; align-items:flex-start; }
.coluna { background:var(--superficie-2); border:1px solid var(--borda); border-radius:var(--raio); min-width:274px; max-width:274px; }
.coluna .cab { padding:12px 14px; font-weight:650; font-size:12.5px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--borda); }
.coluna .cab .cont { margin-left:auto; background:var(--superficie); border:1px solid var(--borda-2); color:var(--texto-suave); border-radius:20px; padding:0 8px; font-size:11.5px; }
.coluna .corpo { padding:11px; display:flex; flex-direction:column; gap:9px; min-height:60px; }
.cardinho { background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio-sm); padding:12px; box-shadow:var(--sombra); transition:box-shadow .12s; }
.cardinho:hover { box-shadow:var(--sombra-2); }
.cardinho .titulo { font-weight:600; font-size:13px; }
.cardinho .valor { color:var(--ok); font-weight:700; font-size:12.5px; margin-top:4px; }

.inbox { display:grid; grid-template-columns:322px 1fr 288px; border:1px solid var(--borda); border-radius:var(--raio); overflow:hidden; height:calc(100vh - var(--topo) - 112px); background:var(--superficie); box-shadow:var(--sombra); }
.inbox .col { overflow-y:auto; }
.inbox .col.lista { border-right:1px solid var(--borda); }
.inbox .col.painel { border-left:1px solid var(--borda); background:var(--superficie-2); }

.tela-cheia { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(160deg,#141a24,#0D3A7C 90%); }
.tela-cheia .caixa { width:100%; }
.tela-cheia .cartao { background:var(--superficie); border-radius:var(--raio-lg); padding:30px; box-shadow:var(--sombra-forte); }

@media (max-width:900px) {
  #shell { grid-template-columns:1fr; }
  aside#lateral { position:fixed; z-index:50; width:var(--lateral); transform:translateX(-100%); transition:.2s; }
  aside#lateral.aberto { transform:none; }
  .grid.k2,.grid.k3,.grid.k4,.linha { grid-template-columns:1fr; }
  .inbox { grid-template-columns:1fr; height:auto; }
  #view { padding:20px 18px; }
}


/* barra lateral — busca, divisores e link de configurações (molde do app real) */
#lateral .busca-lat { display:flex; gap:6px; margin:6px 12px 4px; }
#lateral .busca-lat input { flex:1; background:rgba(255,255,255,.05); border:1px solid var(--barra-borda);
  border-radius:8px; padding:7px 11px; color:#cfd5e0; font-size:12.5px; }
#lateral .busca-lat input::placeholder { color:#69717f; }
#lateral .busca-lat input:focus { outline:none; border-color:#3a5a9a; }
#lateral .busca-lat .mais { width:32px; border:0; background:var(--primario); color:#fff; border-radius:8px; font-size:17px; line-height:1; }
nav#menu .sep { height:1px; background:var(--barra-borda); margin:11px 14px; }
#lateral .rodape .cfg-link { display:flex; align-items:center; gap:12px; padding:8px 11px; border-radius:8px;
  color:var(--barra-txt); font-weight:500; font-size:13px; margin-bottom:8px; }
#lateral .rodape .cfg-link:hover { background:var(--barra-hover); color:#fff; }
#lateral .rodape .cfg-link.ativo { background:rgba(255,255,255,.09); color:#fff; }
#lateral .rodape .cfg-link .ic { width:19px; height:19px; display:grid; place-items:center; }
#lateral .rodape .cfg-link .ic svg { width:18px; height:18px; }