/* ============================================================================
   CAMPANHA HIWIN · ROLSUL — folha de estilo
   ----------------------------------------------------------------------------
   Identidade Rolsul (Oxford / Marinho / Cobalto / Azure / Ciano) com o verde
   HIWIN entrando só como assinatura de marca parceira: logo, selo da campanha
   e a categoria "Itens". Barlow Condensed nos números e títulos, Poppins na UI.
   ========================================================================== */

/* ------------------------------------------------------------------ fontes */
@font-face { font-family:'Barlow Condensed'; src:url('../fonts/BarlowCondensed-Regular.ttf')   format('truetype'); font-weight:400; font-display:swap }
@font-face { font-family:'Barlow Condensed'; src:url('../fonts/BarlowCondensed-Medium.ttf')    format('truetype'); font-weight:500; font-display:swap }
@font-face { font-family:'Barlow Condensed'; src:url('../fonts/BarlowCondensed-SemiBold.ttf')  format('truetype'); font-weight:600; font-display:swap }
@font-face { font-family:'Barlow Condensed'; src:url('../fonts/BarlowCondensed-Bold.ttf')      format('truetype'); font-weight:700; font-display:swap }
@font-face { font-family:'Barlow Condensed'; src:url('../fonts/BarlowCondensed-ExtraBold.ttf') format('truetype'); font-weight:800; font-display:swap }
@font-face { font-family:'Barlow Condensed'; src:url('../fonts/BarlowCondensed-Black.ttf')     format('truetype'); font-weight:900; font-display:swap }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Regular.ttf')  format('truetype'); font-weight:400; font-display:swap }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Medium.ttf')   format('truetype'); font-weight:500; font-display:swap }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Bold.ttf')     format('truetype'); font-weight:700; font-display:swap }

/* ------------------------------------------------------------------ tokens */
:root{
  /* paleta oficial — não substituir */
  --oxford:#000B17;
  --navy:#002BC9;
  --cobalt:#154FC0;
  --azure:#0091FF;
  --cyan:#00D9FF;
  --white-tech:#F4F6F8;
  --hiwin:#37C11F;

  /* medalhas */
  /* Medalhas. A cor "cheia" é para bordas e preenchimentos; a variante -ink é
     a mesma medalha rebaixada para uso em texto, onde o metálico puro não
     alcança contraste sobre superfície clara. */
  --ouro:#E0A824;
  --prata:#9FB2C6;
  --bronze:#C0763A;
  --ouro-ink:#E0A824;
  --prata-ink:#B7C6D6;
  --bronze-ink:#D18A50;

  /* semântica */
  --ok:#12B76A;
  --alerta:#F79009;
  --erro:#F04438;

  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px;
  --ease:cubic-bezier(.22,1,.36,1);
  --sidebar-w:268px;

  --z-drop:100; --z-sticky:200; --z-backdrop:800; --z-modal:900; --z-toast:1000;
}

:root, :root[data-theme="dark"]{
  --page:#00060F;
  --page-grad-1:rgba(0,43,201,.22);
  --page-grad-2:rgba(0,145,255,.14);
  --rail:#000B17;
  --surface:#08182B;
  --surface-2:#0C2138;
  --surface-3:#102A45;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);
  --ink:#EDF4FF;
  --ink-2:#9EB4CF;
  --ink-3:#69819E;
  --accent:var(--azure);
  --accent-ink:#00060F;
  --accent-soft:rgba(0,145,255,.14);
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 12px 34px rgba(0,0,0,.45);
  --shadow-pop:0 24px 64px rgba(0,0,0,.6);
  --track:rgba(255,255,255,.09);
}

:root[data-theme="light"]{
  --ouro-ink:#8A6508;
  --prata-ink:#4E617A;
  --bronze-ink:#8A4E20;
  --page:#EEF2F8;
  --page-grad-1:rgba(0,43,201,.10);
  --page-grad-2:rgba(0,145,255,.10);
  --rail:#000B17;
  --surface:#FFFFFF;
  --surface-2:#F5F8FC;
  --surface-3:#EAF0F8;
  --line:#DCE3EB;
  --line-2:#C3D0DF;
  --ink:#0A1830;
  --ink-2:#3D4F63;
  --ink-3:#5A6B80;
  --accent:var(--cobalt);
  --accent-ink:#FFFFFF;
  --accent-soft:rgba(21,79,192,.10);
  --shadow-1:0 1px 2px rgba(10,24,48,.06);
  --shadow-2:0 10px 30px rgba(10,24,48,.10);
  --shadow-pop:0 24px 60px rgba(10,24,48,.20);
  --track:rgba(10,24,48,.10);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

/* O navegador pinta <button> com `buttontext` (quase preto) em vez de herdar.
   No tema escuro isso deixava rótulos ilegíveis sobre superfície escura. */
button{color:inherit;font-family:inherit}

body{
  font-family:'Poppins',system-ui,sans-serif;
  font-size:15px;
  line-height:1.45;
  color:var(--ink);
  background:var(--page);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* fundo técnico: dois halos radiais fixos */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1100px 700px at 12% -10%, var(--page-grad-1), transparent 62%),
    radial-gradient(900px 620px at 96% 8%, var(--page-grad-2), transparent 58%);
}

::selection{background:var(--accent);color:var(--accent-ink)}

/* rolagem */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-3);background-clip:content-box}

:focus-visible{outline:2px solid var(--azure);outline-offset:2px;border-radius:4px}

/* =========================================================== ESTRUTURA */
.shell{
  position:relative;z-index:1;
  display:grid;grid-template-columns:var(--sidebar-w) 1fr;
  height:100vh;height:100dvh;
}

/* ------------------------------------------------------------- sidebar */
.rail{
  background:var(--rail);
  border-right:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;
  overflow:hidden;
}

.rail__brand{
  padding:22px 22px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.rail__logos{display:flex;align-items:center;gap:13px}
.rail__logos img.rolsul{height:30px;width:auto}
.rail__x{
  width:1px;height:26px;background:rgba(255,255,255,.18);flex-shrink:0;
}
.rail__logos img.hiwin{height:17px;width:auto;opacity:.95}
.rail__campanha{
  margin-top:14px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px;font-weight:700;letter-spacing:.01em;color:#fff;line-height:1.05;
}
.rail__periodo{
  margin-top:3px;font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.02em;
}

.rail__nav{flex:1;overflow-y:auto;padding:14px 12px}
.rail__group{
  font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.32);padding:14px 10px 7px;
}
.rail__group:first-child{padding-top:2px}

