/* Painel Comercial Promaflex — em cima do base.css (design system Baradgê) */
body{padding-top:52px}
@media(min-width:768px){ body{padding-top:56px} }

.section{padding:44px 16px}
.section.alt{background:var(--surf)}
.section.topo{padding-top:36px}
.s-inner{max-width:1100px;margin:0 auto}
.s-ey{font-size:11px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:var(--terra);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.s-ey::before{content:'';width:18px;height:2px;background:var(--terra)}
h2{font-size:clamp(22px,4.5vw,32px);font-weight:800;letter-spacing:-.025em;line-height:1.15;margin-bottom:10px}
.s-sub{font-size:14px;color:var(--body);max-width:640px;margin-bottom:22px}

nav .nav-badge{white-space:nowrap}
nav .nav-live{white-space:nowrap}
@media(max-width:420px){ nav .nav-badge{display:none} nav .nav-div{display:none} }
.nota{font-size:12px;color:var(--muted);background:var(--surf);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:12px}
.section.alt .nota{background:var(--bg)}

/* aviso de export atrasado */
.aviso{position:sticky;top:52px;z-index:150;background:var(--terra);color:#fff;font-size:13px;padding:10px 16px;text-align:center}
@media(min-width:768px){ .aviso{top:56px} }

/* hero */
.hero{padding:56px 16px 36px}
.hero-inner{display:block;max-width:1100px}
.hero-sub{max-width:560px}
h1{max-width:820px}
h1 small{display:block;font-size:14px;font-weight:500;color:rgba(255,255,255,.5);letter-spacing:0;margin-top:8px}
.kpi-dark{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:26px 0 16px}
@media(min-width:760px){ .kpi-dark{grid-template-columns:repeat(4,1fr)} }
.kd{background:var(--od-card);border:1px solid var(--od-border);border-radius:12px;padding:14px 16px;animation:sobe .5s ease both}
.kd:nth-child(2){animation-delay:.06s}.kd:nth-child(3){animation-delay:.12s}.kd:nth-child(4){animation-delay:.18s}
.kd-l{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--od-sub)}
.kd-v{font-family:'DM Mono',monospace;font-size:clamp(19px,3.2vw,26px);font-weight:500;color:#fff;margin-top:6px;letter-spacing:-.02em;white-space:nowrap}
.kd-d{font-size:11.5px;color:var(--od-sub);margin-top:4px}
.kd-d b{color:var(--lime);font-weight:600}
.kd-d b.neg{color:#F1A88F}
.ritmo{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.62)}
.ritmo .bar{flex:1 1 180px;height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.ritmo .bar i{display:block;height:100%;background:var(--lime);border-radius:3px;transition:width .8s ease}
.ritmo b{color:#fff;font-weight:600}
@keyframes sobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* kpis claros */
.kpi-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:760px){ .kpi-strip{grid-template-columns:repeat(4,1fr)} }
.kp{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.kp.alerta{border-left:3px solid var(--terra)}
.kp-l{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.kp-v{font-family:'DM Mono',monospace;font-size:clamp(17px,4.6vw,24px);font-weight:500;color:var(--ink);margin-top:6px;letter-spacing:-.02em;white-space:nowrap}
.kp-d{font-size:11.5px;color:var(--muted);margin-top:3px}

/* gráficos SVG */
.chart{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 12px 8px;overflow:hidden}
.section.alt .chart{background:var(--bg)}
.chart svg{width:100%;height:auto;display:block;font-family:'Inter',sans-serif}
.chart .ax{font-size:10px;fill:var(--muted)}
.chart .val{font-family:'DM Mono',monospace;font-size:10px;fill:var(--ink)}
.chart .lg{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--muted);padding:8px 6px 4px}
.chart .lg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.chart .vazio{padding:32px;text-align:center;color:var(--muted);font-size:13px}

/* segmentos (meses) */
.seg{display:flex;gap:4px;background:var(--surf);border:1px solid var(--line);border-radius:100px;padding:4px;margin-bottom:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;width:max-content;max-width:100%}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:0 0 auto;background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;color:var(--muted);padding:8px 16px;border-radius:100px;white-space:nowrap;transition:background .15s,color .15s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--forest);color:#fff}
.section.alt .seg{background:var(--bg)}

/* filtros */
.busca,select{width:100%;font-family:'Inter',sans-serif;font-size:14px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);margin-bottom:14px;outline:none}
.busca:focus,select:focus{border-color:var(--forest)}
.filtros{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:760px){ .filtros{grid-template-columns:2fr 1fr;gap:10px} }

/* tabelas */
.tabela{background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:auto;-webkit-overflow-scrolling:touch}
.section.alt .tabela{background:var(--bg)}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
th{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surf);position:sticky;top:0;white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right;font-family:'DM Mono',monospace;font-size:12.5px}
td.nome{white-space:normal;min-width:180px;font-weight:600;color:var(--ink)}
td.sub{color:var(--muted);font-size:12px}
.pos{color:#2b7a4b;font-weight:600}.neg{color:var(--terra);font-weight:600}.zero{color:var(--muted)}
.share{display:flex;align-items:center;gap:8px;min-width:120px}
.share i{display:block;height:6px;border-radius:3px;background:var(--forest);opacity:.85}
.share span{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted)}
.tag{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:100px;background:var(--surf);color:var(--muted)}
.tag.ok{background:rgba(30,58,47,.10);color:var(--forest)}
.tag.erro{background:var(--terra-l);color:var(--terra)}
.tag.warn{background:#FBF1D6;color:#8a6a10}
tr.clic{cursor:pointer}
tr.clic:hover td{background:var(--surf)}
tr.itens td{background:var(--surf);white-space:normal;padding:0}
.itens-in{padding:10px 14px 14px 28px}
.itens-in table{min-width:0;font-size:12px}
.itens-in th{background:transparent}
.vazio-t{padding:28px;text-align:center;color:var(--muted);font-size:13px}
.skel{height:180px;background:linear-gradient(90deg,var(--surf) 25%,#eeeeec 50%,var(--surf) 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:12px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

.rodape{padding:36px 16px 28px;text-align:center;font-size:12px;color:var(--muted)}
.rodape-sub{margin-top:4px;font-size:11px}

/* desktop: barra de abas vira menu no topo */
@media(min-width:768px){
  #tabBar{top:56px;bottom:auto;height:44px;border-top:none;border-bottom:1px solid var(--line);justify-content:center;gap:4px;padding:0 16px}
  .tab-btn{flex:0 0 auto;flex-direction:row;gap:8px;padding:0 16px;font-size:11px}
  .tab-btn svg{width:16px;height:16px}
  body{padding-top:100px;padding-bottom:0}
  .aviso{top:100px}
}