/* ---------------------------------------------------------------------- */
/* Sistema de design — FaturaTrack                                        */
/* As cores de dados são as mesmas que os gráficos usam (azul=vendas,     */
/* laranja=compras, verde=salários, âmbar=margem, vermelho=IVA), para a   */
/* aplicação e a página de apresentação falarem a mesma língua.           */
/* ---------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --cor-fundo: #f6f7f9;
  --cor-fundo-cartao: #ffffff;
  --cor-fundo-suave: #edeff4;
  --cor-texto: #14161a;
  --cor-texto-suave: #565c66;
  --cor-texto-fraco: #868d99;
  --cor-borda: #e2e5ea;
  --cor-borda-suave: #edeff3;

  --cor-acento: #1d5fb8;
  --cor-acento-vivo: #2a78d6;
  --cor-acento-hover: #17498e;
  --cor-acento-fraco: #eaf1fb;

  --cor-sucesso: #12855c;
  --cor-sucesso-fundo: #e6f7f0;
  --cor-sucesso-borda: #a9e3cb;

  --cor-aviso: #a34a18;
  --cor-aviso-fundo: #fdede6;
  --cor-aviso-borda: #f5c4ac;

  --cor-erro: #c13b3a;
  --cor-erro-fundo: #fcebea;
  --cor-erro-borda: #f2b9b8;

  --cor-info: #2a78d6;
  --cor-info-fundo: #eaf1fb;
  --cor-info-borda: #b9d3f5;

  /* cores de dados, para gráficos e realces por categoria */
  --dado-vendas: #2a78d6;
  --dado-compras: #eb6834;
  --dado-salarios: #1baf7a;
  --dado-margem: #eda100;
  --dado-iva: #e34948;
  --dado-aparte: #e87ba4;

  --sombra-cartao: 0 1px 2px rgba(20, 22, 26, 0.06);
  --sombra-elevada: 0 1px 3px rgba(20, 22, 26, 0.07), 0 14px 32px -16px rgba(20, 30, 50, 0.24);
  --raio: 12px;
  --raio-pequeno: 8px;

  --barra-lateral-fundo-1: #182644;
  --barra-lateral-fundo-2: #0e1729;
  --barra-lateral-texto: #93a2be;
  --barra-lateral-texto-ativo: #e8edf7;
  --barra-lateral-linha: #24334f;
  --barra-lateral-acento: #6ba6f0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cor-fundo: #0b111e;
    --cor-fundo-cartao: #141d30;
    --cor-fundo-suave: #1b2740;
    --cor-texto: #e8edf7;
    --cor-texto-suave: #93a2be;
    --cor-texto-fraco: #6f7f9c;
    --cor-borda: #24334f;
    --cor-borda-suave: #1b2740;

    --cor-acento: #6ba6f0;
    --cor-acento-vivo: #6ba6f0;
    --cor-acento-hover: #92c0f7;
    --cor-acento-fraco: #16233c;

    --cor-sucesso: #4fc596;
    --cor-sucesso-fundo: #11291f;
    --cor-sucesso-borda: #1f5b42;
    --cor-aviso: #e08d5e;
    --cor-aviso-fundo: #2b1d13;
    --cor-aviso-borda: #6b4325;
    --cor-erro: #ee7b7a;
    --cor-erro-fundo: #2d1618;
    --cor-erro-borda: #6e2f31;
    --cor-info: #6ba6f0;
    --cor-info-fundo: #16233c;
    --cor-info-borda: #274674;
}
}

:root[data-theme="dark"] {
  --cor-fundo: #0b111e;
  --cor-fundo-cartao: #141d30;
  --cor-fundo-suave: #1b2740;
  --cor-texto: #e8edf7;
  --cor-texto-suave: #93a2be;
  --cor-texto-fraco: #6f7f9c;
  --cor-borda: #24334f;
  --cor-borda-suave: #1b2740;
  --cor-acento: #6ba6f0;
  --cor-acento-vivo: #6ba6f0;
  --cor-acento-hover: #92c0f7;
  --cor-acento-fraco: #16233c;
  --cor-sucesso: #4fc596;
  --cor-sucesso-fundo: #11291f;
  --cor-sucesso-borda: #1f5b42;
  --cor-aviso: #e08d5e;
  --cor-aviso-fundo: #2b1d13;
  --cor-aviso-borda: #6b4325;
  --cor-erro: #ee7b7a;
  --cor-erro-fundo: #2d1618;
  --cor-erro-borda: #6e2f31;
  --cor-info: #6ba6f0;
  --cor-info-fundo: #16233c;
  --cor-info-borda: #274674;
}

:root[data-theme="light"] {
  --cor-fundo: #f6f7f9;
  --cor-fundo-cartao: #ffffff;
  --cor-fundo-suave: #edeff4;
  --cor-texto: #14161a;
  --cor-texto-suave: #565c66;
  --cor-texto-fraco: #868d99;
  --cor-borda: #e2e5ea;
  --cor-borda-suave: #edeff3;
  --cor-acento: #1d5fb8;
  --cor-acento-vivo: #2a78d6;
  --cor-acento-hover: #17498e;
  --cor-acento-fraco: #eaf1fb;
  --cor-sucesso: #12855c;
  --cor-sucesso-fundo: #e6f7f0;
  --cor-sucesso-borda: #a9e3cb;
  --cor-aviso: #a34a18;
  --cor-aviso-fundo: #fdede6;
  --cor-aviso-borda: #f5c4ac;
  --cor-erro: #c13b3a;
  --cor-erro-fundo: #fcebea;
  --cor-erro-borda: #f2b9b8;
  --cor-info: #2a78d6;
  --cor-info-fundo: #eaf1fb;
  --cor-info-borda: #b9d3f5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------- */
/* Layout: barra lateral + conteúdo                                       */
/* ---------------------------------------------------------------------- */

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

.barra-lateral {
  width: 232px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--barra-lateral-fundo-1), var(--barra-lateral-fundo-2));
  color: var(--barra-lateral-texto);
  padding: 1.25rem 0.9rem;
  position: sticky;
  top: 0;
  height: 100vh;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem 1.5rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  letter-spacing: 0.2px;
}


