/* ==========================================================================
   Tema — escuro por omissão, claro por escolha
   ==========================================================================
   O `color-scheme` não é decoração: é o que faz os controlos NATIVOS do
   browser (o calendário do <input type="month">, as setas dos selects, as
   barras de scroll) seguirem o tema. Sem ele, o seletor de mês desenhava-se
   claro por cima de um fundo escuro e ficava ilegível.

   Quem não escolher nada segue o sistema; o botão da barra de topo grava a
   escolha em data-theme no <html> (ver app.js). */
:root {
  color-scheme: dark;

  --bg: #0f172a;
  --panel: #111827;
  --panel-soft: #1f2937;
  --card: #ffffff;
  --text: #e5e7eb;
  --heading: #f1f5f9;
  --muted: #94a3b8;
  --primary: #38bdf8;
  --primary-dark: #0284c7;
  /* Texto por cima de --primary (botões, separador activo). */
  --on-primary: #082f49;
  --success: #22c55e;
  --warning: #fbbf24;
  --danger: #f87171;
  --border: rgba(148, 163, 184, 0.25);
  --shadow: 0 12px 30px rgba(15, 23, 42, 0.28);

  /* Superfícies suaves dentro dos painéis (listas, células, cabeçalhos). */
  --surface: rgba(148, 163, 184, 0.10);
  --surface-hover: rgba(148, 163, 184, 0.18);
  --surface-border: rgba(148, 163, 184, 0.22);

  /* Campos de formulário. */
  --input-bg: rgba(15, 23, 42, 0.7);
  --input-border: rgba(148, 163, 184, 0.3);

  /* Estados. Em fundo escuro os tons escuros de sucesso/erro não se liam. */
  --ok: #4ade80;
  --erro: #fca5a5;
  --aviso: #fcd34d;

  --badge-bg: rgba(248, 113, 113, 0.18);
  --badge-text: #fca5a5;

  --gradiente: linear-gradient(135deg, #020817, #0f172a 35%, #111827);
  /* Cromo da aplicacao: barra de separadores, cabecalhos de tabela. */
  --panel-bg: rgba(17, 24, 39, 0.9);
  --card-accent: linear-gradient(135deg, rgba(14, 116, 144, 0.25), rgba(30, 41, 59, 0.9));
  --destaque: rgba(14, 116, 144, 0.2);
  --chrome: rgba(15, 23, 42, 0.6);
  --card-bg: rgba(15, 23, 42, 0.55);
  --card-strong: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(15, 23, 42, 0.9));
}

