:root {
  --menu: #0f1a2b;
  --menu-borda: #1e2a3d;
  --menu-texto: #e5e9f0;
  --azul: #2563eb;
  --azul-escuro: #1d4ed8;
  --fundo: #f1f4f8;
  --cartao: #ffffff;
  --borda: #dfe4ec;
  --texto: #111827;
  --suave: #64748b;
  --verde: #16a34a;
  --verde-fundo: #eaf7ee;
  --amarelo: #eab308;
  --amarelo-fundo: #fef9e7;
  --vermelho: #dc2626;
  --vermelho-fundo: #fdecec;
  --cinza: #94a3b8;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; color: var(--texto); background: var(--fundo); }
a { color: var(--azul); }

/* ---------- menu lateral */
#menu { position: fixed; inset: 0 auto 0 0; width: 210px; background: var(--menu); color: var(--menu-texto);
        display: flex; flex-direction: column; z-index: 20; }
.logo { margin: 14px; background: #fff; border-radius: 10px; padding: 10px; text-align: center; min-height: 92px;
        display: flex; align-items: center; justify-content: center; }
.logo img { max-width: 100%; max-height: 90px; }
.logo img + .logo-texto { display: none; }
.logo-texto b { display: block; color: #c1121f; font-size: 20px; letter-spacing: .5px; line-height: 1.1; }
.logo-texto span { display: block; color: #c1121f; font-size: 11px; letter-spacing: 2.5px; margin-top: 3px; }
nav a { display: block; padding: 10px 16px; color: var(--menu-texto); text-decoration: none; border-bottom: 1px solid var(--menu-borda); }
nav a:hover { background: #17243a; }
nav a.ativo { background: var(--azul); font-weight: 600; }
.menu-rodape { margin-top: auto; padding: 14px; border-top: 1px solid var(--menu-borda); font-size: 12px; color: #9fb0c8; }
.menu-rodape button { margin-top: 8px; width: 100%; padding: 8px; border: 0; border-radius: 6px; background: var(--azul); color: #fff; cursor: pointer; font-weight: 600; }
.menu-rodape button:hover { background: var(--azul-escuro); }
#abrir-menu { display: none; }

/* ---------- conteúdo */
main { margin-left: 210px; padding: 18px 28px 40px; min-height: 100%; }
.kicker { color: var(--azul); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
h1 { margin: 2px 0 2px; font-size: 26px; }
.subtitulo { color: var(--suave); margin: 0 0 14px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .4px; margin: 0 0 10px; }
.bloco { background: var(--cartao); border: 1px solid var(--borda); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.carregando { padding: 40px; text-align: center; color: var(--suave); }
.erro { background: var(--vermelho-fundo); border: 1px solid #f5b5b5; color: #7f1d1d; padding: 14px; border-radius: 8px; }
.nota { color: var(--suave); font-size: 12px; margin-top: 6px; }

/* ---------- barra de período */
.periodo { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin-bottom: 14px; }
.periodo button { border: 0; background: transparent; color: var(--azul); font-weight: 600; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.periodo button:hover { background: #e6edfb; }
.periodo button.ativo { background: var(--azul); color: #fff; }
.periodo label { font-size: 11px; color: var(--suave); display: flex; flex-direction: column; gap: 2px; margin-left: 6px; }
.periodo input { padding: 6px 8px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; }

/* ---------- faixa de resumo e ações */
.banner { display: flex; gap: 14px; align-items: center; border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; border: 1px solid; }
.banner.vermelho { background: var(--vermelho-fundo); border-color: #f3b4b4; }
.banner.amarelo { background: var(--amarelo-fundo); border-color: #f2dc8f; }
.banner.verde { background: var(--verde-fundo); border-color: #b5e2c2; }
.selo { color: #fff; font-weight: 700; padding: 10px 14px; border-radius: 6px; white-space: nowrap; }
.vermelho .selo { background: #b91c1c; } .amarelo .selo { background: #ca8a04; } .verde .selo { background: var(--verde); }
.banner b { display: block; margin-bottom: 3px; }
.acoes ol { margin: 6px 0 0; padding-left: 20px; }
.acoes li { margin: 4px 0; }
.tag-urgente { color: var(--vermelho); font-weight: 700; }
.tag-atencao { color: #b45309; font-weight: 700; }
.tag-info { color: var(--azul); font-weight: 700; }

/* ---------- cartões */
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin-bottom: 14px; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-left: 5px solid var(--cinza); border-radius: 8px; padding: 14px; }
.cartao.verde { border-left-color: var(--verde); } .cartao.amarelo { border-left-color: var(--amarelo); } .cartao.vermelho { border-left-color: var(--vermelho); }
.cartao-topo { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.bola { width: 12px; height: 12px; border-radius: 50%; background: var(--cinza); }
.verde .bola { background: var(--verde); } .amarelo .bola { background: var(--amarelo); } .vermelho .bola { background: var(--vermelho); }
.cartao-valor { font-size: 24px; font-weight: 800; margin: 10px 0 2px; }
.cartao.verde .cartao-valor { color: #15803d; }
.cartao-sub { color: var(--suave); font-size: 12px; margin-bottom: 10px; }
.linhas { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.linhas td { padding: 3px 0; border-bottom: 1px dashed #edf0f5; vertical-align: top; }
.linhas td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.linhas small { display: block; font-weight: 400; color: var(--suave); }
.sobe { color: var(--verde); } .desce { color: var(--vermelho); }
.d-vermelho { color: var(--vermelho); } .d-verde { color: var(--verde); } .d-amarelo { color: #b45309; }

/* ---------- indicadores pequenos */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--cartao); border: 1px solid var(--borda); border-radius: 8px; padding: 12px 14px; }
.kpi span { color: var(--suave); font-size: 12px; }
.kpi b { display: block; font-size: 20px; margin: 4px 0; }
.kpi small { color: var(--suave); display: block; }

/* ---------- gráficos e grades */
.grafico { position: relative; height: 300px; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------- tabelas */
.tabela-caixa { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { text-align: left; background: #eef2f7; padding: 8px; border-bottom: 1px solid var(--borda); white-space: nowrap; font-weight: 600; }
.tabela td { padding: 7px 8px; border-bottom: 1px solid #eef1f5; }
.tabela thead th { cursor: pointer; user-select: none; }
.tabela thead th:hover { background: #e2e8f0; }
.tabela thead th.ord-asc::after { content: " ▲"; color: var(--azul); }
.tabela thead th.ord-desc::after { content: " ▼"; color: var(--azul); }
#arvore ~ thead th, .tabela:has(#arvore) thead th { cursor: default; }
.tabela tr:nth-child(even) td { background: #fafcfe; }
.tabela td.n, .tabela th.n { text-align: right; white-space: nowrap; }
.tabela tr.alerta td { background: var(--vermelho-fundo) !important; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel:hover td { background: #e8f0fe !important; }
.tabela tr.selecionado td { background: #dbe7fd !important; font-weight: 600; }
.nivel-2 td:first-child { padding-left: 28px; } .nivel-3 td:first-child { padding-left: 48px; color: #334155; }
.seta { display: inline-block; width: 14px; color: var(--suave); }
.busca { width: 100%; max-width: 360px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; margin-bottom: 10px; }
.barra-part { height: 6px; background: #e5eaf2; border-radius: 3px; min-width: 60px; }
.barra-part i { display: block; height: 100%; background: var(--azul); border-radius: 3px; }

/* ---------- discrepâncias */
.chips { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.chip { padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; }
.chip.vermelho { background: var(--vermelho-fundo); color: #b91c1c; }
.chip.amarelo { background: #fdf3c4; color: #854d0e; }
.secao { border: 1px solid var(--borda); border-left: 5px solid var(--vermelho); border-radius: 8px; background: #fff; margin-bottom: 14px; }
.secao.sem-vermelho { border-left-color: var(--amarelo); } .secao.vazia { border-left-color: var(--verde); }
.secao-topo { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; }
.secao-topo b { font-size: 16px; }
.secao-topo small { color: var(--suave); flex: 1; }
.secao-itens { padding: 0 14px 12px; }
.disc { display: flex; justify-content: space-between; gap: 14px; padding: 8px 12px; margin-bottom: 6px; border-radius: 6px; border-left: 4px solid; }
.disc.vermelho { background: #fdf2f2; border-color: var(--vermelho); }
.disc.amarelo { background: #fefbec; border-color: var(--amarelo); }
.disc b { display: block; } .disc small { color: #475569; } .disc .valor { font-weight: 700; white-space: nowrap; }
.ver-todos { width: 100%; padding: 8px; border: 1px solid var(--borda); background: #eef2f7; border-radius: 6px; cursor: pointer; font-weight: 600; }

/* ---------- orçamento */
.orc input { width: 100%; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 5px; font: inherit; }
.orc input.n { text-align: right; min-width: 90px; }
.orc input[data-c="categoria"] { min-width: 230px; }
.botao { padding: 9px 16px; border: 0; border-radius: 6px; background: var(--verde); color: #fff; font-weight: 700; cursor: pointer; }
.botao.cinza { background: #e2e8f0; color: var(--texto); }
.situacao { font-weight: 700; white-space: nowrap; }

/* ---------- financeiro */
.filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.filtros button { border: 1px solid var(--borda); background: #fff; padding: 6px 12px; border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--texto); }
.filtros button.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
.filtros .busca { margin: 0 0 0 auto; }
.tabela tr.vencido td { background: var(--vermelho-fundo) !important; }
.tabela tr.hoje td { background: var(--amarelo-fundo) !important; }
.kpi.clicavel { cursor: pointer; } .kpi.clicavel:hover { border-color: var(--azul); }

/* ---------- abas (estilo ERP) */
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--borda); margin: 0 0 16px; overflow-x: auto; }
.abas button { border: 0; background: transparent; padding: 9px 16px; font: inherit; font-weight: 600; color: var(--suave);
               cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.abas button:hover { color: var(--texto); }
.abas button.ativo { color: var(--azul); border-bottom-color: var(--azul); }

/* ---------- resultado (DRE) */
.dre td:first-child, .dre th:first-child { position: sticky; left: 0; background: #fff; z-index: 1; min-width: 230px; }
.dre tr.total td { font-weight: 800; border-top: 2px solid var(--borda); background: #f8fafc !important; }
.dre tr.final td { font-weight: 800; font-size: 14px; background: #eef4ff !important; }
.dre tr.menos td:first-child { padding-left: 22px; color: #475569; }
.dre tr.info td { color: var(--suave); font-style: italic; }
.dre td.sel, .dre th.sel { background: #e0ebff !important; }
.dre th.n { cursor: pointer; }
.periodo .botao-ajuste { margin-left: auto; align-self: center; padding: 8px 18px; border-radius: 999px; font: inherit; font-weight: 800;
                cursor: pointer; border: 2px solid #f97316; background: #fff; color: #ea580c; }
.periodo .botao-ajuste:hover { background: #fff7ed; }
.periodo .botao-ajuste.ativo { background: #f97316; color: #fff; }
.periodo .botao-auditoria { margin-left: auto; align-self: center; padding: 8px 18px; border-radius: 999px; font: inherit; font-weight: 800;
                cursor: pointer; border: 2px solid #dc2626; background: #fff; color: #dc2626; letter-spacing: .5px; }
.periodo .botao-auditoria:hover { background: #fef2f2; }
.periodo .botao-auditoria.ativo { background: #dc2626; color: #fff; }
.faixa-ajuste { background: #fff7ed; border: 2px solid #f97316; color: #9a3412; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.dre tr.ajuste td { color: #c2410c; font-weight: 700; background: #fff7ed !important; }
.avisos { background: var(--amarelo-fundo); border: 1px solid #f2dc8f; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.avisos li { margin: 3px 0; }

/* ---------- rendimento da equipe (cartões por login, estilo Ceasa) */
.equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 14px; }
.pessoa { background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 12px; }
.pessoa.sistema { background: #f8fafc; border-style: dashed; }
.pessoa-topo { display: flex; gap: 10px; align-items: center; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--azul); color: #fff; display: flex; align-items: center;
          justify-content: center; font-weight: 800; font-size: 17px; flex: none; }
.pessoa.sistema .avatar { background: #94a3b8; }
.pessoa-topo b { display: block; } .pessoa-topo small { color: var(--suave); }
.pessoa-acoes { font-size: 26px; font-weight: 800; margin: 8px 0 4px; } .pessoa-acoes small { font-size: 13px; color: var(--suave); font-weight: 600; }
.barra-areas { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: #e5eaf2; margin-bottom: 10px; }
.barra-areas i { display: block; height: 100%; }
.mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.mini div { background: #f1f5f9; border-radius: 6px; padding: 5px 7px; }
.mini span { display: block; font-size: 10px; color: var(--suave); text-transform: uppercase; letter-spacing: .3px; }
.mini b { font-size: 14px; }
.producao { list-style: none; margin: 0 0 8px; padding: 0; font-size: 12.5px; }
.producao li { display: flex; justify-content: space-between; gap: 8px; background: #eef4ff; border-radius: 5px; padding: 4px 8px; margin-bottom: 3px; }
.producao li b { white-space: nowrap; }
.correcoes { color: #c2410c; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.legenda-areas { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--suave); margin-bottom: 10px; }
.legenda-areas i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }

/* ---------- chão de loja: etiquetas */
.sit { font-weight: 700; white-space: nowrap; font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.sit.pendente { background: var(--vermelho-fundo); color: #b91c1c; }
.sit.preco_antigo { background: #fff7ed; color: #c2410c; }
.sit.ok { background: var(--verde-fundo); color: #15803d; }
.preco-de { color: var(--suave); text-decoration: line-through; }
.so-impressao { display: none; }
@media print {
  #menu, #abrir-menu, .periodo, .kpis, .abas, .filtros, .grafico, .nao-imprimir, .nota { display: none !important; }
  main { margin: 0; padding: 0; }
  .bloco { border: 0; padding: 0; }
  .so-impressao { display: block; }
  .tabela { font-size: 11px; } .tabela th, .tabela td { padding: 4px; }
  .tabela tr { break-inside: avoid; }
}

/* ---------- NFe */
.tag-risco { display: inline-block; background: #fff7ed; color: #c2410c; border: 1px solid #fdba74; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; }
.tabela tr.risco td { background: #fffbf5 !important; }
.cenarios { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.cenario { background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 14px; }
.cenario.risco { border: 2px solid #f97316; }
.cenario h3 { margin: 0 0 4px; font-size: 14px; }
.cenario .grande { font-size: 28px; font-weight: 800; margin: 6px 0; }
.cenario table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cenario td, .cenario th { padding: 4px 6px; border-bottom: 1px dashed #edf0f5; text-align: right; }
.cenario td:first-child, .cenario th:first-child { text-align: left; }
@media (max-width: 900px) { .cenarios { grid-template-columns: 1fr; } }

/* ---------- funcionários */
.qtd-ativos { color: var(--verde); font-weight: 700; }
.qtd-inativos { color: var(--vermelho); font-weight: 700; }
.cadeado { max-width: 380px; margin: 40px auto; text-align: center; }
.cadeado input { width: 100%; padding: 10px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; margin: 10px 0; }
.func input { width: 110px; padding: 5px 7px; border: 1px solid var(--borda); border-radius: 5px; font: inherit; text-align: right; }
.func input.curto { width: 70px; }
.botao.mini { padding: 5px 10px; font-size: 12px; background: var(--azul); }
.detalhe-func { border: 2px solid var(--azul); }
.notinha { border: 1px solid var(--borda); border-radius: 6px; margin-bottom: 6px; }
.notinha summary { padding: 8px 10px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.notinha table { margin: 0 10px 10px; width: calc(100% - 20px); }
.lista-notinhas { max-height: 520px; overflow-y: auto; }

/* ---------- login */
body.sem-login #menu, body.sem-login #abrir-menu { display: none !important; }
body.sem-login main { margin-left: 0; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding-top: 8vh; }
.login-caixa { background: var(--branco, #fff); border-radius: 14px; box-shadow: 0 6px 30px rgba(0,0,0,.08); padding: 28px 26px; width: 100%; max-width: 380px; }
.login-caixa h1 { margin: 6px 0 14px; }
.login-caixa label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-weight: 600; }
.login-caixa input { font-size: 16px; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; }
.login-caixa .botao { width: 100%; padding: 12px; font-size: 16px; }
.login-logo { display: block; max-width: 200px; max-height: 90px; margin: 0 auto 6px; }
#caixa-usuario a.botao { text-decoration: none; }

/* ---------- celular */
@media (max-width: 900px) {
  #menu { transform: translateX(-100%); transition: transform .2s; }
  body.menu-aberto #menu { transform: none; box-shadow: 0 0 30px rgba(0,0,0,.4); }
  #abrir-menu { display: block; position: fixed; top: 10px; left: 10px; z-index: 30; border: 0; background: var(--menu); color: #fff; font-size: 20px; border-radius: 8px; padding: 6px 12px; }
  body.menu-aberto #abrir-menu { left: 220px; }
  main { margin-left: 0; padding: 56px 14px 30px; }
  .grade2 { grid-template-columns: 1fr; }
  .banner { flex-direction: column; align-items: flex-start; }
}