:root {
  --bg: #0f1720;
  --card: #17212e;
  --card2: #1e2a3a;
  --line: #2b3a4d;
  --text: #e6edf5;
  --muted: #93a3b6;
  --accent: #2f81f7;
  --accent2: #1f6feb;
  --ok: #2ea043;
  --warn: #d29922;
  --danger: #f85149;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #eef2f7; --card: #fff; --card2: #f5f8fc; --line: #d9e1ec;
    --text: #14202e; --muted: #5b6b7d;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px; background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
/* --- Tela de entrada ------------------------------------------------------ */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.login-card {
  width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 30px 28px; box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.login-brand { text-align: center; margin-bottom: 22px; }
.login-brand .logo { font-size: 40px; display: block; margin-bottom: 6px; }
.login-brand h1 { font-size: 24px; }
.login-card label { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin: 14px 0 5px; }
.login-card input[type="text"], .login-card input[type="password"] {
  width: 100%; background: var(--card2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 15px;
}
.login-card input:focus { outline: none; border-color: var(--accent); }
.senha-linha { display: flex; gap: 6px; }
.senha-linha .btn { padding: 0 12px; font-size: 15px; }
.login-card .btn.primary { width: 100%; margin-top: 20px; padding: 11px; font-size: 15px; }
.login-erro {
  margin-top: 14px; padding: 9px 12px; border-radius: 8px; font-size: 13px;
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger);
}
.login-ok {
  margin-top: 14px; padding: 9px 12px; border-radius: 8px; font-size: 13px;
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok);
}
.login-rodape { margin: 20px 0 0; text-align: center; font-size: 11px; color: var(--muted); line-height: 1.6; }
.login-rodape a { color: var(--accent); }

/* Troca de senha na própria tela de login, aberta pelo link do rodapé. */
.troca-form { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.troca-form h2 { margin: 0; font-size: 15px; }
.troca-dica { margin: 12px 0 0; font-size: 11px; color: var(--muted); line-height: 1.5; }

/* Troca de senha dentro do sistema. */
.senha-modal {
  width: min(92vw, 380px); background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.senha-modal::backdrop { background: rgba(4, 8, 14, .6); }
.senha-modal h3 { margin: 0 0 2px; font-size: 16px; }
.senha-quem { margin: 0 0 6px; font-size: 12px; color: var(--muted); }
.senha-modal label { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin: 14px 0 5px; }
.senha-modal input[type="password"] {
  width: 100%; background: var(--card2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 15px;
}
.senha-modal input:focus { outline: none; border-color: var(--accent); }
.senha-dica { margin: 12px 0 0; font-size: 11px; color: var(--muted); line-height: 1.5; }
.senha-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* Quem está logado, no canto do cabeçalho. */
.sessao { display: flex; align-items: center; gap: 8px; padding-left: 14px; border-left: 1px solid var(--line); }
.sessao-nome { font-size: 13px; white-space: nowrap; }
.sessao-nome small { display: block; color: var(--muted); font-size: 11px; }

/* Clicável: leva de volta para a tela inicial. */
.brand {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 4px 8px; margin: -4px -8px; border-radius: 10px;
  transition: background .15s;
}
.brand:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brand:hover .logo { transform: scale(1.08); }
.logo { font-size: 30px; transition: transform .15s; }
h1 { margin: 0; font-size: 20px; letter-spacing: .5px; }
h1 .ver { color: var(--accent); font-weight: 600; }
.sub { margin: 0; color: var(--muted); font-size: 12px; }
.dbcount { color: var(--muted); font-size: 13px; }
.cliente-bar { display: flex; align-items: center; gap: 10px; }
.cliente-bar label { color: var(--muted); font-size: 13px; white-space: nowrap; }
#clienteFiltro {
  background: var(--card2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; font-size: 13px; max-width: 340px;
}
#clienteFiltro:not([value=""]):focus { outline: 1px solid var(--accent); }
.tabs { display: flex; gap: 4px; padding: 0 22px; background: var(--card); border-bottom: 1px solid var(--line); }
.tab {
  background: none; border: none; color: var(--muted); padding: 12px 16px;
  cursor: pointer; font-size: 14px; border-bottom: 2px solid transparent;
}
.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
/* As três abas têm a MESMA largura: a do Banco, que é a mais larga por causa da
   tabela de aves. Antes só o Banco esticava e as outras duas ficavam presas em
   1250px, o que fazia a página "pular" de largura ao trocar de aba. */
.view { max-width: min(1560px, 96vw); margin: 22px auto; padding: 0 18px; display: grid; gap: 18px; }
.view.hidden { display: none; }
main { max-width: min(1560px, 96vw); margin: 22px auto; padding: 0 18px; display: grid; gap: 18px; }

.type-picker { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.type-btn {
  background: var(--card2); border: 1px solid var(--line); color: var(--text);
  padding: 9px 14px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.type-btn.active { background: var(--accent2); border-color: var(--accent2); color: #fff; font-weight: 600; }
.pickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 16px; }
.picker { position: relative; }
.picker label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; font-weight: 600; }
.picker input {
  width: 100%; background: var(--card2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font-size: 14px;
}
.picker .results {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 3px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  max-height: 240px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.picker .results div { padding: 8px 10px; cursor: pointer; font-size: 13px; }
.picker .results div:hover { background: var(--card2); }
.picker .results small { color: var(--muted); }
.picker.chosen input { border-color: var(--ok); }
/* Célula que copia a ficha do pássaro ao ser clicada (aba Banco). */
.copiavel { cursor: copy; }
.copiavel:hover { text-decoration: underline dotted; }

/* Caixa da lista colada (Similaridade todos contra todos). */
.lista-box { margin: 0 0 14px; }
.lista-box label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; font-weight: 600; }
.lista-box textarea {
  width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 13px;
  padding: 8px 10px; border-radius: 8px; background: var(--card2);
  border: 1px solid var(--line); color: var(--text);
}
.lista-foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; }
.lista-foot .muted { flex: 1; }

/* Reconstruir CIG (genética reversa). */
.recon-box { margin: 0 0 14px; }
.recon-box label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; font-weight: 600; }
.recon-linha { display: flex; gap: 8px; flex-wrap: wrap; }
.recon-linha input {
  flex: 1; min-width: 240px; font: inherit; font-size: 14px; padding: 8px 10px;
  border-radius: 8px; background: var(--card2); border: 1px solid var(--line); color: var(--text);
}
.recon-linha select {
  background: var(--card2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font-size: 14px;
}
.recon-sug { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 6px; }
.recon-chip {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  color: var(--text); border-radius: 999px; padding: 4px 11px; font-size: 12px; cursor: pointer;
}
.recon-chip:hover { border-color: var(--accent); }
.recon-chip small { color: var(--muted); margin-left: 5px; font-family: var(--mono); }
/* Família declarada do ausente (pais e irmãos inteiros): reaproveita a caixa dos
   lados da Compatibilidade, com a lista de irmãos em fichinhas removíveis. */
.recon-familia {
  margin: 10px 0 4px; padding: 10px; border: 1px dashed var(--line); border-radius: 10px;
  background: color-mix(in srgb, var(--card2) 60%, transparent);
}
.recon-familia > label { display: block; font-size: 13px; margin-bottom: 8px; }
.recon-fam-lados { display: flex; gap: 10px; flex-wrap: wrap; }
.recon-fam-irmaos { margin-top: 10px; }
.recon-fam-irmaos .sub-rot { display: block; font-size: 13px; margin-bottom: 6px; }
.recon-irmaos-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; font-size: 13px; }
.recon-chip.fixo { cursor: default; display: inline-flex; align-items: center; gap: 6px; }
.recon-chip .irmao-x {
  background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 2px;
}
.recon-chip .irmao-x:hover { color: var(--danger, #e5484d); }
.recon-cig {
  margin-top: 12px; padding: 9px 12px; background: var(--card2);
  border: 1px solid var(--line); border-radius: 8px; overflow-x: auto;
}
.recon-cig code { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
/* Os números não quebram; a observação fica com a folga restante. */
.recon-loci td:not(.nota), .recon-loci th:not(:last-child) { white-space: nowrap; }
.recon-loci td.nota { min-width: 240px; white-space: normal; line-height: 1.35; }
/* A linha do loco ganha a cor da confiança da dedução. */
tr.conf-alta td { background: color-mix(in srgb, var(--ok) 9%, transparent); }
tr.conf-baixa td { background: color-mix(in srgb, var(--warn) 8%, transparent); }
tr.conf-conflito td { background: color-mix(in srgb, var(--danger) 11%, transparent); }
tr.conf-sem-dado td { opacity: .55; }
/* Subtrair genitor: escolha de qual metade tirar. */
.sub-lados { display: flex; gap: 10px; flex-wrap: wrap; }
.sub-lado {
  display: flex; flex-direction: column; gap: 8px; flex: 1 1 260px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card2);
}
.sub-lado .sub-marca { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.sub-lado.on { border-color: var(--accent); }
/* Lado não subtraível fica apagado, MAS o botão de apontar a ficha à mão
   continua vivo: é justamente ele que resolve o lado sem ficha no banco. */
.sub-lado.off .sub-marca { opacity: .5; cursor: not-allowed; }
.sub-lado .sub-rot { font-size: 13px; }
.sub-lado small { margin-left: auto; text-align: right; font-size: 11px; }
/* Compatibilidade de cruzamento: painel de opções + as 4 combinações do loco. */
/* Cliente de cada lado do cruzamento (macho e fêmea podem vir de criações
   diferentes). Quando os dois divergem, a caixa ganha borda de destaque para o
   criador não rodar uma varredura cruzada sem perceber. */
.compat-clientes { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 8px; }
.compat-cli { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; }
.compat-cli label { font-size: 13px; }
.compat-cli select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card2); color: inherit; font-size: 13px; max-width: 100%;
}
.compat-clientes .btn.ghost { padding: 7px 10px; font-size: 12px; }
.compat-clientes.cruzado {
  padding: 8px; border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--ok) 55%, var(--line));
  background: color-mix(in srgb, var(--ok) 7%, transparent);
}
.compat-opts { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.compat-chk { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.compat-fixar { display: flex; gap: 10px; flex-wrap: wrap; }
.compat-lado {
  position: relative; display: flex; align-items: center; gap: 8px; flex: 1 1 300px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card2);
}
.compat-lado .sub-rot { flex: 1; font-size: 13px; }
.compat-lado .btn.ghost { padding: 4px 9px; font-size: 12px; }
.compat-lado .sub-busca { position: absolute; left: 12px; right: 12px; top: 100%; z-index: 21; }
td.mono { font-family: var(--mono); text-align: center; }
.cmb-cell { white-space: nowrap; }
.cmb {
  display: inline-block; font-family: var(--mono); font-size: 12px; margin-right: 6px;
  padding: 2px 7px; border-radius: 6px; background: var(--card2); border: 1px solid var(--line);
}
.cmb small { opacity: .7; margin-left: 3px; }
.cmb.cmb-top { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.cmb.cmb-bot { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }

.sub-manual { position: relative; }
.sub-manual .btn.sub-pick { padding: 4px 9px; font-size: 12px; }
.sub-busca { margin-top: 6px; }
.sub-busca input {
  width: 100%; background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: 13px;
}
.sub-busca .results {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 3px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  max-height: 240px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.sub-busca .results div { padding: 8px 10px; cursor: pointer; font-size: 13px; }
.sub-busca .results div:hover { background: var(--card2); }
.sub-busca .results small { color: var(--muted); }
.sub-amb { color: var(--warn); font-family: var(--mono); }
/* Linha do loco colorida pelo resultado da subtração. */
tr.sub-certo td { background: color-mix(in srgb, var(--ok) 9%, transparent); }
tr.sub-ambiguo td { background: color-mix(in srgb, var(--warn) 8%, transparent); }
tr.sub-conflito td { background: color-mix(in srgb, var(--danger) 11%, transparent); }
tr.sub-ignorado td, tr.sub-sem-dado td { opacity: .55; }
/* Candidatos a parente que se destacam do banco. */
tr.dest-forte td { background: color-mix(in srgb, var(--ok) 12%, transparent); }
tr.dest-moderado td { background: color-mix(in srgb, var(--warn) 8%, transparent); }

/* Conclusão dos AVÓS em português: a resposta antes das tabelas que a provam.
   A borda da esquerda repete o veredito (vermelho exclui, verde passa). */
.avos-laudo {
  background: var(--card2); border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: 10px; padding: 14px 16px; margin: 14px 0;
}
.avos-laudo.bad { border-left-color: var(--danger); }
.avos-laudo.ok { border-left-color: var(--ok); }
.avos-laudo.warn { border-left-color: var(--warn); }
.avos-conclusao { margin: 0 0 8px; font-size: 17px; line-height: 1.35; }
.avos-laudo p { margin: 0 0 10px; line-height: 1.55; font-size: 14px; }
.avos-laudo .table-wrap { margin: 10px 0; }
.avos-curta { max-width: 560px; }
.avos-notas { margin: 8px 0 0; padding-left: 18px; }
.avos-notas li { font-size: 13px; line-height: 1.5; color: var(--muted); margin-bottom: 6px; }
.avos-notas li b { color: var(--text); }

/* Locos fixados da Compatibilidade: uma pastilha por loco, com o par do alfa. */
.compat-locos { margin-top: 10px; }
.compat-locos-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.compat-locos-acoes .btn { padding: 4px 9px; font-size: 12px; }
.compat-locos-grade { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.loco-chip {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--card2); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 9px; font-size: 12px; user-select: none;
}
.loco-chip b { font-family: var(--mono); }
.loco-chip small { color: var(--muted); font-family: var(--mono); }
.loco-chip.on { border-color: var(--accent2); background: color-mix(in srgb, var(--accent2) 16%, var(--card2)); }
.loco-chip.off { opacity: .45; cursor: not-allowed; }
.loco-chip input { cursor: pointer; }
/* Loco fixado no detalhe do casal e a combinação que entrega o par do alfa. */
tr.cruz-fixo td { background: color-mix(in srgb, var(--accent2) 10%, transparent); }
.cmb.cmb-alvo { outline: 2px solid var(--accent2); outline-offset: 1px; }

/* Raspagem: a barra de endereço, a prévia e as pastas já baixadas. */
.raspa-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.raspa-linha input[type="url"] {
  flex: 1; min-width: 320px; background: var(--card2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font-size: 13px;
}
.raspa-linha select {
  background: var(--card2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px; font-size: 13px;
}
.raspa-barra { height: 8px; background: var(--card2); border-radius: 6px; overflow: hidden; margin: 8px 0; }
.raspa-barra i { display: block; height: 100%; background: var(--accent2); transition: width .3s; }
.raspa-pasta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; margin-top: 8px; font-size: 13px;
}
.raspa-pasta .btn { padding: 5px 10px; font-size: 12px; }
.raspa-pasta code { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.raspa-pasta .cresce { flex: 1; }

/* Seleção em massa na tabela do banco. */
.banco-sel, .banco-massa {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; margin: 10px 0; font-size: 13px;
}
.banco-sel .cresce { flex: 1; }
.banco-sel .btn, .banco-massa .btn { padding: 5px 10px; font-size: 12px; }
.banco-massa { flex-direction: column; align-items: stretch; }
.massa-campos { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.massa-campos label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.massa-campos input, .massa-campos select {
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 9px; font-size: 13px; min-width: 160px;
}
.pager-size { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pager-size select {
  background: var(--card2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 8px; font-size: 12px;
}
.banco-dup-chk {
  /* Sem o flex fixo, a barra de filtros estica o rótulo e a caixinha fica
     longe do texto "Só repetidos". */
  flex: 0 0 auto; justify-content: flex-start;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.banco-dup-chk input { margin: 0; }
tr.banco-dup td { background: color-mix(in srgb, var(--warn) 8%, transparent); }
tr.banco-dup-manter td { background: color-mix(in srgb, var(--ok) 8%, transparent); }
/* O selo ♊/★ é clicável: leva a tabela para o grupo de gêmeas daquela ficha. */
.badge-btn { cursor: pointer; font: inherit; border: 1px solid transparent; }
.badge-btn:hover { filter: brightness(1.25); border-color: currentColor; }
/* Aviso de que a tabela está recortada num grupo — com a saída ao lado. */
.banco-grupo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--warn) 12%, var(--card2));
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line));
  border-radius: 8px; padding: 8px 12px; margin: 10px 0; font-size: 13px;
}
.banco-grupo .cresce { flex: 1; }
.banco-grupo .btn { padding: 5px 10px; font-size: 12px; }

.recon-salvar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.recon-salvar .btn.primary:disabled { opacity: .45; cursor: not-allowed; }

/* Matriz de similaridade. */
.matriz th.mx-nome { text-align: left; white-space: nowrap; position: sticky; left: 0; background: var(--card); z-index: 1; }
.matriz th.mx-corner { position: sticky; left: 0; background: var(--card); z-index: 2; }
.matriz .mx-cel { text-align: center; cursor: pointer; white-space: nowrap; }
.matriz .mx-cel:hover { outline: 2px solid var(--ok); outline-offset: -2px; }
.matriz .mx-self { text-align: center; color: var(--muted); }

/* Preenchido automaticamente a partir do registro do filhote (ainda editável). */
.picker.auto input { border-style: dashed; }
.picker .auto-hint { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }

/* Quem é o pai e a mãe do pássaro escolhido, segundo o registro do banco. */
.picker-fil {
  display: flex; flex-direction: column; gap: 1px; margin-top: 6px;
  font-size: 11px; line-height: 1.5; color: var(--muted);
}
.picker-fil.carregando { opacity: .65; }
.picker-fil .fil-tit { font-weight: 600; }
.picker-fil .fil-lado b { color: var(--text); font-weight: 600; }
.picker-fil .fil-lado.vazio b { color: var(--muted); font-weight: 400; }
.picker-fil small { color: var(--muted); }
.picker-fil .fil-sem { color: var(--warn); }

/* Aba Banco */
.banco-filters { display: flex; gap: 8px; }
.banco-filters input { min-width: 300px; background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.banco-filters select { background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px; font-size: 14px; }
.banco-layout { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 14px; }
.banco-layout:has(.bird-detail:not(.hidden)) { grid-template-columns: 1fr 400px; }
.banco-table thead th[data-sort] { cursor: pointer; user-select: none; }
.banco-table thead th[data-sort]:hover { color: var(--text); }
.banco-table thead th.sorted { color: var(--accent); }
.banco-table thead th .arrow { font-size: 10px; opacity: .9; margin-left: 2px; }
.banco-table tbody tr { cursor: pointer; }
.banco-table tbody tr:hover { background: var(--card2); }
.banco-table tbody tr.sel { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.pager { display: flex; align-items: center; gap: 12px; justify-content: center; padding: 12px 0 2px; }
.bird-detail { align-self: start; position: sticky; top: 80px; display: grid; gap: 7px; min-width: 0; }
.bird-detail.hidden { display: none; }
.bird-detail .bd-sub { color: var(--muted); font-size: 11px; margin: 1px 0; }
.bd-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.bd-actions .btn { font-size: 11px; padding: 5px 9px; }

/* Painel de detalhe no estilo do certificado CIG (fundo branco, texto escuro) */
.cig {
  --cig-navy: #14235a; --cig-ink: #16202e; --cig-soft: #5b6b7d; --cig-line: #c7d0de;
  position: relative; background: #fff; color: var(--cig-ink);
  border: 1px solid var(--cig-line); border-radius: 8px; padding: 10px 12px 9px;
  font-family: Georgia, 'Times New Roman', serif;
  box-shadow: 0 4px 14px rgba(15,25,45,.1);
  min-width: 0; max-width: 100%;
}
.cig-edit {
  position: absolute; top: 7px; right: 7px; z-index: 1;
  background: #fff; color: var(--cig-navy); border: 1px solid var(--cig-line);
  border-radius: 6px; padding: 2px 7px; font: 600 10px/1 system-ui, sans-serif; cursor: pointer;
}
.cig-edit:hover { background: #f2f5fb; }
.cig-top { text-align: center; border-bottom: 2px solid var(--cig-navy); padding-bottom: 5px; margin-bottom: 8px; }
.cig-kicker { color: var(--cig-navy); font-weight: 700; font-size: 10px; letter-spacing: .3px; text-transform: uppercase; }
.cig-name { color: var(--cig-navy); margin: 1px 0 0; font-size: 17px; font-weight: 700; }
.cig-loci { overflow-x: auto; max-width: 100%; margin: 0 -4px 8px; padding: 0 4px 2px; }
.cig-loci table { border-collapse: collapse; font-family: system-ui, sans-serif; }
.cig-loci th, .cig-loci td { padding: 1px 6px; text-align: center; white-space: nowrap; font-size: 11px; }
.cig-loci th { text-align: left; font-style: italic; color: var(--cig-ink); font-weight: 700; padding-right: 5px; background: transparent; position: static; white-space: nowrap; }
.cig-loci .cig-loco td { color: var(--cig-navy); font-weight: 700; }
.cig-loci .cig-alelo td { color: var(--cig-ink); font-variant-numeric: tabular-nums; }
.cig-info { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; margin: 0; }
.cig-info > div { min-width: 0; }
.cig-info dt { color: var(--cig-navy); font-weight: 700; font-size: 11px; }
.cig-info dd { margin: 0; font-size: 12px; line-height: 1.3; word-break: break-word; }
.cig-foot { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--cig-line); font-size: 11px; color: var(--cig-soft); font-family: system-ui, sans-serif; }
.cig-foot b { color: var(--cig-ink); }

/* Modal de edição da ave (duplo clique numa linha do banco) */
.ed-box .bd-sub { color: var(--muted); font-size: 12px; margin: 14px 0 8px; }
.ed-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.ed-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.ed-field span { color: var(--muted); }
.ed-field input, .ed-field select { width: 100%; }
.ed-loci { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ed-loco { display: grid; grid-template-columns: 46px 1fr 1fr; align-items: center; gap: 4px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.ed-loco span { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.ed-loco input { width: 100%; font-family: var(--mono); text-align: center; padding: 3px 4px; }
.ed-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.ed-foot .muted { margin-right: auto; font-size: 12px; }

/* Laudo Trio/Duo — na tela (.sg-report) e no PDF (.laudo-doc) */
.sg-sub { text-align: center; font-weight: 700; font-size: 15px; margin: 4px 0 14px; }
.sg-head, .sg-loci { border-collapse: collapse; table-layout: fixed; width: 100%; margin: 8px 0; font-size: 13px; }
.sg-head th, .sg-head td, .sg-loci th, .sg-loci td { border: 1px solid var(--line); padding: 6px 8px; text-align: center; }
.sg-head td.k { text-align: right; font-weight: 700; font-size: 11px; letter-spacing: .3px; white-space: nowrap; }
.sg-head th, .sg-loci th { font-weight: 700; }
/* Nomes das aves: flutuam acima da moldura, centrados sobre a coluna de dados */
.sg-head thead th { border: 0; background: none; padding: 0 8px 5px; }
/* Coluna sob "Análise": só reserva espaço para alinhar com a tabela de loci */
.sg-head .blank { border: 0; background: none; padding: 0; }
.nome-pai { color: #2f81f7; font-weight: 700; }
.nome-mae { color: #f0524b; font-weight: 700; }
.nome-filho { font-weight: 800; }
.sg-secbar { text-align: center; font-weight: 800; letter-spacing: .5px; padding: 9px; margin-top: 14px; background: color-mix(in srgb, var(--text) 12%, transparent); border-radius: 6px; }
.sg-loci .loco { font-weight: 700; }
.sg-loci th[colspan] { border-bottom: 2px solid var(--accent); }
/* Coluna do filho: fundo cinza claro e bordas laterais grossas separando de pai/mãe */
.sg-head .fc, .sg-loci .fc { background: color-mix(in srgb, var(--text) 7%, transparent); }
.sg-head .fc-l, .sg-loci .fc-l { border-left-width: 3px; }
.sg-head .fc-r, .sg-loci .fc-r { border-right-width: 3px; }
.ana-ok, .ana-mut, .ana-exc { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 12px; }
.ana-ok { background: #2ea043; }
.ana-mut { background: #d29922; }
.ana-exc { background: #f0524b; }
.sg-simtitle { text-align: center; font-weight: 400; font-size: 20px; margin: 18px 0 10px; }
.sg-simwrap { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.sg-simbar { position: relative; flex: 1; min-width: 230px; max-width: 430px; height: 30px; border-radius: 6px; overflow: hidden; background: #e8eef5; display: flex; align-items: center; }
.sg-fill { position: absolute; left: 0; top: 0; height: 100%; }
.sg-simbar.blue .sg-fill { background: linear-gradient(90deg, #1f6feb, #a8ccfb); }
.sg-simbar.red .sg-fill { background: linear-gradient(90deg, #e5484d, #f6b7b9); }
.sg-simbar.green .sg-fill { background: linear-gradient(90deg, #2ea043, #a7e3b5); }
.sg-simbar span { position: relative; width: 100%; text-align: center; font-weight: 700; font-size: 14px; color: #10243b; }
.sg-nota { margin: 6px 6px 0; font-size: 11px; color: var(--muted); font-style: italic; }
.laudo-doc .sg-nota { color: #666; }
.sg-conclusao { margin: 18px 6px 4px; text-align: justify; line-height: 1.6; }
.sg-conclusao.bad { color: var(--danger); font-weight: 600; }
/* No PDF (fundo branco) */
.laudo-doc .sg-head th, .laudo-doc .sg-head td, .laudo-doc .sg-loci th, .laudo-doc .sg-loci td { border-color: #bbb; text-align: center; }
.laudo-doc .sg-secbar { background: #e6e6e6; color: #111; }
.laudo-doc .sg-loci th[colspan] { border-bottom: 2px solid #333; }
.laudo-doc .sg-head .fc, .laudo-doc .sg-loci .fc { background: #f0f0f0; }
.laudo-doc .sg-head .fc-l, .laudo-doc .sg-loci .fc-l { border-left-color: #333; }
.laudo-doc .sg-head .fc-r, .laudo-doc .sg-loci .fc-r { border-right-color: #333; }

/* Bloco de cabeçalho Trio/Duo (aves em colunas, filho no meio) */
.head-block { width: auto; min-width: 60%; margin-bottom: 6px; }
.head-block th, .head-block td { text-align: center; }
.head-block .hb-lbl { text-align: left; color: var(--muted); font-weight: 600; background: var(--card2); }
.head-block th.child-col, .loci-table th.child-col { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }
td.child-col { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
.loci-table td.num { text-align: center; }
.loci-table th:not(:first-child):not(:last-child) { text-align: center; }

.verdict { padding: 14px 16px; border-radius: 10px; font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.verdict.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.verdict.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.verdict.bad { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.metrics { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; font-size: 14px; }
.metrics b { font-size: 20px; display: block; }
.st-ok { color: var(--ok); font-weight: 700; }
.st-mut { color: var(--warn); font-weight: 700; }
.st-exc { color: var(--danger); font-weight: 700; }
td.num { font-family: var(--mono); }
/* Coluna "✔ Verdadeiro(s)" dos rankings de descoberta. */
.grupo td.col-check, .grupo th:last-child { text-align: center; width: 90px; }
.grupo td.col-check input { width: 16px; height: 16px; cursor: pointer; }
.grupo tr.confirmado { background: color-mix(in srgb, var(--ok) 14%, transparent); }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 18px;
}
.card h2 { margin: 0 0 14px; font-size: 16px; }
.hidden { display: none; }
.muted { color: var(--muted); font-weight: 400; font-size: 13px; }
.muted.hint { font-size: 11px; opacity: .8; }

.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 2px dashed var(--line); border-radius: 12px; padding: 34px;
  cursor: pointer; text-align: center; transition: .15s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: var(--card2); }
.dz-icon { font-size: 34px; }
.dz-hint { color: var(--muted); font-size: 12px; }
.status { margin-top: 12px; font-size: 13px; color: var(--muted); }
.status.ok { color: var(--ok); }
.status.err { color: var(--danger); }
.status.warn { color: var(--warn); }

.review-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ACORDEÃO DA TELA DE CRACHÁS. Quatro blocos longos, e quem imprime uma tiragem
   mexe num de cada vez. O corpo de cada bloco é envolvido por crachas.js — aqui
   só se diz o que fica visível e como o cabeçalho se comporta como alvo. */
.cr-bloco > .review-head { cursor: default; }
.cr-bloco .cr-titulo { cursor: pointer; user-select: none; }
.cr-bloco .cr-titulo:hover { color: var(--accent); }
.cr-toggle {
  order: -1; flex: 0 0 auto;
  border: 1px solid var(--line); background: var(--card2); color: var(--text);
  width: 30px; height: 30px; line-height: 1; border-radius: 8px; cursor: pointer;
  font-size: 15px; display: grid; place-items: center; padding: 0;
}
.cr-toggle:hover { border-color: var(--accent); color: var(--accent); }
/* O cabeçalho é uma linha flex: o botão vem antes do <h2>, e o <h2> toma o resto
   para que os botões próprios do bloco (＋ Cadastrar, ↻ Atualizar) continuem na
   ponta direita, onde sempre estiveram. */
.cr-bloco > .review-head > h2 { flex: 1 1 auto; }
.cr-bloco.recolhido > .cr-corpo { display: none; }
/* Recolhido, o bloco vira uma faixa fina: os quatro cabeçalhos passam a caber
   juntos e viram um índice da tela. A margem do <h2> some junto, senão sobra um
   vão embaixo de um bloco que não tem mais nada dentro. */
.cr-bloco.recolhido { padding-bottom: 14px; }
.cr-bloco.recolhido > .review-head > h2 { margin-bottom: 0; }
.review-actions { display: flex; gap: 8px; }
.btn {
  border: 1px solid var(--line); background: var(--card2); color: var(--text);
  padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent2); border-color: var(--accent2); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--accent); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: var(--danger); }
.btn.active { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* Filtro por alelo (aba Banco) */
.alelo-filtro { margin-top: 10px; padding: 10px 12px; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; }
.af-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.af-title { font-weight: 600; font-size: 13px; }
.af-add select { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; font-size: 14px; font-family: var(--mono); }
.af-hint { font-size: 11px; }
.af-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.af-chip { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 999px; padding: 3px 6px 3px 10px; font-size: 12px; font-family: var(--mono); }
.af-chip button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 50%; }
.af-chip button:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 18%, transparent); }
.bd-danger { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

.table-wrap { overflow-x: auto; margin-top: 14px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--muted); font-weight: 600; white-space: nowrap; position: sticky; top: 0; background: var(--card); }
tr.dup { background: color-mix(in srgb, var(--danger) 10%, transparent); }
tr.excluded td { opacity: .5; }
.col-check { width: 34px; }
td input[type=text], td select {
  width: 100%; min-width: 90px; background: var(--card2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 5px 6px; font-size: 13px;
}
td input.gerado { border-color: var(--warn); }
.alelos { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.badge { display: inline-block; padding: 2px 7px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge.ok { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); }
.badge.warn { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
.badge.danger { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger); }
.sexhint { font-size: 10px; color: var(--muted); display: block; margin-top: 2px; }

/* Laudo (overlay + impressão) */
.laudo-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 100;
  display: flex; justify-content: center; align-items: flex-start; padding: 24px; overflow-y: auto;
}
.laudo-overlay.hidden { display: none; }
/* O LAUDO É PAPEL BRANCO — na tela e no PDF.
   O app tem tema escuro, e qualquer bloco de dentro do laudo que herde uma cor
   dele (--card, --text, --muted) sai PRETO NO PRETO. Aconteceu com os blocos de
   veredito do Estudo de Caso, e vai acontecer de novo a cada bloco novo que o
   laudo ganhar. Por isso a correção é aqui, na raiz: dentro de .laudo-doc as
   variáveis do tema passam a apontar para a paleta de impressão, de uma vez. */
.laudo-doc {
  background: #fff; color: #111; width: 210mm; max-width: 100%; padding: 18mm;
  border-radius: 6px; font: 13px/1.5 system-ui, Arial, sans-serif;
  --card: #fff; --card2: #f5f7fa; --line: #ccc;
  --text: #111; --muted: #5b6570;
  --ok: #157a3a; --warn: #c98a00; --bad: #b3261e; --accent: #1f6feb; --accent2: #1f6feb;
}
.laudo-doc * { color: inherit; }
.laudo-doc .muted, .laudo-doc small { color: #5b6570; }
.laudo-doc .caso-veredito { background: #fff; }
.laudo-doc .painel-diag, .laudo-doc .laudo-diag { background: none; border: 0; padding: 0; }
.laudo-doc .regua-leitura {
  background: #f5f7fa; border-left: 3px solid #1f6feb;
  padding: 6px 10px; border-radius: 4px;
}
.laudo-doc h1 { font-size: 20px; margin: 0; }
/* Ícone do cabeçalho do laudo em SVG (ver ICONE_DNA em analysis.js). */
.laudo-doc h1 .ic-dna { vertical-align: -3px; margin-right: 5px; }
.laudo-doc .sub { color: #555; margin: 2px 0 16px; }
.laudo-doc .head { border-bottom: 3px solid #1f6feb; padding-bottom: 10px; display: flex; justify-content: space-between; align-items: flex-end; }
.laudo-doc table { border-collapse: collapse; width: 100%; margin-top: 10px; font-size: 12px; }
.laudo-doc th, .laudo-doc td { border: 1px solid #ccc; padding: 5px 7px; text-align: left; }
.laudo-doc th { background: #eef3fb; }
.laudo-doc .aves td.lbl { font-weight: 700; width: 120px; background: #f7f9fc; }
.laudo-doc .verd { font-size: 15px; font-weight: 700; margin: 16px 0 4px; }
.laudo-doc .verd.bad { color: #b3261e; }
.laudo-doc .sg-notas { margin: 6px 0 0 18px; padding-left: 6px; }
.laudo-doc .sg-notas li { margin-bottom: 5px; line-height: 1.45; }
.laudo-doc .loci td:last-child { font-weight: 700; }
/* No laudo dos avós a última coluna é texto ("Como fecharia", nome da avó), e
   não o veredito do loco: negrito ali só polui. */
.laudo-doc .avos-tab td:last-child { font-weight: 400; }
.laudo-doc .foot { margin-top: 22px; color: #777; font-size: 11px; }
.laudo-wrap { display: flex; flex-direction: column; width: 210mm; max-width: 100%; }
.laudo-bar { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-bottom: 12px; flex-wrap: wrap; }
.laudo-bar .btn.primary { background: var(--accent2); color: #fff; }
/* Checkbox "este é o pai verdadeiro" — fica na barra, fora do PDF. */
.laudo-check {
  display: flex; align-items: center; gap: 8px; margin-right: auto;
  background: var(--card2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; cursor: pointer;
}
.laudo-check.confirmado { border-color: var(--ok); color: var(--ok); }
.laudo-check input { cursor: pointer; }
/* Onde o PDF acabou de ser gravado, com o atalho para abri-lo no navegador. */
.laudo-salvo {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text);
  background: color-mix(in srgb, var(--ok) 12%, var(--card2));
  border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--line));
  border-radius: 8px; padding: 6px 10px;
}
.laudo-salvo code { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* --- Aba "Laudos salvos" -------------------------------------------------- */
.laudos-onde {
  margin: 10px 0 4px; font-size: 12px; color: var(--muted);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.laudos-onde code {
  font-family: var(--mono); font-size: 11px; color: var(--text);
  background: var(--card2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px;
  overflow-wrap: anywhere;
}
.laudos-layout { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 10px; }
.laudos-layout:has(.laudo-visor:not(.hidden)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.laudos-table tbody tr { cursor: pointer; }
.laudos-table tbody tr:hover td { background: var(--card2); }
.laudos-table tr.aberto td { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.laudo-nome { font-weight: 600; overflow-wrap: anywhere; }
.laudo-acoes { display: flex; gap: 4px; white-space: nowrap; }
.laudo-acoes .btn { font-size: 11px; padding: 4px 8px; line-height: 1.4; text-decoration: none; }
.laudo-acoes .btn.perigo { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.laudo-acoes .btn.perigo:hover, .laudo-acoes .btn.armado { background: color-mix(in srgb, var(--danger) 16%, transparent); }
.laudo-acoes .btn.armado { color: var(--danger); border-color: var(--danger); font-weight: 600; }

/* O leitor de PDF do próprio navegador, embutido na tela. */
.laudo-visor {
  align-self: start; position: sticky; top: 80px; display: flex; flex-direction: column;
  gap: 8px; min-width: 0; background: var(--card2); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px;
}
.laudo-visor.hidden { display: none; }
.visor-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.visor-head b { overflow-wrap: anywhere; }
.visor-head small { display: block; font-size: 11px; overflow-wrap: anywhere; }
.visor-acoes { display: flex; gap: 5px; white-space: nowrap; }
.visor-acoes .btn { font-size: 11px; padding: 4px 9px; text-decoration: none; }
.visor-pdf { width: 100%; height: 72vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
@media (max-width: 900px) {
  .laudos-layout:has(.laudo-visor:not(.hidden)) { grid-template-columns: 1fr; }
  .laudo-visor { position: static; }
  .visor-pdf { height: 60vh; }
}
@media print {
  body > *:not(.laudo-overlay) { display: none !important; }
  .laudo-overlay { position: static; background: #fff; padding: 0; display: block; }
  .laudo-wrap { width: auto; display: block; }
  .laudo-doc { box-shadow: none; width: auto; padding: 0; border-radius: 0; }
  .laudo-bar { display: none !important; }
  .laudo-doc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--card2); border: 1px solid var(--line); color: var(--text);
  padding: 12px 18px; border-radius: 10px; opacity: 0; pointer-events: none; transition: .25s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Overlay "buscar pais" na Revisão */
.pp-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 120;
  display: flex; justify-content: center; align-items: flex-start; padding: 40px 16px; overflow-y: auto;
}
.pp-overlay.hidden { display: none; }
.pp-box {
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; width: 780px; max-width: 100%; padding: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.pp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pp-box table { border-collapse: collapse; width: 100%; font-size: 13px; }
.pp-box th, .pp-box td { border-bottom: 1px solid var(--line); padding: 7px 9px; text-align: left; }
.pp-box td.num, .pp-box th:nth-child(n+4) { text-align: center; }
.pp-box small { color: var(--muted); }
.pp-row { cursor: pointer; }
.pp-row:hover { background: var(--card2); }
.find-parents { font-size: 11px; padding: 3px 8px; margin-top: 4px; }

/* ===========================================================================
   ÁRVORE GENEALÓGICA (aba Análises)
   Árvore da esquerda p/ a direita: a ave-base à esquerda e 4 gerações de
   ancestrais expandindo à direita. MACHO = bloco preto (texto branco),
   FÊMEA = bloco branco (texto preto). Conectores em cotovelo ligam cada
   genitor aos seus pai/mãe. Abaixo de cada bloco, a similaridade com a base.
   O painel tem fundo claro fixo para os blocos preto/branco lerem bem nos
   dois temas. Layout binário balanceado (todas as folhas na mesma geração),
   o que garante os conectores alinhados a 25%/75% em cada nível.
   =========================================================================== */
.ped-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin-bottom: 12px; font-size: 13px;
}
.ped-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ped-chip { width: 16px; height: 16px; border-radius: 4px; border: 2px solid #000; display: inline-block; }
.ped-chip.macho { background: #1a1a1a; }
.ped-chip.femea { background: #fff; }

/* --- Árvore em SVG (D3) ---------------------------------------------------
   O palco tem fundo claro fixo, como o laudo impresso: os blocos são
   preto/branco por convenção do criador e precisam ler bem nos dois temas.
   ------------------------------------------------------------------------ */
.ped-d3-barra {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: 12px;
}
.ped-d3-barra .muted { flex: 1; min-width: 240px; }
.ped-d3-botoes { display: inline-flex; gap: 6px; }
.ped-d3-botoes .btn { padding: 4px 10px; font-size: 12px; }

.ped-d3-palco {
  height: min(74vh, 760px);
  background: #eef1f6; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; margin-bottom: 12px;
}
.ped-d3-svg { display: block; cursor: grab; touch-action: none; }
.ped-d3-svg:active { cursor: grabbing; }

.ped-d3-linha { fill: none; stroke: #111; stroke-width: 2; }

.ped-d3-no { cursor: default; outline: none; }
.ped-d3-no.tem-acima { cursor: pointer; }
.ped-d3-caixa {
  fill: #fff; stroke: #000; stroke-width: 2;
  transition: filter .12s ease;
}
.ped-d3-no.macho .ped-d3-caixa { fill: #1a1a1a; }
.ped-d3-no.femea .ped-d3-caixa { fill: #fff; }
.ped-d3-no.base .ped-d3-caixa { fill: #fff; stroke: #2563eb; stroke-width: 3; }
.ped-d3-no.vazio .ped-d3-caixa { fill: #d8dde6; stroke: #9aa3b0; stroke-dasharray: 5 4; }
.ped-d3-no.fora .ped-d3-caixa,
.ped-d3-no.sem-alelos .ped-d3-caixa { stroke-dasharray: 5 4; }
/* A ave cadastrada SEM CIG: traço cheio (ela ESTÁ cadastrada) e contorno âmbar,
   que é o mesmo aviso usado no resto do sistema para "sem material genético". */
.ped-d3-no.sem-cig .ped-d3-caixa { stroke: #b7791f; stroke-width: 2.5; stroke-dasharray: none; }
.ped-d3-no.tem-acima:hover .ped-d3-caixa,
.ped-d3-no.tem-acima:focus-visible .ped-d3-caixa { filter: drop-shadow(0 0 5px rgba(37, 99, 235, .85)); }

.ped-d3-nome {
  font-size: 12.5px; font-weight: 700; letter-spacing: .2px;
  text-anchor: middle; fill: #111; pointer-events: none; user-select: none;
}
.ped-d3-no.macho .ped-d3-nome { fill: #fff; }
.ped-d3-no.vazio .ped-d3-nome { fill: #6b7480; font-weight: 400; }

.ped-d3-sim {
  font-size: 10.5px; font-weight: 700; text-anchor: middle;
  fill: #0a7d2c; pointer-events: none; user-select: none;
}
.ped-d3-no.fora .ped-d3-sim,
.ped-d3-no.sem-alelos .ped-d3-sim { fill: #6b7480; font-weight: 500; font-style: italic; }
.ped-d3-no.sem-cig .ped-d3-sim { fill: #b7791f; font-weight: 600; font-style: normal; }

/* O "+3" na borda: quantos ancestrais estão escondidos naquele ramo fechado. */
.ped-d3-mais {
  font-size: 11px; font-weight: 700; text-anchor: start;
  fill: #2563eb; pointer-events: none; user-select: none;
}

/* --- Mapa mental genético 3D ---------------------------------------------- */
/* Caixa de opções do mapa (ancestral, cliente, tamanho). */
.mapa-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 10px 0; }
.mapa-op label { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 5px; }
.mapa-op select {
  width: 100%; background: var(--card2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px;
}

/* Palco do mapa: o canvas ocupa a largura toda e a altura da viewport menos o
   cabeçalho, para o grafo ter espaço de verdade. O fundo escuro é fixo (mesmo
   no tema claro): filamento e nó luminoso só se leem sobre fundo escuro. */
.mapa-wrap {
  position: relative; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #142033 0%, #0b111b 60%, #070b12 100%);
  height: min(72vh, 760px); touch-action: none;
}
#mapaCanvas { display: block; width: 100%; height: 100%; cursor: grab; }
#mapaCanvas.arrastando { cursor: grabbing; }

.mapa-legenda {
  position: absolute; left: 12px; top: 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(10, 16, 26, .72); border: 1px solid rgba(255, 255, 255, .1);
  color: #dfe8f3; font-size: 11.5px; line-height: 1.5; max-width: 250px; pointer-events: none;
}
.mapa-legenda b { color: #fff; }
.mapa-escala { height: 8px; border-radius: 4px; margin: 6px 0 4px;
  background: linear-gradient(90deg, hsl(212 80% 55%), hsl(150 75% 48%), hsl(48 95% 55%), hsl(8 90% 58%)); }
.mapa-escala-rot { display: flex; justify-content: space-between; color: #9fb0c4; }

.mapa-tip {
  position: absolute; pointer-events: none; z-index: 5; padding: 6px 9px; border-radius: 8px;
  background: rgba(8, 13, 21, .93); border: 1px solid rgba(255, 255, 255, .14);
  color: #eaf1f9; font-size: 12px; white-space: nowrap; transform: translate(-50%, -160%);
}
/* Cada dado numa linha: senão o nome e a anilha saem grudados. */
.mapa-tip small { display: block; color: #93a3b6; }

/* Ficha da ave clicada, flutuando no canto do palco. */
.mapa-info {
  position: absolute; right: 12px; top: 12px; width: 268px; max-height: calc(100% - 24px);
  overflow-y: auto; padding: 12px 14px; border-radius: 10px; color: #e6edf5;
  background: rgba(12, 19, 30, .93); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45); font-size: 12.5px;
}
.mapa-info h4 { margin: 0 6px 8px 0; font-size: 14px; }
.mapa-info .mi-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.mapa-info dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 8px 0 10px; }
.mapa-info dt { color: #93a3b6; }
.mapa-info dd { margin: 0; text-align: right; }
.mapa-info .mi-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.mapa-info .btn { font-size: 11.5px; padding: 5px 8px; }

.mapa-ajuda {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  color: #7f90a5; font-size: 11px; pointer-events: none; white-space: nowrap;
}
.mapa-resumo { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.mapa-resumo table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.mapa-resumo th, .mapa-resumo td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.mapa-resumo td.num, .mapa-resumo th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mapa-barra { display: inline-block; height: 7px; border-radius: 4px; background: var(--accent); vertical-align: middle; }

/* Densidade de sangue no plantel do criador (dentro da caixa de opções). */
.mapa-dens { margin: 12px 0 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.mapa-dens-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mapa-dens table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mapa-dens th, .mapa-dens td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.mapa-dens th.num, .mapa-dens td.num { text-align: right; font-variant-numeric: tabular-nums; }
.mapa-dens tbody tr { cursor: pointer; }
.mapa-dens tbody tr:hover { background: var(--card2); }
.mapa-dens .dens-barra { display: inline-block; height: 7px; border-radius: 4px; background: var(--accent); vertical-align: middle; }

/* Controles de zoom, sobre o palco. */
.mapa-zoom {
  position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 4px;
  padding: 4px 6px; border-radius: 10px; background: rgba(10, 16, 26, .78);
  border: 1px solid rgba(255, 255, 255, .12); color: #dfe8f3; font-size: 11.5px;
}
.mapa-zoom button {
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 14px; line-height: 1;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #eaf1f9;
}
.mapa-zoom button:hover { background: rgba(255, 255, 255, .18); }
.mapa-zoom span { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }

/* Faixa de "estou filtrando a linhagem de fulano". */
.mapa-filtro {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px;
  background: rgba(47, 129, 247, .18); border: 1px solid rgba(47, 129, 247, .5);
  color: #dfe8f3; font-size: 12px; white-space: nowrap;
}
.mapa-filtro button {
  background: none; border: none; color: #dfe8f3; cursor: pointer; font-size: 13px; padding: 0 2px;
}
.mapa-filtro.hidden { display: none; }

/* --- Análise Diferenciada -------------------------------------------------- */
.painel-ajuda { margin: 2px 0 8px; font-size: 12px; }
.painel-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; align-items: center; }
.painel-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 6px 4px 12px; font-size: 12px;
}
.painel-chip small { color: var(--muted); }
.painel-chip button {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 2px 5px; border-radius: 999px;
}
.painel-chip button:hover { color: var(--text); background: var(--line); }
.painel-limpar { padding: 4px 10px; font-size: 12px; }
.painel-colar { margin: 6px 0; font-size: 12px; color: var(--muted); }
.painel-colar summary { cursor: pointer; }
.painel-colar textarea {
  width: 100%; margin-top: 6px; background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px; font-size: 13px;
}
.painel-opts { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 12px; color: var(--muted); }
.painel-opts select {
  background: var(--card2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 8px; margin-left: 4px;
}
/* O diagnóstico é o produto da tela: respira mais que o resto. */
.painel-diag {
  background: var(--card2); border: 1px solid var(--line); border-left: 3px solid var(--ok);
  border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; line-height: 1.55;
}
.painel-diag p { margin: 0 0 10px; }
.painel-diag p:last-child { margin-bottom: 0; }
#resultBody h3 { margin: 22px 0 8px; font-size: 15px; }

/* Busca do painel: a lista abre EMBAIXO do campo, larga, com todos os homônimos. */
.painel-busca { position: relative; }
.painel-busca input {
  width: 100%; background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font-size: 14px;
}
#painelResultados {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 340px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.painel-res-topo, .painel-res-vazio {
  padding: 7px 11px; font-size: 11px; color: var(--muted);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card);
}
.painel-res {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 11px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--card2);
}
.painel-res:hover { background: var(--card2); }
.painel-res small { color: var(--muted); font-size: 11px; }
.painel-res-tag { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.painel-res.ja { opacity: .55; }

/* Árvore: por que este quadro está sem porcentagem. */
.ped-sim-sem { color: var(--muted); font-style: italic; font-weight: 400; }

/* --- Estudo de Caso -------------------------------------------------------- */
.caso-secao { margin: 12px 0; }
.caso-secao .sub-rot { display: block; margin-bottom: 6px; }
.caso-linha {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  background: var(--card2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 8px;
}
.caso-n {
  width: 22px; height: 22px; border-radius: 50%; background: var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex: 0 0 auto;
}
.caso-par { flex: 1; min-width: 190px; }
.caso-par label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.caso-x { color: var(--muted); font-weight: 700; padding-bottom: 8px; }
.caso-tirar { padding: 4px 9px; font-size: 12px; }
.caso-campo input {
  width: 100%; background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: 13px;
}
.caso-campo .results, #casoResultados {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 300px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
#casoAusente {
  width: 100%; background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font-size: 14px;
}
/* O bloco que avisa incompatibilidade: é o que muda um laudo. */
.caso-alerta {
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border-left: 3px solid var(--warn); border-radius: 6px; padding: 8px 12px;
}

/* --- Laudo do Estudo de Caso ---------------------------------------------- */
.caso-metodo {
  background: var(--card2); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 14px; font-size: 13px;
}
.caso-metodo summary { cursor: pointer; font-weight: 600; }
.caso-metodo ol { margin: 10px 0 0; padding-left: 20px; line-height: 1.55; }
.caso-metodo li { margin-bottom: 8px; }
.caso-laudo h4 {
  margin: 18px 0 6px; font-size: 14px;
  border-bottom: 1px solid var(--line); padding-bottom: 5px;
}
.caso-laudo h4:first-child { margin-top: 0; }
.caso-faixas, .caso-sugestoes { margin: 6px 0 10px; padding-left: 20px; line-height: 1.6; }
.caso-faixas li, .caso-sugestoes li { margin-bottom: 5px; }

/* Veredito de cada candidato: a cor diz o sentido antes de a pessoa ler. */
.caso-veredito {
  border: 1px solid var(--line); border-left-width: 3px;
  border-radius: 8px; padding: 10px 14px; margin: 10px 0;
  background: var(--card);
}
.caso-veredito.ok { border-left-color: var(--ok); }
.caso-veredito.contra { border-left-color: var(--bad, #e05252); }
.caso-veredito.neutro { border-left-color: var(--muted); }
.caso-veredito h5 { margin: 0 0 6px; font-size: 14px; }
.caso-veredito h5 small { font-weight: 400; color: var(--muted); margin-left: 8px; }
.caso-veredito p { margin: 0 0 8px; line-height: 1.55; }

/* A RÉGUA: onde o índice caiu entre as duas nuvens. */
.regua { margin: 12px 0 4px; }
.regua-legenda {
  display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 11.5px;
  color: var(--muted); margin-bottom: 8px;
}
.regua-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.regua-legenda b { color: var(--text); }
.regua-chip { width: 14px; height: 10px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.regua-chip.estranho { background: #6b7480; }
.regua-chip.parente { background: #157a3a; }
.regua-chip.corte { background: none; border-left: 2px dashed #c98a00; width: 2px; height: 12px; border-radius: 0; }
.regua-topo { position: relative; height: 17px; }
.regua-valor {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
  font-size: 11.5px; color: var(--accent);
}
.regua-linha {
  position: relative; height: 38px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 6px;
}
.regua-faixa { position: absolute; height: 13px; border-radius: 3px; top: 5px; }
.regua-faixa.estranho { background: #6b7480; }
.regua-faixa.parente { background: #157a3a; top: 20px; }
.regua-corte { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed #c98a00; }
.regua-marca { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 2px solid var(--accent); }
.regua-pes { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 2px; }
.regua-leitura { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; }

/* --- Rastreio de alelos ---------------------------------------------------- */
/* O selo SUPOSTO precisa saltar: ele marca a conclusão que cai junto com a
   premissa, e confundi-la com fato provado seria o erro mais caro desta tela. */
.rast-sup {
  display: inline-block; background: color-mix(in srgb, var(--warn) 22%, transparent);
  color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  border-radius: 4px; padding: 0 5px; font-size: 10px; font-weight: 700;
  letter-spacing: .3px; white-space: nowrap;
}
.laudo-doc .rast-sup { background: #fdf6e3; color: #8a6100; border-color: #d9b360; }
#rastPremissas .caso-par input {
  width: 100%; background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: 13px;
}

/* Ave que entrou no painel sem ficha: será reconstruída pela prole. */
.painel-chip.sem-ficha { border-style: dashed; border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
.painel-sem-ficha { margin-left: 8px; padding: 3px 9px; font-size: 11px; }

/* --- Aba Crachás ----------------------------------------------------------- */
.cr-intro { margin: 0 0 14px; font-size: 13px; line-height: 1.6; }
.cr-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.cr-lado .sub-rot { display: block; margin: 14px 0 6px; }
.cr-lado .sub-rot:first-child { margin-top: 0; }
.cr-linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cr-linha select, #crCriadouro {
  flex: 1; min-width: 160px; background: var(--card2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px;
}
.cr-form {
  background: var(--card2); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px; margin-top: 8px; display: flex; flex-direction: column; gap: 8px;
}
.cr-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.cr-form input[type=text] {
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 9px; font-size: 13px;
}
.cr-cores { display: flex; gap: 14px; }
.cr-cores label { flex-direction: row; align-items: center; gap: 6px; }
.cr-cores input[type=color] { width: 42px; height: 28px; border: 1px solid var(--line); border-radius: 6px; background: none; }

/* Os modelos: o criador escolhe pelo desenho, não pelo nome. */
/* A LISTA DE MODELOS EM DUAS COLUNAS no desktop. São sete de fábrica mais os do
   criador, e numa coluna só ela empurrava a escolha dos pássaros para bem
   abaixo da dobra — quem monta uma tiragem escolhe modelo e pássaros na mesma
   ida. Em tela estreita volta a ser uma coluna: dois cartões de 130px não
   caberiam o nome do modelo, quanto mais a descrição. */
.cr-modelos { display: grid; grid-template-columns: 1fr; gap: 8px; align-content: start; }
@media (min-width: 1000px) {
  .cr-modelos { grid-template-columns: 1fr 1fr; }
}
.cr-modelo {
  display: block; cursor: pointer; border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; background: var(--card2); font-size: 13px;
}
.cr-modelo.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.cr-modelo input { margin-right: 6px; }
.cr-modelo small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 3px; line-height: 1.45; }

.cr-opts { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--muted); }
.cr-opts select {
  background: var(--card2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 8px; margin-left: 6px;
}
.cr-acoes { margin-top: 12px; }
/* Quantas folhas vão sair, dito antes de imprimir — cada folha é PVC gasto. */
.cr-conta {
  display: inline-block; background: var(--card2); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 11px; font-size: 11.5px; color: var(--muted);
}

.cr-abas { display: flex; gap: 6px; margin: 10px 0 8px; }
.cr-aba { padding: 5px 12px; font-size: 12px; }
.cr-aba.sel { border-color: var(--accent); color: var(--accent); }
.cr-form .cr-cores label { flex: 1; flex-direction: column; align-items: stretch; }

.cr-mod-pe { color: var(--accent); font-weight: 600; margin-top: 2px; }

.cr-logo-box { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.cr-logo-lbl { font-size: 12px; color: var(--muted); }
.cr-logo-lbl input[type=file] { margin-top: 5px; font-size: 12px; color: var(--text); }
.cr-logo-dica { font-size: 11.5px; margin: 6px 0 0; line-height: 1.45; }
.cr-logo-previa { margin-top: 10px; }
/* Fundo xadrez: mostra o que no logo é transparente, que é o que decide se ele
   vai funcionar sobre o crachá escuro. */
.cr-logo-arte {
  height: 90px; border: 1px solid var(--line); border-radius: 8px; padding: 8px;
  display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(#e9edf3 0% 25%, #fff 0% 50%) 50% / 14px 14px;
}
.cr-logo-arte svg { max-height: 100%; max-width: 100%; height: auto; width: auto; }
.cr-logo-ctrl { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.cr-logo-ctrl .muted { flex: 1; font-size: 11px; min-width: 140px; }
.cr-logo-ctrl .btn { padding: 4px 10px; font-size: 12px; }

/* --- Editor de modelo de crachá -------------------------------------------- */
.cr-editar-linha { margin-top: 10px; }
.cr-meu {
  display: inline-block; background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent); border-radius: 4px; padding: 0 6px; font-size: 10px; font-weight: 700;
}
/* O EDITOR OCUPA A JANELA INTEIRA.
   Era uma caixa de 1080px, e dava para o crachá: 85 × 54 mm cabem em qualquer
   lugar. Não dá para a folha A4 — 297mm de largura com uma árvore de seis
   gerações, onde o que se confere é se o nome coube em cada uma das 126 caixas.
   Numa caixa de 1080px a folha chegava reduzida a menos de metade, e conferir
   ali era adivinhar. */
.cr-editor {
  /* `inset: 0` e `margin: 0` juntos com as medidas: um <dialog> nasce com
     `margin: auto`, e 100vw mais margem automática empurraria a caixa para fora
     da janela — apareceria barra de rolagem num modal que deveria ser a tela. */
  inset: 0; margin: 0;
  width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
  padding: 0; border: 0; border-radius: 0;
  background: var(--card); color: var(--text); overflow: hidden;
}
/* O modal é uma COLUNA que não passa de 92vh: cabeçalho fixo em cima e o corpo
   ocupando o resto. Antes o corpo era um grid com `max-height` calculada na
   mão, e item de grid nasce com `min-height: auto` — a coluna dos controles
   crescia com o conteúdo, passava da altura do modal e o `overflow: hidden`
   daqui cortava o excesso. O resultado: metade dos ajustes existia, desenhava,
   e era inalcançável a não ser diminuindo o zoom do navegador. */
.cr-editor[open] { display: flex; flex-direction: column; }
.cr-editor::backdrop { background: rgba(0, 0, 0, .6); }
.cr-ed-topo {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); background: var(--card2);
  flex: 0 0 auto;
}
.cr-ed-topo .muted { flex: 1; font-size: 12px; }
.cr-ed-corpo {
  display: grid; grid-template-columns: 1fr 360px;
  /* `flex: 1` com `min-height: 0` é o par que faz o corpo caber no que sobrou
     do modal em vez de empurrar para fora. Sem o `min-height: 0` o item de
     flex também se recusa a encolher abaixo do conteúdo. */
  flex: 1; min-height: 0;
}
/* E o mesmo para as duas colunas: sem isso a linha do grid tem a altura do
   conteúdo e o `overflow: auto` de dentro nunca chega a ter o que rolar. */
.cr-ed-palco, .cr-ed-ctrl { min-height: 0; }
/* SÓ A PEÇA: a coluna dos ajustes sai e o palco fica com a janela inteira. Para
   a árvore do A4 é a diferença entre conferir e adivinhar. */
.cr-editor.so-palco .cr-ed-corpo { grid-template-columns: 1fr; }
.cr-editor.so-palco .cr-ed-ctrl { display: none; }
@media (max-width: 860px) {
  .cr-ed-corpo { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow: auto; }
  .cr-ed-ctrl { border-left: 0; border-top: 1px solid var(--line); }
}

/* O palco: fundo neutro, para a cor do cartão não ser julgada contra o tema. */
.cr-ed-palco {
  padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  justify-content: flex-start;
  background: repeating-conic-gradient(#dfe3ea 0% 25%, #f2f4f8 0% 50%) 50% / 20px 20px;
  overflow: auto;
}
.cr-ed-lados { display: flex; gap: 6px; align-items: center; align-self: flex-start; }
.cr-ed-lado { padding: 4px 12px; font-size: 12px; }
.cr-ed-lado.sel { border-color: var(--accent); color: var(--accent); }
.cr-ed-lados .compat-chk { margin-left: 8px; font-size: 12px; color: #444; }
/* O cartão vai num iframe: o CSS da página não entra nele, e o dele não vaza —
   o que sai na chapa não pode depender do tema do sistema. */
/* A lupa: o quadro tem o tamanho real do cartão e é o `scale` que amplia. */
.cr-ed-lupa { overflow: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); border-radius: 4px; }
.cr-ed-cartao iframe { border: 0; display: block; }
.cr-ed-nota { font-size: 11.5px; color: #444; text-align: center; max-width: 380px; margin: 0; }
.cr-ed-ave { align-self: stretch; }
.cr-ed-ave label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: #444; }
.cr-ed-ave input {
  background: #fff; color: #111; border: 1px solid #c9cfd8; border-radius: 8px;
  padding: 6px 9px; font-size: 13px;
}

.cr-ed-ctrl {
  padding: 14px 16px 20px; overflow-y: auto; border-left: 1px solid var(--line);
  /* A sombra no topo e no pé avisa que há mais coisa fora da vista — sem ela o
     criador não sabia que existiam controles abaixo do que a tela mostrava. */
  background:
    linear-gradient(var(--card) 30%, transparent) top / 100% 24px no-repeat,
    linear-gradient(transparent, var(--card) 70%) bottom / 100% 24px no-repeat,
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.25), transparent) top / 100% 10px no-repeat,
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.25), transparent) bottom / 100% 10px no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.cr-ed-ctrl .sub-rot { display: block; margin: 14px 0 6px; }
.cr-ed-ctrl .sub-rot:first-child { margin-top: 0; }
.cr-ed-campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.cr-ed-campo select {
  background: var(--card2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 9px; font-size: 13px;
}
.cr-ed-dica { font-size: 11px; margin: 0 0 6px; }
.cr-ed-sliders { display: flex; flex-direction: column; gap: 6px; }
.cr-ed-slider { display: grid; grid-template-columns: 1fr 110px 52px; align-items: center; gap: 8px; font-size: 11.5px; }
.cr-ed-slider span { color: var(--muted); }
.cr-ed-slider b { text-align: right; font-size: 11px; color: var(--accent); }
.cr-ed-slider input[type=range] { width: 100%; accent-color: var(--accent); }
.cr-ed-acoes { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.cr-ed-acoes .btn { width: 100%; }

.cr-ed-logocor { display: grid; grid-template-columns: auto 46px; align-items: center; gap: 8px; }
.cr-ed-logocor small { grid-column: 1 / -1; font-size: 10.5px; line-height: 1.4; }
.cr-ed-logocor input[type=color] {
  width: 46px; height: 28px; border: 1px solid var(--line); border-radius: 6px; background: none;
}
.cr-ed-logocor input:disabled { opacity: .35; cursor: not-allowed; }
.cr-ed-pos { margin-top: 8px; }
.cr-ed-lido { font-size: 11px; color: var(--accent); text-align: center; min-height: 14px; }

/* Barra de seleção dos arquivos gerados — a mesma linguagem da aba Banco. */
.cr-sel {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; margin: 10px 0; font-size: 13px;
}
.cr-sel .cresce { flex: 1; }
.cr-sel .btn { padding: 5px 10px; font-size: 12px; }

.cr-ed-alerta { color: var(--warn); }

/* Os interruptores dos elementos: dois por linha, para a lista inteira caber
   sem virar uma coluna de rolagem dentro de outra. */
.cr-ed-elems { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.cr-ed-elems label {
  display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text);
  cursor: pointer; padding: 2px 0; min-width: 0;
}
.cr-ed-elems label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-ed-elems input { accent-color: var(--accent); flex: 0 0 auto; }
/* Desmarcado fica apagado: dá para varrer a lista e ver o que saiu sem ler. */
.cr-ed-elems label.off span { color: var(--muted); text-decoration: line-through; }
.cr-ed-elems .verso { grid-column: 1 / -1; }
.cr-ed-elems .div-verso {
  grid-column: 1 / -1; font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .5px; margin-top: 6px; border-top: 1px solid var(--line); padding-top: 6px;
}

.cr-ed-campo input[type=text] {
  background: var(--card2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 9px; font-size: 13px; width: 100%;
}

/* Os quatro seletores das cores livres, dois por linha. */
#edCoresLivres:not(.hidden) { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
#edCoresLivres label { font-size: 11px; }

/* O painel do item selecionado: destacado, porque ele muda de assunto conforme
   o que está clicado — sem a moldura, o criador não liga uma coisa à outra. */
.cr-ed-item {
  border: 1px solid var(--accent); border-radius: 10px; padding: 10px 12px;
  margin: 12px 0; background: var(--card2);
}
.cr-ed-item .sub-rot { margin-top: 0; }
.cr-ed-item .cr-cores { flex-wrap: wrap; gap: 8px 12px; }
.cr-ed-item .cr-ed-acoes { margin-top: 12px; }

/* A biblioteca: cada forma com um desenho do que ela é. Nome sozinho não diz
   nada — "meia faixa" e "coluna lateral" só se distinguem vendo. */
.cr-ed-lib { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cr-ed-lib button {
  display: flex; flex-direction: column; gap: 4px; align-items: stretch;
  background: var(--card2); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px; cursor: pointer; color: var(--text); font: inherit; font-size: 11px;
  text-align: left;
}
.cr-ed-lib button:hover { border-color: var(--accent); }
.cr-ed-lib button:disabled { opacity: .45; cursor: not-allowed; }
/* `display: block` não é detalhe: `.mini` é um <span>, e altura em elemento
   inline não vale — sem isso o quadro colapsa e as formas em porcentagem se
   medem contra zero. */
.cr-ed-lib .mini {
  display: block; position: relative; height: 26px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 3px;
}
.cr-ed-lib .mini i { position: absolute; background: var(--text); box-sizing: border-box; }
/* A miniatura da CURVA é o próprio caminho SVG que vai para a peça. `background`
   nenhum: quem pinta é o `fill` do path, em currentColor. */
.cr-ed-lib .mini i.mini-svg { background: none; color: var(--text); }
.cr-ed-lib .mini i.mini-svg svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cr-ed-lib b { font-weight: 700; }

/* Retas e curvas em grupos: são 27 formas, e uma lista corrida faria procurar a
   onda no meio das tarjas. */
.cr-ed-grupo { margin-bottom: 10px; }
.cr-ed-grupo-rot {
  display: block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); margin: 0 0 5px; font-weight: 700;
}
.cr-ed-formas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* --- O editor do certificado A4 ------------------------------------------- */
/* A folha não cabe no palco em tamanho real (um A4 deitado tem 1122px de
   largura), então a prévia é reduzida para CABER na largura disponível, e
   "ampliado" dá metade a mais, com rolagem. Para calcular esse "caber" o
   contêiner precisa ter largura própria — daí o `align-self: stretch`, sem o
   qual ele encolheria até o tamanho do conteúdo e a conta daria o tamanho do
   que já estava lá. */
.cr-ed-cartao {
  /* `flex: 1` com `min-height: 0`: o palco é uma coluna (abas, peça, nota, campo
     do pássaro) e a peça fica com TUDO o que sobrar de altura. Sem isso a altura
     era a do conteúdo, e a conta que encaixa a folha A4 media contra um quadro
     menor do que o disponível — sobrava metade do palco vazia. */
  flex: 1 1 auto; min-height: 0; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  overflow: auto;
}
#edA4 .cr-ed-lido { display: block; margin: 4px 0 10px; }
#edA4 .cr-ed-campo input[type="text"] { width: 100%; }

/* --- Comportamento na roda ------------------------------------------------ */
.comp-ficha {
  border: 1px solid var(--accent); border-radius: 10px; padding: 12px;
  margin: 10px 0; background: var(--card2);
}
.comp-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comp-cab b { font-size: 15px; }
.comp-cab .muted { flex: 1; font-size: 12px; }
.comp-tracos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.comp-traco {
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; color: var(--text); cursor: pointer; font: inherit;
  font-size: 12.5px;
}
.comp-traco:hover:not(:disabled) { border-color: var(--accent); }
.comp-traco.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.comp-traco:disabled { opacity: .4; cursor: not-allowed; }
.comp-ficha input[type=text] {
  width: 100%; background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font-size: 13px;
}
.comp-acoes { display: flex; gap: 8px; margin-top: 10px; }
.comp-chip {
  display: inline-block; background: var(--card2); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 9px; font-size: 11px; margin-right: 3px;
}
.comp-def { margin: 4px 0; font-size: 12.5px; }
.comp-resumo { margin: 10px 0; }
.comp-contagem { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; margin-bottom: 6px; }
.comp-contagem span { color: var(--muted); }
.comp-contagem span.ok { color: var(--text); }
.comp-contagem b { color: var(--accent); font-size: 14px; }
.comp-contagem i { font-style: normal; opacity: .7; font-size: 11px; }
/* O veredito do parentesco muda de cor com a força do sinal: é a informação que
   o criador precisa pegar de relance, antes de ler o número. */
.comp-parentesco { border-left: 3px solid var(--line); padding: 8px 12px; margin: 8px 0; font-size: 13px; }
.comp-parentesco.forte { border-left-color: #1a9b5c; background: rgba(26,155,92,.08); }
.comp-parentesco.bom { border-left-color: #1f6feb; background: rgba(31,111,235,.08); }
.comp-parentesco.fraco { border-left-color: #d19a20; background: rgba(209,154,32,.08); }
.comp-parentesco.nulo { border-left-color: var(--line); }
.comp-ind { margin: 8px 0; }
.comp-ind summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.comp-dicas { font-size: 13px; line-height: 1.6; }

/* O aviso que abre o relatório. Fica no topo, e não no rodapé: ressalva no fim
   de página é lida como se não existisse. */
.comp-aviso {
  border: 1px solid var(--line); border-left: 3px solid #d19a20; border-radius: 8px;
  padding: 10px 14px; margin: 12px 0; font-size: 12.5px; line-height: 1.55;
  background: rgba(209, 154, 32, .07);
}