/* Quem não escolheu tema e tem o sistema em claro. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --bg: #eef2f7;
    --panel: #ffffff;
    --panel-soft: #f8fafc;
    --text: #1e293b;
    --heading: #0f172a;
    --muted: #5b6878;
    --primary: #0369a1;
    --primary-dark: #075985;
    --on-primary: #ffffff;
    --danger: #dc2626;
    --success: #15803d;
    --warning: #b45309;
    --border: #dbe3ec;
    --shadow: 0 10px 24px rgba(15, 23, 42, 0.10);

    --surface: #f8fafc;
    --surface-hover: #f1f5f9;
    --surface-border: #e2e8f0;

    --input-bg: #ffffff;
    --input-border: #cbd5e1;

    --ok: #15803d;
    --erro: #b91c1c;
    --aviso: #b45309;

    --badge-bg: #fee2e2;
    --badge-text: #b91c1c;

    --panel-bg: #ffffff;
    --card-accent: linear-gradient(135deg, rgba(14, 116, 144, 0.12), #eef6fb);
    --destaque: rgba(14, 116, 144, 0.10);
    --chrome: #f1f5f9;
    --card-bg: #ffffff;
    --card-strong: #ffffff;    --gradiente: linear-gradient(135deg, #e2e8f0, #eef2f7 35%, #f8fafc);
  }
}

/* Escolha explícita no botão — ganha ao que o sistema diz. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #eef2f7;
  --panel: #ffffff;
  --panel-soft: #f8fafc;
  --text: #1e293b;
  --heading: #0f172a;
  --muted: #5b6878;
  --primary: #0369a1;
  --primary-dark: #075985;
  --on-primary: #ffffff;
  --danger: #dc2626;
  --success: #15803d;
  --warning: #b45309;
  --border: #dbe3ec;
  --shadow: 0 10px 24px rgba(15, 23, 42, 0.10);

  --surface: #f8fafc;
  --surface-hover: #f1f5f9;
  --surface-border: #e2e8f0;

  --input-bg: #ffffff;
  --input-border: #cbd5e1;

  --ok: #15803d;
  --erro: #b91c1c;
  --aviso: #b45309;

  --badge-bg: #fee2e2;
  --badge-text: #b91c1c;

  --panel-bg: #ffffff;
  --card-accent: linear-gradient(135deg, rgba(14, 116, 144, 0.12), #eef6fb);
  --destaque: rgba(14, 116, 144, 0.10);
  --chrome: #f1f5f9;
  --card-bg: #ffffff;
  --card-strong: #ffffff;
  --gradiente: linear-gradient(135deg, #e2e8f0, #eef2f7 35%, #f8fafc);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--gradiente);
  color: var(--text);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.shell {
  width: min(1200px, calc(100% - 32px));
  margin: 32px auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 6px;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 2.8rem);
}

h2 {
  margin: 0;
  font-size: 1.1rem;
}

.toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 0.8rem;
}

.field input,
.field select,
.admin-key-field input {
  border: 1px solid var(--input-border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  padding: 10px 12px;
  min-width: 180px;
  font: inherit;
}

/* O <input type="month"> vinha com a fonte do browser e destoava dos outros
   campos da barra — daí o `font: inherit` acima.

   O ícone do calendário é desenhado pelo browser e não aceita `color`: quem o
   resolve é o `color-scheme` do :root, que o faz claro em tema escuro e escuro
   em tema claro. Não se lhe aplica `filter: invert`, que o punha ao contrário
   do que devia. */
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .8;
}
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.field input:focus,
.field select:focus,
.admin-key-field input:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}

button.primary {
  border: none;
  border-radius: 10px;
  padding: 11px 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--chrome);
  overflow-x: auto;
}

.tab-button {
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 14px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.tab-button:hover,
.tab-button:focus-visible {
  color: var(--text);
  border-color: var(--border);
  outline: none;
}

.tab-button.active {
  color: var(--on-primary);
  background: var(--primary);
  box-shadow: 0 5px 14px rgba(56, 189, 248, 0.24);
}

.tab-panel[hidden] {
  display: none;
}

.tab-panel.active {
  display: block;
}

.salary-config-panel {
  overflow: visible;
}

.salary-config-header {
  flex-wrap: wrap;
}

.admin-key-field {
  display: grid;
  gap: 5px;
  margin-left: auto;
  color: var(--muted);
  font-size: 0.76rem;
}

.admin-key-field input {
  min-width: 220px;
}

.salary-config-form {
  padding: 20px;
}

.salary-config-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.config-employee-field {
  width: min(100%, 420px);
  margin-bottom: 20px;
}

.salary-config-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.salary-config-grid .field input {
  min-width: 0;
  width: 100%;
}

.salary-config-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}

.form-status {
  color: var(--muted);
  font-size: 0.86rem;
}

.form-status[data-state="success"] {
  color: var(--success);
}

.form-status[data-state="warning"] {
  color: var(--warning);
}

.form-status[data-state="error"] {
  color: var(--danger);
}

.summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.card {
  background: var(--card-strong);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow);
  min-height: 118px;
}

.card.accent {
  background: var(--card-accent);
}

.card span {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 10px;
}

.card strong {
  font-size: clamp(1.25rem, 2vw, 2rem);
}

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.employee-detail {
  margin-bottom: 24px;
}

