:root{
  --bg:#f5f5f7; --card:#fff; --bd:#ececf0; --bd2:#f5f5f7;
  --t1:#1d1d1f; --t2:#424245; --t3:#6e6e73; --t4:#86868b; --t5:#aeaeb2;
  --blue:#0071e3; --blueD:#0062c4; --green:#34c759; --greenT:#248a3d;
  --purple:#5e5ce6; --orange:#ff9f0a; --pink:#ff375f; --red:#ff3b30; --redT:#d70015;
  --fld:#f0f0f2;
  --font:-apple-system,system-ui,'SF Pro Text','SF Pro Display','Helvetica Neue',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{margin:0;background:var(--bg);color:var(--t1);font-family:var(--font);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit;outline:none}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#d2d2d7;border-radius:8px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#b8b8bf}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes ovrl{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

#loader{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999}
.spin{width:30px;height:30px;border:2px solid var(--bd);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite}

/* LOGIN */
#view-login{height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 600px at 30% -10%,#eaf2fe 0%,var(--bg) 55%);padding:24px}
.login-box{width:430px;max-width:100%;background:#fff;border-radius:26px;box-shadow:0 24px 60px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.04);padding:42px 40px 30px;animation:pop .3s}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:30px}
.logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(140deg,var(--blue),var(--green));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:17px;letter-spacing:-.02em}
.brand-txt b{font-size:15px;font-weight:600;letter-spacing:-.01em;display:block}
.brand-txt span{font-size:12px;color:var(--t4)}
.login-box h1{font-size:27px;font-weight:600;letter-spacing:-.03em;margin-bottom:6px}
.login-box .sub{font-size:14px;color:var(--t4);margin-bottom:24px}
.seg{display:flex;gap:3px;background:#ececf0;border-radius:12px;padding:4px;margin-bottom:22px}
.seg button{flex:1;border-radius:9px;padding:9px;font-size:14px;font-weight:600;color:var(--t4);transition:.18s}
.seg button.on{background:#fff;color:var(--t1);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.fld{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.fld label{font-size:13px;font-weight:600;color:var(--t2)}
.fld input{background:var(--bg);border:1px solid #e2e2e7;border-radius:12px;padding:13px 15px;font-size:15px;color:var(--t1);transition:.18s}
.fld input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(0,113,227,.12)}
.btn-primary{width:100%;background:var(--blue);color:#fff;border-radius:13px;padding:14px;font-size:15px;font-weight:600;letter-spacing:-.01em;transition:.18s}
.btn-primary:hover{background:var(--blueD)}
.btn-primary:disabled{opacity:.55}
.login-err{color:var(--redT);font-size:13px;font-weight:600;text-align:center;min-height:18px;margin-top:12px}
.login-foot{text-align:center;font-size:12px;color:var(--t5);margin-top:20px}

/* APP SHELL */
#view-app{display:flex;height:100vh}
.sidebar{width:250px;flex-shrink:0;background:#fff;border-right:1px solid var(--bd);display:flex;flex-direction:column;padding:20px 16px}
.side-brand{display:flex;align-items:center;gap:11px;padding:6px 8px 22px}
.side-brand .logo{width:36px;height:36px;border-radius:10px;font-size:15px}
.side-brand b{font-size:14px;font-weight:600;letter-spacing:-.01em;display:block}
.side-brand span{font-size:11px;color:var(--t4)}
.nav{display:flex;flex-direction:column;gap:3px}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;font-size:14px;text-align:left;color:var(--t2);font-weight:500;transition:.13s}
.nav-item:hover{background:#f7f7f9}
.nav-item.on{background:rgba(0,113,227,.1);color:var(--blue);font-weight:600}
.nav-item svg{width:19px;height:19px;flex-shrink:0}
.nav-pill{background:var(--red);color:#fff;font-size:11px;font-weight:700;border-radius:9px;padding:1px 7px;min-width:18px;text-align:center}
.side-foot{border-top:1px solid var(--bd);padding-top:14px;display:flex;align-items:center;gap:11px;margin-top:auto}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--t1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0}
.side-foot .who{flex:1;min-width:0;line-height:1.25}
.side-foot .who b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.side-foot .who span{font-size:11px;color:var(--t4)}
.icon-btn{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--t4);transition:.15s}
.icon-btn:hover{background:var(--bg);color:var(--red)}
.icon-btn svg{width:18px;height:18px}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 30px;background:rgba(245,245,247,.8);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:20}
.header-l{display:flex;align-items:center;gap:14px;min-width:0}
.btn-back{display:flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--bd);border-radius:10px;padding:7px 12px;font-size:13px;font-weight:600;color:var(--t2);transition:.15s}
.btn-back:hover{background:var(--bg)}
.btn-back svg{width:15px;height:15px}
.h-title{font-size:23px;font-weight:650;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.h-sub{font-size:13px;color:var(--t4)}
.period{display:flex;align-items:center;gap:10px;flex-shrink:0;position:relative}
/* A régua .pseg (Ontem · 7d · … · 90d) saiu em 30/08/2026 — o período é o botão de
   calendário com o menu de recortes, o MESMO do painel do cliente. */
.pcal{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--bd);border-radius:11px;padding:7px 13px;font-size:13px;font-weight:600;color:var(--t2);transition:.15s}
.pcal.on{border-color:var(--blue);color:var(--blue)}
.pcal:hover{background:var(--bg)}
.pcal svg{width:15px;height:15px}
.crange{position:absolute;top:46px;right:0;z-index:40;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--bd);border-radius:14px;padding:10px 12px;box-shadow:0 12px 32px rgba(0,0,0,.14)}
.crange input{background:var(--bg);border:1px solid #e2e2e7;border-radius:9px;padding:7px 10px;font-size:13px;color:var(--t1)}
.crange span{font-size:12px;color:var(--t4)}
.crange button{background:var(--blue);color:#fff;border-radius:9px;padding:8px 14px;font-size:13px;font-weight:600}

.scroll{flex:1;overflow:auto}
.wrap{padding:26px 30px 60px;display:flex;flex-direction:column;gap:18px}

/* CARDS */
.card{background:var(--card);border:1px solid var(--bd);border-radius:20px;box-shadow:0 1px 2px rgba(0,0,0,.04);padding:22px 24px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.card-t{font-size:15px;font-weight:600;letter-spacing:-.01em}
.card-s{font-size:12px;color:var(--t4)}
.legend{display:flex;gap:16px}
.legend span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--t3)}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}

.grid-kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.kpi{background:var(--card);border:1px solid var(--bd);border-radius:20px;box-shadow:0 1px 2px rgba(0,0,0,.04);padding:18px 18px 14px;display:flex;flex-direction:column;gap:11px;animation:fadeUp .3s}
.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.kpi-label{font-size:12.5px;color:var(--t3);font-weight:500}
.kpi-val{font-size:23px;font-weight:600;letter-spacing:-.03em}
.kpi-sub{font-size:11px;color:var(--t5)}
.badge{font-size:11.5px;font-weight:600;border-radius:7px;padding:2px 7px;white-space:nowrap}
.b-neutral{color:var(--t3);background:var(--fld)}
.b-good{color:var(--greenT);background:rgba(52,199,89,.13)}
.b-bad{color:var(--redT);background:rgba(255,59,48,.12)}
.spark{width:100%;height:32px;display:block}

.cols-2-1{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:18px}
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
/* `minmax(0,1fr)` e não `1fr`: uma coluna `1fr` é `minmax(auto,1fr)`, e o `auto` põe o
   min-content do filho como PISO — a coluna incha até caber o conteúdo mais largo e o
   card estoura a tela em vez de encolher. A regra de cima já usava `minmax(0,…)`; era
   só o atalho do celular que reabria a porta (achado em 30/08/2026, no card de colunas
   de ROAS por conta: 707px de card dentro de 343px de tela). */
@media(max-width:900px){.cols-2-1,.cols-2{grid-template-columns:minmax(0,1fr)}}

.bar-row{display:flex;align-items:center;gap:12px}
.bar-row .nm{font-size:13px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{flex:1;height:9px;background:var(--fld);border-radius:6px;overflow:hidden}
.bar>div{height:100%;border-radius:6px}
.bar-row .vl{font-size:13px;font-weight:600;text-align:right;white-space:nowrap}
/* O ROAS ao lado da receita (30/08/2026). Um degrau abaixo do valor em peso: a receita
   é o que ordena a lista, o ROAS é a leitura de qualidade dela. `tabular-nums` alinha a
   vírgula de uma linha para a outra — sem isso a coluna serrilha e deixa de se comparar
   de relance, que é a única coisa que ela existe para fazer. */
.bar-row .vl-roas{font-weight:650;font-variant-numeric:tabular-nums}

.tbl-h{display:grid;gap:8px;padding:12px 8px;border-bottom:1px solid var(--bd);font-size:11.5px;color:var(--t4);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.tbl-r{display:grid;gap:8px;padding:13px 8px;border-bottom:1px solid var(--bd2);font-size:13.5px;align-items:center}
.tbl-r.click{cursor:pointer;border-radius:10px;transition:.13s}
.tbl-r.click:hover{background:#f9f9fb}
.r-name{display:flex;align-items:center;gap:10px;min-width:0}
.r-name b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:1.2}
.r-name span{font-size:11.5px;color:var(--t5)}
.chev{color:#c7c7cc;display:flex;justify-content:flex-end}
.chev svg{width:15px;height:15px}

.cli-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.cli-card{background:#fff;border:1px solid var(--bd);border-radius:20px;box-shadow:0 1px 2px rgba(0,0,0,.04);padding:22px 24px;cursor:pointer;transition:.16s;display:flex;flex-direction:column;gap:16px;animation:fadeUp .3s}
.cli-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
.cli-top{display:flex;align-items:center;gap:12px}
.cli-ic{width:40px;height:40px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;letter-spacing:-.02em}
.cli-top .nm{flex:1;min-width:0;line-height:1.25}
.cli-top .nm b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.cli-top .nm span{font-size:12px;color:var(--t4)}
.cli-foot{display:flex;justify-content:space-between;border-top:1px solid var(--bd2);padding-top:14px}
.cli-foot div{display:flex;flex-direction:column;gap:2px}
.cli-foot .lbl{font-size:11.5px;color:var(--t4)}
.cli-foot .v{font-size:14px;font-weight:600}
.cli-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;border-top:1px solid var(--bd2);padding-top:14px}
.cli-metrics .m{display:flex;flex-direction:column;gap:2px;min-width:0}
.cli-metrics .m .lbl{font-size:11px;color:var(--t4);white-space:nowrap}
.cli-metrics .m .v{font-size:13.5px;font-weight:600;white-space:nowrap;display:flex;align-items:baseline;gap:5px}
.dm{font-size:10.5px;font-weight:600;flex-shrink:0}
.dm-good{color:var(--greenT)} .dm-bad{color:var(--redT)} .dm-neutral{color:var(--t5)}

.alert-card{background:#fff;border:1px solid var(--bd);border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.04);padding:16px 22px;display:flex;align-items:center;gap:16px;animation:fadeUp .25s}
.alert-card .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.alert-card .body .top{display:flex;align-items:center;gap:9px}
.alert-card .body .top b{font-size:14.5px;font-weight:600}
.alert-card .msg{font-size:13px;color:var(--t3);line-height:1.45}
.alert-time{font-size:12px;color:var(--t5);white-space:nowrap}
.btn-soft{background:var(--bg);border-radius:10px;padding:8px 14px;font-size:12.5px;font-weight:600;color:var(--t1);transition:.15s}
.btn-soft:hover{background:#ececf0}

.exec{display:flex;align-items:center;gap:12px;padding:12px 8px;border-bottom:1px solid var(--bd2)}
.exec .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.exec .body b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exec .body span{font-size:11.5px;color:var(--t5)}
.st{font-size:10.5px;font-weight:600;border-radius:6px;padding:2px 8px;white-space:nowrap}
.st-ok{color:var(--greenT);background:rgba(52,199,89,.14)}
.st-err{color:var(--redT);background:rgba(255,59,48,.12)}

.hero{background:linear-gradient(135deg,#0071e3,#0a84ff);border-radius:20px;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 8px 24px rgba(0,113,227,.22);color:#fff;flex-wrap:wrap}
.hero b{font-size:17px;font-weight:600;letter-spacing:-.01em;display:block}
.hero span{font-size:13px;opacity:.9}
.hero button{display:flex;align-items:center;gap:8px;background:#fff;color:var(--blue);border-radius:12px;padding:11px 18px;font-size:14px;font-weight:600;transition:.15s}
.hero button:hover{background:#f0f0f2}
.hero button svg{width:16px;height:16px}

.act-btns{display:flex;gap:9px;flex-wrap:wrap}
.act{background:var(--bg);border-radius:11px;padding:9px 15px;font-size:13px;font-weight:600;color:var(--t1);transition:.15s}
.act:hover{background:#ececf0}
.act.blue{background:var(--blue);color:#fff}
.act.blue:hover{background:var(--blueD)}
.act.line{background:#fff;border:1px solid var(--bd);color:var(--t2)}
.act.line:hover{background:var(--bg)}

select.op-sel{width:100%;background:var(--bg);border:1px solid #e2e2e7;border-radius:12px;padding:12px 15px;font-size:14px;color:var(--t1)}

.cobertura{display:none;background:rgba(255,159,10,.1);border:1px solid rgba(255,159,10,.3);color:#b25000;border-radius:14px;padding:11px 16px;font-size:13px;font-weight:600}
.cobertura.show{display:block}

.empty{text-align:center;padding:30px;color:var(--t4);font-size:13px}

/* MODAL */
.ovl{position:fixed;inset:0;background:rgba(0,0,0,.32);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:24px;animation:ovrl .2s}
.modal{width:560px;max-width:100%;max-height:84vh;overflow:auto;background:#fff;border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.28);padding:28px 30px;animation:pop .22s}
.modal-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.modal-tag{font-size:11px;font-weight:600;color:var(--blue);background:rgba(0,113,227,.1);border-radius:7px;padding:3px 9px;align-self:flex-start}
.modal-h h2{font-size:21px;font-weight:600;letter-spacing:-.02em;margin-top:7px}
.modal-x{width:34px;height:34px;border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--t3);flex-shrink:0;transition:.15s}
.modal-x:hover{background:#ececf0}
.modal-x svg{width:17px;height:17px}
.modal-body{font-size:14.5px;line-height:1.6;color:var(--t2);white-space:pre-wrap;word-wrap:break-word}
.modal-body table{width:100%;border-collapse:collapse;font-size:13px}
.modal-body th{text-align:left;padding:8px 6px;border-bottom:1px solid var(--bd);font-size:11px;text-transform:uppercase;color:var(--t4);letter-spacing:.03em}
.modal-body td{padding:8px 6px;border-bottom:1px solid var(--bd2)}

#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);opacity:0;background:var(--t1);color:#fff;border-radius:13px;padding:13px 22px;font-size:14px;font-weight:500;z-index:120;box-shadow:0 12px 32px rgba(0,0,0,.3);display:flex;align-items:center;gap:10px;transition:.3s}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1}
#toast svg{width:17px;height:17px}

/* ════════════ MENU LATERAL: BOTÃO + GAVETA ════════════ */
.btn-menu{display:flex;width:38px;height:38px;border-radius:10px;border:1px solid var(--bd);background:#fff;align-items:center;justify-content:center;color:var(--t2);flex-shrink:0;transition:.15s}
.btn-menu:hover{background:var(--bg)}
.btn-menu svg{width:20px;height:20px}
.drawer-ov{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55;opacity:0;pointer-events:none;transition:opacity .25s}

/* Desktop ≥1024px: recolher sidebar em trilho de ícones */
#view-app.side-collapsed .sidebar{width:64px;padding:20px 10px}
#view-app.side-collapsed .nav-item{font-size:0;justify-content:center;padding:11px 0;gap:0}
#view-app.side-collapsed .nav-pill{display:none}
#view-app.side-collapsed .side-brand{justify-content:center;padding:6px 0 22px}
#view-app.side-collapsed .side-brand>div:not(.logo){display:none}
#view-app.side-collapsed .side-foot{justify-content:center;flex-wrap:wrap}
#view-app.side-collapsed .side-foot .who{display:none}

/* ════════════ TABLET/MOBILE <1024px: gaveta deslizante ════════════ */
@media(max-width:1023px){
  #view-app{height:auto;min-height:100vh}
  .sidebar{position:fixed;left:0;top:0;height:100vh;z-index:60;width:250px!important;padding:20px 16px!important;transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:none}
  #view-app.drawer-open .sidebar{transform:translateX(0)}
  #view-app.drawer-open .sidebar{box-shadow:0 0 40px rgba(0,0,0,.18)}
  #view-app.drawer-open .drawer-ov{opacity:1;pointer-events:auto}
  #view-app.side-collapsed .nav-item{font-size:14px;justify-content:flex-start;padding:10px 12px;gap:11px}
  #view-app.side-collapsed .nav-pill{display:inline-block}
  #view-app.side-collapsed .side-brand>div:not(.logo),#view-app.side-collapsed .side-foot .who{display:block}
  .header{padding:14px 16px}
  .wrap{padding:18px 16px 60px}
  .card:has(.tbl-h){overflow-x:auto}
  .tbl-h,.tbl-r{min-width:560px}
}

/* ════════════ CELULAR <768px: 1 coluna, header quebra ════════════ */
@media(max-width:767px){
  .header{flex-wrap:wrap;gap:12px}
  .h-title{font-size:20px}
  .period{order:3;width:100%}
  .crange{left:0;right:auto;flex-wrap:wrap}
  .cli-grid{grid-template-columns:1fr}
  .card{padding:18px 16px}
  .kpi{padding:15px 15px 12px}
  .modal{padding:22px 18px}
  .hero{padding:18px 18px}
}
@media(max-width:520px){.grid-kpi{grid-template-columns:1fr 1fr}}
/* ═══════════ REDESIGN PAINEL CLIENTES (c2) ═══════════ */
/* Sidebar escura (handoff) */
.sidebar{background:#0E1116;border-right:1px solid #1C222B;width:232px;flex-shrink:0}
.side-brand b{color:#E8EAEE}
.side-brand span{color:#8A93A0}
.side-brand .logo{background:linear-gradient(140deg,#4C6EF5,#20A97B)}
.nav-item{color:#A7AFBC;border-radius:8px;font-weight:400}
.nav-item:hover{background:#191E26;color:#E8EAEE}
.nav-item.on{background:#1D2530;color:#fff;font-weight:500}
.nav-item.on svg{color:#7C9CFF}
.nav-pill{background:#33191C;color:#FF9A9A;font-family:var(--font);font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;border-radius:20px;padding:2px 7px}
.side-foot{border-top:1px solid #1C222B}
.side-foot .who b{color:#E8EAEE}
.side-foot .who span{color:#79828F}
.avatar{background:#232B36;color:#E8EAEE}
.icon-btn{color:#79828F}
.icon-btn:hover{background:#191E26;color:#fff}

/* Números usam a MESMA fonte da UI (var(--font) = SF Pro) + tabular-nums, que já garante a
   coluna alinhada. Mono aqui era decoração de protótipo e destoava do resto do painel. */
.c2{color:#10141A;animation:fadeUp .25s}
.c2-num{font-family:var(--font);letter-spacing:-.015em;text-align:right;font-variant-numeric:tabular-nums}
.c2-dm{font-size:10.5px;font-weight:500;margin-left:5px}
/* Faixa de KPIs */
.c2-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1px;background:#E3E6EB;border:1px solid #E3E6EB;border-radius:12px;overflow:hidden;margin:2px 0 16px}
.c2-kpi{background:#fff;padding:13px 16px 14px;display:flex;flex-direction:column;gap:5px}
.c2-kpi .kl{font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;color:#6B7280}
.c2-kpi .kv{font-family:var(--font);font-size:21px;font-weight:600;letter-spacing:-.022em;font-variant-numeric:tabular-nums}
.c2-kpi .ks{font-size:11.5px;color:#8B93A0}
/* Toolbar */
.c2-tools{display:flex;align-items:center;gap:10px;padding-bottom:14px;flex-wrap:wrap}
.c2-search{display:flex;align-items:center;gap:8px;width:250px;height:34px;border:1px solid #DDE1E7;border-radius:9px;background:#fff;padding:0 11px}
.c2-search svg{width:14px;height:14px;color:#8B93A0;flex-shrink:0}
.c2-search input{border:none;background:none;font-size:13px;width:100%;color:#10141A}
.c2-chip{display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:9px;font-size:12.5px;background:#fff;border:1px solid #DDE1E7;color:#4B5563;white-space:nowrap}
.c2-chip:hover{border-color:#B9C0CB}
.c2-chip.on{background:#10141A;border-color:#10141A;color:#fff}
.c2-chip .cd{width:7px;height:7px;border-radius:50%;flex-shrink:0}
/* Sem verba usa o mesmo vermelho do Crítico, mas vazado — a bolinha repete essa gramática */
.c2-chip.chip-semverba .cd{background:transparent!important;border:1.5px solid #D02B3E}
.c2-chip.chip-semverba.on .cd{border-color:#FF8A96}
.c2-chip .cc{font-family:var(--font);opacity:.62;font-size:11.5px;font-variant-numeric:tabular-nums}
.c2-sortwrap{display:flex;align-items:center;gap:8px;margin-left:auto}
.c2-sortwrap label{font-size:12.5px;color:#6B7280}
.c2-sortwrap select,.c2-btn{height:34px;border:1px solid #DDE1E7;border-radius:9px;font-size:13px;background:#fff;color:#303844;padding:0 11px}
.c2-btn{display:flex;align-items:center;gap:6px;font-weight:550}
.c2-btn:hover{border-color:#B9C0CB}
.c2-btn svg{width:14px;height:14px}
.c2-btn.prim{background:#3B5BDB;border-color:#2C3B8F;color:#fff}
.c2-btn.prim:hover{background:#3350C4}
.c2-viewseg{display:flex;gap:0;background:#EAECF0;border-radius:9px;padding:3px}
.c2-viewseg button{height:28px;padding:0 12px;border-radius:7px;font-size:12.5px;color:#6B7280}
.c2-viewseg button.on{background:#fff;font-weight:600;color:#10141A;box-shadow:0 1px 2px rgba(16,20,26,.12)}
/* Tabela */
.c2-tblwrap{background:#fff;border:1px solid #E3E6EB;border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(16,20,26,.04)}
.c2-scroll{overflow-x:auto}
.c2-tbl{--cols:30px minmax(215px,1.5fr) 104px 96px 78px 108px 118px 84px 92px 78px 104px 104px 92px 60px;min-width:1560px}
.c2-thead,.c2-row{display:grid;grid-template-columns:var(--cols);gap:12px;padding:0 16px;align-items:center}
.c2-thead{height:40px;background:#F8F9FB;border-bottom:1px solid #E3E6EB;position:sticky;top:0;z-index:2}
.c2-thead span{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.045em;color:#79818E}
.c2-thead .rt{text-align:right}
.c2-row{padding:11px 16px;border-bottom:1px solid #EFF1F4;background:#fff;transition:background .12s;cursor:pointer}
.c2-row:hover{background:#FAFBFC}
.c2-row.sel{background:#F3F6FF}
.c2-row.crit{box-shadow:inset 3px 0 0 #E0384C}
.c2-cli{display:flex;align-items:center;gap:10px;min-width:0}
.c2-av{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:650;flex-shrink:0}
.c2-nm{min-width:0}
.c2-nm b{font-size:13.5px;font-weight:550;letter-spacing:-.01em;line-height:1.25;text-wrap:pretty;display:block}
.c2-nm span{font-size:11.5px;color:#8B93A0}
/* --sbg/--sc vinham do protótipo e nunca foram definidas → o pill saía sem fundo e sem
   bolinha (texto solto). Cada status define o seu par aqui. */
.c2-pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 7px;border:1px solid transparent;border-radius:6px;font-size:11.5px;font-weight:600;background:var(--sbg,#F1F3F6);color:var(--sc,#4B5563)}
.c2-pill .pd{width:6px;height:6px;border-radius:50%;background:var(--sc,#4B5563)}
.c2-pill.st-critico {--sbg:#FCE8EB;--sc:#C41F32}
.c2-pill.st-atencao {--sbg:#FDF3E0;--sc:#9A6608}
.c2-pill.st-saudavel{--sbg:#E4F5EC;--sc:#0E7A4B}
/* Sem verba = vermelho VAZADO: chama o olho sem se confundir com Crítico (sólido),
   que é "está rodando e queimando dinheiro". Aqui é "não está rodando". */
.c2-pill.st-semverba{--sbg:#FEF4F5;--sc:#C41F32;border-color:#F3C4CB}
.c2-pill.st-inativo {--sbg:#F1F3F6;--sc:#6B7280}
/* Faixa lateral: Crítico sólido, Sem verba pontilhado (mesma família, pesos diferentes) */
.c2-row.semverba{box-shadow:inset 3px 0 0 #F3AAB4}
.c2-card.semverba{box-shadow:inset 3px 0 0 #F3AAB4,0 1px 2px rgba(16,20,26,.04)}
.c2-row.inativo,.c2-card.inativo{opacity:.78}
.c2-spark{display:block}
.c2-roas b{font-family:var(--font);font-size:13.5px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.c2-roas .c2-dm{display:block;margin:1px 0 0}
.c2-sub{font-size:11px;color:#4B5563}
.c2-cr{width:34px;height:34px;border-radius:7px;border:1px solid #E3E6EB;display:flex;align-items:center;justify-content:center;position:relative;margin-left:auto;overflow:hidden;background:#F4F6F8}
.c2-cr img{width:100%;height:100%;object-fit:cover;display:block}
.c2-cr svg{width:14px;height:14px;color:#7C8595}
.c2-cr.clicavel{cursor:zoom-in;transition:transform .12s,box-shadow .12s}
.c2-cr.clicavel:hover{transform:scale(1.1);box-shadow:0 3px 10px rgba(16,20,26,.2);z-index:1}
.c2-cr .vd{position:absolute;left:2px;bottom:2px;width:11px;height:11px;border-radius:50%;background:rgba(16,20,26,.72);display:flex;align-items:center;justify-content:center}
.c2-cr .vd svg{width:6px;height:6px;color:#fff}
.c2-cr.carregando{background:linear-gradient(90deg,#EEF0F3 25%,#F6F7F9 50%,#EEF0F3 75%);background-size:200% 100%;animation:sk 1.1s infinite}
.c2-cr .cb{position:absolute;right:-5px;bottom:-5px;width:15px;height:15px;border-radius:50%;background:#10141A;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;font-family:var(--font);font-weight:600}
.c2-ck{width:15px;height:15px;accent-color:#3B5BDB;cursor:pointer}
/* Cards */
.c2-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.c2-card{background:#fff;border:1px solid #E3E6EB;border-radius:14px;padding:15px 16px 14px;box-shadow:0 1px 2px rgba(16,20,26,.04);cursor:pointer}
.c2-card.sel{border-color:#B9C7F5}
.c2-card.crit{box-shadow:inset 3px 0 0 #E0384C,0 1px 2px rgba(16,20,26,.04)}
.c2-card-top{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.c2-card-top .c2-av{width:34px;height:34px;border-radius:9px}
.c2-card-top .c2-nm b{font-size:14.5px;font-weight:600;letter-spacing:-.015em}
.c2-roasblk{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.c2-roasblk .rl{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:#79818E;margin-bottom:2px}
.c2-roasblk .rv{font-family:var(--font);font-size:26px;font-weight:600;letter-spacing:-.026em;font-variant-numeric:tabular-nums}
.c2-cardmetrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 12px;border-top:1px solid #EDEFF3;padding-top:13px}
.c2-cardmetrics .cm-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.025em;color:#8B93A0}
.c2-cardmetrics .cm-v{font-family:var(--font);font-size:14px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:2px;white-space:nowrap}
/* Delta em linha própria: em coluna de ~100px ele quebrava no meio e desalinhava o card */
.c2-cardmetrics .cm-v .c2-dm{display:block;margin:1px 0 0}
.c2-cardfoot{display:flex;align-items:center;justify-content:space-between;margin-top:13px;border-top:1px solid #EDEFF3;padding-top:12px}
.c2-cardfoot .fl{font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:#8B93A0}
.c2-thumbs{display:flex;gap:6px;align-items:center}
.c2-thumb{width:34px;height:34px;border-radius:7px;border:1px solid #E3E6EB;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;background:#F4F6F8;flex-shrink:0;padding:0}
.c2-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.c2-thumb svg{width:13px;height:13px;color:#7C8595}
.c2-thumb.clicavel{cursor:zoom-in;transition:transform .12s,box-shadow .12s}
.c2-thumb.clicavel:hover{transform:scale(1.08);box-shadow:0 3px 10px rgba(16,20,26,.2);border-color:#B9C0CB;z-index:1}
/* Marca de vídeo: sem ela, um frame parado se passa por anúncio de imagem */
.c2-thumb .vd{position:absolute;right:2px;bottom:2px;width:11px;height:11px;border-radius:50%;background:rgba(16,20,26,.72);display:flex;align-items:center;justify-content:center}
.c2-thumb .vd svg{width:6px;height:6px;color:#fff}
.c2-thumb.carregando{background:linear-gradient(90deg,#EEF0F3 25%,#F6F7F9 50%,#EEF0F3 75%);background-size:200% 100%;animation:sk 1.1s infinite;border-color:#EDEFF3}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
.c2-thumbs .mais{font-size:11px;color:#79818E;margin-left:2px;white-space:nowrap}
.c2-cardfoot .vazio{font-size:11.5px;color:#9AA1AC}
/* Modal de prévia do criativo */
.cr-prev{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}
@media(max-width:720px){.cr-prev{grid-template-columns:1fr}}
.cr-prev .quadro{position:relative;border:1px solid #E3E6EB;border-radius:14px;overflow:hidden;background:#F4F6F8;min-height:360px;display:flex;align-items:center;justify-content:center}
.cr-prev .quadro iframe{width:320px;height:560px;border:0;display:block}
.cr-prev .quadro img{width:100%;display:block}
.cr-met{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:14px 0 16px}
.cr-met .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:#8B93A0}
.cr-met .v{font-size:16px;font-weight:600;letter-spacing:-.015em;font-variant-numeric:tabular-nums;margin-top:2px}
/* Barra de seleção */
.c2-selbar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:14px;background:#10141A;color:#fff;border-radius:12px;padding:10px 12px 10px 18px;box-shadow:0 12px 32px rgba(16,20,26,.28);animation:pop .2s}
.c2-selbar .sn{font-size:13px}
.c2-selbar .sdiv{width:1px;height:20px;background:#2A313C}
.c2-selbar .cmp{height:32px;padding:0 14px;border-radius:8px;background:#3B5BDB;color:#fff;font-size:13px;font-weight:550}
.c2-selbar .cmp:hover{background:#4C6BE8}
.c2-selbar .clr{color:#A7AFBC;font-size:13px}
.c2-selbar .clr:hover{color:#fff}
/* Modal de comparação */
.c2-cmp-ovl{position:fixed;inset:0;z-index:80;background:rgba(16,20,26,.42);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:40px;animation:ovrl .18s}
.c2-cmp{background:#fff;border-radius:16px;max-width:1080px;width:100%;max-height:100%;overflow:auto;box-shadow:0 24px 60px rgba(16,20,26,.3)}
.c2-cmp-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;position:sticky;top:0;background:#fff;border-bottom:1px solid #E3E6EB;z-index:2}
.c2-cmp-h h2{font-size:17px;font-weight:600;letter-spacing:-.02em}
.c2-cmp-h p{font-size:12.5px;color:#79818E;margin-top:2px}
.c2-cmp-x{width:30px;height:30px;border:1px solid #E3E6EB;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#6B7280}
.c2-cmp-x:hover{background:#F8F9FB}
.c2-cmp-body{padding:16px 22px 24px}
.c2-cmp-grid{display:grid;gap:14px}
.c2-cmp-row{display:contents}
.c2-cmp-cell{padding:9px 0;border-top:1px solid #F0F2F5;font-family:var(--font);font-size:14.5px;font-weight:600;letter-spacing:-.012em;font-variant-numeric:tabular-nums}
.c2-cmp-cell.lbl{font-family:var(--font);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:#79818E}
.c2-cmp-cell.top{border-top:1px solid #E3E6EB}
.c2-nota{background:#F5F6F8;border:1px solid #E3E6EB;border-radius:10px;padding:10px 13px;margin-bottom:12px;font-size:12.5px;line-height:1.45;color:#5B6470}
/* ═══════════ ABA CRIATIVOS ═══════════ */
.cv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:16px}
.cv-card{background:#fff;border:1px solid #E3E6EB;border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(16,20,26,.04);display:flex;flex-direction:column}
.cv-card:hover{border-color:#C9D0DA;box-shadow:0 4px 14px rgba(16,20,26,.09)}
.cv-img{position:relative;aspect-ratio:9/16;background:#EEF0F3;cursor:zoom-in;overflow:hidden}
.cv-img img{width:100%;height:100%;object-fit:cover;display:block}
.cv-img .semimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#A7AEB9;font-size:12px}
/* Véu por trás das ações: o criativo pode ser claro ou escuro, e sem ele os botões somem
   em foto clara. Aparece só no hover, junto com eles. */
.cv-img::after{content:'';position:absolute;inset:0 0 auto 0;height:96px;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,20,26,.42),rgba(16,20,26,0));opacity:0;transition:opacity .14s}
.cv-card:hover .cv-img::after{opacity:1}
/* Ações aparecem no hover mas ficam SEMPRE visíveis no toque — em tablet não há hover */
.cv-acts{position:absolute;right:8px;top:8px;z-index:2;display:flex;flex-direction:column;gap:6px;opacity:0;transition:opacity .14s}
.cv-card:hover .cv-acts{opacity:1}
@media(hover:none){.cv-acts{opacity:1}.cv-img::after{opacity:1}}
.cv-act{width:31px;height:31px;border-radius:9px;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border:1px solid rgba(16,20,26,.12);display:flex;align-items:center;justify-content:center;color:#252B35;box-shadow:0 2px 8px rgba(16,20,26,.28)}
.cv-act:hover{background:#fff;color:#0071e3;transform:scale(1.07)}
.cv-act svg{width:15px;height:15px}
.cv-act.ocupado{opacity:.5;pointer-events:none}
.cv-rank{position:absolute;left:8px;top:8px;z-index:2;height:21px;min-width:21px;padding:0 6px;border-radius:6px;background:rgba(16,20,26,.76);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.cv-tipo{position:absolute;left:8px;bottom:8px;z-index:2;height:19px;padding:0 7px;border-radius:5px;background:rgba(16,20,26,.7);color:#fff;font-size:10px;font-weight:600;display:flex;align-items:center;gap:4px}
.cv-tipo svg{width:8px;height:8px}
.cv-body{padding:11px 12px 12px;display:flex;flex-direction:column;gap:9px;flex:1}
.cv-cli{display:flex;align-items:center;gap:7px}
.cv-cli .c2-av{width:20px;height:20px;border-radius:6px;font-size:8.5px}
.cv-cli b{font-size:11.5px;font-weight:600;color:#4B5563}
.cv-nome{font-size:12.5px;font-weight:600;line-height:1.35;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.cv-nums{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;border-top:1px solid #EFF1F4;padding-top:9px;margin-top:auto}
.cv-nums .l{font-size:9.5px;text-transform:uppercase;letter-spacing:.03em;color:#8B93A0}
.cv-nums .v{font-size:13px;font-weight:600;letter-spacing:-.012em;font-variant-numeric:tabular-nums;margin-top:1px}
.cv-vazio{grid-column:1/-1;text-align:center;padding:60px 0}
.cv-vazio b{font-size:15px;font-weight:600;display:block}
.cv-vazio span{font-size:13px;color:#79818E}
.cv-sk{aspect-ratio:9/16;border-radius:14px;background:linear-gradient(90deg,#EEF0F3 25%,#F6F7F9 50%,#EEF0F3 75%);background-size:200% 100%;animation:sk 1.1s infinite}
.c2-empty2{text-align:center;padding:70px 0}
.c2-empty2 b{font-size:15px;font-weight:550;display:block}
.c2-empty2 span{font-size:13px;color:#79818E}
@media(max-width:1023px){.c2-viewseg{display:none}}

/* METAS (ritmo do mês) */
.mt-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.mt-mes{display:flex;align-items:center;gap:2px;background:var(--card);border:1px solid var(--bd);border-radius:11px;padding:3px}
.mt-mes button{width:30px;height:28px;border-radius:8px;color:var(--t3);display:flex;align-items:center;justify-content:center;font-size:15px}
.mt-mes button:hover{background:var(--fld);color:var(--t1)}
.mt-mes b{font-size:13px;font-weight:600;padding:0 10px;min-width:104px;text-align:center}
.mt-gloss{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:12px 14px;margin-bottom:14px}
.mt-gloss-h{font-size:12px;color:var(--t4);margin-bottom:9px}
.mt-chips{display:flex;flex-wrap:wrap;gap:7px}
.mt-chip{display:flex;align-items:center;gap:6px;background:var(--fld);border-radius:9px;padding:6px 11px;font-size:12px;color:var(--t2);cursor:pointer;transition:background .15s}
.mt-chip:hover{background:#e6e6ea}
.mt-chip.on{background:#e7f0fe;color:var(--blueD)}
.mt-chip svg{width:13px;height:13px;flex:none}
.mt-def{margin-top:10px;padding-top:10px;border-top:1px solid var(--bd);font-size:13px;color:var(--t2);line-height:1.65}
.mt-def b{font-weight:600;color:var(--t1)}
.mt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:13px}
.mt-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:15px 16px;animation:fadeUp .25s}
.mt-card-h{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.mt-card-h b{font-size:14.5px;font-weight:600;letter-spacing:-.01em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:7px;white-space:nowrap}
.mt-b-ad{background:#e6f7ec;color:var(--greenT)}
.mt-b-ok{background:#fff4e0;color:#a35b00}
.mt-b-at{background:#ffe9ec;color:var(--redT)}
.mt-b-no{background:var(--fld);color:var(--t4)}
.mt-bars{margin-bottom:12px}
.mt-brow{display:flex;justify-content:space-between;font-size:11.5px;color:var(--t4);margin-bottom:3px}
.mt-track{height:9px;background:var(--fld);border-radius:5px;overflow:hidden;margin-bottom:7px}
.mt-fill{height:100%;border-radius:5px;transition:width .35s}
.mt-nums{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mt-n{background:var(--fld);border-radius:10px;padding:8px 10px}
.mt-n span{font-size:11px;color:var(--t4);display:block}
.mt-n b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.mt-foot{margin-top:10px;padding-top:9px;border-top:1px solid var(--bd);display:flex;align-items:center;gap:8px;font-size:11px;color:var(--t5)}
.mt-foot button{font-size:11px;color:var(--blue);font-weight:500}
.mt-foot button:hover{text-decoration:underline}
.mt-fonte{font-size:11px;color:var(--t5);margin-top:14px;line-height:1.6}

/* ════════════ LEGIBILIDADE INTEGRADA · SIS-003 ════════════
   Camada aditiva: preserva componentes e comportamento, mas aproxima a leitura dos KPIs
   da faixa editorial aprovada na réplica. Números usam algarismos tabulares em todo o painel. */
.wrap{width:100%;max-width:1760px;margin:0 auto}
.kpi-val,.c2-num,.c2-kpi .kv,.mt-n b,.bar-row .vl,.tbl-r,.exec{
  font-variant-numeric:tabular-nums lining-nums;
}
.grid-kpi-overview{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.kpi{
  min-height:184px;padding:24px 26px 18px;gap:9px;border-radius:22px;
  border-color:#dfe2e7;box-shadow:0 1px 2px rgba(16,24,40,.035),0 10px 30px rgba(16,24,40,.025);
}
.kpi-label{font-size:14.5px;line-height:1.3;color:#7b8492;font-weight:560;letter-spacing:-.01em}
.kpi-val{font-size:32px;line-height:1.12;font-weight:650;letter-spacing:-.042em}
.kpi-sub{font-size:12.5px;line-height:1.4;color:#637083;min-height:18px}
.kpi .spark{height:34px;margin-top:auto}
.kpi .badge{font-size:12px;padding:3px 8px}
.card{border-color:#e1e4e9;box-shadow:0 1px 2px rgba(16,24,40,.035)}
.card-t{font-size:16px;font-weight:650;letter-spacing:-.018em}
.card-s{font-size:12.5px;line-height:1.45}

/* A faixa de Clientes usa a mesma escala dos KPIs principais, sem alterar sua tabela. */
.c2-kpis{grid-template-columns:repeat(5,minmax(0,1fr));border-radius:16px;margin-bottom:18px}
.c2-kpi{padding:21px 22px 20px;gap:7px;min-height:132px;justify-content:center}
.c2-kpi .kl{font-size:14px;text-transform:none;letter-spacing:-.008em;color:#7b8492}
.c2-kpi .kv{font-size:30px;line-height:1.12;font-weight:650;letter-spacing:-.038em}
.c2-kpi .ks{font-size:12.5px;line-height:1.4;color:#637083}

/* O reset antigo removia o indicador de foco. Teclado volta a ter um estado inequívoco. */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid rgba(0,113,227,.34);outline-offset:3px;
}

@media(max-width:1599px){.grid-kpi-overview{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1250px){
  .grid-kpi-overview{grid-template-columns:repeat(3,minmax(0,1fr))}
  .c2-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:800px){
  .grid-kpi-overview,.c2-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{min-height:164px;padding:19px 18px 15px}
  .kpi-val{font-size:27px}
  .c2-kpi{min-height:116px;padding:17px 16px}
  .c2-kpi .kv{font-size:25px}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CELULAR — camada visual (22/08/2026)
   Só aparência e disposição. Nenhum dado, cálculo, rota ou regra foi tocado: a barra
   de comparação usa o mesmo percentual que já alimentava o badge, e as abas de baixo
   chamam o `goNav` que já existia. Tudo vive dentro de @media(max-width:767px) — acima
   disso o painel continua exatamente como estava.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* A barra de comparação existe no HTML em qualquer tamanho, mas no computador quem
   informa é a série de 30 dias. Duas leituras da mesma coisa lado a lado é ruído. */
.kpi-cmp{display:none}

@media(max-width:767px){
  :root{ --tinta-topo:#07111A; --ciano:#12D9B2; }
  body,#view-app{background:#F5F6F8}

  /* ── cabeçalho escuro ───────────────────────────────────────────────────────
     O período fica DENTRO da faixa escura: ele mudou de lugar em relação ao
     computador, mas não de função — continua sendo o primeiro controle da tela. */
  .header{
    background:linear-gradient(180deg,#07111A 0%,#0D1823 100%);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom:0;padding:14px 16px 13px;gap:13px;
    border-radius:0 0 20px 20px;
  }
  .h-title{color:#fff;letter-spacing:-.028em}
  .h-sub{color:#A7B0BC}
  .header .btn-menu,.header .btn-back{color:#E8EDF3}
  .header .btn-back{background:rgba(255,255,255,.09);border-color:transparent}

  /* No cabeçalho escuro do celular o botão de período veste o vidro claro. */
  .pcal{background:rgba(255,255,255,.10);border-color:transparent;color:#E8EDF3;
    width:100%;justify-content:center;padding:10px 14px;font-size:14px;border-radius:12px}
  .pcal.on{border-color:transparent;color:var(--ciano)}
  .period{position:relative}
  .pmenu{left:0;right:0;min-width:0}
  .crange{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;
    border:1px solid var(--bd);border-radius:14px;padding:12px;z-index:40;
    box-shadow:0 12px 34px rgba(16,24,40,.16)}
  .pcal.on{border-color:var(--ciano);color:var(--ciano)}
  .pcal svg{opacity:.85}

  /* ── página ─────────────────────────────────────────────────────────────────
     O respiro do rodapé é o que impede a barra de baixo de comer o último card:
     92px da barra + a faixa do iPhone sem botão físico. */
  .wrap{padding:16px 16px calc(92px + env(safe-area-inset-bottom));gap:20px}
  .card{border-radius:18px;border-color:#E7E9EE;box-shadow:0 1px 2px rgba(16,24,40,.04);
    padding:18px 16px}
  .cobertura{border-radius:14px}

  /* Card dentro de card. O gráfico do cliente já vem embrulhado num `.card` e é
     embrulhado outra vez por quem o insere — resultado: duas bordas e 32px de recheio
     repetido de cada lado. Num celular de 390px é quase um quinto da largura gasto em
     moldura duplicada, e o gráfico é justamente o que precisa de espaço. */
  .card .card{border:0;box-shadow:none;padding:0;border-radius:0;background:transparent}

  /* ── números: duas colunas ──────────────────────────────────────────────── */
  .grid-kpi,.grid-kpi-overview,.c2-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
  /* A altura mínima de 164px (regra dos 800px) existia para caber o minigráfico de 34px.
     Sem ele, ela só produzia um buraco branco no meio do card. */
  .kpi{border-radius:16px;border-color:#E7E9EE;box-shadow:0 1px 2px rgba(16,24,40,.04);
    padding:14px 14px 13px;gap:6px;min-height:116px}
  .kpi-label{font-size:12.5px;line-height:1.25;color:#7A8595;font-weight:560}
  .kpi-val{font-size:24px;letter-spacing:-.035em}
  .kpi-sub{display:none}          /* a procedência continua no `title`, ao toque longo */
  .badge{font-size:10.5px;padding:2px 6px}

  /* O minigráfico sai: 34px de altura em card de meia tela vira rabisco, e a
     pergunta do celular é "melhorou ou piorou desde o período passado", não a
     forma da curva. Quem quiser a curva abre no computador. */
  .kpi .spark{display:none}

  /* `margin-top:auto` empurra a barra para o rodapé do card. Como o grid estica os
     dois cards da linha à mesma altura, sem isto um valor que quebra em duas linhas
     deixaria a barra do vizinho boiando no meio — e barras desalinhadas não se
     comparam de relance, que é a única coisa que elas existem para fazer. */
  .kpi-cmp{display:block;margin-top:auto;padding-top:6px}
  .kpi-cmp-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px;
    margin-bottom:5px}
  .kpi-cmp-top span:first-child{font-size:10.5px;color:#9AA3AF;letter-spacing:-.005em}
  .kpi-cmp-pct{font-size:11px;font-weight:650;color:#5B6675;font-variant-numeric:tabular-nums}
  .kpi-bar{height:6px;border-radius:99px;background:#EDEFF3;overflow:hidden}
  .kpi-bar i{display:block;height:100%;border-radius:99px;background:#C7CDD6;
    transition:width .5s cubic-bezier(.4,0,.2,1)}
  .kpi-bar.b-good i{background:var(--ciano)}
  .kpi-bar.b-bad i{background:#FF5A73}
  .kpi-bar.b-neutral i{background:#8FA0B4}
  /* Quando não há período anterior — é o caso da tela do cliente, que não recebe
     comparação — a barra não tem o que dizer. Aí o minigráfico VOLTA: trocar informação
     por um aviso de ausência seria piorar a tela em vez de simplificá-la.
     `:has()` já é usado neste arquivo (`.card:has(.tbl-h)`), então não é recurso novo. */
  .kpi-cmp-vazio{display:none}
  .kpi:has(.kpi-cmp-vazio) .spark{display:block;height:30px;margin-top:auto}

  /* ── módulos grandes: um por linha, sempre ──────────────────────────────────
     Funil, Receita por cliente, Alertas e Últimas execuções vinham em pares. Lado a
     lado num celular, cada um fica com ~160px e nenhum dos dois se lê. */
  .cols-2,.cols-2-1,.cli-grid{grid-template-columns:minmax(0,1fr)!important;gap:16px}
  /* um cliente por linha: o card tem nome, status e as métricas empilhadas */
  .c2-cards{grid-template-columns:1fr!important;gap:12px}

  /* "Passe o mouse" num celular manda fazer o que não dá — e os botões já aparecem
     sozinhos onde não há cursor (regra @media(hover:none) mais acima).
     Os seletores levam `.c2-nota` na frente porque a regra do computador vive no fim do
     arquivo: com a mesma especificidade, a última venceria mesmo dentro desta media. */
  /* Formulário de duas colunas: campos de data e número têm largura mínima PRÓPRIA do
     navegador e não encolhem, então a segunda coluna saía pela borda da tela — os campos
     "Quem está lançando" e "Pedidos pagos" ficavam metade fora. Uma coluna resolve. */
  .grade2{grid-template-columns:1fr!important}
  .fld input,.fld select{min-width:0;max-width:100%}

  .c2-nota .so-mouse{display:none}
  .c2-nota .so-toque{display:inline}

  /* Situação no celular: a pergunta é "rodou e deu certo?". Ficam Tarefa, Status e
     Quando — e a tabela para de exigir arrasto lateral para chegar ao Status, que era
     justamente a coluna que respondia à pergunta. Cliente vem vazio na maioria das
     linhas e Duração é detalhe de investigação; as duas voltam no computador. */
  .t-sit{grid-template-columns:1.5fr .9fr 1fr!important;min-width:0!important}
  .t-sit > *:nth-child(2), .t-sit > *:nth-child(3){display:none}
  .card:has(.t-sit){overflow-x:visible}

  /* ── barra de navegação ─────────────────────────────────────────────────── */
  .tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:55;
    display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-top:1px solid rgba(0,0,0,.06);
    padding:7px 6px calc(7px + env(safe-area-inset-bottom));
  }
  /* as abas herdam .nav-item da barra lateral só para o `goNav` acender a certa —
     a aparência é toda refeita aqui */
  .tabbar .nav-item,.tabbar .tab{
    display:flex!important;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;background:none!important;border:0;padding:5px 2px;border-radius:12px;
    font-size:10px;font-weight:600;letter-spacing:-.005em;color:#7A8595;width:100%;
  }
  /* ⚠️ Esta regra precisa existir, e o motivo não é estético.
     `.tabbar .nav-item` acima usa `display:flex!important` — com !important dos dois lados,
     quem decide é a especificidade, e (0,2,0) ganha do `.hidden` global, que é (0,1,0).
     Resultado: `classList.add('hidden')` era aplicado, o DOM mostrava a classe lá, e a aba
     continuava na tela. Foi assim que o cliente ficou com "Visão Geral" e "Clientes" no
     rodapé do celular depois da mudança de 27/08/2026, com o filtro de papel funcionando
     perfeitamente e sem efeito nenhum. */
  .tabbar .nav-item.hidden,.tabbar .tab.hidden{display:none!important}
  .tabbar .tab svg{width:21px;height:21px;flex:0 0 21px}
  .tabbar .nav-item.on{color:#12CDB0}
  .tabbar .nav-item.on svg{stroke-width:2.1}
  .tabbar .nav-pill{display:none}

  .tab-add{
    justify-self:center;width:54px;height:54px;border-radius:50%;
    background:#07111A;color:var(--ciano);display:grid;place-items:center;
    margin-top:-20px;box-shadow:0 6px 16px rgba(7,17,26,.28);border:3px solid #fff;
  }
  .tab-add svg{width:23px;height:23px}
  .tab-add:active{transform:scale(.94)}

  /* Quem entra como cliente não pode ver — nem desativada — a navegação da agência. */
  /* A barra do celular já não é escondida do cliente: desde 27/08/2026 ela carrega os
     itens DELE (Meus Números, Ferramentas, Mais), filtrados por `data-papeis`. Escondê-la
     era necessário quando ela levava só a telas de administração. */
  body.modo-cliente .wrap{padding-bottom:40px}
}

/* Acima de 767px a barra de baixo não existe. */
@media(min-width:768px){ .tabbar{display:none} }

/* ═══════════ NÍVEIS DE ACESSO (22/08/2026) ═══════════
   Quem entra como `equipe` não dispara a carteira inteira nem cria cliente. Esconder o
   botão é cortesia — evita o clique que só receberia um 403. A recusa de verdade está
   no servidor (`exigirDono` em api/lib/chaves.js), e é ela que vale: interface some,
   requisição não. */
body.papel-equipe .so-dono{display:none!important}

/* A barra de baixo é navegação DENTRO do painel. Na tela de login não há para onde
   navegar — e ela aparecendo ali sugere que existe algo acessível sem entrar. */
#view-app.hidden ~ .tabbar{display:none}

/* ═══════════ MENU DO PERÍODO (22/08/2026) ═══════════ */
.pmenu{position:absolute;top:calc(100% + 8px);right:0;z-index:40;min-width:210px;
  background:#fff;border:1px solid var(--bd);border-radius:14px;padding:6px;
  box-shadow:0 12px 34px rgba(16,24,40,.16);display:flex;flex-direction:column;gap:2px}
.pmenu.hidden{display:none}
.pmenu button{text-align:left;padding:11px 13px;border-radius:10px;font-size:14.5px;
  font-weight:550;color:var(--t1);display:flex;align-items:center;justify-content:space-between}
.pmenu button:hover{background:var(--fld)}
.pmenu button.on{color:var(--blue);font-weight:650}
.pmenu button.on::after{content:'✓';font-weight:700}

/* No computador vale o inverso: existe cursor, e o texto fala de passar o mouse. */
.so-toque{display:none}

/* ═══════════ MARCA DA FONTE (22/08/2026) ═══════════
   Quadradinho escuro com a marca dentro, no mesmo espírito dos ícones de aplicativo.
   `currentColor` nas marcas monocromáticas (Meta, Olist, Bagy) deixa o traço branco
   sobre o fundo escuro; GA4 e Google Ads trazem as próprias cores. */
.fonte-marca{width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:#111418;
  display:grid;place-items:center;color:#fff;box-shadow:0 1px 2px rgba(16,24,40,.18);
  overflow:hidden}
.fonte-marca svg{width:16px;height:16px;display:block}
/* A arte já vem com o próprio quadrado escuro e o brilho da borda: ela preenche o
   espaço inteiro, sem margem por dentro que a faria parecer menor do que é. */
.fonte-marca img{width:100%;height:100%;display:block;object-fit:cover}

/* ═══════════ ALERTAS DENTRO DE OPERAÇÕES (22/08/2026) ═══════════
   Trinta e cinco alertas empilhados empurravam as ações da tela para baixo da dobra —
   quem vinha executar alguma coisa tinha que rolar por toda a lista antes de achar o
   botão. O bloco ganha altura própria e rola por dentro: continua em primeiro, sem
   enterrar o resto. */
#ope-alertas{max-height:340px;overflow-y:auto;padding-right:4px}
#ope-alertas .alert-card:last-child{border-bottom:0}
@media(max-width:767px){ #ope-alertas{max-height:300px} }

/* ═══════════ SUBABAS DO CLIENTE (22/08/2026) ═══════════
   Dia a dia, Criativos e Outros canais saíram do menu principal e viraram subabas aqui
   dentro. Ficam grudadas no topo ao rolar: numa tela que empilha KPIs, gráficos, mapa e
   histórico, a barra de navegação some da vista logo no primeiro gesto — e sem ela a
   pessoa rola de volta até em cima só para trocar de aba. */
.dsub{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:4px;
  position:sticky;top:74px;z-index:15}
.dsub::-webkit-scrollbar{display:none}
/* Variante SEM sticky: seletores de visão (ex.: pílulas da aba Canais) rolam junto com a
   página — grudados, cobriam o título do card logo abaixo. */
.dsub.dsub-solta{position:static;top:auto}
.dsub-b{flex:0 0 auto;height:34px;padding:0 15px;border-radius:9px;white-space:nowrap;
  font-size:13.5px;font-weight:500;color:var(--t3);transition:.15s}
.dsub-b:hover{color:var(--t1);background:var(--bd2)}
.dsub-b.on{background:#10141A;color:#fff;font-weight:600}
.dsub-b.on:hover{background:#10141A;color:#fff}

@media(max-width:767px){
  /* No celular o cabeçalho é mais baixo e a barra de período fica logo abaixo dele —
     colar as subabas na mesma altura do computador as esconderia atrás do período. */
  .dsub{top:60px;border-radius:0;border-left:0;border-right:0;margin:0 -16px;padding:6px 16px}
  .dsub-b{height:36px;padding:0 14px;font-size:13px}
}

/* O "+" da barra do celular rola até o bloco de lançar receita. O cabeçalho é fixo, e
   `block:'start'` não sabe disso: sem esta margem o título do bloco e o rótulo "Cliente"
   param DEBAIXO da barra do topo, e a pessoa cai no meio de um formulário sem ver o que
   está preenchendo. A margem é a altura do cabeçalho, que é maior no celular. */
#op-receita{scroll-margin-top:92px}
@media(max-width:767px){ #op-receita{scroll-margin-top:132px} }

/* ═══════════ DIAGNÓSTICO EM TIRA (22/08/2026) ═══════════
   Era um cartão de ~600px no alto da tela do cliente, antes dos números. Virou uma linha
   de 46px: quantos sinais, quanto custa por dia, e o detalhe atrás de um toque. Sem sinal
   nenhum a tira não é desenhada — ver `diagnosticoTira` em js/cards.js. */
.diag-tira{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--bd);border-radius:12px;
  padding:0 14px;height:46px;transition:.15s;color:var(--t2)}
.diag-tira:hover{border-color:#d8dade}
.diag-tira .dp{width:8px;height:8px;border-radius:50%;background:#ff9f0a;flex:none}
.diag-tira.grave .dp{background:#ff3b30}
.diag-tira .dt{font-size:13.5px;font-weight:600;color:var(--t1);white-space:nowrap}
.diag-tira .dv{font-size:12.5px;color:var(--t3);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.diag-tira .dc{width:17px;height:17px;flex:none;color:var(--t4);transition:transform .18s}
.diag-tira.aberta .dc{transform:rotate(180deg)}
/* Tentei encostar o cartão na tira (cantos retos, borda de baixo transparente). O `#wrap`
   separa os filhos com espaçamento próprio, então o cartão NÃO encosta — e a tira ficava
   com um lado sem borda, parecendo defeito. A tira mantém a borda inteira e o detalhe é um
   cartão normal logo abaixo. */

@media(max-width:767px){
  /* No celular o "R$ 31/dia em risco" é o que decide se vale abrir — ele fica, e o
     resumo de gravidade encolhe. Cortar o valor seria cortar justamente o motivo. */
  .diag-tira{height:44px;padding:0 12px;gap:8px}
  .diag-tira .dt{font-size:13px}
  .diag-tira .dv{font-size:12px}
}

/* ═══════════ CONFIGURAÇÕES E FERRAMENTAS (27/08/2026) ═══════════
   As duas telas que vieram do SIS-008 quando o Painel Central virou a porta. Reaproveitam
   .card, .tbl-h, .tbl-r, .btn-soft e .empty de propósito: a tela de administração não pode
   parecer um sistema diferente colado dentro deste, que é como ela lia com o CSS de lá. */

.cfg-abas{display:flex;gap:3px;background:#ececf0;border-radius:12px;padding:4px;align-self:flex-start;flex-wrap:wrap}
.cfg-abas button{border-radius:9px;padding:8px 15px;font-size:13.5px;font-weight:600;color:var(--t4);transition:.15s}
.cfg-abas button.on{background:#fff;color:var(--t1);box-shadow:0 1px 3px rgba(0,0,0,.12)}

.cfg-linha  {grid-template-columns:minmax(160px,2fr) 1fr 150px 130px 90px}
.cfg-linha-f{grid-template-columns:minmax(160px,2fr) 1fr 1fr 120px}
.cfg-linha-b{grid-template-columns:minmax(140px,1fr) 1fr 70px 110px}
.cfg-linha-l{grid-template-columns:120px 150px 90px 1fr 110px}
@media(max-width:900px){
  /* Abaixo disso as colunas ficam ilegíveis. A linha vira bloco e cada célula ganha a
     largura inteira — melhor rolar na vertical do que espremer cinco colunas. */
  .cfg-linha,.cfg-linha-f,.cfg-linha-b,.cfg-linha-l{grid-template-columns:1fr;gap:3px}
  .tbl-h.cfg-linha,.tbl-h.cfg-linha-f,.tbl-h.cfg-linha-b,.tbl-h.cfg-linha-l{display:none}
}

.cfg-sub{display:block;font-size:11.5px;color:var(--t4);margin-top:2px}
.cfg-sub-inline{font-weight:400;color:var(--t4);font-size:11.5px;margin-left:6px}
.cfg-erro{color:var(--redT);font-size:13.5px;font-weight:600;padding:14px 0}

.cfg-etq{display:inline-block;font-size:11px;font-weight:600;border-radius:7px;padding:2px 8px;text-transform:lowercase}
.cfg-etq-ativo,.cfg-etq-ativa{color:var(--greenT);background:rgba(52,199,89,.13)}
.cfg-etq-convidado,.cfg-etq-em_breve{color:#8a6100;background:rgba(255,159,10,.16)}
.cfg-etq-suspenso,.cfg-etq-arquivada{color:var(--redT);background:rgba(255,59,48,.12)}
.cfg-etq-papel{color:#fff;background:var(--t1);margin-left:6px}

.cfg-bloco{margin-bottom:16px}
.cfg-rot{display:block;font-size:13px;font-weight:600;color:var(--t2);margin-bottom:7px}
.cfg-campo{width:100%;background:var(--bg);border:1px solid #e2e2e7;border-radius:11px;padding:11px 13px;font-size:14.5px;color:var(--t1);transition:.18s}
.cfg-campo:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(0,113,227,.12)}
.cfg-campo:disabled{color:var(--t4);background:#f0f0f3}

.cfg-chaves{display:flex;flex-direction:column;gap:2px;max-height:230px;overflow:auto;border:1px solid var(--bd);border-radius:12px;padding:8px}
.cfg-chave{display:flex;align-items:flex-start;gap:10px;padding:8px 9px;border-radius:9px;font-size:13.5px;cursor:pointer;transition:.12s}
.cfg-chave:hover{background:var(--bg)}
.cfg-chave input{width:17px;height:17px;margin-top:1px;flex:none;accent-color:var(--blue);cursor:pointer}
.cfg-chave small{display:block;font-size:11px;color:var(--t4);margin-top:1px}

.cfg-hist{max-height:190px;overflow:auto;font-size:13px}
.cfg-hist li{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--bd2);color:var(--t2)}
.cfg-hist time{color:var(--t4);font-size:12px;flex:none;min-width:104px}

.cfg-forca{height:5px;background:var(--fld);border-radius:3px;overflow:hidden;margin:8px 0 5px}
.cfg-forca i{display:block;height:100%;width:0;transition:width .2s,background .2s}

/* Vermelho de ação destrutiva. Não existia neste painel porque nada aqui apagava nada —
   suspender acesso e cancelar convite são as primeiras. */
.btn-perigo{background:rgba(255,59,48,.1);color:var(--redT);border-radius:11px;padding:11px 18px;font-size:14px;font-weight:600;transition:.15s}
.btn-perigo:hover{background:rgba(255,59,48,.18)}

/* ── Ferramentas ── */
.fer-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:16px}
.fer-card{position:relative;display:block;background:var(--card);border:1px solid var(--bd);border-radius:16px;overflow:hidden;transition:.15s}
.fer-txt{padding:16px 18px 18px}
.fer-card h3{font-size:14.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:4px}
.fer-card p{font-size:12.5px;color:var(--t4);line-height:1.45}
.fer-icone{font-size:26px;line-height:1;margin:18px 18px 0}

/* A arte é a mesma do portal interno. `aspect-ratio` + `object-fit` porque as imagens não
   têm todas a mesma proporção, e sem isso a grade fica com cards de alturas diferentes —
   que se lê como defeito, não como variedade. */
/* `height:auto` é obrigatório, não enfeite: o `height="360"` do atributo vira dica de
   apresentação com valor definido, e um height definido faz o `aspect-ratio` ser ignorado.
   O atributo fica (é ele que reserva o espaço antes de a imagem chegar, sem pulo na grade)
   e o CSS devolve a proporção. */
.fer-arte{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#0e1116}
.fer-liberada:hover{border-color:#d8dade;box-shadow:0 6px 20px rgba(0,0,0,.07);transform:translateY(-1px)}
/* Bloqueada e em breve não têm :hover de propósito: reagir ao mouse promete um clique
   que não existe. Elas nem são <a> — ver cardFerramenta. */
.fer-bloqueada,.fer-em-breve{opacity:.5;cursor:default}
.fer-selo{position:absolute;top:14px;right:14px;font-size:11px;font-weight:600;color:var(--t4);background:rgba(255,255,255,.92);border-radius:7px;padding:2px 8px;box-shadow:0 1px 3px rgba(0,0,0,.16)}
.fer-selo-cadeado{background:none;padding:0;font-size:14px}

.fer-banner{display:block;background:linear-gradient(120deg,var(--blue),#5e5ce6);background-size:cover;background-position:center;color:#fff;border-radius:18px;padding:20px 24px}
.fer-banner h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
.fer-banner p{font-size:13px;opacity:.9;margin-top:3px}

/* ═══════════ TELAS DO CLIENTE — RESUMO, CRIATIVOS, RISCO (27/08/2026) ═══════════ */

/* Criativos: card reaproveita .fer-card/.fer-arte (mesma altura, mesmo raio) e troca só
   o miolo — número de compras e retorno em vez de nome e descrição de ferramenta. */
/* Criativos (27/08/2026, refinado no mesmo dia): grade 9:16 — o formato de verdade da
   maioria das peças (Stories/Reels). Colunas mais estreitas que .fer-grade de propósito:
   card alto e largo ficaria vazio nas laterais. */
.crv-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.crv-card{position:relative;display:block;aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  background:#0e1116;box-shadow:0 1px 2px rgba(0,0,0,.08);transition:.15s}
.crv-card:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.14)}
.crv-arte{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.crv-semfoto{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--t5);font-size:12px}
.crv-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.42);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  backdrop-filter:blur(2px);pointer-events:none}
/* Legenda por cima da imagem, estilo Reels: gradiente escuro só na base, pra ler branco
   sobre qualquer foto sem precisar de fundo sólido cobrindo a peça inteira. */
.crv-metricas{position:absolute;left:0;right:0;bottom:0;display:flex;gap:14px;
  padding:20px 12px 10px;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0))}
.crv-metricas > div{flex:1;text-align:center}
.crv-num{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em;color:#fff}
.crv-rot{display:block;font-size:10px;color:rgba(255,255,255,.75);margin-top:1px;
  text-transform:uppercase;letter-spacing:.03em}

/* Modal de prévia — o vídeo/foto oficial da Meta, mantendo a proporção do criativo. */
.crv-preview-hold{position:relative;width:100%;max-width:340px;margin:0 auto;aspect-ratio:9/16;
  background:#000;border-radius:14px;overflow:hidden;display:flex;
  align-items:center;justify-content:center}
.crv-preview-hold .empty{color:var(--t5)}
.crv-iframe{width:100%;height:100%;border:0}

/* Risco de Ruptura: mesma etiqueta de Configurações, cores próprias por nível de risco
   (passadas inline via RISCO_COR em cliente-risco.js — a paleta muda por dado, não por
   classe fixa, então não cabe no CSS). */

/* ═══ Tooltip do gráfico (27/08/2026) ═══ */
.chart-hold svg[data-chart-id]{touch-action:none;cursor:crosshair}
.chart-tip{
  position:absolute;top:6px;z-index:5;pointer-events:none;
  background:var(--t1);color:#fff;border-radius:10px;padding:8px 11px;
  font-size:12px;line-height:1.6;box-shadow:0 6px 18px rgba(0,0,0,.18);
  min-width:120px;white-space:nowrap;
}
.chart-tip b{display:block;font-size:11.5px;color:#fff;margin-bottom:3px;opacity:.85}
.chart-tip .dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px}

/* ═══ Barra de progresso indeterminada (27/08/2026) ═══
   Sem percentual: ninguém sabe quanto falta numa leitura ao vivo do Olist. Ela só diz
   "ainda estou trabalhando", pra distinguir de tela travada. */
.loading-bar{height:5px;border-radius:3px;background:var(--fld);overflow:hidden}
.loading-bar i{display:block;height:100%;width:40%;border-radius:3px;
  background:linear-gradient(90deg,var(--blue),#5e5ce6);
  animation:loadingBar 1.1s ease-in-out infinite}
@keyframes loadingBar{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(350%)}
}

/* ── Cards recolhíveis · tela Estoque do cliente (28/08/2026, pedido do Biel) ──
   Página única no lugar das pílulas: cada card ganha a seta no canto superior
   direito. `.recolhido` esconde os filhos diretos que não são cabeçalho — o título
   e o subtítulo continuam visíveis para a pessoa saber o que reabrir. */
.card-recolhivel{position:relative}
.card-recolhivel>.card-t,.card-recolhivel>.card-h{padding-right:34px}
.rec-btn{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;background:none;border:none;
  color:var(--t4);cursor:pointer;padding:0}
.rec-btn:hover{background:var(--bd2);color:var(--t1)}
.rec-btn svg{width:17px;height:17px;transition:transform .18s ease}
.card-recolhivel.recolhido .rec-btn svg{transform:rotate(-180deg)}
.card-recolhivel.recolhido>*:not(.rec-btn):not(.card-t):not(.card-h):not(.card-s){display:none}
.card-recolhivel.recolhido>.card-h{margin-bottom:0}

/* ════════════ GESTÃO SEMANAL ════════════
   Duas colunas: o que está no ar (esquerda) e o que existe na prateleira (direita).
   No celular viram uma só, com o estoque EMBAIXO — a decisão começa pelo anúncio. */
.gs-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:14px}
.gs-kpi{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:13px 15px}
.gs-kpi .l{font-size:11.5px;color:var(--t4);text-transform:uppercase;letter-spacing:.03em}
.gs-kpi .v{font-size:22px;font-weight:600;color:var(--t1);margin-top:3px;letter-spacing:-.02em}
.gs-kpi .s{font-size:12px;color:var(--t3);margin-top:2px}
/* O alerta é o único vermelho da tela por padrão: verba em produto esgotado é o achado. */
.gs-kpi-alerta{border-color:#ffd0cc;background:#fff6f5}
.gs-kpi-alerta .v{color:var(--redT)}

.gs-avisos{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:#FFF9E8;border:1px solid #F5E3B0;border-radius:10px;padding:10px 13px;margin-bottom:14px}
.gs-avisos-txt{font-size:12.5px;line-height:1.5;color:#6B5A22;flex:1;min-width:220px}
.gs-btn{background:var(--blue);color:#fff;border:0;border-radius:8px;padding:8px 14px;font-size:13px;
  font-weight:500;cursor:pointer;white-space:nowrap}
.gs-btn:hover{background:var(--blueD)}
.gs-btn:disabled{background:var(--t5);cursor:default}

.gs-split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px;align-items:start}
.gs-col{min-width:0}
.gs-h{font-size:13px;font-weight:600;color:var(--t2);margin:0 0 10px;text-transform:uppercase;letter-spacing:.04em}
.gs-h span{text-transform:none;letter-spacing:0;font-weight:400;color:var(--t4);margin-left:6px}

.gs-card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:13px;margin-bottom:12px}
.gs-card-alerta{border-color:#ffd0cc}
.gs-card-top{display:flex;gap:12px}
.gs-img{position:relative;width:104px;height:104px;flex:0 0 104px;border-radius:9px;overflow:hidden;
  background:var(--fld);display:flex;align-items:center;justify-content:center}
.gs-img img{width:100%;height:100%;object-fit:cover;display:block}
.gs-semimg{font-size:11px;color:var(--t5)}
.gs-entrega{position:absolute;left:5px;bottom:5px;right:5px;background:rgba(0,0,0,.66);color:#fff;
  font-size:9.5px;border-radius:5px;padding:2px 5px;text-align:center;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.gs-entrega.on{background:rgba(36,138,61,.9)}
.gs-card-id{min-width:0;flex:1}
.gs-nome{font-size:14px;font-weight:600;color:var(--t1);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gs-linha{font-size:12.5px;color:var(--t2);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-conj{margin-top:6px;padding-top:6px;border-top:1px solid var(--bd2)}
.gs-meta{font-size:11.5px;color:var(--t4);margin-top:1px}

.gs-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:8px;
  margin-top:11px;padding-top:11px;border-top:1px solid var(--bd2)}
.gs-n .l{font-size:10.5px;color:var(--t4);white-space:nowrap}
.gs-n .v{font-size:14px;font-weight:600;color:var(--t1);margin-top:1px}

.gs-prod{display:flex;gap:9px;align-items:flex-start;margin-top:11px;padding:9px 10px;
  border-radius:9px;background:var(--bg)}
.gs-prod-txt{font-size:12.5px;color:var(--t2);line-height:1.45;min-width:0}
.gs-prod-txt b{color:var(--t1)}
/* O palpite fica escrito em toda linha casada. Ele não é rodapé de página: é a diferença
   entre "conferi" e "achei parecido", e some da memória de quem lê em dois dias. */
.gs-palpite{display:block;font-size:11px;color:var(--t4);margin-top:1px}

.gs-bolinha{width:9px;height:9px;border-radius:50%;flex:0 0 9px;margin-top:5px;background:var(--t5)}
.gs-vermelho .gs-bolinha,.gs-bolinha.gs-vermelho{background:var(--red)}
.gs-amarelo  .gs-bolinha,.gs-bolinha.gs-amarelo {background:var(--orange)}
.gs-verde    .gs-bolinha,.gs-bolinha.gs-verde   {background:var(--green)}
.gs-branco   .gs-bolinha,.gs-bolinha.gs-branco  {background:#d6d6db;border:1px solid var(--t5)}
.gs-vermelho-txt{color:var(--redT);font-style:normal;font-weight:500}

.gs-col-estoque .gs-bloco{background:var(--card);border:1px solid var(--bd);border-radius:12px;
  padding:12px 14px;margin-bottom:12px}
.gs-bloco-h{font-size:12.5px;font-weight:600;color:var(--t1);margin-bottom:8px}
.gs-nada{font-size:12px;color:var(--t4);line-height:1.45}
.gs-prod-linha{display:flex;gap:9px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--bd2)}
.gs-prod-linha:first-of-type{border-top:0}
.gs-pl-txt{min-width:0;flex:1}
.gs-pl-txt b{font-size:13px;color:var(--t1);display:block}
.gs-pl-txt>span{font-size:11.5px;color:var(--t3);display:block;margin-top:1px}
.gs-grades{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.gs-grade{font-size:10.5px;padding:2px 7px;border-radius:20px;border:1px solid var(--bd);
  color:var(--t3);background:var(--bg);white-space:nowrap}
.gs-grade.gs-vermelho{background:#ffeceb;border-color:#ffd0cc;color:var(--redT)}
.gs-grade.gs-amarelo{background:#fff6e6;border-color:#ffe0ad;color:#8a5a00}
.gs-grade.gs-verde{background:#eaf9ee;border-color:#c6ecd0;color:var(--greenT)}

.gs-conf{background:#F5F6F8;border:1px solid var(--bd);border-radius:10px;padding:11px 13px;margin-bottom:12px}
.gs-conf b{font-size:12.5px;color:var(--t1);display:block;margin-bottom:3px}
.gs-conf span{font-size:11.5px;color:var(--t3);display:block;line-height:1.45;margin-top:3px}
/* Leitura que não cobriu a conta inteira: precisa saltar da caixa cinza, senão
   "nenhuma ruptura" e "não terminei de olhar" ficam com a mesma cara. */
.gs-conf span.gs-alerta{color:var(--vermelho,#B42318)}
/* Ações do card do produto: ficam na mesma linha e afastadas da grade. */
.gs-acoes{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:6px}
.gs-acoes button:disabled{opacity:.55;cursor:progress}
/* Progresso do "reler todas": some junto com o botão quando o laço acaba. */
.gs-reler-prog{font-size:11.5px;color:var(--t3)}
/* As variações que MAIS VENDEM de uma peça, alinhadas em colunas: o nome à esquerda, quanto
   vendeu e o saldo à direita. Alinhar é o que permite ler a coluna de baixo para cima e ver
   "as três que vendem estão zeradas" sem contar item por item. */
.gs-princ{margin:5px 0 3px;display:flex;flex-direction:column;gap:2px}
.gs-princ-l{display:grid;grid-template-columns:8px 1fr auto auto auto;gap:7px;align-items:center;font-size:11.5px}
.gs-princ-desde{color:var(--t3);font-size:10.5px;min-width:74px;text-align:right}
/* A matriz da grade: cor nas linhas, tamanho nas colunas. Rola dentro da própria caixa —
   peça com 32 cores não pode empurrar a página inteira para o lado. */
.gs-mx-aviso{margin-top:6px;font-size:11.5px;color:var(--vermelho,#B42318)}
.gs-mx-wrap{margin-top:6px;max-height:340px;overflow:auto;border:1px solid var(--bd);border-radius:8px}
.gs-mx-tab{border-collapse:collapse;font-size:11px;width:100%}
.gs-mx-tab thead th{position:sticky;top:0;background:#F5F6F8;color:var(--t3);font-weight:600;padding:4px 6px;text-align:center;z-index:1}
.gs-mx-cor{position:sticky;left:0;background:#fff;text-align:left;font-weight:500;color:var(--t2);padding:3px 8px 3px 6px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-mx{text-align:center;padding:3px 6px;font-variant-numeric:tabular-nums}
.gs-mx-vazia{text-align:center;color:#D0D5DD;padding:3px 6px}
.gs-princ-nome{color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-princ-vendeu{color:var(--t3);font-variant-numeric:tabular-nums}
.gs-princ-saldo{font-variant-numeric:tabular-nums;min-width:76px;text-align:right}
.gs-vermelho-txt{font-style:normal;color:var(--vermelho,#B42318)}
.gs-amarelo-txt{font-style:normal;color:#B45309}
.gs-verde-txt{font-style:normal;color:var(--t3)}
.gs-branco-txt{font-style:normal;color:var(--t3)}
#gs-reler-tudo{margin:-4px 0 8px}

.gs-vazio{text-align:center;padding:44px 18px;background:var(--card);border:1px solid var(--bd);border-radius:12px}
.gs-vazio b{font-size:15px;font-weight:600;display:block;color:var(--t1)}
.gs-vazio span{font-size:13px;color:var(--t3);display:block;margin-top:5px;max-width:460px;
  margin-left:auto;margin-right:auto;line-height:1.5}
.gs-carregando{padding:44px;text-align:center;color:var(--t4);font-size:13px}

@media(max-width:1023px){
  .gs-split{grid-template-columns:1fr}
  .gs-img{width:84px;height:84px;flex:0 0 84px}
  .gs-nums{grid-template-columns:repeat(auto-fit,minmax(64px,1fr))}
}

/* ════════════ ANEL DE CARREGAMENTO DA PRÉVIA (29/08/2026) ════════════
   O quadro ficava PRETO enquanto a Meta montava o iframe — medido: 3.912ms na primeira
   prévia da sessão, 1.898ms nas seguintes. Preto parado é indistinguível de travado.

   O anel e o número saem de UMA variável tipada (--previa-p), animada por transition:
   o mesmo valor pinta o arco (conic-gradient) e vira texto (counter). Sem rAF, sem
   biblioteca — duas escritas de estilo por prévia, não 60 por segundo.

   Só `opacity` e `transform` animam de verdade aqui; o conic-gradient é repintura de um
   elemento pequeno e isolado, não mexe em layout. */
@property --previa-p { syntax: '<integer>'; initial-value: 0; inherits: false; }

.previa-carga{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;z-index:2;
  transition:opacity var(--duration-normal,300ms) var(--ease-in,cubic-bezier(.4,0,1,1))}
.previa-carga.saindo{opacity:0}

.previa-anel{--previa-p:0;width:132px;height:132px;border-radius:50%;
  display:grid;place-items:center;
  /* o arco: parte pintada até --previa-p, resto é trilho */
  background:
    conic-gradient(var(--blue) calc(var(--previa-p) * 1%), rgba(127,127,127,.16) 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 11px),#000 calc(100% - 10px));
          mask:radial-gradient(farthest-side,#0000 calc(100% - 11px),#000 calc(100% - 10px));
  transition:--previa-p var(--duration-slow,500ms) linear}
.previa-anel::after{counter-reset:p var(--previa-p);content:counter(p) '%';
  -webkit-mask:none;mask:none}

/* O número não pode herdar a máscara do anel — vive fora dele. */
.previa-num{position:absolute;font-size:27px;font-weight:600;color:var(--t1);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.previa-rot{font-size:13px;color:var(--t3)}

/* Sobre fundo preto (prévia do cliente) o texto precisa inverter. */
.crv-preview-hold .previa-num{color:#fff}
.crv-preview-hold .previa-rot{color:rgba(255,255,255,.62)}

/* O iframe entra por opacidade quando termina de carregar — nada de layout. */
.previa-chegando{opacity:0;transition:opacity var(--duration-normal,300ms) var(--ease-out,cubic-bezier(0,0,.2,1))}
.previa-chegando.pronto{opacity:1}

@media (prefers-reduced-motion: reduce){
  .previa-anel{transition:none}
  .previa-carga,.previa-chegando{transition:none}
}

/* ── caixinha de vínculo (Gestão Semanal) ──
   Só aparece no card sem produto identificado. Discreta: não é a informação principal,
   é a ferramenta pra transformar "não sei" em "sei". */
.gs-vinc{margin-top:7px}
.gs-vinc-busca{width:100%;font:inherit;font-size:12.5px;padding:6px 9px;border:1px solid var(--bd);
  border-radius:7px;background:var(--card);color:var(--t1)}
.gs-vinc-busca:focus{outline:none;border-color:var(--blue)}
.gs-vinc-lista{display:flex;flex-direction:column;gap:3px;margin-top:5px}
.gs-vinc-dica{font-size:11.5px;color:var(--t4);padding:3px 2px}
.gs-vinc-item{display:flex;align-items:baseline;gap:7px;text-align:left;width:100%;cursor:pointer;
  background:var(--card);border:1px solid var(--bd);border-radius:7px;padding:6px 9px;font:inherit}
.gs-vinc-item:hover{border-color:var(--blue);background:#f6faff}
.gs-vinc-item b{font-size:12.5px;color:var(--t1);font-weight:600}
.gs-vinc-item span{font-size:11px;color:var(--t4);margin-left:auto;white-space:nowrap}
/* "desfazer" é ação de baixa frequência: existe, mas não compete com o número do card. */
.gs-link{background:none;border:0;padding:0;margin-top:3px;font:inherit;font-size:11px;
  color:var(--t4);text-decoration:underline;cursor:pointer;display:block}
.gs-link:hover{color:var(--redT)}

/* ── gráficos da aba Canais ──
   Barra 100%: comparar comprimento numa linha é mais preciso que comparar ângulo de pizza.
   O `gap` de 2px é o separador de superfície entre segmentos — sem ele, dois canais de cor
   próxima viram um bloco só e o leitor conta um canal a menos do que existe. */
.cn-barra{display:flex;gap:2px;height:34px;margin-top:14px;border-radius:8px;overflow:hidden;background:var(--fld)}
.cn-barra>div{min-width:3px;transition:opacity .12s}
.cn-barra:hover>div{opacity:.55}
.cn-barra>div:hover{opacity:1}
/* Rótulo direto em todo segmento: é a codificação secundária que o par verde↔âmbar exige
   para ser legível por quem tem daltonismo (ΔE 6,8 protan, dentro do piso). */
.cn-legs{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px}
.cn-leg{display:flex;align-items:center;gap:6px;font-size:12.5px}
.cn-leg b{font-weight:600;color:var(--t1)}
.cn-leg span{color:var(--t3)}
.cn-chip{width:9px;height:9px;border-radius:2.5px;flex:0 0 9px;display:inline-block}
.cn-resumo{margin-top:14px;padding:11px 13px;background:var(--fld);border-radius:9px;
  font-size:12.5px;line-height:1.55;color:var(--t2)}
.cn-resumo>div+div{margin-top:5px}
.cn-resumo b{color:var(--t1);font-weight:600}

/* ── Gestão Semanal: gráficos do topo, paginação e rótulo ── */
.gs-graficos{display:grid;grid-template-columns:auto minmax(200px,1fr) auto;gap:20px;align-items:center;
  background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.gs-rosca{position:relative;width:140px;height:140px;flex:0 0 140px}
.gs-rosca svg{width:100%;height:100%;display:block}
.gs-rosca-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.gs-rosca-c b{font-size:17px;font-weight:600;color:var(--t1);letter-spacing:-.02em}
.gs-rosca-c span{font-size:10.5px;color:var(--t4)}
.gs-gleg-box{display:flex;flex-direction:column;gap:7px;min-width:0}
/* Rótulo e valor ao lado de cada cor: a leitura nunca depende só da cor — é o que torna o
   gráfico legível para quem não distingue vermelho de verde. */
.gs-gleg{display:flex;align-items:baseline;gap:7px;font-size:12.5px;min-width:0}
.gs-gleg b{font-weight:600;color:var(--t1);white-space:nowrap}
.gs-gleg span{color:var(--t3);font-size:11.5px;margin-left:auto;white-space:nowrap}
/* As colunas respondem "quanto é em dinheiro" — a rosca responde "como está dividido".
   Duas perguntas, dois gráficos; um só faria as duas mal. */
.gs-colunas{display:flex;gap:8px;align-items:flex-end;height:112px}
.gs-col-item{display:flex;flex-direction:column;align-items:center;gap:5px;width:40px}
.gs-col-barra{width:26px;height:88px;background:var(--fld);border-radius:5px;overflow:hidden;
  display:flex;align-items:flex-end}
.gs-col-barra>div{width:100%;border-radius:5px 5px 0 0}
.gs-col-v{font-size:10.5px;color:var(--t3);white-space:nowrap}

.gs-vermais{display:block;width:100%;margin:4px 0 14px;padding:12px;border:1px dashed var(--bd);
  background:var(--card);border-radius:11px;font:inherit;font-size:13.5px;font-weight:600;
  color:var(--blue);cursor:pointer}
.gs-vermais:hover{border-color:var(--blue);background:#f6faff}
.gs-vermais span{font-weight:400;color:var(--t4);font-size:12px;margin-left:5px}

.gs-ampla{display:flex;align-items:flex-start;gap:7px;margin-top:7px;font-size:12px;
  color:var(--t2);cursor:pointer;line-height:1.4}
.gs-ampla input{margin-top:1px;flex:0 0 auto;cursor:pointer}
.gs-azul .gs-bolinha,.gs-bolinha.gs-azul{background:#1c6bd6}

.gs-vinc-item{display:flex;gap:5px;align-items:stretch}
.gs-vinc-btn{display:flex;align-items:baseline;gap:7px;text-align:left;flex:1;cursor:pointer;
  background:var(--card);border:1px solid var(--bd);border-radius:7px;padding:6px 9px;font:inherit;min-width:0}
.gs-vinc-btn:hover{border-color:var(--blue);background:#f6faff}
.gs-vinc-btn b{font-size:12.5px;color:var(--t1);font-weight:600}
.gs-vinc-btn span{font-size:11px;color:var(--t4);margin-left:auto;white-space:nowrap}
/* "+ Gerenciador" escreve na conta do cliente — fica visualmente separado do que só mexe
   no painel, porque as duas ações têm consequências diferentes. */
.gs-vinc-meta{flex:0 0 auto;background:var(--fld);border:1px solid var(--bd);border-radius:7px;
  padding:6px 9px;font:inherit;font-size:11px;color:var(--t2);cursor:pointer;white-space:nowrap}
.gs-vinc-meta:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

@media(max-width:1023px){
  .gs-graficos{grid-template-columns:1fr;justify-items:center;gap:14px}
  .gs-gleg-box{width:100%}
  .gs-gleg span{margin-left:auto}
}
/* Donut de composição: o total mora no CENTRO — é o número que o cliente procura primeiro,
   e pô-lo ali evita um card separado só para o total. Fatia tem gap de 2px da cor do card
   (mesma razão do gap da barra). */
.cn-donut-wrap{display:flex;align-items:center;gap:22px;margin-top:18px;flex-wrap:wrap}
.cn-donut{position:relative;width:190px;height:190px;flex:0 0 190px}
.cn-donut svg{width:100%;height:100%;display:block}
.cn-donut path{transition:opacity .12s}
.cn-donut:hover path{opacity:.55}
.cn-donut path:hover{opacity:1}
.cn-donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;pointer-events:none}
.cn-donut-c b{font-size:17px;font-weight:700;color:var(--t1)}
.cn-donut-c span{font-size:11px;color:var(--t3);margin-top:2px}
.cn-donut-legs{flex:1;min-width:180px;display:flex;flex-direction:column;gap:7px}
/* Selo de destaque numa origem (ex.: "WhatsApp" no Online) — configurado por conta no
   servidor, nunca inferido aqui. */
.cn-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  padding:2px 7px;border-radius:20px;background:var(--green-bg,#e7f6ec);color:var(--green,#15803d);
  border:1px solid var(--green,#15803d);vertical-align:1px;white-space:nowrap}
.cn-badge-site{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 7px;
  border-radius:20px;background:var(--fld);color:var(--t3);border:1px solid var(--bd);
  vertical-align:1px;white-space:nowrap}
/* Colunas (vendedores): valor em cima, nome embaixo truncado — o nome completo vive na
   lista logo abaixo, que é a visão-tabela dos mesmos números. O respiro (gap 12px +
   margens) veio de pedido do Biel no celular: as colunas nasciam coladas. */
.cn-cols{display:flex;align-items:flex-end;gap:12px;margin:20px 4px 8px;height:150px}
.cn-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
.cn-col i{display:block;width:100%;max-width:46px;border-radius:4px 4px 0 0;font-style:normal;transition:opacity .12s}
.cn-cols:hover i{opacity:.55}
.cn-col:hover i{opacity:1}
.cn-col b{font-size:10.5px;font-weight:600;color:var(--t2);margin-bottom:6px;white-space:nowrap}
.cn-col span{font-size:10.5px;color:var(--t3);margin-top:5px;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* No celular a divisão por igual quebra: oito contas num card de 343px dão 33px por
   coluna — o nome vira "Su…" e o valor não cabe, então o gráfico deixa de responder
   qualquer coisa. Largura mínima por coluna + rolagem DENTRO do card mantém as duas
   informações legíveis; a comparação de altura entre vizinhas continua de pé, que é o
   que a coluna existe para mostrar. Medido em 30/08/2026 no card de ROAS por conta. */
@media(max-width:768px){
  .cn-cols{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
  .cn-col{flex:0 0 66px}
}
/* Colunas AGRUPADAS: duas barras por conta, investimento e receita (30/08/2026).
   Diferente de `.cn-cols`, que é uma barra por item — aqui o par é que é a unidade, e o
   `gap` entre pares (18px) tem de ser maior que o gap DENTRO do par (5px), senão o olho
   não sabe quais duas barras se comparam. Os valores vão escritos embaixo porque as duas
   dividem a mesma escala: a barra azul pode ser um fio, e o número não pode sumir com ela. */
.gb-cols{display:flex;align-items:flex-end;gap:18px;margin:22px 4px 4px;min-height:186px}
.gb-grupo{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;height:100%}
.gb-barras{display:flex;align-items:flex-end;justify-content:center;gap:5px;width:100%;height:150px}
/* Uma coluna por conta (verba e receita viraram cards separados em 30/08/2026, cada um
   com a própria escala). Sem par para separar, o `gap` entre contas pode fechar e a
   coluna engorda — comparar altura fica mais fácil com menos espaço vazio no meio. */
.gb-uma{gap:12px}
.gb-uma .gb-barras i{max-width:44px}
.gb-barras i{display:block;flex:1;max-width:34px;min-height:2px;border-radius:4px 4px 0 0;
  font-style:normal;transition:opacity .12s}
.gb-cols:hover .gb-barras i{opacity:.5}
.gb-grupo:hover .gb-barras i{opacity:1}
.gb-nome{font-size:10.5px;color:var(--t3);margin-top:7px;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.gb-vals{display:flex;gap:7px;margin-top:3px;font-size:10.5px;font-variant-numeric:tabular-nums}
.gb-vals b{font-weight:650;white-space:nowrap}
@media(max-width:768px){
  /* Mesma razão das `.cn-cols`: oito pares num card de 343px dão 25px por par, e o par
     deixa de ser comparável. Largura mínima + rolagem dentro do card. */
  .gb-cols{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;gap:14px}
  .gb-grupo{flex:0 0 84px}
}
/* Barras horizontais (tags/marcadores): tag se sobrepõe, então a soma não fecha 100% —
   pizza aqui mentiria; comprimento contra o MAIOR marcador é a comparação honesta. */
.cn-hrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--bd)}
.cn-hrow b{flex:0 0 34%;min-width:0;font-size:12.5px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cn-hbar{flex:1;height:14px;background:var(--fld);border-radius:4px;overflow:hidden}
.cn-hbar>i{display:block;height:100%;border-radius:4px}
.cn-hrow small{flex:0 0 150px;font-size:11.5px;color:var(--t3);text-align:right}
@media (max-width:560px){
  .cn-donut-wrap{justify-content:center}
  .cn-hrow small{flex-basis:118px}
}

/* ═══ Chrome do celular v2 (30/08/2026, pedido do Biel) ═══
   - o cabeçalho ESCURO continua no topo, mas deixa de ser fixo: rola com a página
   - o PERÍODO sai do cabeçalho e vira botão na barra de baixo (o menu dele abre
     acima da barra); em tela sem período o botão apaga
   - a barra de baixo fica ESCURA, com o item ativo aceso em ciano
   - "Mais" abre uma gaveta da DIREITA para a esquerda, com Estoque em destaque
   - o menu de 3 barras fica PRETO no quadrado branco
   Este bloco vem DEPOIS do media query principal de propósito: ele sobrescreve. */
@media(max-width:767px){
  .header{position:static}
  .header .btn-menu{color:#07111A;background:#fff;border-radius:12px}
  /* O período foi pra barra de baixo. Os CONTROLES do cabeçalho somem, mas o #period
     continua no DOM (sem display:none!) porque o menu (#pmenu) e o personalizado
     (#crange) moram dentro dele — e agora abrem FIXOS, acima da barra. */
  .header .pcal{display:none}
  .header .period{width:0;height:0;margin:0;padding:0;order:0;overflow:visible}
  /* O menu de recortes abre abaixo do botão flutuante, no canto direito. */
  .pmenu{position:fixed;top:calc(64px + env(safe-area-inset-top));bottom:auto;
    left:auto;right:12px;min-width:230px;z-index:70}
  .crange{position:fixed;top:calc(64px + env(safe-area-inset-top));bottom:auto;
    left:12px;right:12px;z-index:70}
  /* sem o cabeçalho fixo, o sticky das subabas ancora no topo da janela */
  .dsub{top:10px}

  /* Cor SÓLIDA de propósito: gradiente como background-image não pintava neste elemento
     fixo em um dos renderizadores testados (a cor sólida pinta em todos). */
  .tabbar{display:flex;align-items:stretch;background:#0A1520;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    border-top:1px solid rgba(255,255,255,.07)}
  .tabbar .nav-item,.tabbar .tab{flex:1 1 0;min-width:0;color:#A7B0BC}
  .tabbar .nav-item.on{color:var(--ciano)}
  .tab-add{flex:0 0 54px;border-color:#0D1823}
  /* ── Período flutuante: canto superior direito, acompanha a rolagem ──
     Cor sólida (mesma razão da barra) + borda sutil pra existir tanto sobre o cabeçalho
     escuro quanto sobre o conteúdo claro. Em tela sem período ele SOME — flutuante não
     causa pulo de layout. */
  #fab-periodo{position:fixed;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:60;
    display:flex;align-items:center;gap:7px;background:#0A1520;color:#E8EDF3;
    border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:9px 14px;
    font-size:12.5px;font-weight:600;box-shadow:0 6px 18px rgba(7,17,26,.35)}
  #fab-periodo svg{width:16px;height:16px;color:var(--ciano)}
  #fab-periodo:active{transform:scale(.96)}
  #fab-periodo.off{display:none}

  /* ── menu da Conta: abre acima da barra, no canto direito ── */
  #conta-menu{position:fixed;bottom:calc(84px + env(safe-area-inset-bottom));right:12px;
    z-index:70;min-width:238px;background:#fff;border:1px solid var(--bd);
    border-radius:14px;box-shadow:0 12px 34px rgba(16,24,40,.18);padding:8px;
    display:flex;flex-direction:column;gap:2px}
  #conta-menu.hidden{display:none}
  #conta-menu .cm-t{font-size:11.5px;font-weight:600;color:var(--t4);padding:6px 10px 4px;
    text-transform:uppercase;letter-spacing:.04em}
  #conta-menu button{display:flex;align-items:center;gap:10px;text-align:left;
    padding:11px 10px;border-radius:10px;font-size:14px;font-weight:600;color:var(--t2)}
  #conta-menu button:active{background:var(--fld)}
  #conta-menu button svg{width:18px;height:18px;flex:0 0 18px}
  #conta-menu .cm-sair{color:#c0392b}
}
/* No computador o período continua no cabeçalho — o flutuante é do celular. */
@media(min-width:768px){ #fab-periodo{display:none} }

/* ═══════════ GAVETA DE SEÇÕES DO CLIENTE (admin, 30/08/2026) ═══════════
   Substitui a barra de abas grudada (Resumo · Dia a dia · Criativos · Canais) que
   ficava por cima dos cards ao rolar. Botão no cabeçalho; a gaveta abre da DIREITA,
   em cor de destaque — mesma família do cabeçalho escuro do celular. */
.cli-menu-btn{display:flex;align-items:center;gap:7px;background:#10141A;color:#fff;
  border-radius:11px;padding:8px 14px;font-size:13px;font-weight:600;flex-shrink:0;
  transition:.15s;border:1px solid #10141A}
.cli-menu-btn:hover{background:#1C232E}
.cli-menu-btn svg{width:15px;height:15px;color:var(--ciano,#12D9B2)}
.cli-ov{position:fixed;inset:0;background:rgba(7,17,26,.45);z-index:79;opacity:0;
  pointer-events:none;transition:opacity .2s}
.cli-ov.aberta{opacity:1;pointer-events:auto}
.cli-drawer{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);z-index:80;
  background:linear-gradient(180deg,#07111A 0%,#0D1823 100%);
  padding:22px 16px calc(20px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:6px;
  transform:translateX(105%);transition:transform .22s cubic-bezier(.4,0,.2,1);
  box-shadow:-16px 0 44px rgba(7,17,26,.35)}
.cli-drawer.aberta{transform:translateX(0)}
.cli-drawer-t{color:#fff;font-size:16px;font-weight:700;letter-spacing:-.02em;
  padding:6px 12px 14px;display:flex;flex-direction:column;gap:3px;
  border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px}
.cli-drawer-t span{font-size:12px;font-weight:500;color:#A7B0BC}
.cli-dritem{display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  color:#C9D2DC;font-size:14.5px;font-weight:550;border-radius:12px;padding:13px 12px;
  transition:.15s}
.cli-dritem svg{width:19px;height:19px;flex:0 0 19px;opacity:.85}
.cli-dritem:hover{background:rgba(255,255,255,.07);color:#fff}
.cli-dritem.on{background:var(--ciano,#12D9B2);color:#07111A;font-weight:700}
.cli-dritem.on svg{opacity:1}

/* ═══════════ CRIATIVOS DA CARTEIRA — tabela na Visão Geral (30/08/2026) ═══════════
   Miniatura pequena mantendo a proporção 9:16 do feed + números ao lado. A tabela rola
   por dentro do card (x e y), com o cabeçalho grudado — a página nunca rola de lado. */
.vgc-scroll{overflow:auto;max-height:560px;margin-top:12px;border:1px solid var(--bd);
  border-radius:12px}
.vgc-table{width:100%;border-collapse:separate;border-spacing:0;min-width:780px;
  font-size:13px}
.vgc-table thead th{position:sticky;top:0;background:var(--card);z-index:2;
  border-bottom:1px solid var(--bd)}
.vgc-th{cursor:pointer;user-select:none;white-space:nowrap;padding:10px 12px;
  color:var(--t3);font-weight:600;text-align:right;font-size:12.5px;transition:.13s}
.vgc-th:hover{color:var(--t1)}
.vgc-th.on{color:var(--blue)}
.vgc-th-fixa{text-align:left;padding:10px 12px;color:var(--t3);font-weight:600;
  font-size:12.5px}
.vgc-row{cursor:pointer;transition:background .12s}
.vgc-row:hover{background:var(--fld)}
.vgc-row td{padding:8px 12px;border-top:1px solid var(--bd2);vertical-align:middle}
.vgc-row:first-child td{border-top:0}
.vgc-thumb{width:50px}
.vgc-thumb span{display:block;width:34px;height:60px;border-radius:8px;overflow:hidden;
  background:#EEF0F3;position:relative}
.vgc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vgc-thumb svg{width:100%;height:100%;padding:8px;color:#A7AEB9}
.vgc-thumb .vd{position:absolute;right:3px;bottom:3px;width:14px;height:14px;
  border-radius:50%;background:rgba(7,17,26,.72);display:grid;place-items:center}
.vgc-thumb .vd svg{width:8px;height:8px;padding:0;color:#fff}
.vgc-quem{min-width:230px}
.vgc-quem .c2-av{vertical-align:middle}
.vgc-nm{display:inline-flex;flex-direction:column;vertical-align:middle;margin-left:9px;
  max-width:300px}
.vgc-nm b{font-size:13px;color:var(--t1);font-weight:650}
.vgc-nm i{font-style:normal;font-size:11.5px;color:var(--t3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.vgc-v{text-align:right;font-variant-numeric:tabular-nums;color:var(--t1);
  white-space:nowrap}
.vgc-v.on{font-weight:700}
@media(max-width:767px){ .vgc-scroll{max-height:460px} .vgc-nm{max-width:180px} }

/* O período flutuante é FIXO no canto superior direito e fica por cima do cabeçalho —
   título comprido ("Doutor Blackout") desaparecia embaixo dele. A folga reserva o canto
   só no celular, onde o flutuante existe. */
@media(max-width:767px){ .header-l{padding-right:96px} }