/* ═══════════════════════════════════════════════════════════
   PARTE B · POKÉDEX + PRIMITIVOS DE UI — "Aullido Violeta"
   Cartas holográficas neón violeta sobre negro puro.
   Dueño de: .grid .mon-card .fusion-badge .empty · .controls .search
   .chips .chip · .btn(+.primary/.ghost/.gold/.sm) select · .type-badge
   Carga después de styles.css+theme.css → manda.
   ═══════════════════════════════════════════════════════════ */

/* ── BOTONES (globales) ── */
.btn,select{
  background:var(--glass);border:1px solid var(--line2);color:var(--white);
  padding:11px 16px;border-radius:var(--r-sm);font-size:14px;cursor:pointer;
  font-family:var(--font-display);font-weight:600;letter-spacing:.4px;
  transition:border-color .18s,box-shadow .18s,color .18s,transform .18s,background .18s;
}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.8px}
.btn:hover,select:hover{border-color:var(--violet);color:var(--white);box-shadow:0 0 0 1px var(--violet-lo),0 0 18px var(--glow-soft)}
select:focus,.btn:focus-visible{outline:none;border-color:var(--violet-br);box-shadow:0 0 0 3px rgba(168,85,247,.18)}
select{background-image:linear-gradient(45deg,transparent 50%,var(--violet-br) 50%),linear-gradient(135deg,var(--violet-br) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  -webkit-appearance:none;appearance:none;padding-right:34px}

/* barrido de luz al hover del botón */
.btn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);transition:left .55s ease;pointer-events:none}
.btn:hover::after{left:130%}

.btn.primary{
  border:none;color:var(--white);font-weight:700;
  background:linear-gradient(135deg,var(--violet-lo),var(--neon) 55%,var(--violet-br));
  box-shadow:0 0 0 1px rgba(199,125,255,.4),0 6px 22px -6px var(--glow-hot),inset 0 1px 0 rgba(255,255,255,.28);
  text-shadow:0 1px 6px rgba(0,0,0,.45)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--violet-br),0 10px 30px -6px var(--glow-hot),0 0 26px var(--glow),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.ghost{background:transparent;border-color:var(--line2);color:var(--amethyst)}
.btn.ghost:hover{border-color:var(--violet);color:var(--white);background:rgba(124,58,237,.12)}
.btn.gold{background:var(--gold-grad);color:#1c0a30;border:none;font-weight:800;text-shadow:none;
  box-shadow:0 0 0 1px rgba(216,180,254,.5),0 5px 18px -6px rgba(216,180,254,.5)}
.btn.gold:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--amethyst),0 8px 26px -6px rgba(216,180,254,.6),0 0 22px rgba(216,180,254,.35)}
.btn.sm{padding:7px 12px;font-size:12px;letter-spacing:.6px}

/* ── INSIGNIAS DE TIPO (globales) ── */
.type-badge{
  display:inline-block;padding:3px 11px;border-radius:6px;font-size:10px;font-weight:800;
  letter-spacing:.9px;text-transform:uppercase;color:#fff;font-family:var(--font-num);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(0,0,0,.25),0 2px 7px rgba(0,0,0,.4);
}

/* ── CONTROLES / BÚSQUEDA ── */
.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}
.search{
  flex:1;min-width:220px;display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,rgba(19,11,36,.8),rgba(10,7,20,.85));
  border:1px solid var(--line2);border-radius:var(--r-sm);padding:0 15px;
  transition:border-color .2s,box-shadow .2s;position:relative}
.search svg{width:16px;height:16px;fill:var(--violet-br);flex-shrink:0;filter:drop-shadow(0 0 4px var(--glow-soft));transition:.2s}
.search input{background:none;border:none;color:var(--white);padding:12px 0;width:100%;font-size:15px;outline:none;font-family:var(--font-body)}
.search input::placeholder{color:var(--dim)}
.search:focus-within{border-color:var(--violet);box-shadow:0 0 0 3px rgba(168,85,247,.16),0 0 24px -4px var(--glow-soft)}
.search:focus-within svg{fill:var(--violet-br);filter:drop-shadow(0 0 8px var(--glow))}

