/* app.css — VOLTO DRIVE · Justificação de pagamentos.
   Assenta em vd-tokens.css: nenhuma cor nova é inventada aqui.
   Direcção: precisão de livro-razão — grelha fina, números tabulares, azul a fazer
   o trabalho, e o amarelo→laranja só dentro do "O". */

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--vd-bg-muted); }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--vd-bg-muted);
  color: var(--vd-fg);
  font-family: var(--vd-font-body);
  font-size: var(--vd-fs-14);
  line-height: var(--vd-lh-normal);
  -webkit-font-smoothing: antialiased;
}

/* vd-tokens.css pinta todos os títulos de azul da marca. Aqui a cor é sempre
   declarada no contexto — azul sobre azul não se lê. */
h1, h2, h3 { margin: 0; letter-spacing: var(--vd-tr-tight); text-wrap: balance; color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
a { color: var(--vd-accent); }
:focus-visible { outline: none; box-shadow: var(--vd-focus-ring); border-radius: var(--vd-r-xs); }

/* Dinheiro, datas e identificadores alinham em coluna. */
.num, .id, td.num { font-variant-numeric: tabular-nums; }
td.num { white-space: nowrap; }
.id { font-family: var(--vd-font-mono); font-size: var(--vd-fs-12); }

/* ── marca ───────────────────────────────────────────────── */
/* O logótipo é o ficheiro oficial da marca (wordmark VOLTO DRIVE, versão recortada do
   design system). Não se redesenha com texto: o brandbook proíbe alterar a tipografia,
   a composição e a escala dos elementos. Só a altura é controlada aqui — a largura vem
   da proporção do ficheiro (917×91). Dimensão mínima digital da wordmark: 75 px de
   largura; a 18 px de altura fica em ~181 px. */
.marca {
  display: block;
  height: 18px;
  width: auto;
}
.marca-grande { height: 26px; }

/* Área de proteção: o brandbook pede uma altura do «V» livre de cada lado, e o «V» ocupa
   toda a altura da wordmark — ou seja, 18 px à volta. A barra já dá mais do que isso: 24 px
   de padding lateral, 32 px de gap até às abas e 21 px acima e abaixo dentro dos 60 px. */
.topo-marca {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

/* ── ecrã de entrada ─────────────────────────────────────── */
.entrada {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--vd-s-6);
  background: var(--vd-ink-50);
}
.entrada-caixa {
  width: min(880px, 100%);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--vd-bg);
  border-radius: var(--vd-r-lg);
  box-shadow: var(--vd-shadow-md);
  overflow: hidden;
}
.entrada-lado {
  background: var(--vd-blue-500);
  color: var(--vd-fg-on-blue);
  padding: var(--vd-s-12) var(--vd-s-10);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--vd-s-16);
  min-height: 380px;
  /* A grelha do livro-razão, quase invisível, por baixo do texto. */
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 100% 34px, 34px 100%;
}
/* Sem `min-width: 0` os itens de grelha nunca encolhem abaixo do seu conteúdo:
   no telemóvel o painel transbordava a coluna e o título saía do cartão. */
