/* ==========================================================================
   1. Tokens de diseño
   ========================================================================== */
:root{
  --bg:#0f1117; --bg-2:#0b0e14; --card:#171a23; --card2:#1e222e;
  --tx:#e6e8ee; --mut:#9aa3b5; --br:#2a3040;
  --ac:#7cc4ff; --ac-soft:rgba(124,196,255,.14);
  --ok:#4ade80; --wr:#fbbf24; --bad:#f87171;
  --radius:12px; --radius-sm:9px;
  --mono:ui-monospace,SFMono-Regular,"Cascadia Code",Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --shadow:0 18px 40px rgba(0,0,0,.5);

  /* Colores oficiales de tipo */
  --t-normal:#a8a77a; --t-fighting:#c22e28; --t-flying:#a98ff3; --t-poison:#a33ea1;
  --t-ground:#e2bf65; --t-rock:#b6a136; --t-bug:#a6b91a; --t-ghost:#735797;
  --t-steel:#b7b7ce; --t-fire:#ee8130; --t-water:#6390f0; --t-grass:#7ac74c;
  --t-electric:#f7d02c; --t-psychic:#f95587; --t-ice:#96d9d6; --t-dragon:#6f35fc;
  --t-dark:#705746; --t-fairy:#d685ad; --t-stellar:#4f8ff7; --t-unknown:#68a090;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font:15px/1.6 var(--sans);
  background:radial-gradient(1100px 560px at 50% -12%,#182036 0%,var(--bg) 58%) fixed,var(--bg);
  color:var(--tx); -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit;color:inherit}
[hidden]{display:none !important}

/* ==========================================================================
   2. Encabezado
   ========================================================================== */
header{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(180deg,rgba(15,17,23,.96),rgba(15,17,23,.9));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--br);
}
.header-in{max-width:1180px;margin:0 auto;padding:16px 18px 12px}
.title-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
h1{margin:0;font-size:1.3rem;letter-spacing:.2px}
h1 .dot{color:var(--bad)}
.sub{margin:0;color:var(--mut);font-size:.86rem}

/* Regreso al inicio del sitio */
.back{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;
  font-size:.8rem;color:var(--mut);text-decoration:none;
  background:var(--card2);border:1px solid var(--br);border-radius:999px;padding:5px 12px;
  transition:color .15s,border-color .15s,background .15s;
}
.back:hover{color:var(--tx);border-color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,var(--card2))}

.toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start}
@media (max-width:820px){.toolbar{grid-template-columns:1fr}}

/* Buscador */
.search{position:relative;display:flex;align-items:center}
.search .lens{position:absolute;left:12px;width:17px;height:17px;color:var(--mut);pointer-events:none}
.search input{
  width:100%; background:var(--bg-2); border:1px solid var(--br); color:var(--tx);
  border-radius:var(--radius-sm); padding:11px 84px 11px 38px; outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.search input:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-soft)}
