/* MormaiiShop · Central de Relatórios — identidade Mormaii */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Roboto+Condensed:wght@400;700&display=swap');

:root{
  --preto:#0a0a0a; --verde:#48A4A2; --laranja:#FE5000; --areia:#D9C89D;
  --cinza:#6f6f6f; --linha:#e4e4e8; --suave:#f7f7f8; --branco:#fff;
  --verde-bg:rgba(72,164,162,.08); --laranja-bg:rgba(254,80,0,.07);
  --ok:#2e9e5b; --alerta:#d98a00; --erro:#d33;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{ font-family:'Roboto',system-ui,-apple-system,sans-serif; background:var(--suave); color:var(--preto); line-height:1.55; font-size:15px; -webkit-font-smoothing:antialiased; }

/* NAV */
nav{ background:var(--preto); position:sticky; top:0; z-index:50; }
.nav-in{ max-width:1180px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:26px; height:58px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.nav-in::-webkit-scrollbar{ display:none; }
.nav-logo{ font-family:'Roboto Condensed'; font-weight:700; letter-spacing:.28em; font-size:13px; text-transform:uppercase; color:#fff; white-space:nowrap; text-decoration:none; }
.nav-logo span{ color:var(--verde); }
.nav-links{ display:flex; gap:20px; align-items:center; }
.nav-links a{ font-family:'Roboto Condensed'; font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:#9a9a9a; text-decoration:none; white-space:nowrap; padding:4px 0; border-bottom:2px solid transparent; transition:color .15s,border-color .15s; }
.nav-links a:hover{ color:#fff; }
.nav-links a.on{ color:#fff; border-bottom-color:var(--laranja); }
/* O menu rola de lado quando nao cabe, mas a barra de rolagem esta escondida —
   sem alguma pista o usuario nao descobre que ha mais abas. Este degrade na
   borda direita e a pista, e some assim que chega ao fim da rolagem. */
nav{ position:sticky; }
/* Elemento de verdade, nao pseudo: pseudo-elemento nao respondeu a regra
   condicional nem deu para medir o estado, e aqui isso importa — este degrade e
   a unica pista de que existem mais abas fora da tela. */
.navFade{ position:absolute; top:0; right:0; width:44px; height:100%;
  background:linear-gradient(to right, rgba(10,10,10,0), var(--preto) 70%);
  pointer-events:none; opacity:0; transition:opacity .2s; }

.wrap{ max-width:1180px; margin:0 auto; padding:32px 20px 80px; }

/* HEADER DE PÁGINA */
.phead{ margin-bottom:26px; }
.eyebrow{ font-family:'Roboto Condensed'; font-size:11px; text-transform:uppercase; letter-spacing:.24em; font-weight:700; color:var(--verde); margin-bottom:8px; }
h1{ font-size:2.1em; font-weight:900; letter-spacing:-.025em; line-height:1.1; }
h1 em{ font-style:normal; color:var(--verde); }
.sub{ color:var(--cinza); font-size:1em; font-weight:300; margin-top:8px; max-width:800px; }
h2{ font-size:1.35em; font-weight:900; letter-spacing:-.02em; margin:44px 0 4px; }
h2:first-of-type{ margin-top:32px; }
.h2sub{ color:var(--cinza); font-size:.9em; margin-bottom:16px; }
h3{ font-size:1.05em; font-weight:700; margin:26px 0 8px; }

/* HERO (home) */
.hero{ background:var(--preto); color:#fff; border-radius:14px; padding:38px 34px; margin-bottom:28px; position:relative; overflow:hidden; }
.hero::after{ content:""; position:absolute; right:-90px; bottom:-150px; width:340px; height:340px; border-radius:50%; background:var(--verde); opacity:.14; }
.hero h1{ font-size:2.4em; position:relative; z-index:2; }
.hero .sub{ color:#c6c6c6; position:relative; z-index:2; }
.hero-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:22px; margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.16); position:relative; z-index:2; }
.hero-kpis .v{ font-size:1.7em; font-weight:900; letter-spacing:-.02em; }
.hero-kpis .v i{ font-style:normal; color:var(--verde); }
.hero-kpis .l{ font-family:'Roboto Condensed'; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:#8f8f8f; margin-top:3px; }

/* CARDS DE NAVEGAÇÃO */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.card{ background:var(--branco); border:1px solid var(--linha); border-radius:12px; padding:22px; text-decoration:none; color:inherit; display:block; transition:box-shadow .18s, transform .18s; border-top:4px solid var(--verde); }
.card:hover{ box-shadow:0 10px 30px rgba(0,0,0,.09); transform:translateY(-2px); }
.card.alt{ border-top-color:var(--laranja); }
.card .ct{ font-size:1.12em; font-weight:900; letter-spacing:-.015em; margin-bottom:6px; }
.card .cd{ font-size:.9em; color:var(--cinza); line-height:1.5; }
.card .cgo{ font-family:'Roboto Condensed'; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--laranja); font-weight:700; margin-top:12px; display:inline-block; }

/* KPIs */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:12px; margin:16px 0; }
.kpi{ background:var(--branco); border:1px solid var(--linha); border-radius:12px; padding:16px 14px; border-top:4px solid var(--verde); }
.kpi.alt{ border-top-color:var(--laranja); }
.kpi .v{ font-size:1.5em; font-weight:900; letter-spacing:-.02em; line-height:1.1; }
.kpi .p{ font-family:'Roboto Condensed'; font-size:12px; font-weight:700; color:var(--verde); margin-top:2px; }
.kpi.alt .p{ color:var(--laranja); }
.kpi .l{ font-family:'Roboto Condensed'; font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--cinza); margin-top:5px; line-height:1.35; }

/* TABELAS */
.tw{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--branco); border:1px solid var(--linha); border-radius:12px; overflow:hidden; font-size:.92em; min-width:520px; }
th{ font-family:'Roboto Condensed'; font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--cinza); text-align:left; padding:11px 13px; border-bottom:2px solid var(--linha); white-space:nowrap; font-weight:700; }
td{ padding:9px 13px; border-bottom:1px solid var(--linha); }
tr:last-child td{ border-bottom:none; }
tbody tr:hover td{ background:var(--suave); }
.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tot td{ font-weight:900; border-top:2px solid #ccc; background:var(--suave); }
.ok{ color:var(--ok); font-weight:700; } .bad{ color:var(--erro); font-weight:700; } .warn{ color:var(--alerta); font-weight:700; }
.muted{ color:var(--cinza); font-size:.88em; }

/* BARRAS */
.bar{ display:flex; align-items:center; gap:10px; margin:7px 0; }
.bar .lab{ width:140px; font-size:.86em; text-align:right; flex-shrink:0; color:var(--cinza); }
.bar .track{ flex:1; background:#e9e9ec; border-radius:6px; height:26px; overflow:hidden; }
.bar .fill{ height:100%; border-radius:6px; background:var(--verde); display:flex; align-items:center; }
.bar .fill.o{ background:var(--laranja); } .bar .fill.g{ background:#c2c2c8; } .bar .fill.k{ background:var(--preto); }
.bar .val{ font-family:'Roboto Condensed'; font-size:12px; color:#fff; padding-left:11px; white-space:nowrap; font-weight:700; }
.bar .valout{ font-family:'Roboto Condensed'; font-size:12px; font-weight:700; width:auto; padding-left:4px; white-space:nowrap; }

/* BOXES */
.box{ background:var(--branco); border:1px solid var(--linha); border-left:4px solid var(--verde); border-radius:12px; padding:18px 20px; margin:18px 0; }
.box.o{ border-left-color:var(--laranja); background:var(--laranja-bg); }
.box.k{ background:var(--preto); color:#fff; border-color:#333; border-left-color:var(--verde); }
.box.k .bt{ color:#fff; } .box.k p{ color:#c8c8c8; } .box.k b{ color:#fff; }
.bt{ font-weight:900; font-size:1.05em; letter-spacing:-.015em; margin-bottom:7px; }
.box p{ font-size:.94em; line-height:1.55; margin-bottom:8px; color:#333; }
.box p:last-child{ margin-bottom:0; }
.box ul{ margin:6px 0 0 18px; } .box li{ font-size:.94em; line-height:1.55; margin-bottom:5px; color:#333; }

/* TIMELINE (semanal) */
.tl{ border-left:2px solid var(--linha); padding-left:22px; margin-left:8px; }
.tli{ position:relative; margin-bottom:30px; }
.tli::before{ content:""; position:absolute; left:-29px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--verde); border:3px solid var(--suave); }
.tli.now::before{ background:var(--laranja); }
.tli .td{ font-family:'Roboto Condensed'; font-size:11.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--laranja); font-weight:700; margin-bottom:4px; }
.tli .tt{ font-size:1.12em; font-weight:900; letter-spacing:-.015em; margin-bottom:8px; }

/* filtro + ordenacao de tabelas */
th.sortavel{ cursor:pointer; user-select:none; position:relative; padding-right:20px; transition:color .15s; }
th.sortavel:hover{ color:var(--preto); }
th.sortavel::after{ content:"\2195"; position:absolute; right:7px; opacity:.28; font-size:11px; }
th.sortavel.asc::after{ content:"\2191"; opacity:1; color:var(--verde); }
th.sortavel.desc::after{ content:"\2193"; opacity:1; color:var(--verde); }
.tbusca{ display:flex; align-items:center; gap:10px; margin:14px 0 -4px; }
.tbusca input{ font-family:'Roboto',sans-serif; font-size:13px; padding:7px 13px; border:1px solid var(--linha);
  border-radius:20px; background:#fff; color:var(--preto); min-width:230px; outline:none; transition:border-color .15s; }
.tbusca input:focus{ border-color:var(--verde); }
.tbusca input::placeholder{ color:#b0b0b0; }
.tbcount{ font-family:'Roboto Condensed'; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:#a8a8a8; }
.tchips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.tchip{ font-family:'Roboto Condensed'; font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  background:#fff; border:1px solid var(--linha); color:#666; padding:5px 13px; border-radius:20px; cursor:pointer; transition:.15s; }
.tchip:hover{ border-color:#bbb; color:#222; }
.tchip.on{ background:var(--verde); border-color:var(--verde); color:#fff; }

.note{ color:var(--cinza); font-size:.85em; font-style:italic; margin-top:10px; }
footer{ margin-top:64px; padding-top:22px; border-top:1px solid var(--linha); color:#a0a0a0; font-family:'Roboto Condensed'; font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; text-align:center; }

@media(max-width:640px){
  h1{ font-size:1.65em; } .hero h1{ font-size:1.75em; } .hero{ padding:26px 20px; }
  .wrap{ padding:22px 16px 60px; } .bar .lab{ width:96px; font-size:.78em; }
}

/* serie diaria em colunas */
.serie{ display:flex; align-items:flex-end; gap:4px; height:120px; margin:14px 0 6px;
  padding:10px 12px; background:var(--branco); border:1px solid var(--linha); border-radius:12px; }
.serie .sb{ flex:1; min-width:0; background:var(--verde); border-radius:3px 3px 0 0;
  min-height:2px; position:relative; transition:background .15s; }
.serie .sb:hover{ background:var(--laranja); }
.serie .sb .tip{ display:none; position:absolute; bottom:calc(100% + 7px); left:50%;
  transform:translateX(-50%); background:var(--branco); border:1px solid var(--linha);
  box-shadow:0 6px 18px rgba(0,0,0,.12); border-radius:7px; padding:6px 10px;
  font-family:'Roboto Condensed'; font-size:11.5px; white-space:nowrap; color:var(--preto); z-index:5; }
.serie .sb:hover .tip{ display:block; }
/* explicacao de criterio acima de tabelas de valor */
.criterio{ background:#FBF7EF; border:1px solid #E8DCC4; border-radius:10px;
  padding:13px 16px; margin:0 0 14px; font-size:.87em; line-height:1.55; color:#4a4a4a; }
.criterio b{ color:var(--preto); }
/* alerta de dado incompleto */
.alerta{ background:#FFF6F1; border:1px solid #F7D8C6; border-left:3px solid var(--laranja);
  border-radius:10px; padding:13px 16px; margin:0 0 14px; font-size:.87em; line-height:1.55; color:#5a3a28; }
.alerta b{ color:var(--preto); }
/* recado que precisa ser lido antes de qualquer numero da tabela */
.destaque{ background:var(--laranja-bg); border:1px solid #F6C3AA;
  border-left:5px solid var(--laranja); border-radius:10px;
  padding:16px 19px; margin:0 0 14px; font-size:1em; line-height:1.55; color:#3d2317; }
.destaque .dt{ font-family:'Roboto Condensed'; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.13em; color:var(--laranja); font-weight:700; display:block; margin-bottom:6px; }
.destaque b{ color:var(--preto); font-weight:900; }

/* legenda de cores acima de um grafico */
.legenda{ display:flex; gap:18px; flex-wrap:wrap; margin:10px 0 4px;
  font-family:'Roboto Condensed'; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--cinza); }
.legenda span{ display:flex; align-items:center; gap:6px; }
.legenda i{ width:11px; height:11px; border-radius:3px; display:inline-block; }

/* filtro de periodo — usado em todas as paginas da base financeira */
.filtro{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; background:#fff;
  border:1px solid var(--linha); border-radius:12px; padding:16px 20px; margin-bottom:6px; }
.fchips{ display:flex; gap:6px; flex-wrap:wrap; }
.fchip{ font-family:'Roboto Condensed'; font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  font-weight:700; background:#fff; border:1px solid var(--linha); color:#7a7a7a;
  padding:7px 15px; border-radius:20px; cursor:pointer; transition:.15s; }
.fchip:hover{ border-color:#bbb; color:var(--preto); }
.fchip.on{ background:var(--laranja); border-color:var(--laranja); color:#fff; }
.frange{ display:flex; align-items:center; gap:8px; }
.frange label{ font-family:'Roboto Condensed'; font-size:11px; text-transform:uppercase;
  letter-spacing:.12em; color:var(--cinza); font-weight:700; }
.frange input, .frange select{ font-family:'Roboto',sans-serif; font-size:13px; padding:6px 10px;
  border:1px solid var(--linha); border-radius:8px; background:#fff; color:var(--preto);
  outline:none; cursor:pointer; }
.frange input:focus, .frange select:focus{ border-color:var(--verde); }
/* O recorte escolhido acompanha a rolagem. Nas páginas longas dava para chegar
   numa tabela lá embaixo sem lembrar de que período ela fala. */
.periodo{ position:sticky; top:58px; z-index:40;
  font-family:'Roboto Condensed'; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.12em; color:var(--cinza); margin:0 0 18px 0; padding:9px 14px;
  background:rgba(247,247,248,.94); backdrop-filter:blur(6px);
  border:1px solid var(--linha); border-radius:0 0 10px 10px; border-top:none; }
.periodo b{ color:var(--laranja); }
@media(max-width:640px){ .periodo{ top:52px; font-size:11px; padding:8px 12px; } }
@media(max-width:640px){ .filtro{ gap:14px; padding:14px; } }

/* produto com miniatura clicavel (categorias e fabricantes) */
td.pcel{ padding-top:6px; padding-bottom:6px; min-width:270px; }
.fraco{ color:#8a8a8a; font-style:italic; }
.plink{ display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; }
a.plink:hover span{ color:var(--laranja); }
a.plink:hover .pthumb{ border-color:var(--verde); }
.pthumb{ width:46px; height:46px; flex:none; border-radius:8px; object-fit:contain;
  background:#f6f6f6; border:1px solid #ececec; transition:border-color .15s; }
.pthumb.vazio{ display:inline-block; }
@media(max-width:640px){ .pthumb{ width:36px; height:36px; } .plink{ gap:8px; }
  td.pcel{ min-width:170px; } }

.pmais{ font-family:'Roboto Condensed'; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.08em; font-weight:700; background:#fff; border:1px solid var(--linha);
  color:#7a7a7a; padding:7px 14px; border-radius:20px; cursor:pointer; transition:.15s; }
.pmais:hover{ border-color:#bbb; color:var(--preto); }

/* linha que abre a lista de itens do licenciado */
tr.clicavel{ cursor:pointer; }
tr.clicavel:hover td{ background:var(--verde-bg); }
tr.clicavel.aberta td{ background:var(--verde-bg); font-weight:700; }
.verItens{ font-family:'Roboto Condensed'; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--laranja); font-weight:700; white-space:nowrap; }
tr.clicavel.aberta .verItens::after{ content:" (aberto)"; color:var(--cinza); }
#fItens{ margin:16px 0 8px; }
.ihead{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.ihead h3{ font-size:1.05em; font-weight:900; letter-spacing:-.015em; margin:0; }
.ihead input{ font:inherit; font-size:.9em; padding:7px 12px; border:1px solid var(--linha);
  border-radius:8px; background:var(--branco); min-width:220px; }
.ihead input:focus{ outline:none; border-color:var(--verde); }