/* ---------- Temas ----------
   Cada tema define as mesmas variáveis, todas com cores sólidas.
   --fundo                    fundo da página
   --superficie               cartões, menus flutuantes e campos
   --superficie-2 / -hover    zonas dentro dos cartões (itens, trilhos das barras)
   --lateral*                 menu lateral, sempre escuro (texto claro)
   --primario                 botões principais e ligações; --no-primario é o texto sobre ele
   --sucesso/--info/--perigo/--alerta   cores dos KPIs e dos estados
   --*-texto                  as mesmas cores quando usadas em texto (contraste ≥ 4,5:1): mais escuras
                              nos temas claros, iguais à cor do estado nos escuros */

/* Claro (por omissão) */
:root {
  --fundo: #f3f5fa;
  --superficie: #ffffff;
  --superficie-2: #f1f4f9;
  --texto: #14213d;
  --texto-suave: #5f6b85;
  --borda: #e3e8f0;
  --primario: #2563eb;
  --primario-hover: #1d4ed8;
  --no-primario: #fff;
  --sucesso: #16a34a;
  --info: #3b6cf6;
  --perigo: #e5484d;
  --alerta: #f59e0b;
  --sucesso-texto: #15803d;
  --perigo-texto: #c53030;
  --alerta-texto: #a14a08;
  --lateral: #10233f;
  --lateral-texto: #e6ecf7;
  --lateral-suave: #9fb0cc;
  --lateral-hover: #1a3254;
  --lateral-ativo: #24406a;
  --lateral-borda: #1f3658;
  --sombra: 0 1px 2px rgba(16, 35, 63, 0.05), 0 4px 16px -6px rgba(16, 35, 63, 0.1);
  --raio: 16px;
  /* Borda dos campos de formulário: mais forte que --borda, com contraste ≥ 3:1 em todos os temas. */
  --borda-campo: color-mix(in srgb, var(--texto-suave) 80%, var(--superficie));
  color-scheme: light;
}

/* Escuro: escolhido no menu de temas, ou o do sistema em modo automático. */
:root[data-tema="escuro"] {
  --fundo: #0d121c;
  --superficie: #161d2b;
  --superficie-2: #1d2636;
  --texto: #e8ecf4;
  --texto-suave: #98a3b8;
  --borda: #263146;
  --primario: #6d8dff;
  --primario-hover: #8aa3ff;
  --no-primario: #0d121c;
  --sucesso: #34d399;
  --info: #6d8dff;
  --perigo: #ff6b6b;
  --alerta: #fbbf24;
  --sucesso-texto: var(--sucesso);
  --perigo-texto: var(--perigo);
  --alerta-texto: var(--alerta);
  --lateral: #090d15;
  --lateral-texto: #e8ecf4;
  --lateral-suave: #8b96ab;
  --lateral-hover: #141b28;
  --lateral-ativo: #1d2740;
  --lateral-borda: #182030;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px -8px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --fundo: #0d121c;
    --superficie: #161d2b;
    --superficie-2: #1d2636;
    --texto: #e8ecf4;
    --texto-suave: #98a3b8;
    --borda: #263146;
    --primario: #6d8dff;
    --primario-hover: #8aa3ff;
    --no-primario: #0d121c;
    --sucesso: #34d399;
    --info: #6d8dff;
    --perigo: #ff6b6b;
    --alerta: #fbbf24;
    --sucesso-texto: var(--sucesso);
    --perigo-texto: var(--perigo);
    --alerta-texto: var(--alerta);
    --lateral: #090d15;
    --lateral-texto: #e8ecf4;
    --lateral-suave: #8b96ab;
    --lateral-hover: #141b28;
    --lateral-ativo: #1d2740;
    --lateral-borda: #182030;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px -8px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

/* Oceano: azul petróleo escuro com ciano. */
:root[data-tema="oceano"] {
  --fundo: #071a24;
  --superficie: #0d2633;
  --superficie-2: #12303f;
  --texto: #e2f4f9;
  --texto-suave: #8fb3c0;
  --borda: #1a3a4a;
  --primario: #22d3ee;
  --primario-hover: #67e8f9;
  --no-primario: #04161e;
  --sucesso: #34d399;
  --info: #38bdf8;
  --perigo: #fb7185;
  --alerta: #fcd34d;
  --sucesso-texto: var(--sucesso);
  --perigo-texto: var(--perigo);
  --alerta-texto: var(--alerta);
  --lateral: #04121a;
  --lateral-texto: #e2f4f9;
  --lateral-suave: #7fa3b0;
  --lateral-hover: #0b2230;
  --lateral-ativo: #0f3344;
  --lateral-borda: #0c2330;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px -8px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* Aurora: violeta escuro com lilás. */
:root[data-tema="aurora"] {
  --fundo: #140f21;
  --superficie: #1f1731;
  --superficie-2: #281e3d;
  --texto: #f2eafd;
  --texto-suave: #b2a3c9;
  --borda: #34294b;
  --primario: #c084fc;
  --primario-hover: #d8b4fe;
  --no-primario: #1a0f2b;
  --sucesso: #5eead4;
  --info: #a5b4fc;
  --perigo: #fb7199;
  --alerta: #fde047;
  --sucesso-texto: var(--sucesso);
  --perigo-texto: var(--perigo);
  --alerta-texto: var(--alerta);
  --lateral: #0d0918;
  --lateral-texto: #f2eafd;
  --lateral-suave: #a596bd;
  --lateral-hover: #1a1329;
  --lateral-ativo: #2c1f46;
  --lateral-borda: #1d1530;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px -8px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

/* Esmeralda: claro, com menu verde-escuro. */
:root[data-tema="esmeralda"] {
  --fundo: #f1f7f4;
  --superficie: #ffffff;
  --superficie-2: #eef5f1;
  --texto: #12291f;
  --texto-suave: #587266;
  --borda: #dde9e3;
  --primario: #047857;
  --primario-hover: #065f46;
  --no-primario: #fff;
  --sucesso: #059669;
  --info: #0d9488;
  --perigo: #dc4c4c;
  --alerta: #d99a06;
  --sucesso-texto: #047857;
  --perigo-texto: #c53030;
  --alerta-texto: #8a5a00;
  --lateral: #0d3528;
  --lateral-texto: #e4f5ec;
  --lateral-suave: #95bfab;
  --lateral-hover: #134634;
  --lateral-ativo: #1b5a43;
  --lateral-borda: #164433;
  --sombra: 0 1px 2px rgba(13, 53, 40, 0.05), 0 4px 16px -6px rgba(13, 53, 40, 0.12);
  color-scheme: light;
}

/* Pôr do sol: claro e quente, laranja. */
:root[data-tema="por-do-sol"] {
  --fundo: #fbf5f0;
  --superficie: #ffffff;
  --superficie-2: #f8efe8;
  --texto: #2b1a12;
  --texto-suave: #7a5b4d;
  --borda: #efe2d7;
  --primario: #c2410c;
  --primario-hover: #9a3412;
  --no-primario: #fff;
  --sucesso: #2f9e44;
  --info: #d6336c;
  --perigo: #e03131;
  --alerta: #f08c00;
  --sucesso-texto: #237032;
  --perigo-texto: #c92a2a;
  --alerta-texto: #a14a08;
  --lateral: #3a1d14;
  --lateral-texto: #fbebe1;
  --lateral-suave: #cfa591;
  --lateral-hover: #4a271b;
  --lateral-ativo: #623424;
  --lateral-borda: #4d291d;
  --sombra: 0 1px 2px rgba(58, 29, 20, 0.05), 0 4px 16px -6px rgba(58, 29, 20, 0.12);
  color-scheme: light;
}

/* Inter (fonte variável, pesos 100–900), servida pela própria app. Licença: fonts/LICENSE-Inter.txt */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

/* Base dos tamanhos em rem (o padrão do browser é 16px). */
html { font-size: 15px; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Algarismos de largura fixa e "a" de um só andar, mais limpo nos valores. */
  font-feature-settings: "cv11", "tnum";
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  background: var(--fundo);
  color: var(--texto);
}

h1, h2, h3 { margin: 0; line-height: 1.25; }
h2 { font-size: 1.1rem; margin-bottom: 1rem; }
h3 { font-size: 0.9rem; color: var(--texto-suave); margin: 1.25rem 0 0.5rem; font-weight: 600; }

/* ---------- Menu lateral (sempre escuro, como uma barra de aplicação) ---------- */
:root { --largura-menu: 248px; --largura-menu-recolhido: 72px; --largura-conteudo: 1240px; }
/* Em monitores grandes, o conteúdo alarga em vez de ficar uma coluna estreita ao centro. */
@media (min-width: 1600px) { :root { --largura-conteudo: 1520px; } }
@media (min-width: 2000px) { :root { --largura-conteudo: 1840px; } }
/* Nas despesas e no calendário de débitos, a lista e o calendário usam toda a largura disponível. */
body[data-vista="despesas"], body[data-vista="fixas"] { --largura-conteudo: 2400px; }

body { display: flex; min-height: 100vh; }
.conteudo { flex: 1; min-width: 0; container-type: inline-size; }

.lateral {
  position: sticky; top: 0; height: 100vh; flex-shrink: 0; width: var(--largura-menu);
  display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem 0.75rem;
  background: var(--lateral); color: var(--lateral-texto);
  overflow-x: hidden; overflow-y: auto; transition: width 0.2s ease;
}
.lateral svg {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.lateral-topo { display: flex; align-items: center; gap: 0.4rem; padding: 0 0.25rem 0.75rem; }
.marca {
  display: flex; align-items: center; gap: 0.65rem; min-width: 0; flex: 1;
  color: var(--lateral-texto); text-decoration: none; font-weight: 700; font-size: 1.12rem;
}
.marca-icone {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--no-primario); background: var(--primario);
}
.marca .marca-nome { white-space: normal; line-height: 1.2; }
.btn-recolher {
  display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 8px; color: var(--lateral-suave);
}
.btn-recolher:hover { background: var(--lateral-hover); color: var(--lateral-texto); }
.btn-recolher svg { width: 18px; height: 18px; transition: transform 0.2s ease; }

.menu { display: flex; flex-direction: column; gap: 1.1rem; flex: 1; }
.lateral-rodape { display: flex; flex-direction: column; gap: 4px; padding-top: 0.75rem; border-top: 1px solid var(--lateral-borda); }

.item-menu {
  display: flex; align-items: center; gap: 0.85rem; width: 100%; padding: 0.7rem 0.85rem;
  border: none; border-radius: 10px; background: none; color: var(--lateral-suave);
  font: inherit; font-weight: 400; font-size: 0.95rem; text-align: left; text-decoration: none;
  white-space: nowrap; cursor: pointer;
}
.item-menu:hover { background: var(--lateral-hover); color: var(--lateral-texto); }
.item-menu:focus-visible { outline: 2px solid var(--primario); outline-offset: -2px; }
.item-menu.ativo { background: var(--lateral-ativo); color: var(--lateral-texto); }
.item-menu .rotulo { overflow: hidden; text-overflow: ellipsis; }
.avatar-menu { width: 28px; height: 28px; margin: -4px; font-size: 0.68rem; }
.lateral .avatar { background: var(--lateral-ativo); color: var(--lateral-texto); border-color: var(--lateral-borda); }
.item-menu.ativo .avatar-menu { border: 2px solid var(--primario); }

/* Grupos do menu (Área de trabalho, Gestão), cada um com um título pequeno, em maiúsculas, por cima. */
.grupo-menu { display: flex; flex-direction: column; gap: 4px; }
.titulo-grupo-menu {
  margin: 0 0 0.3rem; padding: 0 0.85rem;
  font-size: 0.75rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lateral-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Recolhido (só em ecrãs largos): só ícones; o nome aparece ao passar o rato (title). */
@media (min-width: 769px) {
  :root[data-menu="recolhido"] .lateral { width: var(--largura-menu-recolhido); }
  :root[data-menu="recolhido"] .lateral .rotulo {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  :root[data-menu="recolhido"] .lateral-topo { flex-direction: column; gap: 0.6rem; }
  :root[data-menu="recolhido"] .marca { flex: none; }
  :root[data-menu="recolhido"] .item-menu { justify-content: center; padding-inline: 0; }
  :root[data-menu="recolhido"] .btn-recolher svg { transform: rotate(180deg); }
  /* Só com ícones, os títulos dos grupos dão lugar a uma linha entre os grupos. */
  :root[data-menu="recolhido"] .titulo-grupo-menu { display: none; }
  :root[data-menu="recolhido"] .grupo-menu + .grupo-menu { padding-top: 1.1rem; border-top: 1px solid var(--lateral-borda); }
}

/* Barra de topo e menu por cima do conteúdo em ecrãs estreitos. */
.topo-movel { display: none; }
.lateral-fundo { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.45); }

@media (max-width: 768px) {
  body { display: block; }
  .topo-movel {
    display: flex; align-items: center; gap: 0.75rem; position: sticky; top: 0; z-index: 20;
    padding: 0.6rem 1rem; background: var(--lateral); color: var(--lateral-texto);
  }
  .topo-movel svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .topo-movel .btn-icone {
    display: grid; place-items: center; background: var(--lateral-hover); border-color: var(--lateral-borda); color: inherit;
  }
  .topo-movel-titulo { font-weight: 700; font-size: 1.05rem; }
  .lateral {
    position: fixed; left: 0; top: 0; z-index: 40; width: min(280px, 85vw);
    transform: translateX(-100%); visibility: hidden;
    /* Ao fechar, só fica invisível no fim da animação; ao abrir, fica visível logo (para receber o foco). */
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
  }
  body.menu-aberto .lateral { transform: none; visibility: visible; transition: transform 0.2s ease, visibility 0s; }
  .btn-recolher { display: none; }
}


/* ---------- Cabeçalho da página: título à esquerda, mês à direita ---------- */
.cabecalho-pagina {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: var(--largura-conteudo); margin: 0 auto; padding: 1.75rem clamp(1rem, 4vw, 2rem) 0;
}
.cabecalho-pagina h1 { font-size: 1.75rem; font-weight: 750; letter-spacing: -0.01em; }
.subtitulo { margin: 0.3rem 0 0; color: var(--texto-suave); font-size: 0.95rem; }
.subtitulo:empty { display: none; }

.barra-mes {
  display: flex; align-items: center; gap: 0.3rem; padding: 0.3rem;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 999px; box-shadow: var(--sombra);
}
.barra-mes .btn-icone { border-radius: 50%; border-color: transparent; background: none; }
.barra-mes .btn-icone:hover { background: var(--superficie-2); }
.barra-mes input[type="month"] { border: none; background: none; font-weight: 600; padding-block: 0.35rem; }
.barra-mes input[type="month"]:focus { box-shadow: none; }
.barra-mes .campo-data { display: inline-block; }

/* ---------- Seletor de datas (datas.js) ---------- */
.campo-data { position: relative; display: block; }
.campo-data input { padding-right: 2.5rem; }
.campo-data input::-webkit-calendar-picker-indicator { display: none; }
.btn-calendario {
  position: absolute; right: 0.3rem; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0;
  border: none; border-radius: 8px; background: none; color: var(--texto-suave);
  transition: background 0.15s, color 0.15s;
}
.btn-calendario:hover, .btn-calendario[aria-expanded="true"] { background: var(--superficie-2); color: var(--primario); }
.btn-calendario svg { width: 1.05rem; height: 1.05rem; }

.seletor-data {
  position: fixed; z-index: 60; width: 18.5rem; padding: 0.9rem;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: 0 16px 40px -12px rgb(15 23 42 / 0.3), var(--sombra);
  animation: sd-entrar 0.14s ease-out;
}
@keyframes sd-entrar { from { opacity: 0; transform: translateY(-4px); } }
.seletor-data button { border: none; background: none; color: var(--texto); padding: 0; }
.seletor-data button:focus-visible { outline: 2px solid var(--primario); outline-offset: 1px; }
.sd-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.sd-titulo { padding: 0.35rem 0.55rem; border-radius: 8px; font-weight: 700; font-size: 0.98rem; }
.seletor-data button.sd-titulo { padding: 0.35rem 0.55rem; }
button.sd-titulo:hover { background: var(--superficie-2); }
.sd-setas { display: flex; gap: 0.15rem; }
.seletor-data .sd-setas button { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; color: var(--texto-suave); }
.seletor-data .sd-setas button:hover { background: var(--superficie-2); color: var(--texto); }
.sd-setas svg { width: 1rem; height: 1rem; }
.sd-semana {
  display: grid; grid-template-columns: repeat(7, 1fr); padding-bottom: 0.35rem; text-align: center;
  font-size: 0.75rem; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.03em;
}
.sd-grelha { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.15rem; }
.sd-meses { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.seletor-data .sd-grelha button {
  aspect-ratio: 1; border-radius: 10px; font-size: 0.88rem; font-variant-numeric: tabular-nums;
  transition: background 0.12s;
}
.seletor-data .sd-meses button { aspect-ratio: auto; padding: 0.8rem 0; font-weight: 500; }
.seletor-data .sd-grelha button:hover { background: var(--superficie-2); }
.seletor-data .sd-grelha .fora { color: var(--texto-suave); opacity: 0.5; }
.seletor-data .sd-grelha .hoje { color: var(--primario); font-weight: 700; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primario) 45%, transparent); }
.seletor-data .sd-grelha .escolhido, .seletor-data .sd-grelha .escolhido:hover {
  background: var(--primario); color: var(--no-primario); font-weight: 700; opacity: 1;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--primario) 60%, transparent);
}
.sd-rodape { display: flex; justify-content: space-between; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--borda); }
.seletor-data .sd-rodape button { padding: 0.35rem 0.7rem; border-radius: 8px; color: var(--primario); font-weight: 600; font-size: 0.85rem; }
.seletor-data .sd-rodape button:hover { background: color-mix(in srgb, var(--primario) 10%, var(--superficie)); }
.seletor-data .sd-rodape [data-acao="limpar"] { color: var(--texto-suave); }

