/* 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); }

.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; }
}