.nav-principal {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--raio-pequeno);
  color: var(--barra-lateral-texto);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--barra-lateral-texto-ativo);
}

.nav-link.ativo {
  background: rgba(107, 166, 240, 0.14);
  color: var(--barra-lateral-texto-ativo);
  box-shadow: inset 2px 0 0 var(--barra-lateral-acento);
}

/* Ícones desenhados a traço, num sprite único no base.html — substituíram os emoji,
   que variavam de forma consoante o sistema operativo e davam ar de app de telemóvel
   a uma ferramenta de contabilidade. Herdam a cor do texto, por isso acompanham
   automaticamente o estado ativo e o tema. */
.sprite-icones { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprite-icones symbol { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Ícones cheios, a duas cores, desenhados de raiz — a mesma leitura imediata que os
   emoji davam, mas coerentes entre si e iguais em qualquer sistema operativo. Cada um
   usa a cor que aquele dado já tem nos gráficos: vendas azul, compras laranja, salários
   verde. Sem caixa nem fundo: a cor sozinha chega para dar peso. */
.sprite-icones { position: absolute; width: 0; height: 0; overflow: hidden; }

.nav-link {
  --c1: #8fa3c4;   /* forma principal */
  --c2: #46567a;   /* forma secundária, mais apagada */
}
.nav-link[data-cor="azul"]     { --c1: #6ba6f0; --c2: #2f4d78; }
.nav-link[data-cor="laranja"]  { --c1: #f0925e; --c2: #6f4632; }
.nav-link[data-cor="verde"]    { --c1: #4fc596; --c2: #2a5f4c; }
.nav-link[data-cor="ambar"]    { --c1: #e8b84b; --c2: #6b552a; }
.nav-link[data-cor="vermelho"] { --c1: #ee7b7a; --c2: #6d3a3d; }
.nav-link[data-cor="rosa"]     { --c1: #f09bc0; --c2: #6f4459; }
.nav-link[data-cor="cinza"]    { --c1: #a7b4cc; --c2: #46567a; }

.nav-icone {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
/* ao passar e no item ativo a forma secundária ganha vida, sem nada mudar de tamanho */
.nav-link:hover  { --c2: color-mix(in srgb, var(--c1) 55%, transparent); }
.nav-link.ativo  { --c2: color-mix(in srgb, var(--c1) 62%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .nav-link:hover .nav-icone { transform: scale(1.06); }
}

.marca-icone { width: 22px; height: 22px; flex-shrink: 0; --c1: #6ba6f0; --c2: #f0925e; }

.conteudo-principal {
  flex: 1;
  min-width: 0;
  padding: 2rem 2.5rem 4rem;
}

/* Sem max-width: o conteúdo preenche genuinamente o espaço disponível ao lado da barra
   lateral, seja qual for o tamanho da janela — só a barra lateral tem largura fixa. */
main { width: 100%; }

/* O botão que abre o menu só existe no telemóvel — no ecrã grande a barra está sempre lá. */
.menu-alternar { display: none; }

@media (max-width: 780px) {
  /*
    A barra lateral, empilhada em cima, ocupava o primeiro ecrã inteiro: onze secções em duas
    ou três linhas, e o conteúdo só começava depois disso. Quem abria a aplicação no telemóvel
    via um menu, não via o trabalho.

    Passa a ser uma barra fina, colada ao topo e sempre alcançável com o polegar, com o menu
    a abrir por cima quando é preciso. O que se vê primeiro passa a ser o que interessa.
  */
  .app-shell { flex-direction: column; }

  .barra-lateral {
    width: 100%;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 0.6rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  }

  .barra-lateral .marca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    gap: 0.6rem;
  }

  .menu-alternar {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
    /* 44px de lado: é o mínimo que um dedo acerta sem falhar. Um botão de 30px numa barra
       encostada ao topo do ecrã é o tipo de coisa em que se carrega três vezes. */
    min-height: 44px;
    min-width: 44px;
    padding: 0 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--raio-pequeno);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
  }
  .menu-alternar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .menu-alternar .menu-alternar-barras {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
  }
  .menu-alternar .menu-alternar-barras i {
    display: block;
    width: 17px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
  }

  /* Fechado por omissão. Sem JavaScript nada disto se aplica — ver a regra .sem-js abaixo. */
  .barra-lateral .nav-principal { display: none; }
  .barra-lateral[data-aberta="1"] .nav-principal { display: flex; }

  .nav-principal {
    flex-direction: column;
    flex-wrap: nowrap;
    margin-top: 0.7rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
  }

  .nav-link {
    /* Alvos de toque generosos: numa lista apertada erra-se de linha com facilidade, e aqui
       errar de linha é abrir a página errada a meio de outra coisa. */
    min-height: 44px;
    align-items: center;
  }

  .conteudo-principal { padding: 1.1rem 0.9rem 3rem; }

  /* As tabelas largas continuam a deslizar dentro do seu próprio contentor, e não fazem a
     página inteira andar de lado — que é o que faz um telemóvel parecer partido. */
  .tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  h1 { font-size: 1.35rem; }

  /* Formulários lado a lado passam a uma coluna: dois campos com 150px cada não se preenchem
     com o polegar. */
  .grelha-campos { grid-template-columns: 1fr; }

  /* 16px é o mínimo que impede o iPhone de dar zoom automático ao tocar num campo — e esse
     zoom deixa a página desalinhada e o utilizador sem perceber o que aconteceu. */
  input, select, textarea { font-size: 16px; }
}

/* Sem JavaScript, o menu fica aberto: mais vale ocupar espaço do que não haver navegação. */
.sem-js .barra-lateral .nav-principal { display: flex; }

/* ---------------------------------------------------------------------- */
/* Tipografia                                                              */
/* ---------------------------------------------------------------------- */

h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  letter-spacing: -0.2px;
}

h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 2rem 0 0.75rem;
  color: var(--cor-texto);
}

main > p { color: var(--cor-texto-suave); line-height: 1.55; }

code {
  background: var(--cor-acento-fraco);
  color: var(--cor-acento);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9em;
}

/* ---------------------------------------------------------------------- */
/* Mensagens / alertas                                                     */
/* ---------------------------------------------------------------------- */

.mensagens { margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }

.mensagem {
  padding: 0.75rem 1rem;
  border-radius: var(--raio-pequeno);
  border: 1px solid var(--cor-borda);
  font-size: 0.92rem;
}

.mensagem-aviso { background: var(--cor-aviso-fundo); border-color: var(--cor-aviso-borda); color: var(--cor-aviso); }
.mensagem-erro { background: var(--cor-erro-fundo); border-color: var(--cor-erro-borda); color: var(--cor-erro); }
.mensagem-sucesso { background: var(--cor-sucesso-fundo); border-color: var(--cor-sucesso-borda); color: var(--cor-sucesso); }

/* ---------------------------------------------------------------------- */
/* Cartões (estatísticas do dashboard, secções)                           */
/* ---------------------------------------------------------------------- */

.totais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.9rem;
  margin: 0 0 1.75rem;
}

.totais .item {
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  padding: 1rem 1.1rem;
}

.totais .item strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--cor-texto-suave);
  margin-bottom: 0.35rem;
}

.cartao {
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
}

/* ---------------------------------------------------------------------- */
/* Tabelas                                                                 */
/* ---------------------------------------------------------------------- */

.tabela-scroll {
  overflow-x: auto;
  margin: 0 0 1.5rem;
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
}

table {
  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
  margin: 0;
}

.tabela-scroll table { margin: 0; box-shadow: none; }

th, td {
  text-align: left;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--cor-borda);
  font-size: 0.92rem;
}

th {
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--cor-texto-suave);
  background: var(--cor-acento-fraco);
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--cor-acento-fraco); }

/* ---------------------------------------------------------------------- */
/* Listas de ficheiros (rota /faturas)                                     */
/* ---------------------------------------------------------------------- */

.lista-ficheiros {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lista-ficheiros li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  padding: 0.75rem 1rem;
}

.lista-ficheiros-nome { font-weight: 500; }
.lista-ficheiros-motivo { font-size: 0.85rem; color: var(--cor-erro); margin-top: 0.2rem; }

/* ---------------------------------------------------------------------- */
/* Pendentes de verificação (rota /pendentes)                             */
/* ---------------------------------------------------------------------- */

.pendente-item { margin-bottom: 1rem; }

.pendente-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.pendente-acoes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--cor-borda);
}