.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 1.25rem;
  padding: 1.25rem clamp(1rem, 4vw, 2rem) 2rem;
  max-width: var(--largura-conteudo);
  margin: 0 auto;
}
/* Duas colunas quando a área de conteúdo (sem o menu) é larga. */
@container (min-width: 860px) {
  .layout:has(.largo-2) { grid-template-columns: 1fr 2fr; }
}
/* Despesas e calendário: o formulário fica numa coluna de largura fixa e a grelha leva o resto. */
@container (min-width: 1100px) {
  #vista-despesas, #vista-fixas { grid-template-columns: clamp(320px, 28%, 400px) minmax(0, 1fr); }
}
[hidden] { display: none !important; }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.35rem;
  min-width: 0;
}
.largo { grid-column: 1 / -1; }

form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin-bottom: 0.8rem;
  flex: 1;
  min-width: 0;
}

.linha { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.linha > label { min-width: 140px; }

input, select, textarea, button { font: inherit; color: inherit; }
/* No telemóvel, campos com 16px: com menos, o Safari do iPhone faz zoom à página ao tocar num campo.
   :root dá-lhe prioridade sobre os tamanhos mais pequenos herdados ou definidos em listas e tabelas. */
@media (max-width: 768px) {
  :root :is(input, select, textarea) { font-size: 16px; }
}

input[type="text"], input[type="number"], input[type="date"], input[type="month"],
input[type="search"], input[type="email"], input[type="password"], input[type="tel"], select, textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--borda-campo);
  border-radius: 10px;
  background: var(--superficie);
  color: var(--texto);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primario);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 22%, var(--superficie));
}
select option { background: var(--superficie); color: var(--texto); }

