/* ============================================================================
   DaPesca — conteudo.css: páginas migradas do site antigo (artigos, manual,
   curiosidades, piracema, represas), hub e páginas de peixe.
   Carregado só pelas views de app/Views/conteudo/. Só var(--cor-*) do base.css
   (nenhuma cor solta). O CSS próprio de cada página antiga fica em
   assets/css/conteudo/<pagina>.css, escopado em .lg-<pagina>.
   Lei do layout: nada absoluto por cima de texto, filho cabe no pai
   (min-width:0, minmax(0,1fr)), sem rolagem horizontal, toque >= 44px.
   ========================================================================== */

.conteudo-pagina { padding: 12px 0 40px; }
.conteudo-migalhas { margin: 6px 0 4px; font-size: 0.9rem; overflow-wrap: anywhere; }
.conteudo-migalhas a { display: inline-block; padding: 10px 0; }

/* Raiz do conteúdo antigo: tudo dentro do quadro */
.lg { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.lg img, .lg svg, .lg video, .lg iframe { max-width: 100%; }
.lg img { height: auto; }
.lg .lg-tabela-rolagem { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lg pre { max-width: 100%; overflow-x: auto; }
.lg a { color: var(--cor-primaria); }
.lg a:focus-visible, .lg [tabindex]:focus-visible, .lg button:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.lg [data-lg-abre], .lg [data-lg-mapa] .lg-spot { cursor: pointer; }
.lg [hidden] { display: none !important; }

/* Botões de filtro (curiosidades, piracema, lances, guia de peixes): alvo de toque */
.lg [data-lg-filtro] { min-height: 44px; }

/* Lista estática dos pontos dos mapas do manual (texto que antes só existia no JS) */
.lg .lg-mapa-lista { margin: 14px 0 0; padding-left: 1.4em; display: grid; gap: 8px; }
.lg .lg-mapa-lista li { padding: 6px 8px; border-radius: 10px; }
.lg .lg-mapa-lista li.lg-ponto-ativo { background: var(--cor-secundaria-fundo); }
.lg .lg-mapa-lista h3 { margin: 0 0 2px; font-size: 1rem; }
.lg .lg-mapa-lista p { margin: 0; }
.lg .lg-rel-lista { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 6px; }
.lg .lg-rel-lista li.lg-ponto-ativo { color: var(--cor-titulo); }

/* Guia de peixes do manual: card-resumo que leva à página do peixe */
.lg a.lg-peixe-card { display: block; color: inherit; text-decoration: none; }
.lg a.lg-peixe-card:hover { text-decoration: none; }
.lg .lg-peixe-ver { display: block; margin-top: 10px; font-weight: 700; color: var(--cor-primaria); font-size: 0.9rem; }

/* Complemento (o que veio dos guias novos unificados com a página do dono) */
.lg .lg-complemento { margin: 36px 0; }
.lg .lg-complemento-item { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: 13px; padding: 16px 18px; margin: 12px 0; }
.lg .lg-complemento-item h3 { margin: 0 0 8px; }
.lg .lg-complemento-item h4 { margin: 14px 0 4px; color: var(--cor-titulo); }
.lg .lg-complemento-item ul { padding-left: 1.2em; margin: 8px 0; }
.lg .lg-complemento-item li { margin: 4px 0; }

/* Rodapé do conteúdo: peixes do artigo + elo com a comunidade */
.conteudo-rodape { margin-top: 32px; display: grid; gap: 18px; }
.conteudo-rodape-titulo { font-weight: 700; color: var(--cor-titulo); margin: 0 0 8px; }
.conteudo-peixes .chip-peixe { min-height: 44px; display: inline-flex; align-items: center; }
.conteudo-comunidade {
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio);
  padding: 18px; display: grid; gap: 12px; margin-top: 28px;
}
.conteudo-comunidade-texto { margin: 0; }
.conteudo-comunidade-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.conteudo-comunidade-acoes .btn { min-height: 44px; display: inline-flex; align-items: center; }
.conteudo-meta { font-size: 0.9rem; margin: 0; overflow-wrap: anywhere; }
.conteudo-meta a { display: inline-block; padding: 6px 0; }
.conteudo-selo {
  display: inline-block; background: var(--cor-primaria-fundo); color: var(--cor-destaque-texto);
  font-weight: 700; font-size: 0.8rem; padding: 6px 12px; border-radius: 20px; margin-bottom: 10px;
}

/* ── Hub de peixes ────────────────────────────────────────────────────────── */
.peixes-cabeca h1 { margin-top: 4px; }
.peixes-links { margin: 6px 0 0; overflow-wrap: anywhere; }
.peixes-links a { display: inline-block; padding: 10px 0; }
.peixes-grid { display: grid; gap: 12px; margin-top: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .peixes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .peixes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.peixe-card-hub {
  display: flex; gap: 14px; align-items: flex-start; min-width: 0;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio);
  padding: 14px; color: var(--cor-texto); text-decoration: none; transition: transform .15s;
}
.peixe-card-hub:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--sombra-hover); }
.peixe-card-hub-svg { flex: none; width: 72px; color: var(--cor-secundaria); }
.peixe-card-hub-svg svg { width: 72px; height: auto; display: block; fill: currentColor; }
.peixe-card-hub-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.peixe-card-hub-nome { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.peixe-card-hub-sci { font-style: italic; font-size: 0.85rem; color: var(--cor-texto-suave); overflow-wrap: anywhere; }
.peixe-card-hub-resumo { font-size: 0.9rem; color: var(--cor-texto-suave); }
.peixe-card-hub-capturas { font-weight: 700; color: var(--cor-primaria); font-size: 0.9rem; margin-top: 2px; }

/* ── Página do peixe ─────────────────────────────────────────────────────── */
.peixe-cabeca { margin: 4px 0 22px; }
.peixe-cabeca h1 { margin: 0 0 4px; }
.peixe-cientifico { margin: 0 0 6px; color: var(--cor-texto-suave); overflow-wrap: anywhere; }
.peixe-especies { margin: 0 0 12px; }
.peixe-especies a { display: inline-block; padding: 10px 0; }
.peixe-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.peixe-acoes .btn { min-height: 44px; display: inline-flex; align-items: center; max-width: 100%; white-space: normal; }
.peixe-capturas { margin: 8px 0 30px; }
.peixe-capturas .secao-cabeca { flex-wrap: wrap; }
.peixe-capturas-mais a { display: inline-block; padding: 10px 0; font-weight: 700; }
.peixe-capturas-vazio { text-align: left; }
.peixe-guias { margin-top: 34px; }
.peixe-sem-ficha { margin: 10px 0 20px; }

/* Card completo do peixe (dados do guia de peixes do manual antigo) */
.lg-peixe .px-card {
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio);
  padding: 18px; margin: 0 0 18px; scroll-margin-top: 84px;
}
.lg-peixe .px-card-cabeca { display: flex; gap: 14px; align-items: center; min-width: 0; }
.lg-peixe .px-silhueta { flex: none; width: 84px; color: var(--cor-secundaria); }
.lg-peixe .px-silhueta svg { width: 84px; height: auto; display: block; fill: currentColor; }
.lg-peixe .px-card-titulo { min-width: 0; }
.lg-peixe .px-card-titulo h2 { margin: 0; }
.lg-peixe .px-cientifico { margin: 2px 0 0; color: var(--cor-texto-suave); font-size: 0.9rem; }
.lg-peixe .px-resumo { font-size: 1.05rem; color: var(--cor-titulo); margin: 14px 0; }
.lg-peixe .px-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.lg-peixe .px-stat { background: var(--cor-fundo-foto); border-radius: 10px; padding: 10px; min-width: 0; }
.lg-peixe .px-stat-k { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cor-texto-suave); font-weight: 700; }
.lg-peixe .px-stat-v { display: block; font-weight: 700; color: var(--cor-titulo); overflow-wrap: anywhere; }
.lg-peixe .px-timing { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 0.78rem; }
.lg-peixe .px-timing-fast { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); }
.lg-peixe .px-timing-wait { background: var(--cor-alerta-fundo); color: var(--cor-alerta-texto); }
.lg-peixe .px-timing-slow { background: var(--cor-perigo-fundo); color: var(--cor-perigo-hover); }
.lg-peixe .px-card h3 { font-size: 1rem; margin: 16px 0 4px; }
.lg-peixe .px-card p { margin: 0 0 6px; }
@media (max-width: 420px) {
  .lg-peixe .px-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lg-peixe .px-silhueta, .lg-peixe .px-silhueta svg { width: 64px; }
}

/* O .container já dá o respiro lateral: a coluna antiga (.lg-wrap) não soma outro */
.lg .lg-wrap { padding-left: 0; padding-right: 0; }
/* base.css pinta h1–h4 com --cor-titulo; dentro do conteúdo antigo o título herda a cor do
   bloco (ex.: título escuro dentro do botão verde do planejador). Onde a página antiga define
   a cor do título, a regra dela (mais específica) continua valendo. */
.lg h1, .lg h2, .lg h3, .lg h4, .lg h5 { color: inherit; }
.lg-peixe .px-card h2, .lg-peixe .px-card h3 { color: var(--cor-titulo); }
.lg .lg-sr-only-lg { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }