/* ---------- Palpédia -- página full-width/full-height, sem rodapé ----------
   Mesmo padrão de body.pagina-mapa (ver assets/css/mapa.css): trava a
   viewport abaixo do .site-nav fixo, só a lista e o painel de detalhes
   rolam por conta própria. */
body.pagina-palpedia{
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding-bottom:0;
}
body.pagina-palpedia .site-nav-spacer{ flex-shrink:0; }

.palpedia-page{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.palpedia-corpo{
  flex:1;
  min-height:0;
  display:flex;
}

/* ---------- Coluna esquerda ---------- */
.palpedia-sidebar{
  width:380px;
  flex-shrink:0;
  height:100%;
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border-right:1px solid var(--hairline);
}

/* Header com botão de fechar -- só aparece dentro do overlay <=900px
   (ver media query mais abaixo), mesmo padrão de .mapa-sidebar-header
   em mapa.css. */
.palpedia-sidebar-header{
  display:none;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1rem 0;
  flex-shrink:0;
}
.palpedia-sidebar-title{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:600;
  color:var(--text);
}
.palpedia-sidebar-close{
  display:none;
  width:36px; height:36px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  border:1px solid var(--hairline);
  background:var(--panel-2);
  color:var(--text-dim);
}

.palpedia-lista{
  flex:1;
  min-height:0;
  overflow-y:auto;
}

/* Mesmo visual de barra de rolagem de .solver-coluna-scroll
   (solver-completo.css) -- aplicado a todo painel com scroll da Palpédia. */
.palpedia-lista::-webkit-scrollbar,
.palpedia-tabs::-webkit-scrollbar,
.palpedia-tab-painel::-webkit-scrollbar,
.ppd-geral-scroll::-webkit-scrollbar{ width:8px; }
.palpedia-lista::-webkit-scrollbar-thumb,
.palpedia-tabs::-webkit-scrollbar-thumb,
.palpedia-tab-painel::-webkit-scrollbar-thumb,
.ppd-geral-scroll::-webkit-scrollbar-thumb{ background: var(--hairline); border-radius:999px; }

.ppd-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.55rem .9rem;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--hairline);
  border-left:3px solid transparent;
  text-align:left;
  cursor:pointer;
  color:var(--text);
}
.ppd-item:hover{ background:var(--panel-2); }
.ppd-item.is-active{
  background:var(--accent-soft);
  border-left-color:var(--accent);
}
.ppd-item[hidden]{ display:none; }