/* Dropdowns com o mesmo aspeto do calendário (datas.js). Só nos browsers que já permitem estilizar a
   lista de opções (Chrome/Edge 135+); nos restantes fica a dropdown nativa. */
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
  /* Chevron igual às setas do calendário, em vez do triângulo por omissão. */
  select::picker-icon {
    content: ''; width: 1rem; height: 1rem; margin-left: auto; background: var(--texto-suave);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: rotate 0.2s;
  }
  select:open::picker-icon { rotate: 180deg; }
  select:open { border-color: var(--primario); }

  ::picker(select) {
    margin-block: 6px; padding: 0.35rem; max-block-size: min(20rem, 60vh);
    background: var(--superficie); color: var(--texto);
    border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: 0 16px 40px -12px rgb(15 23 42 / 0.3), var(--sombra);
    scrollbar-width: thin; scrollbar-color: var(--borda) transparent;
    opacity: 0; translate: 0 -4px;
    transition: opacity 0.14s ease-out, translate 0.14s ease-out, display 0.14s allow-discrete, overlay 0.14s allow-discrete;
  }
  select:open::picker(select) { opacity: 1; translate: 0; }
  @starting-style { select:open::picker(select) { opacity: 0; translate: 0 -4px; } }

  select option {
    display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.65rem; border-radius: 10px;
    background: none; font-size: 0.9rem; cursor: pointer; transition: background 0.12s;
  }
  select option::checkmark { display: none; }
  select option:hover, select option:focus-visible { background: var(--superficie-2); outline: none; }
  select option:checked, select option:checked:hover {
    background: var(--primario); color: var(--no-primario); font-weight: 600;
    box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--primario) 60%, transparent);
  }
  select option:checked .ponto { box-shadow: 0 0 0 2px var(--no-primario); }
}
textarea { resize: vertical; }
input[type="month"] { width: auto; }
input[type="color"] {
  width: 2.6rem; height: 2.4rem; padding: 0.15rem;
  border: 1px solid var(--borda-campo); border-radius: 8px; background: var(--superficie); cursor: pointer;
}

button { cursor: pointer; border-radius: 8px; border: 1px solid transparent; padding: 0.55rem 1rem; }
/* Aspeto de botão também para links (<a class="btn-primario">), não só para <button>. */
.btn-primario, .btn-secundario {
  display: inline-block; padding: 0.55rem 1.1rem; border: 1px solid transparent; border-radius: 10px;
  font-weight: 600; text-decoration: none; line-height: normal; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primario { background: var(--primario); color: var(--no-primario); }
.btn-primario:hover { background: var(--primario-hover); }
.btn-secundario, .btn-icone { background: var(--superficie); border: 1px solid var(--borda); color: inherit; }
.btn-secundario { font-weight: 500; }
.btn-secundario:hover, .btn-icone:hover { background: var(--superficie-2); border-color: var(--texto-suave); }
.btn-primario:focus-visible, .btn-secundario:focus-visible, .btn-icone:focus-visible {
  outline: 2px solid var(--primario); outline-offset: 2px;
}
.btn-icone {
  width: 2.3rem; height: 2.3rem; padding: 0; font-size: 1.3rem; line-height: 1; border-radius: 10px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-link {
  background: none; border: none; padding: 0.2rem 0.4rem; color: var(--primario); font-size: 0.85rem;
}
.btn-link.perigo { color: var(--perigo-texto); }
.btn-link:hover { text-decoration: underline; }

.acoes { display: flex; gap: 0.6rem; }
.erros { color: var(--perigo-texto); font-size: 0.85rem; margin: 0 0 0.6rem; min-height: 1em; white-space: pre-line; }
/* Erro de um campo, logo por baixo dele (validacao.js) */
.erro-campo { font-size: 0.8rem; font-weight: 500; color: var(--perigo-texto); }
:is(input, select, textarea)[aria-invalid="true"] { border-color: var(--perigo); }
:is(input, select, textarea)[aria-invalid="true"]:focus {
  border-color: var(--perigo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--perigo) 22%, var(--superficie));
}

/* "Saltar para o conteúdo": escondido até receber o foco do teclado */
.saltar-conteudo {
  position: fixed; top: 0.6rem; left: 0.6rem; z-index: 100; padding: 0.55rem 1rem; border-radius: 10px;
  background: var(--primario); color: var(--no-primario); font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.saltar-conteudo:focus { transform: none; outline: 2px solid var(--texto); outline-offset: 2px; }
#titulo-vista:focus { outline: none; }
#titulo-vista:focus-visible { outline: 2px solid var(--primario); outline-offset: 4px; border-radius: 6px; }
.dica { font-size: 0.75rem; font-weight: 400; color: var(--texto-suave); }

/* KPIs (usados também no resumo do orçamento) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.8rem; }
.kpi {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.85rem; border-radius: 12px; background: var(--superficie-2);
}
.kpi-rotulo { font-size: 0.82rem; color: var(--texto-suave); }
.kpi-valor { font-size: 1.35rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi-valor.sobe, .kpi-valor.negativo { color: var(--perigo-texto); }
.kpi-valor.desce { color: var(--sucesso-texto); }

/* ---------- Dashboard ---------- */
.painel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 1.25rem;
  padding: 1.5rem clamp(1rem, 4vw, 2rem) 2rem; max-width: var(--largura-conteudo); margin: 0 auto;
}
@container (min-width: 900px) {
  .painel { grid-template-columns: 1.25fr 1fr; }
}
.painel .kpis { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.25rem; }

/* KPI colorido: fundo suave e ícone na cor do indicador (--k). */
.painel .kpi {
  gap: 0.3rem; padding: 1.15rem 1.2rem; border-radius: var(--raio);
  background: color-mix(in srgb, var(--k) 10%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--k) 18%, var(--superficie));
}
.kpi-verde { --k: var(--sucesso); }
.kpi-azul { --k: var(--info); }
.kpi-vermelho { --k: var(--perigo); }
.kpi-amarelo { --k: var(--alerta); }
.kpi-icone {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 0.55rem;
  color: var(--k); background: color-mix(in srgb, var(--k) 20%, var(--superficie));
}
.kpi-icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.painel .kpi-rotulo { color: color-mix(in srgb, var(--k) 65%, var(--texto)); font-weight: 600; }
.painel .kpi-valor { font-size: 1.7rem; font-weight: 750; letter-spacing: -0.01em; }
.kpi-nota { font-size: 0.78rem; color: var(--texto-suave); }
.bom { color: var(--sucesso-texto); font-weight: 700; }
.mau { color: var(--perigo-texto); font-weight: 700; }
.neutro { color: var(--texto-suave); }

