/* Visual copiado do mavs-ads.com (variaveis extraidas do CSS do site em 17/09/2026) */
:root{
  --bg:#161D31;--bg2:#1c2438;--bg3:#222a44;--card:#283046;--card2:#323a56;--input:#1f2740;
  --border:#3a4263;--border2:#454d70;
  --primary:#708ffb;--primary-h:#6080f7;--primary-glow:rgba(112,143,251,.22);--primary-dim:rgba(112,143,251,.1);
  --success:#12b76a;--success-bg:rgba(18,183,106,.1);--error:#f04438;--error-bg:rgba(240,68,56,.1);
  --warn:#f79009;--warn-bg:rgba(247,144,9,.12);
  --text:#ecf0f8;--text2:#b0b9d2;--text3:#6d7593;
  --r:10px;--r-sm:6px;--r-lg:16px;
  --shadow:0 4px 24px rgba(0,0,0,.3);--shadow-lg:0 8px 40px rgba(0,0,0,.4);
  --sidebar:220px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5;min-height:100vh}
a{color:var(--primary);text-decoration:none}
h1,h2,h3{font-weight:600;line-height:1.25}
h1{font-family:"Playfair Display",Georgia,serif;font-size:1.6rem}
h2{font-size:1.1rem}
h3{font-size:.95rem;color:var(--text2)}
.marca{font-family:"Playfair Display",Georgia,serif;font-size:1.25rem;font-weight:600;color:var(--text);letter-spacing:.2px}
.marca span{color:var(--primary)}

