/* GestHeranças: plataforma.
   As cores vêm das casas do Alentejo: parede branca, barra azul e barra ocre.
   Os números são o conteúdo: alinhados à direita, com algarismos de largura fixa.
   O único elemento forte de cada herança é o acerto: quem paga a quem. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-wdth-normal.de2f1fe81758.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --cal: #FFFFFF;
  --preto: #000000;
  --azul: #1E3E94;
  --azul-escuro: #152C6B;
  --azul-claro: #E7ECF7;
  --ocre: #E6A817;
  --ocre-vivo: #F2BA2E;
  --ocre-claro: #FBEFC9;
  --erro: #B3261E;
  --rosa-aviso: #FFE3E3;
  --risco: #C8C8C8;
  --largura: 76rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cal);
  color: var(--preto);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-stretch: 100%;
}
h1, h2, h3 { margin: 0; font-weight: 800; font-stretch: 72%; line-height: 1.05; letter-spacing: -0.005em; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); }
h2 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); }
h3 { font-size: 1.375rem; }
p { margin: 0 0 0.75rem; max-width: 68ch; }
a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--azul-escuro); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.largura { width: min(100% - 2rem, var(--largura)); margin-inline: auto; }
@media (min-width: 40rem) { .largura { width: min(100% - 4rem, var(--largura)); } }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 0.5rem; background: var(--preto); color: var(--cal); padding: 0.5rem 1rem; z-index: 10; }
.saltar:focus { left: 0.5rem; }

/* Barra de cima */
.barra-topo { border-top: 0.375rem solid var(--azul); border-bottom: 1px solid var(--risco); }
.barra-topo__linha { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.marca { color: var(--azul); text-decoration: none; white-space: nowrap; font-size: 1.75rem; font-weight: 800; font-stretch: 72%; line-height: 1; }
.marca:hover { color: var(--azul-escuro); }
.marca__gest { font-weight: 500; }
.conta { display: flex; align-items: center; gap: 1rem; font-size: 0.9375rem; }
.conta__email { display: none; }
@media (min-width: 40rem) { .conta__email { display: inline; } }
.conta form { margin: 0; }

main.largura { padding-block: 2rem 5rem; }

/* Botões e ligações com ar de botão */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0.5rem 1.25rem;
  border: 2px solid var(--ocre); border-radius: 0.25rem;
  background: var(--ocre); color: var(--preto);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.botao:hover { background: var(--ocre-vivo); border-color: var(--ocre-vivo); color: var(--preto); }
.botao--secundario { background: var(--cal); border-color: var(--preto); }
.botao--secundario:hover { background: var(--ocre-claro); border-color: var(--preto); }
.botao--perigo { background: var(--erro); border-color: var(--erro); color: var(--cal); }
.botao--perigo:hover { background: #8F1E18; border-color: #8F1E18; color: var(--cal); }
.ligacao { padding: 0; border: 0; background: none; color: var(--azul); font: inherit; text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.ligacao:hover { color: var(--azul-escuro); text-decoration-thickness: 2px; }

/* Avisos */
.avisos { display: grid; gap: 0.5rem; margin-bottom: 1.5rem; }
.aviso { margin: 0; max-width: none; padding: 0.75rem 1rem; border-radius: 0.25rem; background: var(--azul-claro); }
.aviso--success { background: var(--ocre-claro); }
.aviso--error { background: var(--rosa-aviso); }
.aviso p:last-child { margin-bottom: 0; }

/* Cabeçalhos de página */
.cabecalho { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.5rem; }
.cabecalho h1, .cabecalho h2 { margin-right: auto; }
.cabecalho__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.heranca-topo { margin-bottom: 1.25rem; }
.heranca-topo__voltar { margin-bottom: 0.5rem; font-size: 0.9375rem; }
.heranca-topo h1 { color: var(--azul); }
.heranca-topo__dados { margin: 0.5rem 0 0; }
.heranca-topo__alterar { margin: 0.25rem 0 0; }

/* Separadores: o ativo leva a barra ocre, como a barra da parede */
.separadores { display: flex; gap: 1.75rem; overflow-x: auto; margin-bottom: 2rem; border-bottom: 1px solid var(--risco); scrollbar-width: thin; }
.separadores a { flex: none; padding: 0.75rem 0 0.625rem; border-bottom: 0.375rem solid transparent; color: var(--preto); font-weight: 600; text-decoration: none; white-space: nowrap; }
.separadores a:hover { border-bottom-color: var(--ocre-claro); }
.separadores a[aria-current="page"] { border-bottom-color: var(--ocre); font-weight: 800; }

/* Escolher a língua, na barra do topo */
.linguas { display: flex; align-items: center; gap: 0.5rem; }
.linguas select { width: auto; min-height: 2.25rem; padding: 0.25rem 0.5rem; border-width: 1px; font-size: 0.9375rem; }

/* Escolher o ano */
.escolher-ano { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.escolher-ano select { width: auto; min-width: 6.5rem; }

/* Totais do ano */
.totais { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; margin: 0 0 2.5rem; padding: 0 0 1.25rem; border-bottom: 1px solid var(--risco); }
.totais div { display: grid; }
.totais dt { font-size: 0.9375rem; }
.totais dd { margin: 0; font-size: 1.5rem; font-weight: 700; font-stretch: 85%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.totais__destaque dd { color: var(--azul); }

/* O acerto: a parte memorável */
.acerto { margin: 0 0 2.5rem; padding: 1.5rem 1.25rem 1.75rem; background: var(--ocre-claro); border-top: 0.5rem solid var(--ocre); }
@media (min-width: 48rem) { .acerto { padding: 2rem 2.5rem 2.25rem; } }
.acerto h2 { margin-bottom: 1rem; }
.acerto__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.acerto__lista li { font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2.125rem); font-stretch: 80%; font-weight: 500; line-height: 1.2; }
.acerto__lista strong { font-weight: 800; }
.acerto__vazio { font-size: 1.375rem; font-weight: 600; margin: 0; }
.acerto__nota { margin: 1rem 0 0; font-size: 0.9375rem; }

/* Tabelas */
.tabela-envolvente { overflow-x: auto; margin-bottom: 1.5rem; }
.tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela caption { text-align: left; font-weight: 800; font-stretch: 72%; font-size: 1.375rem; padding-bottom: 0.75rem; }
.tabela th, .tabela td { padding: 0.75rem 0.75rem 0.75rem 0; border-bottom: 1px solid var(--risco); text-align: left; vertical-align: top; }
.tabela th:last-child, .tabela td:last-child { padding-right: 0; }
.tabela thead th { border-bottom: 2px solid var(--preto); font-size: 0.9375rem; font-weight: 700; vertical-align: bottom; }
.tabela tbody th { font-weight: 600; }
.tabela tfoot th, .tabela tfoot td { border-top: 2px solid var(--preto); border-bottom: 0; font-weight: 800; }
.tabela .num { text-align: right; white-space: nowrap; }
.tabela .detalhe { display: block; font-size: 0.875rem; }
.tabela .acoes-linha { text-align: right; white-space: nowrap; }
.tabela .acoes-linha form { display: inline; margin: 0; }
.tabela .acoes-linha a + a, .tabela .acoes-linha a + form,
.tabela .acoes-linha form + a, .tabela .acoes-linha form + form { margin-left: 1rem; }
.saldo--recebe { color: var(--azul); font-weight: 700; }
.saldo--paga { font-weight: 700; }
.etiqueta--fim { background: var(--rosa-aviso); }
.etiqueta { display: inline-block; margin-left: 0.5rem; padding: 0 0.5rem; border-radius: 0.25rem; background: var(--azul-claro); font-size: 0.8125rem; font-weight: 700; vertical-align: 0.1em; }

@media (max-width: 47.99rem) {
  .tabela--empilhada thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela--empilhada, .tabela--empilhada caption, .tabela--empilhada tbody, .tabela--empilhada tfoot, .tabela--empilhada tr { display: block; }
  .tabela--empilhada tr { padding: 0.75rem 0; border-bottom: 1px solid var(--risco); }
  .tabela--empilhada tfoot tr { border-top: 2px solid var(--preto); border-bottom: 0; }
  .tabela--empilhada th { display: flex; justify-content: space-between; gap: 1rem; padding: 0.125rem 0; border: 0; text-align: left; }
  /* Rótulo à esquerda, valor à direita e o pormenor por baixo do valor. */
  .tabela--empilhada td { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; padding: 0.125rem 0; border: 0; text-align: right; }
  .tabela--empilhada td .detalhe { grid-column: 2; }
  .tabela--empilhada tbody th { font-size: 1.125rem; font-weight: 700; }
  .tabela--empilhada td[data-label]::before { content: attr(data-label); font-weight: 600; text-align: left; }
  .tabela--empilhada td.vazia { display: none; }
  .tabela--empilhada .num { white-space: normal; }
  .tabela--empilhada .detalhe { text-align: right; }
  .tabela--empilhada td.acoes-linha { display: flex; justify-content: flex-end; gap: 1rem; padding-top: 0.5rem; }
  .tabela--empilhada .acoes-linha a + a { margin-left: 0; }
}

/* Listas simples */
.lista { margin: 0 0 2rem; padding: 0; list-style: none; border-top: 2px solid var(--preto); }
.lista li { border-bottom: 1px solid var(--risco); }
.lista a.lista__ligacao { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 1rem 0; color: var(--preto); text-decoration: none; }
.lista a.lista__ligacao:hover .lista__nome { color: var(--azul); text-decoration: underline; }
.lista__nome { font-size: 1.375rem; font-weight: 700; font-stretch: 85%; }
.lista__extra { align-self: center; }
.lista .detalhe { display: block; margin-top: 0.125rem; font-size: 0.9375rem; }

/* Ficha de dados (imóvel, herança) */
.ficha { display: grid; grid-template-columns: max-content 1fr; gap: 0.375rem 1.5rem; margin: 0 0 2rem; }
.ficha dt { font-weight: 600; }
.ficha dd { margin: 0; }

.secao { margin-top: 2.5rem; }
.secao > h2 { margin-bottom: 1rem; }

/* Formulários */
.formulario { max-width: 40rem; }
.formulario h2 { margin-bottom: 0.75rem; }
.explicacao { margin-bottom: 1.5rem; }
.campo { margin-bottom: 1.25rem; }
.campo > label, .campo legend { display: block; margin-bottom: 0.375rem; font-weight: 700; }
.campo fieldset { margin: 0; padding: 0; border: 0; }
.opcional { font-weight: 400; }
input[type="text"], input[type="email"], input[type="date"], input[type="number"], select, textarea {
  width: 100%; max-width: 32rem; min-height: 2.875rem; padding: 0.5rem 0.75rem;
  border: 2px solid var(--preto); border-radius: 0.25rem; background: var(--cal); color: var(--preto);
  font: inherit; font-variant-numeric: tabular-nums;
}
select { padding-right: 2rem; }
textarea { min-height: 6rem; }
.campo--erro input, .campo--erro select { border-color: var(--erro); }
.campo__ajuda { margin: 0.375rem 0 0; font-size: 0.9375rem; }
.campo__erro { margin: 0.375rem 0 0; color: var(--erro); font-weight: 600; }
.erros-gerais { margin-bottom: 1.25rem; padding: 0.75rem 1rem; border-radius: 0.25rem; background: var(--rosa-aviso); }
.erros-gerais p { margin: 0; color: var(--erro); font-weight: 600; }
.opcao { display: flex; align-items: flex-start; gap: 0.625rem; font-weight: 400; cursor: pointer; }
.campo input[type="checkbox"], .campo input[type="radio"] { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--azul); }
.campo fieldset > div { display: grid; gap: 0.5rem; }
.campo fieldset label { display: flex; align-items: flex-start; gap: 0.625rem; cursor: pointer; }
.campo--meses fieldset > div { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.campo-codigo { max-width: 12rem !important; font-size: 1.75rem !important; letter-spacing: 0.2em; text-align: center; }
.formulario__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.75rem; }
details { margin-top: 1rem; }
details summary { cursor: pointer; color: var(--azul); text-decoration: underline; text-underline-offset: 0.15em; }
details[open] summary { margin-bottom: 1rem; }

/* Estado vazio */
.vazio { max-width: 44rem; padding: 1.5rem 0 1rem; border-top: 2px solid var(--preto); }
.vazio p { font-size: 1.125rem; }

/* Entrada */
.entrada { max-width: 30rem; padding-top: 2rem; }
.entrada h1 { margin-bottom: 1rem; color: var(--azul); }
.entrada .formulario__acoes { margin-top: 1.25rem; }
.entrada__nota { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--risco); font-size: 0.9375rem; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Mapa dos imóveis. A altura é fixa: o Leaflet não desenha numa caixa sem altura. */
.mapa { height: 28rem; margin: 0 0 2rem; border: 2px solid var(--preto); }
.mapa a { color: var(--azul); }

/* Confirmação de um imóvel lido da caderneta: uma caixa por parte. */
.formulario .aviso { margin-bottom: 1rem; }
.partes-lidas__titulo { margin: 2rem 0 0.5rem; }
.partes-lidas { margin: 0 0 1.5rem; padding: 1rem 1rem 0; border: 1px solid var(--risco); }
.partes-lidas legend { padding: 0 0.5rem; font-weight: 800; }

/* Na tabela dos planos, a linha do plano desta herança. */
.tabela__esta th, .tabela__esta td { font-weight: 800; }

.entrada__site { margin-top: 1rem; font-size: 0.9375rem; }

/* Listas de frases, com filetes, para o que falta e para os limites. */
.lista-simples { margin: 1rem 0 0; padding: 0; list-style: none; border-top: 2px solid var(--preto); max-width: 52rem; }
.lista-simples li { padding: 0.75rem 0; border-bottom: 1px solid var(--risco); }
.aviso + .tabela-envolvente, .aviso + .vazio { margin-top: 1.5rem; }
.exportar { margin: 1rem 0 0; font-weight: 600; }