:root {
  --fundo: #ffffff;
  --fundo-suave: #f2f5fa;
  --superficie: #f2f5fa;
  --texto: #25313c;
  --texto-suave: #606c73;
  --borda: #dce1ea;
  --azul: #2748d8;
  --azul-texto: #ffffff;
  --marcador: #ffe45c;
  --marcador-texto: #25313c;
  --alerta: #b3261e;
  --mesa-linha: rgba(37, 49, 60, 0.03);
  --mesa-linha-forte: rgba(37, 49, 60, 0.06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0f131b;
    --fundo-suave: #161c28;
    --superficie: #1b2230;
    --texto: #e8ecf3;
    --texto-suave: #9aa4b6;
    --borda: #2c3545;
    --azul: #8fa6ff;
    --azul-texto: #0f131b;
    --alerta: #ff9a92;
    --mesa-linha: rgba(232, 236, 243, 0.02);
    --mesa-linha-forte: rgba(232, 236, 243, 0.05);
    color-scheme: dark;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-claro { display: none; }
  :root:not([data-theme="light"]) .logo-escuro { display: block; }
}
:root[data-theme="dark"] .logo-claro { display: none; }
:root[data-theme="dark"] .logo-escuro { display: block; }
:root[data-theme="dark"] {
  --fundo: #0f131b;
  --fundo-suave: #161c28;
  --superficie: #1b2230;
  --texto: #e8ecf3;
  --texto-suave: #9aa4b6;
  --borda: #2c3545;
  --azul: #8fa6ff;
  --azul-texto: #0f131b;
  --alerta: #ff9a92;
  --mesa-linha: rgba(232, 236, 243, 0.02);
  --mesa-linha-forte: rgba(232, 236, 243, 0.05);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Mesa de impressão: grão fino da chapa e quadrícula de 20 mm com linha forte a cada 100 mm. */
  background-color: var(--fundo);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(var(--mesa-linha-forte) 1px, transparent 1px),
    linear-gradient(90deg, var(--mesa-linha-forte) 1px, transparent 1px),
    linear-gradient(var(--mesa-linha) 1px, transparent 1px),
    linear-gradient(90deg, var(--mesa-linha) 1px, transparent 1px);
  background-size: 200px 200px, 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  color: var(--texto);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.02em; }
h2 { font-size: 1.1rem; margin: 0 0 12px; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
mark { background: var(--marcador); color: var(--marcador-texto); padding: 0 2px; border-radius: 2px; }
code { background: var(--superficie); padding: 1px 5px; border-radius: 4px; }
small { display: block; color: var(--texto-suave); }

.topo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 16px 32px; border-bottom: 1px solid var(--borda); }
.marca { display: block; line-height: 0; }
.marca img { height: 40px; width: auto; }
.logo-escuro { display: none; }
.menu { display: flex; flex-wrap: wrap; gap: 4px 20px; flex: 1; }
.menu a { color: var(--texto-suave); }
.menu a[aria-current] { color: var(--azul); font-weight: 600; }
.topo-acoes { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.botao-icone { width: 36px; height: 36px; border: 1px solid var(--borda); border-radius: 50%; background: none; color: var(--texto); font-size: 1rem; cursor: pointer; }

.pagina { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 32px; }
.rodape { padding: 24px 32px; text-align: center; color: var(--texto-suave); border-top: 1px solid var(--borda); background: var(--fundo-suave); }

.rotulo { margin: 24px 0 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--azul); }
.seta { font-weight: 600; }
.aviso { padding: 10px 16px; border-radius: 12px; background: var(--fundo-suave); border-left: 4px solid var(--azul); }
.erro { color: var(--alerta); }
.vazio { padding: 40px 0; color: var(--texto-suave); }
.limitado { max-width: 680px; }
.pilha { display: flex; flex-direction: column; gap: 14px; }
.em-linha { display: flex; gap: 8px; margin-top: 10px; }
.em-linha input, .em-linha select { flex: 1; min-width: 0; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.botao { display: inline-block; padding: 9px 20px; border: 2px solid var(--azul); border-radius: 999px; background: var(--azul); color: var(--azul-texto); font: inherit; font-weight: 600; cursor: pointer; }
.botao:hover { text-decoration: none; opacity: 0.9; }
.botao:disabled { opacity: 0.5; cursor: default; }
.botao-contorno { background: none; color: var(--azul); }
.botao-pequeno { padding: 4px 14px; font-size: 0.875rem; }
.ligacao { border: 0; background: none; padding: 0; color: var(--azul); font: inherit; cursor: pointer; }
.ligacao-perigo { color: var(--alerta); }

label { display: flex; flex-direction: column; gap: 4px; font-size: 0.875rem; font-weight: 600; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 10px;
  background: var(--fundo); color: var(--texto); font: inherit; font-weight: 400;
}
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
progress { width: 100%; accent-color: var(--azul); }

.cartao { display: block; padding: 20px; border: 1px solid var(--borda); border-radius: 16px; background: var(--superficie); color: inherit; }
a.cartao:hover { text-decoration: none; outline: 2px solid var(--azul); }
.entrada { max-width: 400px; margin: 48px auto; }
.entrada .rotulo { margin-top: 0; }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 24px 0; padding: 12px; border: 1px solid var(--borda); border-radius: 16px; background: var(--fundo-suave); }
.numeros a { padding: 12px; border-radius: 10px; color: inherit; }
.numeros a:hover { background: var(--fundo); text-decoration: none; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.progresso-biblioteca { margin: -8px 0 24px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 16px; background: var(--fundo-suave); }
.progresso-biblioteca p { margin: 0 0 8px; }
.progresso-biblioteca p:last-child { margin-bottom: 0; }
.cabecalho-seccao { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 36px 0 12px; }
.cabecalho-seccao h2 { margin: 0; font-size: 1.4rem; letter-spacing: -0.01em; }
.numeros strong { display: block; font-size: 2rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.numeros span { color: var(--texto-suave); font-size: 0.875rem; }

.filtros { margin: 16px 0 24px; }
.pesquisa { display: flex; gap: 8px; }
.pesquisa input { flex: 1; min-width: 0; }
.filtros summary { margin-top: 12px; cursor: pointer; color: var(--azul); font-weight: 600; }
.filtros-grelha { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; }
.opcoes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; }
.opcao { flex-direction: row; align-items: center; gap: 6px; font-weight: 400; }

.grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; margin-bottom: 24px; }
.grelha-recentes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.destaque { display: grid; gap: 16px; margin: 24px 0; padding: 20px; border: 1px solid var(--borda); border-radius: 16px; background: var(--superficie); }
.destaque .visualizador { background: var(--fundo); }
.destaque-texto h2 { margin: 0 0 12px; overflow-wrap: anywhere; }
.destaque-texto .rotulo { margin-top: 0; }
.destaque-texto .seta { display: inline-block; margin-top: 16px; }
.janelas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.janela { margin: 0; }
.slide-botao { position: absolute; top: 50%; width: 36px; height: 36px; padding: 0; transform: translateY(-50%); border: 0; border-radius: 999px; background: var(--superficie); color: var(--texto); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.slide-anterior { left: 8px; }
.slide-seguinte { right: 8px; }
.slide-contador { position: absolute; right: 8px; bottom: 8px; padding: 1px 10px; border-radius: 999px; background: var(--superficie); color: var(--texto); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.janela figcaption { margin-top: 6px; color: var(--texto-suave); font-size: 0.8rem; text-align: center; }
.grelha-colecoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 24px; }
.grelha-colecoes .rotulo { margin-top: 0; }
.capa-colecao { display: block; width: 100%; height: auto; border-radius: 10px; }
.grelha-colecoes-painel { display: flex; align-items: stretch; overflow-x: auto; margin-top: 0; margin-bottom: 8px; padding: 2px 2px 10px; }
/* A altura da imagem é igual em todas; a largura segue o formato de cada uma. */
.grelha-colecoes-painel .cartao { flex: 0 0 auto; width: min-content; min-width: 180px; padding: 14px; }
.grelha-colecoes-painel .capa-colecao { width: auto; max-width: 320px; height: 150px; }
.cartao-modelo { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--borda); border-radius: 16px; background: var(--superficie); color: inherit; }
.cartao-modelo:hover { text-decoration: none; outline: 2px solid var(--azul); }
.a-selecionar .cartao-modelo:hover { outline-color: var(--borda); }
.a-selecionar .cartao-modelo.selecionado { outline: 3px solid var(--azul); }
.barra-selecao { position: sticky; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border: 1px solid var(--borda); border-radius: 16px; background: var(--superficie); }
.barra-selecao[hidden] { display: none; }
.barra-selecao-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; flex: 1 1 100%; }
.barra-selecao input[name="nome"] { flex: 1 1 200px; min-width: 0; }
.barra-selecao select { flex: 0 1 170px; width: auto; min-width: 0; }
.cartao-modelo strong { overflow-wrap: anywhere; font-weight: 600; line-height: 1.3; }
.miniatura { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: var(--fundo); }
.miniatura img { width: 100%; height: 100%; object-fit: contain; }
.sem-imagem { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--texto-suave); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; }
.sem-imagem svg { width: 42%; height: auto; opacity: 0.6; }
.selo { position: absolute; top: 8px; left: 8px; padding: 1px 10px; border-radius: 999px; background: var(--texto); color: var(--fundo); font-size: 0.75rem; }
.selo-favorito { left: auto; right: 8px; background: var(--marcador); color: var(--marcador-texto); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta { display: inline-block; padding: 1px 10px; border-radius: 999px; border: 1px solid var(--borda); background: var(--fundo); color: var(--texto); font: inherit; font-size: 0.8rem; }
.etiqueta-remover { cursor: pointer; }
.etiqueta-acoes { display: inline-flex; align-items: center; gap: 6px; }
.etiqueta-acoes a { color: inherit; }
.etiqueta-acoes button { padding: 0; border: 0; background: none; color: var(--texto-suave); font: inherit; cursor: pointer; }
.etiqueta-alerta { color: var(--alerta); }
.selos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.paginacao { display: flex; justify-content: center; align-items: center; gap: 20px; }

.ficha { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.ficha h2 { margin-top: 20px; }
.ficha .cartao h2 { margin-top: 0; }
.visualizador { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: var(--fundo-suave); }
.visualizador canvas { display: block; }
.previa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.estado-visualizador { position: absolute; left: 12px; bottom: 4px; margin: 0; color: var(--texto-suave); font-size: 0.875rem; }
.lista-ficheiros { list-style: none; margin: 0; padding: 0; }
.lista-ficheiros li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.lista-ficheiros li > div:first-child { min-width: 0; flex: 1 1 240px; }
.lista-ficheiros strong { overflow-wrap: anywhere; }
.caminho { overflow-wrap: anywhere; font-size: 0.75rem; }

.separadores { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0; }
.separadores a { padding: 5px 14px; border-radius: 999px; background: var(--superficie); color: var(--texto); }
.separadores a[aria-current] { background: var(--azul); color: var(--azul-texto); }
.separadores span { opacity: 0.7; font-size: 0.8rem; }
.pilha > .sugestao { margin-top: 0; }
.sugestao p { margin-top: 0; }
.duplicados { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 12px; }
.duplicado { padding: 10px; border: 2px solid var(--borda); border-radius: 12px; font-weight: 400; cursor: pointer; }
.duplicado:has(input:checked) { border-color: var(--azul); }
.duplicado input { position: absolute; opacity: 0; }
.sugestao-atual { outline: 2px solid var(--azul); }
.numero-tecla { display: inline-block; min-width: 1.5em; border-radius: 6px; background: var(--fundo); text-align: center; font-size: 0.8rem; }
.atalhos { color: var(--texto-suave); font-size: 0.875rem; }
kbd { padding: 0 6px; border: 1px solid var(--borda); border-radius: 5px; background: var(--superficie); font: inherit; font-size: 0.8rem; }
.duplicado strong { overflow-wrap: anywhere; }

/* Fora do ecrã, mas com tamanho real para o WebGL desenhar. */
.captura { position: fixed; left: -9999px; top: 0; width: 800px; height: 800px; }

@media (max-width: 860px) {
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .grelha-recentes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 600px) {
  .topo { padding: 12px 16px; }
  .pagina { padding: 20px 16px; }
  .grelha { grid-template-columns: minmax(0, 1fr); }
  .pesquisa { flex-direction: column; }
  .janelas { grid-template-columns: minmax(0, 1fr); }
}