/* Controle de Gastos — mesma identidade do SGVEM · Ponto Web (Jornada):
   prata / branco / dourado, menu lateral escuro, AppBar com o título da rota.
   Os valores vêm do theme.js do Ponto Web, convertidos para variáveis CSS.

   Sem inline style em lugar nenhum: o CSP do servidor só aceita folha própria
   (cor de cartão é aplicada por JS via CSSOM, que o CSP permite). */

:root {
  --ouro: #b8912e;
  --ouro-claro: #c9a24b;
  --ouro-escuro: #96751f;
  --prata: #8b9099;

  --fundo: #fbfbfc;
  --painel: #ffffff;
  --cartao: linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%);
  --tinta: #1d2126;
  --tinta-fraca: #5b616b;
  --linha: #e3e5e9;
  --sup-suave: #f5f6f8;
  --sup-forte: #eceef1;

  --verde: #2e7d4f;
  --verde-fundo: #e7f3ec;
  --vermelho: #b5402c;
  --vermelho-forte: #a53a28;
  --vermelho-fundo: #f7e6e2;
  --alerta: #8a6d1c;
  --alerta-fundo: #f6efdd;
  --ferias-fundo: #e8edf5;
  --neutro: #5b616b;
  --neutro-fundo: #eef0f3;

  --menu: linear-gradient(180deg, #20242b 0%, #14171c 100%);
  --menu-item: rgba(255, 255, 255, 0.78);
  --menu-label: rgba(255, 255, 255, 0.42);
  --menu-hover: rgba(201, 162, 75, 0.16);
  --menu-ativo: linear-gradient(90deg, rgba(201, 162, 75, 0.28), rgba(201, 162, 75, 0.06));
  --menu-rodape: rgba(255, 255, 255, 0.42);

  --largura-menu: 264px;
  --altura-topo: 72px;
  --raio: 12px;
  --sombra: 0 1px 2px rgba(29, 33, 38, .05), 0 10px 28px rgba(29, 33, 38, .06);
  color-scheme: light;
}

:root[data-tema="escuro"] {
  --ouro: #c9a24b;
  --ouro-claro: #d8b25a;
  --ouro-escuro: #b8912e;
  --prata: #aab0ba;

  --fundo: #161719;
  --painel: #1e2023;
  --cartao: linear-gradient(180deg, #1e2023 0%, #1b1d20 100%);
  --tinta: #e7e8eb;
  --tinta-fraca: #9aa0a8;
  --linha: #2e3136;
  --sup-suave: #23252a;
  --sup-forte: #2b2e34;

  --verde: #5cba86;
  --verde-fundo: rgba(92, 186, 134, 0.16);
  --vermelho: #e07a63;
  --vermelho-forte: #eda28f;
  --vermelho-fundo: rgba(224, 122, 99, 0.16);
  --alerta: #e0c07e;
  --alerta-fundo: rgba(216, 178, 90, 0.16);
  --ferias-fundo: rgba(138, 166, 212, 0.16);
  --neutro: #9aa0a8;
  --neutro-fundo: rgba(255, 255, 255, 0.08);

  --menu: linear-gradient(180deg, #1b1e23 0%, #111317 100%);
  --menu-label: rgba(255, 255, 255, 0.5);
  --menu-ativo: linear-gradient(90deg, rgba(201, 162, 75, 0.3), rgba(201, 162, 75, 0.05));
  --menu-rodape: rgba(255, 255, 255, 0.38);

  --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 15px/1.5 "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.01em; }
button { font: inherit; cursor: pointer; }
input, select { font: inherit; }
.oculto { display: none !important; }

/* ------------------------------------------------------------- armação */

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

/* ---- menu lateral */

.menu-lateral {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--largura-menu);
  display: flex;
  flex-direction: column;
  background: var(--menu);
  color: #fff;
}

.menu-marca {
  height: var(--altura-topo);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.menu-itens { flex-grow: 1; overflow-y: auto; padding: 10px 0; }

.menu-grupo {
  padding: 0 20px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 2.6;
  color: var(--menu-label);
  white-space: nowrap;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 10px 2px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--menu-item);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}

.menu-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.menu-item:hover { background: var(--menu-hover); color: #fff; }

.menu-item.ativo {
  background: var(--menu-ativo);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--ouro-claro);
}

.menu-item.ativo svg { opacity: 1; }

.menu-rodape {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--menu-rodape);
  font-size: 11px;
  line-height: 1.5;
}

.menu-rodape strong { color: rgba(255, 255, 255, 0.62); font-weight: 700; }

/* ---- barra do topo */

.topo {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--largura-menu);
  z-index: 20;
  height: var(--altura-topo);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  background: var(--painel);
  border-bottom: 1px solid var(--linha);
}