.search input::placeholder{color:#6c7689}
.search .kbd{
  position:absolute;right:38px;font-family:var(--mono);font-size:.72rem;color:var(--mut);
  background:var(--card2);border:1px solid var(--br);border-radius:6px;padding:2px 6px;pointer-events:none;
}
.search .clear{
  position:absolute;right:8px;width:26px;height:26px;border-radius:6px;border:1px solid transparent;
  background:transparent;color:var(--mut);cursor:pointer;line-height:1;font-size:1rem;
}
.search .clear:hover{color:var(--tx);background:var(--card2);border-color:var(--br)}
.hint{margin:8px 0 0;font-size:.8rem;color:var(--mut);min-height:1.2em}
.hint b{color:var(--tx)}
.err{color:var(--bad)}

/* Controles de paginación */
.controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:820px){.controls{justify-content:flex-start}}
.controls label{font-size:.82rem;color:var(--mut)}
button{background:var(--card2);border:1px solid var(--br);border-radius:var(--radius-sm);padding:8px 12px;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
button:hover:not(:disabled){border-color:var(--ac)}
button:disabled{opacity:.42;cursor:not-allowed}
button.primary{background:#23405c;border-color:var(--ac)}
select,input[type=number]{
  background:var(--bg-2);border:1px solid var(--br);border-radius:var(--radius-sm);padding:7px 9px;
}
input[type=number]{width:88px}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* ==========================================================================
   3. Filtros por tipo
   ========================================================================== */
.types{max-width:1180px;margin:0 auto;padding:12px 18px 0;display:flex;gap:7px;flex-wrap:wrap}
.chip{
  --c:var(--br);
  font-size:.78rem;padding:4px 11px;border-radius:999px;cursor:pointer;
  background:color-mix(in srgb,var(--c) 20%,var(--card));border:1px solid color-mix(in srgb,var(--c) 46%,transparent);
  color:var(--tx);
}
.chip:hover{border-color:var(--c);background:color-mix(in srgb,var(--c) 32%,var(--card))}
.chip.on{background:color-mix(in srgb,var(--c) 48%,var(--card));border-color:var(--c);font-weight:600}
.chip.todos{--c:var(--ac)}
.types[hidden]{display:none}

/* ==========================================================================
   4. Cuadrícula de tarjetas
   ========================================================================== */
main{max-width:1180px;margin:0 auto;padding:16px 18px 32px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
@media (max-width:560px){.grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:11px}}

.card{
  position:relative;overflow:hidden;background:var(--card);border:1px solid var(--br);border-radius:var(--radius);
  padding:14px 12px 13px;display:flex;flex-direction:column;gap:8px;cursor:pointer;
  transition:transform .16s,border-color .16s,box-shadow .16s;
}
.card:hover{transform:translateY(-3px);border-color:#3b4762;box-shadow:0 12px 26px rgba(0,0,0,.4)}
.card:focus-visible{border-color:var(--ac)}
.card .imgbox{aspect-ratio:1/1;display:grid;place-items:center;background:radial-gradient(circle at 50% 62%,rgba(124,196,255,.13),transparent 66%);border-radius:var(--radius-sm)}
.card img{width:100%;max-width:132px;height:auto;image-rendering:-webkit-optimize-contrast;transition:opacity .25s}
.card img[data-pending="1"]{opacity:0}
.card .ph{font-family:var(--mono);color:var(--mut);font-size:.95rem}
.card .meta{display:flex;flex-direction:column;gap:6px;min-height:60px}
.pid{font-family:var(--mono);font-size:.74rem;color:var(--mut)}
.pname{margin:0;font-size:.95rem;font-weight:600;line-height:1.25;word-break:break-word}
.pname mark{background:rgba(124,196,255,.25);color:var(--tx);border-radius:3px;padding:0 2px}
.tchips{display:flex;gap:5px;flex-wrap:wrap}
.tchip{
  --c:var(--br);font-size:.68rem;text-transform:uppercase;letter-spacing:.4px;
  padding:2px 7px;border-radius:999px;color:var(--tx);
  background:color-mix(in srgb,var(--c) 26%,var(--card));
  border:1px solid color-mix(in srgb,var(--c) 52%,transparent);
}
/* Esqueleto */
.sk{background:var(--card2);border-radius:6px}
.sk.img{aspect-ratio:1/1;border-radius:var(--radius-sm)}
.sk.line{height:10px}
.sk.line.s1{width:64%}
.sk.line.s2{width:40%}
.card.skeleton{cursor:progress}
.card.loading{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.72}50%{opacity:1}}
.card.errtag{border-color:rgba(248,113,113,.55)}
.card .reload{
  position:absolute;right:8px;top:8px;width:26px;height:26px;padding:0;border-radius:7px;
  font-size:.9rem;line-height:1;background:rgba(248,113,113,.14);color:var(--bad);border-color:rgba(248,113,113,.4);
}
.empty{grid-column:1/-1;padding:42px 16px;text-align:center;color:var(--mut);border:1px dashed var(--br);border-radius:var(--radius)}
.empty b{display:block;color:var(--tx);font-size:1.05rem;margin-bottom:6px}
.empty button{margin-top:14px}
.more{grid-column:1/-1;display:flex;justify-content:center;padding:10px 0 4px}

/* --------------------------------------------------------------------------
   4.b Referencia de color del tipo en cada tarjeta
   -------------------------------------------------------------------------- */
.card[class*="t-"]{border-color:color-mix(in srgb,var(--tc) 34%,var(--br))}
.card[class*="t-"]:hover{border-color:color-mix(in srgb,var(--tc) 62%,var(--br))}
.card.t-normal{--tc:var(--t-normal)}     .card.t-fighting{--tc:var(--t-fighting)}
.card.t-flying{--tc:var(--t-flying)}     .card.t-poison{--tc:var(--t-poison)}
.card.t-ground{--tc:var(--t-ground)}     .card.t-rock{--tc:var(--t-rock)}
.card.t-bug{--tc:var(--t-bug)}           .card.t-ghost{--tc:var(--t-ghost)}
.card.t-steel{--tc:var(--t-steel)}       .card.t-fire{--tc:var(--t-fire)}
.card.t-water{--tc:var(--t-water)}       .card.t-grass{--tc:var(--t-grass)}
.card.t-electric{--tc:var(--t-electric)} .card.t-psychic{--tc:var(--t-psychic)}
.card.t-ice{--tc:var(--t-ice)}           .card.t-dragon{--tc:var(--t-dragon)}
.card.t-dark{--tc:var(--t-dark)}         .card.t-fairy{--tc:var(--t-fairy)}
.card.t-stellar{--tc:var(--t-stellar)}   .card.t-unknown{--tc:var(--t-unknown)}

/* Franja superior con el color del tipo (el gradiente va inline) */
.card .tint{position:absolute;left:0;right:0;top:0;height:4px;border-radius:var(--radius) var(--radius) 0 0}

/* --------------------------------------------------------------------------
   4.c Evoluciones y ventajas de tipo (se muestran en el panel de detalle)
   -------------------------------------------------------------------------- */
.block .ph-line{height:10px;border-radius:6px;background:var(--card2);margin-bottom:5px}
.dcuerpo{display:flex;flex-direction:column;gap:8px}
.ph-line.w70{width:70%}
.ph-line.w45{width:45%}
.evolist{display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap}
.evostage{display:flex;align-items:center;gap:6px}
/* Cada evolución es un botón: se puede pulsar para ver sus características. */
.evoitem{
  display:flex;flex-direction:column;align-items:center;gap:2px;width:64px;padding:4px 2px;
  background:transparent;border:1px solid transparent;border-radius:9px;cursor:pointer;
  transition:background .15s,border-color .15s,transform .15s;
}
.evoitem:hover:not(:disabled){background:color-mix(in srgb,var(--ac) 12%,transparent);border-color:color-mix(in srgb,var(--ac) 38%,transparent);transform:translateY(-2px)}
.evoitem img{width:48px;height:48px;object-fit:contain;image-rendering:-webkit-optimize-contrast}
.evoitem .evon{font-size:.66rem;color:var(--mut);text-align:center;line-height:1.15;max-width:62px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evoitem:hover:not(:disabled) .evon{color:var(--tx)}
/* La forma que se está viendo: sin acción, sólo marcada. */
.evoitem.este{background:color-mix(in srgb,var(--ac) 18%,transparent);border-color:color-mix(in srgb,var(--ac) 42%,transparent);cursor:default}
.evoitem.este .evon{color:var(--tx);font-weight:600}
.evoitem.este img{opacity:.95}
.evoarrow{color:var(--mut);font-size:.9rem;line-height:2.4}
.evoempty{font-size:.78rem;color:var(--mut);line-height:1.35}
.efrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.efrow + .efrow{margin-top:7px}
.eftag{font-size:.66rem;letter-spacing:.7px;text-transform:uppercase;color:var(--mut);min-width:62px}
.efchip{
  --c:var(--br);font-size:.72rem;padding:2px 9px;border-radius:999px;color:var(--tx);white-space:nowrap;
  background:color-mix(in srgb,var(--c) 26%,var(--card));
  border:1px solid color-mix(in srgb,var(--c) 52%,transparent);
}
.efchip i{font-style:normal;opacity:.75;font-size:.64rem}

/* ==========================================================================
   5. Pie de paginación
   ========================================================================== */
footer.pager{max-width:1180px;margin:0 auto;padding:0 18px 40px;display:flex;justify-content:center}
.pager-in{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.pager-in .status{font-size:.84rem;color:var(--mut);font-family:var(--mono)}

/* ==========================================================================
   6. Detalle (dialog)
   ========================================================================== */
#detail{border:1px solid var(--br);border-radius:16px;background:var(--card);color:var(--tx);padding:0;width:min(660px,94vw);box-shadow:var(--shadow)}
#detail::backdrop{background:rgba(6,8,13,.72);backdrop-filter:blur(3px)}
.dhead{position:relative;display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;padding:20px;border-bottom:1px solid var(--br)}
.dart{display:grid;place-items:center;background:radial-gradient(circle at 50% 62%,rgba(124,196,255,.16),transparent 68%);border-radius:var(--radius)}
.dart img{width:100%;max-width:180px;height:auto}
.dinfo{display:flex;flex-direction:column;gap:9px;min-width:0;justify-content:center}
.dinfo .pid{font-size:.8rem}
.dinfo h2{margin:0;font-size:1.5rem;line-height:1.15;word-break:break-word}
.dclose{position:absolute;right:14px;top:14px;width:32px;height:32px;padding:0;font-size:1.1rem;line-height:1}
.dbody{padding:18px 20px 22px;max-height:min(58vh,520px);overflow:auto}
.dbody h3{margin:0 0 8px;font-size:.82rem;text-transform:uppercase;letter-spacing:.9px;color:var(--mut);font-weight:600}
.block + .block{margin-top:20px}
.facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.fact{background:var(--card2);border:1px solid var(--br);border-radius:var(--radius-sm);padding:7px 11px;min-width:86px}
.fact span{display:block;font-size:.7rem;color:var(--mut);text-transform:uppercase;letter-spacing:.5px}
.fact b{font-size:.98rem}
ul.plain{margin:0;padding:0;list-style:none;display:flex;gap:6px;flex-wrap:wrap}
ul.plain li{background:var(--card2);border:1px solid var(--br);border-radius:999px;padding:3px 11px;font-size:.84rem}
ul.plain li .h{color:var(--wr);font-size:.72rem;margin-left:5px;border:1px solid rgba(251,191,36,.45);border-radius:999px;padding:0 6px}
.stats{display:flex;flex-direction:column;gap:9px}
.stat{display:grid;grid-template-columns:78px minmax(0,1fr) 40px;gap:10px;align-items:center}
.stat .lab{font-size:.82rem;color:var(--mut)}
.stat .val{font-family:var(--mono);font-size:.86rem;text-align:right}
.track{height:9px;background:var(--bg-2);border:1px solid var(--br);border-radius:999px;overflow:hidden}
.track i{display:block;height:100%;width:0;border-radius:999px;transition:width .45s cubic-bezier(.22,.61,.36,1)}
.total{margin-top:12px;padding-top:12px;border-top:1px dashed var(--br);display:flex;justify-content:space-between;font-size:.9rem}
.total b{font-family:var(--mono);font-size:1.02rem}
@media (max-width:620px){
  .dhead{grid-template-columns:1fr;padding:16px}
  .dart img{max-width:150px}
  .stat{grid-template-columns:70px minmax(0,1fr) 36px;gap:8px}
  .dbody{padding:16px;max-height:62vh}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}