/* ---- barra lateral ---- */
.sidebar{position:fixed;top:0;left:0;height:100vh;width:var(--sidebar);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:200;transition:transform .25s ease}
.sidebar-top{padding:1.1rem 1rem .9rem;border-bottom:1px solid var(--border)}
.sidebar-nav{flex:1;overflow-y:auto;padding:.75rem .6rem}
.nav-label{display:flex;align-items:center;justify-content:space-between;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);padding:.9rem .5rem .35rem}
.nav-btn{display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;border-radius:var(--r-sm);color:var(--text2);font-size:.84rem;margin-bottom:2px;transition:background .15s,color .15s}
.nav-btn:hover{background:var(--bg3);color:var(--text)}
.nav-btn.ativo{background:var(--primary-dim);color:var(--primary);font-weight:500}
.nav-btn .ico{width:18px;text-align:center;opacity:.9}
.nav-cliente{padding:.35rem .75rem .35rem 1.4rem;font-size:.8rem;display:flex;align-items:center;gap:.45rem;color:var(--text2);border-radius:var(--r-sm)}
.nav-cliente:hover{background:var(--bg3);color:var(--text)}
.nav-cliente.ativo{color:var(--primary)}
.nav-cliente .ponto{width:7px;height:7px;border-radius:50%;flex:none;background:var(--text3)}
.sidebar-footer{padding:.75rem;border-top:1px solid var(--border);font-size:.8rem;color:var(--text3);display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.sidebar-footer b{color:var(--text2);font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-toggle{display:none;position:fixed;top:.8rem;left:.8rem;z-index:300;background:var(--card);border:1px solid var(--border);color:var(--text);width:38px;height:38px;border-radius:var(--r-sm);font-size:1.1rem}
.sidebar-fundo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:150}

/* ---- conteudo ---- */
.conteudo{margin-left:var(--sidebar);padding:1.6rem 2rem 3rem;max-width:1240px}
.topo{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.topo p{color:var(--text3);font-size:.85rem;margin-top:.15rem}
.acoes{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.1rem 1.25rem;box-shadow:var(--shadow)}
.card+.card{margin-top:1rem}
.card h2{margin-bottom:.8rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.grade{display:grid;gap:1rem}
.grade-4{grid-template-columns:repeat(4,1fr)}
.grade-3{grid-template-columns:repeat(3,1fr)}
.grade-2{grid-template-columns:repeat(2,1fr)}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.15rem}
.kpi .rotulo{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text3)}
.kpi .valor{font-size:1.55rem;font-weight:600;margin-top:.25rem}
.kpi .sub{font-size:.78rem;color:var(--text3);margin-top:.15rem}

/* ---- botoes ---- */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .95rem;border-radius:var(--r-sm);border:1px solid var(--border2);background:var(--card2);color:var(--text);font-size:.84rem;font-weight:500;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s}
.btn:hover{background:var(--bg3);border-color:var(--primary)}
.btn-primario{background:var(--primary);border-color:var(--primary);color:#0d1226}
.btn-primario:hover{background:var(--primary-h);border-color:var(--primary-h)}
.btn-perigo{color:var(--error);border-color:rgba(240,68,56,.4);background:transparent}
.btn-perigo:hover{background:var(--error-bg);border-color:var(--error)}
.btn-mini{padding:.3rem .6rem;font-size:.76rem}

/* ---- formularios ---- */
label{display:block;font-size:.78rem;color:var(--text2);margin-bottom:.3rem;font-weight:500}
input,select,textarea{width:100%;background:var(--input);border:1px solid var(--border);color:var(--text);border-radius:var(--r-sm);padding:.55rem .7rem;font-size:.88rem;font-family:inherit;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
textarea{min-height:90px;resize:vertical}
select option{background:var(--bg2)}
.campo{margin-bottom:.9rem}
.linha{display:grid;gap:.9rem}
.linha-2{grid-template-columns:1fr 1fr}
.linha-3{grid-template-columns:1fr 1fr 1fr}
.dica{font-size:.74rem;color:var(--text3);margin-top:.25rem}
.secao{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--primary);margin:1.3rem 0 .7rem;padding-bottom:.35rem;border-bottom:1px solid var(--border)}

/* ---- tabelas ---- */
table{width:100%;border-collapse:collapse;font-size:.86rem}
th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);padding:.5rem .6rem;border-bottom:1px solid var(--border);font-weight:500}
td{padding:.6rem .6rem;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr.link{cursor:pointer}
tr.link:hover td{background:var(--bg3)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---- etiquetas ---- */
.tag{display:inline-block;padding:.15rem .55rem;border-radius:20px;font-size:.72rem;font-weight:500;background:var(--bg3);color:var(--text2);white-space:nowrap}
.tag-ativo{background:var(--success-bg);color:var(--success)}
.tag-prospeccao,.tag-proposta{background:var(--primary-dim);color:var(--primary)}
.tag-fechado{background:var(--warn-bg);color:var(--warn)}
.tag-pausado{background:var(--warn-bg);color:var(--warn)}
.tag-encerrado{background:var(--error-bg);color:var(--error)}
.ponto.f-ativo{background:var(--success)}.ponto.f-prospeccao,.ponto.f-proposta{background:var(--primary)}.ponto.f-fechado,.ponto.f-pausado{background:var(--warn)}.ponto.f-encerrado{background:var(--error)}

/* ---- abas internas ---- */
.abas{display:flex;gap:.25rem;border-bottom:1px solid var(--border);margin-bottom:1.1rem;overflow-x:auto}
.abas a{padding:.55rem .9rem;font-size:.84rem;color:var(--text2);border-bottom:2px solid transparent;white-space:nowrap;margin-bottom:-1px}
.abas a:hover{color:var(--text)}
.abas a.ativo{color:var(--primary);border-bottom-color:var(--primary);font-weight:500}

/* ---- avisos ---- */
.aviso{padding:.65rem .95rem;border-radius:var(--r-sm);font-size:.85rem;margin-bottom:1rem;border:1px solid}
.aviso-ok{background:var(--success-bg);border-color:rgba(18,183,106,.35);color:var(--success)}
.aviso-erro{background:var(--error-bg);border-color:rgba(240,68,56,.35);color:var(--error)}
.vazio{text-align:center;padding:2.5rem 1rem;color:var(--text3);font-size:.9rem}
.vazio b{display:block;color:var(--text2);font-size:1rem;margin-bottom:.3rem}

/* ---- CRM ---- */
.linha-tempo{list-style:none}
.linha-tempo li{display:grid;grid-template-columns:34px 1fr;gap:.7rem;padding:.75rem 0;border-bottom:1px solid var(--border)}
.linha-tempo li:last-child{border-bottom:none}
.linha-tempo .ico{width:34px;height:34px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:1rem}
.linha-tempo .meta{font-size:.74rem;color:var(--text3);display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.linha-tempo .texto{margin-top:.2rem;white-space:pre-wrap;font-size:.88rem}
.retorno{font-size:.74rem;padding:.1rem .5rem;border-radius:20px;background:var(--warn-bg);color:var(--warn)}
.retorno.atrasado{background:var(--error-bg);color:var(--error)}
.retorno.feito{background:var(--success-bg);color:var(--success)}
.dado{display:flex;flex-direction:column;gap:.1rem;padding:.55rem 0;border-bottom:1px solid var(--border)}
.dado:last-child{border-bottom:none}
.dado span{font-size:.72rem;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
.dado b{font-weight:500;font-size:.9rem;word-break:break-word}
.dado b.nada{color:var(--text3);font-weight:400}

/* ---- login ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;background:radial-gradient(circle at 20% 10%,rgba(112,143,251,.12),transparent 40%),var(--bg)}
.login-card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem;box-shadow:var(--shadow-lg)}
.login-card .marca{font-size:1.6rem;margin-bottom:.2rem}
.login-card p{color:var(--text3);font-size:.85rem;margin-bottom:1.4rem}

@media (max-width:900px){
  .grade-4{grid-template-columns:1fr 1fr}.grade-3{grid-template-columns:1fr 1fr}
  .linha-3{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.aberta{transform:none}
  .sidebar-fundo.aberta{display:block}
  .sidebar-toggle{display:block}
  .conteudo{margin-left:0;padding:4.2rem 1rem 3rem}
  .grade-4,.grade-3,.grade-2,.linha-2,.linha-3{grid-template-columns:1fr}
  html{font-size:14px}
}

/* ---- campanhas e midias (Fase 3) ---- */
.tag-k-ativa{background:var(--success-bg);color:var(--success)}.tag-k-planejando{background:var(--primary-dim);color:var(--primary)}.tag-k-pausada{background:var(--warn-bg);color:var(--warn)}.tag-k-encerrada{background:var(--error-bg);color:var(--error)}
.tag-m-rascunho{background:var(--bg3);color:var(--text2)}.tag-m-aguardando{background:var(--warn-bg);color:var(--warn)}.tag-m-aprovado{background:var(--success-bg);color:var(--success)}.tag-m-reprovado{background:var(--error-bg);color:var(--error)}.tag-m-publicado{background:var(--primary-dim);color:var(--primary)}
.checklist{list-style:none}
.checklist li{display:grid;grid-template-columns:26px 1fr 22px;align-items:center;gap:.6rem;padding:.45rem 0;border-bottom:1px solid var(--border);font-size:.88rem}
.checklist li:last-child{border-bottom:none}
.checklist li.feito span{color:var(--text3);text-decoration:line-through}
.checklist .caixa{width:22px;height:22px;border-radius:var(--r-sm);border:1px solid var(--border2);background:var(--input);color:var(--success);cursor:pointer;font-size:.85rem;font-weight:700}
.checklist li.feito .caixa{background:var(--success-bg);border-color:var(--success)}
.checklist .tirar{background:none;border:none;color:var(--text3);cursor:pointer;font-size:1rem;opacity:0;transition:opacity .15s}
.checklist li:hover .tirar{opacity:1}
.midias-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.midia-card{display:block;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;color:var(--text);transition:border-color .15s,transform .15s}
.midia-card:hover{border-color:var(--primary);transform:translateY(-2px)}
.midia-previa{aspect-ratio:1;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:2rem;overflow:hidden}
.midia-previa img{width:100%;height:100%;object-fit:cover}
.midia-texto{padding:.7rem;font-size:.74rem;color:var(--text2);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;align-self:flex-start}
.midia-info{padding:.55rem .65rem}
.midia-info b{display:block;font-size:.8rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
input[type=file]{padding:.4rem;font-size:.8rem}
input[type=file]::file-selector-button{background:var(--card2);border:1px solid var(--border2);color:var(--text);border-radius:var(--r-sm);padding:.3rem .7rem;margin-right:.6rem;font-family:inherit;cursor:pointer}

/* ---- portal do cliente (Fase 4) ---- */
.faixa-previa{position:fixed;top:0;left:0;right:0;z-index:400;background:var(--warn);color:#1a1200;font-size:.82rem;padding:.4rem 1rem;text-align:center}
.faixa-previa a{color:#1a1200;text-decoration:underline;font-weight:600}
.sidebar.com-faixa{top:32px;height:calc(100vh - 32px)}
.conteudo.com-faixa{padding-top:3.4rem}
@media (max-width:720px){.conteudo.com-faixa{padding-top:5.6rem}.faixa-previa~.sidebar-toggle{top:2.8rem}}

/* ---- performance (Fase 5) ---- */
.grafico{display:flex;align-items:flex-end;gap:2px;height:160px;border-bottom:1px solid var(--border);padding-bottom:1.3rem;position:relative}
.gdia{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:1px;height:100%;position:relative;min-width:0}
.gbarra{width:60%;background:var(--primary);border-radius:2px 2px 0 0;min-height:1px;opacity:.9}
.gconv{width:25%;background:var(--success);border-radius:2px 2px 0 0;min-height:1px}
.gdia:hover .gbarra{opacity:1;filter:brightness(1.2)}
.gdia span{position:absolute;bottom:-1.2rem;font-size:.62rem;color:var(--text3);white-space:nowrap}
.leg{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:middle;margin-right:.3rem}
input[type=checkbox]{accent-color:var(--primary);width:16px;height:16px}

/* ---- integracoes (Fase 6) ---- */
.passos{padding-left:1.2rem;font-size:.84rem;color:var(--text2);margin-bottom:1rem}
.passos li{margin-bottom:.45rem}
.passos code{background:var(--bg2);border:1px solid var(--border);padding:.1rem .4rem;border-radius:4px;font-size:.78rem;color:var(--primary);user-select:all;word-break:break-all}
details summary::-webkit-details-marker{color:var(--primary)}