.topo-titulo { flex-grow: 1; min-width: 0; }
.topo-titulo h1 { font-size: 18px; font-weight: 700; line-height: 1.2; }
.topo-titulo p { margin: 2px 0 0; font-size: 12px; color: var(--tinta-fraca); }

.botao-tema {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: transparent;
  color: var(--tinta-fraca);
}

.botao-tema svg { width: 19px; height: 19px; }
.botao-tema:hover { border-color: var(--ouro); color: var(--ouro); }

.botao-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ouro);
}

.botao-menu svg { width: 22px; height: 22px; }

/* ---- conteúdo */

main {
  flex-grow: 1;
  margin-left: var(--largura-menu);
  padding: calc(var(--altura-topo) + 26px) 28px 70px;
  max-width: 100%;
}

.veu {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: rgba(10, 12, 15, .5);
}

@media (max-width: 900px) {
  .menu-lateral { transform: translateX(-100%); transition: transform .18s ease; }
  .menu-lateral.aberto { transform: none; }
  .topo { left: 0; padding: 0 16px; }
  main { margin-left: 0; padding: calc(var(--altura-topo) + 20px) 16px 70px; }
  .botao-menu { display: flex; }
}

/* ---------------------------------------------------------------- celular */

@media (max-width: 640px) {
  :root { --altura-topo: 60px; }

  body { font-size: 14px; }

  .topo { gap: 10px; padding: 0 12px; }
  .topo-titulo h1 { font-size: 16px; }
  /* A explicação da rota rouba a linha inteira numa tela estreita. */
  .topo-titulo p { display: none; }

  main { padding: calc(var(--altura-topo) + 16px) 12px 60px; }

  /* Filtros e ações viram uma coluna, ocupando a largura toda. */
  .barra-tela { flex-direction: column; align-items: stretch; gap: 10px; }
  .filtros { width: 100%; }
  .filtros .campo { flex: 1 1 130px; margin-bottom: 0; }
  .filtros .botao { width: 100%; }

  .campo-duplo { grid-template-columns: 1fr; gap: 0; }

  .painel-corpo { padding: 14px; }
  .painel-titulo { padding: 12px 14px; font-size: 11px; }

  table { font-size: 13px; }
  thead th { padding: 9px 10px; font-size: 10px; }
  tbody td { padding: 8px 10px; }

  /* Botões de ação na tabela empilham, pra caber e pra dar área de toque. */
  tbody td .botao-fraco { display: block; width: 100%; margin: 2px auto; }

  .abas { padding: 10px 12px 0; overflow-x: auto; }
  .abas button { padding: 8px 12px; font-size: 11px; }

  .modal { max-width: 100%; max-height: 92vh; }
  .modal-corpo { padding: 14px; }
  .modal-pe { flex-direction: column-reverse; padding: 12px 14px; }
  .modal-pe .botao, .modal-pe .botao-fraco { width: 100%; }

  /* No celular as duas colunas continuam: e justamente onde o alinhamento
     dos valores mais ajuda a ler. So aperta o espaco entre elas. */
  .lista-popup li { gap: 10px; }

  .nota-ocultos { padding: 12px 14px; font-size: 13px; }
}

/* ------------------------------------------------------------- painéis */

.barra-tela {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.filtros { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }

.painel {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.painel + .painel { margin-top: 18px; }

.painel-titulo {
  padding: 14px 18px;
  border-bottom: 1px solid var(--linha);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ouro);
}

.painel-corpo { padding: 18px; }

/* --------------------------------------------------------------- campos */

.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }

.campo label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.campo input, .campo select {
  padding: 9px 11px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--painel);
  color: var(--tinta);
  width: 100%;
}

.campo input[type="color"] { padding: 4px; height: 40px; cursor: pointer; }

.campo input:focus, .campo select:focus {
  outline: 2px solid var(--ouro);
  outline-offset: -1px;
}

.campo-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dica { font-size: 12px; color: var(--tinta-fraca); margin: 0 0 12px; }

.botao {
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--ouro);
  color: #1c1a12;
  font-weight: 700;
}