.employee-profile {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}

.employee-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
}

.employee-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.employee-submeta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--muted);
  font-size: 0.82rem;
}

.employee-name {
  font-size: 1.4rem;
  font-weight: 700;
}

.employee-address {
  color: var(--muted);
}

.employee-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 20px;
}

.employee-payroll-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 0 20px 20px;
}

.employee-net {
  border-color: rgba(56, 189, 248, 0.6);
  background: var(--destaque);
}

.employee-stat {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}

.employee-stat span {
  display: block;
  color: var(--muted);
  margin-bottom: 8px;
  font-size: 0.82rem;
}

.employee-stat strong {
  font-size: 1.6rem;
}

.employee-stat small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--chrome);
}

.icon-button {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

th {
  color: var(--muted);
  font-weight: 600;
  background: var(--chrome);
}

tbody tr:hover {
  background: rgba(56, 189, 248, 0.04);
}

.employee-row.selected {
  background: rgba(56, 189, 248, 0.08);
  box-shadow: inset 3px 0 0 var(--primary);
}

.status {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.status.ok {
  background: rgba(34, 197, 94, 0.12);
  color: var(--success);
}

.status.warn {
  background: rgba(251, 191, 36, 0.12);
  color: var(--warning);
}

.status.bad {
  background: rgba(248, 113, 113, 0.12);
  color: var(--danger);
}

.muted {
  color: var(--muted);
}

@media (max-width: 760px) {
  .summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar {
    width: 100%;
    justify-content: space-between;
  }

  .salary-config-grid,
  .employee-payroll-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-key-field {
    margin-left: 0;
  }
}

@media (max-width: 520px) {
  .summary {
    grid-template-columns: 1fr;
  }

  .card strong {
    font-size: 1.1rem;
  }

  .salary-config-grid,
  .employee-payroll-grid {
    grid-template-columns: 1fr;
  }

  .salary-config-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-key-field,
  .admin-key-field input {
    width: 100%;
  }
}

@media print {
  body {
    background: #fff;
    color: #111827;
    font-family: Arial, sans-serif;
  }

  .shell {
    width: 100%;
    margin: 0;
  }

  .topbar, .tabs, .summary, .employee-detail .panel-header, .icon-button {
    display: none !important;
  }

  .tab-panel:not(#folha) {
    display: none !important;
  }

  .panel, .employee-detail, .table-wrap {
    border: 0;
    box-shadow: none;
    overflow: visible;
  }

  .employee-detail {
    display: block !important;
    margin: 0 0 18px;
  }

  .employee-profile, .employee-stat-grid, .employee-payroll-grid, th, td {
    background: #fff;
    border-color: #d1d5db;
  }

  .employee-net {
    background: #f0f9ff;
  }

  #salaryTableBody .employee-row:not(.print-target) {
    display: none;
  }
}

/* ==========================================================================
   Colaboradores — remuneração por pessoa (ver colaboradores.js)
   ========================================================================== */

.sessao {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--surface-border);
}
.sessao-email {
  font-size: .78rem;
  color: var(--muted);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sessao-sair {
  font-size: .78rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.sessao-sair:hover { text-decoration: underline; }

.panel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--muted);
  white-space: nowrap;
}
.check input { margin: 0; }

button.ghost {
  padding: 7px 12px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
button.ghost:hover { background: var(--surface-hover); border-color: var(--muted); }
button.ghost:disabled { opacity: .55; cursor: default; }

.hint-line {
  font-size: .8rem;
  color: var(--muted);
  margin: 8px 0 14px;
  line-height: 1.5;
}
.hint-line.ok    { color: var(--ok); }
.hint-line.erro  { color: var(--erro); }
.hint-line.aviso { color: var(--aviso); }

/* --- gestor de campos extra --- */
.campos-panel { margin-bottom: 18px; }
.campos-panel h3 { font-size: .95rem; margin: 0 0 6px; color: var(--heading); }

.campos-lista {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.campos-lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--surface);
  font-size: .82rem;
}
.campos-lista .campo-nome { font-weight: 600; color: var(--heading); }
.campos-lista .muted { flex: 1; font-size: .74rem; }

