:root{
  --navy:#1F2A44; --navy2:#27324f; --teal:#0F9D8C; --teal-d:#0B7268;
  --amber:#E8A33D; --red:#C0504D; --gray1:#F2F4F7; --gray2:#E4E8EE;
  --graytx:#5B6573; --ink:#1A1A1A; --line:#E1E6EE;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',Arial,sans-serif;color:var(--ink);background:#F6F8FB;display:flex;min-height:100vh}
a{text-decoration:none;color:inherit}

/* Sidebar */
.side{width:230px;background:linear-gradient(180deg,var(--navy),var(--navy2));color:#fff;
  display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:0;height:100vh;overflow:hidden}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:26px;padding:4px}
.brand .logo{width:38px;height:38px;border-radius:10px;background:var(--teal);display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:20px}
.brand b{display:block;font-size:15px;letter-spacing:.5px}
.brand small{color:#aeb8cc;font-size:11px}
nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto;min-height:0;padding-right:3px}
nav::-webkit-scrollbar{width:6px}
nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:6px}
nav::-webkit-scrollbar-track{background:transparent}
nav a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;color:#cbd3e3;font-size:13.5px}
nav a span{width:18px;text-align:center;opacity:.85}
nav a:hover{background:rgba(255,255,255,.07);color:#fff}
nav a.on{background:var(--teal);color:#fff;font-weight:600}
.side-foot{display:flex;gap:8px;margin-top:10px;border-top:1px solid rgba(255,255,255,.12);padding-top:10px;flex-shrink:0}

/* Main */
.main{flex:1;padding:26px 32px;max-width:1240px}
h1{font-size:23px;margin:0 0 2px}
.sub{color:var(--graytx);font-size:13px;margin-bottom:20px}
.row{display:flex;gap:18px;flex-wrap:wrap}

/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;position:relative;overflow:hidden}
.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
.kpi.teal:before{background:var(--teal)} .kpi.navy:before{background:var(--navy)}
.kpi.amber:before{background:var(--amber)} .kpi.red:before{background:var(--red)}
.kpi .lbl{font-size:11px;letter-spacing:.6px;color:var(--graytx);text-transform:uppercase;font-weight:600}
.kpi .val{font-size:25px;font-weight:800;margin-top:6px}
.kpi.teal .val{color:var(--teal-d)} .kpi.navy .val{color:var(--navy)}
.kpi.amber .val{color:#b9801f} .kpi.red .val{color:var(--red)}

/* Cards */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:18px}
.card h2{font-size:15px;margin:0 0 14px;color:var(--navy)}
.card.grow{flex:1;min-width:300px}

/* Calendar */
.cal{width:100%;border-collapse:collapse;table-layout:fixed}
.cal th{font-size:11px;color:#fff;background:var(--teal-d);padding:6px;font-weight:600}
.cal th.tot{background:var(--teal)}
.cal td{border:1px solid var(--gray2);height:62px;vertical-align:top;padding:5px 7px;position:relative}
.cal td .d{font-size:11px;color:var(--graytx);font-weight:600}
.cal td .v{font-size:12px;font-weight:700;margin-top:6px}
.cal td.empty{background:var(--gray1)}
.cal td.today{outline:2px solid var(--amber);outline-offset:-2px}
.cal td.today .d{background:var(--amber);color:#fff;border-radius:5px;padding:1px 6px}
.cal td.wtot{background:var(--gray1);text-align:right;font-weight:700;color:var(--teal-d);vertical-align:middle}

/* Tables */
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th{background:var(--navy);color:#fff;text-align:left;padding:9px 11px;font-weight:600;font-size:12px}
table.data td{padding:8px 11px;border-bottom:1px solid var(--line)}
table.data tr:nth-child(even) td{background:#fafbfd}
table.data td.r,table.data th.r{text-align:right}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600}
.tag.Tiny{background:#e3f1ef;color:var(--teal-d)}
.tag.Manual{background:#fdeede;color:#b9801f}
.muted{color:var(--graytx)}
.vencido{color:var(--red);font-weight:700}

/* Buttons / forms */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:9px;border:none;
  cursor:pointer;font-size:13px;font-weight:600;font-family:inherit}
.btn-primary{background:var(--teal);color:#fff} .btn-primary:hover{background:var(--teal-d)}
.btn-light{background:rgba(255,255,255,.12);color:#fff;flex:1;justify-content:center;font-size:12px;padding:8px}
.btn-light:hover{background:rgba(255,255,255,.2)}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-d)}
.btn-del{background:#fff;border:1px solid #f0d4d3;color:var(--red);padding:6px 10px;font-size:12px}
.btn-del:hover{background:var(--red);color:#fff}
.actions{display:flex;gap:8px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.spacer{flex:1}

form.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:760px}
form.grid .full{grid-column:1/3}
label{display:block;font-size:12px;font-weight:600;color:var(--graytx);margin-bottom:5px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--gray2);border-radius:9px;
  font-size:14px;font-family:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal)}
textarea{min-height:80px;resize:vertical}

/* filters bar */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;margin-bottom:16px}
.filters .f{min-width:150px} .filters .f.q{flex:1;min-width:200px}

/* flash */
.flashwrap{position:fixed;top:16px;right:24px;z-index:50;display:flex;flex-direction:column;gap:8px}
.flash{padding:11px 16px;border-radius:10px;font-size:13px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.12);animation:fade 5s forwards}
.flash.ok{background:#e3f1ef;color:var(--teal-d);border:1px solid #bfe0da}
.flash.erro{background:#fdecec;color:var(--red);border:1px solid #f3c9c8}
@keyframes fade{0%,85%{opacity:1}100%{opacity:0}}

/* upload */
.drop{border:2px dashed var(--gray2);border-radius:14px;padding:40px;text-align:center;background:#fff}
.drop input{max-width:340px;margin:14px auto 0}
.empty{text-align:center;color:var(--graytx);padding:50px}
.empty big{font-size:44px;display:block;margin-bottom:10px;opacity:.4}
@media(max-width:1100px) and (min-width:861px){.kpis{grid-template-columns:repeat(2,1fr)}}

/* logo na barra lateral */
.brand{flex-direction:column;align-items:center;gap:4px;margin-bottom:12px;flex-shrink:0}
.brand img{max-width:118px;width:100%;height:auto}
.brand .tagline{font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;color:#C7AE63;font-weight:600;text-align:center}

/* cards de link rapido */
.links{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:22px}
.linkcard{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;transition:.15s}
.linkcard:hover{border-color:var(--teal);box-shadow:0 4px 16px rgba(15,157,140,.10);transform:translateY(-1px)}
.linkcard .ic{width:40px;height:40px;border-radius:10px;background:#e3f1ef;color:var(--teal-d);
  display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.linkcard b{display:block;font-size:14px;color:var(--navy)}
.linkcard small{color:var(--graytx);font-size:12px}
.linkcard .go{margin-left:auto;color:var(--teal);font-size:18px;font-weight:700}

/* numero grande (ticket medio) */
.bignum{font-size:30px;font-weight:800;color:var(--teal-d);line-height:1.1}
.bignum small{display:block;font-size:12px;font-weight:500;color:var(--graytx);margin-top:4px}

/* barras de proporcao */
.barwrap{background:var(--gray1);border-radius:6px;height:14px;overflow:hidden}
.barfill{height:100%;background:var(--teal);border-radius:6px;min-width:2px}
.barfill.navy{background:var(--navy)} .barfill.amber{background:var(--amber)}
.inlinefilter select{min-width:160px}

/* conjuntos de dias DST/QQ/SS */
.grupos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grupo{border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center}
.grupo.leve{border-color:var(--teal);background:#f1faf7}
.grupo.pesado{border-color:#e7b3b1;background:#fdf3f3}
.grupo .gcod{font-size:18px;font-weight:800;color:var(--navy)}
.grupo .gnome{font-size:11px;color:var(--graytx);margin-bottom:6px}
.grupo .gval{font-size:18px;font-weight:800;color:var(--ink)}
.gbadge{display:inline-block;margin-top:6px;font-size:10px;padding:2px 9px;border-radius:20px;font-weight:700}
.gbadge.leve{background:#e3f1ef;color:var(--teal-d)} .gbadge.pesado{background:#fdeceb;color:var(--red)}
.reco{margin-top:12px;background:#f1faf7;border:1px solid #cfeae3;border-radius:10px;padding:10px 12px;font-size:13px;color:var(--teal-d)}
/* numero da semana no calendario */
.cal th.wk{background:var(--navy)}
.cal td.wknum{background:var(--navy);color:#fff;font-weight:700;text-align:center;vertical-align:middle;font-size:11px;width:40px;padding:0}
.cal td.wknum a{display:flex;align-items:center;justify-content:center;height:100%;color:#fff;text-decoration:none;border-radius:4px}
.cal td.wknum a:hover{background:rgba(255,255,255,.18)}
.cal td.wknum.wk-ativa{background:var(--teal)}
.cal td.wknum.wk-ativa a::after{content:"✕";font-size:9px;margin-left:5px;opacity:.85}
.cal tr.wk-row-ativa td{background:rgba(15,118,110,.06)}
.cal tr.wk-row-ativa td.empty{background:var(--gray1)}
.cal td.tem-pagar{padding:0}
.cal td.tem-pagar .dia-link{display:block;height:100%;padding:5px 7px;text-decoration:none;color:inherit;cursor:pointer}
.cal td.tem-pagar .dia-link:hover{background:rgba(15,118,110,.12);outline:2px solid var(--teal);outline-offset:-2px;border-radius:3px}
.cal td.tem-pagar .dia-link .v{color:var(--teal-d)}

/* card de atrasados */
.card.alerta{border-color:#f0cfce;background:#fffafa}
.card.alerta h2{font-size:15px}

/* area rolavel (lista de atrasados) */
.scrollbox{max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.scrollbox table.data th{position:sticky;top:0;z-index:1}

/* secoes na navegacao lateral */
.navlbl{font-size:9px;letter-spacing:1.3px;text-transform:uppercase;color:#7c87a0;margin:9px 8px 2px;font-weight:700}
/* saldo liquido / destaque receber */
.liq{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
.liq .bloco{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.liq .bloco .lbl{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--graytx);font-weight:600}
.liq .bloco .v{font-size:23px;font-weight:800;margin-top:5px}
.liq .receber .v{color:var(--teal-d)} .liq .pagar .v{color:var(--red)}
.liq .saldo{background:var(--navy);color:#fff} .liq .saldo .lbl{color:#aeb8cc} .liq .saldo .v{color:#fff}
.liq .saldo .v.neg{color:#ffb4b1}

/* destaques do ticket medio */
.destaques{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}
.dq{border-radius:16px;padding:20px;color:#fff}
.dq .t{font-size:12px;letter-spacing:.5px;text-transform:uppercase;opacity:.9;font-weight:600}
.dq .cod{font-size:40px;font-weight:800;line-height:1.1;margin-top:6px}
.dq .nm{font-size:13px;opacity:.95}
.dq .vl{font-size:26px;font-weight:800;margin-top:6px}
.dq .hint{font-size:11px;opacity:.9;margin-top:8px}
.dq.tranquilo{background:linear-gradient(135deg,#0F9D8C,#0B7268)}
.dq.apertado{background:linear-gradient(135deg,#C0504D,#9c3d3a)}
.dq.medio{background:linear-gradient(135deg,#1F2A44,#27324f)}
@media(max-width:760px){.destaques{grid-template-columns:1fr}}

/* valor a receber no calendario */
.cal td .vr{font-size:11px;font-weight:700;color:#0B7268;margin-top:2px}
.cal td.wtot .vr{color:#0B7268}
.legenda{font-size:12px;color:var(--graytx);margin-top:10px}
.legenda .pt{color:var(--ink);font-weight:600}
.legenda .rc{color:#0B7268;font-weight:600}

/* tela de login */
.loginwrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;width:100%}
.loginbox{background:#fff;border:1px solid var(--line);border-radius:18px;width:350px;overflow:hidden;
  box-shadow:0 14px 50px rgba(31,42,68,.14)}
.loginhead{background:linear-gradient(160deg,#1F2A44,#2a3654);padding:26px 20px 18px;text-align:center}
.loginhead img{max-width:120px}
.loginhead .tagline{color:#C7AE63;font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:600;margin-top:6px}
.loginbody{padding:24px 30px 30px;text-align:center}
.loginbox h1{font-size:18px;margin:0 0 18px;color:var(--navy)}
.loginbox label{display:block;text-align:left;font-size:12px;font-weight:600;color:var(--graytx);margin:12px 0 5px}
.loginbox input{margin-bottom:4px}
.loginbox .btn{width:100%;margin-top:18px;justify-content:center}
.loginerro{background:#fdecec;color:var(--red);border:1px solid #f3c9c8;border-radius:8px;padding:9px;font-size:13px;margin-bottom:6px}
.pwwrap{position:relative}
.pwwrap input{padding-right:42px}
.pweye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:var(--graytx);cursor:pointer;padding:6px;display:flex;align-items:center}
.pweye:hover{color:var(--teal-d)}
.pweye .slash{opacity:0}
.pweye.off .slash{opacity:1}

/* ===== Topo móvel + menu hambúrguer (responsivo) ===== */
.topbar{display:none}
.backdrop{display:none}
@media(max-width:860px){
  body{display:block}
  .topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:50;
    background:linear-gradient(180deg,var(--navy),var(--navy2));color:#fff;padding:10px 14px}
  .topbar img{height:26px}
  .topbar .tb-title{font-weight:700;letter-spacing:.5px}
  .hamb{background:transparent;border:0;color:#fff;font-size:24px;line-height:1;cursor:pointer;padding:2px 8px;border-radius:8px}
  .hamb:active{background:rgba(255,255,255,.12)}
  .side{position:fixed;top:0;left:0;height:100vh;width:250px;z-index:60;
    transform:translateX(-100%);transition:transform .22s ease;box-shadow:2px 0 16px rgba(0,0,0,.35)}
  body.navopen .side{transform:none}
  body.navopen .backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55}
  .main{flex:none;padding:16px 14px;max-width:none}
  .actions{flex-wrap:wrap;gap:8px}
  .kpis{grid-template-columns:repeat(2,1fr)!important}
  .liq{flex-direction:column}
  .row{flex-direction:column}
  .card{overflow-x:auto}
  .grupos{grid-template-columns:1fr!important}
  .data{font-size:12px}
  table.cal{min-width:680px}
  table.cal td,table.cal th{padding:4px 6px;font-size:11px}
  table.cal td .v,table.cal td .d,table.cal td .vr{white-space:nowrap}
}
@media(max-width:480px){
  .kpis{grid-template-columns:1fr!important}
  h1{font-size:20px}
}

/* ===== Tabela carteira (relatório) + impressão ===== */
.cart td.platcell{font-weight:800;text-align:center;vertical-align:middle}
.cart tr.plat-shopee td{background:#F2A900!important;color:#1A1A1A}
.cart tr.plat-meli td{background:#FFE600!important;color:#1A1A1A}
.cart tr.plat-shein td,.cart tr.plat-tiktok td{background:#111111!important;color:#fff}
.cart tr.plat-outros td{background:#BFBFBF!important;color:#1A1A1A}
.cart tr.subtot td{background:var(--gray1)!important;color:#1A1A1A;font-weight:800;border-top:2px solid var(--gray2)}
.print-title{display:none}
@media print{
  .side,.topbar,.backdrop,.noprint,.flashwrap,.side-foot,.sair{display:none!important}
  body{display:block;background:#fff}
  .main{padding:0!important;max-width:none}
  .card.printable{border:none;box-shadow:none;margin:0;border-radius:0}
  .print-title{display:block;font-size:16px;font-weight:800;text-align:center;padding:10px 0}
  table.data th{background:#1F2A44!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cart td,.cart th{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
}