.entrada-lado, .entrada-forma { min-width: 0; }
.entrada-lado h1 {
  font-size: var(--vd-fs-30);
  font-weight: var(--vd-w-semi);
  line-height: var(--vd-lh-snug);
  color: var(--vd-fg-on-blue);
  margin-bottom: var(--vd-s-3);
}
.entrada-lado p {
  margin: 0;
  color: var(--vd-blue-100);
  font-size: var(--vd-fs-14);
  max-width: 30ch;
}
.entrada-forma {
  padding: var(--vd-s-12) var(--vd-s-10);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.entrada-forma h2 {
  font-size: var(--vd-fs-20);
  font-weight: var(--vd-w-semi);
  color: var(--vd-accent);
  margin-bottom: var(--vd-s-2);
}
.entrada-sub {
  color: var(--vd-fg-muted);
  font-size: var(--vd-fs-14);
  margin: 0 0 var(--vd-s-6);
}
.entrada-divisor {
  display: flex; align-items: center; gap: var(--vd-s-3);
  margin: var(--vd-s-5) 0;
  color: var(--vd-fg-muted);
  font-size: var(--vd-fs-12);
}
.entrada-divisor::before, .entrada-divisor::after {
  content: ''; flex: 1; height: 1px; background: var(--vd-border);
}
label {
  display: block;
  font-size: var(--vd-fs-12);
  font-weight: var(--vd-w-semi);
  letter-spacing: var(--vd-tr-wider);
  text-transform: uppercase;
  color: var(--vd-fg-muted);
  margin-bottom: var(--vd-s-2);
}
input[type=email], input[type=password], input[type=text], input[type=number], select {
  width: 100%;
  padding: 10px var(--vd-s-3);
  margin-bottom: var(--vd-s-5);
  font: inherit;
  color: var(--vd-fg);
  background: var(--vd-bg);
  border: 1px solid var(--vd-border-strong);
  border-radius: var(--vd-r-sm);
  transition: border-color var(--vd-dur-fast) var(--vd-ease-out);
}
input:hover { border-color: var(--vd-ink-400); }

.botao {
  padding: 11px var(--vd-s-6);
  background: var(--vd-accent);
  color: var(--vd-accent-fg);
  font-weight: var(--vd-w-semi);
  border-radius: var(--vd-r-pill);
  transition: background var(--vd-dur-fast) var(--vd-ease-out),
              transform var(--vd-dur-fast) var(--vd-ease-out);
}
.botao:hover { background: var(--vd-accent-hover); }
.botao:active { transform: translateY(1px); }
.botao.secundario {
  background: var(--vd-bg);
  color: var(--vd-fg);
  border: 1px solid var(--vd-border-strong);
}
.botao.secundario:hover { background: var(--vd-ink-50); }
/* Botão do Google: segue a orientação de marca deles (fundo branco, texto cinza-escuro,
   logótipo a cores) — propositadamente diferente do resto da app, para se reconhecer
   de imediato como "entrar com uma conta que já tenho", não como mais um botão nosso. */
.botao-google {
  display: flex; align-items: center; justify-content: center; gap: var(--vd-s-3);
  padding: 10px var(--vd-s-6);
  background: #fff; color: #3c4043;
  font-weight: var(--vd-w-semi);
  border: 1px solid #dadce0;
  border-radius: var(--vd-r-pill);
  text-decoration: none;
  transition: background var(--vd-dur-fast) var(--vd-ease-out),
              box-shadow var(--vd-dur-fast) var(--vd-ease-out);
}
.botao-google:hover { background: #f8f9fa; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.botao-google:active { background: #f1f3f4; }
.ligacao {
  color: var(--vd-fg-muted);
  font-size: var(--vd-fs-14);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ligacao:hover { color: var(--vd-fg); }

.aviso {
  margin: 0 0 var(--vd-s-5);
  padding: var(--vd-s-3) var(--vd-s-4);
  background: var(--vd-orange-50);
  border-left: 3px solid var(--vd-danger);
  border-radius: var(--vd-r-xs);
  color: var(--vd-ink-700);
  font-size: var(--vd-fs-14);
}

@media (max-width: 720px) {
  .entrada-caixa { grid-template-columns: minmax(0, 1fr); }
  .entrada-lado { padding: var(--vd-s-8) var(--vd-s-6); gap: var(--vd-s-6); min-height: 0; }
  .entrada-forma { padding: var(--vd-s-8) var(--vd-s-6); }
}

/* O email/senha fica atrás de um <summary>, ao lado do botão Google — continua a
   existir (é o único acesso de quem não tem conta @voltodrive.com, e a rede de
   segurança se o Workspace bloquear o Google outra vez), só não compete
   visualmente com o botão principal. */
.entrada-alt { margin-top: var(--vd-s-5); }
.entrada-alt summary {
  cursor: pointer;
  list-style: none;
  color: var(--vd-fg-muted);
  font-size: var(--vd-fs-14);
}
.entrada-alt summary::-webkit-details-marker { display: none; }
.entrada-alt summary:hover { color: var(--vd-fg); }
.entrada-alt form { margin-top: var(--vd-s-5); }

/* ── barra da aplicação ──────────────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 20;
  height: 60px;
  display: flex; align-items: center; gap: var(--vd-s-8);
  padding: 0 var(--vd-s-6);
  background: var(--vd-bg);
  border-bottom: 1px solid var(--vd-border);
}
.topo-nav { display: flex; gap: var(--vd-s-1); }
.aba {
  padding: var(--vd-s-2) var(--vd-s-4);
  border-radius: var(--vd-r-sm);
  font-size: var(--vd-fs-14);
  font-weight: var(--vd-w-medium);
  color: var(--vd-fg-muted);
  transition: background var(--vd-dur-fast) var(--vd-ease-out);
}
.aba:hover { background: var(--vd-ink-50); color: var(--vd-fg); }
.aba[aria-current="true"] {
  background: var(--vd-blue-50);
  color: var(--vd-accent);
  font-weight: var(--vd-w-semi);
}
.topo-eu {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--vd-s-3);
  font-size: var(--vd-fs-14);
}
.eu-nome { font-weight: var(--vd-w-medium); }

.etiqueta {
  display: inline-block;
  padding: 2px var(--vd-s-2);
  border-radius: var(--vd-r-xs);
  background: var(--vd-ink-100);
  color: var(--vd-fg-muted);
  font-size: var(--vd-fs-12);
  font-weight: var(--vd-w-semi);
  letter-spacing: var(--vd-tr-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.etiqueta-azul { background: var(--vd-blue-50); color: var(--vd-accent); }

#app { max-width: 1240px; margin: 0 auto; padding: var(--vd-s-8) var(--vd-s-6) var(--vd-s-20); }
.a-carregar { color: var(--vd-fg-subtle); }

/* ── resumo ──────────────────────────────────────────────── */
.resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--vd-border);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-r-md);
  overflow: hidden;
  margin-bottom: var(--vd-s-6);
}
.ficha { background: var(--vd-bg); padding: var(--vd-s-5); }
.ficha-rotulo {
  font-size: var(--vd-fs-12);
  font-weight: var(--vd-w-semi);
  letter-spacing: var(--vd-tr-wider);
  text-transform: uppercase;
  color: var(--vd-fg-subtle);
}
.ficha-valor {
  font-size: var(--vd-fs-24);
  font-weight: var(--vd-w-semi);
  line-height: var(--vd-lh-snug);
  margin-top: var(--vd-s-2);
  font-variant-numeric: tabular-nums;
}
.ficha-nota { font-size: var(--vd-fs-12); color: var(--vd-fg-muted); margin-top: 2px; }
.ficha.destaque { background: var(--vd-blue-50); }
.ficha.destaque .ficha-valor, .ficha.destaque .ficha-rotulo { color: var(--vd-accent); }