.pendente-form-confirmar,
.pendente-form-substituir {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pendente-form-substituir input[type="file"] { font-size: 0.85rem; max-width: 220px; }

.botao-pequeno { padding: 0.35rem 0.8rem; font-size: 0.85rem; box-shadow: none; flex-shrink: 0; }

.lista-simples {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.lista-simples li {
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--cor-acento);
  border-radius: var(--raio-pequeno);
  padding: 0.55rem 0.9rem;
  font-size: 0.92rem;
}

/* ---------------------------------------------------------------------- */
/* Badges de estado                                                        */
/* ---------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge-recebida { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); border-color: var(--cor-sucesso-borda); }
.badge-pedido_enviado { background: var(--cor-info-fundo); color: var(--cor-info); border-color: var(--cor-info-borda); }
.badge-insistencia_enviada { background: var(--cor-aviso-fundo); color: var(--cor-aviso); border-color: var(--cor-aviso-borda); }
.badge-pendente_verificacao { background: var(--cor-erro-fundo); color: var(--cor-erro); border-color: var(--cor-erro-borda); }
.badge-aguarda_envio { background: var(--cor-fundo); color: var(--cor-texto-suave); border-color: var(--cor-borda); }

/* ---------------------------------------------------------------------- */
/* Botões                                                                  */
/* ---------------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.15rem;
  border-radius: var(--raio-pequeno);
  border: 1px solid var(--cor-acento);
  background: var(--cor-acento);
  color: #fff;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
  box-shadow: var(--sombra-cartao);
}

.botao:hover { background: var(--cor-acento-hover); border-color: var(--cor-acento-hover); }
.botao:active { transform: translateY(1px); }

.botao-secundario {
  background: var(--cor-fundo-cartao);
  color: var(--cor-texto);
  border-color: var(--cor-borda);
}

.botao-secundario:hover { background: var(--cor-acento-fraco); border-color: var(--cor-acento); color: var(--cor-acento); }

form { margin: 0; }

/* ---------------------------------------------------------------------- */
/* Formulários                                                            */
/* ---------------------------------------------------------------------- */

.campo { margin-bottom: 1.1rem; }

/* Grelha responsiva: os campos organizam-se em várias colunas conforme o espaço
   disponível, em vez de ficarem sempre numa única coluna estreita com espaço vazio ao lado. */
.grelha-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.3rem 1.5rem;
}

.grelha-campos .campo { margin-bottom: 1.1rem; }

.campo label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 0.35rem;
  color: var(--cor-texto);
}

.campo label em { font-weight: 400; font-style: normal; color: var(--cor-texto-suave); }

.campo input[type="text"],
.campo input[type="password"],
.campo input[type="file"] {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-fundo-cartao);
  color: var(--cor-texto);
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo input:focus {
  outline: none;
  border-color: var(--cor-acento);
  box-shadow: 0 0 0 3px var(--cor-acento-fraco);
}

.campo label:has(input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 500;
  cursor: pointer;
}

.campo input[type="checkbox"] { margin-top: 0.2rem; width: 16px; height: 16px; accent-color: var(--cor-acento); }

/* ---------------------------------------------------------------------- */
/* Utilitários                                                            */
/* ---------------------------------------------------------------------- */

.contacto-nao-confirmado { color: var(--cor-erro); font-weight: 600; }

.acoes-formulario { display: flex; gap: 0.6rem; margin-top: 1rem; }

hr { border: none; border-top: 1px solid var(--cor-borda); margin: 1.75rem 0; }