.cartao-cabecalho { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem; }
.cartao-cabecalho h2 { margin: 0; font-size: 1.05rem; }
.ligacao-ver { color: var(--primario); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.ligacao-ver:hover { text-decoration: underline; }

/* Donut */
.donut-bloco { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.donut { position: relative; width: 190px; aspect-ratio: 1; flex-shrink: 0; margin-inline: auto; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 20; }
.donut-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-centro strong { font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.donut-centro span { font-size: 0.8rem; color: var(--texto-suave); }
.donut-legenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 0.7rem; }
.donut-legenda li { display: grid; grid-template-columns: auto 1fr auto 3rem; align-items: center; gap: 0.6rem; font-size: 0.9rem; }
.legenda-nome { color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legenda-valor { font-weight: 600; font-variant-numeric: tabular-nums; }
.legenda-pct { text-align: right; color: var(--texto-suave); font-variant-numeric: tabular-nums; }

/* Ícone da categoria, na cor dela: a inicial (dashboard) ou um desenho escolhido pelo nome (tabela das categorias) */
.icone-categoria {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center;
  font-weight: 700; font-size: 0.95rem; color: color-mix(in srgb, var(--cor) 60%, var(--texto));
  background: color-mix(in srgb, var(--cor) 16%, var(--superficie));
}
.icone-categoria.pequeno { width: 30px; height: 30px; border-radius: 8px; margin-right: 0.2rem; }
.icone-categoria svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Orçamento no dashboard */
.lista-orcamento { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.05rem; }
.lista-orcamento li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.85rem; }
.lista-orcamento li.vazio { display: block; }
.orc-topo { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; font-size: 0.9rem; }
.orc-nome { font-weight: 600; }
.orc-valores { color: var(--texto-suave); font-variant-numeric: tabular-nums; font-size: 0.85rem; white-space: nowrap; }
.orc-pct { font-weight: 700; font-size: 0.88rem; min-width: 2.8rem; text-align: right; color: var(--sucesso-texto); }
.orc-pct.alerta { color: var(--alerta-texto); }
.orc-pct.excedido { color: var(--perigo-texto); }

/* Listas com ícone: próximos pagamentos e últimas despesas */
.lista-icones { list-style: none; margin: 0; padding: 0; }
.lista-icones li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.85rem;
  padding: 0.65rem 0; border-bottom: 1px solid var(--borda); font-size: 0.92rem;
}
.lista-icones li:last-child { border-bottom: none; }
.lista-icones li.vazio { display: block; }
.lista-icones .item-texto { font-weight: 600; min-width: 0; }
.lista-icones small { display: block; color: var(--texto-suave); font-size: 0.8rem; font-weight: 400; }
.lista-icones .valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lista-icones li.clicavel { cursor: pointer; border-radius: 10px; padding-inline: 0.5rem; margin-inline: -0.5rem; }
.lista-icones li.clicavel:hover, .lista-icones li.clicavel:focus-visible { background: var(--superficie-2); outline: none; }
.vazio a { color: var(--primario); font-weight: 600; }

/* Gráfico da evolução do saldo */
.grafico-saldo svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafico-saldo .grelha { stroke: var(--borda); stroke-width: 1; }
.grafico-saldo .grelha.zero { stroke: var(--texto-suave); stroke-dasharray: 2 3; }
.grafico-saldo .eixo { fill: var(--texto-suave); font-size: 12px; font-variant-numeric: tabular-nums; }
.grafico-saldo .linha { fill: none; stroke: var(--primario); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.grafico-saldo .linha.previsao { stroke-dasharray: 6 6; opacity: 0.75; }
.grafico-saldo .area { fill: color-mix(in srgb, var(--primario) 14%, var(--superficie)); }
.grafico-saldo .ponto-hoje { fill: var(--superficie); stroke: var(--primario); stroke-width: 2.5; }
.grafico-legenda { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--texto-suave); }
.grafico-legenda strong { color: var(--texto); font-variant-numeric: tabular-nums; }

/* Em ecrãs estreitos, os KPIs ficam dois a dois e mais compactos. */
@media (max-width: 600px) {
  .painel .kpis { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .painel .kpi { padding: 0.9rem; }
  .painel .kpi-valor { font-size: 1.2rem; }
  .kpi-icone { width: 32px; height: 32px; margin-bottom: 0.3rem; }
  .cabecalho-pagina h1 { font-size: 1.45rem; }
}

/* Barras de progresso */
.barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.barras li { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 0.6rem; font-size: 0.9rem; }
.barras .valor { font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.barra { grid-column: 1 / -1; height: 8px; background: var(--superficie-2); border-radius: 4px; overflow: hidden; }
.barra > span { display: block; height: 100%; border-radius: 4px; }

/* Lista */
.cabecalho-lista { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.cabecalho-lista h2 { margin: 0; }
.filtros { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.filtros input, .filtros select { width: auto; min-width: 160px; }

.tabela-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.86rem; line-height: 1.35; }
th, td { text-align: left; padding: 0.6rem 0.4rem; border-bottom: 1px solid var(--borda); white-space: nowrap; }
th { font-size: 0.78rem; color: var(--texto-suave); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
td.descricao { white-space: normal; min-width: 160px; }
td.descricao small { display: block; color: var(--texto-suave); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { font-weight: 600; }
tr.total td { border-bottom: none; font-weight: 700; }
td.acoes-linha { text-align: right; }
.vazio { text-align: center; color: var(--texto-suave); padding: 1.5rem 0; margin: 0; }
.sem-resultados td { text-align: center; color: var(--texto-suave); padding-block: 1.5rem; }

.etiqueta { display: inline-flex; align-items: center; gap: 0.4rem; }
.ponto { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.texto-suave { color: var(--texto-suave); }

/* Membros da família: inicial num círculo com a cor do membro */
.avatar-membro {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  font-size: 0.7rem; font-weight: 700; color: color-mix(in srgb, var(--cor) 60%, var(--texto));
  background: color-mix(in srgb, var(--cor) 18%, var(--superficie));
}
.sem-membros .col-membro { display: none; }
th.col-membro, td.col-membro { text-align: center; }

/* Cabeçalhos que ordenam as tabelas (despesas, categorias, formas de pagamento e membros) */
.btn-ordenar {
  display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.15rem 0.25rem; margin: -0.15rem -0.25rem;
  border: none; border-radius: 6px; background: none; font: inherit; color: inherit; letter-spacing: inherit;
  text-transform: inherit; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.btn-ordenar:hover { color: var(--texto); background: color-mix(in srgb, var(--texto) 6%, transparent); }
.btn-ordenar:focus-visible { outline: 2px solid var(--primario); outline-offset: 1px; }
.btn-ordenar.ativa { color: var(--primario); }
th.num .btn-ordenar { flex-direction: row-reverse; }
.seta-ordenar {
  width: 0.85rem; height: 0.85rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.35; transition: transform 0.15s, opacity 0.15s;
}
.btn-ordenar:hover .seta-ordenar { opacity: 0.7; }
/* Coluna ativa: uma só seta, para cima (ascendente) ou para baixo (descendente). */
th[aria-sort] .seta-ordenar { opacity: 1; }
th[aria-sort] .seta-ordenar { transform: translateY(-0.12rem); }
th[aria-sort="ascending"] .seta-ordenar { transform: translateY(0.12rem); }
th[aria-sort="ascending"] .seta-ordenar .baixo, th[aria-sort="descending"] .seta-ordenar .cima { display: none; }
.icone-th { width: 1rem; height: 1rem; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Ações de cada linha como ícones, para a tabela de despesas caber com todas as colunas */
.btn-icone-linha {
  display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border: none; border-radius: 8px;
  background: none; color: var(--texto-suave); transition: background 0.15s, color 0.15s;
}
.btn-icone-linha:hover { background: var(--superficie-2); color: var(--primario); }
.btn-icone-linha.perigo:hover { background: color-mix(in srgb, var(--perigo) 12%, var(--superficie)); color: var(--perigo-texto); }
.btn-icone-linha:focus-visible { outline: 2px solid var(--primario); outline-offset: 1px; }
.btn-icone-linha svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Seleção para apagar em lote */
input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--primario); cursor: pointer; vertical-align: middle; }
input[type="checkbox"]:disabled { cursor: default; }
/* Em ecrãs táteis, alvos de 44px (o mínimo recomendado para o dedo) e caixas de seleção maiores. */
@media (pointer: coarse) {
  .btn-icone-linha { width: 44px; height: 44px; }
  input[type="checkbox"] { width: 20px; height: 20px; }
}
th.col-selecao, td.col-selecao { width: 1.6rem; padding-right: 0; }
tr.selecionada td { background: color-mix(in srgb, var(--primario) 7%, var(--superficie)); }
.barra-selecao {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin-bottom: 0.8rem;
  padding: 0.5rem 0.6rem 0.5rem 0.9rem; border-radius: 12px; font-size: 0.88rem; font-weight: 600;
  background: color-mix(in srgb, var(--primario) 10%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--primario) 30%, var(--superficie));
  animation: sd-entrar 0.14s ease-out;
}
.barra-selecao #btn-apagar-selecionadas { margin-left: auto; }
.btn-perigo {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border: none; border-radius: 10px;
  background: var(--perigo); color: #fff; font-weight: 600; font-size: 0.85rem;
}
.btn-perigo:hover { filter: brightness(0.92); }
.btn-perigo svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Janela de confirmação */
.dialogo {
  width: min(26rem, calc(100vw - 2rem)); padding: 0; border: 1px solid var(--borda); border-radius: calc(var(--raio) + 4px);
  background: var(--superficie); color: var(--texto);
  box-shadow: 0 24px 60px -16px rgb(0 0 0 / 0.45), var(--sombra);
}
.dialogo[open] { animation: dialogo-entrar 0.16s ease-out; }
.dialogo::backdrop { background: rgb(8 12 22 / 0.5); animation: dialogo-fundo 0.16s ease-out; }
@keyframes dialogo-entrar { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes dialogo-fundo { from { opacity: 0; } }
.dialogo form { display: grid; justify-items: center; gap: 0.5rem; padding: 1.6rem 1.5rem 1.35rem; text-align: center; }
.dialogo-icone {
  display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 0.35rem; border-radius: 50%;
  color: var(--primario); background: color-mix(in srgb, var(--primario) 14%, var(--superficie));
}
.dialogo.perigo .dialogo-icone { color: var(--perigo-texto); background: color-mix(in srgb, var(--perigo) 14%, var(--superficie)); }
.dialogo-icone svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dialogo h2 { margin: 0; font-size: 1.12rem; }
.dialogo p { margin: 0; color: var(--texto-suave); font-size: 0.92rem; line-height: 1.5; overflow-wrap: anywhere; }
.dialogo-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; width: 100%; margin-top: 0.9rem; }
.dialogo-acoes button { justify-content: center; padding: 0.6rem 1rem; font-size: 0.92rem; font-weight: 600; border-radius: 10px; }
.dialogo-acoes button:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }

/* Paginação */
.paginacao { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 0.9rem; font-size: 0.85rem; color: var(--texto-suave); }
.por-pagina { display: inline-flex; align-items: center; gap: 0.45rem; }
.por-pagina select { width: auto; padding-block: 0.3rem; }
.paginacao-info { font-variant-numeric: tabular-nums; }
.paginas { display: flex; align-items: center; gap: 0.2rem; margin-left: auto; }
.paginas button {
  display: grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 0.45rem; border: none; border-radius: 8px;
  background: none; color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums;
}
.paginas button:hover:not(:disabled) { background: var(--superficie-2); }
.paginas button[aria-current="page"] {
  background: var(--primario); color: var(--no-primario);
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--primario) 60%, transparent);
}
.paginas button:disabled { opacity: 0.35; cursor: default; }
.paginas button:focus-visible { outline: 2px solid var(--primario); outline-offset: 1px; }
.paginas svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.paginas-reticencias { padding: 0 0.2rem; }

/* Calendário de débitos diretos */
.total-cabecalho { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--texto-suave); }

/* Registar fixos no mês (despesas fixas e rendimentos fixos) */
.registar-mes {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem;
  margin: -0.4rem 0 0.9rem;
}
.registar-mes .dica { font-size: 0.85rem; }
.registar-mes .dica::first-letter { text-transform: uppercase; }
button.btn-primario:disabled, button.btn-primario:disabled:hover { opacity: 0.5; cursor: default; filter: none; transform: none; box-shadow: none; }
.estado-ok { color: var(--sucesso-texto); font-weight: 600; font-size: 0.85rem; }
.cal-debito.registado .cal-valor::after, .cal-debito.registado .cal-valor-curto::after {
  content: " ✓"; color: var(--sucesso-texto); font-weight: 700;
}
.etiqueta-tipo {
  display: inline-block; margin-left: 0.3rem; padding: 0 0.4rem; border-radius: 999px; vertical-align: 1px;
  font-size: 0.75rem; font-weight: 600; color: var(--texto-suave); border: 1px solid var(--borda);
}
.etiqueta-tipo.fixa {
  color: color-mix(in srgb, var(--info) 75%, var(--texto)); border-color: transparent;
  background: color-mix(in srgb, var(--info) 15%, var(--superficie));
}
.etiqueta-tipo.variavel {
  color: color-mix(in srgb, var(--alerta) 70%, var(--texto)); border-color: transparent;
  background: color-mix(in srgb, var(--alerta) 16%, var(--superficie));
}

/* Controlo segmentado (filtro Todas / Variáveis / Fixas) */
.segmentos {
  display: inline-flex; gap: 0.15rem; padding: 0.2rem;
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 10px;
}
.segmentos button {
  padding: 0.3rem 0.75rem; border: none; border-radius: 7px; background: none;
  color: var(--texto-suave); font-size: 0.85rem; font-weight: 600; transition: background 0.15s, color 0.15s;
}
.segmentos button:hover { color: var(--texto); }
.segmentos button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 3px rgb(15 23 42 / 0.12); }
.segmentos button:focus-visible { outline: 2px solid var(--primario); outline-offset: 1px; }

/* Escolha do tipo de rendimento */
fieldset.escolha { border: none; padding: 0; margin: 0 0 0.8rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
fieldset.escolha legend { font-size: 0.85rem; color: var(--texto-suave); padding: 0; margin-bottom: 0.3rem; }
form fieldset.escolha label { flex-direction: row; align-items: center; gap: 0.4rem; flex: none; margin: 0; color: var(--texto); font-size: 0.9rem; }

/* Orçamento */
.kpi .dica { font-size: 0.75rem; }
.input-limite { width: 7.5rem !important; text-align: right; padding: 0.35rem 0.5rem !important; }
.col-progresso { width: 28%; min-width: 120px; }
.barra-orcamento { margin: 0; }
.barra-orcamento > span { background: var(--sucesso); }
.barra-orcamento.alerta > span { background: var(--alerta); }
.barra-orcamento.excedido > span { background: var(--perigo); }
.texto-perigo { color: var(--perigo-texto); font-weight: 600; }
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-semana {
  font-size: 0.75rem; font-weight: 600; color: var(--texto-suave); text-transform: uppercase;
  text-align: center; padding-bottom: 0.3rem;
}
.cal-dia {
  min-height: 84px; padding: 0.3rem; border: 1px solid var(--borda); border-radius: 6px;
  display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-width: 0;
}
.cal-dia:hover, .cal-dia:focus-visible { background: var(--superficie-2); outline: none; }
.cal-dia:focus-visible { border-color: var(--primario); }
.cal-dia.fora { border: none; cursor: default; background: none; }
.cal-dia.hoje { border-color: var(--primario); }
.cal-dia.hoje .cal-numero { color: var(--primario); }
.cal-numero { font-size: 0.8rem; font-weight: 600; color: var(--texto-suave); }
.cal-debito {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
  padding: 0.2rem 0.35rem; border-radius: 4px; text-align: left; font-size: 0.72rem; line-height: 1.25;
  background: var(--superficie-2); border: none; border-left: 3px solid var(--cor-banco);
}
.cal-debito:hover { outline: 1px solid var(--cor-banco); }
.cal-debito span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-desc { font-weight: 600; }
.cal-banco { color: var(--texto-suave); }
.cal-valor, .cal-valor-curto { font-variant-numeric: tabular-nums; }
.cal-valor-curto { display: none; }
/* Com mais largura, células mais altas e texto maior nos pagamentos. */
@container (min-width: 1400px) {
  .cal-dia { min-height: 108px; padding: 0.4rem; }
  .cal-debito { font-size: 0.78rem; padding: 0.25rem 0.45rem; }
  .cal-numero { font-size: 0.85rem; }
}
@container (min-width: 1800px) {
  .cal-dia { min-height: 128px; }
}

@media (max-width: 640px) {
  .calendario { gap: 2px; }
  .cal-dia { min-height: 56px; padding: 0.15rem; }
  .cal-desc, .cal-banco, .cal-valor { display: none; }
  .cal-valor-curto { display: block; }
  .cal-debito { padding: 0.15rem 0.2rem; font-size: 0.7rem; border-left-width: 2px; }
  .cal-debito span { text-overflow: clip; }
}

/* Sessão */
/* Avatar: imagem, iniciais ou ícone */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: 50%; overflow: hidden; background: var(--superficie-2); color: var(--texto-suave);
  border: 1px solid var(--borda); font-weight: 700; text-decoration: none; user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-grande { width: 96px; height: 96px; font-size: 2rem; }

.perfil-imagem { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.perfil-imagem-acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.perfil-imagem-acoes .btn-link { padding-left: 0; }
.perfil-imagem-acoes .dica { font-size: 0.78rem; }
form label.btn-ficheiro {
  display: inline-block; position: relative; flex: none; margin: 0; padding: 0.5rem 0.9rem; border: 1px solid var(--borda);
  border-radius: 10px; color: var(--texto); font-size: 0.9rem; cursor: pointer; background: var(--superficie);
}
form label.btn-ficheiro:hover { border-color: var(--texto-suave); }
form label.btn-ficheiro:focus-within { outline: 2px solid var(--primario); outline-offset: 1px; }
.btn-ficheiro input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
input.so-leitura { color: var(--texto-suave); cursor: default; }
input.so-leitura:focus { outline: none; }

.pagina-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.cartao-login { width: 100%; max-width: 380px; padding: 1.75rem; }
.cartao-login h1 { font-size: 1.3rem; margin-bottom: 0.3rem; }
.cartao-login .dica { font-size: 0.9rem; margin: 0 0 1.25rem; }
.cartao-login button { width: 100%; }
.cartao-login label .dica { margin: 0; font-size: 0.78rem; }
.ligacao-alternativa { margin: 1rem 0 0; text-align: center; font-size: 0.88rem; color: var(--texto-suave); }
.ligacao-alternativa a { color: var(--primario); font-weight: 600; }
.input-codigo { font-family: ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: 0.08em; }

/* Convites e membros */
.convite-gerado {
  margin-top: 1rem; padding: 0.9rem; border-radius: 8px;
  background: var(--superficie-2); border: 1px dashed var(--primario);
}
.convite-gerado .dica { margin: 0 0 0.6rem; font-size: 0.85rem; }
.codigo-convite { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.codigo-convite code {
  flex: 1; font-family: ui-monospace, Consolas, monospace; font-size: 1.35rem; font-weight: 700;
  letter-spacing: 0.12em; color: var(--primario);
}
.codigo-convite input { flex: 1; min-width: 0; font-size: 0.8rem; color: var(--texto-suave); }
.codigo-convite button { flex-shrink: 0; }
.lista-membros { list-style: none; margin: 0; padding: 0; }
.lista-membros li {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px solid var(--borda);
  font-size: 0.9rem;
}
.lista-membros li:last-child { border-bottom: none; }
.lista-membros small { display: block; color: var(--texto-suave); font-size: 0.78rem; }
.lista-membros small.dica-inline { display: inline; }
.avatar-pequeno { width: 32px; height: 32px; font-size: 0.75rem; }
.cartao-login button:disabled { opacity: 0.6; cursor: default; }

/* Seletor de temas (abre a partir do menu lateral) */
.seletor-tema {
  position: fixed; z-index: 60; min-width: 230px; padding: 0.4rem;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.3);
}
.opcao-tema {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.5rem 0.6rem;
  border: 1px solid transparent; border-radius: 10px; background: none; color: var(--texto);
  text-align: left; font-size: 0.9rem;
}
.opcao-tema:hover, .opcao-tema:focus-visible { background: var(--superficie-2); outline: none; }
.opcao-tema[aria-checked="true"] {
  border-color: var(--primario);
  background: color-mix(in srgb, var(--primario) 12%, var(--superficie));
}
.opcao-tema[aria-checked="true"] .opcao-tema-nome::after { content: " ✓"; color: var(--primario); font-weight: 700; }
.opcao-tema-nome { font-weight: 600; }
.opcao-tema small { display: block; font-size: 0.75rem; color: var(--texto-suave); }
/* Amostra: fundo do tema com as duas cores principais. */
.amostra-tema {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; border: 1px solid var(--borda);
  background:
    radial-gradient(circle at 30% 30%, var(--a-1) 0 28%, transparent 30%),
    radial-gradient(circle at 70% 70%, var(--a-2) 0 28%, transparent 30%),
    var(--a-fundo);
}
.amostra-auto { background: linear-gradient(135deg, #f3f5fa 0 50%, #0d121c 50% 100%); }

/* Toast */
.toast {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  background: var(--texto); color: var(--fundo); border: none;
  padding: 0.7rem 1.1rem; border-radius: 12px; font-size: 0.9rem; z-index: 50;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.35);
}

@media (max-width: 480px) {
  .kpi-valor { font-size: 1.1rem; }
  .filtros input, .filtros select { flex: 1; min-width: 0; }
  .filtros .segmentos { flex-basis: 100%; order: 1; }
  .segmentos button { flex: 1; }
}

/* Exportar CSV */
.campo-cor { display: flex; align-items: center; gap: 0.5rem; }
.campo-cor input[type="color"] { flex: 1; min-width: 0; }
.btn-icone-texto { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.btn-icone-texto svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-icone-texto svg circle { fill: currentColor; stroke: none; }
.btn-exportar { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.btn-exportar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-exportar:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 480px) {
  /* Com os campos a 16px, "Todas as categorias" já não cabe a meia largura: uma linha por filtro. */
  .filtros input[type="search"], .filtros select { flex-basis: 100%; }
}

/* Idiomas: noutro idioma, a página só aparece depois de traduzida (ver i18n.js) */
.a-traduzir body { visibility: hidden; }
.seletor-idioma { display: flex; justify-content: center; gap: 0.75rem; margin: 1rem 0 0; font-size: 0.85rem; }
.seletor-idioma button { background: none; border: none; padding: 0; color: var(--texto-suave); cursor: pointer; font: inherit; }
.seletor-idioma button[aria-current="true"] { color: var(--texto); font-weight: 600; }
.seletor-idioma button:hover { color: var(--primario); }

/* Papéis: o leitor só consulta; a gestão das contas é só do owner */
.papel-reader .so-escrita, .papel-reader .col-selecao { display: none !important; }
/* Sem o formulário ao lado, as listas ocupam a largura toda. */
.papel-reader .largo-2 { grid-column: 1 / -1; }
body:not(.papel-owner) .so-owner { display: none !important; }
.etiqueta-papel {
  display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
  color: var(--texto-suave); border: 1px solid var(--borda); white-space: nowrap;
}

/* Movimento reduzido (definição do sistema): sem animações nem transições em toda a app — menu lateral,
   botões, diálogos, calendário e listas de opções. Fica no fim para se sobrepor às regras acima. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}
/* À parte: num browser que não conheça ::picker, a regra inteira seria ignorada. */
@supports (appearance: base-select) {
  @media (prefers-reduced-motion: reduce) {
    ::picker(select), select::picker-icon { transition-duration: 0.01ms !important; }
  }
}
.etiqueta-papel.owner { color: var(--primario); border-color: var(--primario); }
.lista-membros .conta-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lista-membros .conta-acoes { display: flex; align-items: center; gap: 0.35rem; }
.lista-membros select { width: auto; padding: 0.3rem 0.5rem; font-size: 0.82rem; }