.botao:hover { background: var(--ouro-escuro); color: #fff; }
.botao:disabled { opacity: .5; cursor: default; }

.botao-fraco {
  padding: 7px 14px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: transparent;
  color: var(--tinta-fraca);
  font-weight: 700;
  font-size: 13px;
}

.botao-fraco:hover { border-color: var(--ouro); color: var(--ouro); }
.botao-perigo:hover { border-color: var(--vermelho); color: var(--vermelho); }

.recado {
  padding: 11px 14px;
  border-radius: 10px;
  border-left: 3px solid var(--vermelho);
  background: var(--vermelho-fundo);
  color: var(--vermelho-forte);
  font-size: 13px;
  margin-bottom: 14px;
}

.recado-ok {
  border-left-color: var(--verde);
  background: var(--verde-fundo);
  color: var(--verde);
}

/* ------------------------------------------------------------- tabelas */

.rolagem { overflow-x: auto; border-radius: var(--raio); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }

/* Tudo centralizado, cabeçalho e conteúdo. */
thead th {
  position: sticky;
  top: 0;
  background: var(--painel);
  padding: 12px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}

tbody td {
  padding: 9px 12px;
  text-align: center;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

tbody td.esq { font-variant-numeric: normal; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--sup-suave); }

td.mes { font-weight: 700; }

/* A coluna do mês fica presa à esquerda: numa tela estreita a grade rola na
   horizontal e sem isso você perde a referência de qual mês está lendo. */
thead th:first-child, tbody td.mes {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--painel);
}

/* As cores de linha são semitransparentes; na célula presa elas precisam ser
   pintadas POR CIMA do fundo opaco, senão o conteúdo que rola aparece atrás e
   o mês fica de um tom diferente do resto da linha. */
tbody tr:hover td.mes {
  background-image: linear-gradient(var(--sup-suave), var(--sup-suave));
}

tr.linha-paga td.mes, tr.linha-paga:hover td.mes {
  background-image: linear-gradient(var(--verde-fundo), var(--verde-fundo));
}

tr.linha-ferias td.mes, tr.linha-ferias:hover td.mes {
  background-image: linear-gradient(var(--ferias-fundo), var(--ferias-fundo));
}

tr.total td.mes {
  background-image: linear-gradient(var(--sup-forte), var(--sup-forte));
}
/* Mes de ferias: a linha inteira muda de tom, sem escrever nada. Se o mes
   tambem estiver pago, o verde vence a linha (regra depois desta) e o tom de
   ferias fica na celula do mes, pros dois sinais continuarem visiveis. */
tr.linha-ferias, tr.linha-ferias:hover { background: var(--ferias-fundo); }

tr.linha-paga { background: var(--verde-fundo); }
tr.linha-paga:hover { background: var(--verde-fundo); }

tr.total td {
  font-weight: 800;
  background: var(--sup-forte);
  border-top: 2px solid var(--ouro);
}

.celula-clicavel {
  background: none;
  border: 0;
  padding: 3px 6px;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
  width: 100%;
}

.celula-clicavel:hover { background: var(--ouro); color: #1c1a12; }
.celula-vazia { color: var(--tinta-fraca); }

.selo {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 0;
  background: var(--neutro-fundo);
  color: var(--neutro);
}

button.selo { cursor: pointer; }
button.selo:hover { background: var(--alerta-fundo); color: var(--alerta); }
.selo-pago, .selo-ok { background: var(--verde-fundo); color: var(--verde); }
.selo-off { background: var(--vermelho-fundo); color: var(--vermelho-forte); }

.positivo { color: var(--verde); font-weight: 700; }
.negativo { color: var(--vermelho); font-weight: 700; }

.ponto-cor {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: -1px;
  /* Contorno por dentro, e da cor do painel: uma borda escura em volta de
     cor saturada nao le como borda, le como sombra. Assim o quadradinho
     continua separado do fundo sem sujar a cor. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

.vazio { padding: 36px 18px; text-align: center; color: var(--tinta-fraca); }

/* --------------------------------------------------------------- abas */

.abas { display: flex; gap: 4px; padding: 12px 18px 0; border-bottom: 1px solid var(--linha); }

.abas button {
  padding: 9px 16px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: var(--tinta-fraca);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: -1px;
}

.abas button.ativo { background: var(--painel); border-color: var(--linha); color: var(--ouro); }

/* -------------------------------------------------------------- pop-up */

.fundo-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10, 12, 15, .55);
  backdrop-filter: blur(2px);
}

.modal {
  width: 100%;
  max-width: 460px;
  max-height: 86vh;
  overflow: auto;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: 14px;
  box-shadow: var(--sombra);
}

.modal-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--linha);
}

.modal-topo h3 { font-size: 15px; }
.modal-topo p { margin: 2px 0 0; font-size: 12px; color: var(--tinta-fraca); }
.modal-corpo { padding: 18px; }

.modal-pe {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--linha);
}

.fechar-modal {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--linha);
  border-radius: 9px;
  background: transparent;
  color: var(--tinta-fraca);
  font-size: 16px;
  line-height: 1;
}

.fechar-modal:hover { border-color: var(--ouro); color: var(--ouro); }