/* ── filtros ─────────────────────────────────────────────── */
/* As várias filas (estado, período, origem, loja) empilham-se juntas com um espaço
   pequeno e igual entre todas — mais previsível do que ajustar cada fila com margens
   negativas à conta da fila anterior. */
.filtros-grupo {
  display: flex; flex-direction: column; gap: var(--vd-s-1);
  margin-bottom: var(--vd-s-4);
}
.filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--vd-s-2);
  margin-bottom: var(--vd-s-4);
}
/* Dentro do grupo, o espaço entre filas já vem do `gap` do grupo — a margem própria
   de cada fila somava-se a esse gap e voltava a abrir o espaço que o grupo fecha. */
.filtros-grupo .filtros { margin-bottom: 0; }
.chip {
  padding: 6px var(--vd-s-3);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-r-pill);
  background: var(--vd-bg);
  font-size: var(--vd-fs-14);
  color: var(--vd-fg-muted);
  white-space: nowrap;
  transition: background var(--vd-dur-fast) var(--vd-ease-out);
}
.chip:hover { background: var(--vd-ink-50); color: var(--vd-fg); }
.chip[aria-pressed="true"] {
  background: var(--vd-accent); border-color: var(--vd-accent);
  color: var(--vd-accent-fg); font-weight: var(--vd-w-medium);
}
.chip .n { font-variant-numeric: tabular-nums; opacity: .75; margin-left: 2px; }
input.procura {
  margin-left: auto;
  margin-bottom: 0;
  width: min(240px, 100%);
  padding: 7px var(--vd-s-3);
}

.filtro-periodo {
  display: flex; align-items: center; gap: var(--vd-s-2);
  font-size: var(--vd-fs-14); color: var(--vd-fg-muted); white-space: nowrap;
  margin-left: auto;
}
.filtro-periodo label { display: flex; align-items: center; gap: 4px; }
.filtro-periodo input[type="date"] {
  padding: 5px var(--vd-s-2);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-r-1, 6px);
  background: var(--vd-bg);
  color: var(--vd-fg);
  font-size: var(--vd-fs-14);
}

/* A segunda fila de filtros é a origem do dinheiro — secundária, e assim se lê. */
.filtros-origem .chip { font-size: var(--vd-fs-12); padding: 4px var(--vd-s-3); }

/* Largura fixa: sem isto o fechado herda a largura da opção mais comprida
   ("Lisboa - Centro Vasco da Gama (54)") e fica tão largo como a fila de chips
   que substitui — o que anulava o ganho de espaço. */
.select-loja {
  font-size: var(--vd-fs-12);
  padding: 4px 22px 4px var(--vd-s-3);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-r-pill);
  background: var(--vd-bg);
  color: var(--vd-fg-muted);
  width: 210px;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select-loja:hover { color: var(--vd-fg); }

