/* ==========================================================================
   Bem Amazônia — folha de estilo do sistema
   Roxo de açaí na estrutura; verde e dourado da logo como acento.
   ========================================================================== */

:root{
  --mata:#3A1145;        /* roxo açaí — estrutura */
  --mata-2:#501A60;
  --folha:#3C7A3A;       /* verde da marca — positivo */
  --dourado:#8A5F14;     /* ação primária */
  --dourado-luz:#C8912B;
  --acai:#7B3B90;        /* roxo vivo — dados */
  --ground:#F0EAF3;
  --card:#FFFFFF;
  --card-2:#F8F3FA;
  --linha:#E0D3E6;
  --linha-forte:#C7B3CF;
  --ink:#1E1424;
  --ink-2:#544A5A;
  --ink-3:#7C6F83;
  --ok:#2E7D32;  --ok-bg:#E3F0E1;
  --alerta:#9A6E06; --alerta-bg:#F7EDD2;
  --critico:#A6332A; --critico-bg:#F7E2DF;
  --info:#2E5F82; --info-bg:#E0EBF3;
  --chrome-ink:#F0E8F3;
  --chrome-ink-2:#B8A2BE;
  --sombra:0 1px 2px rgba(58,17,69,.06), 0 8px 24px -12px rgba(58,17,69,.22);
  --r:10px;
  --display:Constantia,"Iowan Old Style",Georgia,"Times New Roman",serif;
  --ui:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono","Roboto Mono",monospace;
}

*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--ui); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display); margin:0; font-weight:600; letter-spacing:-.01em; text-wrap:balance}
p{margin:0}
a{color:var(--dourado); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono); font-size:.86em}
.oculto{display:none !important}
:focus-visible{outline:2px solid var(--dourado); outline-offset:2px; border-radius:4px}