/* Linhas expansíveis do dashboard (detalhe por empresa) */
.linha-empresa { cursor: pointer; }
.linha-empresa .seta-detalhe {
  display: inline-block;
  color: var(--cor-texto-suave);
  transition: transform 0.15s ease;
  margin-right: 0.15rem;
}
.linha-empresa.expandida .seta-detalhe { transform: rotate(90deg); color: var(--cor-acento); }

.linha-detalhe { display: none; }
.linha-detalhe.aberta { display: table-row; }
.linha-detalhe > td { background: var(--cor-fundo); padding: 0.9rem 1.25rem 1.1rem; }

.detalhe-empresa .detalhe-resumo {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  font-size: 0.92rem;
}

.tabela-detalhe {
  margin: 0;
  box-shadow: none;
  min-width: 0;
}

.tabela-detalhe th { font-size: 0.72rem; }
.tabela-detalhe td { font-size: 0.85rem; padding: 0.45rem 0.75rem; }
.tabela-detalhe tbody tr:hover { background: transparent; }

.chat-caixa { display: flex; flex-direction: column; gap: 1rem; }

.chat-mensagens {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.chat-msg { max-width: 80%; padding: 0.6rem 0.9rem; border-radius: var(--raio); }

.chat-msg-user {
  align-self: flex-end;
  background: var(--cor-acento);
  color: #fff;
}

.chat-msg-assistant {
  align-self: flex-start;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
}

.chat-autor { font-size: 0.72rem; font-weight: 700; opacity: 0.75; margin-bottom: 0.15rem; }
.chat-texto { white-space: pre-wrap; word-break: break-word; font-size: 0.92rem; }
.chat-relatorio-acoes { margin-top: 0.6rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Correção do contacto directamente na caixa "Respostas", quando um email é devolvido. */
.corrigir-contacto {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--cor-borda);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.chat-form { display: flex; gap: 0.6rem; }
.chat-form input[type="text"] {
  flex: 1;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-fundo-cartao);
  color: var(--cor-texto);
  font-size: 0.95rem;
}

.contador-nav {
  margin-left: auto;
  background: var(--cor-erro);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 1.25rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  text-align: center;
}

.cartao-empresa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-left: 3px solid var(--cor-acento);
}

.empresa-nome { font-size: 1.05rem; font-weight: 700; }

.empresa-detalhes {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
  font-size: 0.88rem;
  color: var(--cor-texto-suave);
}

.empresa-detalhes strong { color: var(--cor-texto); font-weight: 600; margin-right: 0.2rem; }

.seletor-periodo {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.seletor-periodo .campo { margin-bottom: 0; }

.nota-periodo { color: var(--cor-texto-suave); font-size: 0.9rem; }

.aviso-prazo-iva {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  border-left: 3px solid var(--cor-info);
  background: var(--cor-info-fundo);
}
.aviso-prazo-iva-icone { font-size: 1.4rem; line-height: 1; }

.nota-meses { color: var(--cor-texto-suave); font-size: 0.78rem; margin-top: 0.15rem; }

.seletor-mes {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-fundo-cartao);
  color: var(--cor-texto);
  font-size: 0.95rem;
}

.celula-numero-fatura { font-family: "Consolas", "SF Mono", monospace; font-size: 0.8rem; }

.linha-excluida { opacity: 0.55; }

.form-fornecedor { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

.input-email-fornecedor {
  width: 210px;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-fundo-cartao);
  color: var(--cor-texto);
  font-size: 0.85rem;
}

.rotulo-envio {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

.rotulo-envio input[type="checkbox"] { accent-color: var(--cor-acento); }

details summary {
  cursor: pointer;
  color: var(--cor-acento);
  font-size: 0.85rem;
  font-weight: 600;
}

.detalhe-observacoes {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.75rem;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  font-family: "Consolas", "SF Mono", monospace;
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 480px;
  max-height: 220px;
  overflow-y: auto;
}

/* ---------------------------------------------------------------------- */
/* Modal de pré-visualização de PDF                                       */
/* ---------------------------------------------------------------------- */

.modal-pdf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 18, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 3vh 3vw;
}

.modal-pdf-overlay[hidden] { display: none; }

.modal-pdf-caixa {
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-elevada);
  width: 100%;
  max-width: 900px;
  height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-pdf-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--cor-borda);
  flex-shrink: 0;
}

.modal-pdf-titulo {
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-pdf-paginas {
  flex: 1;
  overflow-y: auto;
  background: #525659;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: #e7e9ee;
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Gráficos (SVG) — página Negócio                                        */
/* ---------------------------------------------------------------------- */

:root {
  --grafico-vendas: #2a78d6;
  --grafico-compras: #eb6834;
  --grafico-salarios: #1baf7a;
  --grafico-valor-a-parte: #e87ba4;
  --grafico-margem: #eda100;
  --grafico-resultado: #008300;
  --grafico-iva: #e34948;
  --grafico-grelha: #e1e0d9;
  --grafico-eixo: #c3c2b7;
  --grafico-texto-eixo: #898781;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grafico-vendas: #3987e5;
    --grafico-compras: #d95926;
    --grafico-salarios: #199e70;
    --grafico-valor-a-parte: #d55181;
    --grafico-margem: #c98500;
    --grafico-resultado: #008300;
    --grafico-iva: #e66767;
    --grafico-grelha: #2c2c2a;
    --grafico-eixo: #383835;
  }
}

:root[data-theme="dark"] {
  --grafico-vendas: #3987e5;
  --grafico-compras: #d95926;
  --grafico-salarios: #199e70;
  --grafico-valor-a-parte: #d55181;
  --grafico-margem: #c98500;
  --grafico-resultado: #008300;
  --grafico-iva: #e66767;
  --grafico-grelha: #2c2c2a;
  --grafico-eixo: #383835;
}

.grafico-svg {
  width: 100%;
  height: auto;
  font-family: inherit;
  overflow: visible;
}

.grafico-grelha { stroke: var(--grafico-grelha); stroke-width: 1; }
.grafico-eixo { stroke: var(--grafico-eixo); stroke-width: 1; }
.grafico-texto-eixo { fill: var(--cor-texto-suave); font-size: 11px; }

.grafico-barra { cursor: pointer; transition: opacity 0.1s ease; }
.grafico-barra:hover, .grafico-barra:focus { opacity: 0.78; outline: none; }

.grafico-cor-vendas { fill: var(--grafico-vendas); }
.grafico-cor-compras { fill: var(--grafico-compras); }
.grafico-cor-salarios { fill: var(--grafico-salarios); }
.grafico-cor-valor_a_parte { fill: var(--grafico-valor-a-parte); }
.grafico-cor-margem { fill: var(--grafico-margem); }
.grafico-cor-resultado { fill: var(--grafico-resultado); }
.grafico-cor-iva { fill: var(--grafico-iva); }

.grelha-graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.grelha-graficos .cartao { margin-bottom: 0; }

.delta-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  margin-left: 0.4rem;
}

