/* ============================================================
   PAINEL DE GESTÃO DA PLATAFORMA (ipediu)
   Barra escura de propósito: quem opera o painel da loja (roxo da marca)
   e este ao mesmo tempo precisa saber de olho onde está.
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
    --g-escuro:#0f172a; --g-escuro-2:#1e293b;
    --g-roxo:#6d28d9; --g-roxo-cl:#ede9fe;
    --g-laranja:#f59e0b;
    --g-verde:#16a34a; --g-verde-cl:#dcfce7;
    --g-vermelho:#dc2626; --g-vermelho-cl:#fee2e2;
    --g-azul:#2563eb; --g-azul-cl:#dbeafe;
    --g-borda:#e2e8f0; --g-cinza:#64748b; --g-bg:#f1f5f9;
    --g-topo-h:60px; --g-lat-w:230px;
}
body{
    font-family:'Segoe UI',Tahoma,Arial,sans-serif;
    background:var(--g-bg); color:#0f172a; line-height:1.5;
    padding-top:var(--g-topo-h);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}

/* ---------- Topo ---------- */
.g-topo{
    position:fixed; top:0; left:0; right:0; height:var(--g-topo-h);
    background:var(--g-escuro); color:#fff; display:flex; align-items:center;
    gap:12px; padding:0 18px; z-index:100;
    box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.g-marca{display:flex;align-items:center;gap:10px}
.g-marca img{height:32px;width:auto;background:#fff;border-radius:8px;padding:4px 9px}
.g-selo{
    background:var(--g-roxo); color:#fff; font-size:11px; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase;
    padding:3px 9px; border-radius:999px;
}
.g-espaco{flex:1}
.g-user{display:flex;align-items:center;gap:8px;font-size:13px}
.g-user-nome{font-weight:700}
.g-badge{
    background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24);
    padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700;
}
.g-sair{
    color:#fca5a5; border:1px solid #7f1d1d; padding:5px 12px;
    border-radius:8px; font-size:13px; font-weight:600;
}
.g-sair:hover{background:#7f1d1d;color:#fff}
.g-menu-btn{
    display:none; background:rgba(255,255,255,.14); border:none; color:#fff;
    font-size:18px; padding:6px 11px; border-radius:8px;
}

/* ---------- Lateral ---------- */
.g-lateral{
    position:fixed; top:var(--g-topo-h); bottom:0; left:0; width:var(--g-lat-w);
    background:#fff; border-right:1px solid var(--g-borda);
    padding:14px 10px; overflow-y:auto; z-index:90;
}
.g-grupo{
    font-size:11px; font-weight:800; color:var(--g-cinza);
    text-transform:uppercase; letter-spacing:.06em;
    padding:16px 12px 6px;
}
.g-item{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; border-radius:10px;
    font-size:14px; font-weight:600; color:#334155; margin-bottom:2px;
}
.g-item:hover{background:var(--g-bg)}
.g-item.ativo{background:var(--g-roxo-cl);color:var(--g-roxo)}
.g-item .ic{font-size:16px;width:20px;text-align:center}

.g-overlay{display:none}

/* ---------- Conteúdo ---------- */
.g-conteudo{margin-left:var(--g-lat-w);padding:22px}
.g-rodape{
    margin-top:34px; padding-top:14px; border-top:1px solid var(--g-borda);
    color:var(--g-cinza); font-size:12px; text-align:center;
}
.g-titulo{font-size:1.3rem;margin-bottom:4px}
.g-sub{color:var(--g-cinza);font-size:.9rem;margin-bottom:20px}

/* ---------- Flash ---------- */
.g-flash{
    padding:12px 16px; border-radius:10px; margin-bottom:18px;
    font-size:.9rem; font-weight:600; border-left:4px solid;
}
.g-flash.ok  {background:var(--g-verde-cl);   color:#166534; border-color:var(--g-verde)}
.g-flash.erro{background:var(--g-vermelho-cl);color:#991b1b; border-color:var(--g-vermelho)}

/* ---------- Cartões de indicador ---------- */
.g-cards{
    display:grid; gap:14px; margin-bottom:24px;
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.g-card{
    background:#fff; border:1px solid var(--g-borda); border-radius:14px;
    padding:16px 18px;
}
.g-card .rot{font-size:12px;color:var(--g-cinza);font-weight:700;
             text-transform:uppercase;letter-spacing:.04em}
.g-card .val{font-size:1.7rem;font-weight:800;margin-top:6px;line-height:1.1}
.g-card .pe {font-size:12px;color:var(--g-cinza);margin-top:4px}
.g-card.destaque{border-left:4px solid var(--g-roxo)}
.g-card.alerta  {border-left:4px solid var(--g-vermelho)}
.g-card.bom     {border-left:4px solid var(--g-verde)}

/* ---------- Painel / tabela ---------- */
.g-painel{
    background:#fff; border:1px solid var(--g-borda); border-radius:14px;
    padding:18px; margin-bottom:18px;
}
.g-painel h2{font-size:1rem;margin-bottom:14px}
.g-tabela{width:100%;border-collapse:collapse;font-size:13.5px}
.g-tabela th{
    text-align:left; color:var(--g-cinza); font-size:12px;
    text-transform:uppercase; letter-spacing:.04em;
    padding:8px 10px; border-bottom:1px solid var(--g-borda);
}
.g-tabela td{padding:9px 10px;border-bottom:1px solid #f1f5f9}
.g-tabela tr:last-child td{border-bottom:none}
.g-vazio{color:var(--g-cinza);font-size:.9rem;padding:14px 4px}

.g-pill{
    display:inline-block; padding:3px 10px; border-radius:999px;
    font-size:11px; font-weight:800;
}
.g-pill.ativa    {background:var(--g-verde-cl);   color:#166534}
.g-pill.pendente {background:#fef3c7;             color:#92400e}
.g-pill.suspensa {background:var(--g-vermelho-cl);color:#991b1b}
.g-pill.cancelada{background:#f1f5f9;             color:#475569}
.g-pill.trial    {background:var(--g-azul-cl);    color:#1e40af}

/* ---------- Formulários / botões ---------- */
.g-form label{display:block;font-weight:700;font-size:.87rem;margin:12px 0 5px}
.g-form input,.g-form select,.g-form textarea{
    width:100%; padding:10px 12px; border:1px solid #cbd5e1;
    border-radius:10px; font-size:.95rem; font-family:inherit;
}
.g-form input:focus,.g-form select:focus{outline:none;border-color:var(--g-roxo)}
.g-btn{
    display:inline-block; border:1px solid var(--g-borda); background:#fff;
    padding:9px 16px; border-radius:10px; font-weight:700; font-size:.9rem;
    color:#334155;
}
.g-btn:hover{background:var(--g-bg)}
.g-btn.primario{background:var(--g-roxo);border-color:var(--g-roxo);color:#fff}
.g-btn.primario:hover{background:#5b21b6}

/* ---------- Login ---------- */
.g-login-tela{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:20px; background:var(--g-escuro);
}
.g-login-cartao{
    background:#fff; border-radius:16px; padding:34px;
    width:100%; max-width:400px; box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.g-login-cartao img{width:160px;margin:0 auto 8px}
.g-login-cartao .g-selo{display:block;width:max-content;margin:0 auto 20px}
.g-login-cartao h1{font-size:1.1rem;text-align:center;margin-bottom:18px}

@media (max-width:900px){
    .g-menu-btn{display:block}
    .g-lateral{transform:translateX(-100%);transition:transform .2s}
    .g-lateral.aberta{transform:translateX(0)}
    .g-conteudo{margin-left:0;padding:16px}
    .g-overlay.ativo{
        display:block; position:fixed; inset:var(--g-topo-h) 0 0 0;
        background:rgba(0,0,0,.4); z-index:80;
    }
    .g-user-nome{display:none}
}