/* =====================================================================
   CRM Estúdio — design system (redesign 2026: SaaS moderno, escuro/claro)
   Os temas trocam só os tokens abaixo; componentes usam sempre var(--...).
   ===================================================================== */
:root{
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Tema claro */
  --paper:#F5F6FA; --paper-2:#ECEEF4; --card:#FFFFFF; --card-2:#F9FAFC;
  --ink:#0F1222; --ink-soft:#5D6477; --ink-muted:#8A90A0; --line:#E3E6EE;
  --accent:#7C5CF0; --accent-dark:#6545E0; --accent-soft:rgba(124,92,240,.10);
  --grad-marca: linear-gradient(92deg,#7C5CF0 0%,#12A77A 100%);
  --stamp-green:#0E8A5F; --stamp-green-bg:rgba(14,138,95,.10);
  --stamp-amber:#B26A00; --stamp-amber-bg:rgba(230,150,0,.12);
  --stamp-red:#D03B3B; --stamp-red-bg:rgba(208,59,59,.10);
  --info:#2563C9; --info-bg:rgba(37,99,201,.10);
  /* Cores de séries dos gráficos — ordem fixa, validada (dataviz) contra o fundo #FFFFFF */
  --serie-1:#2a78d6; --serie-2:#eb6834; --serie-3:#1baf7a; --serie-4:#eda100;
  --serie-5:#e87ba4; --serie-6:#008300; --serie-7:#4a3aa7; --serie-8:#e34948; --serie-outros:#A1A1AA;
  --shadow: 0 1px 2px rgba(15,18,34,.05), 0 8px 24px rgba(15,18,34,.06);
  --sidebar-bg:#FFFFFF; --sidebar-ink:#1B1F30; --sidebar-soft:#6B7285; --sidebar-hover:rgba(15,18,34,.05);
  --input-focus:#FFFFFF; --hover-row:#F4F5F9;
  --brilho-1: rgba(124,92,240,.07); --brilho-2: rgba(18,167,122,.05);
  --radius:14px;
}
/* Tema escuro (inspirado nas referências: fundo quase preto, cards de vidro) */
:root[data-tema="escuro"]{
  color-scheme: dark;
  --paper:#09090B; --paper-2:#17171B; --card:#111113; --card-2:#151518;
  --ink:#F4F4F5; --ink-soft:#A1A1AA; --ink-muted:#71717A; --line:rgba(255,255,255,.07);
  --accent:#9A83FA; --accent-dark:#8469F5; --accent-soft:rgba(154,131,250,.14);
  --grad-marca: linear-gradient(92deg,#B8A6FF 0%,#4ADE9E 100%);
  --stamp-green:#4ADE9E; --stamp-green-bg:rgba(74,222,158,.12);
  --stamp-amber:#FBBF3C; --stamp-amber-bg:rgba(251,191,60,.12);
  --stamp-red:#F87171; --stamp-red-bg:rgba(248,113,113,.12);
  --info:#6AA8FF; --info-bg:rgba(106,168,255,.14);
  /* Mesmas 8 cores, tons para fundo escuro — validadas contra #111113 */
  --serie-1:#3987e5; --serie-2:#d95926; --serie-3:#199e70; --serie-4:#c98500;
  --serie-5:#d55181; --serie-6:#008300; --serie-7:#9085e9; --serie-8:#e66767; --serie-outros:#52525B;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.35);
  --sidebar-bg:#0C0C0E; --sidebar-ink:#F4F4F5; --sidebar-soft:#8E8E98; --sidebar-hover:rgba(255,255,255,.05);
  --input-focus:#141417; --hover-row:rgba(255,255,255,.03);
  --brilho-1: rgba(154,131,250,.06); --brilho-2: rgba(74,222,158,.035);
}

*{box-sizing:border-box;}
body{
  margin:0;color:var(--ink);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 520px at 12% -8%, var(--brilho-1), transparent 60%),
    radial-gradient(800px 480px at 100% 0%, var(--brilho-2), transparent 60%),
    var(--paper);
  background-attachment:fixed;
}
h1,h2,h3,.display{font-family:var(--font);font-weight:650;letter-spacing:-.01em;}
.mono{font-family:var(--font);font-variant-numeric:tabular-nums;}
a{color:var(--accent);}
::selection{background:var(--accent-soft);}

/* ---------- shell com menu lateral ---------- */
.app-shell{display:flex;min-height:100vh;}
.sidebar{width:236px;flex-shrink:0;background:var(--sidebar-bg);color:var(--sidebar-ink);padding:22px 14px;display:flex;flex-direction:column;border-right:1px solid var(--line);position:sticky;top:0;height:100vh;}
.sidebar .brand{font-size:15px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;padding:0 8px;}
.sidebar .brand::before{content:"";width:28px;height:28px;border-radius:9px;background:var(--grad-marca);box-shadow:0 4px 14px var(--accent-soft);flex-shrink:0;}
.sidebar .brand-sub{font-size:11px;color:var(--sidebar-soft);margin:4px 0 26px;padding:0 8px 0 46px;}
.sidebar nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto;}
.sidebar nav a{color:var(--sidebar-soft);text-decoration:none;font-size:13.5px;font-weight:500;padding:9px 12px;border-radius:10px;display:flex;align-items:center;gap:10px;position:relative;transition:background .15s,color .15s;}
.sidebar nav a:hover{background:var(--sidebar-hover);color:var(--sidebar-ink);}
.sidebar nav a.active{background:var(--accent-soft);color:var(--sidebar-ink);font-weight:600;}
.sidebar nav a.active::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);}
.sidebar .user-box{border-top:1px solid var(--line);padding-top:14px;font-size:12px;color:var(--sidebar-soft);}
.sidebar .user-box strong{display:block;color:var(--sidebar-ink);font-size:13.5px;margin-bottom:1px;}
.sidebar .logout-link{color:var(--stamp-red);cursor:pointer;font-size:12px;margin-top:8px;display:inline-block;padding:0 8px;}
.sidebar .user-link{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;padding:7px 8px;border-radius:10px;}
.sidebar .user-link:hover, .sidebar .user-link.active{background:var(--sidebar-hover);}
.sidebar .user-textos{min-width:0;}
.sidebar .user-textos strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.avatar-menu{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;font-size:13px;}
.avatar-iniciais{display:inline-flex;align-items:center;justify-content:center;background:var(--grad-marca);color:#fff;font-weight:650;font-family:var(--font);}
.main-area{flex:1;padding:32px 40px;overflow-x:auto;min-width:0;}
.main-area h1{font-size:26px;}

/* ---------- botões ---------- */
button{font-family:var(--font);cursor:pointer;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:13.5px;font-weight:600;padding:9px 15px;transition:background .15s,border-color .15s,transform .1s;}
button:hover{border-color:var(--ink-muted);}
button:active{transform:translateY(1px);}
button:disabled{opacity:.55;cursor:not-allowed;}
button.primary{background:var(--accent);border-color:transparent;color:#fff;box-shadow:0 6px 18px var(--accent-soft);}
button.primary:hover{background:var(--accent-dark);}
button.ghost{background:transparent;border-color:transparent;color:var(--ink-soft);}
button.ghost:hover{color:var(--ink);background:var(--paper-2);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---------- formulários ---------- */
.field label{display:block;font-size:11.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;}
.field input, .field select, .field textarea{width:100%;font-family:var(--font);font-size:13.5px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);color:var(--ink);outline:none;transition:border-color .15s,background .15s;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent);background:var(--input-focus);box-shadow:0 0 0 3px var(--accent-soft);}
input, select, textarea{font-family:var(--font);color:var(--ink);}

/* ---------- selos (status, prioridade) ---------- */
.stamp{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid transparent;white-space:nowrap;}
.stamp.green{color:var(--stamp-green);background:var(--stamp-green-bg);}
.stamp.amber{color:var(--stamp-amber);background:var(--stamp-amber-bg);}
.stamp.red{color:var(--stamp-red);background:var(--stamp-red-bg);}

/* ---------- janelas (fichas) ---------- */
.overlay{position:fixed;inset:0;background:rgba(5,6,10,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}
.hidden{display:none !important;}
.ficha{background:var(--card);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;border-radius:18px;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.35);}
.ficha-head{padding:22px 26px 14px;border-bottom:1px solid var(--line);}
.ficha-body{padding:20px 26px 8px;display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;}
.ficha-body .full{grid-column:1/-1;}
.ficha-foot{padding:16px 26px 24px;display:flex;justify-content:flex-end;gap:8px;}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#161A24;color:#fff;border:1px solid rgba(255,255,255,.08);padding:11px 18px;border-radius:12px;font-size:13px;font-weight:500;box-shadow:0 12px 30px rgba(0,0,0,.35);z-index:150;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.toast.show{opacity:1;}

/* ---------- movimento (desligado para quem prefere menos animação) ---------- */
@keyframes surgir{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes crescerX{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important;}
}

/* ---------- tabelas (base comum) ---------- */
table{border-color:var(--line);}
thead th{font-weight:600;}

@media (max-width:820px){
  .app-shell{flex-direction:column;}
  .sidebar{width:100%;height:auto;position:static;flex-direction:row;align-items:center;padding:10px 14px;border-right:0;border-bottom:1px solid var(--line);}
  .sidebar .brand{font-size:0;padding:0;}
  .sidebar .brand-sub{display:none;}
  .sidebar nav{flex-direction:row;flex:1;overflow-x:auto;margin-left:10px;}
  .sidebar nav a.active::before{display:none;}
  .sidebar .user-box{display:flex;align-items:center;gap:10px;border-top:0;padding-top:0;margin-left:8px;}
  .sidebar .user-textos{display:none;}
  .sidebar .logout-link{margin-top:0;}
  .main-area{padding:20px 16px;}
}

/* ---------- popup de alerta de lembrete ---------- */
.lembrete-popup-overlay{position:fixed;inset:0;background:rgba(5,6,10,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:500;animation:lembreteFadeIn .25s ease;}
@keyframes lembreteFadeIn{from{opacity:0;}to{opacity:1;}}
.lembrete-popup-card{background:var(--card);border-radius:14px;padding:28px 30px;max-width:360px;width:100%;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.35);animation:lembretePop .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes lembretePop{0%{transform:scale(.7) translateY(20px);opacity:0;}100%{transform:scale(1) translateY(0);opacity:1;}}
.lembrete-popup-icon{font-size:38px;animation:lembreteBell 1s ease infinite;}
@keyframes lembreteBell{0%,100%{transform:rotate(0);}15%{transform:rotate(18deg);}30%{transform:rotate(-15deg);}45%{transform:rotate(10deg);}60%{transform:rotate(-8deg);}75%{transform:rotate(0);}}
.lembrete-popup-titulo{font-size:19px;font-weight:600;margin-top:10px;}
.lembrete-popup-cliente{font-size:13px;color:var(--accent);font-weight:600;margin-top:4px;}
.lembrete-popup-msg{font-size:13px;color:var(--ink-soft);margin-top:10px;background:var(--paper-2);border-radius:8px;padding:10px 12px;text-align:left;}
.lembrete-popup-acoes{display:flex;flex-direction:column;gap:8px;margin-top:18px;}
.lembrete-popup-acoes a, .lembrete-popup-acoes button{display:block;width:100%;padding:10px;border-radius:7px;font-size:13.5px;font-weight:600;text-decoration:none;border:1px solid var(--line);cursor:pointer;}
.lembrete-popup-wa{background:#25D366;color:#fff;border-color:#25D366;}
.lembrete-popup-concluir{background:var(--accent);color:#fff;border-color:var(--accent);}
.lembrete-popup-fechar{background:transparent;color:var(--ink-soft);}

/* ---------- dashboards: cartões de gráfico (dashboards.html e Início) ---------- */
.grade-widgets{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;}
.widget{--altura:260px;position:relative;grid-column:span 6;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0;animation:surgir .4s cubic-bezier(.2,.7,.2,1) both;}
.widget.tam-p{grid-column:span 4;--altura:200px;} .widget.tam-g{grid-column:span 12;--altura:300px;}
.widget.arrastando{opacity:.4;} .widget.alvo-soltar{outline:2px dashed var(--accent);outline-offset:3px;}
.widget-topo{display:flex;align-items:flex-start;gap:10px;}
.widget-alca{cursor:grab;color:var(--ink-muted);font-size:15px;line-height:22px;user-select:none;padding:0 2px;}
.widget-titulos{flex:1;min-width:0;}
.widget-titulos h3{margin:0;font-size:14.5px;font-weight:650;}
.widget-insight{margin:3px 0 0;font-size:12.5px;color:var(--ink-soft);min-height:16px;}
.widget-acoes{display:flex;gap:2px;flex-shrink:0;}
.btn-mini{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border-radius:8px;border:1px solid transparent;background:transparent;font-size:13px;color:var(--ink-soft);text-decoration:none;opacity:.55;transition:opacity .15s,background .15s;}
.widget:hover .btn-mini, .btn-mini:focus-visible, .btn-mini.ligado{opacity:1;}
.btn-mini:hover{background:var(--paper-2);border-color:transparent;}
.btn-mini.ligado{background:var(--accent-soft);}
.btn-mini.perigo:hover{background:var(--stamp-red-bg);}
@media (hover:none){ .btn-mini{opacity:1;} }
.widget-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px;}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:2px 9px;font-family:var(--font);}
.chip-cruzado{color:var(--accent);background:var(--accent-soft);border-color:transparent;}
.widget-corpo{flex:1;min-height:120px;position:relative;transition:opacity .2s;}
.widget-corpo.atualizando{opacity:.45;}
.g-area{display:flex;flex-direction:column;gap:12px;height:100%;}
.g-canvas{position:relative;height:var(--altura);}
.g-area-circular{flex-direction:row;align-items:center;}
.g-area-circular .g-canvas{flex:0 0 min(42%,calc(var(--altura) - 20px));height:calc(var(--altura) - 20px);}
.g-legenda{list-style:none;margin:0;padding:0;flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.g-legenda li{display:grid;grid-template-columns:10px minmax(70px,1fr) auto 36px;align-items:center;gap:8px;font-size:12.5px;padding:5px 6px;border-radius:8px;}
.g-legenda li:hover{background:var(--paper-2);}
.g-legenda li.clicavel{cursor:pointer;}
.g-cor{width:10px;height:10px;border-radius:3px;}
.g-leg-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.g-leg-valor{font-weight:600;font-variant-numeric:tabular-nums;}
.g-leg-pct{color:var(--ink-muted);text-align:right;font-variant-numeric:tabular-nums;}
.g-numero{display:flex;flex-direction:column;gap:8px;justify-content:center;height:100%;padding:6px 0;}
.g-numero-valor{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.1;}
.g-numero-delta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.g-numero-rodape{font-size:12px;color:var(--ink-muted);}
.delta{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:650;}
.delta.up{color:var(--stamp-green);background:var(--stamp-green-bg);}
.delta.down{color:var(--stamp-red);background:var(--stamp-red-bg);}
.delta.flat{color:var(--ink-soft);background:var(--paper-2);}
.delta-ref{font-size:11px;color:var(--ink-muted);}
.g-vazio{display:grid;place-items:center;height:100%;min-height:160px;color:var(--ink-muted);font-size:13px;text-align:center;}
.g-tabela{width:100%;border-collapse:collapse;font-size:13px;}
.g-duplo{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.g-duplo-rotulo{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:4px;}
.g-duplo .g-numero-valor{font-size:26px;}
.g-barra-recebido{height:8px;border-radius:4px;background:var(--paper-2);overflow:hidden;margin-top:4px;}
.g-barra-recebido span{display:block;height:100%;border-radius:4px;transform-origin:left;animation:crescerX .9s cubic-bezier(.2,.7,.2,1) both;}
.g-legenda-linha{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--ink-soft);}
.g-legenda-linha li{display:flex;align-items:center;gap:6px;}
.g-legenda-linha strong{color:var(--ink);font-weight:650;}
@media (max-width:560px){ .g-duplo{grid-template-columns:1fr;} }
.widget-redimensionar{position:absolute;right:4px;bottom:4px;width:18px;height:18px;cursor:nwse-resize;border-radius:4px;opacity:0;transition:opacity .15s;touch-action:none;
  background:linear-gradient(135deg, transparent 50%, var(--ink-muted) 50%, var(--ink-muted) 58%, transparent 58%, transparent 70%, var(--ink-muted) 70%, var(--ink-muted) 78%, transparent 78%);}
.widget:hover .widget-redimensionar, .widget.redimensionando .widget-redimensionar{opacity:.8;}
.widget.redimensionando{outline:2px solid var(--accent);outline-offset:2px;user-select:none;}
.widget-redimensionar[data-medida]::after{content:attr(data-medida);position:absolute;right:22px;bottom:0;white-space:nowrap;font-size:11px;font-weight:600;color:#fff;background:var(--accent);padding:2px 8px;border-radius:6px;}
@media (hover:none){ .widget-redimensionar{display:none;} }
.g-tabela th, .g-tabela td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;}
.g-tabela td:nth-child(n+2), .g-tabela th:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums;}
.g-tabela thead th{font-size:11px;font-weight:600;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.05em;}
.g-tabela tfoot th{border-bottom:0;}
@media (max-width:1100px){ .widget.tam-p{grid-column:span 6;} }
@media (max-width:820px){ .widget, .widget.tam-p, .widget.tam-g{grid-column:span 12 !important;} .g-area-circular{flex-direction:column;align-items:stretch;} .g-area-circular .g-canvas{flex:none;} }