/* RILab 3D — estilos [D25]: telemóvel primeiro, tema claro e escuro (segue o sistema). */

/* Cores e medidas ---------------------------------------------------------- */

:root {
  color-scheme: light dark;
  --cor-fundo: #f3f5f8;
  --cor-superficie: #ffffff;
  --cor-superficie-2: #f7f9fb;
  --cor-campo: #ffffff;
  --cor-texto: #18202c;
  --cor-texto-suave: #5b6576;
  --cor-marca: #1f5f8b;
  --cor-marca-escura: #174a6c;
  --cor-marca-suave: #e6f0f8;
  --cor-ligacao: #1f5f8b;
  --cor-borda: #e0e4ea;
  --cor-borda-forte: #c5ccd6;
  --cor-foco: #3d8fd1;
  --cor-lateral: #153f5f;
  --cor-lateral-texto: #c9d9e6;
  --cor-perigo: #a3261a;
  --cor-perigo-escura: #7f1d13;
  --cor-aviso-fundo: #fdecea;
  --cor-aviso-texto: #8a1c12;
  --cor-aviso-borda: #f0c4bf;
  --cor-sucesso-fundo: #e7f4ec;
  --cor-sucesso-texto: #1d5a32;
  --cor-sucesso-borda: #b5dbc2;
  --cor-amarelo-fundo: #fff6dc;
  --cor-amarelo-texto: #6b5200;
  --cor-amarelo-borda: #ecd892;
  --cor-roxo-fundo: #f3edfa;
  --cor-roxo-texto: #4a2a6e;
  --cor-roxo-borda: #d5c6ea;
  --cor-azul-fundo: #e7f0f8;
  --cor-azul-texto: #174a6c;
  --cor-azul-borda: #b9d1e6;
  --sombra: 0 1px 2px rgb(16 24 40 / 5%), 0 1px 3px rgb(16 24 40 / 6%);
  --sombra-alta: 0 8px 24px rgb(16 24 40 / 14%), 0 2px 6px rgb(16 24 40 / 8%);
  --raio: 8px;
  --raio-grande: 12px;
  --espaco: 1rem;
  --altura-barra: 3.75rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-fundo: #0e141b;
    --cor-superficie: #161e28;
    --cor-superficie-2: #1b2531;
    --cor-campo: #10171f;
    --cor-texto: #e4e9f0;
    --cor-texto-suave: #9ba7b7;
    --cor-marca: #2f72a6;
    --cor-marca-escura: #3b84bd;
    --cor-marca-suave: #1b3246;
    --cor-ligacao: #8cc2ea;
    --cor-borda: #273341;
    --cor-borda-forte: #3a4757;
    --cor-foco: #6aaee4;
    --cor-lateral: #111a24;
    --cor-lateral-texto: #a9b7c6;
    --cor-perigo: #b8352a;
    --cor-perigo-escura: #cf4639;
    --cor-aviso-fundo: #3a1714;
    --cor-aviso-texto: #f4aaa2;
    --cor-aviso-borda: #5e2620;
    --cor-sucesso-fundo: #13301e;
    --cor-sucesso-texto: #9fd8b2;
    --cor-sucesso-borda: #24502f;
    --cor-amarelo-fundo: #33290f;
    --cor-amarelo-texto: #f1d58a;
    --cor-amarelo-borda: #5c4c1c;
    --cor-roxo-fundo: #2a2040;
    --cor-roxo-texto: #d2bdf2;
    --cor-roxo-borda: #45346a;
    --cor-azul-fundo: #15293b;
    --cor-azul-texto: #a9cdec;
    --cor-azul-borda: #24445f;
    --sombra: 0 1px 2px rgb(0 0 0 / 30%);
    --sombra-alta: 0 8px 24px rgb(0 0 0 / 45%), 0 2px 6px rgb(0 0 0 / 30%);
  }
}

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

body { margin: 0; overflow-wrap: anywhere; background: var(--cor-fundo); }

a {
  color: var(--cor-ligacao);
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--cor-foco); outline-offset: 2px; }

h1 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 var(--espaco); }
h2 { font-size: 1.1rem; line-height: 1.3; margin: 0 0 0.75rem; }
h3 { font-size: 1rem; margin: var(--espaco) 0 0.5rem; }

[hidden] { display: none !important; }

