/* PokéRiesgo · v0.16.1 · Pokédex para elegir compañero (js/roster-picker.js) y tarjetas del cajón con aire Pokémon.
 * Carcasa roja de Pokédex con lente azul y luces, pantalla clara con tarjetas al estilo Rojo Fuego / Verde Hoja,
 * insignias de tipo con su color y ficha lateral con el Pokémon sobre su peana. */
.rp-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,14,26,.62);animation:rpFade .14s ease-out}
.rp-overlay[hidden]{display:none}
@keyframes rpFade{from{opacity:0}}
@keyframes rpPop{from{transform:translateY(10px) scale(.98);opacity:0}}
.rp-dex{--ink:#383840;--ink2:#68707c;--paper:#f8f8f4;--frame:#c8323a;--frame-d:#7e141c;width:100%;max-width:1120px;min-width:0;height:min(780px,calc(100vh - 32px));height:min(780px,calc(100dvh - 32px));display:grid;grid-template-rows:auto auto auto minmax(0,1fr);gap:8px;padding:10px 12px 12px;
  background:linear-gradient(180deg,#e2424a,#c22c34 60%,#a8222a);border:3px solid var(--frame-d);border-radius:22px;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.25),0 18px 50px rgba(0,0,0,.55);
  font-family:Pixel,var(--ui);color:var(--ink);animation:rpPop .18s ease-out;image-rendering:pixelated}
/* ------------------------------------------------ cabecera */
.rp-head{display:flex;align-items:center;gap:12px;min-height:54px;padding:0 4px}
.rp-lens{flex:none;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#e8fbff 0 12%,#7fd4ff 13% 30%,#2a8ee0 55%,#1554a0);border:4px solid #f4f4f4;box-shadow:0 0 0 3px #3a1014,inset 0 -4px 8px rgba(0,0,40,.35)}
.rp-leds{display:flex;gap:6px;align-self:flex-start;margin-top:6px}
.rp-leds i{width:11px;height:11px;border-radius:50%;border:2px solid #3a1014;background:#ff5a5a}.rp-leds i:nth-child(2){background:#ffd84a}.rp-leds i:nth-child(3){background:#5ad86a}
.rp-title{margin:0 0 0 6px;font:22px/1 Pixel,var(--ui);color:#fff;text-shadow:2px 2px 0 #7e141c;letter-spacing:.04em}
.rp-count{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px;padding:6px 10px;border-radius:8px;background:#1c2430;border:2px solid #3a1014;color:#9cf0a8;font:15px/1 Pixel,var(--ui);box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
.rp-count small{font-size:11px;color:#6fb07a}
.rp-results{font:12px/1.3 Pixel,var(--ui);color:#ffe0e0}
.rp-close{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#f4f4f4;border:3px solid #3a1014;color:#3a1014;box-shadow:0 3px 0 #3a1014;padding:0;cursor:pointer}
.rp-close:hover{background:#fff;transform:translateY(-1px)}
/* ------------------------------------------------ búsqueda, categoría, orden */
.rp-tools{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;border-radius:12px;background:var(--paper);border:3px solid var(--frame-d);box-shadow:inset 0 0 0 2px #e4d8d8}
.rp-search{flex:1 1 220px;display:flex;align-items:center;gap:6px;min-width:0;padding:0 10px;height:38px;border-radius:8px;background:#fff;border:2px solid #a8b4c0;color:var(--ink2)}
.rp-search:focus-within{border-color:#2a8ee0;box-shadow:0 0 0 2px rgba(42,142,224,.25)}
.rp-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:15px Pixel,var(--ui)}
.rp-seg{display:flex;border:2px solid #a8b4c0;border-radius:8px;overflow:hidden;background:#fff}
.rp-seg button{display:flex;align-items:center;gap:4px;height:34px;padding:0 10px;border:0;border-right:2px solid #dde3ea;border-radius:0;background:transparent;color:var(--ink2);font:13px Pixel,var(--ui);box-shadow:none;cursor:pointer}
.rp-seg button:last-child{border-right:0}
.rp-seg button:hover{background:#eef4fa;color:var(--ink)}
.rp-seg button.on{background:#2a5ea8;color:#fff;text-shadow:1px 1px 0 #13325e}
.rp-toggle{display:flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:8px;background:#fff;border:2px solid #a8b4c0;color:var(--ink2);font:13px Pixel,var(--ui);box-shadow:none;cursor:pointer}
.rp-toggle.on{background:#fff2c8;border-color:#d8a830;color:#6a4a10}
.rp-toggle[hidden]{display:none}
/* ------------------------------------------------ filtros */
.rp-filters{min-width:0;display:flex;flex-direction:column;gap:6px;padding:0 2px}
.rp-typechips,.rp-genchips{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.rp-chip{--tc:#9aa;height:26px;padding:0 9px;border-radius:13px;border:2px solid rgba(0,0,0,.25);background:rgba(255,255,255,.88);color:#3a3a44;font:12px Pixel,var(--ui);box-shadow:inset 0 -2px 0 rgba(0,0,0,.08);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.rp-chip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tc);box-shadow:0 0 0 1.5px rgba(0,0,0,.25)}
.rp-chip.gen::before{display:none}
.rp-chip:hover{background:#fff}
.rp-chip.on{background:var(--tc);color:#fff;border-color:rgba(0,0,0,.35);text-shadow:1px 1px 0 rgba(0,0,0,.45)}
.rp-chip.on::before{background:#fff}
.rp-chip.gen.on{background:#2a5ea8}
.rp-flabel{font:12px Pixel,var(--ui);color:#ffe0e0;text-shadow:1px 1px 0 #7e141c;margin-right:2px}
.rp-clear{margin-left:auto;height:26px;padding:0 10px;border-radius:13px;background:#3a1014;color:#ffd8d8;border:0;font:12px Pixel,var(--ui);box-shadow:none;cursor:pointer}
/* ------------------------------------------------ cuerpo: rejilla + ficha */
.rp-body{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:10px;min-height:0}
.rp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));align-content:start;gap:8px;padding:10px;overflow:auto;border-radius:14px;background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 2px,transparent 2px 4px),#eef2f0;border:3px solid var(--frame-d);box-shadow:inset 0 0 0 2px #d8e0dc;scrollbar-width:thin;overscroll-behavior:contain}
.rp-card{--tc:#9aa;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:16px 4px 8px;border-radius:10px;background:#fff;border:2px solid #c8d0d8;box-shadow:0 2px 0 #c8d0d8;color:var(--ink);cursor:pointer;
  background-image:radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--tc) 22%,transparent) 0 30%,transparent 31%);transition:transform .08s,box-shadow .08s}
.rp-card:hover{transform:translateY(-2px);border-color:#7890b0;box-shadow:0 4px 0 #a8b4c0}
.rp-card.focus{border-color:#e04848;box-shadow:0 0 0 2px #e04848,0 4px 0 #a02828;background-color:#fff6f4}
.rp-card.focus::after{content:"▶";position:absolute;left:5px;top:44%;font:12px Pixel,var(--ui);color:#e04848;animation:rpCursor .5s steps(2) infinite}
@keyframes rpCursor{50%{transform:translateX(2px)}}
.rp-card.chosen{animation:rpChosen .18s ease-out}
@keyframes rpChosen{50%{transform:scale(1.06)}}
.rp-card:focus-visible{outline:3px solid #2a8ee0;outline-offset:2px}
.rp-card .rp-sprite{width:64px;height:64px}
.rp-num{position:absolute;left:7px;top:4px;font:10px/1 Pixel,var(--ui);color:#8890a0}
.rp-name{max-width:100%;font:13px/1.15 Pixel,var(--ui);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-types{display:flex;flex-wrap:wrap;justify-content:center;gap:3px}
.rp-type{--tc:#9aa;padding:2px 7px 1px;border-radius:5px;background:var(--tc);color:#fff;font:11px/1.25 Pixel,var(--ui);text-shadow:1px 1px 0 rgba(0,0,0,.45);border:1px solid rgba(0,0,0,.25)}
.rp-type.sm{padding:1px 5px 0;font-size:10px}
.rp-badge{position:absolute;top:3px;font:12px/1 Pixel,var(--ui);font-style:normal}
.rp-badge.star{right:6px;color:#e0a810;text-shadow:1px 1px 0 #7a5800}
.rp-badge.sparkle{right:6px;color:#ff6fb8;text-shadow:1px 1px 0 #8a2058}
.rp-card.legend .rp-badge.sparkle{right:20px}
.rp-badge.mine{left:auto;right:5px;top:auto;bottom:5px;color:#e04848}
.rp-card.legend{border-color:#e8c868;box-shadow:0 2px 0 #c8a040}
.rp-card.locked{--tc:#aeb4bc!important;background:#f0f1f2;border-style:dashed}
.rp-card.locked .rp-name{color:#707680}
.rp-sprite.missing{filter:grayscale(1);opacity:.65}
.rp-card.locked .rp-types,.rp-card.locked .rp-badge{filter:grayscale(1);opacity:.65}
.rp-detail.locked .rp-stage{filter:grayscale(1)}
.rp-detail.locked .rp-types,.rp-detail.locked .rp-tag{filter:grayscale(1)}
.rp-tag.missing{background:#e4e6e9;border-color:#b6bbc2;color:#626a75}
.rp-more{grid-column:1/-1;height:20px}
.rp-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:40px 0;color:var(--ink2);font:14px Pixel,var(--ui)}
.rp-empty small{font-size:12px}
/* Ficha lateral */
.rp-detail{--tc:#9aa;display:flex;flex-direction:column;gap:8px;min-height:0;overflow:auto;padding:10px;border-radius:14px;background:var(--paper);border:3px solid var(--frame-d);box-shadow:inset 0 0 0 2px #e4d8d8}
.rp-stage{position:relative;display:grid;place-items:center;flex:0 0 clamp(110px,22vh,168px);height:168px;min-height:0;border-radius:10px;background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 30%,#fff),#fff 80%);border:2px solid color-mix(in srgb,var(--tc) 45%,#c8d0d8);overflow:hidden}
.rp-stage::after{content:"";position:absolute;left:50%;bottom:14px;width:120px;height:26px;margin-left:-60px;border-radius:50%;background:color-mix(in srgb,var(--tc) 35%,#d8d8d0);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12);z-index:0}
.rp-stage .rp-sprite{position:relative;z-index:1;width:100%;height:100%;min-height:0;object-fit:contain}
.rp-dinfo{display:flex;flex-direction:column;gap:7px;min-height:0;overflow-y:auto;scrollbar-width:thin}
.rp-dinfo>*{flex-shrink:0}
.rp-dname{display:flex;align-items:baseline;gap:8px;margin:0;font:20px/1.1 Pixel,var(--ui);color:var(--ink);font-weight:400}
.rp-dname small{font-size:12px;color:#8890a0}
.rp-dtags{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.rp-tag{padding:2px 7px 1px;border-radius:5px;font:11px/1.25 Pixel,var(--ui);border:1px solid rgba(0,0,0,.2)}
.rp-tag.gold{background:#fff0b8;color:#7a5800}.rp-tag.pink{background:#ffe0f0;color:#8a2058}
.rp-role{margin:0;font:12px/1.35 Pixel,var(--ui);color:var(--ink2)}
.rp-evo{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;padding:8px 6px;margin:4px auto;border-radius:10px;background:#fff;border:2px solid #dde3ea;width:100%;max-width:100%;box-sizing:border-box}
.rp-evof{display:flex;align-items:center;gap:4px;flex:none}
.rp-evo .rp-sprite{display:block;width:72px;height:72px;flex:none}
.rp-arrow{width:8px;flex:none;text-align:center;font:20px Pixel,var(--ui);color:#a0a8b4}
.rp-stats{display:grid;gap:4px}
.rp-stat{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:6px;font:11px Pixel,var(--ui);color:var(--ink2)}
.rp-track{height:8px;border-radius:4px;background:#e2e6ea;box-shadow:inset 0 1px 0 rgba(0,0,0,.12);overflow:hidden}
.rp-track i{display:block;height:100%;border-radius:4px}
.rp-hint{margin:0;font:12px Pixel,var(--ui);color:#a04848}
.rp-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto;flex-shrink:0}
.rp-btn{display:flex;align-items:center;justify-content:center;gap:6px;height:42px;border-radius:10px;background:#fff;border:3px solid #3a4658;color:#3a4658;font:14px Pixel,var(--ui);box-shadow:0 3px 0 #3a4658;cursor:pointer}
.rp-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 0 #3a4658}
.rp-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #3a4658}
.rp-btn.primary{background:linear-gradient(180deg,#f05a5a,#d03a3a);border-color:#7e141c;color:#fff;text-shadow:1px 1px 0 #7e141c;box-shadow:0 3px 0 #7e141c}
.rp-btn:disabled{opacity:.55;cursor:default;transform:none}
/* ------------------------------------------------ pantallas estrechas: la ficha pasa abajo */
@media (max-width:860px){.rp-overlay{padding:6px}.rp-dex{height:calc(100vh - 12px);height:calc(100dvh - 12px);border-radius:16px;padding:8px}.rp-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .rp-detail{display:grid;grid-template-columns:92px minmax(0,1fr);grid-template-areas:"stage info" "stage actions";align-items:center;gap:8px 12px;padding:8px;max-height:none;overflow:visible}
  .rp-stage{grid-area:stage;width:92px;height:92px;align-self:center}.rp-stage .rp-sprite{width:92px;height:92px}.rp-stage::after{width:58px;height:14px;margin-left:-29px;bottom:9px}
  .rp-dinfo{grid-area:info;gap:5px;min-width:0}.rp-dname{font-size:18px;min-width:0}.rp-dname span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rp-stats,.rp-evo,.rp-role,.rp-hint{display:none}.rp-actions{grid-area:actions;margin:0;grid-template-columns:repeat(2,minmax(0,1fr))}.rp-btn{height:38px;min-width:0;padding:0 6px}
  .rp-leds,.rp-title{display:none}.rp-lens{width:34px;height:34px;border-width:3px}.rp-head{min-height:42px}}
@media (max-width:520px){.rp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:6px}.rp-card{padding-top:14px}.rp-card .rp-sprite{width:52px;height:52px}.rp-name{font-size:12px}
  .rp-tools{padding:6px;gap:6px}.rp-seg button{padding:0 7px;font-size:12px}.rp-sort{display:none}.rp-typechips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.rp-chip{flex:none}}
@media (prefers-reduced-motion:reduce){.rp-overlay,.rp-dex,.rp-card,.rp-card.focus::after{animation:none!important;transition:none}}

/* ------------------------------------------------ cajón del compañero: tarjetas con aire de Pokédex */
#drawer-roster .drawer-head h2{color:#fff;text-shadow:2px 2px 0 #7e141c}
#drawer-roster .drawer-head{margin:-14px -14px 0;padding:10px 14px;background:linear-gradient(180deg,#e2424a,#c22c34);border-bottom:3px solid #7e141c;border-radius:var(--r-lg) var(--r-lg) 0 0}
#drawer-roster .drawer-head h2 i{color:#fff}
#drawer-roster .pokemon-card{--tc:#9aa;padding:14px 4px 8px;background:#f8f8f4;border:2px solid #c8d0d8;box-shadow:0 2px 0 #8a96a4;color:#383840;background-image:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--tc) 24%,transparent) 0 30%,transparent 31%)}
#drawer-roster .pokemon-card:hover:not(:disabled){border-color:#7890b0;transform:translateY(-1px)}
#drawer-roster .pokemon-card.selected{border-color:#e04848;box-shadow:0 0 0 2px #e04848,0 3px 0 #a02828;background-color:#fff6f4}
#drawer-roster .pokemon-card strong{font:13px/1.15 Pixel,var(--ui);color:#383840}
#drawer-roster .pokemon-card .rp-num{left:6px;top:4px}
#drawer-roster .pokemon-card .rp-types{margin-top:1px}
#drawer-roster .roster-more{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 12px;border-radius:9px;background:linear-gradient(180deg,#f05a5a,#d03a3a);border:2px solid #7e141c;color:#fff;font:13px Pixel,var(--ui);text-shadow:1px 1px 0 #7e141c;box-shadow:0 2px 0 #7e141c;white-space:nowrap;cursor:pointer}
#drawer-roster .drawer-note{display:none}
#drawer-roster .roster-collection{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#9cf0a8;font:14px/1.4 Pixel,var(--ui)}
#drawer-roster .roster-collection span{font-size:12px;color:#c7d5cb}
#drawer-roster .roster-tools{flex-wrap:wrap}
#drawer-roster #roster-count{order:1;flex-basis:100%;white-space:normal;font-size:12px}
#drawer-roster{overflow:hidden}
#drawer-roster #roster{flex:1 1 auto;min-height:80px;overflow:auto;align-content:start;padding:3px;scrollbar-width:thin;overscroll-behavior:contain;overflow-anchor:none}
#drawer-roster .roster-portrait{width:56px;height:56px;flex:none;display:grid;place-items:center}
#drawer-roster .roster-portrait:empty::after{content:"";width:20px;height:20px;border:2px solid #a7b1ab;border-radius:50%;background:linear-gradient(#d6ded8 46%,#a7b1ab 47% 54%,#f8f8f4 55%)}
#drawer-roster .roster-load-more,#drawer-roster .roster-empty{grid-column:1/-1;min-height:36px;margin:2px 0;padding:8px;text-align:center;font:12px/1.4 var(--ui);color:#c7d5cb}
#drawer-roster .roster-load-more{border:1px solid #6b857b;border-radius:7px;background:#243a33;box-shadow:none;cursor:pointer}
#drawer-roster .roster-load-more:disabled{border-color:transparent;background:transparent;opacity:1;cursor:default}
.rp-btn span{white-space:nowrap}
@media (max-width:520px){.rp-btn{font-size:12px;gap:4px}.rp-btn svg{width:14px;height:14px}}
/* v0.16.3 · En móvil los tipos ocupan varias filas en vez de salirse por el lado. */
@media (max-width:520px){.rp-typechips{flex-wrap:wrap!important;overflow:visible!important;gap:4px}.rp-chip{height:22px;padding:0 6px;font-size:10px;gap:3px}.rp-chip::before{width:7px;height:7px}}
/* v0.16.3 · Pantallas bajas: la ficha lateral más compacta para que se vean las cinco barras y los botones. */
@media (min-width:861px) and (max-height:900px){.rp-stage{height:128px}.rp-stage .rp-sprite{width:124px;height:124px}.rp-stage::after{width:96px;height:20px;margin-left:-48px;bottom:10px}.rp-evo .rp-sprite{width:34px;height:34px}.rp-dinfo{gap:5px}.rp-stats{gap:3px}.rp-detail{gap:6px}}
/* v0.19.4 · Móvil: tipos y generaciones plegados tras «Filtros» y herramientas en dos filas, así la rejilla gana sitio
 * y se ven bien los Pokémon. En PC no cambia nada. */
.rp-ftoggle,.rp-short{display:none}
@media (max-width:860px),(max-height:560px){
  .rp-ftoggle{display:flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:8px;background:#fff;border:2px solid #a8b4c0;color:var(--ink2);font:13px Pixel,var(--ui);box-shadow:none;cursor:pointer;flex:none}
  .rp-ftoggle::after{content:"▾";font-size:11px}
  .rp-dex.filters-open .rp-ftoggle::after{content:"▴"}
  .rp-ftoggle.on{background:#fff2c8;border-color:#d8a830;color:#6a4a10}
  .rp-ftoggle b{min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#e04848;color:#fff;font:11px/18px Pixel,var(--ui);text-align:center}
  .rp-dex:not(.filters-open) .rp-typechips,.rp-dex:not(.filters-open) .rp-genchips{display:none}
  .rp-filters{gap:5px}
  .rp-results{padding-left:2px}
  .rp-dex{gap:6px}
}
@media (max-width:520px){
  .rp-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
  .rp-search{height:36px}
  .rp-cat{min-width:0}.rp-cat button{flex:1 1 auto;justify-content:center;padding:0 6px;min-width:0}
  .rp-toggle{height:34px;padding:0 10px}
  .rp-long{display:none}.rp-short{display:inline}
  .rp-ftoggle{height:36px;padding:0 10px}
  .rp-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .rp-card .rp-sprite{width:72px;height:72px}.rp-card{padding-top:14px;gap:1px}
  .rp-count{padding:5px 8px;font-size:13px}
}
/* v0.19.4 · Móvil en horizontal (poca altura): cabecera compacta y ficha lateral con scroll, la rejilla ocupa el alto. */
@media (min-width:861px) and (max-height:560px){.rp-overlay{padding:6px}.rp-dex{height:calc(100vh - 12px);height:calc(100dvh - 12px);border-radius:16px;padding:6px 8px 8px}
  .rp-leds,.rp-title{display:none}.rp-lens{width:30px;height:30px;border-width:3px}.rp-head{min-height:36px}.rp-close{width:34px;height:34px}.rp-count{padding:4px 8px;font-size:13px}
  .rp-tools{padding:5px;gap:6px}.rp-search,.rp-ftoggle,.rp-toggle{height:32px}.rp-seg button{height:28px}
  .rp-body{grid-template-columns:minmax(0,1fr) 260px}.rp-detail{overflow:auto}.rp-stage{height:96px}.rp-stage .rp-sprite{width:92px;height:92px}.rp-stats,.rp-role,.rp-hint,.rp-evo{display:none}
  .rp-sort{display:none}.rp-long{display:none}.rp-short{display:inline}.rp-search{flex-basis:160px}}