.lista-popup { list-style: none; margin: 0; padding: 0; }

/* Todo pop-up de valores usa a mesma organizacao: duas colunas, nome a
   esquerda e valor a direita, pros valores ficarem na mesma vertical. O bloco
   inteiro fica centralizado dentro do pop-up. */
.lista-valores { max-width: 340px; margin: 0 auto; }

.lista-popup li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--linha);
  text-align: left;
}

.lista-popup li:last-child { border-bottom: 0; }
.lista-popup .valor { text-align: right; }
.lista-popup .nome { font-weight: 600; }
.lista-popup .detalhe { font-size: 12px; color: var(--tinta-fraca); }
.lista-popup .valor { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.lista-popup .valor-cartao { padding: 3px 10px; border-radius: 8px; color: #fff; }

/* Pilula da forma de pagamento no pop-up da coluna: o fundo e a cor do
   cartao (aplicada por JS via CSSOM, que o CSP permite). Boleto nao tem
   cor propria, entao fica no cinza neutro do tema. */
.selo-pagamento {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}

.selo-pagamento-boleto {
  background: var(--neutro-fundo);
  color: var(--neutro);
  border: 1px solid var(--linha);
}

.soma-popup {
  display: grid;
  grid-template-columns: 1fr auto;
  text-align: left;
  gap: 18px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 2px solid var(--ouro);
  font-weight: 800;
}

.soma-popup span:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------- nota de tipos ocultos */

.nota-ocultos {
  margin-top: 16px;
  padding: 13px 16px;
  border: 1px solid var(--linha);
  border-left: 3px solid var(--ouro);
  border-radius: var(--raio);
  background: var(--painel);
  font-size: 13px;
}

.nota-ocultos strong { color: var(--ouro); font-weight: 800; }
.nota-ocultos > div { margin-top: 6px; font-size: 12px; color: var(--tinta-fraca); }

.carregando { padding: 40px; text-align: center; color: var(--tinta-fraca); }

/* Aviso de mês fechado: é informação, não erro. */
.recado-travado {
  border-left-color: var(--ouro);
  background: var(--alerta-fundo);
  color: var(--alerta);
}

.recado-travado strong { color: var(--ouro); }

/* ---------------------------------------------------------------- acesso
   Mesma composicao da tela do Jornada: o claro dourado no canto de cima e um
   cartao estreito no centro. */

.tela-acesso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(201, 162, 75, .14), transparent),
    var(--fundo);
}

.cartao-acesso {
  width: 100%;
  max-width: 380px;
  padding: 30px 28px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: 16px;
  box-shadow: 0 24px 48px -24px rgba(20, 23, 28, .35);
}

.logo-acesso { display: flex; justify-content: center; margin-bottom: 20px; }

.cartao-acesso h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
}

.cartao-acesso h2 + .chave-acesso { margin-top: 18px; }
.cartao-acesso > .dica { margin: 0 0 20px; }
.cartao-acesso .campo { margin-bottom: 14px; }
.cartao-acesso .campo .dica { margin-top: 6px; }

.botao-largo { width: 100%; margin-top: 6px; padding: 11px 16px; }
/* Voltar embaixo do Entrar, no passo do codigo. */
.botao-fraco.botao-largo { margin-top: 8px; }

/* Pilula do usuario na barra do topo. */
.pilula-usuario {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 14px;
  margin-left: 2px;
  border-left: 1px solid var(--linha);
}

.pilula-usuario strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
}

.pilula-usuario span {
  display: block;
  font-size: 11px;
  color: var(--tinta-fraca);
}

@media (max-width: 640px) {
  .pilula-usuario > div { display: none; }
  .pilula-usuario { padding-left: 8px; border-left: 0; }
}

/* Codigo de 6 digitos: espacado, porque e lido de um celular e digitado aqui. */
.campo-codigo {
  text-align: center;
  letter-spacing: .5em;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

/* A chave do autenticador, pra copiar na mao quando o app nao le o QR. */
.chave-mfa {
  padding: 12px;
  border: 1px dashed var(--linha);
  border-radius: 10px;
  background: var(--sup-suave);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: .12em;
  text-align: center;
  word-break: break-all;
  user-select: all;
}

/* A chave USUARIO | ADMINISTRADOR da tela de login. */
.chave-acesso {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 18px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--sup-suave);
}

.chave-opcao {
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--tinta-fraca);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
}

.chave-opcao:hover { color: var(--tinta); }

.chave-ativa,
.chave-ativa:hover {
  background: var(--painel);
  color: var(--ouro);
  box-shadow: 0 1px 2px rgba(29, 33, 38, .12);
}