.visualmente-escondido {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icone { flex: none; }

/* Esqueleto: barra de topo e menu inferior (telemóvel) ---------------------- */

.topo {
  display: flex;
  align-items: center;
  gap: var(--espaco);
  padding: 0.6rem var(--espaco);
  background: var(--cor-lateral);
  color: #fff;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.marca img { display: block; border-radius: 7px; }

.menu {
  position: fixed;
  z-index: 20;
  inset: auto 0 0 0;
  display: flex;
  min-height: var(--altura-barra);
  padding: 0 0.25rem env(safe-area-inset-bottom);
  background: var(--cor-superficie);
  border-top: 1px solid var(--cor-borda);
  box-shadow: 0 -2px 10px rgb(16 24 40 / 6%);
}
.menu ul { margin: 0; padding: 0; list-style: none; }
.menu-lista { display: flex; flex: 4; }
.menu-lista > li { flex: 1; min-width: 0; }
.menu-lista > li.secundario { display: none; }

.menu-lista a, .menu-mais > summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  height: 100%;
  min-height: var(--altura-barra);
  padding: 0.35rem 0.1rem;
  color: var(--cor-texto-suave);
  font-size: 0.72rem;
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: normal;
  white-space: nowrap;
  cursor: pointer;
}
.menu-lista a[aria-current="page"], .menu-mais > summary.atual, .menu-mais[open] > summary {
  color: var(--cor-ligacao);
  font-weight: 700;
}
.menu-lista a[aria-current="page"] .icone, .menu-mais > summary.atual .icone {
  stroke-width: 2.4;
}

.menu-mais { position: relative; flex: 1; }
.menu-mais > summary { list-style: none; }
.menu-mais > summary::-webkit-details-marker { display: none; }
.menu-mais-painel {
  position: absolute;
  right: 0.25rem;
  bottom: calc(100% + 0.5rem);
  width: min(15rem, calc(100vw - 1rem));
  padding: 0.4rem;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-alta);
}
.menu-mais-painel a, .menu .sair button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: var(--raio);
  background: transparent;
  color: var(--cor-texto);
  font: inherit;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
}
.menu-mais-painel a:hover, .menu-mais-painel .sair button:hover { background: var(--cor-superficie-2); }
.menu-mais-painel a[aria-current="page"] { background: var(--cor-marca-suave); color: var(--cor-ligacao); }
.menu-mais-painel .sair { border-top: 1px solid var(--cor-borda); margin-top: 0.3rem; padding-top: 0.3rem; }
.menu > .sair { display: none; }
.sair { margin: 0; }

.conteudo {
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.25rem var(--espaco) 2rem;
}
.com-menu .conteudo { padding-bottom: calc(var(--altura-barra) + env(safe-area-inset-bottom) + 2rem); }

/* Esqueleto: barra lateral (computador) */

@media (min-width: 64rem) {
  :root { --espaco: 1.25rem; }
  body.com-menu {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    min-height: 100vh;
    background: linear-gradient(to right, var(--cor-lateral) 15rem, var(--cor-fundo) 15rem);
  }
  .com-menu .topo {
    position: sticky;
    top: 0;
    height: 100vh;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    padding: 1.25rem 0.75rem;
    overflow-y: auto;
  }
  .com-menu .marca { padding: 0 0.5rem; }
  .menu {
    position: static;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .menu-lista { flex: none; flex-direction: column; gap: 0.15rem; }
  .menu-lista > li.secundario { display: block; }
  .menu-lista > li:not(.secundario) + li.secundario {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgb(255 255 255 / 10%);
  }
  .menu-lista a, .menu > .sair button {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.75rem;
    min-height: 2.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--raio);
    color: var(--cor-lateral-texto);
    font-size: 0.95rem;
  }
  .menu-lista a:hover, .menu > .sair button:hover { background: rgb(255 255 255 / 8%); color: #fff; }
  .menu-lista a[aria-current="page"] {
    background: rgb(255 255 255 / 14%);
    color: #fff;
    font-weight: 600;
  }
  .menu-mais { display: none; }
  .menu > .sair { display: block; margin-top: auto; }
  .conteudo { width: 100%; padding: 2rem 2.5rem 3rem; }
  .com-menu .conteudo { padding-bottom: 3rem; }
}

/* Páginas sem sessão (entrada, configuração) */

.sem-menu .topo { justify-content: center; padding: 1.25rem var(--espaco); background: transparent; }
.sem-menu .marca { color: var(--cor-texto); font-size: 1.3rem; }
.entrar { max-width: 24rem; margin: 1rem auto; padding: 1.5rem; }
.entrar button[type="submit"] { width: 100%; }
.entrar form + .dica { margin-top: 0.85rem; }

/* Cartões e cabeçalhos ------------------------------------------------------ */

.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra);
  padding: var(--espaco);
}
.cartao > :last-child { margin-bottom: 0; }
.cartao + .cartao, .acoes + .cartao, .dica + .cartao, .barra-acoes + .cartao,
.aviso + .cartao { margin-top: var(--espaco); }

.cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem var(--espaco);
  margin-bottom: var(--espaco);
}
.cabecalho h1 { margin: 0; }
.cabecalho .acoes { margin-bottom: 0; }
.subtitulo { margin: 0.2rem 0 0; color: var(--cor-texto-suave); }
.voltar { margin: 0 0 0.25rem; font-size: 0.9rem; }
.voltar a { color: var(--cor-texto-suave); text-decoration: none; }
.voltar a:hover { color: var(--cor-ligacao); }

.cartao-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem var(--espaco);
  margin-bottom: 0.75rem;
}
.cartao-cabecalho h2 { margin: 0; }

.erro h1 { color: var(--cor-aviso-texto); }

/* Botões e ações ------------------------------------------------------------ */

button, a.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--cor-marca);
  border-radius: var(--raio);
  background: var(--cor-marca);
  color: #fff;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}
button:hover, a.botao:hover { background: var(--cor-marca-escura); border-color: var(--cor-marca-escura); }

button.secundario, a.botao.secundario {
  background: var(--cor-superficie);
  border-color: var(--cor-borda-forte);
  color: var(--cor-texto);
}
button.secundario:hover, a.botao.secundario:hover {
  background: var(--cor-superficie-2);
  border-color: var(--cor-texto-suave);
}

button.perigo, a.botao.perigo {
  background: var(--cor-perigo);
  border-color: var(--cor-perigo);
  color: #fff;
}
button.perigo:hover, a.botao.perigo:hover {
  background: var(--cor-perigo-escura);
  border-color: var(--cor-perigo-escura);
}

.acoes, .botoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.acoes { margin-bottom: var(--espaco); }
.acao { margin: 0; }

.barra-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--espaco);
}

.lista-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.3rem; }

input[type="text"], input[type="password"], input[type="email"],
input[type="search"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"],
input[type="number"], textarea, select {
  width: 100%;
  min-height: 2.5rem;
  font: inherit;
  color: var(--cor-texto);
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio);
  background: var(--cor-campo);
  margin-bottom: var(--espaco);
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--cor-foco);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-foco) 25%, transparent);
}
input[type="checkbox"], input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--cor-marca);
}
input[type="file"] { font: inherit; max-width: 100%; }
input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio);
  background: var(--cor-superficie-2);
  color: var(--cor-texto);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.formulario fieldset {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  margin: 0 0 var(--espaco);
  padding: 0.75rem var(--espaco) 0;
  min-width: 0;
}
.formulario legend { font-weight: 700; padding: 0 0.35rem; }

.campo input, .campo textarea, .campo select { margin-bottom: 0.25rem; }
.campo { margin-bottom: 0.85rem; }

[aria-invalid="true"] { border-color: var(--cor-aviso-texto); }

.erro-campo { color: var(--cor-aviso-texto); margin: 0; font-size: 0.9rem; }

.dica, .contagem { color: var(--cor-texto-suave); font-size: 0.9rem; margin: 0 0 0.5rem; }

.pesquisa {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 0.75rem;
  margin-bottom: 0.5rem;
}
.pesquisa .campo { flex: 1 1 12rem; }
.pesquisa button { margin-bottom: 0.85rem; }

label.opcao {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
  min-height: 2.5rem;
}

/* Secções recolhíveis (formulários secundários) */

details.recolhivel { margin-top: var(--espaco); }
details.recolhivel > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
details.recolhivel > summary::-webkit-details-marker { display: none; }
details.recolhivel > summary::before { content: "+"; font-weight: 700; width: 0.8em; }
details.recolhivel[open] > summary::before { content: "−"; }
details.recolhivel > summary:hover { background: var(--cor-superficie-2); }
details.recolhivel[open] > summary { margin-bottom: var(--espaco); }

/* Avisos -------------------------------------------------------------------- */

