/* Cashfuel · folha de estilo do portal
   Paleta fixada no desenho: petróleo, off-white frio, latão de acento. */

:root{
  --petroleo:#24444d;
  --petroleo-nav:#1c3941;
  --petroleo-activo:#2a545f;
  --latao:#a8711a;
  --latao-claro:#d4a45c;
  --latao-fundo:#fdf6ec;
  --latao-borda:#ecd9b6;
  --tela:#f2f4f4;
  --cartao:#ffffff;
  --cartao-alt:#f8fafa;
  --cabecalho-tabela:#f6f8f8;
  --linha:#dde3e3;
  --linha-leve:#edf1f1;
  --tinta:#1a2c31;
  --tinta-media:#5a7078;
  --tinta-label:#8299a0;
  --tinta-meta:#90a3a8;
  --entra:#2f7355;
  --entra-fundo:#e2efe9;
  --sai:#b0473c;
  --sai-fundo:#f7e3e1;
  --interface:'Jost','Century Gothic',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  background:var(--tela);
  color:var(--tinta);
  font-family:var(--interface);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--petroleo);text-decoration:none}
a:hover{color:#16323a}

code{font-family:var(--mono);font-size:.88em;background:var(--linha-leve);padding:1px 5px;border-radius:3px}

.estrutura{display:flex;min-height:100vh}

/* ── navegação ─────────────────────────────────────────────────────────── */

.navegacao{
  width:228px;flex-shrink:0;
  background:var(--petroleo-nav);color:#cfe0e3;
  display:flex;flex-direction:column;
  padding:22px 0 18px;
  position:sticky;top:0;height:100vh;
}
.marca{padding:0 22px 22px}
.marca-nome{font-size:19px;font-weight:600;color:#fff;letter-spacing:.02em}
.marca-sub{font-size:12.5px;color:#7fa3ab;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.menu{display:flex;flex-direction:column;gap:1px}
.menu-item{
  padding:11px 25px;font-size:15px;color:#cfe0e3;
  display:flex;align-items:center;justify-content:space-between;gap:11px;
  border-left:3px solid transparent;
}
.menu-item:hover{background:#23474f;color:#fff}
.menu-item.activo{
  padding-left:22px;background:var(--petroleo-activo);
  border-left-color:var(--latao-claro);color:#fff;
}
.menu-esq{display:flex;align-items:center;gap:11px;min-width:0}
.menu-esq span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selo{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  background:var(--latao);color:#fff;border-radius:9px;padding:1px 7px;flex-shrink:0;
}
.menu-item.activo .selo{background:#fff;color:var(--latao)}

.navegacao-fundo{
  margin-top:auto;padding:14px 18px 0 22px;
  border-top:1px solid #2c525c;
  display:flex;align-items:center;gap:10px;
}
.avatar{
  width:32px;height:32px;border-radius:50%;background:var(--petroleo-activo);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:#fff;flex-shrink:0;
}
.avatar-txt{min-width:0;flex-grow:1}
.avatar-nome{font-size:13.5px;color:#e4eff1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar-papel{font-size:11.5px;color:#7fa3ab}
.sair{display:flex;align-items:center;padding:4px;flex-shrink:0}
.sair:hover svg{stroke:#fff}

/* ── conteúdo ──────────────────────────────────────────────────────────── */

.conteudo{flex-grow:1;min-width:0;padding:24px 28px 40px}

.topo{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.topo h1{font-size:25px;font-weight:600;margin:0;letter-spacing:-.01em}
.subtitulo{font-size:14px;color:var(--tinta-label);margin-top:3px}
.topo-accoes{display:flex;gap:10px;flex-wrap:wrap}

/* ── blocos ────────────────────────────────────────────────────────────── */

.cartao{background:var(--cartao);border:1px solid var(--linha);border-radius:10px;overflow:hidden}
.cartao-corpo{padding:18px 22px}
.cartao-cabeca{padding:15px 22px 14px;border-bottom:1px solid var(--linha);display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cartao-titulo{font-size:16px;font-weight:500}
.cartao-nota{font-size:13px;color:var(--tinta-label);margin-top:2px}

.grelha{display:grid;gap:14px}
.grelha-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grelha-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grelha-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

.indicador{background:var(--cartao);border:1px solid var(--linha);border-radius:10px;padding:15px 18px 16px}
.indicador.atencao{border-color:var(--latao-borda)}
.indicador-rotulo{font-size:12.5px;color:var(--tinta-label);margin-bottom:6px}
.indicador-valor{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.indicador.atencao .indicador-valor{color:var(--latao)}
.indicador-extra{font-size:13px;color:var(--tinta-label);margin-left:8px}

.etiqueta{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-label);
}

/* ── tabelas ───────────────────────────────────────────────────────────── */

.tabela-scroll{overflow-x:auto}
table.dados{border-collapse:collapse;width:100%;font-size:14.5px}
table.dados thead th{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-label);text-align:left;
  padding:11px 20px;background:var(--cabecalho-tabela);
  border-bottom:1px solid var(--linha);white-space:nowrap;
}
table.dados tbody td{padding:13px 20px;border-bottom:1px solid var(--linha-leve);vertical-align:middle}
table.dados tbody tr:last-child td{border-bottom:0}
table.dados tbody tr:hover td{background:var(--cartao-alt)}
.num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th.num{text-align:right}
.apagado{color:var(--tinta-label)}
.meta{font-size:12px;color:var(--tinta-meta);margin-top:1px}

.vazio{padding:40px 24px;text-align:center;color:var(--tinta-label)}
.vazio strong{display:block;color:var(--tinta);font-weight:500;font-size:16px;margin-bottom:5px}

/* ── estados ───────────────────────────────────────────────────────────── */

.ponto{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;vertical-align:middle}
.ponto-ok{background:var(--entra)}
.ponto-aviso{background:var(--latao)}
.ponto-mau{background:var(--sai)}
.estado{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}

.chip{
  display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.06em;padding:2px 8px;border-radius:3px;white-space:nowrap;
}
.chip-entra{background:var(--entra-fundo);color:var(--entra)}
.chip-sai{background:var(--sai-fundo);color:var(--sai)}
.chip-neutro{background:var(--linha-leve);color:var(--tinta-media)}
.chip-aviso{background:var(--latao-fundo);color:var(--latao)}

.valor-entra{color:var(--entra)}
.valor-sai{color:var(--sai)}

/* ── botões e formulários ──────────────────────────────────────────────── */

.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:38px;padding:0 16px;border-radius:8px;border:1px solid var(--linha);
  background:var(--cartao);color:var(--tinta-media);font-family:var(--interface);
  font-size:14px;cursor:pointer;white-space:nowrap;
}
.botao:hover{background:var(--cartao-alt);color:var(--tinta)}
.botao-principal{background:var(--petroleo);border-color:var(--petroleo);color:#fff}
.botao-principal:hover{background:#1b363e;color:#fff}
.botao-perigo{border-color:var(--sai);color:var(--sai)}
.botao-perigo:hover{background:var(--sai-fundo);color:var(--sai)}
.botao[disabled],.botao-inactivo{opacity:.5;pointer-events:none}
.botao-largo{width:100%;height:46px;font-size:15px}

.campo{margin-bottom:16px}
.campo label{display:block;font-size:13.5px;color:var(--tinta-media);margin-bottom:6px}
.campo input[type=text],.campo input[type=email],.campo input[type=password],
.campo input[type=number],.campo input[type=date],.campo input[type=time],
.campo select,.campo textarea{
  width:100%;height:44px;padding:0 13px;border:1.5px solid var(--linha);
  border-radius:8px;background:var(--cartao);color:var(--tinta);
  font-family:var(--interface);font-size:15px;
}
.campo textarea{height:auto;min-height:96px;padding:11px 13px;line-height:1.5;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--petroleo);box-shadow:0 0 0 3px rgba(36,68,77,.1);
}
.campo .ajuda{font-size:12.5px;color:var(--tinta-meta);margin-top:5px;line-height:1.4}

/* ── avisos ────────────────────────────────────────────────────────────── */

.aviso{padding:13px 18px;border-radius:9px;margin-bottom:18px;font-size:14.5px;border:1px solid}
.aviso-ok{background:var(--entra-fundo);border-color:#cfe4da;color:#255f46}
.aviso-erro{background:var(--sai-fundo);border-color:#eccbc7;color:#8f3229}
.aviso-atencao{background:var(--latao-fundo);border-color:var(--latao-borda);color:#8a6a37}
.aviso-info{background:var(--cartao);border-color:var(--linha);color:var(--tinta-media)}

/* ── entrada ───────────────────────────────────────────────────────────── */

body.entrada{background:var(--petroleo);display:flex;align-items:center;justify-content:center;padding:24px}
.caixa-entrada{width:100%;max-width:400px}
.caixa-entrada .marca-entrada{text-align:center;margin-bottom:24px}
.caixa-entrada .marca-entrada h1{font-size:27px;font-weight:600;color:#fff;margin:0;letter-spacing:.02em}
.caixa-entrada .marca-entrada p{font-size:14px;color:#9fbcc2;margin:5px 0 0}
.caixa-entrada .painel{background:var(--cartao);border-radius:12px;padding:28px 26px 26px}
.caixa-entrada .rodape-entrada{text-align:center;font-family:var(--mono);font-size:11.5px;color:#6f949c;margin-top:20px}

.rodape-versao{
  position:fixed;right:12px;bottom:10px;font-family:var(--mono);
  font-size:11px;color:var(--tinta-meta);pointer-events:none;
}

/* ── ecrãs estreitos ───────────────────────────────────────────────────── */

@media (max-width:860px){
  .estrutura{flex-direction:column}
  .navegacao{width:100%;height:auto;position:static;padding:14px 0 10px}
  .marca{padding:0 18px 12px}
  .menu{flex-direction:row;overflow-x:auto;padding:0 12px}
  .menu-item{border-left:0;border-bottom:3px solid transparent;padding:9px 14px;white-space:nowrap}
  .menu-item.activo{padding-left:14px;border-left:0;border-bottom-color:var(--latao-claro)}
  .menu-esq span{display:none}
  .navegacao-fundo{margin-top:12px;padding:12px 18px 0}
  .conteudo{padding:20px 18px 40px}
  .rodape-versao{display:none}
}