/* ESX Financeiro — identidade: preto da logomarca, azul-água do "ES", prata. Fonte Archivo. */
:root{
  --preto:#000202; --preto-2:#121A1C; --linha-escura:#1C2326;
  --agua:#81FFFE; --agua-texto:#00777A; --agua-escura:#005557; --agua-bg:#E3FAFA; --agua-borda:#9AD9DB; --agua-fundo:#F3FCFC;
  --prata:#CBCBCB; --prata-2:#989898;
  --fundo:#F2F3F4; --card:#FFFFFF; --borda:#E2E4E6; --borda-2:#EEF0F1; --campo:#C9CED2;
  --texto:#0B0F11; --texto-2:#2A3236; --suave:#5B6368;
  --verde:#12703A; --verde-bg:#E3F4EA; --vermelho:#B42318; --vermelho-bg:#FDECEA; --vermelho-borda:#F0C2BC;
  --ambar:#6E4200; --ambar-bg:#FFF3DB; --cinza-bg:#EEF0F1;
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--fundo);color:var(--texto);font-variant-numeric:tabular-nums}
a{color:var(--agua-texto)}a:hover{color:var(--agua-escura)}
h1,h2,p{margin:0}
svg{flex-shrink:0}

/* ---------- estrutura */
.app{min-height:100vh;display:flex;flex-wrap:wrap}
.menu{flex:1 1 240px;background:var(--preto);color:#fff;padding:26px 16px;display:flex;flex-direction:column;gap:26px}
.menu .marca{padding:0 8px;display:block;text-decoration:none}
.menu .marca img{width:168px;height:auto;display:block}
.menu .marca span{display:block;margin-top:10px;font-size:11px;font-weight:700;letter-spacing:3px;color:var(--agua)}
.menu nav{display:flex;flex-direction:column;gap:22px;flex-grow:1}
.menu .grupo{display:flex;flex-direction:column;gap:2px}
.menu .grupo-titulo{font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--prata-2);padding:0 10px 8px}
.menu nav a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;color:var(--prata);text-decoration:none;font-size:15px;font-weight:500}
.menu nav a:hover{background:var(--preto-2);color:#fff}
.menu nav a.ativo{background:var(--preto-2);color:#fff;font-weight:600}
.menu nav a.ativo svg{stroke:var(--agua)}
.menu .quem{display:flex;align-items:center;gap:10px;padding:12px 10px;border-top:1px solid var(--linha-escura)}
.menu .quem .nome{flex-grow:1;min-width:0}
.menu .quem .nome a{color:#fff;font-size:14px;font-weight:600;text-decoration:none;display:block}
.menu .quem .nome small{font-size:12px;color:var(--prata-2)}
.menu .quem button{background:none;border:0;color:var(--prata);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:6px}
.menu .quem button:hover{color:#fff}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--agua);color:var(--preto);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0}
.conteudo{flex:999 1 560px;min-width:0;padding:32px 40px 56px;display:flex;flex-direction:column;gap:22px}
@media(max-width:700px){.conteudo{padding:22px 16px 40px}.menu{padding:18px 12px}}

/* ---------- cabeçalhos */
.topo{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
h1{font-size:32px;font-weight:800;letter-spacing:-.5px;line-height:1.15}
.titulo-linha{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sub{margin-top:6px;font-size:15px;color:var(--suave)}
.pre{font-size:14px;color:var(--suave)}
.voltar{font-size:14px;font-weight:600;text-decoration:none;align-self:flex-start}
h2{font-size:18px;font-weight:700}
.h2-linha{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.legenda{font-size:13px;color:var(--suave)}

/* ---------- blocos */
.card{background:var(--card);border:1px solid var(--borda);border-radius:12px;padding:22px 24px}
.card.destaque{border:2px solid var(--preto)}
.card.alerta{border-color:var(--vermelho-borda)}
.card.escuro{background:var(--preto);border-color:var(--preto);color:#fff}
.colunas{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.colunas>.principal{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:22px}
.colunas>.lateral{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:22px}
.pilha{display:flex;flex-direction:column;gap:12px}

/* ---------- indicadores */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.kpi{display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--borda);border-radius:12px;padding:18px 20px}
.kpi:hover{border-color:var(--campo);color:inherit}
.kpi .rot{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;color:var(--suave)}
.kpi .rot i{width:10px;height:10px;border-radius:50%}
.kpi .n{margin-top:10px;font-size:32px;font-weight:800;line-height:1.2}
.kpi .d{font-size:14px;color:var(--suave)}
.kpi.escuro{background:var(--preto);border-color:var(--preto);color:#fff}
.kpi.escuro .rot,.kpi.escuro .d{color:var(--prata)}
.kpi.escuro .n{color:var(--agua)}
.kpi.escuro:hover{color:#fff}

/* ---------- tabelas */
.tabela{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--suave);font-size:12px;letter-spacing:.6px;font-weight:700;padding:10px 8px;border-bottom:1px solid var(--borda);text-transform:uppercase;white-space:nowrap}
td{padding:12px 8px;border-bottom:1px solid var(--borda-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
.num{text-align:right;white-space:nowrap}
.centro{text-align:center}
.forte{font-weight:700;color:var(--texto);text-decoration:none}
a.forte:hover{color:var(--agua-texto)}
.menor{font-size:12px;color:var(--suave)}
.atraso{font-size:12px;color:var(--vermelho);font-weight:600}
.sim{color:var(--verde);font-weight:800}.nao{color:var(--vermelho);font-weight:800}
.min-560{min-width:560px}.min-760{min-width:760px}.min-820{min-width:820px}.min-900{min-width:900px}

/* ---------- etiquetas */
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.badge.grande{font-size:13px;padding:4px 12px}
.b-ok,.b-paga{background:var(--verde-bg);color:var(--verde)}
.b-vencida,.b-erro{background:var(--vermelho-bg);color:var(--vermelho)}
.b-alerta{background:var(--ambar-bg);color:var(--ambar)}
.b-enviada,.b-info{background:var(--agua-bg);color:var(--agua-escura)}
.b-rascunho,.b-neutro{background:var(--cinza-bg);color:var(--texto-2)}
.b-cancelada{background:var(--cinza-bg);color:#6B7378;text-decoration:line-through}
.tipo{padding:4px 8px;border-radius:6px;font-size:12px;font-weight:800}
.tipo.nf{background:var(--preto);color:var(--agua)}
.tipo.boleto{background:var(--agua-bg);color:var(--agua-escura)}
.tipo.outro{background:var(--cinza-bg);color:var(--texto-2)}

/* ---------- botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 20px;border-radius:8px;border:0;background:var(--preto);color:#fff;font:inherit;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:#1A2326;color:#fff}
.btn svg{stroke:var(--agua)}
.btn.sec{background:#fff;color:var(--texto);border:1px solid var(--campo);font-weight:600}
.btn.sec:hover{background:#F6F7F8}
.btn.sec svg{stroke:currentColor}
.btn.verde{background:var(--verde)}.btn.verde:hover{background:#0E5C2F}.btn.verde svg{stroke:#fff}
.btn.agua{background:var(--agua);color:var(--preto);font-weight:800}.btn.agua:hover{background:#A6FFFE;color:var(--preto)}
.btn.contorno-escuro{background:transparent;border:1px solid #3A4448;color:#fff;font-weight:600}
.btn.peq{height:38px;padding:0 14px;font-size:13px}
.btn.cheio{width:100%}
.link-btn{background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:600;color:var(--agua-texto);cursor:pointer}
.link-btn.perigo{color:var(--vermelho)}
.btn-linha{display:inline-block;padding:7px 12px;border:1px solid var(--campo);border-radius:8px;color:var(--texto);text-decoration:none;font-weight:600;font-size:13px;background:#fff}
.btn-linha:hover{border-color:var(--texto);color:var(--texto)}
.acoes{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- formulários */
label{font-size:13px;font-weight:600;color:var(--texto-2)}
.campo{display:flex;flex-direction:column;gap:6px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=month],input[type=search],input[type=tel],select,textarea{
  font:inherit;font-size:15px;height:44px;padding:0 12px;border:1px solid var(--campo);border-radius:8px;background:#fff;color:var(--texto);max-width:100%}
textarea{height:auto;padding:10px 12px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--agua);outline-offset:1px;border-color:var(--agua-texto)}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--agua-texto);margin:0}
.ajuda{font-size:12px;color:var(--suave)}
.grade-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.grade-campos .largo{grid-column:1/-1}
.linha-form{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--texto)}
td input[type=date]{width:150px;height:36px;font-size:14px}
td input.valor{width:110px;height:36px;font-size:14px;text-align:right}
td select{height:38px;font-size:14px}

/* ---------- avisos */
.aviso{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:10px;background:var(--ambar-bg);color:var(--ambar);font-size:14px}
.msg{padding:12px 16px;border-radius:10px;font-size:14px;font-weight:600}
.msg.ok{background:var(--verde-bg);color:var(--verde)}.msg.erro{background:var(--vermelho-bg);color:var(--vermelho)}
.vazio{color:var(--suave);padding:18px 0;text-align:center;font-size:14px}

/* ---------- filtros e busca */
.filtros{display:flex;gap:6px;flex-wrap:wrap}
.filtros a{padding:8px 14px;border-radius:99px;background:#fff;border:1px solid var(--borda);color:var(--texto);text-decoration:none;font-size:14px;font-weight:600}
.filtros a.ativo{background:var(--preto);border-color:var(--preto);color:#fff}
.busca{position:relative;flex:1 1 320px;max-width:460px}
.busca svg{position:absolute;left:14px;top:13px}
.busca input{width:100%;padding-left:42px}

/* ---------- listas */
.lista-linha{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--borda-2);font-size:14px}
.lista-linha:last-child{border-bottom:0}
.item-aviso{display:flex;gap:12px;align-items:flex-start}
.item-aviso .badge{margin-top:3px}
.item-aviso b{display:block;font-size:14px}

/* ---------- linha do tempo */
.tempo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tempo li{display:flex;gap:14px;padding-bottom:18px}
.tempo li:last-child{padding-bottom:0}
.tempo .marco{display:flex;flex-direction:column;align-items:center}
.tempo .marco i{width:12px;height:12px;border-radius:50%;margin-top:4px;background:var(--prata-2)}
.tempo .marco s{flex-grow:1;width:2px;background:var(--borda);margin-top:4px}
.tempo li:last-child .marco s{display:none}
.tempo .corpo{flex-grow:1;min-width:0}
.tempo .corpo b{font-size:15px;display:block}
.tempo .corpo small{font-size:13px;color:var(--suave)}

/* ---------- envio do mês */
.etapas{display:flex;gap:8px;list-style:none;margin:0;padding:0;font-size:13px;font-weight:600;flex-wrap:wrap}
.etapas li{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;background:#fff;border:1px solid var(--borda);color:var(--suave)}
.etapas li.feito{background:var(--verde-bg);border-color:var(--verde-bg);color:var(--verde)}
.etapas li.atual{background:var(--preto);border-color:var(--preto);color:#fff}
.drop{flex:3 1 420px;display:flex;align-items:center;gap:18px;padding:16px 20px;border:2px dashed var(--agua-borda);border-radius:12px;background:var(--agua-fundo);cursor:pointer;position:relative}
.drop.sobre{background:var(--agua-bg);border-color:var(--agua-texto)}
.drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.icone-caixa{width:48px;height:48px;border-radius:12px;background:var(--preto);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.numero-redondo{width:26px;height:26px;border-radius:50%;background:var(--vermelho-bg);color:var(--vermelho);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.barra-envio{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 24px;border-radius:12px;background:var(--preto);color:#fff;position:sticky;bottom:16px}
.barra-envio small{display:block;font-size:13px;color:var(--prata)}

/* ---------- contatos */
.contato{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px 16px;border:1px solid var(--borda);border-radius:10px}
.contato .info{flex:1 1 220px;min-width:0}
.contato .info b{display:block;font-size:15px}
.contato .info span{font-size:14px;color:var(--suave);word-break:break-all}
.contato .avatar{width:40px;height:40px;background:var(--agua-bg);color:var(--agua-escura)}
.contato.inativo .avatar{background:var(--cinza-bg);color:var(--texto-2)}
.contato form{display:contents}
.novo-contato{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:14px 16px;border:1px dashed var(--agua-borda);border-radius:10px;background:var(--agua-fundo)}
.novo-contato .campo input{height:40px;font-size:14px;width:100%}
details.editar summary{list-style:none;cursor:pointer;font-size:14px;font-weight:600;color:var(--agua-texto)}
details.editar summary::-webkit-details-marker{display:none}
details.editar[open]{flex-basis:100%}
details.editar[open] summary{margin-bottom:10px}

/* ---------- arquivos */
.arquivo{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--borda);border-radius:10px;text-decoration:none;color:var(--texto)}
.arquivo:hover{border-color:var(--campo);color:var(--texto)}
.arquivo .nome-arq{flex-grow:1;font-size:14px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anexar{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px;border:1px dashed var(--agua-borda);border-radius:8px;background:var(--agua-fundo)}
.anexar select{height:38px;font-size:14px}
.anexar input[type=file]{font-size:13px;max-width:200px}

/* ---------- login */
.login{min-height:100vh;display:flex;flex-wrap:wrap;background:var(--preto)}
.login .vitrine{flex:1 1 560px;min-height:360px;background:var(--preto);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:56px 64px;position:relative;overflow:hidden;gap:40px}
.login .vitrine .aro{position:absolute;border-radius:50%;border:1px solid var(--linha-escura)}
.login .vitrine img{width:300px;max-width:100%;height:auto;display:block;position:relative}
.login .vitrine .chamada{position:relative;max-width:440px}
.login .vitrine .rotulo{font-size:13px;font-weight:700;letter-spacing:3px;color:var(--agua);margin-bottom:14px}
.login .vitrine h1{font-size:44px;line-height:1.08;color:#fff}
.login .vitrine p{margin-top:18px;font-size:16px;line-height:1.55;color:var(--prata)}
.login .vitrine .rodape{font-size:13px;color:var(--prata-2);position:relative}
.login .painel-form{flex:1 1 480px;background:#fff;display:flex;align-items:center;justify-content:center;padding:56px 32px}
.login form{width:100%;max-width:380px;display:flex;flex-direction:column;gap:20px}
.login form input{height:46px;width:100%}
.login form .btn{height:48px}
@media(max-width:700px){.login .vitrine{padding:32px 24px}.login .vitrine h1{font-size:32px}}
.campo label>input{display:block;width:100%;margin-top:6px;font-weight:400}
code{background:var(--cinza-bg);padding:1px 6px;border-radius:5px;font-size:.92em}
pre{background:var(--cinza-bg);padding:12px 14px;border-radius:8px;overflow-x:auto;font-size:13px;margin:12px 0}

/* ---------- celular: menu vira barra superior com rolagem lateral */
@media(max-width:860px){
  .app{flex-direction:column;flex-wrap:nowrap}
  .menu{flex:none;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 16px}
  .menu .marca img{width:110px}
  .menu .marca span{margin-top:4px;font-size:9px}
  .menu .quem{order:2;margin-left:auto;border-top:0;padding:0}
  .menu .quem .nome{display:none}
  .menu nav{order:3;flex-basis:100%;flex-direction:row;gap:4px;overflow-x:auto;scrollbar-width:none}
  .menu nav::-webkit-scrollbar{display:none}
  .menu .grupo{flex-direction:row;gap:4px}
  .menu .grupo-titulo{display:none}
  .menu nav a{white-space:nowrap;padding:8px 12px;font-size:14px}
  .conteudo{flex:none}
}