.navitem{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:var(--r-sm);border:none;
  background:transparent;color:rgba(255,255,255,.66);
  font-family:'Poppins',sans-serif;font-size:14px;font-weight:500;
  cursor:pointer;text-align:left;position:relative;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.navitem svg{width:18px;height:18px;flex-shrink:0;stroke-width:1.7}
.navitem:hover{background:rgba(255,255,255,.07);color:#fff}
.navitem.is-active{background:rgba(0,145,255,.16);color:#fff}
.navitem.is-active::before{
  content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--cyan);
}
.navitem__badge{
  margin-left:auto;font-size:10px;font-weight:600;
  padding:2px 7px;border-radius:99px;
  background:rgba(255,255,255,.10);color:rgba(255,255,255,.75);
}
.navitem svg.lock{display:none}
.navitem.is-locked svg.lock{display:block;width:13px;height:13px;margin-left:auto;opacity:.45}

.rail__foot{
  padding:14px 16px 18px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:10px;
}
.modo{
  display:flex;align-items:center;gap:8px;
  font-size:11px;color:rgba(255,255,255,.55);
}
.modo__dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex-shrink:0}
.modo__dot.local{background:var(--alerta)}
.rail__acoes{display:flex;gap:7px}
.railbtn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.14);background:transparent;
  color:rgba(255,255,255,.72);font-family:'Poppins',sans-serif;font-size:12px;
  cursor:pointer;transition:all .16s var(--ease);
}
.railbtn:hover{border-color:var(--azure);color:#fff;background:rgba(0,145,255,.12)}
.railbtn svg{width:15px;height:15px;stroke-width:1.8}

/* ---------------------------------------------------------------- main */
.main{display:flex;flex-direction:column;overflow:hidden;min-width:0}

.topbar{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding:22px 32px 18px;border-bottom:1px solid var(--line);flex-shrink:0;
}
.topbar__eyebrow{
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:5px;
}
.topbar__title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:30px;font-weight:700;line-height:1;letter-spacing:.005em;
}
.topbar__sub{font-size:12.5px;color:var(--ink-3);margin-top:5px}
.topbar__acoes{display:flex;align-items:center;gap:9px;flex-shrink:0}