.delta-badge.subida { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); }
.delta-badge.descida { color: var(--cor-erro); background: var(--cor-erro-fundo); }

.grafico-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0.5rem 0 0.75rem;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

.grafico-legenda-item { display: flex; align-items: center; gap: 0.4rem; }

.grafico-legenda-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

#grafico-tooltip {
  position: fixed;
  z-index: 50;
  background: var(--cor-texto);
  color: var(--cor-fundo-cartao);
  padding: 0.4rem 0.6rem;
  border-radius: var(--raio-pequeno);
  font-size: 0.8rem;
  pointer-events: none;
  box-shadow: var(--sombra-elevada);
  max-width: 220px;
}

#grafico-tooltip strong { display: block; font-size: 0.85rem; }

.grafico-tabela-detalhe summary {
  cursor: pointer;
  color: var(--cor-acento);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.modal-pdf-paginas img {
  max-width: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------------- */
/* Progresso de tarefas longas (Verificar)                                */
/* ---------------------------------------------------------------------- */

.linha-progresso {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
  font-size: 0.95rem;
}
.linha-progresso .contagem {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

.fiandeira {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--cor-borda);
  border-top-color: var(--cor-acento);
}
@media (prefers-reduced-motion: no-preference) {
  .fiandeira { animation: gira 0.8s linear infinite; }
  @keyframes gira { to { transform: rotate(360deg); } }
}

.barra {
  height: 7px;
  border-radius: 999px;
  background: var(--cor-fundo-suave);
  overflow: hidden;
}
.barra-cheia {
  height: 100%;
  width: 2%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cor-acento-vivo), var(--cor-acento));
  transition: width 0.45s cubic-bezier(0.2, 0.6, 0.3, 1);
}
/* enquanto não se sabe o total, a barra desliza em vez de fingir uma percentagem */
.barra-cheia.indeterminada {
  background: linear-gradient(90deg, transparent, var(--cor-acento-vivo), transparent);
  transition: none;
}
@media (prefers-reduced-motion: no-preference) {
  .barra-cheia.indeterminada { animation: desliza 1.3s ease-in-out infinite; }
  @keyframes desliza { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
}

.registo {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.83rem;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
}
.registo li { padding-left: 0.9rem; position: relative; }
.registo li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cor-borda);
}
.registo li:last-child { color: var(--cor-texto); }
.registo li:last-child::before { background: var(--cor-acento); }

.nota-progresso { font-size: 0.85rem; color: var(--cor-texto-suave); margin-top: 0.75rem; }

/* ---------------------------------------------------------------------- */
/* Dashboard — cabeçalho, painel de cobrança e tabela de empresas          */
/* Só cores por ficha (var(--...)), para os dois temas seguirem sozinhos.  */
/* ---------------------------------------------------------------------- */

/* -- painel de cobrança: a única pergunta que a página existe para responder -- */

.painel-cobranca {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 2rem;
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--dado-compras);
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  padding: 1.35rem 1.6rem;
  margin-bottom: 1.25rem;
}

.painel-cobranca-limpo { border-left-color: var(--dado-salarios); }

.cobranca-numero { display: flex; align-items: baseline; gap: 0.55rem; }

.cobranca-valor {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--dado-compras);
  font-variant-numeric: tabular-nums;
}

.painel-cobranca-limpo .cobranca-valor { color: var(--dado-salarios); }

.cobranca-rotulo {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  max-width: 7rem;
  line-height: 1.25;
}

.barra-cobranca {
  height: 8px;
  border-radius: 999px;
  background: var(--cor-fundo-suave);
  overflow: hidden;
}

.barra-cobranca span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--dado-salarios);
  transition: width 0.4s ease;
}

.cobranca-legenda {
  margin: 0.45rem 0 0;
  font-size: 0.83rem;
  color: var(--cor-texto-fraco);
}

.cobranca-accoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* -- faixa do prazo de IVA: uma linha, não um cartão -- */

.faixa-iva {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 1.75rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.87rem;
  color: var(--cor-texto-suave);
  background: var(--cor-info-fundo);
  border: 1px solid var(--cor-info-borda);
  border-radius: var(--raio-pequeno);
}

.faixa-iva .nota-meses { margin: 0; }

/* -- totais -- */

.totais .item .valor-a-parte {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.76rem;
  color: var(--cor-texto-fraco);
}

/* -- tabela de empresas -- */

.faltam { color: var(--dado-compras); }
.de-total { color: var(--cor-texto-fraco); }

.bloco-recolhivel {
  margin-top: 1.75rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-fundo-cartao);
  padding: 0.35rem 0.9rem;
}

.bloco-recolhivel[open] { padding-bottom: 0.9rem; }

.bloco-recolhivel > summary {
  cursor: pointer;
  padding: 0.65rem 0.2rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
}

.bloco-recolhivel > summary:hover { color: var(--cor-texto); }

@media (max-width: 720px) {
  .painel-cobranca { grid-template-columns: 1fr; }
  .cobranca-rotulo { max-width: none; }
  .topo-dashboard { align-items: flex-start; }
}

/* ---------------------------------------------------------------------- */
/* Separadores das secções que juntam várias páginas                      */
/* (ver webapp/navegacao.py — Documentos, Pedidos, A resolver)             */
/* ---------------------------------------------------------------------- */

.separadores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--cor-borda);
}