.aviso {
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso-texto);
  border: 1px solid var(--cor-aviso-borda);
  border-radius: var(--raio);
  padding: 0.65rem 0.85rem;
}
div.aviso { margin-bottom: var(--espaco); }
.aviso ul { margin: 0.25rem 0; padding-left: 1.25rem; }
.aviso p { margin: 0.25rem 0; }
.aviso a { color: inherit; }

.sucesso {
  background: var(--cor-sucesso-fundo);
  border: 1px solid var(--cor-sucesso-borda);
  color: var(--cor-sucesso-texto);
  padding: 0.6rem 0.85rem;
  border-radius: var(--raio);
  margin: 0 0 var(--espaco);
}

.alerta { color: var(--cor-aviso-texto); }

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

.tabela {
  overflow-x: auto;
  position: relative;
  container-type: inline-size;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}
.cartao .tabela { margin-bottom: 0.75rem; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--cor-superficie);
  font-size: 0.95rem;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--cor-borda);
  /* Sem partir palavras a meio: no telemóvel a tabela desliza no contentor. */
  overflow-wrap: break-word;
}
tbody tr:last-child > * { border-bottom: 0; }
th {
  white-space: nowrap;
  background: var(--cor-superficie-2);
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
tbody tr:hover > td { background: color-mix(in srgb, var(--cor-marca-suave) 45%, transparent); }
td a { text-decoration: none; font-weight: 500; }
td a:hover { text-decoration: underline; }
td .acao button, td button { min-height: 2.1rem; padding: 0.3rem 0.75rem; font-size: 0.9rem; }

th.valor, td.valor { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Tabelas estreitas em cartões: uma linha por cartão, com o título da coluna
   (`data-etiqueta`, posto pelo interface.js) antes de cada valor. */
@container (max-width: 30rem) {
  .em-cartoes > table, .em-cartoes > table > tbody { display: block; background: transparent; }
  .em-cartoes > table > thead { display: none; }
  .em-cartoes > table > tbody > tr {
    display: block;
    padding: 0.4rem 0.85rem;
    border-bottom: 1px solid var(--cor-borda);
    background: var(--cor-superficie);
  }
  .em-cartoes > table > tbody > tr:last-child { border-bottom: 0; }
  .em-cartoes > table > tbody > tr:hover > td { background: transparent; }
  .em-cartoes > table > tbody > tr > td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.25rem 1rem;
    padding: 0.3rem 0;
    border: 0;
    text-align: right;
    white-space: normal;
  }
  .em-cartoes > table > tbody > tr > td > * { min-width: 0; }
  .em-cartoes > table > tbody > tr > td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    flex: none;
    max-width: 45%;
    color: var(--cor-texto-suave);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
  }
  .em-cartoes > table > tbody > tr > td:first-child {
    font-size: 1rem;
    font-weight: 600;
  }
  .em-cartoes > table > tbody > tr > td:not([data-etiqueta]),
  .em-cartoes > table > tbody > tr > td:empty { justify-content: flex-start; text-align: left; }
  .em-cartoes > table > tbody > tr > td:empty { display: none; }
  .em-cartoes > table > tbody > tr > td.valor { font-variant-numeric: tabular-nums; }
  .em-cartoes > table.ficheiros > tbody > tr > td { flex-wrap: wrap; }
  .em-cartoes .sessao .etiqueta-estado { margin-left: auto; }
}

/* Listas de definição e etiquetas ------------------------------------------- */

.detalhes { margin: 0; }
.detalhes dt { font-weight: 600; color: var(--cor-texto-suave); font-size: 0.9rem; }
.detalhes dd { margin: 0 0 0.6rem; }

@media (min-width: 48rem) {
  .detalhes { display: grid; grid-template-columns: 12rem 1fr; gap: 0.15rem var(--espaco); }
  .detalhes dd { margin: 0; padding-bottom: 0.45rem; }
}

.texto-livre { white-space: pre-line; }
.vazio { color: var(--cor-texto-suave); }