/* ── tabela ──────────────────────────────────────────────── */
.quadro {
  background: var(--vd-bg);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-r-md);
  overflow: clip;
}
.rolo { overflow-x: clip; }
@media (max-width: 900px) { .rolo { overflow-x: auto; } }
table { width: 100%; border-collapse: collapse; font-size: var(--vd-fs-14); }
thead th {
  position: sticky; top: 60px; z-index: 5;
  background: var(--vd-ink-50);
  text-align: left; white-space: nowrap;
  padding: var(--vd-s-3) var(--vd-s-4);
  font-size: var(--vd-fs-12); font-weight: var(--vd-w-semi);
  letter-spacing: var(--vd-tr-wide); text-transform: uppercase;
  color: var(--vd-fg-muted);
  border-bottom: 1px solid var(--vd-border);
}
th.dir, td.dir { text-align: right; }
tbody td {
  padding: var(--vd-s-3) var(--vd-s-4);
  border-bottom: 1px solid var(--vd-divider);
  vertical-align: top;
}
tbody tr.linha { cursor: pointer; }
tbody tr.linha:hover td { background: var(--vd-ink-50); }
tbody tr.linha.aberta td { background: var(--vd-blue-50); }
tbody tr.apagada td { color: var(--vd-fg-subtle); }
.dinheiro { font-weight: var(--vd-w-semi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sub { display: block; font-size: var(--vd-fs-12); color: var(--vd-fg-muted); }
.vazio { padding: var(--vd-s-12); text-align: center; color: var(--vd-fg-subtle); }

/* Estados: a cor diz o que é preciso fazer, não o que aconteceu. */
/* Tons próprios, mais escuros que os da paleta: sobre os fundos claros das etiquetas,
   os originais davam 3,05:1 e 2,13:1 — e a de "por justificar" é a que diz que há
   trabalho ali. Medidos: 4,52:1 e 4,58:1. */
.et-por-justificar { background: var(--vd-orange-50); color: #A05E14; }
.et-automatico     { background: var(--vd-blue-50);   color: var(--vd-accent); }
.et-justificado    { background: #E4F3EB;             color: var(--vd-success); }
.et-nao-faturar    { background: var(--vd-ink-100);   color: var(--vd-fg-muted); }
.et-adiado         { background: var(--vd-yellow-50); color: #8F6C13; }
.et-nao-entrou     { background: var(--vd-ink-100);   color: var(--vd-fg-subtle); }

/* ── painel de decisão ───────────────────────────────────── */
tr.painel > td {
  background: var(--vd-blue-50);
  padding: var(--vd-s-5) var(--vd-s-6) var(--vd-s-6);
  border-bottom: 2px solid var(--vd-blue-200);
}
.painel-topo {
  display: flex; flex-wrap: wrap; gap: var(--vd-s-4);
  justify-content: space-between; align-items: baseline;
  margin-bottom: var(--vd-s-4);
}
.painel h3 { font-size: var(--vd-fs-16); font-weight: var(--vd-w-semi); color: var(--vd-fg); }
.painel-nota { font-size: var(--vd-fs-14); color: var(--vd-fg-muted); }

.candidatos { display: grid; gap: var(--vd-s-2); margin-bottom: var(--vd-s-4); }
.candidato {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--vd-s-3);
  width: 100%; text-align: left;
  padding: var(--vd-s-3) var(--vd-s-4);
  background: var(--vd-bg);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-r-sm);
  transition: border-color var(--vd-dur-fast) var(--vd-ease-out);
}
.candidato:hover { border-color: var(--vd-accent); box-shadow: var(--vd-shadow-xs); }
.candidato.escolhido {
  border-color: var(--vd-accent); border-width: 2px;
  background: var(--vd-bg); box-shadow: var(--vd-shadow-sm);
}
.candidato .quem { font-weight: var(--vd-w-medium); }
.candidato .resto { margin-left: auto; color: var(--vd-fg-muted); font-size: var(--vd-fs-12); }
/* A razão pela qual esta hipótese está na lista. Ocupa a linha toda por baixo: é o que
   se lê a seguir ao ID, não um detalhe encostado à direita. */
.candidato .porque {
  flex-basis: 100%; color: var(--vd-fg-muted); font-size: var(--vd-fs-12);
  font-style: italic;
}

.accoes { display: flex; flex-wrap: wrap; gap: var(--vd-s-2); align-items: center; }
.accoes .botao { padding: 7px var(--vd-s-4); font-size: var(--vd-fs-14); }

.bloco-fatura { margin-bottom: var(--vd-s-3); }
.bloco-fatura .numero-fatura {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--vd-s-2);
  font-size: var(--vd-fs-14); color: var(--vd-fg-muted);
}
.bloco-fatura .numero-fatura input[type="text"] {
  padding: 6px var(--vd-s-3);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-r-sm);
  background: var(--vd-bg);
  color: var(--vd-fg);
  font-size: var(--vd-fs-14);
  width: 160px;
}

.accoes-linha { white-space: nowrap; }
.accoes-linha .botao { padding: 5px var(--vd-s-3); font-size: var(--vd-fs-12); }
.accoes-linha .ligacao { margin-left: var(--vd-s-2); font-size: var(--vd-fs-12); }

.historico { margin-top: var(--vd-s-5); font-size: var(--vd-fs-12); color: var(--vd-fg-muted); }
.historico li { margin-bottom: 2px; }
.historico ul { margin: var(--vd-s-2) 0 0; padding-left: var(--vd-s-5); }

.erro-linha {
  margin: var(--vd-s-3) 0 0; padding: var(--vd-s-2) var(--vd-s-3);
  background: var(--vd-orange-50); border-left: 3px solid var(--vd-danger);
  border-radius: var(--vd-r-xs); font-size: var(--vd-fs-14);
}

/* ── exportar ────────────────────────────────────────────── */
.aviso-caixa {
  padding: var(--vd-s-4) var(--vd-s-5);
  background: var(--vd-yellow-50);
  border-left: 3px solid var(--vd-warm);
  border-radius: var(--vd-r-sm);
  margin-bottom: var(--vd-s-6);
}
.aviso-caixa h3 { font-size: var(--vd-fs-14); font-weight: var(--vd-w-semi); color: var(--vd-fg); }
.aviso-caixa p { margin: var(--vd-s-1) 0 0; font-size: var(--vd-fs-14); color: var(--vd-fg-muted); max-width: 70ch; }

h3.seccao {
  font-size: var(--vd-fs-12); font-weight: var(--vd-w-semi);
  letter-spacing: var(--vd-tr-wider); text-transform: uppercase;
  color: var(--vd-fg-subtle);
  margin: var(--vd-s-6) 0 var(--vd-s-3);
}
.nota-solta { margin: var(--vd-s-3) 0 0; }
.descarregar { margin-top: var(--vd-s-8); }
.descarregar .botao { text-decoration: none; display: inline-block; }

/* Uma importação que não gravou nada tem de se distinguir de um ficheiro repetido —
   a olho, na tabela, sem ser preciso comparar números. */
tr.falhou td { background: var(--vd-red-50, #FDECEC); }
.erro-celula { color: var(--vd-danger, #C0392B); font-size: var(--vd-fs-13, 0.8125rem); }

/* ── faturado ────────────────────────────────────────────────
   Confirmar que se faturou é o único acto desta aba que escreve: fica dentro de um
   quadro próprio, longe dos dois links de descarregar, para não se tocar por engano. */
.painel-faturei { padding: var(--vd-s-4) var(--vd-s-5); }
.painel-faturei p {
  margin: 0 0 var(--vd-s-4); max-width: 70ch;
  font-size: var(--vd-fs-14); color: var(--vd-fg-muted);
}
/* Uma linha desfeita continua na lista — apagá-la seria cegar a auditoria. Lê-se como
   história: fica lá, mas deixa de pedir atenção. */
tr.apagado td { color: var(--vd-fg-subtle); text-decoration: line-through; }
tr.apagado td:first-child, tr.apagado td:nth-child(2) { text-decoration: none; }
/* Sem isto, quem navega por teclado não vê onde está. */
tr.linha:focus-visible { outline: 2px solid var(--vd-accent, #2C6FD1); outline-offset: -2px; }

/* Uma reserva de outra loja não se esconde — um cliente pode entregar o carro noutro
   sítio — mas tem de se ver que é de outra loja antes de se registar dinheiro nela. */
.outra-loja { color: var(--vd-warning); font-weight: var(--vd-w-semi); }

/* O número que decide entre quatro candidatas. Quando bate certo com o valor do
   pagamento, ganha peso — é a coincidência que fecha o caso. */
.candidato .falta { display: block; font-size: var(--vd-fs-12); color: var(--vd-fg-muted); }
.candidato .falta.certo { color: var(--vd-success); font-weight: var(--vd-w-semi); }
.candidato .falta.paga { color: var(--vd-fg-subtle); }

/* A história de uma caução: retido → cobrado → devolvido. É uma pista sobre o que o
   pagamento é, não um aviso — por isso não leva a cor de alerta. */
.nota-caucao {
  margin-top: var(--vd-s-3); padding: var(--vd-s-3) var(--vd-s-4);
  background: var(--vd-surface-2, #F4F5F8); border-left: 3px solid var(--vd-border-strong);
  border-radius: var(--vd-r-sm);
}
.nota-faturado {
  margin-top: var(--vd-s-3); padding: var(--vd-s-3) var(--vd-s-4);
  background: var(--vd-yellow-50); border-left: 3px solid var(--vd-warm);
  border-radius: var(--vd-r-sm);
}

/* ── importar ────────────────────────────────────────────── */
/* É um <label> para o clique abrir o selector de ficheiros — mas nada tem que ver
   com os rótulos dos formulários, por isso desfaz a maiusculização herdada. */
.largar {
  display: flex; flex-direction: column; gap: var(--vd-s-2);
  text-transform: none; letter-spacing: normal; margin-bottom: 0;
  color: var(--vd-fg);
  align-items: center; text-align: center;
  padding: var(--vd-s-10) var(--vd-s-6);
  background: var(--vd-bg);
  border: 1px dashed var(--vd-border-strong);
  border-radius: var(--vd-r-md);
  cursor: pointer;
  transition: background var(--vd-dur-fast) var(--vd-ease-out),
              border-color var(--vd-dur-fast) var(--vd-ease-out);
}
.largar:hover { background: var(--vd-ink-50); border-color: var(--vd-accent); }
/* Realce enquanto o ficheiro paira por cima. */
.largar.a-largar { background: var(--vd-blue-50); border-color: var(--vd-accent); }
.largar.ocupada { cursor: progress; opacity: .6; }
.largar strong { font-size: var(--vd-fs-16); font-weight: var(--vd-w-semi); color: var(--vd-fg); }
.largar span { font-size: var(--vd-fs-14); font-weight: var(--vd-w-regular); color: var(--vd-fg-muted); }
/* O input fica invisível mas continua a receber o foco do teclado. */
.largar input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.largar:focus-within { box-shadow: var(--vd-focus-ring); }

.resultados { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vd-s-2); }
.resultado {
  padding: var(--vd-s-3) var(--vd-s-4);
  background: var(--vd-bg);
  border: 1px solid var(--vd-border);
  border-left-width: 3px;
  border-radius: var(--vd-r-sm);
}
.resultado.bom { border-left-color: var(--vd-success); }
.resultado.mau { border-left-color: var(--vd-danger); background: var(--vd-orange-50); }
/* Lido e reconhecido, mas sem efeito nos números — não é um sucesso nem um erro. */
.resultado.parcial { border-left-color: var(--vd-warm); background: var(--vd-yellow-50); }
.resultado strong { display: block; font-weight: var(--vd-w-semi); }
.resultado span { display: block; font-size: var(--vd-fs-14); color: var(--vd-fg-muted); }
.resultado .sub { font-size: var(--vd-fs-12); }

/* O balanço: o "antes" recua para o fundo, a diferença é o que se lê primeiro. */
.balanco { margin-top: var(--vd-s-5); }
.balanco .antes { color: var(--vd-fg-subtle); }
.balanco .igual { color: var(--vd-fg-subtle); }
.balanco .mexeu { font-weight: var(--vd-w-semi); color: var(--vd-accent); }
/* A taxa pode descer enquanto o número sobe: o aviso vive por baixo da diferença. */
.balanco .mexeu .sub { font-weight: var(--vd-w-regular); color: var(--vd-orange-700); }
.balanco-igual {
  margin: var(--vd-s-5) 0 0;
  padding: var(--vd-s-3) var(--vd-s-4);
  background: var(--vd-bg);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-r-sm);
  color: var(--vd-fg-muted);
}

/* ── ecrãs estreitos ─────────────────────────────────────── */
@media (max-width: 700px) {
  /* A barra não cabe numa linha: passa a duas, e o nome encurta em vez de empurrar. */
  .topo {
    height: auto; flex-wrap: wrap; gap: var(--vd-s-3);
    padding: var(--vd-s-2) var(--vd-s-4);
  }
  /* Em telemóvel o logótipo encolhe, mas nunca abaixo dos 75 px de largura
     que o brandbook exige (14 px de altura ≈ 141 px de largura). */
  .topo-marca .marca { height: 14px; }
  .topo-eu .etiqueta { display: none; }
  .eu-nome { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Quatro abas não cabem lado a lado num telemóvel: encolhem o que podem e, se ainda
     assim não couberem, a barra rola em vez de cortar a última. */
  .topo-nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .topo-nav::-webkit-scrollbar { display: none; }
  .aba { flex: 1 0 auto; text-align: center; padding-inline: var(--vd-s-3); }

  #app { padding: var(--vd-s-5) var(--vd-s-4) var(--vd-s-16); }
  .ficha { padding: var(--vd-s-4); }
  .ficha-valor { font-size: var(--vd-fs-20); }
  input.procura { margin-left: 0; width: 100%; }
  tr.painel > td { padding: var(--vd-s-4); }
  .candidato .resto { margin-left: 0; width: 100%; }
  .largar { padding: var(--vd-s-6) var(--vd-s-4); }
}

/* O rolo horizontal faz da tabela um contentor de scroll: aí o cabeçalho pegajoso
   cola-se a ele e tapa a primeira linha. Em ecrãs estreitos fica quieto. */
@media (max-width: 900px) {
  thead th { position: static; }
}


/* ── registo de auditoria ─────────────────────────────────────────────────────
   Duas acções pedem os olhos: uma decisão humana (é o que fica no registo para
   sempre) e um alerta (uma entrada falhada, uma decisão desfeita). O resto é
   ruído de funcionamento e fica ao nível do texto normal. */
.reg-decisao td:nth-child(3) { font-weight: var(--vd-w-medium); }
.reg-alerta  td:nth-child(3) { color: var(--vd-danger); }
.reg-alerta  td:first-child::before {
  content: '•'; color: var(--vd-danger); margin-right: var(--vd-s-2);
}


/* ── subscrições escondidas ───────────────────────────────────────────────────
   Escondidas por omissão, nunca em silêncio: o interruptor fica ao lado dos
   filtros de origem, afastado deles porque não é uma origem — é uma excepção. */
.chip-solto { margin-left: 0; }
.nota-escondidos {
  margin: calc(var(--vd-s-2) * -1) 0 var(--vd-s-4);
  color: var(--vd-fg-muted); font-size: var(--vd-fs-12); max-width: 68ch;
}


/* ── o cadeado ────────────────────────────────────────────────────────────────
   Está no DESFAZER, não no gravar. Decidir é o trabalho normal; mexer numa
   decisão já tomada é que é raro e caro. O motivo aparece só no segundo toque:
   um aviso permanente deixa de ser lido ao fim de três dias. */
.cadeado-aberto {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--vd-s-3);
  padding: var(--vd-s-2) var(--vd-s-3);
  background: var(--vd-orange-50); border-left: 3px solid var(--vd-danger);
  border-radius: var(--vd-r-sm);
}
.cadeado-aberto .sub { max-width: 42ch; }
.botao.perigo { background: var(--vd-danger); border-color: var(--vd-danger); color: #fff; }

/* A mesma confirmação em dois toques, mas para uma acção normal (avançar), não uma
   correcção. O laranja/vermelho do cadeado é para desfazer o que já está feito — aqui
   é só o segundo passo de "já faturei", e não deve parecer um aviso. */
.cadeado-aberto.neutro {
  background: var(--vd-ink-50); border-left: 3px solid var(--vd-accent);
}
.cadeado-aberto.neutro .botao.perigo {
  background: var(--vd-accent); border-color: var(--vd-accent); color: var(--vd-accent-fg);
}

/* ── dinheiro declarado, à espera de um admin ─────────────────────────────── */
.declarado {
  display: inline-flex; align-items: center; gap: var(--vd-s-2);
  color: var(--vd-fg-muted); font-size: var(--vd-fs-12);
}
.declarado::before { content: '⏳'; }


/* ── a reserva por inteiro, dentro do painel do pagamento ─────────────────────
   O admin decide a partir da lista de pagamentos. Para julgar um pagamento de
   9,20 € precisa da conta da reserva de 220 € ao lado — não noutro ecrã. */
.contexto {
  margin-top: var(--vd-s-4); padding: var(--vd-s-4);
  background: var(--vd-ink-50); border-radius: var(--vd-r-sm);
}
.contexto h4 { margin: 0 0 var(--vd-s-3); font-size: var(--vd-fs-14); }
.conta { display: flex; flex-wrap: wrap; gap: var(--vd-s-5); margin: 0 0 var(--vd-s-3); }
.conta div { display: flex; flex-direction: column; gap: 2px; }
.conta dt { color: var(--vd-fg-muted); font-size: var(--vd-fs-12); }
.conta dd { margin: 0; font-weight: var(--vd-w-medium); font-variant-numeric: tabular-nums; }
.conta dd .sub { display: block; font-weight: 400; }
.irmaos { margin: var(--vd-s-2) 0 var(--vd-s-3); padding-left: var(--vd-s-4); }
.irmaos li { font-size: var(--vd-fs-12); margin-bottom: 2px; }


/* ── balcão ───────────────────────────────────────────────────────────────────
   Um ecrã para usar de pé, com o cliente à frente e o telemóvel na mão. Tudo
   maior do que no resto da aplicação: alvos de toque, não de rato. */
.procura-balcao { display: block; margin-bottom: var(--vd-s-4); }
.procura-balcao span {
  display: block; margin-bottom: var(--vd-s-2);
  font-size: var(--vd-fs-14); color: var(--vd-fg-muted);
}
.procura-balcao input {
  width: 100%; padding: var(--vd-s-4);
  font-size: var(--vd-fs-18, 18px);            /* 16px+ evita o zoom do iOS ao focar */
  border: 1px solid var(--vd-border); border-radius: var(--vd-r-sm);
  background: var(--vd-bg); color: var(--vd-fg);
}
.procura-balcao input:focus { outline: 2px solid var(--vd-accent); outline-offset: 1px; }
.balcao-dica { margin: var(--vd-s-4) 0; }

.balcao-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vd-s-3); }
.balcao-lista li {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--vd-s-3);
  padding: var(--vd-s-4); background: var(--vd-bg);
  border: 1px solid var(--vd-border); border-radius: var(--vd-r-sm);
}
.balcao-lista li.aberta { border-color: var(--vd-accent); border-width: 2px; }
.balcao-quem { flex: 1 1 14rem; }
.balcao-valor { text-align: right; font-variant-numeric: tabular-nums; }
.balcao-accao { flex-basis: 100%; display: flex; gap: var(--vd-s-3); align-items: center; }
.balcao-accao .botao { flex: 1; padding: var(--vd-s-4); }

/* Criada ao balcão, à espera de a WWM confirmar — nunca em silêncio: quem a vê tem de
   saber que não é ainda um dado validado por eles. */
.tag-manual {
  margin-left: var(--vd-s-2);
  padding: 2px var(--vd-s-2);
  font-size: var(--vd-fs-12);
  font-weight: var(--vd-w-medium);
  color: var(--vd-orange-700);
  background: var(--vd-orange-50);
  border-radius: var(--vd-r-pill);
}

.reserva-manual {
  display: grid; gap: var(--vd-s-3); max-width: 26rem;
  margin-top: var(--vd-s-3); padding: var(--vd-s-4);
  background: var(--vd-bg); border: 1px solid var(--vd-border); border-radius: var(--vd-r-sm);
}
.reserva-manual label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--vd-fs-12); color: var(--vd-fg-muted);
}
.reserva-manual input {
  padding: var(--vd-s-2) var(--vd-s-3);
  border: 1px solid var(--vd-border); border-radius: var(--vd-r-sm);
  background: var(--vd-bg); color: var(--vd-fg); font-size: var(--vd-fs-14);
}

.aviso-caixa.feito { border-left: 3px solid var(--vd-accent); }

@media (min-width: 40rem) {
  .balcao-accao { flex-basis: auto; margin-left: auto; }
  .balcao-accao .botao { flex: none; }
}


/* ── quanto se recebeu ────────────────────────────────────────────────────────
   Abre com o que falta lá dentro, porque é o caso comum — mas raramente se
   recebe tudo em dinheiro, e escrever outro número tem de ser trivial. */
.valor-dinheiro { display: flex; align-items: center; gap: var(--vd-s-2); }
.valor-dinheiro span { color: var(--vd-fg-muted); font-size: var(--vd-fs-12); }
.valor-dinheiro input {
  width: 7rem; padding: var(--vd-s-3);
  font-size: var(--vd-fs-18, 18px); text-align: right;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--vd-border); border-radius: var(--vd-r-sm);
  background: var(--vd-bg); color: var(--vd-fg);
}
.valor-dinheiro input:focus { outline: 2px solid var(--vd-accent); outline-offset: 1px; }
.botao[disabled] { opacity: .45; cursor: not-allowed; }
.accoes-dinheiro { display: flex; flex-wrap: wrap; gap: var(--vd-s-3); align-items: center; }


/* O espaço do "já está faturada" — reservado, e a dizer que está reservado. */
.faturacao {
  padding: var(--vd-s-2) var(--vd-s-3); margin: 0 0 var(--vd-s-3);
  border: 1px dashed var(--vd-border); border-radius: var(--vd-r-sm);
}


/* A entrada de dinheiro é a única sem prova externa nenhuma — é a que o admin tem
   mesmo de ver ao abrir o pagamento, não uma linha igual às outras. */
.conta .destaque-dinheiro dt { color: var(--vd-fg); font-weight: var(--vd-w-medium); }
.conta .destaque-dinheiro dd { color: var(--vd-danger); }