.separador {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--cor-texto-suave);
  font-size: 0.93rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--raio-pequeno) var(--raio-pequeno) 0 0;
  transition: color 0.15s ease, background 0.15s ease;
}

.separador:hover { color: var(--cor-texto); background: var(--cor-fundo-suave); }

.separador.ativo {
  color: var(--cor-acento);
  border-bottom-color: var(--cor-acento);
  font-weight: 600;
}

.contador-separador {
  min-width: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--cor-erro);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35rem;
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Envio das faturas para a contabilidade (página Faturas)                */
/* ---------------------------------------------------------------------- */

.caixa-contabilidade { border-left: 4px solid var(--dado-salarios); }

.contabilidade-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.75rem;
  margin-bottom: 1rem;
}

.campo-email-contabilidade { flex: 1 1 18rem; margin: 0; }
.campo-email-contabilidade input { width: 100%; }

.contabilidade-resumo {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  color: var(--cor-texto-suave);
}

.contabilidade-accoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Cada botão diz o que faz e o que isso significa em concreto — "1 email, tudo num ZIP" tira
   a dúvida sem obrigar a experimentar para descobrir. */
.contabilidade-accoes .botao {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  line-height: 1.25;
}

.botao-nota {
  font-size: 0.73rem;
  font-weight: 400;
  opacity: 0.75;
}

.contabilidade-opcao {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.9rem;
  font-size: 0.86rem;
  color: var(--cor-texto-suave);
}

.acoes-confirmacao {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.acoes-confirmacao .botao[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------- */
/* Prazos do IVA na Configuração — as duas tabelas lado a lado, para se    */
/* poder comparar antes de escolher o regime                              */
/* ---------------------------------------------------------------------- */

.grelha-prazos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1rem;
  margin: 1rem 0 0.75rem;
}

.bloco-prazos {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  padding: 0.9rem 1rem 0.4rem;
  background: var(--cor-fundo);
}

.bloco-prazos-ativo {
  border-color: var(--cor-acento);
  background: var(--cor-acento-fraco);
}

.bloco-prazos h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
}

.bloco-prazos .tabela-detalhe { margin: 0; }

/* ---------------------------------------------------------------------- */
/* Interruptor de tema (barra lateral, ao lado da marca)                  */
/* Três estados: sistema (omissão), claro, escuro.                        */
/* ---------------------------------------------------------------------- */

.botao-tema {
  margin-left: auto;
  width: 1.9rem;
  height: 1.9rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--barra-lateral-linha);
  border-radius: var(--raio-pequeno);
  background: transparent;
  color: var(--barra-lateral-texto);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.botao-tema:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--barra-lateral-texto-ativo);
}

/* ---------------------------------------------------------------------- */
/* Campos de formulário — TODOS, não só os que estão dentro de .campo     */
/* ---------------------------------------------------------------------- */
/*
   Só os campos dentro de `.campo` tinham cores definidas. Os outros — a caixa do NIF em
   "Por classificar", o email do fornecedor no detalhe da dashboard, o email da contabilidade —
   ficavam com o aspeto que o sistema operativo dá por omissão. Com o Windows em modo escuro
   isso dava caixas pretas no meio de uma página branca. Agora todos os campos usam as fichas
   de cor da aplicação, e por isso acompanham o tema escolhido em vez do tema do sistema.
*/

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="file"],
select,
textarea {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-fundo-cartao);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 0.92rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input::placeholder,
textarea::placeholder { color: var(--cor-texto-fraco); }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--cor-acento);
  box-shadow: 0 0 0 3px var(--cor-acento-fraco);
}

input[type="checkbox"],
input[type="radio"] { accent-color: var(--cor-acento); }

/*
   `color-scheme` diz ao browser como desenhar o que é dele e não nosso: a lista que abre num
   <select>, as barras de deslocamento, os seletores de data. Sem isto, escolher "claro" na
   aplicação deixava essas partes escuras na mesma, porque continuavam a seguir o Windows.
*/
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Conta e Configuração, encostadas ao fundo da barra lateral — ver webapp/navegacao.py */
.barra-lateral {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.nav-principal { flex: 1; }

.nav-rodape {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--barra-lateral-linha);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Os três pontinhos enquanto a IA pensa. Sem isto, entre carregar em Perguntar e a resposta
   chegar a página ficava exatamente como estava, e parecia que o botão não tinha feito nada. */
.chat-a-pensar {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  padding: 0.15rem 0;
}

.chat-a-pensar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cor-texto-fraco);
  animation: chat-pulsar 1.2s infinite ease-in-out;
}

.chat-a-pensar i:nth-child(2) { animation-delay: 0.15s; }
.chat-a-pensar i:nth-child(3) { animation-delay: 0.3s; }

@keyframes chat-pulsar {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

/* Quem tenha pedido menos animação ao sistema vê os pontos parados, mas continua a vê-los —
   o sinal de "está a trabalhar" não pode desaparecer. */
@media (prefers-reduced-motion: reduce) {
  .chat-a-pensar i { animation: none; opacity: 0.55; }
}

.chat-form input:disabled { opacity: 0.6; }

/* O conteúdo já formatado das respostas do Perguntar. O modelo responde em Markdown; sem isto
   os asteriscos e os hífenes apareciam como texto, e uma resposta a uma pergunta de negócio
   parecia um terminal. */
.chat-texto > *:first-child { margin-top: 0; }
.chat-texto > *:last-child { margin-bottom: 0; }
.chat-texto p { margin: 0 0 0.7rem; line-height: 1.55; }
.chat-texto h3, .chat-texto h4, .chat-texto h5 {
  margin: 1.1rem 0 0.5rem;
  font-size: 1rem;
  color: var(--cor-texto);
}
.chat-texto ul, .chat-texto ol { margin: 0 0 0.7rem; padding-left: 1.3rem; }
.chat-texto li { margin-bottom: 0.3rem; line-height: 1.5; }
.chat-texto strong { color: var(--cor-texto); font-weight: 650; }
.chat-texto code {
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: var(--cor-fundo-suave);
  font-size: 0.88em;
}
.chat-texto .tabela-scroll { margin: 0.5rem 0 0.8rem; }
.chat-texto table { min-width: 0; font-size: 0.9rem; }

/* ---------------------------------------------------------------------- */
/* Entrada: as páginas que se veem antes de haver sessão                   */
/* ---------------------------------------------------------------------- */

/* Sem barra lateral e sem contadores: aqui ainda não sabemos quem está do outro lado, e o
   nome da empresa ou o número de coisas por resolver seriam informação dada a quem ainda não
   provou ser ninguém. Uma caixa centrada, e mais nada. */

.pagina-publica {
  background: var(--cor-fundo);
  min-height: 100vh;
  margin: 0;
}

.entrada-shell {
  min-height: 100vh;
  display: flex;
  /*
    Coluna, e não linha. Era linha enquanto aqui só havia a caixa do formulário; ao acrescentar
    o rodapé com as ligações legais, ele tornou-se um SEGUNDO item da mesma linha e roubou
    metade da largura à caixa — que passou a ter 244px num ecrã de 375, com o texto espremido
    numa coluna de meia dúzia de palavras.
  */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

.entrada-caixa {
  width: 100%;
  max-width: 26rem;
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-elevada);
  padding: 2.25rem 2rem;
}

.entrada-marca {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--cor-acento);
  margin-bottom: 1.75rem;
}