.etiqueta-estado {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--cor-superficie-2);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
  vertical-align: middle;
  white-space: nowrap;
}
.estado-idea, .estado-draft {
  background: var(--cor-amarelo-fundo); border-color: var(--cor-amarelo-borda); color: var(--cor-amarelo-texto);
}
.estado-active, .estado-completed {
  background: var(--cor-sucesso-fundo); border-color: var(--cor-sucesso-borda); color: var(--cor-sucesso-texto);
}
.estado-request {
  background: var(--cor-roxo-fundo); border-color: var(--cor-roxo-borda); color: var(--cor-roxo-texto);
}
.estado-pending, .estado-in_production {
  background: var(--cor-azul-fundo); border-color: var(--cor-azul-borda); color: var(--cor-azul-texto);
}
.estado-cancelled {
  background: var(--cor-aviso-fundo); border-color: var(--cor-aviso-borda); color: var(--cor-aviso-texto);
}
h1 .etiqueta-estado { font-size: 0.85rem; margin-left: 0.35rem; }
/* Página Conta (proposta 3.3): a etiqueta «Esta sessão» por baixo do dispositivo. */
.sessao .etiqueta-estado { display: table; margin-top: 0.2rem; white-space: nowrap; }
/* O segundo fator (proposta 3.4): o código QR escuro sobre branco, também no tema escuro (os
   leitores precisam do contraste e da margem, que já vêm no SVG), e o segredo, o URI e os códigos
   de recuperação em letra de largura fixa, sem empurrar a página para o lado no telemóvel. */
.qr { margin: var(--espaco) auto; max-width: 16rem; }
.qr svg { display: block; width: 100%; height: auto; border-radius: var(--raio); }
code.segredo, code.uri, .codigos-recuperacao code, .cartao p code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}
code.segredo { font-size: 1.05rem; letter-spacing: 0.04em; }
code.uri { font-size: 0.85rem; word-break: break-all; }
.codigos-recuperacao {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.35rem 1.25rem;
  margin: var(--espaco) 0;
  padding-left: 1.75rem;
}
.codigos-recuperacao code { font-size: 1.05rem; letter-spacing: 0.04em; }

/* Encomendas ---------------------------------------------------------------- */

.formulario fieldset.linha {
  background: var(--cor-superficie-2);
  padding-bottom: 0.25rem;
}
.linha.retirada { opacity: 0.55; }
.linha .aviso { margin: 0 0 0.75rem; }
.total-linha { margin: 0 0 0.5rem; font-weight: 600; }
.formulario fieldset.linhas > button { margin-bottom: var(--espaco); }

/* Personalização e peças avulsas [D23] */
.linha .avulsa, .linha .personalizacao:not(:has([data-campos-lista]:empty)) {
  border-left: 3px solid var(--cor-borda-forte);
  padding-left: 0.75rem;
  margin-bottom: 0.75rem;
}
.formulario fieldset.campos-personalizacao > button { margin-bottom: var(--espaco); }
.formulario fieldset.campo-personalizacao { background: var(--cor-superficie-2); }
.valores-personalizacao { font-weight: 600; }

.grelha-valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0 var(--espaco);
}

.resumo {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 0.25rem var(--espaco);
  margin: 0 0 0.5rem;
}
.resumo dt { font-weight: 600; color: var(--cor-texto-suave); }
.resumo dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.mudar-estado { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.mudar-estado select { width: auto; margin: 0; }

/* Detalhe: numa coluna, os totais e pagamentos seguem as linhas e os anexos
   ficam no fim; em ecrãs muito largos passam para uma coluna lateral. */
.grelha-detalhe { display: flex; flex-direction: column; gap: var(--espaco); }
.grelha-detalhe .cartao + .cartao { margin-top: 0; }
.coluna-principal, .coluna-lateral { display: contents; }
.grelha-detalhe #linhas { order: 1; }
.grelha-detalhe #totais { order: 2; }
.grelha-detalhe #pagamentos { order: 3; }
.grelha-detalhe #anexos { order: 4; }
@media (min-width: 90rem) {
  .grelha-detalhe { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
  .coluna-principal, .coluna-lateral { display: flex; flex-direction: column; gap: var(--espaco); min-width: 0; }
  .coluna-lateral { position: sticky; top: 1.5rem; }
}
@media (min-width: 48rem) and (max-width: 89.99rem) {
  .grelha-detalhe { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .grelha-detalhe > .coluna-principal > .cartao:first-child, .grelha-detalhe #linhas,
  .grelha-detalhe #anexos { grid-column: 1 / -1; }
}

.totais { margin: 0; font-variant-numeric: tabular-nums; }
.totais > div {
  display: flex;
  justify-content: space-between;
  gap: var(--espaco);
  padding: 0.35rem 0;
}
.totais dt { color: var(--cor-texto-suave); }
.totais dd { margin: 0; text-align: right; }
.totais .total {
  margin-top: 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--cor-borda);
  font-size: 1.15rem;
  font-weight: 700;
}
.totais .total dt { color: var(--cor-texto); }
.totais .saldo dd { font-weight: 700; }
.totais .estado-pagamento {
  display: block;
  margin-top: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--raio);
  background: var(--cor-superficie-2);
}
.totais .estado-pagamento dt { font-size: 0.8rem; }
.totais .estado-pagamento dd { text-align: left; font-weight: 600; }

/* Ficheiros, envios e cópias de segurança ----------------------------------- */

.miniatura { display: block; margin-bottom: 0.25rem; }
.miniatura img {
  display: block;
  max-width: 8rem;
  max-height: 6rem;
  height: auto;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie-2);
}
table.ficheiros td:first-child { min-width: 9rem; overflow-wrap: break-word; }
.formulario.envio {
  margin-top: var(--espaco);
  padding-top: var(--espaco);
  border-top: 1px dashed var(--cor-borda-forte);
}
.envio-lista { list-style: none; padding: 0; margin: var(--espaco) 0; }
.envio-lista li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--cor-borda);
}
.envio-nome { overflow-wrap: anywhere; font-weight: 600; }
.envio-lista progress { width: 8rem; accent-color: var(--cor-marca); }
.envio-error, .envio-skipped { color: var(--cor-aviso-texto); }
.envio-imported, .envio-duplicate { color: var(--cor-sucesso-texto); }