.campos-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.campos-form .field { min-width: 140px; }

/* --- tabela editável --- */
.tabela-colaboradores th,
.tabela-colaboradores td { vertical-align: middle; }

.tabela-colaboradores .cel-valor {
  width: 96px;
  padding: 6px 8px;
  border: 1px solid var(--input-border);
  border-radius: 7px;
  font-size: .82rem;
  text-align: right;
}
.tabela-colaboradores .cel-valor:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}
.tabela-colaboradores .cel-valor:disabled {
  background: var(--surface);
  color: var(--muted);
}
/* O flex vai no wrapper, nao no <td>: um <td> com display:flex deixa de se
   comportar como celula de tabela e era o que punha esta coluna fora de linha
   com as outras. O input fica mais estreito para o conjunto (valor + /dia)
   ocupar o mesmo que um `.cel-valor` sozinho. */
.tabela-colaboradores .cel-sub-campo {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tabela-colaboradores .cel-sub .cel-valor {
  width: 68px;
}
.tabela-colaboradores .cel-sub select {
  padding: 6px 4px;
  border: 1px solid var(--input-border);
  border-radius: 7px;
  background: var(--input-bg);
  color: var(--text);
  font-size: .74rem;
}
.tabela-colaboradores .cel-sub select:disabled {
  background: var(--surface);
  color: var(--muted);
}
.tabela-colaboradores .cel-total { white-space: nowrap; }

.tabela-colaboradores .linha-inativa { opacity: .55; }
.etiqueta {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: middle;
}

/* Horas do mês por funcionário — mesmas categorias da tabela do HPonto.
   Números alinhados à direita para se compararem de relance; a primeira
   coluna (nome) fica à esquerda. */
.tabela-horas th,
.tabela-horas td {
  vertical-align: top;
  text-align: right;
  white-space: nowrap;
  padding: 10px 8px;
  font-size: .76rem;
}
.tabela-horas { table-layout: fixed; }
.tabela-horas th { white-space: normal; overflow-wrap: anywhere; }
.tabela-horas th:first-child,
.tabela-horas td:first-child { width: 15%; }
.tabela-horas th:nth-child(9),
.tabela-horas td:nth-child(9) { width: 14%; }
.tabela-horas th:first-child,
.tabela-horas td:first-child {
  text-align: left;
  white-space: normal;
}
.tabela-horas td:nth-child(9) { white-space: normal; overflow-wrap: anywhere; }
.tabela-horas small.muted {
  display: block;
  font-size: .68rem;
  font-weight: 400;
}

.tabela-custos th,
.tabela-custos td {
  white-space: nowrap;
  font-size: .78rem;
  padding: 10px 9px;
  text-align: right;
}
.tabela-custos th:first-child,
.tabela-custos td:first-child { text-align: left; white-space: normal; }
.tabela-custos { min-width: 1080px; }
.custos-totais {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  background: var(--chrome);
  color: var(--heading);
}
.custos-totais strong { font-size: .9rem; }

/* ==========================================================================
   Botão de tema
   ========================================================================== */
.tema-btn {
  border: 1px solid var(--input-border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  padding: 10px 12px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.tema-btn:hover { background: var(--surface-hover); border-color: var(--muted); }
.tema-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Texto só para leitores de ecrã: o botão mostra um ícone, mas quem o ouve
   precisa de saber o que faz. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Banco de horas: o sinal decide o que acontece a seguir — saldo positivo
   paga-se ou acumula, negativo é tempo em dívida. */
.tabela-horas .bh-positivo { color: var(--ok); }
.tabela-horas .bh-negativo { color: var(--erro); }

/* Filtro da folha de pagamento. Fica na barra do painel, mais estreito que os
   campos da barra de topo — é uma caixa de pesquisa, não um seletor. */
.field-filtro input {
  min-width: 220px;
  padding: 7px 10px;
  font-size: .82rem;
}

/* Linha da folha em edição e histórico de alterações. */
.cel-acoes { white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.cel-motivo {
  min-width: 160px;
  padding: 6px 8px;
  border: 1px solid var(--input-border);
  border-radius: 7px;
  background: var(--input-bg);
  color: var(--text);
  font-size: .8rem;
}
tr.em-edicao { background: var(--surface-hover); }

.tabela-historico th,
.tabela-historico td { font-size: .8rem; vertical-align: top; }
.tabela-historico td:first-child { white-space: nowrap; }

/* Coluna "Na folha" e linhas excluídas do processamento. */
.tabela-colaboradores .cel-folha { text-align: center; }
.tabela-colaboradores tr[data-fora] { opacity: .5; }
.tabela-colaboradores tr[data-fora] .cel-folha { opacity: 1; }

/* ==========================================================================
   Janelas de edição (<dialog> nativo)
   ========================================================================== */
.modal {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-bg);
  color: var(--text);
  box-shadow: var(--shadow);
}
.modal-folha { width: min(900px, calc(100vw - 32px)); }
.modal-folha .employee-detail { margin: 0; box-shadow: none; border: 0; }
.modal::backdrop { background: rgba(2, 8, 23, .55); }

.modal form { display: flex; flex-direction: column; max-height: calc(100vh - 64px); }

.modal-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--chrome);
}
.modal-cab h3 { margin: 0 0 2px; font-size: 1.05rem; color: var(--heading); }
.modal-cab p { margin: 0; font-size: .78rem; }

.modal-corpo { padding: 18px 20px; overflow-y: auto; }

.modal-grelha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.modal-grelha .field input,
.modal-grelha .field select { min-width: 0; width: 100%; }
.modal-largo { grid-column: 1 / -1; }

/* A caixa que decide se a pessoa entra na folha é a decisão mais consequente
   desta janela — não pode passar por mais um campo entre outros. */
.modal-destaque {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--surface);
  font-weight: 600;
}

