/* Phoenix · Oferta Ativa — visual "Fênix dourada" (09/11/2026)
   vinho #922A32 · ouro #D4A257 · brasa #AA553F · vinho noturno #2C0606 · creme #F4EBE3 */
:root{
  --pr:#AA553F;--pr2:#922A32;--ouro:#D4A257;--ouro2:#E8B25C;--noite:#2C0606;--creme:#F4EBE3;
  --hero:linear-gradient(135deg,#E8B25C 0%,#AA553F 30%,#922A32 62%,#2C0606 100%);
  --ink:#2a1512;--mut:#7d625c;--line:rgba(44,6,6,.10);
  --vidro:rgba(255,255,255,.55);--vidro2:rgba(255,255,255,.75);--brd:rgba(255,255,255,.8);
  --sh:0 1px 0 rgba(255,255,255,.85) inset,0 20px 46px -24px rgba(90,30,15,.38);
  --ok:#2E8F57;--warn:#B8860B;--bad:#B23A30;--azul:#2F6FD8;--roxo:#7B3FA8;
  --r:20px;--ease:cubic-bezier(.2,.8,.2,1);
  /* compatibilidade com nomes antigos */
  --esc:#2C0606;--esc2:#3a0d0f;--bg:#F4EBE3;--card:var(--vidro)
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;color:var(--ink);font:15px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;background:#efe2d2;overflow-x:hidden}
a{color:var(--pr2);text-decoration:none}
/* fundo quente desfocado */
.bg{position:fixed;inset:-10%;z-index:-2;filter:blur(70px) saturate(1.1);pointer-events:none;
  background:radial-gradient(40% 35% at 12% 15%,#f6ecdf 0,transparent 70%),radial-gradient(35% 40% at 88% 10%,#dcaa62 0,transparent 70%),
  radial-gradient(45% 40% at 75% 90%,#8a2e28 0,transparent 70%),radial-gradient(40% 45% at 15% 92%,#ecc68f 0,transparent 70%),
  radial-gradient(30% 30% at 50% 50%,#fbf4ea 0,transparent 70%),#e8d3b6;opacity:.85;animation:deriva 30s ease-in-out infinite alternate}
@keyframes deriva{to{transform:translate3d(-3%,2%,0) scale(1.06)}}
.vidro,.card,.kpi,.tab-wrap{background:var(--vidro);border:1px solid var(--brd);box-shadow:var(--sh);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3)}

/* ===== estrutura: barra lateral flutuante ===== */
.app{display:grid;grid-template-columns:84px 1fr;gap:20px;max-width:1360px;margin:0 auto;padding:18px}
.lado{position:sticky;top:18px;height:calc(100vh - 36px);display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0;border-radius:40px;z-index:10}
.logo{width:44px;height:44px;border-radius:50%;margin-bottom:12px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:17px;
  background:radial-gradient(circle at 35% 30%,#fff0c4,#D4A257 40%,#AA553F 70%,#5a1414);box-shadow:0 0 22px rgba(170,85,63,.45)}
.ic{position:relative;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:var(--mut);transition:.25s var(--ease)}
.ic svg{width:21px;height:21px}
.ic:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.ic.on{background:#fff;color:var(--pr);box-shadow:0 8px 18px -8px rgba(90,30,15,.4)}
.ic .tip{position:absolute;left:60px;white-space:nowrap;background:var(--noite);color:#fff;font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;opacity:0;transform:translateX(-6px);pointer-events:none;transition:.2s}
.ic:hover .tip{opacity:1;transform:none}
.lado .sep{width:28px;height:1px;background:var(--line);margin:6px 0}
.lado .eu{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:6px}
.lado .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#922A32,#2C0606);color:#fff;font-weight:800;display:grid;place-items:center;font-size:13px}
.conteudo{min-width:0}
.topo{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:2px 0 16px;flex-wrap:wrap}
.topo .marca{font-weight:800;letter-spacing:.3px;font-size:14px;color:var(--mut)}
.topo .marca b{color:var(--pr2)}
.topo .quem{font-size:12.5px;color:var(--mut);text-align:right}
.topo .quem b{color:var(--ink)}
main{min-width:0}

/* ===== tipografia ===== */
h1{font-size:30px;letter-spacing:-.02em;margin:0 0 14px;font-weight:760}
h1 i,.it{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;color:var(--pr)}
h2{font-size:17px;margin:22px 0 10px;font-weight:750}
.mut{color:var(--mut)}.peq{font-size:12.5px}

/* ===== cards ===== */
.card{border-radius:var(--r);padding:18px;margin-bottom:14px;transition:transform .35s var(--ease),box-shadow .35s}
.grid{display:grid;gap:14px}.g5{grid-template-columns:repeat(5,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:1fr 1fr}
.kpi{border-radius:var(--r);padding:16px 18px;transition:transform .35s cubic-bezier(.2,.9,.3,1.3),box-shadow .35s}
.kpi:hover,.card.sobe:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 28px 56px -26px rgba(90,30,15,.5)}
.kpi span{display:block;font-size:11.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.7px;font-weight:650}
.kpi b{display:block;font-size:32px;font-weight:780;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi .mut{margin-top:2px}
.kpi.quente{background:var(--hero);border-color:rgba(255,255,255,.35);color:#fff}.kpi.quente span,.kpi.quente .mut{color:rgba(255,255,255,.85)}
.kpi.pr b{color:var(--pr2)}.kpi.ok b{color:var(--ok)}.kpi.az b{color:var(--azul)}.kpi.rx b{color:var(--roxo)}

/* ===== herói ===== */
.heroi{position:relative;overflow:hidden;color:#fff;border-radius:26px;padding:26px 28px;margin-bottom:16px;background:var(--hero);
  border:1px solid rgba(255,255,255,.35);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 30px 60px -28px rgba(110,40,28,.65)}
.heroi:before{content:"";position:absolute;width:440px;height:440px;right:-140px;top:-170px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%);pointer-events:none}
.heroi .selo{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:650;padding:5px 11px;border-radius:99px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32)}
.heroi .vivo{width:7px;height:7px;border-radius:50%;background:#9effc4;animation:pulsa 1.8s infinite}
@keyframes pulsa{0%{box-shadow:0 0 0 0 rgba(158,255,196,.7)}70%{box-shadow:0 0 0 8px rgba(158,255,196,0)}100%{box-shadow:0 0 0 0 rgba(158,255,196,0)}}
.heroi h1{color:#fff;margin:12px 0 6px;font-size:32px}
.heroi h1 i{color:#FFD58A}
.heroi p{margin:0;opacity:.9;max-width:560px}
.heroi .mini{display:flex;gap:26px;margin:18px 0 4px;flex-wrap:wrap}
.heroi .mini b{display:block;font-size:26px;font-weight:780;font-variant-numeric:tabular-nums}
.heroi .mini span{font-size:12px;opacity:.85}
.heroi .mini div+div{padding-left:26px;border-left:1px solid rgba(255,255,255,.3)}
.heroi .corpo{position:relative;z-index:1;padding-right:210px}
.heroi .anel{position:absolute;right:34px;top:50%;transform:translateY(-50%);width:170px;height:170px;z-index:1}
.heroi .anel svg{width:100%;height:100%;transform:rotate(-90deg)}
.heroi .anel .arco{animation:anelIn 1.6s var(--ease) both}
@keyframes anelIn{from{stroke-dashoffset:503}}
.heroi .anel .val{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.heroi .anel .val b{font-size:34px;font-weight:780;letter-spacing:-.03em}
.heroi .anel .val span{font-size:12px;opacity:.85}
.heroi .btn{background:#fff;color:var(--noite)}
.heroi .btn.lin{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.5)}
.heroi a{color:#FFD58A}

/* ===== botões ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:99px;padding:10px 18px;font-weight:700;font-size:14px;cursor:pointer;
  background:var(--noite);color:#fff;text-decoration:none;transition:transform .25s cubic-bezier(.2,.9,.3,1.4),background .2s,box-shadow .25s;box-shadow:0 10px 20px -12px rgba(44,6,6,.7)}
.btn:hover{transform:translateY(-2px);background:var(--pr2)}
.btn.sec{background:var(--vidro2);color:var(--ink);border:1px solid var(--brd);box-shadow:none}
.btn.sec:hover{background:#fff}
.btn.esc{background:var(--noite);color:#fff}
.btn.peq{padding:6px 12px;font-size:12.5px}
.btn.big{padding:15px 22px;font-size:16px;background:var(--hero);box-shadow:0 14px 28px -14px rgba(146,42,50,.8)}
.btn.big.sec{background:var(--vidro2);color:var(--ink)}

/* ===== formulários ===== */
label{display:block;font-size:12.5px;color:var(--mut);margin:8px 0 4px;font-weight:650}
input,select,textarea{width:100%;padding:10px 13px;border:1px solid rgba(44,6,6,.14);border-radius:12px;font:inherit;background:rgba(255,255,255,.75);color:var(--ink);transition:.2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pr);box-shadow:0 0 0 3px rgba(170,85,63,.18);background:#fff}
textarea{min-height:90px}
select[multiple]{min-height:120px}

/* ===== tabelas ===== */
.tab-wrap{overflow:auto;border-radius:18px;margin-bottom:6px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-size:14px}
tr:last-child td{border-bottom:0}
th{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--mut);background:rgba(255,255,255,.4);font-weight:700}
tr:hover td{background:rgba(255,255,255,.35)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}

/* ===== selos, mensagens, barras ===== */
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:750;background:rgba(44,6,6,.07);color:#6b4a43}
.pill.ativa{background:#E1F2E7;color:var(--ok)}.pill.pausada{background:#FBEFD2;color:#8a6200}.pill.encerrada{background:rgba(44,6,6,.07);color:#777}
.pill.ECO{background:#E6F0FF;color:var(--azul)}.pill.INVEST{background:#F3E6FC;color:var(--roxo)}.pill.empresa{background:#F5E3C8;color:var(--pr2)}.pill.equipe{background:#E1F2E7;color:#2E8F57}
.msg{padding:11px 15px;border-radius:14px;margin-bottom:12px;font-size:14px;border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(12px)}
.msg.ok{background:rgba(225,242,231,.85);color:#1c6b3d}.msg.av{background:rgba(253,236,234,.9);color:#9b2a1f}.msg.inf{background:rgba(245,227,200,.9);color:#6e4100}
.barra{height:8px;border-radius:9px;background:rgba(44,6,6,.08);overflow:hidden}
.barra i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--ouro2),var(--pr));animation:barraIn 1.4s var(--ease) both}
@keyframes barraIn{from{width:0}}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.row>*{flex:1;min-width:140px}
.filtros a{padding:7px 14px;border-radius:99px;border:1px solid var(--brd);background:var(--vidro);color:var(--ink);font-size:13px;font-weight:600;backdrop-filter:blur(10px)}
.filtros a.on{background:var(--noite);color:#fff;border-color:var(--noite)}

/* ===== ranking ===== */
.rank{display:flex;align-items:center;gap:12px;padding:8px 2px}
.rank .pos{width:20px;font-weight:800;color:var(--mut)}
.rank .av2{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;background:linear-gradient(135deg,#AA553F,#922A32)}
.rank:nth-child(2) .av2{background:linear-gradient(135deg,#E8B25C,#AA553F)}
.rank .nm{flex:1;min-width:0}
.rank .q{font-weight:800;font-variant-numeric:tabular-nums}

/* ===== tela de ligação (mobile first) ===== */
div.lead:not(.kpi){max-width:660px;margin:0 auto}
.lead .nome{font-size:26px;font-weight:800;margin:4px 0;letter-spacing:-.02em}
.lead .tel{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}
.lead .tel a{flex:1;min-width:160px}
.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.status-grid button{border:0;border-radius:16px;padding:16px 10px;font-weight:800;font-size:14.5px;cursor:pointer;color:#fff;transition:transform .2s cubic-bezier(.2,.9,.3,1.4),filter .2s}
.status-grid button:hover{transform:translateY(-2px);filter:brightness(1.07)}
.s-nao_interesse{background:linear-gradient(135deg,#A8343A,#922A32)}.s-nao_atendeu{background:linear-gradient(135deg,#C0664C,#AA553F)}.s-numero_errado{background:linear-gradient(135deg,#7A2028,#5A1517)}
.s-whatsapp{background:linear-gradient(135deg,#2FB566,#1F9150)}.s-video{background:linear-gradient(135deg,#1F9150,#14703C)}.s-tirar{background:#3a2420}
.script{white-space:pre-wrap;background:rgba(245,227,200,.55);border:1px dashed rgba(170,85,63,.45);border-radius:14px;padding:13px;font-size:14.5px}
.hist{padding-left:18px}.hist li{font-size:13px;color:var(--mut);margin:3px 0}

/* ===== chips (seleção de produtos etc.) ===== */
.chips{display:flex;flex-wrap:wrap;gap:6px;max-height:230px;overflow:auto;padding:8px;border:1px solid rgba(44,6,6,.1);border-radius:14px;background:rgba(255,255,255,.55);margin-top:6px}
.chip input{display:none}.chip span{display:inline-block;padding:6px 12px;border-radius:99px;border:1px solid rgba(44,6,6,.1);font-size:12.5px;font-weight:700;cursor:pointer;user-select:none;background:rgba(255,255,255,.7);transition:.18s}
.chip span:hover{border-color:var(--pr)}
.chip span small{font-weight:600;color:#9a7d75;margin-left:3px}.chip input:checked+span{background:var(--pr2);border-color:var(--pr2);color:#fff}.chip input:checked+span small{color:#F5D9C8}

/* ===== entrada suave ===== */
.entra{animation:entra .7s var(--ease) both}
.entra:nth-child(2){animation-delay:.06s}.entra:nth-child(3){animation-delay:.12s}.entra:nth-child(4){animation-delay:.18s}.entra:nth-child(5){animation-delay:.24s}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== login ===== */
.tela-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.tela-login .card{width:min(400px,94vw);padding:28px;border-radius:26px}

/* ===== responsivo ===== */
@media(max-width:1000px){.g5{grid-template-columns:repeat(3,1fr)}.g5>.kpi.quente{grid-column:1/-1}.heroi .corpo{padding-right:0}.heroi .anel{position:relative;right:auto;top:auto;transform:none;margin:14px auto 0}}
@media(max-width:760px){
  .app{grid-template-columns:1fr;padding:12px 12px 90px}
  .lado{position:fixed;top:auto;bottom:10px;left:10px;right:10px;height:auto;flex-direction:row;justify-content:space-around;padding:6px;border-radius:24px}
  .lado .logo,.lado .sep,.lado .eu,.ic .tip{display:none}
  .ic{width:44px;height:44px}
  .g4,.g5{grid-template-columns:1fr 1fr}.g3,.g2{grid-template-columns:1fr}
  h1{font-size:24px}.heroi{padding:20px}.heroi h1{font-size:25px}.kpi b{font-size:24px}
  .topo .marca{display:none}
}