.entrada-titulo {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 0.4rem;
}

.entrada-nota {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 1.75rem;
}

.entrada-botao {
  width: 100%;
  justify-content: center;
  margin-top: 0.35rem;
}

.entrada-empresa {
  margin-bottom: 1.75rem;
  padding: 1rem 1.15rem;
  box-shadow: none;
  background: var(--cor-fundo-suave);
}

.entrada-empresa-nome { font-weight: 600; line-height: 1.35; }

/* O endereço de faturas e o domínio como uma peça só: é assim que ele vai aparecer ao
   fornecedor, e vê-lo inteiro enquanto se escolhe evita a surpresa depois. */
.entrada-endereco { display: flex; align-items: stretch; }

.entrada-endereco input[type="text"] {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  text-align: right;
}

.entrada-dominio {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  border: 1px solid var(--cor-borda);
  border-left: none;
  border-top-right-radius: var(--raio-pequeno, 6px);
  border-bottom-right-radius: var(--raio-pequeno, 6px);
  background: var(--cor-fundo-suave);
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Quem está a usar isto, no fim da barra lateral. */
.nav-sessao {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--cor-borda-suave);
}

.nav-sessao-quem {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cor-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-sessao-empresa {
  font-size: 0.74rem;
  color: var(--cor-texto-fraco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}

.nav-sessao-sair {
  margin-top: 0.5rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--cor-texto-suave);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nav-sessao-sair:hover { color: var(--cor-acento); }

/* Trocar de empresa. Só aparece a quem tem mais do que uma — com uma só, um seletor de um
   item é ruído. */
.nav-empresas { margin-top: 0.55rem; display: flex; flex-direction: column; gap: 0.25rem; }

.nav-empresas label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cor-texto-fraco);
}

.nav-empresas select {
  width: 100%;
  padding: 0.3rem 0.4rem;
  font: inherit;
  font-size: 0.78rem;
  color: var(--cor-texto);
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
}

.nav-empresas select:focus-visible { outline: 2px solid var(--cor-acento); outline-offset: 1px; }

/* "Estou a trabalhar" — para operações que demoram e não têm barra de progresso.
   Uma leitura de sete fotos leva quarenta segundos; sem isto, a página parece avariada. */
.a-trabalhar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  color: var(--cor-texto-suave);
}

.a-trabalhar-roda {
  width: 15px;
  height: 15px;
  flex: none;
  border: 2px solid var(--cor-borda);
  border-top-color: var(--cor-acento);
  border-radius: 50%;
  animation: a-rodar 0.8s linear infinite;
}

@keyframes a-rodar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .a-trabalhar-roda { animation: none; border-top-color: var(--cor-borda); }
}


/* ---------------------------------------------------------------------- */
/* Páginas legais (privacidade, termos)                                    */
/* ---------------------------------------------------------------------- */
/*
  Texto longo, para ser lido do princípio ao fim por alguém que não tem obrigação nenhuma de
  gostar de o ler. Duas coisas fazem quase toda a diferença: a linha não passar dos ~70
  caracteres, e haver ar entre os blocos.
*/
.legal {
  max-width: 46rem;
  margin: 0 auto;
  text-align: left;
  line-height: 1.65;
}
.legal h2 {
  margin: 2.2rem 0 0.6rem;
  font-size: 1.05rem;
  border-top: 1px solid var(--cor-borda);
  padding-top: 1.4rem;
}
.legal h3 { margin: 1.4rem 0 0.4rem; font-size: 0.98rem; }
.legal p, .legal li { color: var(--cor-texto-suave); }
.legal strong { color: var(--cor-texto); }
.legal ul { padding-left: 1.15rem; }
.legal li { margin-bottom: 0.45rem; }

/* As tabelas deslizam dentro do seu contentor: sem isto, uma tabela de três colunas faz a
   página inteira andar de lado no telemóvel — e uma página que anda de lado parece partida. */
/*
  As tabelas de dados da aplicação têm `min-width: 560px` e deslizam dentro de um contentor:
  faz sentido para números em colunas, que não se leem espremidos. Aqui é o contrário — são
  frases curtas, e o que se quer é que ENCOLHAM. Sem este `min-width: 0`, a página de
  privacidade transbordava para 548px num ecrã de 375 e o texto ficava cortado à esquerda.
*/
.legal-tabela {
  display: table;
  min-width: 0;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin: 0.8rem 0 0.4rem;
  font-size: 0.92rem;
}
.legal-tabela th, .legal-tabela td {
  text-align: left;
  padding: 0.55rem 0.7rem 0.55rem 0;
  border-bottom: 1px solid var(--cor-borda);
  vertical-align: top;
  /* Palavras compridas (endereços, nomes de servidores) partem-se em vez de esticarem a
     coluna para lá do ecrã. */
  overflow-wrap: anywhere;
}
.legal-tabela th { color: var(--cor-texto-suave); font-weight: 600; }