.modal-resumo {
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  text-align: right;
  font-size: .9rem;
}
.modal-resumo strong { font-size: 1.15rem; color: var(--heading); }

.modal-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--chrome);
}
.modal-botoes { display: flex; gap: 8px; flex: 0 0 auto; }
.modal-rodape .hint-line { margin: 0; }

/* Tabelas de IRS no separador Definições. */
.tabela-irs th,
.tabela-irs td { font-size: .84rem; vertical-align: top; }
.tabela-irs td:first-child { white-space: nowrap; }
.tabela-irs .hint-line { margin: 2px 0 0; font-size: .72rem; }

/* Importação de tabelas de IRS. */
.importar-irs {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--surface);
}
.importar-irs summary { cursor: pointer; font-weight: 600; color: var(--heading); }
.importar-irs[open] summary { margin-bottom: 10px; }
.importar-irs input[type="file"] {
  padding: 6px;
  font-size: .78rem;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: 7px;
}

/* Lista de ficheiros na janela de importação de IRS. */
.irs-ficheiros { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.irs-ficheiros li {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--surface);
  font-size: .82rem;
}
.irs-ficheiros input[type="file"] {
  min-width: 0;
  padding: 5px;
  font-size: .74rem;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: 7px;
}
.irs-lido { font-size: .74rem; white-space: nowrap; color: var(--muted); }
.irs-lido.ok   { color: var(--ok); font-weight: 600; }
.irs-lido.erro { color: var(--erro); }

/* Versão e data de publicação, por baixo do título. */
.versao {
  margin-top: 4px;
  font-size: .7rem;
  letter-spacing: .02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}