.ppd-item-cap{
  display:inline-block;
  width:18px;
  height:18px;
  flex-shrink:0;
  background-image: var(--cap-icone);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
/* Só o ícone "capturado" (não o "não-capturado") vira máscara -- tinge o
   webp original inteiro na cor pedida, em vez de mostrar as cores
   próprias do arquivo. */
.ppd-item-cap.is-capturado{
  background-image:none;
  background-color:#e8c100;
  -webkit-mask-image: var(--cap-icone);
  mask-image: var(--cap-icone);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}
.ppd-item-portrait-wrap{
  position:relative;
  flex-shrink:0;
}
.ppd-item-portrait{
  width:42px; height:42px;
  border-radius:8px;
  object-fit:cover;
  background:var(--panel-2);
  flex-shrink:0;
}
/* Mesmo ícone/cor do filtro "Exibir somente Pals Noturnos", centralizado
   no topo do retrato. Avisa de cara, na lista inteira, quais Pals são
   noturnos, sem precisar abrir o filtro. */
.ppd-item-noturno-badge{
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  width:16px; height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.7rem;
  line-height:1;
  color:#b79fd8;
  background:var(--panel);
  border-radius:50%;
  box-shadow:0 0 0 1px var(--hairline);
}
.ppd-item-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.ppd-item-numero{
  font-size:.72rem;
  color:var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.ppd-item-nome{
  font-weight:600;
  white-space:normal;
  overflow-wrap:break-word;
}
/*=========================================================
   BADGE ELEMENTAL -- mesmo molde arquitetural de .skill-badge/
   .skill-badge--rainbow (codex.css): classe base (.elemento-badge)
   só posiciona, __corpo cuida da forma/textura, modificador
   --<elemento> define as custom properties (--cor, --icone). Ícone
   é o PNG real de /assets/img/pals_data/InGame/ (mesmo usado no
   filtro "Filtrar por elemento" de pals.php via elementoInfo()).

   __icone é IRMÃO de __corpo, não filho -- __corpo tem clip-path (a
   ponta cortada do "ribbon"), e clip-path corta TODO descendente,
   inclusive um filho posicionado pra fora da caixa (left negativo).
   Ficando de fora do elemento clipado, o ícone se sobrepõe à borda
   esquerda do corpo sem ser cortado.
===========================================================*/
.elemento-badge{
  --cor: #9aa0b4;
  --icone: url("/assets/img/pals_data/InGame/T_Icon_element_s_00.png");

  position:relative;
  display:inline-flex;
  align-items:center;
  float:right;
  margin-right:2px;
}

.elemento-badge__icone{
  position:relative;
  width:24px;
  height:24px;
  border-radius:50%;
  flex-shrink:0;
  z-index:2;

  background-color: color-mix(in srgb, var(--cor) 35%, #0c0f14 65%);
  background-image:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%),
    var(--icone);
  background-repeat:no-repeat;
  background-position:center, center;
  background-size:100% 100%, 15px 15px;

  border:2px solid color-mix(in srgb, var(--cor) 60%, #000 25%);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.4),
    0 1px 3px rgba(0,0,0,.45);
}

.elemento-badge__corpo{
  position:relative;
  display:inline-flex;
  align-items:center;

  height:20px;
  margin-left:-10px;
  padding:0 12px 0 16px;

  /* ponta cortada à direita -- forma de tag/ribbon */
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);

  background-image:
    /* textura de listras diagonais (efeito "triângulos") */
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.16) 0 5px,
      rgba(255,255,255,0) 5px 11px
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--cor) 90%, white 10%) 0%,
      var(--cor) 55%,
      color-mix(in srgb, var(--cor) 60%, black 40%) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.25);
}

.elemento-badge__nome{
  font-size:.66rem;
  font-weight:700;
  color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  white-space:nowrap;
}