.legal-nota {
  margin-top: 1.6rem;
  padding: 0.9rem 1rem;
  background: var(--cor-acento-fraco);
  border-radius: var(--raio-pequeno);
  font-size: 0.93rem;
}

/* Rodapé das páginas públicas: discreto, mas sempre lá. */
.rodape-legal {
  margin: 1.6rem auto 2.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--cor-texto-fraco);
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
.rodape-legal a { color: var(--cor-texto-fraco); }
.rodape-legal a:hover { color: var(--cor-acento); }

/* As ligações legais dentro da barra lateral: discretas, sempre alcançáveis. */
.nav-legal {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--barra-lateral-linha);
  font-size: 0.78rem;
}
.nav-legal a { color: var(--barra-lateral-texto); text-decoration: none; opacity: .75; }
.nav-legal a:hover { opacity: 1; text-decoration: underline; }

/*
  A caixa das páginas públicas é estreita porque foi feita para um formulário de entrada com
  dois campos. Um documento legal precisa do contrário: largura de leitura, e no telemóvel
  encostar às margens em vez de ficar uma coluna de 150 caracteres.
*/
.entrada-caixa--larga {
  max-width: 48rem;
  width: 100%;
  text-align: left;
}
@media (max-width: 780px) {
  .entrada-caixa--larga {
    padding: 1.2rem 1rem 2rem;
    border-radius: 0;
    box-shadow: none;
    border-left: 0;
    border-right: 0;
  }
  .entrada-shell { padding-left: 0; padding-right: 0; }
}

/* Responder ao fornecedor, dentro da linha da resposta dele. */
.responder { margin-top: 0.5rem; }
.responder > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--cor-acento);
  list-style: none;
}
.responder > summary::-webkit-details-marker { display: none; }
.responder > summary:hover { text-decoration: underline; }
.responder textarea {
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-fundo-cartao);
  color: var(--cor-texto);
  font: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

/* «3 faturas paradas à espera de uma resposta tua» — o aviso que faz alguém abrir a aplicação. */
.aviso-a-espera {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--raio);
  background: var(--cor-aviso-fundo);
  border: 1px solid var(--cor-aviso-borda);
  color: var(--cor-aviso);
  text-decoration: none;
  font-size: 0.95rem;
}
.aviso-a-espera strong { font-size: 1.15rem; }
.aviso-a-espera-seta { margin-left: auto; }
.aviso-a-espera:hover { filter: brightness(0.97); }

/*
  Ajustes de telemóvel que TÊM de vir no fim do ficheiro.

  A regra base `.seletor-periodo { display: flex }` está definida mais acima, e uma media
  query não acrescenta especificidade: com a mesma especificidade ganha a última do ficheiro.
  Posta lá em cima, o `grid-template-columns` aplicava-se e o `display: grid` não — a grelha
  ficava definida e o elemento continuava em linha. Levou algum tempo a perceber.
*/
@media (max-width: 780px) {
  /*
    «De — mês [ ] ano [ ] Até — mês [ ] ano [ ] Ver». Em linha com quebra automática, o "ano"
    do início ficava numa linha e o "ano" do fim noutra, e deixava de se perceber qual era
    qual. Em duas colunas, cada par «mês + ano» fica junto — que é como se lê.
  */
  .seletor-periodo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem 0.8rem;
    align-items: end;
  }
  .seletor-periodo .campo { min-width: 0; }
  .seletor-periodo .seletor-mes { width: 100%; }
  .seletor-periodo button { grid-column: 1 / -1; min-height: 44px; }
}

@media (max-width: 780px) {
  /*
    A tabela de respostas dos fornecedores tem cinco colunas, e uma delas é a caixa para
    RESPONDER — a acção mais importante da página. Numa tabela que desliza na horizontal, essa
    coluna fica fora do ecrã e ninguém a encontra: vê-se «O que dizem» e «De», e o resto está
    escondido a 400 px à direita.

    No telemóvel, cada linha passa a ser um cartão empilhado, com o nome da coluna à frente do
    valor. Ocupa mais altura e não esconde nada — que é a troca certa num ecrã de 375 px.
  */
  .tabela-respostas,
  .tabela-respostas tbody,
  .tabela-respostas tr,
  .tabela-respostas td,
  /* E as que se marcam à mão, quando a coluna que interessa é a última. */
  .tabela-cartoes,
  .tabela-cartoes tbody,
  .tabela-cartoes tr,
  .tabela-cartoes td,
  /*
    E qualquer outra tabela que tenha um FORMULÁRIO lá dentro. É a distinção que interessa:
    uma tabela de números lê-se, e deslizar de lado para ver a última coluna é aceitável; uma
    tabela em que se carrega tem de mostrar o botão, senão a página fica inutilizável no
    telemóvel sem ninguém perceber porquê.
  */
  table:has(form),
  table:has(form) tbody,
  table:has(form) tr,
  table:has(form) td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .tabela-respostas thead,
  .tabela-cartoes thead,
  table:has(form) thead { display: none; }
  .tabela-respostas tr,
  .tabela-cartoes tr,
  table:has(form) tr {
    background: var(--cor-fundo-cartao);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    margin-bottom: 0.8rem;
    padding: 0.3rem 0;
  }
  .tabela-respostas td,
  .tabela-cartoes td,
  table:has(form) td {
    border: 0;
    border-bottom: 1px solid var(--cor-borda-suave);
    padding: 0.6rem 0.9rem;
  }
  .tabela-respostas tr td:last-child,
  .tabela-cartoes tr td:last-child,
  table:has(form) tr td:last-child { border-bottom: 0; }
  .tabela-respostas td[data-rotulo]::before,
  .tabela-cartoes td[data-rotulo]::before,
  table:has(form) td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-texto-fraco);
    margin-bottom: 0.2rem;
  }
  /* Uma célula vazia não merece um rótulo a apontar para nada. */
  .tabela-respostas td:empty,
  table:has(form) td:empty { display: none; }
}