/* ── CHIPS DE TIPO ── */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.chip{
  padding:6px 13px;border-radius:20px;font-size:11px;font-weight:800;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);text-transform:uppercase;letter-spacing:.6px;
  font-family:var(--font-num);color:#fff;opacity:.5;filter:saturate(.85);
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  transition:opacity .16s,box-shadow .16s,filter .16s,transform .16s}
.chip:hover{opacity:.9;filter:saturate(1);transform:translateY(-1px)}
.chip.on{opacity:1;filter:saturate(1.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 1px var(--ink),0 0 14px var(--glow-soft),0 3px 12px rgba(0,0,0,.45)}
.chip.clear{background:transparent!important;color:var(--muted);border-color:var(--line2);opacity:1;filter:none;text-shadow:none}
.chip.clear:hover{color:var(--white);border-color:var(--violet);box-shadow:0 0 14px var(--glow-soft)}

/* ═══ REJILLA POKÉDEX ═══ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(166px,1fr));gap:16px}

/* ── CARTA HOLOGRÁFICA NEÓN ── */
.mon-card{
  position:relative;isolation:isolate;overflow:hidden;text-align:center;cursor:pointer;display:block;
  background:
    linear-gradient(168deg,rgba(26,15,48,.92),rgba(8,5,16,.96)),
    radial-gradient(120% 80% at 50% -10%,rgba(124,58,237,.18),transparent 60%);
  border:1px solid var(--line2);border-radius:var(--r);padding:18px 12px 14px;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s,box-shadow .22s}

/* halo violeta que se enciende */
.mon-card::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
  background:radial-gradient(80% 60% at 50% 0%,var(--glow),transparent 62%);
  opacity:0;transition:opacity .28s}
/* barrido de luz diagonal */
.mon-card::after{content:"";position:absolute;top:0;left:-65%;width:45%;height:100%;transform:skewX(-20deg);z-index:2;
  background:linear-gradient(90deg,transparent,rgba(199,125,255,.16),transparent);transition:left .6s ease;pointer-events:none}

.mon-card:hover{transform:translateY(-6px);border-color:var(--violet);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.95),0 0 0 1px var(--violet-lo),0 0 26px -4px var(--glow)}
.mon-card:hover::before{opacity:1}
.mon-card:hover::after{left:135%}
.mon-card:focus-visible{outline:none;border-color:var(--violet-br);box-shadow:0 0 0 3px rgba(168,85,247,.35)}

.mon-card .num{position:absolute;top:9px;right:12px;font-family:var(--font-num);font-size:12px;
  font-weight:700;color:var(--amethyst);opacity:.7;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.mon-card img{width:104px;height:104px;object-fit:contain;position:relative;z-index:1;
  filter:drop-shadow(0 5px 9px rgba(0,0,0,.6));transition:transform .22s,filter .22s}
.mon-card:hover img{transform:scale(1.09) translateY(-2px);
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.55)) drop-shadow(0 0 12px var(--glow-soft))}
.mon-card .nm{font-family:var(--font-display);font-weight:700;margin:9px 0 7px;font-size:15px;
  letter-spacing:.4px;color:var(--white)}
.mon-card:hover .nm{text-shadow:0 0 12px var(--glow-soft)}
.mon-card .tps{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}

/* insignia FUSIÓN */
.fusion-badge{position:absolute;top:9px;left:9px;z-index:3;
  background:linear-gradient(135deg,var(--neon),var(--violet-br));color:#fff;
  font-family:var(--font-num);font-size:9px;font-weight:800;padding:2px 8px;border-radius:6px;
  letter-spacing:1px;text-shadow:0 1px 2px rgba(0,0,0,.5);
  box-shadow:0 0 0 1px rgba(255,255,255,.2),0 0 12px var(--glow-soft)}

/* reglas de fusión */
.fusion-rules{
  background:linear-gradient(160deg,rgba(176,38,255,.10),rgba(43,224,255,.05));
  border:1px solid var(--line2);border-left:3px solid var(--violet-br);border-radius:var(--r-sm);
  padding:14px 18px;margin-bottom:24px}
.fusion-rules h3{font-family:var(--font-display);font-size:15px;letter-spacing:.5px;color:var(--white);margin:0 0 8px}
.fusion-rules .gb-list{margin:0}

/* estado vacío */
.empty{text-align:center;padding:72px 20px;color:var(--muted);
  font-family:var(--font-display);letter-spacing:1px;font-size:16px}
.empty code{color:var(--violet-br);font-family:var(--font-num);font-weight:700;
  background:rgba(124,58,237,.14);padding:2px 8px;border-radius:6px;border:1px solid var(--line2)}

@media(max-width:520px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
  .mon-card img{width:88px;height:88px}
}
@media(prefers-reduced-motion:reduce){
  .mon-card,.mon-card::after,.mon-card img,.btn,.btn::after,.chip,select{transition:none}
  .mon-card:hover{transform:none}
}