.elemento-badge--nao-elemental{ --cor:#91766f; --icone:url("/assets/img/pals_data/InGame/T_Icon_element_s_00.png"); }
.elemento-badge--fogo{         --cor:#f0704a; --icone:url("/assets/img/pals_data/InGame/T_Icon_element_s_01.png"); }
.elemento-badge--agua{         --cor:#4ab3f0; --icone:url("/assets/img/pals_data/InGame/T_Icon_element_s_02.png"); }
.elemento-badge--eletrico{     --cor:#f0d84a; --icone:url("/assets/img/pals_data/InGame/T_Icon_element_s_03.png"); }
.elemento-badge--grama{        --cor:#6fcf6f; --icone:url("/assets/img/pals_data/InGame/T_Icon_element_s_04.png"); }
.elemento-badge--escuridao{    --cor:#9d7cf0; --icone:url("/assets/img/pals_data/InGame/T_Icon_element_s_05.png"); }
.elemento-badge--draconico{    --cor:#a54bc6; --icone:url("/assets/img/pals_data/InGame/T_Icon_element_s_06.png"); }
.elemento-badge--terra{        --cor:#c99a5b; --icone:url("/assets/img/pals_data/InGame/T_Icon_element_s_07.png"); }
.elemento-badge--gelo{         --cor:#8fe0e0; --icone:url("/assets/img/pals_data/InGame/T_Icon_element_s_08.png"); }

.palpedia-contadores{
  display:flex;
  gap:.6rem;
  padding:.75rem .9rem;
  border-top:1px solid var(--hairline);
  flex-shrink:0;
}
.palpedia-contador{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.15rem;
  padding:.5rem;
  background:var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:8px;
}
.palpedia-contador-valor{ font-size:1.3rem; font-weight:700; color:var(--accent); font-variant-numeric: tabular-nums; }
.palpedia-contador-label{ font-size:.72rem; color:var(--text-dim); }

.palpedia-busca-bar{
  display:flex;
  gap:.5rem;
  padding:.75rem .9rem;
  border-top:1px solid var(--hairline);
  flex-shrink:0;
}
.palpedia-busca{
  flex:1;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.4rem .7rem;
  background:var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:8px;
  color:var(--text-dim);
}
.palpedia-busca input{
  flex:1;
  background:transparent;
  border:0;
  color:var(--text);
  outline:none;
}
.palpedia-btn-filtros{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  border:1px solid var(--hairline);
  background:var(--panel-2);
  color:var(--text-dim);
}
.palpedia-btn-filtros:hover{ color:var(--accent); border-color:var(--accent-line); }

/* ---------- Coluna direita ---------- */
.palpedia-detalhe{
  flex:1;
  /* min-width:0 -- sem isso, um item flex por padrão nunca encolhe
     abaixo do min-content dos FILHOS (a coluna fixa de 260px do
     .ppd-geral-grid, a tabela de itens, etc.). Abaixo de ~1300px isso
     forçava a página inteira a ficar mais larga que a viewport, cortando
     conteúdo pra fora em vez de encolher -- clássico bug de overflow em
     flexbox, não falta de espaço de verdade. */
  min-width:0;
  min-height:0;
  overflow-y:auto;
  padding:1.25rem 1.5rem;
  display:flex;
  flex-direction:column;
}

.palpedia-detalhe-vazio[hidden]{ display:none; }
.palpedia-detalhe-vazio{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  color:var(--text-dim);
}
.palpedia-detalhe-vazio i{ font-size:2.5rem; }

.palpedia-detalhe-conteudo{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}

.palpedia-tabs{
  display:flex;
  gap:.25rem;
  border-bottom:1px solid var(--hairline);
  margin-bottom:1rem;
  flex-shrink:0;
  overflow-y:auto;
}
.palpedia-tab{
  padding:.6rem 1.1rem;
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  color:var(--text-dim);
  font-weight:600;
}
.palpedia-tab:hover{ color:var(--text); }
.palpedia-tab.is-active{ color:var(--accent); border-bottom-color:var(--accent); }

.palpedia-tab-painel{
  display:none;
  flex:1;
  min-height:0;
  overflow-y:auto;
  /* overflow-y:auto sozinho faz overflow-x computar como "auto" também
     (regra da spec CSS pra overflow) -- sem isto, 2px de sobra do dot
     brilhante em .stat-fill::after (right:-2px) já bastava pra abrir
     barra de rolagem horizontal na aba Atributos. */
  overflow-x:hidden;
}
.palpedia-tab-painel.is-active{ display:flex; flex-direction:column; }

/* ---- Aba Geral ---- */
.ppd-geral-grid{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:1.5rem;
  flex:1;
  min-height:0;
}
.ppd-geral-esquerda{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.ppd-geral-portrait-wrap{
  position:relative;
  display:inline-block;
  /* .hero-portrait tem box-shadow (anel + glow) que passa uns 6-10px do
     próprio box da imagem. Sem essa margem, o anel encostava nas bordas do
     painel com overflow-y:auto e ficava cortado (scrollTop 0 = clip). Fica
     no wrapper (não mais na img) pra centralizar o selo de noturno em
     relação à imagem de verdade, não ao espaço extra da margem. */
  margin:1.65rem;
}
.ppd-geral-portrait{
  display:block;
}
/* Mesmo ícone/cor do selo da listagem (.ppd-item-noturno-badge), só que na
   escala maior da Aba Geral. */
.ppd-geral-noturno-badge{
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-50%);
  width:26px; height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  line-height:1;
  color:#b79fd8;
  background:var(--panel);
  border-radius:50%;
  box-shadow:0 0 0 1px var(--hairline);
}
.ppd-geral-descricao{
  align-self:stretch;
  background:var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:.9rem;
  color:var(--text);
  font-size:.9rem;
  line-height:1.5;
}
.ppd-geral-direita{
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-height:0;
}
@media (min-width: 1300px){
  /* Direita passa a ser uma trilha FIXA de 650px (em vez de 1fr) -- ela
     já não precisa mais crescer, e sobra de tela em telas bem largas
     ia virar espaço vazio do lado direito. Esquerda (retrato) vira 1fr
     e absorve todo o resto, ficando sempre grudada na borda direita. */
  .ppd-geral-grid{ grid-template-columns: 1fr 650px; }
  /* Esquerda ficou bem larga (1fr) -- sem isso a descrição (align-self:
     stretch por padrão) esticava até a borda, texto correndo a largura
     inteira da tela. align-self:center some com o stretch, deixando o
     max-width centralizar pelo align-items:center do pai. */
  .ppd-geral-descricao{ max-width:800px; width:100%; align-self:center; }
}
.ppd-geral-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding-right:.25rem;
}
.ppd-secao-titulo{
  font-weight:700;
  color:var(--text-bright, var(--text));
  margin-bottom:.4rem;
}
.ppd-fixo-box{
  background:var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:.85rem;
  flex-shrink:0;
}

.ppd-bonus-barra{
  display:flex;
  gap:.3rem;
  margin-top:.4rem;
}
.ppd-bonus-pip{
  flex:1;
  height:10px;
  border-radius:4px;
  background:var(--hairline);
}
.ppd-bonus-pip.is-cheio{ background:var(--accent); }

.ppd-trabalho-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:.75rem;
}
@media (min-width: 1100px){
  .ppd-trabalho-grid{
    grid-template-columns: repeat(2, 1fr);
    column-gap:2rem;
  }
}

/* ---- Aba Atributos ---- */
.ppd-atributos-lista{ display:flex; flex-direction:column; }
@media (min-width: 1100px){
  .ppd-atributos-lista{
    /* column-count não tem efeito em flex container -- precisa voltar
       pra display:block pra virar um multicol de verdade. */
    display:block;
    columns:2;
    column-gap:2rem;
  }
  .ppd-atributos-lista .stat-row{
    break-inside: avoid;
  }
}

/* ---- Aba Habitat ---- */
.ppd-habitat-tabs{ display:flex; gap:.4rem; margin-bottom:.75rem; flex-shrink:0; }
.ppd-habitat-tab{ padding:.4rem .9rem; border-radius:6px; border:1px solid var(--hairline); background:var(--panel-2); color:var(--text-dim); }
.ppd-habitat-tab.is-active{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line); }
/* Mesmo --mapa-cor-fundo de assets/css/mapa.css (.mapa-canvas) -- cor de
   borda da imagem do mapa (T_WorldMap.webp/T_TreeMap.webp), só que aqui
   toggled via .is-arvore-mundial em vez de reimportar mapa.css inteiro
   só por causa dessas 2 regras. Árvore Mundial tem cor ligeiramente
   diferente da de Palpagos, ver desenharHabitat() em palpedia.js. */
.ppd-habitat-mapa{
  flex:1;
  min-height:360px;
  border-radius:10px;
  overflow:hidden;
  --mapa-cor-fundo:#0c161e;
  background:var(--mapa-cor-fundo);
}
.ppd-habitat-mapa.is-arvore-mundial{ --mapa-cor-fundo:#0d151c; }
/* Leaflet usa z-index alto internamente (controle de zoom = 1000) que
   vazava pra cima do .site-nav (z-index:50, fixed no topo) -- mesmo fix de
   .leaflet-container em mapa.css: isola o mapa no próprio contexto de
   empilhamento, sem baixar a ordem relativa das camadas internas dele. */
.ppd-habitat-mapa.leaflet-container{ background:var(--mapa-cor-fundo) !important; z-index:1; }
.ppd-habitat-vazio{ flex:1; display:flex; align-items:center; justify-content:center; color:var(--text-dim); }

/* Mesmo layout/tema de .mapa-popup + tema escuro do Leaflet em mapa.css
   (não reimportado por inteiro pelo mesmo motivo do --mapa-cor-fundo
   acima) -- popup do pino Alfa na aba Habitat. */
.ppd-habitat-popup{ min-width:160px; }
.ppd-habitat-popup-titulo{ font-weight:600; margin-bottom:.15rem; }
.ppd-habitat-popup-sub{ font-size:.78rem; color:var(--text-dim); margin-bottom:.4rem; }
.ppd-habitat-popup-coord{ margin-bottom:.4rem; }
.ppd-habitat-popup-link{ font-size:.8rem; color:var(--accent); text-decoration:none; }
.ppd-habitat-popup-link:hover{ text-decoration:underline; }

.ppd-habitat-mapa .leaflet-popup-content-wrapper,
.ppd-habitat-mapa .leaflet-popup-tip{
  background:var(--panel) !important;
  color:var(--text) !important;
  box-shadow:0 3px 14px rgba(0,0,0,.5) !important;
}
.ppd-habitat-mapa .leaflet-popup-content-wrapper{ border:1px solid var(--hairline); }
.ppd-habitat-mapa .leaflet-popup-close-button{ color:var(--text-dim) !important; }
.ppd-habitat-mapa .leaflet-popup-close-button:hover{ color:var(--text-bright) !important; }

/* Mesmo valor de .mapa-marker-img (mapa.css) -- pino Alfa com a foto real
   do Pal em vez de um círculo de cor sólida genérico. */
.ppd-habitat-marker-img{
  width:30px; height:30px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.5);
  background:var(--panel);
}

/* ---- Aba Instâncias ---- */
/* .pdet-grid/.pdet-card etc vêm de assets/css/painel-pals-detalhes.css
   (ver $extraCss em palpedia.php) -- card renderizado no servidor via
   montarCardDeInstanciaHtml(), mesmo HTML de painel-pals-detalhes.php. */

/* ---- Aba Breeding ---- */
.ppd-breeding-wrap{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  padding-top:.25rem;
}
.ppd-breeding-card{
  display:flex;
  align-items:center;
  gap:1.25rem;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:1.4rem 1.6rem;
  position:relative;
  overflow:hidden;
}
/* Glow sutil atrás do ícone -- mesmo espírito do --accent-soft usado em
   badges/chips no resto do site, só espalhado num raio maior aqui pro
   card não ficar um retângulo plano. */
.ppd-breeding-card::before{
  content:'';
  position:absolute;
  top:50%; left:0;
  width:180px; height:180px;
  transform:translate(-40%,-50%);
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  pointer-events:none;
}
.ppd-breeding-icone{
  flex-shrink:0;
  width:56px; height:56px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--accent-soft);
  border:1px solid var(--accent-line);
  color: var(--accent);
  font-size:1.4rem;
  position:relative;
}
.ppd-breeding-conteudo{ position:relative; min-width:0; }
.ppd-breeding-numero{
  font-family: var(--font-display);
  font-size:2.2rem;
  font-weight:700;
  color: var(--text-bright);
  line-height:1.1;
  font-variant-numeric: tabular-nums;
}
.ppd-breeding-texto{
  color:var(--text-dim);
  font-size:.92rem;
  margin-top:.15rem;
}
/* Chip inline com o retrato do Pal atual, embutido no meio da frase
   (ex.: "3 combinações podem gerar [chip: Foxparks]"). */
.ppd-breeding-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.1rem .55rem .1rem .1rem;
  background: var(--panel);
  border:1px solid var(--hairline);
  border-radius:999px;
  font-weight:700;
  color: var(--text-bright);
  vertical-align:middle;
}
.ppd-breeding-chip img{
  width:26px; height:26px;
  border-radius:50%;
  object-fit:cover;
}
.ppd-breeding-cta{
  align-self:flex-start;
  margin-top:.25rem;
}
.ppd-breeding-card--cta .ppd-breeding-texto{
  font-size:.98rem;
  line-height:1.5;
}
.ppd-breeding-card--cta .ppd-breeding-texto b{
  color:var(--text-bright);
  font-weight:700;
}
.ppd-breeding-card--cta .ppd-breeding-cta{
  margin-top:.9rem;
}

/* ---------- Modal de filtros (com blur no fundo) ---------- */
/* Fica em .modal-backdrop (sem .show) de propósito -- esse elemento
   existe (com a classe .fade) DURANTE toda a transição de abrir/fechar,
   não só no estado "aberto". Cor/blur precisam estar aqui pra
   permanecerem iguais nos dois lados da transição; só o opacity abaixo
   (que o Bootstrap já anima via .fade{transition:opacity...}) muda. Se
   cor/blur ficassem presos em ".show", ao fechar o Bootstrap troca
   IMEDIATAMENTE (sem transição) pro background-color:#000 sólido dele
   assim que tira a classe .show -- e como opacity ainda está perto de 1
   nesse instante, aparecia como um "flash" preto antes de sumir. */
.modal-backdrop{
  background:rgba(6,8,14,.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.modal-backdrop.show{
  /* Bootstrap aplica opacity:.5 (var(--bs-backdrop-opacity)) por padrão
     nessa classe -- opacity<1 cria um contexto de isolamento próprio
     (backdrop root), e o backdrop-filter passa a desfocar só o próprio
     elemento semi-transparente, não a página atrás dele. opacity:1 tira
     esse isolamento; a transparência/escurecimento já vêm do alpha do
     rgba() acima, não dependem mais do opacity do elemento. */
  opacity:1;
}
.palpedia-modal-content{
  background:var(--panel);
  border:1px solid var(--hairline);
  color:var(--text);
}
.palpedia-filtro-grupo{ margin-bottom:1.25rem; }
.palpedia-filtro-label{ font-weight:700; margin-bottom:.5rem; color:var(--text-dim); text-transform:uppercase; font-size:.75rem; letter-spacing:.03em; }
.palpedia-ordenacao-opcoes{ display:flex; gap:.4rem; flex-wrap:wrap; }
.palpedia-ord-btn{
  padding:.4rem .9rem;
  border-radius:6px;
  border:1px solid var(--hairline);
  background:var(--panel-2);
  color:var(--text-dim);
}
.palpedia-ord-btn.is-active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.palpedia-filtro-checks{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:.5rem .75rem;
}
.palpedia-check{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.85rem;
  cursor:pointer;
}
.palpedia-check img{ width:18px; height:18px; }
.palpedia-check-icone{ width:18px; height:18px; flex-shrink:0; }
.palpedia-check-linha{ display:flex; margin-bottom:.6rem; }

/* <1300px: .palpedia-detalhe já encolhe direito agora (min-width:0 lá em
   cima), mas a coluna fixa de 260px do ícone + a coluna de conteúdo não
   cabiam mais lado a lado com conforto -- vira 1 coluna só, com o ícone e
   a descrição em UMA linha (lado a lado) acima do resto, em vez de
   empilhados. */
@media (max-width: 1300px){
  .ppd-geral-grid{
    grid-template-columns: 1fr;
  }
  .ppd-geral-esquerda{
    flex-direction: row;
    align-items: center;
  }
  .ppd-geral-portrait-wrap{
    flex-shrink:0;
  }
  .ppd-geral-portrait{
    width:110px;
    height:110px;
    flex-shrink:0;
  }
  .ppd-geral-descricao{
    flex:1;
    min-width:0;
  }
}

.palpedia-lista-toggle{ display:none; }

/* <=900px: a lista de espécies vira overlay em tela cheia (mesmo padrão
   de .mapa-sidebar em mapa.css), fechada por padrão -- só o botão
   flutuante (#palpedia-lista-toggle) abre/fecha, senão a coluna de
   detalhes nunca aparecia nesse tamanho de tela (antes a sidebar cobria
   tudo, sem jeito nenhum de ver o que tinha embaixo). */
@media (max-width: 900px){
  .palpedia-sidebar{
    display:none;
    position:fixed;
    top:78px; left:0; right:0; bottom:0;
    width:auto;
    /* height:100% da regra base (desktop) resolve contra a viewport
       inteira num elemento fixed, ignorando o top:78px -- sobrava
       78px cortados embaixo da lista. auto deixa top+bottom calcularem
       a altura certa (mesmo fix já usado em .mapa-sidebar/mapa.css). */
    height:auto;
    z-index:1002;
  }
  .palpedia-sidebar.is-aberta{ display:flex; }
  .palpedia-sidebar-header{ display:flex; }
  .palpedia-sidebar-close{ display:flex; }

  .palpedia-lista-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    right:1.25rem;
    bottom:1.25rem;
    width:52px;
    height:52px;
    border-radius:50%;
    background:var(--accent);
    color:#0a0d14;
    border:none;
    font-size:1.3rem;
    box-shadow:0 4px 14px rgba(0,0,0,.45);
    z-index:1001;
  }

  /* Celular: solta a altura travada (100vh + overflow interno) da coluna
     direita -- nessa largura o conteúdo das abas (Geral/Atributos/Habitat/
     Instâncias) já não cabe num scroll interno sem ficar apertado, então
     deixa a página toda rolar no scroll natural do navegador em vez de
     forçar full-height com scroll próprio. */
  body.pagina-palpedia{
    height:auto;
    overflow:visible;
  }
  .palpedia-corpo{ overflow:visible; }
}