/* ============================================================
   PORTAL MEI — M&A Inteligência Contábil · Design System
   Tema light premium. Navy #0B2447 + Dourado #F5C518.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;450;500;600;700&display=swap');

:root {
    --primaria: #0B2447;
    --primaria-escura: #071A35;
    --primaria-suave: #E9EFF8;
    --dourado: #F5C518;
    --dourado-escuro: #D9AC06;
    --dourado-suave: #FEF8E2;

    --branco: #FFFFFF;
    --fundo: #F6F7F9;
    --borda: #E5E7EB;
    --texto: #0F172A;
    --texto-suave: #475569;
    --texto-fraco: #94A3B8;

    --verde: #059669;  --verde-suave: #ECFDF5;
    --ambar: #D97706;  --ambar-suave: #FFFBEB;
    --vermelho: #DC2626; --vermelho-suave: #FEF2F2;
    --roxo: #7C3AED;   --roxo-suave: #F3EEFF;
    --azul: #2563EB;   --azul-suave: #EFF4FF;

    --sombra: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
    --sombra-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
    --sombra-lg: 0 12px 32px rgba(15,23,42,.14);
    --raio-sm: 8px; --raio: 12px; --raio-lg: 18px; --raio-full: 999px;
    --transicao: 160ms cubic-bezier(.4,0,.2,1);
    --sidebar-w: 244px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
    font-family:'Inter',-apple-system,sans-serif;
    background:var(--fundo); color:var(--texto);
    font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { font-family:'Sora',sans-serif; font-weight:700; letter-spacing:-.02em; line-height:1.2; }
a { color:var(--primaria); text-decoration:none; }
button { font-family:inherit; }

/* ============================ LAYOUT ============================ */
.app { display:flex; min-height:100vh; }

.sidebar {
    width:var(--sidebar-w); background:var(--primaria);
    display:flex; flex-direction:column;
    position:fixed; inset:0 auto 0 0; z-index:40;
    transition:transform var(--transicao);
}
.sidebar-marca { padding:22px 20px 18px; display:flex; align-items:center; gap:11px;
    border-bottom:1px solid rgba(245,197,24,.18); }
.logo-quadro { width:42px; height:42px; border-radius:50%; background:rgba(245,197,24,.12);
    border:2px solid var(--dourado); display:grid; place-items:center; color:var(--dourado); flex-shrink:0; }
.logo-quadro i { font-size:22px; }
.marca-nome { font-family:'Sora',sans-serif; font-weight:700; font-size:15px; color:#fff; line-height:1.15; }
.marca-sub { font-size:10px; color:#8a93ad; font-weight:600; letter-spacing:.9px; text-transform:uppercase; }

.sidebar-nav { flex:1; padding:16px 12px; overflow-y:auto; }
.nav-secao { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--dourado); padding:14px 10px 6px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 12px; margin-bottom:2px;
    border-radius:var(--raio-sm); color:#c8cee0; font-size:13.5px; font-weight:500;
    transition:background var(--transicao), color var(--transicao); }
.nav-item i { font-size:18px; }
.nav-item:hover { background:rgba(25,55,109,.7); color:var(--dourado); text-decoration:none; }
.nav-item.ativo { background:rgba(25,55,109,.95); color:var(--dourado); font-weight:600; }

.sidebar-rodape { padding:14px 16px; border-top:1px solid rgba(245,197,24,.14); }
.rodape-user { font-size:13px; color:#fff; font-weight:600; }
.rodape-sub { font-size:11px; color:#8a93ad; margin-bottom:8px; }
.btn-sair { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:#c8cee0;
    border:1px solid rgba(245,197,24,.3); border-radius:var(--raio-sm); padding:6px 12px;
    background:transparent; cursor:pointer; width:100%; justify-content:center; }
.btn-sair:hover { background:rgba(25,55,109,.7); color:var(--dourado); text-decoration:none; }

.conteudo { flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-width:0; }

.topbar { background:var(--branco); border-bottom:1px solid var(--borda);
    padding:14px 28px; display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:30; }
.topbar h1 { font-size:19px; }
.topbar .sub { font-size:12.5px; color:var(--texto-fraco); }
.topbar-direita { margin-left:auto; display:flex; align-items:center; gap:12px; }
.hamburger { display:none; background:none; border:none; font-size:24px; color:var(--primaria); cursor:pointer; }

.miolo { padding:26px 28px 48px; max-width:1280px; width:100%; }

/* ============================ COMPONENTES ============================ */
.grid { display:grid; gap:16px; }
.g4 { grid-template-columns:repeat(4,1fr); }
.g3 { grid-template-columns:repeat(3,1fr); }
.g2 { grid-template-columns:repeat(2,1fr); }
.g2-13 { grid-template-columns:1fr 2fr; }
.g2-31 { grid-template-columns:2fr 1fr; }

.card { background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio);
    box-shadow:var(--sombra); padding:20px; }
.card-titulo { font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.card-titulo i { color:var(--primaria); font-size:19px; }

.kpi { background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio);
    box-shadow:var(--sombra); padding:18px 20px; position:relative; overflow:hidden; }
.kpi::before { content:''; position:absolute; inset:0 auto 0 0; width:4px; background:var(--cor,var(--primaria)); }
.kpi-valor { font-family:'Sora',sans-serif; font-size:22px; font-weight:700; }
.kpi-rotulo { font-size:11px; font-weight:600; color:var(--texto-fraco); text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }
.kpi-sub { font-size:12.5px; color:var(--texto-suave); margin-top:4px; }
.kpi i.kpi-icone { position:absolute; right:16px; top:16px; font-size:24px; color:var(--cor,var(--primaria)); opacity:.25; }

.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:var(--raio-full);
    font-size:11.5px; font-weight:700; }
.badge.verde { background:var(--verde-suave); color:var(--verde); }
.badge.ambar { background:var(--ambar-suave); color:var(--ambar); }
.badge.vermelho { background:var(--vermelho-suave); color:var(--vermelho); }
.badge.azul { background:var(--azul-suave); color:var(--azul); }
.badge.roxo { background:var(--roxo-suave); color:var(--roxo); }
.badge.navy { background:var(--primaria-suave); color:var(--primaria); }
.badge.dourado { background:var(--dourado-suave); color:var(--dourado-escuro); }

.progresso { height:10px; background:var(--primaria-suave); border-radius:var(--raio-full); overflow:hidden; }
.progresso > div { height:100%; border-radius:var(--raio-full); transition:width .6s ease; }

/* botões */
.btn { display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:var(--raio-sm);
    font-size:13.5px; font-weight:600; border:1px solid transparent; cursor:pointer;
    transition:all var(--transicao); text-decoration:none !important; }
.btn-primario { background:var(--primaria); color:var(--dourado); }
.btn-primario:hover { background:var(--primaria-escura); }
.btn-contorno { background:var(--branco); color:var(--primaria); border-color:var(--borda); }
.btn-contorno:hover { border-color:var(--primaria); }
.btn-perigo { background:transparent; color:var(--vermelho); border-color:transparent; padding:6px 8px; }
.btn-perigo:hover { background:var(--vermelho-suave); }
.btn-mini { padding:5px 12px; font-size:12.5px; }

/* formulários */
label { font-size:12px; font-weight:600; color:var(--texto-suave); display:block; margin-bottom:4px; }
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=month], input[type=file], select, textarea {
    width:100%; padding:9px 12px; border:1px solid var(--borda); border-radius:var(--raio-sm);
    font-size:14px; font-family:inherit; background:var(--branco); color:var(--texto);
    transition:border-color var(--transicao), box-shadow var(--transicao);
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--primaria);
    box-shadow:0 0 0 3px var(--primaria-suave); }
.campo { margin-bottom:14px; }
.linha-campos { display:flex; gap:12px; }
.linha-campos .campo { flex:1; }

/* tabela */
.tabela { width:100%; border-collapse:collapse; font-size:13.5px; }
.tabela th { background:var(--primaria); color:var(--dourado); font-weight:700; font-size:12px;
    letter-spacing:.4px; padding:9px 12px; text-align:left; white-space:nowrap; }
.tabela th:first-child { border-radius:var(--raio-sm) 0 0 0; }
.tabela th:last-child { border-radius:0 var(--raio-sm) 0 0; }
.tabela td { padding:9px 12px; border-bottom:1px solid var(--borda); vertical-align:middle; }
.tabela tr:nth-child(even) td { background:#f8fafc; }
.tabela tr:hover td { background:var(--primaria-suave); }
.tabela .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.valor-entrada { color:var(--verde); font-weight:600; }
.valor-saida { color:var(--vermelho); font-weight:600; }

.cat-pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
    padding:3px 10px; border-radius:var(--raio-full); background:var(--fundo); color:var(--texto-suave); }
.cat-pill i { font-size:14px; }