/* ------------------------------------------------------------------ shell */
.shell{display:grid; grid-template-columns:216px 1fr; min-height:100vh}
.side{
  background:var(--mata); padding:14px 10px; display:flex; flex-direction:column; gap:2px;
  border-top:3px solid transparent;
  border-image:linear-gradient(90deg,#7B3B90,#C8912B,#3C7A3A) 1;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.side .marca{display:flex; align-items:center; gap:11px; padding:8px 8px 16px}
.side .marca img{width:68px; height:auto; filter:drop-shadow(0 3px 8px rgba(0,0,0,.35))}
.side .marca span{font-family:var(--display); color:#fff; font-size:18px; line-height:1.15}
.side .grupo{
  font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--chrome-ink-2);
  padding:14px 10px 5px; font-weight:700;
}
.side a.item{
  display:flex; align-items:center; gap:9px; width:100%;
  font-size:14px; color:var(--chrome-ink-2); padding:7px 10px; border-radius:7px; text-decoration:none;
}
.side a.item:hover{background:rgba(255,255,255,.07); color:var(--chrome-ink); text-decoration:none}
.side a.item.ativo{background:var(--mata-2); color:#fff; font-weight:600; box-shadow:inset 2px 0 0 var(--dourado-luz)}
.side .ic{width:17px; text-align:center; opacity:.9}
.side .rodape{
  margin-top:auto; padding:12px 10px 4px; font-size:11.5px; color:var(--chrome-ink-2);
  border-top:1px solid rgba(255,255,255,.09);
}
.side .rodape a{color:var(--chrome-ink-2); display:block; margin-top:5px}

.conteudo{padding:20px 24px 40px; min-width:0}

/* --------------------------------------------------------------- cabeçalho */
.pagina-head{display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin-bottom:18px; flex-wrap:wrap}
.pagina-head h1{font-size:24px}
.pagina-head p{font-size:13.5px; color:var(--ink-2); margin-top:2px}
.acoes{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* ------------------------------------------------------------------ botões */
.btn{
  display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:13.5px; font-weight:600;
  border-radius:7px; padding:7px 14px; cursor:pointer; text-decoration:none;
  border:1px solid var(--mata); background:var(--mata); color:#fff;
}
.btn:hover{background:var(--mata-2); text-decoration:none; color:#fff}
.btn.sec{background:var(--card); color:var(--ink); border-color:var(--linha-forte)}
.btn.sec:hover{background:var(--card-2); color:var(--ink)}
.btn.ouro{background:var(--dourado); border-color:var(--dourado); color:#fff}
.btn.ouro:hover{background:#6f4c10; color:#fff}
.btn.perigo{background:var(--critico); border-color:var(--critico)}
.btn.perigo:hover{background:#8a2921}
.btn.verde{background:var(--folha); border-color:var(--folha)}
.btn.verde:hover{background:#2f6330}
.btn.mini{padding:4px 9px; font-size:12px}
.btn[disabled],.btn.desativado{opacity:.5; pointer-events:none}

/* -------------------------------------------------------------------- KPIs */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:11px; margin-bottom:16px}
.kpi{background:var(--card); border:1px solid var(--linha); border-radius:var(--r); padding:12px 14px; box-shadow:var(--sombra)}
.kpi .rot{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.kpi .val{font-family:var(--display); font-size:25px; margin-top:4px; font-variant-numeric:tabular-nums}
.kpi .delta{font-size:11.5px; font-weight:600; margin-top:2px}
.up{color:var(--ok)} .down{color:var(--critico)} .flat{color:var(--ink-3)}
.kpi.risco{border-color:var(--critico); box-shadow:inset 3px 0 0 var(--critico)}
.kpi.destaque{border-color:var(--acai); box-shadow:inset 3px 0 0 var(--acai)}

/* ----------------------------------------------------------------- painéis */
.painel{background:var(--card); border:1px solid var(--linha); border-radius:var(--r); overflow:hidden; box-shadow:var(--sombra)}
.painel + .painel{margin-top:13px}
.painel-head{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 15px; border-bottom:1px solid var(--linha)}
.painel-head h2,.painel-head h3{font-size:15.5px}
.painel-corpo{padding:15px}
.cols{display:grid; gap:13px}
.c-2{grid-template-columns:1.55fr 1fr}
.c-2b{grid-template-columns:1fr 1fr}
.c-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.c-2,.c-2b,.c-3{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- tabelas */
.tw{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{
  text-align:left; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; padding:9px 13px; border-bottom:1px solid var(--linha); white-space:nowrap;
}
td{padding:9px 13px; border-bottom:1px solid var(--linha); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--card-2)}
td.r,th.r{text-align:right; font-variant-numeric:tabular-nums}
td.c,th.c{text-align:center}
.vazio{padding:34px 16px; text-align:center; color:var(--ink-3); font-size:14px}

/* ------------------------------------------------------------------ pills */
.pill{display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:20px; white-space:nowrap}
.p-ok{background:var(--ok-bg); color:var(--ok)}
.p-al{background:var(--alerta-bg); color:var(--alerta)}
.p-cr{background:var(--critico-bg); color:var(--critico)}
.p-in{background:var(--info-bg); color:var(--info)}
.p-nu{background:var(--card-2); color:var(--ink-3); border:1px solid var(--linha)}
.p-acai{background:#F0E4F3; color:var(--acai)}

/* ------------------------------------------------------------- formulários */
.form{display:grid; gap:14px}
.linha-form{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:13px}
.campo{display:flex; flex-direction:column; gap:4px}
.campo label{font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
.campo .ajuda{font-size:11.5px; color:var(--ink-3)}
.campo .erro{font-size:12px; color:var(--critico); font-weight:600}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],
input[type=search],select,textarea{
  font:inherit; font-size:14px; color:var(--ink); background:var(--card);
  border:1px solid var(--linha-forte); border-radius:7px; padding:7px 10px; width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--dourado); outline-offset:0; border-color:var(--dourado)}
textarea{min-height:74px; resize:vertical}
input[type=checkbox]{width:16px; height:16px; accent-color:var(--folha)}
.check{display:flex; align-items:center; gap:8px; font-size:13.5px}
.check label{text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:500; color:var(--ink)}
fieldset{border:1px solid var(--linha); border-radius:var(--r); padding:14px; margin:0}
legend{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--acai); font-weight:700; padding:0 6px}

/* --------------------------------------------------------------- filtros */
.filtros{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:13px; align-items:center}
.filtros input,.filtros select{width:auto; min-width:150px; font-size:13.5px; padding:6px 10px}
.filtros .busca{flex:1; min-width:200px}

/* ---------------------------------------------------------------- avisos */
.avisos{display:grid; gap:8px; margin-bottom:15px}
.aviso{
  padding:10px 14px; border-radius:var(--r); font-size:13.5px; font-weight:500;
  border:1px solid var(--linha); background:var(--card); border-left-width:3px;
}
.aviso.success{border-left-color:var(--ok); background:var(--ok-bg); color:#1d5720}
.aviso.error{border-left-color:var(--critico); background:var(--critico-bg); color:#7d251e}
.aviso.warning{border-left-color:var(--alerta); background:var(--alerta-bg); color:#6f5005}
.aviso.info{border-left-color:var(--info); background:var(--info-bg); color:#204a66}

/* ------------------------------------------------------------------ regra */
.regra{
  border-left:3px solid var(--dourado); background:var(--card); border-radius:0 var(--r) var(--r) 0;
  padding:11px 15px; font-size:13px; color:var(--ink-2); margin-top:13px;
}
.regra b{color:var(--ink)}

/* ------------------------------------------------------------- barra limite */
.barra{height:6px; border-radius:4px; background:var(--card-2); border:1px solid var(--linha); overflow:hidden; min-width:80px}
.barra i{display:block; height:100%; background:var(--folha)}
.barra i.meio{background:var(--alerta)}
.barra i.cheio{background:var(--critico)}

/* ------------------------------------------------------------------ login */
.login-tela{
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:linear-gradient(158deg,#5B1E6B 0%,#3A1145 48%,#1B2E1A 100%);
}
.login-caixa{
  background:var(--card); border-radius:16px; padding:30px 28px; width:100%; max-width:390px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.5);
}
.login-caixa img{display:block; margin:0 auto 14px; width:130px}
.login-caixa h1{font-size:21px; text-align:center; margin-bottom:4px}
.login-caixa .sub{text-align:center; font-size:13px; color:var(--ink-3); margin-bottom:20px}
.login-caixa .btn{width:100%; justify-content:center; margin-top:4px}
.login-rodape{text-align:center; font-size:11.5px; color:var(--ink-3); margin-top:16px}

/* ------------------------------------------------------------------ portal */
.portal-topo{
  background:linear-gradient(158deg,#5B1E6B 0%,#3A1145 55%,#1B2E1A 100%);
  color:#fff; position:sticky; top:0; z-index:20;
  border-bottom:3px solid transparent; border-image:linear-gradient(90deg,#7B3B90,#C8912B,#3C7A3A) 1;
}
.portal-topo .dentro{max-width:1200px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:16px; height:62px}
.portal-topo img{height:38px; width:auto}
.portal-topo nav{margin-left:auto; display:flex; gap:16px; align-items:center; font-size:14px}
.portal-topo nav a{color:var(--chrome-ink-2); text-decoration:none}
.portal-topo nav a:hover,.portal-topo nav a.ativo{color:#fff}
.portal-corpo{max-width:1200px; margin:0 auto; padding:22px 20px 50px}

.prods{display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:13px}
.prod{background:var(--card); border:1px solid var(--linha); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--sombra)}
.prod .foto{height:104px; display:grid; place-items:center; font-size:36px; background:linear-gradient(150deg,var(--acai) 0%,#2B1030 100%); color:#fff; overflow:hidden}
.prod .foto img{width:100%; height:100%; object-fit:cover}
.prod .txt{padding:11px 12px 13px; display:flex; flex-direction:column; gap:6px; flex:1}
.prod .nome{font-size:13.5px; font-weight:600; line-height:1.25}
.prod .sku{font-family:var(--mono); font-size:10.5px; color:var(--ink-3)}
.prod .preco{font-family:var(--display); font-size:19px; margin-top:auto; font-variant-numeric:tabular-nums}
.prod .preco small{font-size:11.5px; color:var(--ink-3); font-family:var(--ui)}
.prod form{display:flex; gap:6px; align-items:center}
.prod form input{width:64px; padding:5px 7px; font-size:13px}
.prod form .btn{flex:1; justify-content:center; padding:5px 8px; font-size:12.5px}

.carrinho{background:var(--card); border:1px solid var(--linha); border-radius:var(--r); padding:15px; position:sticky; top:78px; box-shadow:var(--sombra)}
.carrinho h3{font-size:16px; margin-bottom:10px}
.item-c{display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:8px 0; border-bottom:1px dashed var(--linha)}
.item-c .n{color:var(--ink-2)}
.tot{display:flex; justify-content:space-between; margin-top:12px; font-family:var(--display); font-size:20px}

.opc{display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:var(--r); border:1px solid var(--linha); background:var(--card); cursor:pointer}
.opc:has(input:checked){border-color:var(--folha); box-shadow:0 0 0 2px rgba(60,122,58,.25)}
.opc.bloqueada{opacity:.6; cursor:not-allowed}
.opc .t{font-size:14.5px; font-weight:600; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.opc .d{font-size:12.5px; color:var(--ink-2); margin-top:3px}
.opc input{margin-top:3px; accent-color:var(--folha)}

/* ------------------------------------------------------------- paginação */
.paginacao{display:flex; gap:6px; align-items:center; justify-content:center; margin-top:16px; font-size:13px}
.paginacao a,.paginacao span{padding:5px 11px; border-radius:7px; border:1px solid var(--linha); background:var(--card); color:var(--ink-2)}
.paginacao .atual{background:var(--mata); color:#fff; border-color:var(--mata)}

/* --------------------------------------------------------------- gráficos */
.chart{width:100%; height:auto; display:block}
.legenda{display:flex; gap:15px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-2); margin-top:9px}
.legenda i{width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:5px}

/* ------------------------------------------------------------ responsivo */
@media(max-width:820px){
  .shell{grid-template-columns:1fr}
  .side{position:static; height:auto; flex-direction:row; overflow-x:auto; padding:8px; gap:4px}
  .side .marca,.side .grupo,.side .rodape{display:none}
  .side a.item{white-space:nowrap; width:auto}
  .conteudo{padding:16px 14px 34px}
}
@media(prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}