.viewport{flex:1;overflow-y:auto;padding:26px 32px 40px;min-height:0}
.view{display:none;animation:sobe .3s var(--ease)}
.view.is-active{display:block}
@keyframes sobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================================================ COMPONENTES */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:var(--r-sm);border:1px solid transparent;
  font-family:'Poppins',sans-serif;font-size:13px;font-weight:500;
  cursor:pointer;white-space:nowrap;
  transition:background .16s var(--ease),border-color .16s var(--ease),
             color .16s var(--ease),transform .1s var(--ease);
}
.btn svg{width:16px;height:16px;stroke-width:1.9;flex-shrink:0}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);color:var(--accent-ink);font-weight:600}
.btn--primary:hover{background:var(--cyan);color:var(--oxford)}
.btn--ghost{border-color:var(--line-2);background:transparent;color:var(--ink-2)}
.btn--ghost:hover{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.btn--danger{border-color:var(--erro);background:transparent;color:var(--erro)}
.btn--danger:hover{background:rgba(240,68,56,.12)}
.btn--solid-danger{background:var(--erro);color:#fff;font-weight:600}
.btn--solid-danger:hover{background:#D92D20}
.btn--lg{padding:13px 22px;font-size:14.5px}
.btn--xs{padding:5px 10px;font-size:11.5px;gap:5px}
.btn--xs svg{width:13px;height:13px}

/* Par de ações opostas no cabeçalho dos critérios: criar é verde, remover é
   vermelho. Cores semânticas, não da paleta de marca — é o único lugar do
   sistema onde duas ações contrárias ficam lado a lado. */
.btn--novo{
  border-color:rgba(18,183,106,.5);background:rgba(18,183,106,.12);
  color:var(--ok);font-weight:600;
}
.btn--novo:hover{background:rgba(18,183,106,.22);border-color:var(--ok)}
.btn--remover{
  border-color:rgba(240,68,56,.5);background:rgba(240,68,56,.12);
  color:var(--erro);font-weight:600;
}
.btn--remover:hover{background:rgba(240,68,56,.22);border-color:var(--erro)}
:root[data-theme="light"] .btn--novo{color:#0B7A47}
:root[data-theme="light"] .btn--remover{color:#B42318}
.btn--block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-1);
}
.card__head{
  padding:17px 20px 14px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.card__title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:19px;font-weight:700;letter-spacing:.01em;
}
.card__sub{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.card__body{padding:20px}
.card__body--tight{padding:14px}

.field{margin-bottom:15px}
.field > label{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;
}
.input,.select,.textarea{
  width:100%;padding:11px 13px;
  background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:var(--r-sm);color:var(--ink);
  font-family:'Poppins',sans-serif;font-size:14px;
  outline:none;transition:border-color .16s var(--ease),background .16s var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--azure);background:var(--surface-3)}
.textarea{resize:vertical;min-height:84px;line-height:1.5}
.select{
  appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369819E' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
}
:root[data-theme="light"] .select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B80' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
}
.select option{background:var(--surface);color:var(--ink)}
.field__dica{font-size:11px;color:var(--ink-3);margin-top:6px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* segmented control */
.segs{
  display:inline-flex;gap:3px;padding:4px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:11px;
}
.seg{
  padding:7px 16px;border-radius:8px;border:none;background:transparent;
  color:var(--ink-3);font-family:'Poppins',sans-serif;font-size:13px;font-weight:500;
  cursor:pointer;transition:all .16s var(--ease);white-space:nowrap;
}
.seg:hover{color:var(--ink)}
.seg.is-active{background:var(--accent);color:var(--accent-ink);font-weight:600}

/* avatar */
.av{
  border-radius:50%;overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  background:var(--surface-3);color:var(--ink-2);
  border:1px solid var(--line-2);
}
.av img{width:100%;height:100%;object-fit:cover}

/* selo / badge */
.selo{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:99px;
  font-size:10.5px;font-weight:600;letter-spacing:.04em;
  border:1px solid var(--line-2);white-space:nowrap;
  background:var(--surface-3);color:var(--ink-3);
}
.selo--premiado{background:rgba(224,168,36,.15);color:var(--ouro-ink);border-color:rgba(224,168,36,.45)}
.selo--add{background:rgba(18,183,106,.14);color:var(--ok);border-color:rgba(18,183,106,.34)}
.selo--rem{background:rgba(240,68,56,.13);color:var(--erro);border-color:rgba(240,68,56,.32)}
.selo--vendas{background:rgba(0,145,255,.14);color:var(--azure);border-color:rgba(0,145,255,.34)}
.selo--clientes{background:rgba(0,217,255,.13);color:var(--cyan);border-color:rgba(0,217,255,.32)}
.selo--itens{background:rgba(55,193,31,.13);color:var(--hiwin);border-color:rgba(55,193,31,.34)}
:root[data-theme="light"] .selo--clientes{color:#0083A8}
:root[data-theme="light"] .selo--itens{color:#2A9418}

.vazio{
  text-align:center;padding:40px 20px;color:var(--ink-3);font-size:13px;
}
.vazio svg{width:34px;height:34px;stroke-width:1.4;opacity:.4;margin-bottom:10px}
.link-inline{
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--accent);font-family:inherit;font-size:inherit;font-weight:600;
  text-decoration:underline;text-underline-offset:2px;
}
.link-inline:hover{color:var(--cyan)}
:root[data-theme="light"] .link-inline:hover{color:var(--navy)}

/* =============================================================== RANKING */
.rank{display:flex;flex-direction:column;gap:16px;height:100%}

.rank__topo{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.rank__ctx{display:flex;align-items:baseline;gap:12px}
.rank__ctxtitle{
  font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;
}
.rank__ctxsub{font-size:12px;color:var(--ink-3)}
.rank__meta{
  display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-3);
}
.rank__premio{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border-radius:99px;background:rgba(224,168,36,.12);
  border:1px solid rgba(224,168,36,.4);color:var(--ouro-ink);
  font-size:11px;font-weight:600;
}

/* --------------------------------------------------------------------------
   AS 6 VAGAS DE DESTAQUE
   Uma coluna por categoria. Cada coluna diz, no cabeçalho, quais posições
   ela entrega e qual critério coloca alguém ali — o quadro se explica
   sozinho na TV, sem legenda extra.
   ------------------------------------------------------------------------ */
.premios{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.premios--cat{grid-template-columns:1fr 1fr}

.pcol{display:flex;flex-direction:column;gap:9px;--cat:var(--accent)}
.pcol--vendas{--cat:var(--azure)}
.pcol--clientes{--cat:var(--cyan)}
.pcol--itens{--cat:var(--hiwin)}
:root[data-theme="light"] .pcol--clientes{--cat:#0083A8}
:root[data-theme="light"] .pcol--itens{--cat:#2A9418}

.pcol__hd{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:0 4px 9px;border-bottom:2px solid var(--cat);margin-bottom:2px;
}
.pcol__faixa{
  font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;
  letter-spacing:.02em;color:var(--cat);white-space:nowrap;
}
.pcol__criterio{
  font-size:10.5px;color:var(--ink-3);text-align:right;line-height:1.3;
}

/* A borda do cartão é a MEDALHA da posição na campanha (1º ouro, 2º prata,
   3º ao 6º bronze). A cor da categoria continua no número da direita e no
   cabeçalho da coluna — as duas leituras convivem sem competir. */
.pcard{
  position:relative;display:flex;align-items:center;gap:13px;
  padding:14px 16px;border-radius:var(--r-lg);overflow:visible;
  background:var(--surface);border:2px solid var(--medalha,var(--line));
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.pcard--ouro  {--medalha:var(--ouro);  --medalha-ink:var(--ouro-ink)}
.pcard--prata {--medalha:var(--prata); --medalha-ink:var(--prata-ink)}
.pcard--bronze{--medalha:var(--bronze);--medalha-ink:var(--bronze-ink)}

.pcard:hover{transform:translateY(-2px)}
.pcard--1{
  padding:19px 18px;
  background:
    radial-gradient(150% 130% at 0% 0%,color-mix(in srgb,var(--medalha) 16%,transparent),transparent 62%),
    var(--surface);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--medalha) 30%,transparent) inset;
}
.pcard--ouro.pcard--1{box-shadow:0 0 26px -8px color-mix(in srgb,var(--ouro) 60%,transparent)}

.pcard--vazio{
  border-style:dashed;background:var(--surface-2);
  border-color:color-mix(in srgb,var(--medalha) 40%,transparent);
  box-shadow:none;
}
.pcard--vazio .pcard__nome{color:var(--ink-3);font-weight:500}

.pcard .pod__coroa{
  position:absolute;top:0;left:16px;transform:translateY(-52%);
  width:26px;height:26px;color:var(--ouro);z-index:2;
}
.pcard__pos{
  font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:800;
  color:var(--medalha-ink,var(--cat));width:30px;text-align:center;flex-shrink:0;line-height:1;
}
.pcard--1 .pcard__pos{font-size:32px}
.pcard__av{
  width:44px;height:44px;font-size:15px;
  border-width:2px;border-color:color-mix(in srgb,var(--medalha,var(--line-2)) 55%,transparent);
}
.pcard--1 .pcard__av{
  width:56px;height:56px;font-size:19px;border-color:var(--medalha,var(--cat));
}
.pcard__corpo{flex:1;min-width:0}
.pcard__nome{
  font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:700;
  line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pcard--1 .pcard__nome{font-size:25px}
.pcard__sub{font-size:10.5px;color:var(--ink-3);margin-top:3px}
.pcard__sub .selo{font-size:9px;padding:2px 7px}
.pcard__valor{
  font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;
  color:var(--cat);text-align:right;flex-shrink:0;line-height:1;
}
.pcard--1 .pcard__valor{font-size:40px}
.pcard__valor small{
  display:block;font-family:'Poppins',sans-serif;font-size:9px;font-weight:400;
  color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;margin-top:3px;
}

/* restante — grid compacto */
.restante{
  display:grid;grid-template-columns:repeat(4,1fr);gap:9px;
}

/* As variantes entram sozinhas conforme a quantidade de nomes: com vagas em
   aberto o restante chega a 13 linhas, e o quadro precisa continuar cabendo
   em uma tela — no Modo TV não há rolagem, a linha que sobra some do print.
   Precisam vir depois de `.restante` para vencer no cascade. */
.restante--denso{grid-template-columns:repeat(5,1fr);gap:8px}
.restante--xdenso{grid-template-columns:repeat(5,1fr);gap:7px}
.restante--xdenso .rrow{padding:7px 10px;gap:8px}
.restante--xdenso .rrow__av{width:28px;height:28px;font-size:10.5px}
.restante--xdenso .rrow__nome{font-size:12px}
.restante--xdenso .rrow__valor{font-size:17px}
.rrow{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
}
.rrow__pos{
  font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;
  color:var(--ink-3);width:20px;text-align:center;flex-shrink:0;
}
.rrow__av{width:32px;height:32px;font-size:11.5px}
.rrow__nome{
  flex:1;min-width:0;font-size:13px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rrow__valor{
  font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:700;
  color:var(--ink);flex-shrink:0;text-align:right;line-height:1;
}
.rrow__valor small{
  display:block;font-family:'Poppins',sans-serif;font-size:8.5px;font-weight:400;
  color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;margin-top:1px;
}

.rank__legenda{
  display:flex;align-items:center;justify-content:flex-end;gap:14px;
  font-size:11px;color:var(--ink-3);padding-top:2px;
}
.rank__legenda .logos{display:flex;align-items:center;gap:12px;opacity:.65}
.rank__legenda .logos img{height:15px}

/* ============================================================== MODO TV */
body.tv{overflow:hidden}
body.tv .rail,
body.tv .topbar__acoes,
body.tv .rank__tabs-wrap{display:none}
body.tv .shell{grid-template-columns:1fr}
body.tv .topbar{padding:26px 44px 20px}
body.tv .topbar__title{font-size:44px}
body.tv .viewport{padding:22px 44px 28px;overflow:hidden}
body.tv .view{height:100%}
body.tv .rank{gap:20px}
body.tv .premios{gap:18px}
body.tv .pcol{gap:12px}
body.tv .pcol__faixa{font-size:27px}
body.tv .pcol__criterio{font-size:14px}
body.tv .pcard{padding:18px 20px;gap:16px}
body.tv .pcard--1{padding:24px 22px}
body.tv .pcard__pos{font-size:34px;width:40px}
body.tv .pcard--1 .pcard__pos{font-size:46px}
body.tv .pcard__av{width:60px;height:60px;font-size:21px}
body.tv .pcard--1 .pcard__av{width:78px;height:78px;font-size:27px}
body.tv .pcard__nome{font-size:29px}
body.tv .pcard--1 .pcard__nome{font-size:36px}
body.tv .pcard__sub{font-size:14px}
body.tv .pcard__sub .selo{font-size:12px;padding:3px 10px}
body.tv .pcard__valor{font-size:42px}
body.tv .pcard--1 .pcard__valor{font-size:56px}
body.tv .pcard__valor small{font-size:12px}
body.tv .pcard .pod__coroa{width:34px;height:34px}
body.tv .rrow{padding:12px 15px}
body.tv .rrow__valor small{font-size:11px}
body.tv .rrow__av{width:40px;height:40px;font-size:14px}
body.tv .rrow__nome{font-size:16.5px}
body.tv .rrow__valor{font-size:25px}
body.tv .rrow__pos{font-size:19px;width:26px}
body.tv .rank__ctxtitle{font-size:30px}
body.tv .rank__ctxsub,body.tv .rank__meta{font-size:15px}
body.tv .rank__premio{font-size:14px;padding:7px 15px}
body.tv .rank__legenda{font-size:14px}
body.tv .rank__legenda .logos img{height:22px}

/* O Modo TV é desenhado para 1080p. Em tela mais baixa (notebook, projetor
   720p) as escalas fixas estouram e a última linha some — não há rolagem no
   Modo TV. Aqui elas voltam para perto do tamanho normal. */
@media (max-height:900px){
  body.tv .topbar{padding:16px 32px 12px}
  body.tv .topbar__title{font-size:30px}
  body.tv .viewport{padding:14px 32px 18px}
  body.tv .rank{gap:12px}
  body.tv .pcard__av{width:52px;height:52px;font-size:17px}
  body.tv .pcard--1 .pcard__av{width:64px;height:64px;font-size:21px}
  body.tv .pcard__nome{font-size:20px}
  body.tv .pcard--1 .pcard__nome{font-size:24px}
  body.tv .pcard__valor{font-size:26px}
  body.tv .pcard--1 .pcard__valor{font-size:34px}
  body.tv .pcard__pos{font-size:22px}
  body.tv .pcard--1 .pcard__pos{font-size:28px}
  body.tv .rrow{padding:8px 11px}
  body.tv .rrow__av{width:30px;height:30px;font-size:11px}
  body.tv .rrow__nome{font-size:13px}
  body.tv .rrow__valor{font-size:18px}
  body.tv .rrow__pos{font-size:15px;width:20px}
  body.tv .rank__ctxtitle{font-size:22px}
  body.tv .rank__ctxsub,body.tv .rank__meta{font-size:12px}
  body.tv .rank__premio{font-size:11px;padding:5px 11px}
  body.tv .rank__legenda{font-size:11px}
  body.tv .rank__legenda .logos img{height:15px}
}

.tv-sair{
  position:fixed;top:16px;right:20px;z-index:var(--z-toast);
  padding:8px 15px;border-radius:99px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-family:'Poppins',sans-serif;font-size:12px;cursor:pointer;
  opacity:0;transition:opacity .2s var(--ease);
}
body.tv .tv-sair{opacity:0}
body.tv:hover .tv-sair{opacity:1}

/* ============================================================= DASHBOARD */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.kpi{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:20px 18px;text-align:center;
  box-shadow:var(--shadow-1);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.kpi__label{
  font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:11px;line-height:1.3;
}
.kpi__valor{
  font-family:'Barlow Condensed',sans-serif;font-size:42px;font-weight:800;
  line-height:.92;letter-spacing:-.015em;color:var(--kpi,var(--ink));
}
.kpi__pe{font-size:11px;color:var(--ink-3);margin-top:8px;line-height:1.35}

.kpi--accent{--kpi:var(--accent)}
.kpi--cyan{--kpi:var(--cyan)}
.kpi--hiwin{--kpi:var(--hiwin)}
.kpi--ouro{--kpi:var(--ouro)}
.kpi--roxo{--kpi:#8B5CF6}
:root[data-theme="light"] .kpi--cyan{--kpi:#0083A8}
:root[data-theme="light"] .kpi--hiwin{--kpi:#2A9418}

.dash-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;margin-bottom:16px}
.dash-grid--3{grid-template-columns:repeat(3,1fr)}

/* barras horizontais */
.barras{display:flex;flex-direction:column;gap:11px}
.barra{display:grid;grid-template-columns:120px 1fr 62px;align-items:center;gap:12px}
.barra__nome{
  font-size:13px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2);
}
.barra__track{height:9px;border-radius:5px;background:var(--track);overflow:hidden}
.barra__fill{
  height:100%;border-radius:5px;background:var(--accent);
  transition:width .7s var(--ease);
}
.barra__val{
  font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;
  text-align:right;color:var(--ink);
}

/* progresso do período */
.periodo__barra{height:10px;border-radius:6px;background:var(--track);overflow:hidden;margin:14px 0 9px}
.periodo__fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--navy),var(--azure),var(--cyan))}
.periodo__legenda{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3)}

/* --------------------------------------------------------------------------
   ROSCA (donut) — gráfico redondo com legenda percentual
   O centro carrega a leitura principal; a legenda detalha o resto.
   ------------------------------------------------------------------------ */
.rosca-wrap{display:flex;align-items:center;gap:24px}
.rosca-svg{position:relative;width:172px;height:172px;flex-shrink:0}
.rosca-svg svg{width:100%;height:100%;display:block}

/* Sem `transform-origin` aqui: a rotação mora no <g> do SVG. Declarar a
   origem no círculo fazia o navegador aplicá-la sobre o transform herdado e
   jogava o arco para fora do viewBox. */
.rosca__seg{
  animation:roscaEntra .7s var(--ease) backwards;
}
@keyframes roscaEntra{from{opacity:0}}

.rosca-centro{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:0 30px;pointer-events:none;
}
.rosca-centro__pct{
  font-family:'Barlow Condensed',sans-serif;font-size:33px;font-weight:800;
  line-height:1;letter-spacing:-.01em;
}
.rosca-centro__nome{
  font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);margin-top:5px;line-height:1.2;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rosca-centro__sub{font-size:9.5px;color:var(--ink-3);margin-top:2px}

.legenda{display:flex;flex-direction:column;gap:9px;flex:1;min-width:0;list-style:none}
.legenda__item{
  display:grid;grid-template-columns:11px 1fr auto auto;
  align-items:center;gap:10px;
}
.legenda__cor{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.legenda__nome{
  font-size:12.5px;color:var(--ink-2);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.legenda__val{
  font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;
  text-align:right;min-width:52px;
}
.legenda__abs{
  font-size:10.5px;color:var(--ink-3);text-align:right;min-width:42px;
}

/* área/evolução */
.spark{width:100%;height:auto;display:block}

/* tabela */
.tabela-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line)}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
table.tbl th{
  text-align:left;padding:11px 14px;background:var(--surface-2);
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--line);white-space:nowrap;
}
table.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--ink-2)}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover td{background:var(--surface-2)}
table.tbl td.num,table.tbl th.num{text-align:right;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:600;color:var(--ink)}
table.tbl th.num{font-family:'Poppins',sans-serif;font-size:10.5px;font-weight:600;color:var(--ink-3)}
table.tbl td.forte{color:var(--ink);font-weight:500}

/* ============================================================== REGISTRO */
.reg-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}

.tipo-toggle{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:20px}
.tipo-op{
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  border:1.5px solid var(--line-2);border-radius:var(--r);
  background:var(--surface-2);cursor:pointer;
  color:var(--ink-2);                 /* estado não selecionado: legível, discreto */
  transition:all .16s var(--ease);
}
.tipo-op svg{width:19px;height:19px;stroke-width:2;flex-shrink:0;opacity:.7}
.tipo-op__txt{font-size:13.5px;font-weight:600;line-height:1.2;text-align:left}
.tipo-op__txt small{display:block;font-size:11px;font-weight:400;color:var(--ink-3);margin-top:2px}
.tipo-op:hover{border-color:var(--line-2);background:var(--surface-3);color:var(--ink)}
.tipo-op.is-on svg{opacity:1}
.tipo-op.is-on[data-tipo="add"]{border-color:var(--ok);background:rgba(18,183,106,.10);color:var(--ok)}
.tipo-op.is-on[data-tipo="remove"]{border-color:var(--erro);background:rgba(240,68,56,.10);color:var(--erro)}
.tipo-op.is-on .tipo-op__txt small{color:inherit;opacity:.75}
:root[data-theme="light"] .tipo-op.is-on[data-tipo="add"]{color:#0B7A47}
:root[data-theme="light"] .tipo-op.is-on[data-tipo="remove"]{color:#B42318}

.field__cabecalho{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;
}
.field__cabecalho > span{display:inline-flex;align-items:center}
.field__acoes{display:inline-flex;gap:7px;flex-wrap:wrap}

/* painel de remoção de critérios */
.rem-lista{display:flex;flex-direction:column;gap:16px;max-height:52vh;overflow-y:auto;padding-right:4px}
.rem-grupo{display:flex;flex-direction:column;gap:6px}
.rem-item{
  display:flex;align-items:center;gap:11px;padding:9px 12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
}
.rem-item__nome{flex:1;min-width:0;font-size:13px}
.rem-item__uso{font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.rem-item__pts{
  font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;
  color:var(--ink-2);white-space:nowrap;
}
.rem-item__pts small{
  font-family:'Poppins',sans-serif;font-size:9px;font-weight:400;
  color:var(--ink-3);margin-left:3px;
}
.field__contador{
  font-size:10px;font-weight:600;letter-spacing:.04em;
  padding:2px 8px;border-radius:99px;margin-left:6px;
  background:var(--accent-soft);color:var(--accent);text-transform:none;
}
.field__contador:empty{display:none}

/* --- seleção de vendedor com foto --------------------------------------- */
.vgrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;
}
.vcard{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:11px 6px 9px;border-radius:var(--r);
  border:1.5px solid var(--line);background:var(--surface-2);
  cursor:pointer;color:var(--ink-2);
  transition:border-color .15s var(--ease),background .15s var(--ease),
             color .15s var(--ease),transform .12s var(--ease);
}
.vcard:hover{border-color:var(--line-2);background:var(--surface-3);color:var(--ink)}
.vcard.is-on{
  border-color:var(--accent);background:var(--accent-soft);color:var(--ink);
}
.vcard.is-on .vcard__av{border-color:var(--accent);border-width:2px}
.vcard:active{transform:scale(.97)}
.vcard__av{width:44px;height:44px;font-size:15px}
.vcard__nome{
  font-size:11.5px;font-weight:500;line-height:1.2;text-align:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* --- lista de critérios (seleção múltipla) ------------------------------ */
.crit-lista{
  display:flex;flex-direction:column;gap:14px;
  max-height:340px;overflow-y:auto;padding-right:4px;
}
.crit-grupo{display:flex;flex-direction:column;gap:5px}
.crit-grupo__hd{
  display:flex;align-items:center;gap:8px;
  padding-bottom:6px;margin-bottom:2px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--surface);z-index:1;
}
.crit-grupo__t{font-size:11px;color:var(--ink-3)}

.crit-item{
  display:flex;align-items:center;gap:11px;padding:9px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);cursor:pointer;
  transition:border-color .14s var(--ease),background .14s var(--ease);
}
.crit-item:hover{border-color:var(--line-2);background:var(--surface-3)}
.crit-item.is-on{border-color:var(--accent);background:var(--accent-soft)}
.crit-item__box{
  width:19px;height:19px;border-radius:5px;flex-shrink:0;
  border:1.5px solid var(--line-2);background:var(--surface);
  display:flex;align-items:center;justify-content:center;
}
.crit-item.is-on .crit-item__box{background:var(--accent);border-color:var(--accent)}
.crit-item__box svg{width:13px;height:13px;stroke-width:3;color:var(--accent-ink)}
.crit-item__nome{flex:1;min-width:0;font-size:13px;line-height:1.3}
.crit-item.is-on .crit-item__nome{font-weight:500}
.crit-item__pts{
  font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;
  color:var(--ink-2);flex-shrink:0;
}
.crit-item.is-on .crit-item__pts{color:var(--accent)}
.crit-item__pts small{
  font-family:'Poppins',sans-serif;font-size:9px;font-weight:400;
  color:var(--ink-3);margin-left:3px;
}

.crit-qtd{
  display:flex;align-items:center;flex-shrink:0;
  border:1px solid var(--line-2);border-radius:7px;overflow:hidden;
  background:var(--surface);
}
.crit-qtd.is-off{opacity:.32;pointer-events:none}
.crit-passo{
  width:24px;height:28px;border:none;background:transparent;
  color:var(--ink-2);font-size:15px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.crit-passo:hover{background:var(--surface-3);color:var(--accent)}
.crit-qtd__campo{
  width:38px;height:28px;border:none;border-left:1px solid var(--line);
  border-right:1px solid var(--line);background:transparent;
  color:var(--ink);text-align:center;outline:none;
  font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;
  -moz-appearance:textfield;
}
.crit-qtd__campo::-webkit-outer-spin-button,
.crit-qtd__campo::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* --- resumo dentro do modal de confirmação ------------------------------ */
.conf-lista{
  display:flex;flex-direction:column;gap:6px;margin-top:12px;
  border-top:1px solid var(--line);padding-top:12px;
}
.conf-linha{
  display:grid;grid-template-columns:auto 1fr auto auto;
  align-items:center;gap:9px;font-size:12.5px;
}
.conf-linha__nome{color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conf-linha__qtd{color:var(--ink-3);font-size:11px;white-space:nowrap}
.conf-linha__pts{
  font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;
  color:var(--ink);white-space:nowrap;
}

.previa{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 18px;border-radius:var(--r);margin:4px 0 18px;
  background:var(--accent-soft);border:1px solid var(--line-2);
  transition:all .2s var(--ease);
}
.previa.neg{background:rgba(240,68,56,.10);border-color:rgba(240,68,56,.3)}
.previa__lbl{font-size:12px;color:var(--ink-2)}
.previa__lbl b{display:block;font-size:10.5px;color:var(--ink-3);font-weight:500;margin-top:2px}
.previa__val{
  font-family:'Barlow Condensed',sans-serif;font-size:34px;font-weight:800;
  color:var(--accent);line-height:1;white-space:nowrap;
}
.previa.neg .previa__val{color:var(--erro)}

.acoes-form{display:flex;gap:10px}
.acoes-form .btn{flex:1}

/* lista de últimos lançamentos */
.log-lista{display:flex;flex-direction:column;gap:8px;max-height:560px;overflow-y:auto;padding-right:3px}
.log{
  display:flex;align-items:flex-start;gap:12px;padding:12px 14px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  border-left:3px solid var(--ok);
}
.log.rem{border-left-color:var(--erro)}
.log__av{width:34px;height:34px;font-size:12px}
.log__info{flex:1;min-width:0}
.log__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.log__nome{font-size:13.5px;font-weight:600;color:var(--ink)}
.log__crit{font-size:12.5px;color:var(--ink-2);line-height:1.35}
.log__desc{font-size:11.5px;color:var(--ink-3);font-style:italic;margin-top:3px;line-height:1.4}
.log__meta{font-size:10.5px;color:var(--ink-3);margin-top:5px;display:flex;gap:10px;flex-wrap:wrap}
.log__pts{
  font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;
  color:var(--ok);flex-shrink:0;text-align:right;line-height:1.1;
}
.log__pts.rem{color:var(--erro)}
.log__pts small{
  display:block;font-family:'Poppins',sans-serif;font-size:9.5px;font-weight:400;
  color:var(--ink-3);margin-top:1px;
}
.log__del{
  background:none;border:none;color:var(--ink-3);cursor:pointer;padding:3px;
  border-radius:5px;flex-shrink:0;transition:all .15s var(--ease);
}
.log__del:hover{color:var(--erro);background:rgba(240,68,56,.12)}
.log__del svg{width:15px;height:15px;stroke-width:1.9;display:block}

/* ============================================================== FILTROS */
.filtros{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:11px;
  padding:16px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);margin-bottom:16px;align-items:end;
}
.filtros .field{margin:0}
.filtros__acoes{display:flex;gap:9px}

.resumo-linha{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:14px;font-size:12.5px;color:var(--ink-3);flex-wrap:wrap;
}
.resumo-linha b{color:var(--ink);font-weight:600}

/* ------------------------------------------------------------ RELATÓRIOS
   Tela deliberadamente enxuta: seletor de critério, quatro campos de recorte
   e uma tabela. Nada de KPI ou gráfico — isso vive na Visão geral. */
.rel-barra{margin-bottom:14px}
.rel-barra .segs{flex-wrap:wrap}
.rel-filtros{
  display:grid;grid-template-columns:1.6fr 1fr auto auto auto;gap:10px;
  margin-bottom:16px;align-items:center;
}
.rel-topo{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:12px;flex-wrap:wrap;
}
.rel-contagem{font-size:13px;color:var(--ink-3)}
.rel-contagem b{color:var(--ink);font-weight:600}
.rel-acoes{display:flex;gap:9px}
table.tbl--rel td{vertical-align:top}
table.tbl--rel .selo{margin-left:7px;font-size:9px;padding:1px 6px}
.rel-desc{color:var(--ink-3);max-width:380px}
@media (max-width:1100px){
  .rel-filtros{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .rel-filtros .btn{grid-column:1/-1}
}

.export-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.export-card{
  display:flex;align-items:flex-start;gap:13px;padding:16px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  cursor:pointer;text-align:left;width:100%;
  font-family:'Poppins',sans-serif;
  transition:all .16s var(--ease);
}
.export-card:hover{border-color:var(--azure);background:var(--surface-3);transform:translateY(-2px)}
.export-card__ico{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);
}
.export-card__ico svg{width:19px;height:19px;stroke-width:1.8}
.export-card__t{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:3px}
.export-card__d{font-size:11.5px;color:var(--ink-3);line-height:1.45}

/* =========================================================== CONFIGURAÇÕES */
.cfg-lista{display:flex;flex-direction:column;gap:8px}
.cfg-item{
  display:flex;align-items:center;gap:12px;padding:11px 14px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
}
.cfg-item__pos{
  font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:800;
  color:var(--ink-3);width:26px;text-align:center;flex-shrink:0;
}
.cfg-item__av{width:40px;height:40px;font-size:14px;cursor:pointer;position:relative}
.cfg-item__av:hover::after{
  content:'trocar';position:absolute;inset:0;border-radius:50%;
  background:rgba(0,6,15,.72);color:#fff;font-family:'Poppins',sans-serif;
  font-size:9px;display:flex;align-items:center;justify-content:center;
}
.cfg-item__nome{flex:1;min-width:0;font-size:13.5px;font-weight:500}
.cfg-item__pts{
  font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:700;
  color:var(--accent);min-width:56px;text-align:right;
}
.cfg-item__acoes{display:flex;gap:5px;flex-shrink:0}
.icobtn{
  width:30px;height:30px;border-radius:7px;border:1px solid var(--line-2);
  background:transparent;color:var(--ink-3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s var(--ease);
}
.icobtn svg{width:15px;height:15px;stroke-width:1.9}
.icobtn:hover{border-color:var(--azure);color:var(--azure)}
.icobtn.danger:hover{border-color:var(--erro);color:var(--erro)}
.cfg-item.off{opacity:.45}

.zona-perigo{
  border:1px solid rgba(240,68,56,.32);border-radius:var(--r-lg);
  padding:18px;background:rgba(240,68,56,.05);
}
.zona-perigo h4{
  font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;
  color:var(--erro);margin-bottom:6px;
}
.zona-perigo p{font-size:12.5px;color:var(--ink-3);margin-bottom:14px;line-height:1.5}

/* ================================================== PERFIL DO VENDEDOR ==
   O placar diz quem ganha; este painel diz o que falta. */
.perfil__topo{
  display:flex;align-items:center;gap:16px;
  padding:0 0 18px;margin-bottom:18px;
  border-bottom:2px solid var(--medalha,var(--line));
}
.perfil__topo--ouro  {--medalha:var(--ouro)}
.perfil__topo--prata {--medalha:var(--prata)}
.perfil__topo--bronze{--medalha:var(--bronze)}
.perfil__av{
  width:76px;height:76px;font-size:26px;border-width:2px;
  border-color:var(--medalha,var(--line-2));
}
.perfil__id{flex:1;min-width:0}
.perfil__nome{
  font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:700;
  line-height:1.05;
}
.perfil__situacao{display:flex;gap:6px;flex-wrap:wrap;margin:7px 0 5px}
.perfil__meta{font-size:12px;color:var(--ink-3)}
.perfil__meta b{color:var(--ink);font-weight:600}

.perfil__secao{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:20px 0 11px;
}
.perfil__secao:first-of-type{margin-top:0}
.perfil__secao-nota{letter-spacing:0;text-transform:none;font-weight:400}
.perfil__cats{display:flex;flex-direction:column;gap:10px}
.perfil__hist{max-height:280px}

.pcat{
  padding:13px 15px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line);
  border-left:3px solid var(--pcat,var(--line-2));
}
.pcat--vendas  {--pcat:var(--azure)}
.pcat--clientes{--pcat:var(--cyan)}
.pcat--itens   {--pcat:var(--hiwin)}
:root[data-theme="light"] .pcat--clientes{--pcat:#0083A8}
:root[data-theme="light"] .pcat--itens{--pcat:#2A9418}

.pcat__hd{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.pcat__crit{flex:1;min-width:0;font-size:11.5px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcat__faixa{
  font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;
  color:var(--pcat);flex-shrink:0;
}
.pcat__num{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.pcat__valor{
  font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;
  color:var(--ink);line-height:1;
}
.pcat__valor small{
  font-family:'Poppins',sans-serif;font-size:10px;font-weight:400;
  color:var(--ink-3);margin-left:5px;letter-spacing:.06em;text-transform:uppercase;
}
.pcat__pos{font-size:11px;color:var(--ink-3);text-align:right}

.pcat__barra{
  position:relative;height:7px;border-radius:4px;
  background:var(--track);overflow:visible;margin-bottom:9px;
}
.pcat__fill{
  display:block;height:100%;border-radius:4px;background:var(--pcat);
  transition:width .6s var(--ease);
}
.pcat.is-fora .pcat__fill{opacity:.55}
.pcat__corte{
  position:absolute;right:0;top:11px;font-size:9.5px;color:var(--ink-3);
  letter-spacing:.02em;
}
.pcat__situacao{font-size:12px;color:var(--ink-2);line-height:1.4;margin-top:2px}
.pcat__situacao b{color:var(--ink);font-weight:600}
.pcat.is-dentro .pcat__situacao b{color:var(--ok)}
.pcat.is-aberta .pcat__situacao b{color:var(--ouro-ink)}

/* alvos clicáveis que abrem o perfil */
[data-perfil]{cursor:pointer}
.rrow[data-perfil]:hover{border-color:var(--line-2);background:var(--surface-3)}
table.tbl tbody tr[data-perfil]:hover td{background:var(--accent-soft)}

/* ============================================== CÓPIAS DE SEGURANÇA ==== */
.copias{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow-y:auto}
.copia{
  display:grid;
  grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) minmax(180px,1.3fr) auto;
  align-items:center;gap:14px;padding:11px 14px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
}
.copia.is-atual{border-color:var(--accent);background:var(--accent-soft)}
.copia__quando{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;color:var(--ink-3)}
.copia__quando b{color:var(--ink);font-weight:600;font-size:12.5px}
.copia__quando .selo{font-size:9px;padding:1px 6px}
.copia__dados{font-size:11.5px;color:var(--ink-3)}
.copia__resultado{display:flex;gap:5px;flex-wrap:wrap}
.copia__vaga{
  font-size:10px;padding:2px 7px;border-radius:99px;
  background:var(--surface-3);color:var(--ink-2);white-space:nowrap;
}
.copia__vaga--vazio{color:var(--ink-3);font-style:italic}
.copia__acoes{display:flex;gap:5px;justify-content:flex-end}

@media (max-width:900px){
  .copia{grid-template-columns:1fr auto;gap:8px}
  .copia__resultado{grid-column:1/-1}
  .copia__acoes{grid-row:1;grid-column:2}
}

/* =============================================================== MODAIS */
.backdrop{
  position:fixed;inset:0;z-index:var(--z-backdrop);
  background:rgba(0,6,15,.68);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease);
}
.backdrop.is-open{opacity:1;pointer-events:auto}
.modal{
  width:min(460px,100%);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-xl);
  box-shadow:var(--shadow-pop);padding:26px;
  transform:translateY(14px) scale(.97);transition:transform .24s var(--ease);
  max-height:88vh;overflow-y:auto;
}
.modal--lg{width:min(640px,100%)}
.backdrop.is-open .modal{transform:none}
.modal__title{
  font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:700;margin-bottom:8px;
}
.modal__desc{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-bottom:20px}
.modal__acoes{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}

/* tela de PIN */
.pin-tela{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:52vh;text-align:center;gap:6px;
}
.pin-tela svg.cadeado{width:42px;height:42px;stroke-width:1.5;color:var(--ink-3);margin-bottom:10px}
.pin-tela h3{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700}
.pin-tela p{font-size:13px;color:var(--ink-3);max-width:330px;margin-bottom:18px}
.pin-campo{display:flex;gap:9px;width:min(320px,100%)}
.pin-campo .input{text-align:center;letter-spacing:.35em;font-size:19px;font-weight:600}
.login-campos{display:flex;flex-direction:column;gap:10px;width:min(340px,100%)}

/* chip do administrador logado, no rodapé do menu */
.usuario{
  display:flex;align-items:center;gap:9px;padding:8px 10px;margin-bottom:2px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-sm);
}
.usuario__av{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,145,255,.24);color:#fff;
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
}
.usuario__nome{
  flex:1;min-width:0;font-size:12.5px;font-weight:500;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.usuario__sair{
  width:22px;height:22px;flex-shrink:0;padding:0;border:none;background:none;
  color:rgba(255,255,255,.5);cursor:pointer;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
}
.usuario__sair svg{width:14px;height:14px;stroke-width:2}
.usuario__sair:hover{color:#fff;background:rgba(255,255,255,.12)}

/* =============================================================== TOAST */
.toast-area{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  z-index:var(--z-toast);display:flex;flex-direction:column;gap:9px;align-items:center;
  pointer-events:none;
}
.toast{
  display:flex;align-items:center;gap:10px;
  padding:12px 20px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line-2);
  box-shadow:var(--shadow-pop);font-size:13.5px;color:var(--ink);
  animation:toastin .3s var(--ease);max-width:min(520px,90vw);
}
.toast svg{width:17px;height:17px;stroke-width:2;flex-shrink:0}
.toast.ok{border-color:rgba(18,183,106,.45)}
.toast.ok svg{color:var(--ok)}
.toast.erro{border-color:rgba(240,68,56,.45)}
.toast.erro svg{color:var(--erro)}
.toast b{color:var(--accent);font-weight:600}
@keyframes toastin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* =============================================================== CARGA */
.carregando{
  position:fixed;inset:0;z-index:var(--z-toast);
  background:var(--page);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;
}
.carregando img{height:38px;opacity:.9}
.spin{
  width:30px;height:30px;border-radius:50%;
  border:2.5px solid var(--line-2);border-top-color:var(--azure);
  animation:girar .8s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
.carregando p{font-size:13px;color:var(--ink-3)}

/* ========================================================== RESPONSIVO */
@media (max-width:1400px){
  .restante{grid-template-columns:repeat(3,1fr)}
  .restante--denso,.restante--xdenso{grid-template-columns:repeat(4,1fr)}
  .kpis{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:1180px){
  :root{--sidebar-w:224px}
  .dash-grid{grid-template-columns:1fr}
  .reg-grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .dash-grid--3{grid-template-columns:1fr}
}
@media (max-width:900px){
  body{overflow:auto}
  .shell{grid-template-columns:1fr;height:auto;min-height:100dvh}
  .rail{
    position:sticky;top:0;z-index:var(--z-sticky);
    border-right:none;border-bottom:1px solid rgba(255,255,255,.1);
  }
  .rail__nav{
    display:flex;gap:5px;overflow-x:auto;padding:10px;
    scrollbar-width:none;
  }
  .rail__nav::-webkit-scrollbar{display:none}
  .rail__group{display:none}
  .navitem{width:auto;white-space:nowrap;padding:9px 13px}
  .navitem.is-active::before{display:none}
  .navitem__badge{display:none}
  .rail__foot{flex-direction:row;align-items:center;justify-content:space-between}
  .rail__acoes{flex:0 0 auto}
  .topbar{padding:16px 18px 14px;flex-direction:column;align-items:flex-start}
  .topbar__title{font-size:24px}
  .viewport{padding:16px 18px 32px;overflow:visible}
  .premios,.premios--cat{grid-template-columns:1fr}
  .restante{grid-template-columns:1fr 1fr}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .barra{grid-template-columns:88px 1fr 50px}
  .donut-wrap{flex-direction:column;align-items:stretch}
  .tipo-toggle{grid-template-columns:1fr}
  .acoes-form{flex-direction:column-reverse}
}
@media (max-width:560px){
  .restante{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
}

/* ---------------------------------------------------------- impressão */
@media print{
  body{overflow:visible;background:#fff}
  body::before,.rail,.topbar__acoes,.tv-sair,.toast-area{display:none!important}
  .shell{grid-template-columns:1fr;height:auto}
  .viewport{overflow:visible;padding:0}
}

/* --------------------------------------------------- movimento reduzido */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}