/* flash */
.flashes { position:fixed; top:18px; right:18px; z-index:100; display:flex; flex-direction:column; gap:8px; }
.flash { padding:12px 18px; border-radius:var(--raio); box-shadow:var(--sombra-lg); font-size:13.5px;
    font-weight:500; display:flex; gap:8px; align-items:center; animation:entrar .25s ease; max-width:420px; }
.flash.ok { background:var(--verde); color:#fff; }
.flash.erro { background:var(--vermelho); color:#fff; }
.flash.aviso { background:var(--ambar); color:#fff; }
@keyframes entrar { from { transform:translateY(-8px); opacity:0; } }

/* tabs */
.tabs { display:flex; gap:4px; border-bottom:2px solid var(--borda); margin-bottom:20px; flex-wrap:wrap; }
.tab { padding:10px 18px; font-size:14px; font-weight:600; color:var(--texto-suave);
    border:none; background:none; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; }
.tab.ativa { color:var(--primaria); border-bottom-color:var(--dourado); }
.tab-painel { display:none; }
.tab-painel.ativa { display:block; }

/* toggle PJ|PF */
.escopo-toggle { display:inline-flex; background:var(--primaria-suave); border-radius:var(--raio-full); padding:4px; }
.escopo-toggle a { padding:7px 22px; border-radius:var(--raio-full); font-size:13.5px; font-weight:700;
    color:var(--texto-suave); }
.escopo-toggle a.ativo { background:var(--primaria); color:var(--dourado); }
.escopo-toggle a:hover { text-decoration:none; }

/* ============================ LOGIN ============================ */
body.pagina-login { background:linear-gradient(135deg,var(--primaria) 0%,#12305e 60%,#19376D 100%);
    background:linear-gradient(135deg,#071A35 0%,#0B2447 55%,#19376D 100%);
    display:grid; place-items:center; min-height:100vh; padding:20px; }
.login-card { background:var(--branco); border-radius:var(--raio-lg); box-shadow:var(--sombra-lg);
    padding:44px 40px 36px; width:100%; max-width:420px; text-align:center; }
.login-card .logo-quadro { margin:0 auto 14px; width:64px; height:64px; background:var(--primaria);
    border-color:var(--dourado); }
.login-card .logo-quadro i { font-size:32px; }
.login-titulo { font-size:26px; margin-bottom:2px; }
.login-sub { color:var(--texto-suave); font-size:14px; margin-bottom:6px; }
.login-selo { display:inline-block; background:var(--primaria); color:var(--dourado); font-weight:700;
    font-size:11.5px; padding:4px 16px; border-radius:var(--raio-full); margin-bottom:24px; }
.login-card form { text-align:left; }
.login-card .btn { width:100%; justify-content:center; padding:12px; font-size:15px; margin-top:6px; }
.login-rodape { margin-top:22px; font-size:11.5px; color:var(--texto-fraco); }

/* ============================ HUB (PJ · PF · GERAL) ============================ */
.hub-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.hub-card {
    background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio-lg);
    box-shadow:var(--sombra); padding:24px 22px 20px; display:flex; flex-direction:column;
    color:var(--texto); position:relative; overflow:hidden;
    transition:transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.hub-card::after { content:''; position:absolute; inset:0 0 auto 0; height:5px; background:var(--acento,var(--primaria)); }
.hub-card:not(.desativado):hover { transform:translateY(-4px); box-shadow:var(--sombra-lg);
    border-color:var(--acento,var(--primaria)); text-decoration:none; }
.hub-card.pj    { --acento:var(--primaria); }
.hub-card.pf    { --acento:var(--roxo); }
.hub-card.geral { --acento:var(--dourado-escuro); }
.hub-card.desativado { opacity:.62; }

.hub-topo { display:flex; align-items:center; gap:13px; margin-bottom:12px; }
.hub-icone { width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
    background:color-mix(in srgb, var(--acento) 12%, white); color:var(--acento); flex-shrink:0; }
.hub-icone i { font-size:27px; }
.hub-titulo { font-family:'Sora',sans-serif; font-size:19px; font-weight:700; line-height:1.15; }
.hub-sub { font-size:11.5px; color:var(--texto-fraco); font-weight:600; text-transform:uppercase; letter-spacing:.6px; }
.hub-desc { font-size:13.5px; color:var(--texto-suave); margin-bottom:16px; min-height:38px; }

.hub-nums { display:flex; gap:10px; padding:12px 0; border-top:1px solid var(--borda); }
.hub-nums > div { flex:1; }
.hub-nums span { display:block; font-size:11px; color:var(--texto-fraco); text-transform:uppercase;
    letter-spacing:.4px; font-weight:600; }
.hub-nums b { font-family:'Sora',sans-serif; font-size:17px; font-weight:700; }
.hub-nums b.verde { color:var(--verde); } .hub-nums b.vermelho { color:var(--vermelho); }

.hub-teto { padding:8px 0 4px; }
.hub-alerta { font-size:12.5px; font-weight:600; color:var(--vermelho); background:var(--vermelho-suave);
    padding:6px 12px; border-radius:var(--raio-sm); margin-top:8px; display:flex; gap:6px; align-items:center; }
.hub-entrar { margin-top:auto; padding-top:14px; font-size:13.5px; font-weight:700; color:var(--acento);
    display:flex; align-items:center; gap:6px; }
.hub-card:hover .hub-entrar i { transform:translateX(3px); transition:transform var(--transicao); }

.atalhos { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.atalho { display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 10px;
    border:1px solid var(--borda); border-radius:var(--raio); color:var(--texto-suave);
    font-size:12.5px; font-weight:600; text-align:center; transition:all var(--transicao); }
.atalho i { font-size:26px; color:var(--primaria); }
.atalho:hover { border-color:var(--primaria); background:var(--primaria-suave); text-decoration:none; color:var(--primaria); }

/* pills de mês */
.pills { display:flex; gap:5px; flex-wrap:wrap; }
.pill { padding:5px 13px; border-radius:var(--raio-full); font-size:12.5px; font-weight:600;
    border:1px solid var(--borda); background:var(--branco); color:var(--texto-suave); }
.pill:hover { border-color:var(--primaria); color:var(--primaria); text-decoration:none; }
.pill.ativo { background:var(--primaria); border-color:var(--primaria); color:var(--dourado); }

@media (max-width:1024px){ .hub-grid { grid-template-columns:1fr; } .atalhos { grid-template-columns:repeat(2,1fr); } }

/* ============================ DRE / CLASSIFICAÇÃO ============================ */
.dre { display:flex; flex-direction:column; gap:10px; }
.dre-grupo { border:1px solid var(--borda); border-radius:var(--raio); overflow:hidden; background:var(--branco); }
.dre-cab { display:flex; align-items:center; gap:11px; padding:13px 16px; cursor:pointer; user-select:none; }
.dre-cab:hover { background:#fbfcfe; }
.dre-icone { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; }
.dre-icone i { font-size:18px; }
.dre-nome { font-family:'Sora',sans-serif; font-weight:700; font-size:14px; flex:1; }
.dre-pct { font-size:12px; font-weight:700; color:var(--texto-fraco); background:var(--fundo);
    padding:2px 9px; border-radius:var(--raio-full); }
.dre-total { font-family:'Sora',sans-serif; font-weight:700; font-size:15px; min-width:120px; text-align:right; }
.dre-total.verde { color:var(--verde); } .dre-total.vermelho { color:var(--vermelho); }
.dre-seta { color:var(--texto-fraco); transition:transform var(--transicao); }
.dre-grupo.fechado .dre-seta { transform:rotate(-90deg); }
.dre-barra { height:4px; background:var(--fundo); }
.dre-barra > div { height:100%; transition:width .5s ease; }
.dre-itens { padding:6px 16px 12px 61px; }
.dre-grupo.fechado .dre-itens, .dre-grupo.fechado .dre-barra { display:none; }
.dre-item { display:flex; align-items:center; gap:9px; padding:6px 0; font-size:13.5px;
    border-bottom:1px dashed var(--borda); }
.dre-item:last-child { border-bottom:none; }
.dre-item i { font-size:16px; }
.dre-item-nome { flex:1; color:var(--texto-suave); }
.dre-item-pct { font-size:11.5px; color:var(--texto-fraco); min-width:46px; text-align:right; }
.dre-item-valor { font-weight:600; min-width:105px; text-align:right; font-variant-numeric:tabular-nums; }
.dre-resultado { display:flex; align-items:center; gap:12px; padding:15px 18px; border-radius:var(--raio);
    font-family:'Sora',sans-serif; font-weight:700; font-size:15px; margin-top:4px; }
.dre-resultado b { font-size:20px; margin-left:auto; }
.dre-resultado-pct { font-size:12px; font-weight:600; opacity:.75; min-width:96px; text-align:right; }
.dre-resultado.positivo { background:var(--verde-suave); color:var(--verde); border:1px solid #A7F3D0; }
.dre-resultado.negativo { background:var(--vermelho-suave); color:var(--vermelho); border:1px solid #FECACA; }

/* ---- DRE contábil (tabela) ---- */
.dre-tabela { width:100%; border-collapse:collapse; font-size:13.5px; }
.dre-tabela td { padding:8px 10px; border-bottom:1px solid var(--borda); }
.dre-tabela tr.secao td { font-weight:600; }
.dre-tabela tr.subtotal td { background:var(--primaria-suave); font-family:'Sora',sans-serif;
    font-weight:700; color:var(--primaria); border-bottom:2px solid var(--primaria); }
.dre-tabela tr.extra td { background:var(--roxo-suave); color:var(--roxo); font-weight:600; }
.dre-rotulo { display:flex; align-items:center; gap:7px; }
.dre-toggle { cursor:pointer; color:var(--texto-fraco); display:inline-flex; }
.dre-toggle i { transition:transform var(--transicao); }
tr.aberto .dre-toggle i { transform:rotate(90deg); }
.dre-av { color:var(--texto-fraco); font-size:12px; width:70px; }
.dre-valor { font-family:'Sora',sans-serif; font-weight:700; width:140px; }
.dre-valor.neg { color:var(--vermelho); }
.dre-detalhe { display:none; }
tr.aberto + .dre-detalhe, tr.aberto + .dre-detalhe ~ .dre-detalhe { display:table-row; }
.dre-detalhe td { background:#fbfcfe; font-size:12.5px; color:var(--texto-suave); }
.dre-rotulo-filho { padding-left:34px !important; display:flex; align-items:center; gap:7px; }
.dre-detalhe td:last-child { font-variant-numeric:tabular-nums; }

/* ============================ ADMIN ============================ */
.adm-lista { display:flex; flex-direction:column; gap:8px; }
.adm-cliente { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--borda);
    border-radius:var(--raio); transition:all var(--transicao); }
.adm-cliente:hover { border-color:var(--primaria); box-shadow:var(--sombra); text-decoration:none; }
.adm-avatar { width:38px; height:38px; border-radius:50%; background:var(--primaria-suave); color:var(--primaria);
    display:grid; place-items:center; font-weight:700; font-size:14px; flex-shrink:0; font-family:'Sora',sans-serif; }
.adm-nome { font-weight:600; font-size:14px; }
.adm-cnpj { font-size:11.5px; color:var(--texto-fraco); }
.adm-medidor { flex:1; max-width:220px; }
.adm-medidor-topo { display:flex; justify-content:space-between; font-size:11px; color:var(--texto-fraco);
    margin-bottom:3px; font-weight:600; }

@media (max-width:720px){
    .dre-itens { padding-left:16px; }
    .dre-total { min-width:auto; font-size:13.5px; }
    .dre-pct { display:none; }
    .adm-medidor { display:none; }
}

/* ============================ CUPOM ============================ */
.cupom-hero { text-align:center; padding:8px 0 22px; }
.cupom-hero i { font-size:56px; color:var(--primaria); }
.cupom-hero h2 { font-size:22px; margin:8px 0 4px; }
.cupom-hero p { color:var(--texto-suave); font-size:14px; max-width:460px; margin:0 auto; }
.btn-camera { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    width:100%; padding:34px 20px; border:2px dashed var(--primaria); border-radius:var(--raio-lg);
    background:var(--primaria-suave); color:var(--primaria); font-weight:700; font-size:16px;
    cursor:pointer; transition:all var(--transicao); }
.btn-camera:hover { background:var(--dourado-suave); border-color:var(--dourado-escuro); }
.btn-camera i { font-size:44px; }

/* ============================ RESPONSIVO ============================ */
@media (max-width: 1024px) {
    .g4 { grid-template-columns:repeat(2,1fr); }
    .g3 { grid-template-columns:repeat(2,1fr); }
    .g2-13, .g2-31 { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
    .sidebar { transform:translateX(-100%); box-shadow:var(--sombra-lg); }
    .sidebar.aberta { transform:translateX(0); }
    .conteudo { margin-left:0; }
    .hamburger { display:block; }
    .miolo { padding:18px 14px 60px; }
    .g4, .g3, .g2 { grid-template-columns:1fr; }
    .linha-campos { flex-direction:column; gap:0; }
    .topbar { padding:12px 14px; }
    .tabela { font-size:12.5px; }
    .tabela th, .tabela td { padding:7px 8px; }
    .esconder-mobile { display:none; }
}
.sombra-fundo { display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:35; }
.sombra-fundo.ativa { display:block; }