/* Painel -------------------------------------------------------------------- */

.periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin: 0;
}
.periodo label { margin: 0; font-weight: 500; font-size: 0.9rem; color: var(--cor-texto-suave); }
.periodo-campo { display: flex; align-items: center; gap: 0.4rem; flex: 1 1 11rem; }
.periodo input[type="date"] { flex: 1; width: auto; min-width: 0; margin: 0; }
@media (min-width: 48rem) { .periodo-campo { flex: none; } .periodo input[type="date"] { width: 10rem; } }
.periodo button { min-height: 2.5rem; }

.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 var(--espaco);
}
.indicadores > div {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 0.7rem 0.85rem;
  background: var(--cor-superficie-2);
}
.indicadores dt {
  font-weight: 600;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  line-height: 1.3;
  overflow-wrap: normal;
  hyphens: auto;
}
.indicadores dd {
  margin: 0.2rem 0 0;
  font-size: 1.2rem;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.indicadores dd.dica {
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
  white-space: normal;
  margin: 0.3rem 0 0;
}
.indicadores dd a { text-decoration: none; }

.contagens { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
.contagens > div { background: var(--cor-superficie); }
.contagens dd { font-size: 1.6rem; line-height: 1.2; }

.indicadores.destaque { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.destaque > div { background: var(--cor-marca-suave); border-color: var(--cor-azul-borda); }
.destaque dd { font-size: 1.5rem; }

.secundarios dd { font-size: 1.05rem; }

.ligacoes-rodape {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  font-weight: 500;
}

@media (min-width: 90rem) {
  .painel-listas { display: grid; grid-template-columns: 3fr 2fr; gap: var(--espaco); align-items: start; }
  .painel-listas > .cartao + .cartao { margin-top: 0; }
}
.painel-listas { margin-top: var(--espaco); }

/* Galeria de projetos e visualizador 3D [D22] -------------------------------- */

.lista-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--espaco);
}
.vistas { margin: 0 0 var(--espaco); }
.vista-atual { font-weight: 700; }

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--espaco);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cartao-projeto {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra);
  color: var(--cor-texto);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.cartao-projeto:hover, .cartao-projeto:focus-visible {
  border-color: var(--cor-marca);
  box-shadow: var(--sombra-alta);
  transform: translateY(-1px);
}
.capa {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: var(--cor-superficie-2);
  border-bottom: 1px solid var(--cor-borda);
}
.capa img { width: 100%; height: 100%; object-fit: contain; }
.capa-vazia {
  padding: 0.5rem;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  text-align: center;
}
.capa-vazia strong { font-size: 1.4rem; letter-spacing: 0.05em; }
.legenda {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem 0.8rem 0.8rem;
}
.legenda .etiqueta-estado { align-self: flex-start; }
.miniatura-pendente { display: block; margin-bottom: 0.25rem; }

.visualizador {
  position: relative;
  height: min(70vh, 40rem);
  min-height: 18rem;
  background: var(--cor-superficie-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
  touch-action: none;
}
.visualizador canvas { display: block; width: 100%; height: 100%; }
.visualizador [data-visualizador-estado] {
  position: absolute;
  inset: auto 0.75rem 0.75rem;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}