/* ── RESET & BASE ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #f5f6f8;
  --bg-card: rgba(255, 255, 255, 0.82);
  --bg-sidebar: rgba(255, 255, 255, 0.86);
  --border: rgba(205, 210, 220, 0.3);
  --border-strong: rgba(205, 210, 220, 0.5);
  --blue-deep: #26262b;
  --blue-mid: rgba(38, 40, 48, 0.5);
  --blue-soft: rgba(227, 53, 13, 0.1);
  --blue-accent: rgba(227, 53, 13, 0.55);
  --text-primary: #26262b;
  --text-secondary: rgba(38, 40, 48, 0.5);
  --text-muted: rgba(38, 40, 48, 0.32);
  --sidebar-w: 56px;
  --sidebar-open: 212px;
  --topbar-h: 56px;
  --ticker-h: 34px;   /* barra de precios/gangas, debajo de la topbar */
  --transition: 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

html, body {
  height: 100%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -5%, rgba(255, 222, 216, 0.45) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(160, 195, 255, 0.15) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

a { text-decoration: none; color: inherit; }

/* ── LAYOUT ── */
.sidebar {
  position: fixed;
  top: calc(var(--topbar-h) + var(--ticker-h)); left: 0; bottom: 0;   /* empieza bajo la topbar + la barra de precios */
  width: var(--sidebar-w);
  background: var(--bg-sidebar);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 14px 0;
  z-index: 100;
  transition: width var(--transition);
  overflow: hidden;
}

.sidebar.open {
  width: var(--sidebar-open);
}

/* Botón ☰ de la topbar — lo inyecta js/main.js; solo se ve en móvil. */
.topbar-menu-btn {
  display: none; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 36px; height: 36px; margin-right: 6px; border: none; border-radius: 10px;
  background: rgba(38,40,48,0.06); color: var(--text-secondary); cursor: pointer;
  transition: background 0.15s;
}
.topbar-menu-btn:hover { background: rgba(38,40,48,0.12); }

/* Fondo oscuro tras el sidebar cuando es un desplegable (móvil) */
.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 490; background: rgba(8,10,20,0.5);
  opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
}
.sidebar-backdrop.active { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
  /* Móvil: el sidebar no empuja el contenido — vive oculto fuera de pantalla
     y se despliega por encima (con fondo oscuro) al pulsar el botón ☰. */
  .topbar-menu-btn { display: flex; }
  .sidebar {
    top: 0; height: 100vh;   /* el desplegable cubre TODA la pantalla, no solo bajo la topbar */
    width: var(--sidebar-open);
    transform: translateX(-100%);
    transition: transform 0.28s var(--ease, ease);
    z-index: 500;
  }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0 !important; }
}

.main {
  margin-left: var(--sidebar-w);
  padding-top: calc(var(--topbar-h) + var(--ticker-h) + 20px);   /* topbar + ticker + margen de respiro */
  min-height: 100vh;
  position: relative;
  z-index: 1;
  transition: margin-left var(--transition);
}

/* ── SIDEBAR TOP ── */
.sidebar-top {
  display: flex;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 18px;
  gap: 10px;
  min-width: var(--sidebar-open);
}

.logo-mark {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.1s;
}

.sidebar.open .logo-mark {
  opacity: 1;
  transition: opacity 0.2s 0.1s;
}

.sidebar-brand {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-deep);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.1s;
}

.sidebar.open .sidebar-brand {
  opacity: 1;
  transition: opacity 0.2s 0.1s;
}

.sidebar-top-brand {
  font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--blue-deep);
  white-space: nowrap; opacity: 0; transition: opacity 0.1s;
}
.sidebar.open .sidebar-top-brand { opacity: 1; transition: opacity 0.2s 0.1s; }
.sidebar-top-brand em { font-style: normal; color: #e3350d; }

.sidebar-brand em {
  font-style: normal;
  font-weight: 300;
  color: rgba(60, 110, 220, 0.65);
}

.toggle-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4.5px;
  padding: 4px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background 0.15s;
}

.toggle-btn:hover { background: var(--blue-soft); }

.toggle-btn .bar {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--text-muted);
  border-radius: 2px;
  transition: all 0.25s;
}

/* ── NAV ITEMS ── */
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 8px;
  min-width: var(--sidebar-open);
  flex: 1;
}

.nav-section-label {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 12px 3px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.1s;
}

.sidebar.open .nav-section-label {
  opacity: 1;
  transition: opacity 0.2s 0.1s;
}

.nav-item {
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 12px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
}

.nav-item:hover {
  background: var(--blue-soft);
  color: rgba(38, 40, 48, 0.8);
}

.nav-locked {
  cursor: not-allowed;
  opacity: 0.4;
  pointer-events: none;
}

/* ═══ EDITOR DE NOTICIAS (editor.html) ═══ */
.ed-tabs { display: flex; gap: 8px; margin: 0 24px 18px; }
.ed-tab {
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--text-muted); background: rgba(255,255,255,0.6); border: 0.5px solid var(--border-strong);
  border-radius: 20px; padding: 7px 18px; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.ed-tab.active { color: #fff; background: #e3350d; border-color: #e3350d; }
.ed-tab:not(.active):hover { background: rgba(255,255,255,0.95); }

.ed-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 0 24px 40px; align-items: start; }
.ed-slot-col { background: rgba(255,255,255,0.5); border: 0.5px solid var(--border-strong); border-radius: 16px; padding: 14px; min-height: 120px; }
.ed-slot-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ed-slot-name { font-size: 12px; font-weight: 800; color: var(--blue-deep); }
.ed-slot-hint { font-size: 10px; color: var(--text-muted); }
.ed-slot-add {
  font-family: inherit; font-size: 11px; font-weight: 700; color: #fff; background: #e3350d;
  border: none; border-radius: 8px; padding: 5px 10px; cursor: pointer;
}
.ed-slot-add:hover { background: #c0270a; }
.ed-slot-drop { min-height: 40px; display: flex; flex-direction: column; gap: 8px; }
.ed-slot-drop.drag-over { outline: 2px dashed #e3350d; outline-offset: 4px; border-radius: 10px; }

.ed-item {
  display: flex; align-items: center; gap: 10px; background: #fff; border: 0.5px solid var(--border-strong);
  border-radius: 10px; padding: 8px 10px; cursor: grab;
}
.ed-item.dragging { opacity: 0.4; }
.ed-item-thumb {
  width: 40px; height: 40px; border-radius: 8px; flex: 0 0 auto; display: flex; align-items: center;
  justify-content: center; font-size: 18px; background-size: cover; background-position: center; color: #fff;
}
.ed-item-body { flex: 1 1 auto; min-width: 0; }
.ed-item-title { font-size: 12px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-item-sub { font-size: 10px; color: var(--text-muted); }
.ed-item-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.ed-item-btn { background: none; border: none; cursor: pointer; padding: 4px; border-radius: 6px; color: var(--text-muted); }
.ed-item-btn:hover { background: rgba(227,53,13,0.08); color: #e3350d; }
.ed-item.draft { opacity: 0.6; }
.ed-item-draft-badge { font-size: 8px; font-weight: 800; text-transform: uppercase; color: #b8860b; background: rgba(184,134,11,0.12); border-radius: 4px; padding: 1px 5px; margin-left: 6px; }

.ed-form { display: flex; flex-direction: column; gap: 10px; }
.ed-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.ed-field input, .ed-field textarea, .ed-field select {
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-primary);
  background: rgba(255,255,255,0.7); border: 0.5px solid var(--border-strong); border-radius: 8px; padding: 8px 10px;
}
.ed-field textarea { resize: vertical; }

/* ═══ SUBPÁGINA DE ARTÍCULO (articulo.html) ═══ */
.art-wrap { max-width: 760px; margin: 0 auto; padding: 20px 24px 80px; }
.art-breadcrumb { font-size: 11px; color: var(--text-muted); margin-bottom: 16px; }
.art-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.art-breadcrumb a:hover { color: var(--blue-deep); text-decoration: underline; }
.art-hero {
  width: 100%; height: 280px; border-radius: 16px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(135deg,#a01b13,#881710); background-size: cover; background-position: center;
}
.art-tag {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: #e3350d; border-radius: 6px; padding: 3px 10px; margin-bottom: 10px;
}
.art-title { font-size: 26px; font-weight: 800; line-height: 1.25; color: var(--text-primary); margin-bottom: 10px; }
.art-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.art-body { margin-top: 24px; font-size: 15px; line-height: 1.75; color: var(--text-primary); }
.art-body p { margin-bottom: 16px; }
.art-back { margin-top: 32px; }
.art-back a { font-size: 13px; color: var(--blue-deep); text-decoration: none; font-weight: 600; }
.art-back a:hover { text-decoration: underline; }
@media (max-width: 700px) { .art-wrap { padding: 16px 14px 60px; } .art-hero { height: 180px; } .art-title { font-size: 20px; } }

.nav-item.active {
  background: rgba(227, 53, 13, 0.13);
  color: #e3350d;
  font-weight: 700;
}

.nav-item.account { color: rgba(38, 40, 48, 0.45); }

.nav-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex-shrink: 0;
}

.nav-label {
  font-size: 12px;
  font-weight: 700;
  color: inherit;
  opacity: 0;
  transition: opacity 0.1s;
  letter-spacing: 0.01em;
}

.sidebar.open .nav-label {
  opacity: 1;
  transition: opacity 0.2s 0.12s;
}

.nav-divider {
  height: 0.5px;
  background: var(--border);
  margin: 5px 4px;
}

/* ── TOPBAR (blanca, a TODO el ancho, por encima del sidebar) ── */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--topbar-h);
  z-index: 110;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid rgba(20, 20, 30, 0.08);
  box-shadow: 0 2px 12px rgba(20, 20, 40, 0.05);
}
.topbar-right { margin-left: auto; }   /* empuja la cuenta a la derecha del todo */

/* Logo centrado de verdad en la topbar, sin depender de que el botón ☰ y la
   cuenta/idioma midan lo mismo a cada lado. */
.topbar > .site-title-link, .topbar > .site-title-text {
  position: absolute; left: 50%; top: 0; height: 100%;
  transform: translateX(-50%);
  display: flex; align-items: center;
}

/* Barra de precios/gangas — separada de la topbar, justo debajo, así no se
   aprietan entre sí y se puede leer todo. */
.ticker-bar {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; height: var(--ticker-h);
  z-index: 105; background: #fff; border-bottom: 1px solid rgba(20,20,30,0.06);
  display: flex; align-items: center; padding: 0 24px; overflow: hidden;
}
.ticker-bar .topbar-ticker { width: 100%; margin: 0; }

/* Ticker de noticias dentro de la topbar (a lo ancho, se mueve) */
.topbar-ticker { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; text-decoration: none; overflow: hidden; margin: 0 16px; }
.topbar-ticker-label { font-size: 8px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: #e3350d; border-radius: 4px; padding: 3px 8px; flex: 0 0 auto; }
.topbar-ticker-mask { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.topbar-ticker-track { display: inline-flex; white-space: nowrap; animation: ticker 32s linear infinite; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.topbar-ticker:hover .topbar-ticker-track { animation-play-state: paused; }
@media (max-width: 560px) { .topbar-ticker-label { display: none; } }
/* Items de precio del ticker */
.tk-group { display: inline-flex; align-items: center; }
.tk-item { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; color: var(--text-secondary); }
.tk-item b { color: var(--blue-deep); font-weight: 700; }
.tk-item:hover b { text-decoration: underline; }
.tk-chg { font-weight: 700; }
.tk-up .tk-chg { color: #2bb56a; }
.tk-down .tk-chg { color: #e0794a; }
.tk-price { color: var(--text-muted); }
.tk-deal { background: #e3350d; color: #fff; border-radius: 4px; padding: 1px 5px; font-size: 8px; font-weight: 800; letter-spacing: 0.04em; }
.tk-sep { color: var(--text-muted); opacity: 0.45; margin: 0 12px; }

.site-title { height: 34px; width: auto; object-fit: contain; display: block; flex: 0 0 auto; }
.topbar .site-title-text { flex: 0 0 auto; }

/* Buscador central tipo Pokémon Center */
.topbar-search {
  flex: 1 1 auto;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #f1f2f4;
  border: 1.5px solid transparent;
  border-radius: 24px;
  padding: 9px 16px;
  transition: background 0.15s, border-color 0.15s;
}
.topbar-search:focus-within { background: #fff; border-color: #e3350d; }
.topbar-search svg { color: var(--text-muted); flex: 0 0 auto; }
.topbar-search input { flex: 1; border: none; background: none; outline: none; font-family: inherit; font-size: 13px; color: var(--text-primary); }
.topbar-search input::placeholder { color: var(--text-muted); }

.topbar-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Pill antigua (sustituida por .topbar-search) */
.search-pill { display: none; }
@media (max-width: 560px) { .topbar-search { display: none; } }

.btn-cuenta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-deep);
  background: rgba(255, 255, 255, 0.7);
  border: 0.5px solid var(--border-strong);
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-cuenta:hover { background: rgba(255, 255, 255, 0.95); }

/* ── TICKER ── */
.ticker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 24px 18px;
  background: rgba(255, 255, 255, 0.45);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
  overflow: hidden;
}

.ticker-label {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(227, 53, 13, 0.08);
  border: 0.5px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  flex-shrink: 0;
}

.ticker-track {
  display: flex;
  white-space: nowrap;
  animation: ticker 30s linear infinite;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── HERO GRID ── */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 8px;
  padding: 0 24px;
  margin-bottom: 22px;
}

.hero-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 0.5px solid rgba(205, 210, 220, 0.25);
  background: rgba(255,255,255,0.08);
}

.hero-big {
  grid-row: span 2;
}

.hero-img {
  width: 100%;
  height: 100%;
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-big .hero-img {
  min-height: 280px;
}

.hero-emoji {
  font-size: 2.8rem;
  opacity: 0.85;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,20,60,0.88) 0%, rgba(8,20,60,0.25) 55%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px 13px;
  transition: background 0.2s;
}

.hero-card:hover .hero-overlay {
  background: linear-gradient(to top, rgba(8,20,60,0.92) 0%, rgba(8,20,60,0.35) 55%, transparent 100%);
}

.hero-tag {
  font-size: 7.5px;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
  font-weight: 400;
}

.hero-title {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.hero-big .hero-title {
  font-size: 15px;
  line-height: 1.3;
}

.hero-meta {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 4px;
  font-weight: 300;
}

/* ── FEATURED WIDE ── */
.featured-wide {
  position: relative;
  margin: 4px 24px 22px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 0.5px solid rgba(205, 210, 220, 0.25);
}

.featured-img {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.featured-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,20,60,0.92) 0%, rgba(8,20,60,0.45) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px 18px;
  transition: background 0.2s;
}

.featured-wide:hover .featured-overlay {
  background: linear-gradient(to top, rgba(8,20,60,0.96) 0%, rgba(8,20,60,0.55) 50%, transparent 100%);
}

.featured-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 70%;
  margin-top: 4px;
}

.featured-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 5px;
  font-weight: 300;
}

/* ── FEED ── */
.feed-section {
  padding: 16px 24px 32px;
}

.section-label {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--border);
}

.feed-item {
  display: flex;
  gap: 14px;
  padding: 11px 10px;
  border-bottom: 0.5px solid rgba(38, 40, 48, 0.07);
  cursor: pointer;
  border-radius: 9px;
  transition: background 0.12s;
}

.feed-item:hover {
  background: rgba(255, 255, 255, 0.55);
}

.feed-item:hover .feed-title {
  text-decoration: underline;
  text-decoration-color: rgba(38, 40, 48, 0.2);
}

.feed-thumb {
  width: 96px;
  height: 66px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  border: 0.5px solid rgba(205, 210, 220, 0.2);
}

.feed-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.feed-time {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 300;
  letter-spacing: 0.02em;
}

.feed-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-deep);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.feed-sub {
  font-size: 10.5px;
  color: var(--text-secondary);
  line-height: 1.4;
  font-weight: 300;
}

.feed-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}

.ftag {
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-accent);
}

.fauthor {
  font-size: 7.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    padding: 0 14px;
  }
  .hero-big { grid-row: span 1; }
  .topbar, .ticker, .featured-wide, .feed-section { padding-left: 14px; padding-right: 14px; }
  .ticker { margin-left: 14px; margin-right: 14px; }
  .featured-wide { margin-left: 14px; margin-right: 14px; }
  .featured-title { max-width: 90%; font-size: 13px; }
}


/* ════════════════════════════════════════
   NOTICIAS PAGE
   ════════════════════════════════════════ */

/* ── CATEGORY BADGES ── */
.ncat {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
}
.ncat.vgc      { background: rgba(227, 53, 13, 0.12); color: rgba(30, 70, 200, 0.85); }
.ncat.tcg      { background: rgba(160, 60, 200, 0.1); color: rgba(140, 50, 190, 0.85); }
.ncat.pokemon  { background: rgba(220, 150, 20, 0.12); color: rgba(180, 120, 10, 0.9); }
.ncat.industria{ background: rgba(20, 160, 120, 0.1); color: rgba(15, 130, 100, 0.88); }
.ncat.analisis { background: rgba(200, 60, 60, 0.1); color: rgba(170, 45, 45, 0.85); }

.ncat-sep { color: var(--text-muted); font-size: 9px; }
.ntime    { font-size: 9px; color: var(--text-muted); font-weight: 300; letter-spacing: 0.02em; }
.nread    { font-size: 9px; color: var(--text-muted); font-weight: 300; }

/* ── PAGE HEADER ── */
.page-header {
  padding: 10px 24px 14px;
}

.page-header-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.page-breadcrumb {
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--blue-deep);
  letter-spacing: -0.03em;
  line-height: 1;
}

.page-sub {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 300;
  letter-spacing: 0.08em;
  margin-top: 5px;
}

.page-header-count {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 4px;
}

/* ── FILTER BAR ── */
.filter-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0 24px 12px;
  background: linear-gradient(to bottom, var(--bg) 80%, transparent 100%);
}

.filter-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.filter-pills::-webkit-scrollbar { display: none; }

.filter-pill {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.58);
  border: 0.5px solid var(--border-strong);
  border-radius: 20px;
  padding: 6px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}

.filter-pill:hover {
  background: rgba(255, 255, 255, 0.85);
  color: var(--blue-deep);
}

.filter-pill.active {
  background: var(--blue-deep);
  color: #fff;
  border-color: var(--blue-deep);
}

/* ── NEWS HERO ── */
.news-hero-wrap {
  padding: 0 24px 16px;
}

.news-hero {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 0.5px solid rgba(205, 210, 220, 0.25);
  transition: transform 0.2s ease;
}
.news-hero:hover { transform: translateY(-2px); }

.news-hero-img {
  width: 100%;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6,16,52,0.95) 0%, rgba(6,16,52,0.55) 45%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 30px;
}

.news-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.news-hero-title {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 75%;
  margin-bottom: 10px;
}

.news-hero-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 300;
  line-height: 1.5;
  max-width: 65%;
  margin-bottom: 16px;
}

.news-hero-author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.author-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 0.5px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.04em;
}

.author-name {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.06em;
  font-weight: 400;
}

/* ── NEWS LAYOUT ── */
.news-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  padding: 0 24px 40px;
  align-items: start;
}

/* ── NEWS FEED ── */
.news-feed {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.news-card {
  display: flex;
  gap: 16px;
  padding: 14px 12px;
  border-radius: 10px;
  cursor: pointer;
  border-bottom: 0.5px solid rgba(38, 40, 48, 0.06);
  transition: background 0.13s, transform 0.15s ease;
}

.news-card:hover {
  background: rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}

.news-card.hidden {
  display: none;
}

.nc-thumb {
  width: 120px;
  height: 82px;
  min-width: 120px;
  border-radius: 8px;
  border: 0.5px solid rgba(205, 210, 220, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  overflow: hidden;
  flex-shrink: 0;
}

.nc-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.nc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-deep);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.news-card:hover .nc-title {
  text-decoration: underline;
  text-decoration-color: rgba(38, 40, 48, 0.2);
}

.nc-sub {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.45;
  font-weight: 300;
}

.nc-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}

/* ── EMPTY STATE ── */
.feed-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}
.feed-empty span { font-size: 2rem; display: block; margin-bottom: 10px; }
.feed-empty p { font-size: 12px; font-weight: 300; letter-spacing: 0.04em; }

/* ── NEWS SIDEBAR ── */
.news-sidebar {
  position: sticky;
  top: 60px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ns-widget {
  background: rgba(255, 255, 255, 0.5);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  backdrop-filter: blur(14px);
}

.ns-widget-title {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ns-widget-title::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--border);
}

/* trending */
.ns-trending {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ns-trend-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.ns-trend-item:hover .ns-trend-title {
  text-decoration: underline;
  text-decoration-color: rgba(38, 40, 48, 0.2);
}

.ns-trend-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--border-strong);
  letter-spacing: -0.02em;
  line-height: 1;
  min-width: 18px;
  padding-top: 1px;
}

.ns-trend-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ns-trend-cat {
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  display: inline-block;
}
.ns-trend-cat.vgc      { background: rgba(227, 53, 13, 0.1); color: rgba(30, 70, 200, 0.8); }
.ns-trend-cat.tcg      { background: rgba(160, 60, 200, 0.1); color: rgba(140, 50, 190, 0.8); }
.ns-trend-cat.pokemon  { background: rgba(220, 150, 20, 0.1); color: rgba(180, 120, 10, 0.85); }
.ns-trend-cat.industria{ background: rgba(20, 160, 120, 0.1); color: rgba(15, 130, 100, 0.85); }
.ns-trend-cat.analisis { background: rgba(200, 60, 60, 0.1); color: rgba(170, 45, 45, 0.8); }

.ns-trend-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--blue-deep);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* tags */
.ns-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ns-tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.6);
  border: 0.5px solid var(--border-strong);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.13s, color 0.13s;
}
.ns-tag.active {
  background: var(--blue-deep);
  color: #fff;
  border-color: var(--blue-deep);
}
.ns-tag:hover {
  background: rgba(38, 40, 48, 0.08);
  color: var(--blue-deep);
}

/* newsletter */
.ns-newsletter .ns-nl-text {
  font-size: 10.5px;
  color: var(--text-secondary);
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 12px;
}

.ns-nl-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ns-nl-input {
  background: rgba(255, 255, 255, 0.7);
  border: 0.5px solid var(--border-strong);
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 11px;
  font-family: inherit;
  color: var(--blue-deep);
  outline: none;
  transition: border-color 0.15s;
}
.ns-nl-input::placeholder { color: var(--text-muted); }
.ns-nl-input:focus { border-color: rgba(227, 53, 13, 0.4); }

.ns-nl-btn {
  background: var(--blue-deep);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s;
}
.ns-nl-btn:hover { opacity: 0.85; }

/* ── MOVE DROPDOWN — Calculadora ── */
.vgcc-move-wrap-outer { position: relative; }
.vgcc-move-drop-list { position: absolute; top: 100%; left: 18px; right: 0; background: rgba(244,249,255,0.99); border: 0.5px solid var(--border-strong); border-radius: 8px; z-index: 200; max-height: 240px; overflow-y: auto; box-shadow: 0 6px 24px rgba(10,20,60,0.12); margin-top: 2px; }
.vgcc-move-drop-item { display: grid; grid-template-columns: 10px 1fr auto auto 28px; align-items: center; gap: 7px; padding: 8px 12px; cursor: pointer; border-bottom: 0.5px solid rgba(38,40,48,0.05); transition: background 0.1s; }
.vgcc-move-drop-item:hover { background: rgba(227,53,13,0.06); }
.vgcc-mdi-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.vgcc-mdi-name { font-size: 11px; color: var(--blue-deep); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vgcc-mdi-type { font-size: 7px; font-weight: 700; color: #fff; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.04em; white-space: nowrap; }
.vgcc-mdi-cat { font-size: 8px; color: var(--text-muted); }
.vgcc-mdi-bp { font-size: 10px; font-weight: 700; color: var(--blue-deep); text-align: right; }
.vgcc-mdi-meta { grid-column: 2 / -1; font-size: 8.5px; color: var(--text-muted); margin-top: 1px; }
.vgcc-mdi-desc { grid-column: 2 / -1; font-size: 9.5px; font-style: italic; color: var(--text-secondary); line-height: 1.4; margin-top: 2px; }

/* Team Builder move loading */
.tb2-move-loading { padding: 8px 12px; font-size: 9px; color: var(--text-muted); }

/* ── ITEM PICKER (Team Builder) ── */
.tb2-item-picker-wrap { display: flex; align-items: center; gap: 6px; }
.tb2-item-icon { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.tb2-item-drop { position: absolute; top: 100%; left: 0; right: 0; background: rgba(244,249,255,0.99); border: 0.5px solid var(--border-strong); border-radius: 8px; z-index: 200; max-height: 220px; overflow-y: auto; box-shadow: 0 6px 24px rgba(10,20,60,0.12); margin-top: 3px; }
.tb2-item-result { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 11px; color: var(--blue-deep); cursor: pointer; border-bottom: 0.5px solid rgba(38,40,48,0.05); transition: background 0.1s; }
.tb2-item-result:hover { background: rgba(227,53,13,0.06); }
.tb2-item-result img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }

/* ── MOVE SEARCH (Team Builder) ── */
.tb2-move-wrap { position: relative; }
.tb2-move-input-row { display: flex; align-items: center; gap: 5px; }
.tb2-move-type-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: none; }
.tb2-move-power { font-size: 8px; color: var(--text-muted); white-space: nowrap; min-width: 36px; text-align: right; }
.tb2-move-drop { position: absolute; top: 100%; left: 0; right: 0; background: rgba(244,249,255,0.99); border: 0.5px solid var(--border-strong); border-radius: 8px; z-index: 200; max-height: 200px; overflow-y: auto; box-shadow: 0 6px 24px rgba(10,20,60,0.12); margin-top: 2px; }
.tb2-move-result { display: flex; align-items: center; gap: 7px; padding: 7px 12px; font-size: 11px; cursor: pointer; border-bottom: 0.5px solid rgba(38,40,48,0.05); transition: background 0.1s; }
.tb2-move-result:hover { background: rgba(227,53,13,0.06); }
.tb2-mr-name { flex: 1; color: var(--blue-deep); text-transform: capitalize; }
.tb2-mr-type { font-size: 7.5px; font-weight: 700; color: #fff; padding: 1px 6px; border-radius: 4px; letter-spacing: 0.04em; white-space: nowrap; }
.tb2-mr-cat { font-size: 8px; color: var(--text-muted); }
.tb2-mr-power { font-size: 10px; font-weight: 700; color: var(--blue-deep); min-width: 24px; text-align: right; }

/* ── LOAD MORE ── */
.load-more-wrap {
  padding: 0 24px 48px;
  display: flex;
  justify-content: center;
}

.load-more-btn {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.65);
  border: 0.5px solid var(--border-strong);
  border-radius: 20px;
  padding: 9px 28px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  backdrop-filter: blur(10px);
  font-family: inherit;
}
.load-more-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--blue-deep);
}

/* ── RESPONSIVE NOTICIAS ── */
@media (max-width: 900px) {
  .news-layout {
    grid-template-columns: 1fr;
  }
  .news-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .ns-newsletter { grid-column: span 2; }
}

@media (max-width: 700px) {
  .page-header, .filter-bar, .news-hero-wrap, .news-layout, .load-more-wrap {
    padding-left: 14px;
    padding-right: 14px;
  }
  /* Cabecera de página centrada en todas las páginas (título, breadcrumb, subtítulo). */
  .page-header-inner { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
  .page-breadcrumb, .page-sub { text-align: center; }
  .page-header-count { margin-top: 2px; }
  .news-hero-img { height: 220px; }
  .news-hero-title { font-size: 17px; max-width: 100%; }
  .news-hero-sub { max-width: 100%; display: none; }
  .news-hero-overlay { padding: 18px 18px; }
  .nc-thumb { width: 80px; height: 58px; min-width: 80px; font-size: 1.4rem; }
  .nc-title { font-size: 12px; }
  .nc-sub { display: none; }
  .news-sidebar { grid-template-columns: 1fr; }
  .ns-newsletter { grid-column: span 1; }
  .page-title { font-size: 22px; text-align: center; }
  .filter-bar { padding-left: 14px; padding-right: 14px; }
}


/* ════════════════════════════════════════
   LOGIN PAGE
   ════════════════════════════════════════ */
.login-body { background: var(--bg); display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-bg { position: fixed; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,214,208,0.5) 0%, transparent 70%); pointer-events: none; }
.login-wrap { position: relative; z-index: 1; width: 100%; max-width: 400px; padding: 24px 16px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.login-logo { height: 72px; width: auto; object-fit: contain; }
.login-card { width: 100%; background: rgba(255,255,255,0.65); border: 0.5px solid var(--border-strong); border-radius: 16px; padding: 28px 28px 24px; backdrop-filter: blur(24px); }
.login-tabs { display: flex; gap: 4px; margin-bottom: 24px; background: rgba(38,40,48,0.06); border-radius: 10px; padding: 4px; }
.login-tab { flex: 1; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; background: none; border: none; border-radius: 7px; padding: 7px; cursor: pointer; color: var(--text-muted); font-family: inherit; transition: background 0.15s, color 0.15s; }
.login-tab.active { background: #fff; color: var(--blue-deep); box-shadow: 0 1px 4px rgba(38,40,48,0.1); }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form.hidden { display: none; }
.lf-group { display: flex; flex-direction: column; gap: 5px; }
.lf-label { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.lf-input { background: rgba(255,255,255,0.75); border: 0.5px solid var(--border-strong); border-radius: 8px; padding: 9px 12px; font-size: 12px; font-family: inherit; color: var(--blue-deep); outline: none; transition: border-color 0.15s; width: 100%; }
.lf-input:focus { border-color: rgba(227,53,13,0.45); }
.lf-pw-wrap { position: relative; }
.lf-pw-wrap .lf-input { padding-right: 36px; }
.lf-pw-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; padding: 2px; }
.lf-row { display: flex; align-items: center; justify-content: space-between; }
.lf-check { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); cursor: pointer; }
.lf-check input { accent-color: var(--blue-deep); }
.lf-terms { font-size: 10px; line-height: 1.5; }
.lf-terms a { color: var(--blue-deep); text-decoration: underline; }
.lf-forgot { font-size: 10px; color: var(--text-muted); text-decoration: none; letter-spacing: 0.02em; }
.lf-forgot:hover { color: var(--blue-deep); }
.lf-btn { background: var(--blue-deep); color: #fff; border: none; border-radius: 9px; padding: 10px; font-size: 11px; font-weight: 700; font-family: inherit; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: opacity 0.15s; width: 100%; }
.lf-btn:hover { opacity: 0.85; }
.lf-btn:disabled { opacity: 0.5; cursor: default; }
.lf-or { display: flex; align-items: center; gap: 10px; font-size: 9px; color: var(--text-muted); letter-spacing: 0.08em; }
.lf-or::before, .lf-or::after { content:''; flex:1; height:0.5px; background: var(--border); }
.lf-btn-google { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: rgba(255,255,255,0.8); border: 0.5px solid var(--border-strong); border-radius: 9px; padding: 9px; font-size: 11px; font-weight: 500; font-family: inherit; color: var(--blue-deep); cursor: pointer; transition: background 0.15s; }
.lf-btn-google:hover { background: #fff; }
.login-back a { font-size: 10px; color: var(--text-muted); text-decoration: none; letter-spacing: 0.04em; }
.login-back a:hover { color: var(--blue-deep); }


/* ════════════════════════════════════════
   POKÉDEX PAGE
   ════════════════════════════════════════ */
.pk-controls { padding: 0 24px 16px; display: flex; flex-direction: column; gap: 10px; }
.pk-search-wrap { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.7); border: 0.5px solid var(--border-strong); border-radius: 10px; padding: 8px 14px; backdrop-filter: blur(10px); }
.pk-search { border: none; background: none; outline: none; font-size: 12px; font-family: inherit; color: var(--blue-deep); width: 100%; }
.pk-search::placeholder { color: var(--text-muted); }
.pk-types { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex-wrap: wrap; }
.pk-types::-webkit-scrollbar { display: none; }
.pk-type-btn { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(255,255,255,0.55); border: 0.5px solid var(--border-strong); border-radius: 6px; padding: 4px 10px; cursor: pointer; color: var(--text-secondary); transition: background 0.13s, color 0.13s; font-family: inherit; flex-shrink: 0; }
.pk-type-btn.active, .pk-type-btn:hover { background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }

/* type badges */
.pk-type-badge { font-size: 7px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; display: inline-block; color: #fff; }
.type-normal{background:#9fa19f}.type-fire{background:#e8623d}.type-water{background:#4d90d5}.type-grass{background:#63bb5b}.type-electric{background:#f4d23c;color:#5a4500}.type-ice{background:#74cec0}.type-fighting{background:#ce4069}.type-poison{background:#ab6ac8}.type-ground{background:#d97845}.type-flying{background:#89aae3}.type-psychic{background:#f97176}.type-bug{background:#90c12c}.type-rock{background:#c9bb8a}.type-ghost{background:#5269ac}.type-dragon{background:#0a6dc4}.type-dark{background:#5a5366}.type-steel{background:#5a8ea2}.type-fairy{background:#ec8fe6}

.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; padding: 0 24px 40px; }
.pk-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px; color: var(--text-muted); font-size: 11px; grid-column: 1/-1; }
.pk-spinner { width: 28px; height: 28px; border: 2.5px solid var(--border); border-top-color: var(--blue-deep); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.pk-card { background: rgba(255,255,255,0.55); border: 0.5px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; transition: transform 0.15s, background 0.13s; }
.pk-card:hover { transform: translateY(-2px); background: rgba(255,255,255,0.85); }
.pk-card-img { height: 90px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255,222,216,0.2), rgba(255,208,200,0.1)); }
.pk-card-img img { width: 74px; height: 74px; object-fit: contain; }
.pk-card-body { padding: 7px 8px 9px; display: flex; flex-direction: column; gap: 3px; }
.pk-card-num { font-size: 8px; color: var(--text-muted); font-weight: 300; letter-spacing: 0.06em; }
.pk-card-name { font-size: 11px; font-weight: 700; color: var(--blue-deep); text-transform: capitalize; letter-spacing: -0.01em; }
.pk-card-types { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 2px; }

/* modal */
.pk-modal-bg { position: fixed; inset: 0; background: rgba(10,20,60,0.45); backdrop-filter: blur(4px); z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.pk-modal-bg.active { display: flex; }
.pk-modal { background: rgba(240,246,255,0.97); border: 0.5px solid var(--border-strong); border-radius: 16px; max-width: 680px; width: 100%; max-height: 92vh; overflow-y: auto; position: relative; padding: 22px; backdrop-filter: blur(20px); }
.pk-modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-muted); line-height: 1; }
.pk-modal-grid { display: grid; grid-template-columns: 200px 1fr; gap: 28px; }
.pk-modal-art { width: 180px; height: 180px; object-fit: contain; }
.pk-modal-types { display: flex; gap: 5px; flex-wrap: wrap; margin: 8px 0; }
.pk-modal-desc { font-size: 11px; color: var(--text-secondary); font-weight: 300; line-height: 1.6; margin-top: 10px; }
.pk-modal-num { font-size: 11px; color: var(--text-muted); letter-spacing: 0.08em; }
.pk-modal-name { font-size: 22px; font-weight: 700; color: var(--blue-deep); text-transform: capitalize; letter-spacing: -0.02em; margin: 4px 0 12px; }
.pk-modal-details { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.pk-detail { background: rgba(255,255,255,0.6); border: 0.5px solid var(--border); border-radius: 7px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.pk-detail span { font-size: 8px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.pk-detail strong { font-size: 11px; color: var(--blue-deep); text-transform: capitalize; }
.pk-modal-stats { display: flex; flex-direction: column; gap: 6px; }
.pk-stat-row { display: grid; grid-template-columns: 60px 36px 1fr; align-items: center; gap: 8px; }
.pk-stat-name { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.pk-stat-val { font-size: 11px; font-weight: 700; color: var(--blue-deep); text-align: right; }
.pk-stat-bar-bg { height: 5px; background: rgba(38,40,48,0.08); border-radius: 3px; overflow: hidden; }
.pk-stat-bar { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.pk-stat-total .pk-stat-name { font-weight: 700; color: var(--blue-deep); }
.pk-stat-total .pk-stat-val { font-size: 13px; }


/* ════════════════════════════════════════
   TEAM BUILDER v2 (Champions Lab style)
   ════════════════════════════════════════ */

/* Header */
.tb2-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 4px 24px 18px; flex-wrap: wrap; }
.tb2-title { font-size: 28px; font-weight: 700; color: var(--blue-deep); letter-spacing: -0.03em; line-height: 1; }
.tb2-subtitle { font-size: 11px; color: var(--text-muted); font-weight: 300; margin-top: 5px; }
.tb2-team-name { background: rgba(255,255,255,0.7); border: 0.5px solid var(--border-strong); border-radius: 10px; padding: 10px 16px; font-size: 15px; font-weight: 600; font-family: inherit; color: var(--blue-deep); outline: none; min-width: 220px; transition: border-color 0.15s; }
.tb2-team-name:focus { border-color: rgba(227,53,13,0.4); }

/* Actions */
.tb2-actions { display: flex; align-items: center; gap: 7px; padding: 0 24px 20px; flex-wrap: wrap; }
.tb2-btn { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; font-family: inherit; background: rgba(255,255,255,0.65); border: 0.5px solid var(--border-strong); border-radius: 8px; padding: 8px 14px; cursor: pointer; color: var(--blue-deep); transition: background 0.13s, border-color 0.13s; }
.tb2-btn:hover { background: rgba(255,255,255,0.9); }
.tb2-btn-primary { background: rgba(227,53,13,0.9); color: #fff; border-color: transparent; }
.tb2-btn-primary:hover { background: var(--blue-deep); }
.tb2-btn-danger { color: #c0392b; border-color: rgba(192,57,43,0.25); }
.tb2-btn-danger:hover { background: rgba(192,57,43,0.07); }

/* Slots row */
.tb2-slots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 0 24px 12px; }
.tb2-slot { background: rgba(255,255,255,0.45); border: 1.5px dashed rgba(205,210,220,0.5); border-radius: 14px; min-height: 122px; cursor: pointer; transition: background 0.13s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; overflow: hidden; }
.tb2-slot:hover { background: rgba(255,255,255,0.7); border-color: rgba(227,53,13,0.35); }
.tb2-slot--active { border-style: solid; border-color: rgba(227,53,13,0.55); background: rgba(255,255,255,0.75); box-shadow: 0 0 0 3px rgba(227,53,13,0.1); transform: translateY(-2px); }
.tb2-slot--filled { border-style: solid; border-color: var(--border); }
.tb2-slot-plus { font-size: 32px; line-height: 1; color: var(--border-strong); font-weight: 300; }
.tb2-slot-label { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.tb2-slot-del { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  background: rgba(192,57,43,0.12); border: none; border-radius: 50%; color: #c0392b; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0;
  opacity: 0.55; z-index: 3; transition: opacity 0.13s, background 0.13s, transform 0.12s; }
.tb2-slot:hover .tb2-slot-del { opacity: 1; }
.tb2-slot-del:hover { background: #c0392b; color: #fff; transform: scale(1.12); }
.tb2-slot-art { width: 100%; display: flex; align-items: center; justify-content: center; padding: 6px 6px 0; }
.tb2-slot-art img { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(10,20,60,0.15)); }
.tb2-slot-info { text-align: center; padding: 0 6px 7px; }
.tb2-slot-name { font-size: 11px; font-weight: 700; color: var(--blue-deep); }
.tb2-slot-typedots { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.tb2-slot-item { font-size: 8.5px; color: var(--text-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.tb2-slot-swap { margin-top: 7px; width: 100%; font-family: inherit; font-size: 8.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(227,53,13,0.9); background: rgba(227,53,13,0.08); border: 1px solid rgba(227,53,13,0.22); border-radius: 8px; padding: 5px 6px; cursor: pointer; opacity: 0; transform: translateY(2px); transition: opacity 0.15s, transform 0.15s, background 0.15s, color 0.15s; }
.tb2-slot--filled:hover .tb2-slot-swap, .tb2-slot--active .tb2-slot-swap { opacity: 1; transform: none; }
.tb2-slot-swap:hover { background: rgba(227,53,13,0.9); color: #fff; border-color: rgba(227,53,13,0.9); }

/* type dots */
.tb2-typedot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.type-dot-normal{background:#9fa19f}.type-dot-fire{background:#e8623d}.type-dot-water{background:#4d90d5}.type-dot-grass{background:#63bb5b}.type-dot-electric{background:#f4d23c}.type-dot-ice{background:#74cec0}.type-dot-fighting{background:#ce4069}.type-dot-poison{background:#ab6ac8}.type-dot-ground{background:#d97845}.type-dot-flying{background:#89aae3}.type-dot-psychic{background:#f97176}.type-dot-bug{background:#90c12c}.type-dot-rock{background:#c9bb8a}.type-dot-ghost{background:#5269ac}.type-dot-dragon{background:#0a6dc4}.type-dot-dark{background:#5a5366}.type-dot-steel{background:#5a8ea2}.type-dot-fairy{background:#ec8fe6}

/* ═══ MEGA EVOLUCIÓN ═══ */
.tbed-mega { display: flex; align-items: center; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.tbed-mega-lbl { font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-right: 2px; }
.tbed-mega-btn { font-size: 9.5px; font-weight: 700; font-family: inherit; background: linear-gradient(135deg, rgba(150,60,200,0.12), rgba(100,60,220,0.12)); border: 0.5px solid rgba(140,60,210,0.3); border-radius: 14px; padding: 4px 12px; cursor: pointer; color: #8a3cc8; transition: background 0.13s; letter-spacing: 0.04em; }
.tbed-mega-btn:hover { background: linear-gradient(135deg, rgba(150,60,200,0.2), rgba(100,60,220,0.2)); }
.tbed-mega-btn.active { background: linear-gradient(135deg, #9b3cc8, #6a3cdc); color: #fff; border-color: transparent; }
.tbed-mega-off { background: rgba(255,255,255,0.6); border-color: var(--border-strong); color: var(--text-secondary); }
.tbed-mega-off.active { background: var(--blue-deep); color: #fff; }
.tb2-slot-mega { position: absolute; top: 6px; left: 7px; font-size: 7px; font-weight: 800; letter-spacing: 0.08em; color: #fff; background: linear-gradient(135deg, #9b3cc8, #6a3cdc); padding: 2px 6px; border-radius: 5px; z-index: 2; }

/* ═══ TEAM SUMMARY ═══ */
.tb2-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 8px 24px 16px; background: rgba(255,255,255,0.5); border: 0.5px solid var(--border); border-radius: 14px; overflow: hidden; }
.tb2-sum-col { padding: 16px 18px; }
.tb2-sum-col + .tb2-sum-col { border-left: 0.5px solid var(--border); }
.tb2-sum-title { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.tb2-sum-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.tb2-sum-cell { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.6); border: 0.5px solid var(--border); border-radius: 7px; padding: 3px 7px 3px 4px; }
.tb2-sum-cell.tb2-sum-danger { background: rgba(224,92,92,0.12); border-color: rgba(224,92,92,0.35); }
.tb2-sum-cell.tb2-sum-good { background: rgba(106,173,106,0.1); border-color: rgba(106,173,106,0.3); }
.tb2-sum-type { font-size: 7px; font-weight: 700; color: #fff; padding: 2px 5px; border-radius: 4px; letter-spacing: 0.03em; text-transform: uppercase; }
.tb2-sum-count { font-size: 11px; font-weight: 700; color: var(--blue-deep); }
.tb2-sum-cell.tb2-sum-danger .tb2-sum-count { color: #c0392b; }
.tb2-sum-none { font-size: 10px; color: #2c8a4a; }
.tb2-sum-analysis { display: flex; flex-direction: column; gap: 6px; }
.tb2-sum-issue { font-size: 10px; color: var(--text-secondary); line-height: 1.4; }
.tb2-sum-issue.tb2-sum-verdict { font-size: 10.5px; font-weight: 600; color: var(--blue-deep); padding-bottom: 4px; border-bottom: 0.5px solid var(--border); margin-bottom: 2px; }

/* ── Posibles leads ── */
.tb2-leads { margin: 0 24px 16px; background: rgba(255,255,255,0.5); border: 0.5px solid var(--border); border-radius: 14px; padding: 14px 18px; }
.tb2-leads .tb2-sum-title { margin-bottom: 10px; }
.tb2-leads-list { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.tb2-lead { background: rgba(255,255,255,0.6); border: 0.5px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.tb2-lead-pair { display: flex; align-items: center; gap: 8px; }
.tb2-lead-mon { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--blue-deep); }
.tb2-lead-mon img { width: 38px; height: 38px; object-fit: contain; image-rendering: auto; }
.tb2-lead-plus { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.tb2-lead-why { font-size: 10px; color: var(--text-secondary); line-height: 1.45; }
@media (max-width: 700px) { .tb2-leads { margin-left: 14px; margin-right: 14px; } .tb2-leads-list { grid-template-columns: 1fr; } }

/* ═══ EDITOR v3 (Champions Lab style) ═══ */
.tb2-editor { margin: 8px 24px 16px; background: rgba(255,255,255,0.62); border: 0.5px solid var(--border-strong); border-radius: 16px; overflow: visible; backdrop-filter: blur(16px); }

.tb2-editor { background: rgba(255,255,255,0.5); }

/* Header */
.tbed-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px 12px; gap: 16px; flex-wrap: wrap; }
.tbed-header-left { display: flex; align-items: center; gap: 14px; }
.tbed-art { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(10,20,60,0.12)); }
.tbed-pk-name { font-size: 19px; font-weight: 700; color: var(--blue-deep); letter-spacing: -0.03em; }
.tbed-types { display: flex; gap: 5px; margin-top: 6px; }
.tbed-header-right { display: flex; align-items: center; gap: 8px; }
.tbed-tabs { display: flex; align-items: center; gap: 4px; background: rgba(38,40,48,0.04); border-radius: 11px; padding: 4px; }
.tbed-tab { font-size: 10.5px; font-weight: 600; font-family: inherit; background: none; border: none; border-radius: 8px; padding: 7px 14px; cursor: pointer; color: var(--text-muted); transition: background 0.18s, color 0.18s; }
.tbed-tab.active { background: #fff; color: var(--blue-deep); box-shadow: 0 1px 4px rgba(38,40,48,0.08); }
.tbed-tab:hover:not(.active) { color: var(--text-secondary); }
.tbed-btn-change { font-size: 10.5px; font-weight: 600; font-family: inherit; background: none; border: none; border-radius: 8px; padding: 7px 12px; cursor: pointer; color: rgba(227,53,13,0.75); transition: background 0.15s; margin-left: 4px; }
.tbed-btn-change:hover { background: rgba(227,53,13,0.08); }
.tbed-btn-remove { width: 38px; height: 38px; border-radius: 10px; background: rgba(192,57,43,0.1); border: none; color: #c0392b; font-size: 26px; font-weight: 700; line-height: 1; cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.12s; }
.tbed-btn-remove:hover { background: #c0392b; color: #fff; transform: scale(1.08); }

/* Quick sets — calm neutral chips */
.tb2-quick-sets, .tbed-quick-sets { display: flex; align-items: center; gap: 7px; padding: 0 30px 22px; flex-wrap: wrap; }
.tbed-quick-sets::before { content: 'Sets rápidos'; font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }
.tbed-quick-btn { font-size: 10.5px; font-weight: 500; font-family: inherit; background: rgba(255,255,255,0.7); border: 0.5px solid var(--border-strong); border-radius: 18px; padding: 6px 15px; cursor: pointer; color: var(--text-secondary); transition: background 0.15s, color 0.15s, border-color 0.15s; }
.tbed-quick-btn:hover { background: #fff; color: var(--blue-deep); border-color: rgba(227,53,13,0.3); }

/* Body — compacto, una vista */
.tbed-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 0.5px solid var(--border); }
.tbed-left { padding: 16px 20px; border-right: 0.5px solid var(--border); display: flex; flex-direction: column; gap: 9px; }
.tbed-right { padding: 16px 20px; }
.tbed-section-lbl { font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }

/* Move pills — compactas */
.tbed-moves { display: flex; flex-direction: column; gap: 5px; }
.tbed-move-wrap { position: relative; }
.tbed-move-pill { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,0.7); border: 0.5px solid var(--border); border-radius: 9px; padding: 8px 12px; cursor: pointer; transition: border-color 0.16s, background 0.16s, box-shadow 0.16s; }
.tbed-move-pill:hover { border-color: rgba(227,53,13,0.25); background: #fff; box-shadow: 0 2px 10px rgba(38,40,48,0.05); }
.tbed-move-name { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--blue-deep); }
.tbed-move-badge { font-size: 8px; font-weight: 700; color: #fff; padding: 3px 8px; border-radius: 6px; letter-spacing: 0.05em; }
.tbed-move-cat { display: inline-flex; align-items: center; }
.move-cat-icon { height: 12px; width: auto; vertical-align: middle; display: inline-block; image-rendering: auto; }
.tbed-move-bp { font-size: 9.5px; color: var(--text-muted); min-width: 40px; text-align: right; }
.tbed-move-arrow { font-size: 9px; color: var(--text-muted); }
.tbed-move-drop { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; background: rgba(250,252,255,0.99); border: 0.5px solid var(--border-strong); border-radius: 14px; z-index: 50; box-shadow: 0 12px 44px rgba(10,20,60,0.16); overflow: hidden; max-height: 400px; display: flex; flex-direction: column; }
.tbed-move-search-wrap { padding: 14px 16px; border-bottom: 0.5px solid var(--border); }
.tbed-move-search-input { width: 100%; background: rgba(255,255,255,0.9); border: 0.5px solid var(--border-strong); border-radius: 20px; padding: 9px 16px; font-size: 12px; font-family: inherit; color: var(--blue-deep); outline: none; }
.tbed-move-list { overflow-y: auto; }
.tbed-move-option { display: grid; grid-template-columns: 38px 1fr auto auto; gap: 9px; align-items: center; padding: 11px 16px; cursor: pointer; border-bottom: 0.5px solid rgba(38,40,48,0.04); transition: background 0.12s; }
.tbed-move-option:hover { background: rgba(227,53,13,0.05); }
.tbed-mopt-type { font-size: 7.5px; font-weight: 700; color: #fff; padding: 3px 0; border-radius: 5px; text-align: center; letter-spacing: 0.03em; }
.tbed-mopt-name { font-size: 12px; font-weight: 600; color: var(--blue-deep); }
.tbed-mopt-cat { font-size: 9px; color: var(--text-muted); }
.tbed-mopt-bp { font-size: 11px; font-weight: 700; color: var(--blue-deep); min-width: 26px; text-align: right; }
.tbed-mopt-desc { grid-column: 2 / -1; font-size: 9.5px; font-style: italic; color: var(--text-secondary); line-height: 1.45; margin-top: 4px; }

/* Ability cards — compactas */
.tbed-abilities { display: flex; flex-direction: column; gap: 4px; }
.tbed-abil-card { background: rgba(255,255,255,0.55); border: 0.5px solid var(--border); border-radius: 8px; padding: 7px 11px; cursor: pointer; transition: background 0.16s, border-color 0.16s; }
.tbed-abil-card:hover { background: #fff; border-color: rgba(227,53,13,0.2); }
.tbed-abil-card.active { background: rgba(227,53,13,0.06); border-color: rgba(227,53,13,0.35); }
.tbed-abil-name { font-size: 11.5px; font-weight: 700; color: var(--blue-deep); margin-bottom: 1px; }
.tbed-abil-h { font-size: 9px; color: rgba(227,53,13,0.7); font-weight: 600; }
.tbed-abil-desc { font-size: 9px; color: var(--text-secondary); line-height: 1.35; }

/* Nature / tera row */
.tbed-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tbed-field { display: flex; flex-direction: column; }
.tbed-select { background: rgba(255,255,255,0.7); border: 0.5px solid var(--border-strong); border-radius: 8px; padding: 8px 12px; font-size: 11.5px; font-family: inherit; color: var(--blue-deep); outline: none; transition: border-color 0.16s, background 0.16s; cursor: pointer; }
.tbed-select:hover { background: #fff; }
.tbed-select:focus { border-color: rgba(227,53,13,0.35); }
.tbed-nature-sugg { font-size: 9px; color: rgba(227,53,13,0.7); margin-top: 5px; }

/* Item display */
.tbed-item-display { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,0.7); border: 0.5px solid var(--border-strong); border-radius: 8px; padding: 8px 12px; cursor: pointer; transition: border-color 0.16s, background 0.16s; }
.tbed-item-display:hover { border-color: rgba(227,53,13,0.25); background: #fff; }
.tbed-item-icon { width: 24px; height: 24px; object-fit: contain; }
.tbed-item-display span { font-size: 12px; color: var(--blue-deep); flex: 1; }
.tbed-item-arrow { font-size: 9px; color: var(--text-muted); flex: 0 !important; }
.tbed-item-search { width: 100%; background: #fff; border: 0.5px solid rgba(227,53,13,0.35); border-radius: 10px; padding: 11px 14px; font-size: 12px; font-family: inherit; color: var(--blue-deep); outline: none; }
.tbed-item-desc { font-size: 9.5px; color: var(--text-secondary); line-height: 1.45; margin-top: 8px; }

/* Stats (right) — calm */
.tbed-stats-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.tbed-stats-lbl { font-size: 8.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.tbed-ev-total { font-size: 13px; font-weight: 700; color: var(--blue-deep); }
.tbed-stats-cols-header { display: grid; grid-template-columns: 60px 34px 1fr 24px 46px 38px; gap: 8px; align-items: center; margin-bottom: 9px; padding: 0 2px; }
.tbed-stats-cols-header span { font-size: 7px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.tbed-stat-row { display: grid; grid-template-columns: 60px 34px 1fr 24px 46px 38px; gap: 8px; align-items: center; margin-bottom: 8px; }
.tbed-stat-name { font-size: 10px; font-weight: 600; }
.tbed-stat-base { font-size: 10px; color: var(--text-muted); text-align: center; }
.tbed-stat-slider-wrap { display: flex; align-items: center; }
.tbed-stat-slider { width: 100%; height: 4px; cursor: pointer; }
.tbed-stat-plus { width: 22px; height: 22px; border-radius: 6px; border: 0.5px solid var(--border); background: rgba(255,255,255,0.7); font-size: 13px; line-height: 1; cursor: pointer; color: var(--text-secondary); transition: background 0.13s, color 0.13s; }
.tbed-stat-plus:hover { background: rgba(227,53,13,0.08); color: var(--blue-deep); }
.tbed-stat-ev { background: rgba(255,255,255,0.7); border: 0.5px solid var(--border); border-radius: 6px; padding: 4px; font-size: 10px; font-family: inherit; color: var(--blue-deep); outline: none; text-align: center; width: 100%; }
.tbed-stat-total { font-size: 12px; font-weight: 700; color: var(--blue-deep); text-align: right; }

/* Type chart grids (defenses / coverage) */
.tbed-type-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.tbed-type-cell { border-radius: 8px; overflow: hidden; text-align: center; border: 0.5px solid var(--border); }
.tbed-tc-type { font-size: 7px; font-weight: 700; color: #fff; padding: 4px 0; letter-spacing: 0.04em; text-transform: uppercase; }
.tbed-tc-eff { font-size: 10px; font-weight: 700; padding: 5px 0; }
.tbed-type-cell.td-weak   { background: rgba(224,92,92,0.1); }
.tbed-type-cell.td-weak .tbed-tc-eff   { color: #c0392b; }
.tbed-type-cell.td-resist { background: rgba(77,144,213,0.09); }
.tbed-type-cell.td-resist .tbed-tc-eff { color: #2c6aa0; }
.tbed-type-cell.td-immune { background: rgba(120,120,130,0.1); }
.tbed-type-cell.td-immune .tbed-tc-eff { color: #555; }
.tbed-type-cell.td-neutral .tbed-tc-eff { color: var(--text-muted); }

/* Tournament teams */
.tb2-tourney { margin: 8px 24px 40px; background: rgba(255,255,255,0.45); border: 0.5px solid var(--border); border-radius: 14px; overflow: hidden; }
/* Dentro del popup no hace falta el margen de página ni el fondo/borde propio
   (ya los pone .pk-modal). */
.pk-modal .tb2-tourney { margin: 0; background: none; border: none; border-radius: 0; }
.pk-modal .tb2-tourney-header { padding: 0 0 14px; }
/* En el popup se "carga más" (se añaden tarjetas), así que en vez de una
   tira con scroll horizontal, las tarjetas se envuelven en filas centradas. */
.pk-modal .tb2-tourney-list { padding: 0; flex-wrap: wrap; overflow: visible; justify-content: center; }
.tb2-tourney-header { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 0.5px solid var(--border); }
.tb2-tourney-icon { font-size: 16px; }
.tb2-tourney-title { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-deep); }
.tb2-tourney-count { font-size: 9px; font-weight: 600; background: rgba(227,53,13,0.1); color: rgba(30,70,200,0.8); border-radius: 6px; padding: 2px 8px; }
.tb2-tourney-sub { font-size: 10px; color: var(--text-muted); font-weight: 300; margin-left: auto; }
/* Equipos sugeridos en formato horizontal (como los decks del TCG) */
.tb2-tourney-list { display: flex; gap: 10px; overflow-x: auto; padding: 14px 20px; scroll-snap-type: x proximity; }
.tb2-tourney-list::-webkit-scrollbar { height: 8px; }
.tb2-tourney-list::-webkit-scrollbar-thumb { background: rgba(227,53,13,0.25); border-radius: 4px; }
.tb2-sug-loading { padding: 16px 4px; font-size: 11px; color: var(--text-muted); }
.tb2-sugcard { scroll-snap-align: start; flex: 0 0 auto; width: 222px; display: flex; flex-direction: column; gap: 6px; padding: 11px 10px;
  border-radius: 12px; background: rgba(255,255,255,0.6); border: 0.5px solid var(--border-strong); box-shadow: 0 2px 8px rgba(10,20,60,0.05);
  cursor: pointer; text-align: center; transition: transform 0.12s, box-shadow 0.12s; }
.tb2-sugcard:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(10,20,60,0.1); }
.tb2-sugcard-name { font-size: 11px; font-weight: 700; color: var(--blue-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb2-sugcard-sprites { display: flex; justify-content: center; align-items: center; gap: 2px; }
.tb2-bubble { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(150,165,195,0.18); border: 1px solid rgba(150,165,195,0.4); transition: background 0.2s, border-color 0.2s; }
.tb2-bubble img { width: 28px; height: 28px; object-fit: contain; image-rendering: -webkit-optimize-contrast; }
.tb2-sugcard-author { display: inline-flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%;
  font-size: 11px; font-weight: 800; color: var(--blue-deep); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 3px 8px; border-radius: 999px; background: rgba(227,53,13,0.1); transition: background 0.13s, color 0.13s; }
.tb2-sugcard-author:hover { background: var(--blue-deep, #e3350d); color: #fff; }
.tb2-sugcard-author svg { flex: 0 0 auto; }
.tb2-sugcard-author--plain { background: none; color: var(--text-muted); font-weight: 600; cursor: default; }
.tb2-sugcard-load { font-size: 10px; font-weight: 700; color: #fff; border-radius: 7px; padding: 5px;
  background: linear-gradient(135deg, var(--blue-deep, #e3350d), #f1502f); }

.tb2-tourney-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 0.5px solid rgba(38,40,48,0.05); cursor: pointer; transition: background 0.12s; }
.tb2-tourney-row:last-child { border-bottom: none; }
.tb2-tourney-row:hover { background: rgba(255,255,255,0.6); }
.tb2-tourney-row-left { display: flex; flex-direction: column; gap: 8px; }
.tb2-tourney-trainer { display: flex; align-items: center; gap: 10px; }
.tb2-tourney-avatar { font-size: 20px; }
.tb2-tourney-trainer-name { font-size: 13px; font-weight: 700; color: var(--blue-deep); display: block; }
.tb2-tourney-sub-text { font-size: 10px; color: var(--text-muted); font-weight: 300; }
.tb2-tourney-sprites { display: flex; gap: 2px; align-items: center; }
.tb2-tourney-sprites img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 1px 4px rgba(10,20,60,0.12)); }
/* Equipos sugeridos: avatar al lado, miniaturas pequeñas debajo del nombre */
.tb2-tourney-row-left:has(.tb2-sug-info) { flex-direction: row; align-items: center; gap: 10px; }
.tb2-sug-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb2-sug-sprites { display: flex; gap: 1px; margin-top: 3px; flex-wrap: wrap; }
.tb2-sug-sprites img { width: 26px; height: 26px; object-fit: contain; image-rendering: -webkit-optimize-contrast; }
.tb2-tourney-record { font-size: 11px; font-weight: 700; color: #27ae60; letter-spacing: 0.04em; flex-shrink: 0; }

/* My teams modal list */
.my-team-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 0.5px solid var(--border); gap: 12px; }
.my-team-row:last-child { border-bottom: none; }
.my-team-name { font-size: 13px; font-weight: 700; color: var(--blue-deep); display: block; }
.my-team-pks { font-size: 9px; color: var(--text-muted); }
.my-team-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Picker modal */
.tb2-picker-bg { position: fixed; inset: 0; background: rgba(10,20,60,0.45); backdrop-filter: blur(6px); z-index: 300; display: none; align-items: center; justify-content: center; padding: 20px; }
.tb2-picker-bg.active { display: flex; }
.tb2-picker { background: rgba(244,249,255,0.98); border: 0.5px solid var(--border-strong); border-radius: 18px; width: 100%; max-width: 760px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(10,20,60,0.2); }
.tb2-picker-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 0.5px solid var(--border); flex-shrink: 0; }
.tb2-picker-title { font-size: 20px; font-weight: 700; color: var(--blue-deep); letter-spacing: -0.02em; }
.tb2-picker-close { background: rgba(38,40,48,0.06); border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 20px; line-height: 1; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; transition: background 0.13s; }
.tb2-picker-close:hover { background: rgba(38,40,48,0.12); }
.tb2-picker-search-wrap { display: flex; align-items: center; gap: 10px; margin: 14px 20px 0; background: rgba(255,255,255,0.8); border: 0.5px solid var(--border-strong); border-radius: 10px; padding: 10px 16px; flex-shrink: 0; }
.tb2-picker-search { border: none; background: none; outline: none; font-size: 13px; font-family: inherit; color: var(--blue-deep); width: 100%; }
.tb2-picker-search::placeholder { color: var(--text-muted); }
.tb2-picker-types { display: flex; align-items: center; gap: 6px; padding: 12px 20px 0; flex-wrap: wrap; flex-shrink: 0; }
.tb2-type-label { font-size: 7.5px; font-weight: 800; letter-spacing: 0.14em; color: var(--text-muted); text-transform: uppercase; margin-right: 2px; }
.tb2-type-pill { font-size: 10px; font-weight: 500; font-family: inherit; background: rgba(255,255,255,0.65); border: 1px solid var(--border-strong); border-radius: 20px; padding: 4px 11px; cursor: pointer; color: var(--text-secondary); transition: background 0.13s, border-color 0.13s, color 0.13s; }
.tb2-type-pill:hover { border-color: rgba(227,53,13,0.4); color: var(--blue-deep); }
.tb2-type-pill.active { background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }
.tb2-picker-count { font-size: 10px; color: var(--text-muted); padding: 10px 20px 4px; flex-shrink: 0; }
.tb2-picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px 20px 20px; overflow-y: auto; flex: 1; }
.tb2-pkcell { background: rgba(255,255,255,0.75); border: 0.5px solid var(--border); border-radius: 10px; padding: 14px 10px 10px; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; transition: background 0.12s, transform 0.12s, border-color 0.12s; }
.tb2-pkcell:hover { background: rgba(255,255,255,0.97); transform: translateY(-2px); border-color: rgba(227,53,13,0.3); }
.tb2-pkcell-img { width: 72px; height: 72px; object-fit: contain; }
.tb2-pkcell-name { font-size: 11px; font-weight: 600; color: var(--blue-deep); text-align: center; }
.tb2-pkcell-dots { display: flex; gap: 4px; justify-content: center; }

/* shared modal */
.export-modal { max-width: 500px; }
.export-title { font-size: 16px; font-weight: 700; color: var(--blue-deep); margin-bottom: 14px; }
.export-textarea { width: 100%; height: 220px; background: rgba(255,255,255,0.7); border: 0.5px solid var(--border-strong); border-radius: 8px; padding: 12px; font-size: 11px; font-family: 'Courier New', monospace; color: var(--blue-deep); resize: none; outline: none; margin-bottom: 12px; }
.deck-export-actions { display: flex; gap: 8px; }
.deck-export-actions .lf-btn { flex: 1; }
.lf-btn--ghost { background: rgba(255,255,255,0.7) !important; border: 0.5px solid var(--border-strong) !important; color: var(--blue-deep) !important; }
.lf-btn--ghost:hover { background: #fff !important; }


/* ════════════════════════════════════════
   CALCULADORA DE DAÑO — VGC Multi Calc style
   ════════════════════════════════════════ */

/* Summary bar */
.vgcc-summary { display: grid; grid-template-columns: 1fr 48px 1fr; gap: 0; margin: 0 24px 12px; background: rgba(255,255,255,0.6); border: 0.5px solid var(--border-strong); border-radius: 12px; overflow: hidden; backdrop-filter: blur(14px); min-height: 60px; }
.vgcc-sum-side { padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; line-height: 1.4; }
.vgcc-sum-side--right { border-left: 0.5px solid var(--border); }
.vgcc-sum-vs { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.1em; border-left: 0.5px solid var(--border); border-right: 0.5px solid var(--border); }
.vgcc-sum-empty { font-size: 10px; color: var(--text-muted); font-style: italic; }
.vgcc-sum-move { font-size: 11px; color: var(--text-secondary); }
.vgcc-sum-range { font-size: 16px; font-weight: 700; color: var(--blue-deep); letter-spacing: -0.02em; }
.vgcc-sum-range.vgcc-sum-ko { color: #c0392b; }
.vgcc-sum-detail { font-size: 9px; color: var(--text-muted); }
.vgcc-sum-line { font-size: 11px; color: var(--text-secondary); }
.vgcc-sum-verdict { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.vgcc-verdict-sure  { color: #c0392b; }
.vgcc-verdict-high  { color: #d9542b; }
.vgcc-verdict-mid   { color: #e8783a; }
.vgcc-verdict-low   { color: #c79a2a; }
.vgcc-verdict-two   { color: #4a90d9; }
.vgcc-verdict-three { color: #5a8ea2; }
.vgcc-verdict-weak  { color: var(--text-muted); }
.vgcc-sum-ko-badge { display: inline-block; background: rgba(192,57,43,0.12); color: #c0392b; border-radius: 5px; padding: 1px 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; }

/* Main layout */
.vgcc-layout { display: grid; grid-template-columns: 1fr minmax(190px, 250px) 1fr; gap: 12px; padding: 0 24px 16px; align-items: start; }

/* Campo central (estilo Showdown) */
.vgcc-field-mid { background: rgba(255,255,255,0.5); border: 0.5px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.vgcc-field-mid-title { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-deep); text-align: center; margin-bottom: 6px; }
.vgcc-field-mid-label { font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 7px 0 3px; }
.vgcc-field-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.vgcc-field-mid .vgcc-cond { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; padding: 3px 7px; border-radius: 6px; background: rgba(38,40,48,0.05); cursor: pointer; transition: background 0.12s; }
.vgcc-field-mid .vgcc-cond:hover { background: rgba(227,53,13,0.12); }
.vgcc-field-mid .vgcc-cond input { width: 12px; height: 12px; accent-color: var(--blue-deep); }
.vgcc-field-box { border: 0.5px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.vgcc-field-box:last-child { margin-bottom: 0; }
.vgcc-field-mid-label--sub { margin-top: 8px; }

/* ── Calculadora compacta para caber en una pantalla (≈1080p) ── */
.page-calc .calc-arena2 { height: 150px; }
.page-calc .calc-arena-side img { max-height: 120px; max-width: 150px; }
.page-calc .calc-arena-side-atk { left: 30%; } .page-calc .calc-arena-side-def { right: 30%; }
.page-calc .page-header { padding-top: 4px; }
.page-calc .page-header-inner { padding-bottom: 4px; }
.page-calc .vgcc-reg-bar { margin-bottom: 8px; padding-top: 4px; padding-bottom: 4px; }
.page-calc .vgcc-summary { margin-bottom: 6px; }
.page-calc .vgcc-layout { padding-bottom: 10px; }

/* Arena del calculador — mismo formato horizontal que el Team Builder */
.calc-arena2 { height: 330px; margin: 0 24px 14px; }
.calc-arena-side { position: absolute; bottom: 4px; z-index: 2; display: flex; align-items: flex-end; justify-content: center; min-width: 44px; min-height: 44px; }
.calc-arena-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: rgba(255,255,255,0.75); padding: 8px 10px; border: 1.5px dashed rgba(255,255,255,0.35);
  border-radius: 12px; background: rgba(255,255,255,0.06);
}
.calc-arena-placeholder-label { font-size: 9px; font-weight: 700; text-align: center; max-width: 78px; line-height: 1.2; }
.calc-arena-side-atk { left: 34%; }
.calc-arena-side-def { right: 34%; }
.calc-arena-side img { max-height: 270px; max-width: 340px; image-rendering: pixelated; filter: drop-shadow(0 12px 12px rgba(0,0,0,0.45)); }
.calc-arena-side-atk img { transform: scaleX(-1); }    /* el atacante mira hacia el defensor (cara a cara) */
.calc-arena-side.tb-arena-enter { animation: tbArenaEnter 0.5s cubic-bezier(0.2,0.9,0.3,1.2) backwards; }
.calc-arena-vs2 { position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%); z-index: 3;
  font-size: 22px; font-weight: 900; color: #fff; letter-spacing: 1px; opacity: 0.92; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.calc-arena-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center;
  color: rgba(255,255,255,0.62); font-size: 12px; z-index: 4; }
.vgcc-panel { position: relative; background: rgba(255,255,255,0.5); border: 0.5px solid var(--border); border-radius: 12px; overflow: hidden; }
.vgcc-panel-close-mobile { display: none; }

/* Toolbar */
.vgcc-panel-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 0.5px solid var(--border); background: rgba(255,255,255,0.4); }
.vgcc-roll-group { display: flex; align-items: center; gap: 4px; }
.vgcc-roll-label { font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }
.vgcc-roll-btn { font-size: 9px; font-weight: 600; font-family: inherit; background: rgba(255,255,255,0.6); border: 0.5px solid var(--border-strong); border-radius: 5px; padding: 4px 10px; cursor: pointer; color: var(--text-secondary); transition: background 0.12s, color 0.12s; }
.vgcc-roll-btn.active { background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }
.vgcc-toolbar-btns { display: flex; gap: 5px; }
.vgcc-tool-btn { font-size: 9px; font-weight: 600; font-family: inherit; background: none; border: 0.5px solid var(--border); border-radius: 5px; padding: 4px 9px; cursor: pointer; color: var(--text-muted); transition: background 0.12s; }
.vgcc-tool-btn:hover { background: rgba(255,255,255,0.7); color: var(--blue-deep); }

/* Pokemon header */
.vgcc-pk-header { padding: 12px 14px 8px; border-bottom: 0.5px solid var(--border); }
.vgcc-pk-search-wrap { position: relative; margin-bottom: 8px; }
.vgcc-pk-search { width: 100%; background: rgba(255,255,255,0.75); border: 0.5px solid var(--border-strong); border-radius: 8px; padding: 8px 12px; font-size: 12px; font-family: inherit; color: var(--blue-deep); outline: none; transition: border-color 0.15s; }
.vgcc-pk-search:focus { border-color: rgba(227,53,13,0.4); }
.vgcc-pk-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: rgba(245,250,255,0.99); border: 0.5px solid var(--border-strong); border-radius: 8px; z-index: 100; max-height: 220px; overflow-y: auto; display: none; box-shadow: 0 6px 24px rgba(10,20,60,0.12); margin-top: 3px; }
.vgcc-drop-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 11px; color: var(--blue-deep); cursor: pointer; text-transform: capitalize; border-bottom: 0.5px solid rgba(38,40,48,0.05); transition: background 0.1s; }
.vgcc-drop-item:hover { background: rgba(227,53,13,0.06); }
.vgcc-pk-preview { display: flex; align-items: center; gap: 14px; }
.vgcc-pk-sprite { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 3px 10px rgba(10,20,60,0.18)); flex-shrink: 0; }
.vgcc-pk-name { font-size: 17px; font-weight: 700; color: var(--blue-deep); display: block; }
.vgcc-pk-types { display: flex; gap: 4px; margin-top: 3px; }

/* HP bar */
.vgcc-hp-wrap { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 0.5px solid var(--border); }
.vgcc-hp-bar { flex: 1; height: 8px; background: linear-gradient(90deg,#5acd6e,#f4c842,#e05c5c); border-radius: 4px; transition: width 0.3s; position: relative; }
.vgcc-hp-bar::after { content:''; position:absolute; right:0; top:0; bottom:0; background:rgba(38,40,48,0.08); border-radius: 0 4px 4px 0; }
.vgcc-hp-label { font-size: 10px; font-weight: 600; color: var(--blue-deep); white-space: nowrap; }

/* Moves */
.vgcc-moves { padding: 10px 14px; border-bottom: 0.5px solid var(--border); }
.vgcc-moves-header { display: grid; grid-template-columns: 18px 1fr 32px 80px; gap: 6px; align-items: center; margin-bottom: 6px; }
.vgcc-moves-hint { font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.vgcc-move-row { display: grid; grid-template-columns: 16px 1fr 26px 104px; gap: 5px; align-items: center; margin-bottom: 5px; }
.vgcc-move-row input[type="checkbox"] { accent-color: var(--blue-deep); width: 13px; height: 13px; cursor: pointer; }
.vgcc-move-name { background: rgba(255,255,255,0.7); border: 0.5px solid var(--border-strong); border-radius: 6px; padding: 5px 8px; font-size: 11px; font-family: inherit; color: var(--blue-deep); outline: none; transition: border-color 0.15s; }
.vgcc-move-name:focus { border-color: rgba(227,53,13,0.4); }
.vgcc-move-bp { font-size: 10px; font-weight: 600; color: var(--text-muted); text-align: center; }
.vgcc-move-dmg { font-size: 10px; font-weight: 700; color: var(--blue-deep); text-align: right; white-space: nowrap; padding-right: 4px; }
.vgcc-dmg-ko { color: #c0392b !important; }
.vgcc-dmg-2hko { color: #e8783a !important; }
.vgcc-dmg-immune { color: var(--text-muted) !important; font-weight: 400; }

/* Gear (item/ability/tera/nature) */
.vgcc-gear { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 14px; border-bottom: 0.5px solid var(--border); }
.vgcc-gear-field { display: flex; flex-direction: column; gap: 3px; }
.vgcc-field-label { font-size: 7.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.vgcc-field-input { background: rgba(255,255,255,0.7); border: 0.5px solid var(--border-strong); border-radius: 6px; padding: 5px 8px; font-size: 10px; font-family: inherit; color: var(--blue-deep); outline: none; transition: border-color 0.15s; width: 100%; }
.vgcc-field-input:focus { border-color: rgba(227,53,13,0.4); }

/* Stats table */
.vgcc-stats-table { padding: 10px 14px 6px; }
.vgcc-stats-header { display: grid; grid-template-columns: 52px 36px 18px 44px 1fr 40px 40px; gap: 4px; align-items: center; margin-bottom: 5px; }
.vgcc-stats-header span { font-size: 7.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.vgcc-stat-row { display: grid; grid-template-columns: 52px 36px 18px 44px 1fr 40px 40px; gap: 4px; align-items: center; margin-bottom: 5px; }
.vgcc-stat-name { font-size: 9px; color: var(--text-secondary); font-weight: 500; }
.vgcc-stat-base { font-size: 10px; color: var(--text-muted); text-align: center; }
.vgcc-stat-nat { font-size: 10px; text-align: center; line-height: 1; }
.vgcc-nat-plus { color: #e05c5c; font-size: 9px; }
.vgcc-nat-minus { color: #4a90d9; font-size: 9px; }
.vgcc-stat-ev { background: rgba(255,255,255,0.7); border: 0.5px solid var(--border); border-radius: 4px; padding: 3px 4px; font-size: 9px; font-family: inherit; color: var(--blue-deep); outline: none; text-align: center; width: 100%; }
.vgcc-stat-bar-wrap { height: 5px; background: rgba(38,40,48,0.08); border-radius: 3px; overflow: hidden; }
.vgcc-stat-bar-fill { height: 100%; background: rgba(227,53,13,0.45); border-radius: 3px; transition: width 0.2s; }
.vgcc-stat-bar--max { background: rgba(106,173,106,0.7); }
.vgcc-stat-val { font-size: 11px; font-weight: 700; color: var(--blue-deep); text-align: center; }
.vgcc-stat-hp { color: #5acd6e; }
.vgcc-boost-sel { background: rgba(255,255,255,0.7); border: 0.5px solid var(--border); border-radius: 4px; padding: 2px 3px; font-size: 9px; font-family: inherit; color: var(--blue-deep); outline: none; width: 100%; }
.vgcc-stats-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 0.5px solid var(--border); margin-top: 4px; flex-wrap: wrap; gap: 6px; }
.vgcc-bst-wrap { display: flex; align-items: center; gap: 5px; }
.vgcc-bst-label { font-size: 8px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.vgcc-bst-val { font-size: 11px; font-weight: 700; color: var(--blue-deep); }
.vgcc-stats-actions { display: flex; gap: 5px; }
.vgcc-stats-btn { font-size: 9px; font-weight: 600; font-family: inherit; background: rgba(255,255,255,0.65); border: 0.5px solid var(--border-strong); border-radius: 6px; padding: 4px 9px; cursor: pointer; color: var(--text-secondary); transition: background 0.12s; }
.vgcc-stats-btn:hover { background: rgba(255,255,255,0.9); }
.vgcc-stats-btn--primary { background: rgba(227,53,13,0.1); color: rgba(30,70,200,0.85); border-color: rgba(227,53,13,0.25); }

/* Rolls */
.vgcc-rolls-wrap { padding: 8px 14px; background: rgba(255,255,255,0.25); }
.vgcc-rolls-label { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-right: 6px; }
.vgcc-rolls { font-size: 9px; color: var(--text-muted); font-family: 'Courier New', monospace; }

/* Field conditions */
.vgcc-field-section { margin: 0 24px 40px; background: rgba(255,255,255,0.5); border: 0.5px solid var(--border); border-radius: 12px; overflow: hidden; }
.vgcc-field-title { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 0.5px solid var(--border); font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); background: rgba(255,255,255,0.35); }
.vgcc-field-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.vgcc-field-col { padding: 14px 16px; }
.vgcc-field-col + .vgcc-field-col { border-left: 0.5px solid var(--border); }
.vgcc-field-col-label { font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.vgcc-cond-group { display: flex; flex-direction: column; gap: 5px; }
.vgcc-cond { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-secondary); cursor: pointer; padding: 3px 0; transition: color 0.1s; }
.vgcc-cond:hover { color: var(--blue-deep); }
.vgcc-cond input { accent-color: var(--blue-deep); }

@media (max-width: 900px) {
  .vgcc-layout { grid-template-columns: 1fr; }
  .vgcc-field-grid { grid-template-columns: 1fr; }
  .vgcc-field-col + .vgcc-field-col { border-left: none; border-top: 0.5px solid var(--border); }
  .vgcc-summary { grid-template-columns: 1fr; }
  .vgcc-sum-vs { display: none; }
  .vgcc-sum-side--right { border-left: none; border-top: 0.5px solid var(--border); }

  /* Este resultado ya se ve en la lista de Movimientos de cada panel. */
  .page-calc .vgcc-summary { display: none; }

  /* Toca el Pokémon aliado o el rival en la arena para abrir su panel; si
     ninguno está abierto, se ven las opciones de campo (Atacante/Defensor/Global). */
  .calc-arena-side { cursor: pointer; }
  .vgcc-layout[data-mobile="field"] #panelA,
  .vgcc-layout[data-mobile="field"] #panelB { display: none; }
  .vgcc-layout[data-mobile="a"] #panelB,
  .vgcc-layout[data-mobile="a"] .vgcc-field-mid { display: none; }
  .vgcc-layout[data-mobile="b"] #panelA,
  .vgcc-layout[data-mobile="b"] .vgcc-field-mid { display: none; }
  .calc-arena-side--active { outline: 2px solid rgba(227,53,13,0.55); outline-offset: 3px; border-radius: 14px; }
  /* Cruz para cerrar el panel abierto y volver a las opciones de campo. */
  .vgcc-panel-close-mobile {
    display: flex; align-items: center; justify-content: center; position: absolute; top: 8px; right: 8px; z-index: 5;
    width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(38,40,48,0.08);
    color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer;
  }
  .vgcc-panel-close-mobile:hover { background: rgba(227,53,13,0.12); color: var(--blue-deep); }
}
@media (max-width: 700px) {
  .vgcc-summary, .vgcc-layout, .vgcc-field-section { margin-left: 14px; margin-right: 14px; }
  .vgcc-gear { grid-template-columns: 1fr; }
  .vgcc-stats-header, .vgcc-stat-row { grid-template-columns: 48px 32px 16px 38px 1fr 36px 36px; }
}


/* ════════════════════════════════════════
   DECK BUILDER
   ════════════════════════════════════════ */
.deck-layout { display: grid; grid-template-columns: 1fr 280px; gap: 16px; padding: 0 24px 40px; align-items: start; }
.deck-browser { background: rgba(255,255,255,0.45); border: 0.5px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.mobile-sheet-handle { display: none; }   /* solo se muestra en móvil (ver media query) */
.deck-browser-header { padding: 14px 14px 10px; border-bottom: 0.5px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.dk-search-wrap { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.7); border: 0.5px solid var(--border-strong); border-radius: 8px; padding: 7px 12px; }
.dk-search { border: none; background: none; outline: none; font-size: 12px; font-family: inherit; color: var(--blue-deep); width: 100%; }
.dk-filters { display: flex; gap: 5px; }
.dk-filter { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: none; border: 0.5px solid var(--border); border-radius: 6px; padding: 4px 10px; cursor: pointer; color: var(--text-muted); font-family: inherit; transition: background 0.13s, color 0.13s; }
.dk-filter.active { background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }

.dk-card { background: rgba(255,255,255,0.55); border: 0.5px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer; transition: transform 0.13s; position: relative; }
.dk-card:hover { transform: translateY(-2px); }
.dk-card-img { height: 60px; display: flex; align-items: center; justify-content: center; }
.dk-card-emoji { font-size: 1.6rem; }
.dk-card-info { padding: 5px 7px 7px; }
.dk-card-name { font-size: 9px; font-weight: 700; color: var(--blue-deep); display: block; line-height: 1.3; }
.dk-card-rarity { font-size: 7.5px; color: var(--text-muted); display: block; margin-top: 2px; }
.dk-add-btn { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; background: rgba(227,53,13,0.8); color: #fff; border: none; border-radius: 50%; font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.13s; }
.dk-card:hover .dk-add-btn { opacity: 1; }

/* type bg colors for cards */
.type-bg-fire{background:linear-gradient(135deg,rgba(232,98,61,0.15),rgba(232,98,61,0.05))}
.type-bg-water{background:linear-gradient(135deg,rgba(77,144,213,0.15),rgba(77,144,213,0.05))}
.type-bg-grass{background:linear-gradient(135deg,rgba(99,187,91,0.15),rgba(99,187,91,0.05))}
.type-bg-electric{background:linear-gradient(135deg,rgba(244,210,60,0.2),rgba(244,210,60,0.05))}
.type-bg-psychic{background:linear-gradient(135deg,rgba(249,113,118,0.15),rgba(249,113,118,0.05))}
.type-bg-dark{background:linear-gradient(135deg,rgba(90,83,102,0.15),rgba(90,83,102,0.05))}
.type-bg-steel{background:linear-gradient(135deg,rgba(90,142,162,0.15),rgba(90,142,162,0.05))}
.type-bg-dragon{background:linear-gradient(135deg,rgba(10,109,196,0.15),rgba(10,109,196,0.05))}
.type-bg-fairy{background:linear-gradient(135deg,rgba(236,143,230,0.15),rgba(236,143,230,0.05))}
.type-bg-pokemon{background:linear-gradient(135deg,rgba(227,53,13,0.1),rgba(227,53,13,0.03))}
.type-bg-trainer{background:linear-gradient(135deg,rgba(20,160,120,0.1),rgba(20,160,120,0.03))}
.type-bg-energy{background:linear-gradient(135deg,rgba(244,210,60,0.15),rgba(244,210,60,0.03))}

.deck-list-panel { background: rgba(255,255,255,0.5); border: 0.5px solid var(--border); border-radius: 12px; padding: 16px; position: sticky; top: 60px; }
.deck-list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.deck-list-title { font-size: 13px; font-weight: 700; color: var(--blue-deep); }
.deck-rename-btn { background: none; border: none; cursor: pointer; font-size: 14px; }
.deck-progress { height: 5px; background: rgba(38,40,48,0.08); border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.deck-progress-bar { height: 100%; background: rgba(227,53,13,0.5); border-radius: 3px; transition: width 0.3s, background 0.3s; }
.deck-sections { display: flex; flex-direction: column; gap: 14px; max-height: 360px; overflow-y: auto; }
.deck-section-label { font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.deck-section-label span { background: rgba(38,40,48,0.08); border-radius: 4px; padding: 1px 5px; font-weight: 700; }
.dk-list-item { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 5px; transition: background 0.1s; }
.dk-list-item:hover { background: rgba(255,255,255,0.6); }
.dk-list-count { font-size: 11px; font-weight: 700; color: var(--text-secondary); min-width: 18px; }
.dk-list-name { flex: 1; font-size: 10px; color: var(--blue-deep); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-list-actions { display: flex; gap: 3px; }
.dk-cnt-btn { width: 20px; height: 20px; background: rgba(255,255,255,0.7); border: 0.5px solid var(--border); border-radius: 5px; font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--blue-deep); transition: background 0.1s; }
.dk-cnt-btn:hover { background: rgba(227,53,13,0.1); }
.dk-list-empty { font-size: 10px; color: var(--text-muted); padding: 8px 0; font-weight: 300; }
.deck-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 0.5px solid var(--border); }
.dk-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(255,255,255,0.5); border-radius: 7px; padding: 7px 4px; }
.dk-stat span { font-size: 7px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.dk-stat strong { font-size: 13px; font-weight: 700; color: var(--blue-deep); }

/* toast */
.deck-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--blue-deep); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; padding: 9px 20px; border-radius: 20px; opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; z-index: 300; }
.deck-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* card detail modal */
.card-detail-modal { max-width: 360px; }

/* Deck Builder — 60-slot visual deck */
/* ═══ GUÍA DE CONSTRUCCIÓN DE MAZOS ═══ */
.deck-guide { padding: 8px 24px 48px; }
/* La guía en modal: ancha y compacta para leerla sin scroll */
.deck-guide-modal { max-width: 1180px; width: 96%; padding: 24px 28px; }
.deck-guide-modal .deck-guide-title { font-size: 18px; }
.deck-guide-modal .deck-guide-intro { margin: 4px 0 14px; font-size: 11.5px; }
.deck-guide-modal .deck-guide-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.deck-guide-modal .deck-guide-card { padding: 12px 14px; border-radius: 11px; }
.deck-guide-modal .deck-guide-card h3 { font-size: 12px; margin-bottom: 7px; }
.deck-guide-modal .deck-guide-card li { font-size: 10px; line-height: 1.4; gap: 5px; }
.deck-guide-modal .dg-tip { font-size: 9.5px; margin-top: 7px; padding-top: 7px; }
@media (max-width: 820px) { .deck-guide-modal .deck-guide-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .deck-guide-modal .deck-guide-grid { grid-template-columns: 1fr; } }
.deck-guide-title { font-size: 20px; font-weight: 700; color: var(--blue-deep); letter-spacing: -0.02em; }
.deck-guide-intro { font-size: 12px; color: var(--text-secondary); font-weight: 300; line-height: 1.6; max-width: 720px; margin: 6px 0 18px; }
.deck-guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.deck-guide-card { background: rgba(255,255,255,0.5); border: 0.5px solid var(--border); border-radius: 14px; padding: 18px 20px; position: relative; }
.dg-num { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: rgba(227,53,13,0.35); margin-bottom: 4px; }
.deck-guide-card h3 { font-size: 13px; font-weight: 700; color: var(--blue-deep); margin-bottom: 10px; }
.deck-guide-card ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.deck-guide-card li { font-size: 11px; color: var(--text-secondary); line-height: 1.5; padding-left: 14px; position: relative; }
.deck-guide-card li::before { content: '▹'; position: absolute; left: 0; color: rgba(227,53,13,0.6); }
.deck-guide-card strong { color: var(--blue-deep); font-weight: 600; }
.dg-tip { font-size: 10.5px; color: var(--text-muted); font-style: italic; line-height: 1.5; margin-top: 10px; padding-top: 10px; border-top: 0.5px solid var(--border); }

/* Validación */
.tb-action-finish { background: rgba(106,173,106,0.15) !important; border-color: rgba(106,173,106,0.4) !important; color: #2c8a4a !important; font-weight: 700; }
.tb-action-finish:hover { background: rgba(106,173,106,0.25) !important; }
.dk-validate-verdict { font-size: 14px; font-weight: 700; padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; text-align: center; }
.dk-validate-verdict.ok { background: rgba(106,173,106,0.15); color: #27ae60; }
.dk-validate-verdict.bad { background: rgba(224,92,92,0.12); color: #c0392b; }
.dk-validate-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.dk-validate-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 9px; background: rgba(255,255,255,0.5); border: 0.5px solid var(--border); }
.dk-validate-mark { font-size: 14px; font-weight: 700; flex-shrink: 0; }
.dk-validate-item.ok .dk-validate-mark { color: #27ae60; }
.dk-validate-item.bad .dk-validate-mark { color: #c0392b; }
.dk-validate-text { display: flex; flex-direction: column; gap: 2px; }
.dk-validate-text strong { font-size: 12px; color: var(--blue-deep); }
.dk-validate-text span { font-size: 10px; color: var(--text-muted); }
.dk-validate-note { font-size: 10.5px; color: var(--text-muted); margin-top: 14px; text-align: center; }
.dk-validate-note strong { color: var(--blue-deep); }

/* ═══ DECK LAYOUT v3 — mazo (grande) izquierda, explorador (scroll) derecha ═══ */
/* Altura fija al viewport: todo cabe al entrar; las cartas scrollean dentro de su caja */
.deck-layout2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; padding: 0 24px 10px; align-items: stretch; height: min(calc(100vh - 234px), 880px); }

/* Calc: efecto visual de clima/terreno en la arena */
.calc-arena2[data-weather]::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.calc-arena2[data-weather=""]::after { display: none; }
.calc-arena2[data-weather="sun"]::after { background: radial-gradient(circle at 50% -10%, rgba(255,205,110,0.4), transparent 60%); }
.calc-arena2[data-weather="rain"]::after { background: linear-gradient(rgba(18,40,90,0.4), rgba(18,40,90,0.12)),
  repeating-linear-gradient(108deg, rgba(255,222,216,0.28) 0 1px, transparent 1px 9px); animation: calcRain 0.45s linear infinite; }
@keyframes calcRain { from { background-position: 0 0, 0 0; } to { background-position: 0 0, -9px 26px; } }
.calc-arena2[data-weather="sand"]::after { background: linear-gradient(rgba(205,170,105,0.32), rgba(150,120,70,0.2)); }
.calc-arena2[data-weather="snow"]::after { background: linear-gradient(rgba(220,235,255,0.3), rgba(200,220,255,0.16)),
  radial-gradient(circle, rgba(255,255,255,0.85) 1px, transparent 1.6px); background-size: auto, 28px 28px; animation: calcSnow 3.2s linear infinite; }
@keyframes calcSnow { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 0 44px; } }
.calc-arena2[data-weather="electric"]::after { background: radial-gradient(circle at 50% 110%, rgba(245,210,60,0.4), transparent 55%); }
.calc-arena2[data-weather="grassy"]::after  { background: radial-gradient(circle at 50% 110%, rgba(99,187,91,0.45), transparent 55%); }
.calc-arena2[data-weather="psychic"]::after { background: radial-gradient(circle at 50% 110%, rgba(249,113,118,0.4), transparent 55%); }
.calc-arena2[data-weather="misty"]::after   { background: radial-gradient(circle at 50% 110%, rgba(236,143,230,0.4), transparent 55%); }
.calc-arena2[data-weather="trickroom"]::after { background: repeating-linear-gradient(45deg, rgba(150,80,200,0.14) 0 11px, transparent 11px 22px); }

/* ── Capa de PARTÍCULAS de clima (más vistosa, 2 profundidades) ── */
.calc-arena-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 0.35s; }
.calc-arena-fx::before, .calc-arena-fx::after { content: ''; position: absolute; inset: -20% -20% -20% -20%; }
.calc-arena2[data-weather="rain"] .calc-arena-fx,
.calc-arena2[data-weather="snow"] .calc-arena-fx,
.calc-arena2[data-weather="sand"] .calc-arena-fx,
.calc-arena2[data-weather="sun"] .calc-arena-fx { opacity: 1; }

/* Lluvia: dos cortinas de gotas a distinta velocidad y ángulo */
.calc-arena2[data-weather="rain"] .calc-arena-fx::before {
  background: repeating-linear-gradient(105deg, rgba(190,220,255,0.55) 0 1.5px, transparent 1.5px 11px);
  background-size: 26px 70px; animation: arenaRainFar 0.7s linear infinite; }
.calc-arena2[data-weather="rain"] .calc-arena-fx::after {
  background: repeating-linear-gradient(102deg, rgba(220,238,255,0.7) 0 2px, transparent 2px 8px);
  background-size: 18px 48px; animation: arenaRainNear 0.42s linear infinite; }
@keyframes arenaRainFar  { to { background-position: -40px 70px; } }
@keyframes arenaRainNear { to { background-position: -60px 48px; } }

/* Nieve: dos capas de copos cayendo y derivando */
.calc-arena2[data-weather="snow"] .calc-arena-fx::before {
  background-image: radial-gradient(circle, rgba(255,255,255,0.95) 1.6px, transparent 2.4px);
  background-size: 46px 46px; animation: arenaSnowFar 7s linear infinite; }
.calc-arena2[data-weather="snow"] .calc-arena-fx::after {
  background-image: radial-gradient(circle, rgba(255,255,255,0.8) 2.4px, transparent 3.4px);
  background-size: 72px 72px; background-position: 24px 0; animation: arenaSnowNear 4.2s linear infinite; }
@keyframes arenaSnowFar  { to { background-position: 14px 160px; } }
@keyframes arenaSnowNear { to { background-position: -18px 200px; } }

/* Arena/tormenta: ráfagas horizontales de polvo */
.calc-arena2[data-weather="sand"] .calc-arena-fx::before {
  background: repeating-linear-gradient(6deg, rgba(222,190,120,0.4) 0 2px, transparent 2px 18px);
  background-size: 70px 34px; animation: arenaSandFar 0.9s linear infinite; }
.calc-arena2[data-weather="sand"] .calc-arena-fx::after {
  background-image: radial-gradient(circle, rgba(200,165,100,0.55) 1.3px, transparent 2px);
  background-size: 38px 30px; animation: arenaSandNear 0.6s linear infinite; }
@keyframes arenaSandFar  { to { background-position: 120px 8px; } }
@keyframes arenaSandNear { to { background-position: 90px -6px; } }

/* Sol: destellos suaves flotando + brillo pulsante */
.calc-arena2[data-weather="sun"] .calc-arena-fx::before {
  background-image: radial-gradient(circle, rgba(255,244,196,0.95) 1.4px, transparent 2.4px);
  background-size: 64px 64px; animation: arenaSunDrift 9s linear infinite, arenaSunPulse 4s ease-in-out infinite alternate; }
@keyframes arenaSunDrift { to { background-position: 30px -40px; } }
@keyframes arenaSunPulse { from { opacity: 0.35; } to { opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) { .calc-arena-fx, .calc-arena-fx::before, .calc-arena-fx::after { animation: none !important; } }

/* Calc: orden de ataque por velocidad (barra a todo el ancho, debajo del resumen) */
.vgcc-speed-bar { margin: 8px 24px 0; padding: 9px 16px; border-radius: 10px; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  background: rgba(227,53,13,0.07); border: 0.5px solid var(--border); }
.vgcc-speed-bar:empty { display: none; }
.vgcc-speed-bar strong { color: var(--blue-deep); }
/* Va DENTRO de la arena (calculadora.html) → banner fijo junto con ella, en vez
   de una caja aparte que se desplace por su cuenta. */
.tb-arena .vgcc-speed-bar {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 4;
  margin: 0; max-width: calc(100% - 32px); font-size: 11px; padding: 5px 12px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Calc: marca clara del movimiento seleccionado (checkbox marcado) */
.vgcc-move-chk { accent-color: var(--blue-deep, #e3350d); width: 15px; height: 15px; cursor: pointer; }
.vgcc-move-row:has(.vgcc-move-chk:checked) { background: rgba(227,53,13,0.09); border-radius: 8px; box-shadow: inset 3px 0 0 var(--blue-deep, #e3350d); }
.vgcc-move-row:has(.vgcc-move-chk:checked) .vgcc-move-name { font-weight: 700; color: var(--blue-deep); }
.vgcc-move-row:has(.vgcc-move-chk:checked) .vgcc-move-dmg { font-weight: 800; }

/* Calc: selector de objeto + descripción de objeto/habilidad */
.vgcc-pick-wrap { position: relative; }
.vgcc-pick-drop { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 3px; max-height: 240px; overflow-y: auto;
  background: #fff; border: 0.5px solid var(--border-strong); border-radius: 9px; box-shadow: 0 8px 24px rgba(10,20,60,0.16); }
.vgcc-pick-opt { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 11.5px; cursor: pointer; }
.vgcc-pick-opt:hover { background: rgba(227,53,13,0.08); }
.vgcc-pick-opt img { flex: 0 0 auto; image-rendering: -webkit-optimize-contrast; }
.vgcc-pick-desc { display: flex; align-items: flex-start; gap: 6px; font-size: 10px; color: var(--text-muted); line-height: 1.35; margin-top: 4px; }
.vgcc-pick-desc img { flex: 0 0 auto; margin-top: 1px; }
/* Calc: slider de EV (estilo Champions) */
.vgcc-stat-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 4px; cursor: pointer;
  background: linear-gradient(to right, var(--blue-deep, #e3350d) 0%, var(--blue-deep, #e3350d) var(--fill, 0%), rgba(38,40,48,0.14) var(--fill, 0%)); }
.vgcc-stat-slider--max { background: linear-gradient(to right, #2bb56a 0%, #2bb56a var(--fill,100%), rgba(38,40,48,0.14) var(--fill,100%)); }
.vgcc-stat-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--blue-deep, #e3350d); box-shadow: 0 1px 3px rgba(0,0,0,0.25); cursor: pointer; }
.vgcc-stat-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--blue-deep, #e3350d); cursor: pointer; }

/* ── ARENA 3D DEL EQUIPO (Team Builder) ──── */
.tb-arena { position: relative; height: 290px; border-radius: 16px; overflow: hidden; margin: 0 24px 16px;
  perspective: 900px; background: radial-gradient(ellipse at 50% 25%, #2a4a8c 0%, #16264f 60%, #0c1730 100%);
  box-shadow: inset 0 -30px 60px rgba(0,0,0,0.45), inset 0 10px 40px rgba(80,130,220,0.25); }
.tb-arena-sky { position: absolute; inset: 0 0 50% 0;
  background: radial-gradient(circle at 50% 120%, rgba(120,170,255,0.35), transparent 60%); pointer-events: none; }
/* Suelo del estadio en perspectiva, con líneas tipo tablero */
.tb-arena-floor { position: absolute; left: -25%; right: -25%; bottom: -12%; height: 60%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 54px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 54px),
    linear-gradient(180deg, #3b6b3f, #24502b);
  transform: rotateX(64deg); transform-origin: bottom center; box-shadow: 0 -8px 30px rgba(0,0,0,0.4); }
/* Escenario: fila de Pokémon del equipo */
.tb-arena-stage { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 2.4vw, 46px); padding: 0 16px; flex-wrap: nowrap; }
.tb-arena-mon { position: relative; background: transparent; border: none; cursor: pointer; padding: 0; margin: 0;
  display: flex; align-items: flex-end; justify-content: center;
  animation: tbArenaEnter 0.5s cubic-bezier(0.2,0.9,0.3,1.2) backwards; animation-delay: var(--d, 0s);
  transition: transform 0.18s, opacity 0.18s, filter 0.18s; }
.tb-arena-mon:hover { transform: translateY(-6px) scale(1.06); z-index: 5; }
/* Pokémon en edición: resaltado y por encima del resto */
.tb-arena-mon--active { transform: translateY(-10px) scale(1.18); z-index: 6; }
.tb-arena-mon--active img { filter: drop-shadow(0 0 10px rgba(130,180,255,0.95)) drop-shadow(0 8px 8px rgba(0,0,0,0.45)) brightness(1.07); }
/* Cuando hay uno en edición, se atenúa el resto */
.tb-arena-stage.has-active .tb-arena-mon:not(.tb-arena-mon--active) { opacity: 0.42; filter: saturate(0.7); }
.tb-arena-stage.has-active .tb-arena-mon:not(.tb-arena-mon--active):hover { opacity: 0.85; }
.tb-arena-mon img { max-height: 158px; max-width: 165px; image-rendering: pixelated;
  filter: drop-shadow(0 9px 9px rgba(0,0,0,0.45)); }
.tb-arena-mon-shadow { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); width: 76px; height: 16px;
  border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,0.5), transparent 70%); filter: blur(2px); }
.tb-arena-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.65); font-size: 12px; z-index: 2; }
@keyframes tbArenaEnter {
  0%   { opacity: 0; transform: translateY(-24px) scale(0.7); }
  60%  { opacity: 1; transform: translateY(5px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── CARTAS FALTANTES (comparador colección) ── */
.dk-missing-ok { padding: 18px; text-align: center; color: #1e8e4e; font-weight: 700; font-size: 13px; }
.dk-missing-summary { font-size: 12px; font-weight: 800; color: var(--blue-deep); margin-bottom: 10px; }
.dk-missing-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; }
.dk-missing-row { display: grid; grid-template-columns: 28px 1fr auto auto auto; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 8px; background: rgba(255,255,255,0.5); border: 0.5px solid var(--border); }
.dk-missing-qty { font-weight: 800; font-size: 12px; color: var(--text-primary); }
.dk-missing-name { font-size: 11.5px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-missing-have { font-size: 10px; color: var(--text-muted); }
.dk-missing-price { font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.dk-missing-buy { font-size: 10px; font-weight: 700; text-decoration: none; white-space: nowrap; color: #fff;
  padding: 5px 9px; border-radius: 7px; background: linear-gradient(135deg, #e3350d, #f1502f); }
.dk-missing-buy:hover { filter: brightness(1.08); }

/* Sets sin logo promocional → "sobre" (booster pack) */
.col-set-pack { width: 100%; min-height: 96px; margin: 0 auto; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; }
.col-set-pack-glyph { font-size: 30px; }
.col-set-pack-logo { width: 86%; max-width: 150px; height: auto; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(10,20,60,0.18)); }
.col-set-pack-name { font-size: 10px; font-weight: 700; color: var(--text-secondary); text-align: center; line-height: 1.15; }

/* Wishlist: menos margen arriba (que no haga scroll) */
.page-wishlist .page-header { padding-top: 2px; }
.page-wishlist .page-header-inner { padding-bottom: 2px; }
.page-wishlist .page-title { font-size: 22px; }
.page-wishlist .page-sub { display: none; }
.page-wishlist .wl-filters { padding-top: 0; padding-bottom: 10px; }

/* Popup de carta similar */
.wl-sim-modal { max-width: 560px; }
.wl-sim-pop-head { display: flex; gap: 16px; margin-bottom: 12px; }
.wl-sim-pop-img { width: 120px; border-radius: 9px; box-shadow: 0 5px 16px rgba(10,20,60,0.16); }
.wl-sim-pop-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wl-sim-modal .wish-chart { min-height: 150px; height: 160px; }
.wl-sim-modal .wish-chartsvg { height: 160px; }

/* Wishlist: animación del gráfico al cambiar de rango + cartas similares */
@keyframes wlChartIn { from { opacity: 0; transform: translateY(8px) scaleY(0.9); } to { opacity: 1; transform: none; } }
.wl-chart-anim { animation: wlChartIn 0.35s cubic-bezier(0.2,0.8,0.3,1) both; }
.wl-similar { margin-top: 12px; }
.wl-similar-title { font-size: 11px; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; }
.wl-similar-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.wl-sim-card { flex: 0 0 auto; width: 70px; cursor: pointer; text-align: center; border-radius: 8px; padding: 3px; border: 1.5px solid transparent; transition: border-color 0.12s, transform 0.12s; }
.wl-sim-card:hover { border-color: var(--blue-deep); transform: translateY(-2px); }
.wl-sim-card img { width: 100%; border-radius: 5px; display: block; }
.wl-sim-price { display: block; font-size: 9.5px; font-weight: 700; color: var(--blue-deep); margin-top: 2px; }
.wl-trends-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.wl-trends-grid .wl-sim-card { width: auto; }
.wl-trend-from { display: block; font-size: 8px; color: var(--text-muted); font-weight: 600; line-height: 1.2; }

/* ── PÁGINA WISHLIST: filtros + lightbox ── */
.wl-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 24px 14px; }
.wl-count { font-size: 11px; color: var(--text-muted); margin-left: auto; font-weight: 600; }
.wl-wrap { padding: 0 24px 28px; }
.wl-empty { grid-column: 1 / -1; padding: 30px 16px; text-align: center; font-size: 12px; color: var(--text-muted); }
.wl-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8,14,30,0.82); display: none; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out; }
.wl-lightbox.active { display: flex; }
.wl-lightbox img { max-height: 92vh; max-width: 92vw; border-radius: 12px; box-shadow: 0 12px 50px rgba(0,0,0,0.5); }

/* ── WISHLIST (estilo Deck Builder: explorador + gráfico) ── */
.wish-layout { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 16px; height: calc(100vh - 210px); min-height: 520px; }
.wish-explorer { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; align-content: start;
  padding: 8px; background: rgba(255,255,255,0.45); border: 0.5px solid var(--border); border-radius: 14px; }
.wish-exp-card { cursor: pointer; border-radius: 9px; padding: 4px; text-align: center; border: 1.5px solid transparent; transition: transform 0.16s cubic-bezier(0.2,0.8,0.3,1.2), box-shadow 0.16s, background 0.12s, border-color 0.12s; }
.wish-exp-card:hover { background: rgba(255,255,255,0.75); transform: translateY(-6px) scale(1.04); box-shadow: 0 10px 20px rgba(10,20,60,0.18); z-index: 2; }
.wish-exp-card img { transition: transform 0.16s; }
.wish-exp-card.active { border-color: var(--blue-deep, #e3350d); background: rgba(227,53,13,0.1); }
.wish-exp-card img { width: 100%; border-radius: 6px; display: block; }
.wish-exp-card span { display: block; font-size: 8px; color: var(--text-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wish-detail { background: rgba(255,255,255,0.55); border: 0.5px solid var(--border-strong); border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; gap: 14px; overflow-y: auto; min-height: 0; box-shadow: 0 4px 18px rgba(10,20,60,0.05); }
.wish-detail-head { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.wl-untrack-btn {
  margin-left: auto; font-family: inherit; font-size: 11px; font-weight: 700; color: #c0392b;
  background: rgba(224,92,92,0.1); border: 0.5px solid rgba(224,92,92,0.35); border-radius: 999px;
  padding: 7px 14px; cursor: pointer; transition: background 0.13s; white-space: nowrap;
}
.wl-untrack-btn:hover { background: rgba(224,92,92,0.2); }
.wish-detail-img { width: 150px; max-width: 40%; border-radius: 10px; box-shadow: 0 6px 18px rgba(10,20,60,0.16); cursor: zoom-in; transition: transform 0.13s; }
.wish-detail-img:hover { transform: translateY(-2px) scale(1.02); }
.wish-detail-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wish-detail-name { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.wish-detail-set { font-size: 11px; color: var(--text-muted); }
.wish-price-block { display: flex; align-items: flex-start; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.wish-now { font-size: 34px; font-weight: 900; color: var(--text-primary); line-height: 1; }
.wish-change { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.wish-chg-row { font-size: 13px; font-weight: 800; display: flex; align-items: baseline; gap: 6px; }
.wish-chg-label { font-size: 9.5px; font-weight: 400; color: var(--text-muted); }
.wish-arrow { font-weight: 800; }
.wish-arrow.up { color: #1e8e4e; }
.wish-arrow.down { color: #c0392b; }
.wish-range { display: inline-flex; gap: 2px; background: rgba(38,40,48,0.06); border-radius: 9px; padding: 2px; margin-top: 6px; width: max-content; }
.wish-range button { font-size: 10.5px; font-weight: 700; border: none; background: transparent; color: var(--text-muted); padding: 6px 14px; border-radius: 7px; cursor: pointer; transition: all 0.12s; }
.wish-range button.active { background: var(--blue-deep, #e3350d); color: #fff; }
.wish-chart { flex: 1 1 auto; min-height: 180px; height: clamp(180px, 30vh, 300px); width: 100%; display: flex; overflow: hidden; }
.wish-chartsvg { display: block; width: 100%; height: 100%; }
.wish-nodata { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--text-muted); font-size: 12px; }
.wish-buy { display: block; text-align: center; font-size: 13px; font-weight: 700; text-decoration: none; color: #fff;
  padding: 11px; border-radius: 10px; background: linear-gradient(135deg, #e3350d, #f1502f); box-shadow: 0 2px 10px rgba(227,53,13,0.28); }
.wish-buy:hover { filter: brightness(1.06); }
/* gráfico real en el modal de detalle */
.col-price-chart { width: 100%; height: 110px; }
.col-price-chart .wish-chartsvg { height: 110px; min-height: 110px; }
.col-price-foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; }
/* Pantallas medianas: estrecha el explorador para que el detalle respire */
@media (max-width: 1100px) {
  .wish-layout { grid-template-columns: minmax(200px, 260px) 1fr; }
}
/* Pantallas pequeñas: apila explorador arriba + detalle abajo */
@media (max-width: 860px) {
  .wish-layout { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .wish-explorer { max-height: 220px; }
  .wish-detail { overflow: visible; }
  .wish-detail-img { width: 120px; }
  .wish-now { font-size: 28px; }
}

/* ── DETALLE: añadir a colección + seguimiento de precio ── */
.col-own-controls { display: flex; align-items: center; gap: 8px; flex: 1; }
.col-own-controls button { width: 30px; height: 30px; border-radius: 8px; border: none; cursor: pointer; font-size: 18px; font-weight: 700;
  background: rgba(227,53,13,0.12); color: var(--blue-deep); }
.col-own-controls button:hover { background: var(--blue-deep, #e3350d); color: #fff; }
.col-own-count { font-size: 12px; font-weight: 700; color: #1e8e4e; }
.col-detail-own.add { flex: 1; padding: 9px; border-radius: 9px; border: none; cursor: pointer; font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #1e8e4e, #2bb56a); }
.col-price-panel { margin-top: 12px; }
.col-price-panel:empty { display: none; }
.col-price-head { font-size: 11px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
.col-price-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(38,40,48,0.05); border: 0.5px solid var(--border); }
.col-spark { flex: 0 0 auto; }
.col-price-stats { flex: 1; min-width: 0; }
.col-price-now { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.col-price-sub { font-size: 10px; color: var(--text-muted); }
.col-price-advice { font-size: 11px; font-weight: 700; margin-top: 3px; }
.col-price-advice.good { color: #1e8e4e; }
.col-price-advice.bad { color: #c0392b; }
.col-price-buy { display: block; text-align: center; margin-top: 8px; font-size: 11px; font-weight: 700; text-decoration: none; color: #fff;
  padding: 8px; border-radius: 9px; background: linear-gradient(135deg, #e3350d, #f1502f); }

/* ── BOTONES DE COMPRA (carta suelta + packs) y POPUP DE TIENDAS ── */
.sr-buy-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sr-buy { flex: 1 1 0; min-width: 130px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 12px; font-weight: 700; font-family: inherit; text-decoration: none; cursor: pointer;
  padding: 9px 12px; border-radius: 10px; border: 1px solid transparent; transition: filter 0.13s, transform 0.1s; }
.sr-buy:hover { filter: brightness(1.05); transform: translateY(-1px); }
.sr-buy-single { background: #fff; color: #e3350d; border-color: rgba(227,53,13,0.45); }
.sr-buy-single .ico-card { flex: 0 0 auto; }
.sr-buy-packs { background: linear-gradient(135deg, #f0a020, #e8862d); color: #fff; }
.sr-stores-modal { max-width: 460px; }
.sr-stores-sub { font-size: 11px; color: var(--text-muted); margin: 2px 0 14px; }
.sr-stores-list { display: flex; flex-direction: column; gap: 8px; }
.sr-store { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; text-decoration: none;
  border: 0.5px solid var(--border-strong); background: rgba(255,255,255,0.6); transition: background 0.13s, border-color 0.13s, transform 0.1s; }
.sr-store:hover { background: rgba(227,53,13,0.07); border-color: rgba(227,53,13,0.35); transform: translateY(-1px); }
.sr-store--ph { opacity: 0.7; border-style: dashed; cursor: default; }
.sr-store--ph:hover { transform: none; background: rgba(255,255,255,0.6); border-color: var(--border-strong); }
.sr-store-logo { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.sr-store-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sr-store-name { font-size: 13px; font-weight: 700; color: var(--blue-deep); }
.sr-store-desc { font-size: 10.5px; color: var(--text-muted); }
.sr-store-go { font-size: 18px; color: rgba(227,53,13,0.6); }
.sr-stores-ad { margin: 14px 0 10px; height: 76px; }
.sr-stores-cta { text-align: center; font-size: 11px; color: var(--text-secondary); line-height: 1.5; }
.sr-stores-cta a { color: #e3350d; font-weight: 700; text-decoration: none; }
.sr-stores-cta a:hover { text-decoration: underline; }

/* ── VALOR DE COLECCIÓN (banner) ─────────── */
.col-value-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 16px 22px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(227,53,13,0.12), rgba(245,130,110,0.06));
  border: 0.5px solid var(--border-strong); box-shadow: 0 6px 22px rgba(10,20,60,0.07); }
.col-value-main { display: flex; flex-direction: column; gap: 2px; }
.col-value-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.col-value-amount { font-size: 34px; font-weight: 900; color: var(--blue-deep); line-height: 1; font-variant-numeric: tabular-nums; }
.col-value-src { font-size: 10px; color: var(--text-muted); }
.col-value-side { display: flex; gap: 26px; }
.col-value-stat { display: flex; flex-direction: column; align-items: center; }
.col-value-num { font-size: 22px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.col-value-sub { font-size: 10px; color: var(--text-muted); }

/* ── MIS DECKS ───────────────────────────── */
.mydecks-wrap { padding: 0 24px 28px; }
.md-new-btn { align-self: center; font-size: 12px; font-weight: 700; color: #fff; text-decoration: none; white-space: nowrap;
  padding: 9px 16px; border-radius: 10px; background: linear-gradient(135deg, var(--blue-deep, #e3350d), #f1502f); box-shadow: 0 2px 10px rgba(227,53,13,0.3); }
.mydecks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.md-card { display: flex; gap: 12px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,0.55);
  border: 0.5px solid var(--border-strong); box-shadow: 0 4px 18px rgba(10,20,60,0.06); }
.md-card-thumb { flex-shrink: 0; width: 72px; height: 100px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 30px; background: linear-gradient(135deg, rgba(227,53,13,0.08), rgba(245,130,110,0.05)); overflow: hidden; }
.md-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.md-card-thumb img.md-thumb-logo { object-fit: contain; padding: 10px; background: rgba(227,53,13,0.05); }
.md-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.md-card-name { font-size: 14px; font-weight: 800; color: var(--text-primary); margin: 0 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: auto; }
.md-tag { font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.md-tag-fmt { background: rgba(227,53,13,0.12); color: var(--blue-deep); }
.md-tag-ok { background: rgba(39,174,96,0.14); color: #1e8e4e; }
.md-tag-bad { background: rgba(192,57,43,0.13); color: #c0392b; }
.md-tag-warn { background: rgba(230,160,30,0.16); color: #b07a10; }
.md-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.md-btn { flex: 1 1 auto; white-space: nowrap; font-size: 10.5px; font-weight: 700; padding: 7px 10px; border-radius: 8px; border: none; cursor: pointer; transition: transform 0.12s; }
.md-btn:hover { transform: translateY(-1px); }
.md-btn-edit { background: var(--blue-deep, #e3350d); color: #fff; }
.md-btn-del { background: rgba(192,57,43,0.1); color: #c0392b; }
.mydecks-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.md-empty-icon { font-size: 48px; display: block; margin-bottom: 12px; }
.mydecks-empty p { font-size: 13px; margin-bottom: 16px; }

/* ── MIS EQUIPOS ─────────────────────────── */
.myteams-wrap { padding: 0 24px 28px; }
.myteams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; }
.me-incite { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(227,53,13,0.12), rgba(245,130,110,0.06)); border: 0.5px solid var(--border-strong); }
.me-incite-icon { font-size: 24px; }
.me-incite-text { display: flex; flex-direction: column; flex: 1; }
.me-incite-text strong { font-size: 13px; color: var(--text-primary); }
.me-incite-text span { font-size: 11px; color: var(--text-muted); }
.me-incite-btn { flex-shrink: 0; font-size: 12px; font-weight: 700; color: #fff; border: none; cursor: pointer; padding: 9px 16px; border-radius: 10px;
  background: linear-gradient(135deg, var(--blue-deep, #e3350d), #f1502f); box-shadow: 0 2px 10px rgba(227,53,13,0.3); }

.me-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px;
  background: rgba(255,255,255,0.5); border: 0.5px solid var(--border-strong); box-shadow: 0 4px 18px rgba(10,20,60,0.06); }
/* La captura (lo que se exporta a PNG) */
.me-shot { background: linear-gradient(160deg, #16264f 0%, #0e1a33 60%, #0a1226 100%); border-radius: 12px; padding: 14px; }
.me-shot-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.me-shot-title { font-size: 15px; font-weight: 800; color: #fff; }
.me-shot-logo { height: 18px; opacity: 0.9; }
.me-shot-mons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.me-mon { display: flex; flex-direction: column; align-items: center; text-align: center; }
.me-mon-img { width: 100%; aspect-ratio: 1; border-radius: 10px; border: 1px solid; display: flex; align-items: center; justify-content: center; }
.me-mon-img img { width: 86%; height: 86%; object-fit: contain; }
.me-mon-name { font-size: 9px; font-weight: 700; color: #fff; margin-top: 3px; line-height: 1.1; }
.me-mon-item { font-size: 8px; color: #aac4ff; }
.me-mon-moves { list-style: none; margin: 3px 0 0; padding: 0; }
.me-mon-moves li { font-size: 7.5px; color: rgba(255,255,255,0.78); line-height: 1.25; }
.me-mon-nomove { opacity: 0.4; }
.me-mon-tera { font-size: 7.5px; color: #ffd; margin-top: 2px; }
.me-shot-notes { margin-top: 12px; padding: 9px 11px; border-radius: 9px; background: rgba(255,255,255,0.08);
  border-left: 3px solid #f1502f; font-size: 11px; color: #eaf0ff; white-space: pre-wrap; line-height: 1.4; }
.me-notes { width: 100%; resize: vertical; min-height: 56px; padding: 9px 11px; border-radius: 10px; border: 0.5px solid var(--border-strong);
  font-size: 12px; font-family: inherit; background: rgba(255,255,255,0.85); color: var(--text-primary); }
.me-actions { display: flex; gap: 6px; }
.me-btn { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; padding: 9px; border-radius: 9px; border: none; cursor: pointer; transition: transform 0.12s; }
.me-btn:hover { transform: translateY(-1px); }
.me-btn-png { background: linear-gradient(135deg, #1e8e4e, #2bb56a); color: #fff; }
.me-btn-edit { background: var(--blue-deep, #e3350d); color: #fff; }
.me-btn-del { background: rgba(192,57,43,0.1); color: #c0392b; }
.me-btn:disabled { opacity: 0.6; cursor: default; }
.myteams-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.myteams-empty p { font-size: 13px; margin-bottom: 16px; }

/* ── Animaciones globales de popups y desplegables ── */
@keyframes srModalIn { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes srDropIn { from { opacity: 0; transform: translateY(-7px) scaleY(0.96); } to { opacity: 1; transform: none; } }
@keyframes srFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pk-modal-bg.active { animation: srFadeIn 0.16s ease both; }
.pk-modal-bg.active .pk-modal,
.pk-modal-bg.active .cardbig-modal,
.pk-modal-bg.active .auth-modal,
.pk-modal-bg.active .deck-guide-modal { animation: srModalIn 0.24s cubic-bezier(0.2,0.85,0.3,1.2) both; transform-origin: center top; }
.wl-lightbox.active { animation: srFadeIn 0.16s ease both; }
.wl-lightbox.active img { animation: srModalIn 0.26s cubic-bezier(0.2,0.85,0.3,1.2) both; }
/* Desplegables (movimientos, objetos, búsquedas) */
.vgcc-move-drop-list, .vgcc-pick-drop, .tb2-item-drop, .tb2-move-drop, .tbed-move-drop,
.vgcc-pk-dropdown, .dk-search-results, .auth-terms-text { animation: srDropIn 0.16s ease both; }

/* Modal de Login / Registro (Supabase) */
.auth-modal { max-width: 380px; }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.auth-tab { flex: 1; padding: 9px; font-size: 12px; font-weight: 700; border: none; border-radius: 9px; cursor: pointer; background: rgba(38,40,48,0.06); color: var(--text-muted); }
.auth-tab.active { background: var(--blue-deep, #e3350d); color: #fff; }
.auth-warn { font-size: 10.5px; color: #c0392b; background: rgba(192,57,43,0.08); padding: 8px 10px; border-radius: 8px; margin-bottom: 12px; }
.auth-warn code { font-family: monospace; }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-field { display: flex; flex-direction: column; gap: 4px; }
.auth-field span { font-size: 10.5px; font-weight: 700; color: var(--text-secondary); }
.auth-field input { padding: 9px 11px; border-radius: 9px; border: 0.5px solid var(--border-strong); font-size: 12px; background: rgba(255,255,255,0.85); }
.auth-submit { margin-top: 4px; padding: 10px; font-size: 12px; font-weight: 800; color: #fff; border: none; border-radius: 9px; cursor: pointer; background: linear-gradient(135deg, var(--blue-deep, #e3350d), #f1502f); }
.auth-submit:disabled { opacity: 0.6; }
.auth-forgot { background: none; border: none; cursor: pointer; font-family: inherit; align-self: center;
  font-size: 11px; color: var(--text-muted); text-decoration: underline; padding: 2px 4px; }
.auth-forgot:hover { color: var(--blue-deep); }

/* Separador "o" y botones de proveedor (Google / X) */
.auth-or { display: flex; align-items: center; gap: 10px; margin: 4px 0; color: var(--text-muted); font-size: 10px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--border, rgba(0,0,0,0.12)); }
.auth-oauth-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 10px;
  border: 1px solid var(--border-strong, #ccc); border-radius: 9px; background: #fff; color: #2b2b3a; }
.auth-oauth-btn:hover { background: #f4f6fb; border-color: rgba(227,53,13,0.4); }
.auth-oauth-btn[data-provider="twitter"] { background: #000; color: #fff; border-color: #000; }
.auth-oauth-btn[data-provider="twitter"]:hover { background: #1a1a1a; }
.auth-msg { font-size: 11px; text-align: center; min-height: 14px; margin: 0; }
.auth-msg.ok { color: #27ae60; }
.auth-msg.bad { color: #c0392b; }
.auth-extra { display: flex; flex-direction: column; gap: 7px; }
.auth-check { display: flex; align-items: flex-start; gap: 7px; font-size: 11px; color: var(--text-secondary); cursor: pointer; line-height: 1.35; }
.auth-check input { margin-top: 1px; accent-color: var(--blue-deep, #e3350d); }
.auth-check a { color: var(--blue-deep); font-weight: 600; }
.auth-terms-text { font-size: 10.5px; color: var(--text-muted); background: rgba(38,40,48,0.05); border-radius: 8px; padding: 8px 10px; }
.auth-terms-text strong { color: var(--text-secondary); display: block; margin-bottom: 4px; }
.auth-terms-text ul { margin: 0; padding-left: 16px; }
.auth-terms-text li { margin-bottom: 2px; }

/* Formato + Meta/Off-Meta (deck builder) */
.deck-format-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 2px; }
.dk-format-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.dk-format-select { font-size: 11px; font-weight: 600; padding: 5px 8px; border-radius: 8px; border: 0.5px solid var(--border-strong);
  background: rgba(255,255,255,0.8); color: var(--text-primary); cursor: pointer; }
.dk-format-verdict { font-size: 10.5px; font-weight: 700; }
.dk-format-verdict.ok { color: #27ae60; }
.dk-format-verdict.bad { color: #c0392b; }

/* Decks populares — caja de scroll horizontal compacta al pie del deck builder */
.dk-popular { padding: 0 24px 14px; }
.dk-popular-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.dk-popular-title { font-size: 16px; font-weight: 700; color: var(--blue-deep); }
.dk-popular-count { font-size: 9px; font-weight: 600; background: rgba(227,53,13,0.1); color: rgba(30,70,200,0.8); border-radius: 6px; padding: 2px 8px; }
.dk-popular-sub { font-size: 10px; color: var(--text-muted); font-weight: 300; }
.dk-popular-shuffle {
  font-family: inherit; font-size: 10px; font-weight: 700; cursor: pointer; margin-left: auto;
  border: 1px solid rgba(227,53,13,0.4); background: rgba(227,53,13,0.08); color: #e3350d;
  border-radius: 999px; padding: 4px 12px; white-space: nowrap; transition: background .15s, color .15s;
}
.dk-popular-shuffle:hover { background: #e3350d; color: #fff; }
/* "Cargar más" añade tarjetas (no reemplaza), así que se envuelven en filas
   centradas en vez de una tira con scroll horizontal. */
.dk-popular-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; overflow: visible; padding-bottom: 6px; }
.dk-pop-card { scroll-snap-align: start; flex: 0 0 auto; width: 210px; display: flex; align-items: center; gap: 8px; position: relative;
  padding: 7px 10px; border-radius: 11px; background: rgba(255,255,255,0.6); border: 0.5px solid var(--border-strong);
  box-shadow: 0 2px 8px rgba(10,20,60,0.05); }
.dk-pop-place { position: absolute; top: 4px; left: 6px; font-size: 9px; font-weight: 800; color: var(--blue-deep); opacity: 0.7; }
.dk-pop-icon { font-size: 22px; flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.dk-pop-icon img { width: 44px; height: 44px; object-fit: contain; image-rendering: -webkit-optimize-contrast; }
.dk-pop-info { flex: 1; min-width: 0; }
.dk-pop-name { font-size: 11.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-pop-by { font-size: 9.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-pop-count { font-size: 9.5px; color: var(--blue-deep); font-weight: 600; }
.dk-pop-copy { flex-shrink: 0; font-size: 10px; font-weight: 700; color: #fff; border: none; cursor: pointer;
  padding: 6px 9px; border-radius: 8px; background: linear-gradient(135deg, var(--blue-deep, #e3350d), #f1502f);
  box-shadow: 0 2px 8px rgba(227,53,13,0.28); transition: transform 0.12s; }
.dk-pop-copy:hover { transform: translateY(-1px); }
.dk-pop-copy:disabled { opacity: 0.6; cursor: default; }
.dk-popular-row::-webkit-scrollbar { height: 8px; }
.dk-popular-row::-webkit-scrollbar-thumb { background: rgba(227,53,13,0.25); border-radius: 4px; }
.dk-popular-row::-webkit-scrollbar-track { background: transparent; }
.deck-panel-top { background: rgba(245,249,255,0.9); border: 0.5px solid var(--border-strong); border-radius: 14px; padding: 16px 20px; box-shadow: 0 6px 24px rgba(10,20,60,0.06); display: flex; flex-direction: column; overflow: hidden; }
/* En el panel: la rejilla de slots ocupa el espacio disponible (scroll solo si hace falta) */
.deck-panel-top .deck-slots-grid { flex: 1; min-height: 0; overflow-y: auto; align-content: center; }
.deck-top-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.deck-top-header .deck-list-title { font-size: 14px; font-weight: 700; color: var(--blue-deep); }
.deck-top-header .deck-progress { height: 6px; margin: 0; }
.deck-stats-inline { display: flex; gap: 16px; flex-shrink: 0; }
.deck-stats-inline .dk-stat { display: flex; align-items: baseline; gap: 4px; background: none; padding: 0; flex-direction: row; }
.deck-stats-inline .dk-stat strong { font-size: 15px; font-weight: 700; color: var(--blue-deep); }
.deck-stats-inline .dk-stat span { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* Acciones del mazo (centradas, debajo del deck) */
.deck-actions { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 0.5px solid var(--border); }
.deck-actions .tb-action-btn { font-size: 11px; font-weight: 600; font-family: inherit; padding: 8px 12px; white-space: nowrap; border-radius: 9px; cursor: pointer; transition: background 0.13s, transform 0.13s, box-shadow 0.13s; background: rgba(255,255,255,0.75); border: 0.5px solid var(--border-strong); color: var(--blue-deep); }
.deck-actions .tb-action-btn:hover { transform: translateY(-1px); background: #fff; box-shadow: 0 3px 10px rgba(10,20,60,0.08); }
/* Comprobar — azul primario */
.deck-actions .tb-action-finish { background: rgba(227,53,13,0.9) !important; border-color: transparent !important; color: #fff !important; font-weight: 700; }
.deck-actions .tb-action-finish:hover { background: var(--blue-deep) !important; }
/* Limpiar — rojo */
.deck-actions .tb-action-clear { background: rgba(224,92,92,0.12) !important; border-color: rgba(224,92,92,0.45) !important; color: #c0392b !important; font-weight: 700; }
.deck-actions .tb-action-clear:hover { background: rgba(224,92,92,0.22) !important; }

/* Contador de requisitos (legalidad en vivo) */
.deck-reqs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.deck-reqs-title { width: 100%; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.01em; color: var(--text-secondary); margin-bottom: 2px; }
.deck-reqs-title.ready { color: #27ae60; }
.deck-reqs-title.notready { color: #c0392b; }
.deck-req { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 12px; border: 0.5px solid var(--border); background: rgba(255,255,255,0.5); color: var(--text-secondary); }
.deck-req-mark { font-weight: 800; }
.deck-req.ok { background: rgba(106,173,106,0.14); border-color: rgba(106,173,106,0.4); color: #27ae60; }
.deck-req.bad { background: rgba(224,92,92,0.1); border-color: rgba(224,92,92,0.3); color: #c0392b; }
.deck-req.pending { background: rgba(227,53,13,0.06); border-color: rgba(227,53,13,0.2); color: var(--text-muted); }

/* 20 columnas × 3 filas = 60 slots SIEMPRE visibles; los slots escalan con el ancho */
/* En la columna izquierda los slots se adaptan; los 60 caben sin scroll */
.deck-slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; perspective: 1200px; align-content: start; }
.deck-slot { aspect-ratio: 2.5/3.5; border-radius: 5px; background: rgba(38,40,48,0.04); border: 1px dashed rgba(227,53,13,0.18); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; transition: transform 0.15s; }
.deck-slot--filled { border-style: solid; border-color: var(--border); cursor: pointer; background: linear-gradient(135deg,rgba(255,222,216,0.12),rgba(255,208,200,0.04)); box-shadow: 0 1px 4px rgba(10,20,60,0.1); }
.deck-slot--filled:hover { transform: translateY(-2px) scale(1.04); z-index: 2; box-shadow: 0 4px 14px rgba(10,20,60,0.2); }
.deck-slot--filled:hover::after { content: '×'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(192,57,43,0.35); color: #fff; font-size: 16px; font-weight: 700; }
.deck-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deck-slot--noimg { background: rgba(38,40,48,0.06); }
.deck-slot-fallback { font-size: 6px; color: var(--text-muted); text-align: center; padding: 3px; line-height: 1.2; }
.deck-slot-num { font-size: 9px; color: rgba(227,53,13,0.25); font-weight: 600; }

/* Carta voladora (animación 3D al añadir) */
.deck-fly-card { position: fixed; z-index: 500; border-radius: 8px; object-fit: cover; box-shadow: 0 14px 44px rgba(10,20,60,0.35); pointer-events: none; transform-style: preserve-3d; transition: transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.62s ease; will-change: transform; }

/* Deck Builder — Selector de SERIE (todas las colecciones) */
.dk-serie-selector { display: flex; flex-wrap: nowrap; overflow-x: hidden; scroll-behavior: smooth; gap: 4px; padding: 10px 14px 6px; justify-content: flex-start; }
.dk-serie-selector > * { flex: 0 0 auto; }
.dk-serie-btn { font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; font-family: inherit; background: rgba(255,255,255,0.45); border: 0.5px solid var(--border); border-radius: 14px; padding: 4px 11px; cursor: pointer; color: var(--text-muted); transition: background 0.12s, color 0.12s, border-color 0.12s; white-space: nowrap; }
.dk-serie-btn:hover:not(.active) { background: #fff; color: var(--blue-deep); }
.dk-serie-btn.active { background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }

/* Deck Builder — Set selector con logos oficiales (una fila, solo flechas) */
.dk-set-selector { display: flex; gap: 5px; padding: 6px 14px 8px; flex-wrap: nowrap; overflow-x: hidden; scroll-behavior: smooth; justify-content: flex-start; }
.dk-set-selector > * { flex: 0 0 auto; }
.dk-set-btn { flex: 0 0 auto; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.4); border: 1px solid var(--border); border-radius: 8px; padding: 3px 8px; cursor: pointer; transition: background 0.13s, border-color 0.13s, transform 0.13s; }
.dk-set-btn:hover:not(.active) { background: #fff; border-color: rgba(227,53,13,0.3); transform: translateY(-2px); }
.dk-set-btn.active { background: rgba(227,53,13,0.08); border-color: rgba(227,53,13,0.5); box-shadow: 0 0 0 2px rgba(227,53,13,0.12); }
.dk-set-logo { max-height: 24px; max-width: 66px; object-fit: contain; }
.dk-set-logo-txt { font-size: 8.5px; font-weight: 700; color: var(--text-secondary); text-align: center; line-height: 1.2; }
/* Caja scrolleable de cartas (la página no necesita scroll) */
.dk-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 8px; padding: 14px 16px; overflow-y: auto; flex: 1 1 0; min-height: 0; }
.dk-card2 { align-self: start; }
.deck-browser-header, .dk-serie-selector, .dk-set-selector { flex-shrink: 0; }
.dk-card2 { background: rgba(255,255,255,0.55); border: 0.5px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer; transition: transform 0.13s; position: relative; }
.dk-card2:hover { transform: translateY(-2px); }
.dk-card2-img { aspect-ratio: 2.5/3.5; min-height: 130px; overflow: hidden; background: linear-gradient(135deg,rgba(255,222,216,0.15),rgba(255,208,200,0.05)); position: relative; }
.dk-card2-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-card2-noimg { display: flex; align-items: center; justify-content: center; }
.dk-card2-fallback { font-size: 7.5px; color: var(--text-muted); text-align: center; padding: 6px; line-height: 1.4; }
.dk-card2-badge { position: absolute; top: 3px; right: 3px; background: var(--blue-deep); color: #fff; font-size: 9px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.dk-card2-name { font-size: 7.5px; color: var(--text-secondary); padding: 3px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-card2-add { position: absolute; bottom: 24px; right: 5px; width: 32px; height: 32px; background: rgba(227,53,13,0.92); color: #fff; border: 2px solid rgba(255,255,255,0.85); border-radius: 50%; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.92; box-shadow: 0 3px 10px rgba(10,30,90,0.35); transition: opacity 0.13s, transform 0.1s, background 0.13s; }
.dk-card2-add:hover { opacity: 1; background: rgba(227,53,13,1); transform: scale(1.12); }
.dk-card2-add:active { transform: scale(0.96); }
.dk-card2:hover .dk-card2-add { opacity: 1; }
@media (hover: none) { .dk-card2-add { opacity: 1; } }


/* ════════════════════════════════════════
   MI COLECCIÓN — TCGdex powered
   ════════════════════════════════════════ */
.col-stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 24px 16px; }
.col-stat-item { background: rgba(255,255,255,0.55); border: 0.5px solid var(--border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.col-stat-num { font-size: 24px; font-weight: 700; color: var(--blue-deep); letter-spacing: -0.03em; }
.col-stat-lbl { font-size: 8px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.col-controls { display: flex; align-items: center; gap: 12px; padding: 0 24px 14px; flex-wrap: wrap; }
/* Zona peligrosa: al final del todo, pequeña y apagada — que cueste pulsarla sin querer. */
.col-danger-zone { display: flex; justify-content: center; padding: 32px 24px 40px; border-top: 0.5px dashed var(--border); margin-top: 20px; }
.col-reset-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid transparent; background: none; color: var(--text-muted); border-radius: 9px; font-size: 10px; font-weight: 600; cursor: pointer; opacity: 0.6; transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s; }
.col-reset-btn:hover { opacity: 1; background: rgba(229,72,77,0.08); border-color: rgba(229,72,77,0.4); color: #e5484d; }
.col-reset-btn:active { transform: scale(0.96); }
.col-reset-btn svg { stroke: currentColor; }
.col-loading { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; padding: 48px; color: var(--text-muted); font-size: 11px; }

/* SETS GRID */
.col-sets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 0 24px 32px; }
.col-set-card { background: rgba(255,255,255,0.62); border: 0.5px solid var(--border); border-radius: 15px; overflow: hidden; cursor: pointer; box-shadow: 0 1px 2px rgba(10,20,60,0.04); transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), background 0.15s, box-shadow 0.25s, border-color 0.2s; }
.col-set-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.92); border-color: rgba(227,53,13,0.28); box-shadow: 0 14px 30px -12px rgba(227,53,13,0.28); }
.col-set-card-img { height: 108px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,rgba(255,222,216,0.28),rgba(255,208,200,0.06)); padding: 12px; transition: transform 0.25s cubic-bezier(0.22,1,0.36,1); }
.col-set-card:hover .col-set-card-img { transform: scale(1.04); }
.col-set-card-img img { max-width: 100%; max-height: 84px; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(10,20,60,0.12)); }
.col-set-card-fallback { font-size: 9px; font-weight: 700; text-align: center; color: var(--text-secondary); letter-spacing: 0.04em; padding: 8px; line-height: 1.4; }
.col-set-card-body { padding: 11px 13px 13px; }
.col-set-card-name { font-size: 11px; font-weight: 700; color: var(--blue-deep); line-height: 1.3; margin-bottom: 6px; letter-spacing: -0.01em; }
.col-set-card-count { font-size: 9.5px; color: var(--text-muted); margin-bottom: 6px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.col-set-card-bar-bg { height: 5px; background: rgba(38,40,48,0.07); border-radius: 3px; overflow: hidden; }
.col-set-card-bar { height: 100%; background: linear-gradient(90deg,rgba(227,53,13,0.6),rgba(245,130,110,0.85)); border-radius: 3px; box-shadow: 0 0 8px rgba(227,53,13,0.25); transition: width 0.5s cubic-bezier(0.22,1,0.36,1); }
/* Resultados de búsqueda GLOBAL por carta en Mi colección */
#colCardResults:empty { display: none; }
#colCardResults { margin-bottom: 20px; }
.col-cardsearch-head { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin: 2px 0 12px; }
.col-cardsearch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 12px; }
.col-cardsearch-card { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border-radius: 12px; border: 0.5px solid var(--border); background: rgba(255,255,255,0.55); transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s, border-color 0.2s; }
.col-cardsearch-card:hover { transform: translateY(-3px); border-color: rgba(227,53,13,0.28); box-shadow: 0 12px 26px -12px rgba(227,53,13,0.3); }
.col-cardsearch-card img { width: 100%; height: auto; aspect-ratio: 63/88; object-fit: contain; border-radius: 7px; }
.col-cardsearch-name { font-size: 10px; font-weight: 600; color: var(--blue-deep); text-align: center; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* SET VIEW HEADER */
.col-set-view-header { padding: 0 24px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.col-back-btn { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; font-family: inherit; background: rgba(255,255,255,0.65); border: 0.5px solid var(--border-strong); border-radius: 8px; padding: 7px 12px; cursor: pointer; color: var(--text-secondary); transition: background 0.13s; flex-shrink: 0; }
.col-back-btn:hover { background: rgba(255,255,255,0.9); color: var(--blue-deep); }
.col-set-view-info { display: flex; align-items: center; gap: 12px; flex: 1; }
.col-set-view-logo { max-height: 44px; max-width: 140px; object-fit: contain; }
.col-set-view-name { font-size: 18px; font-weight: 700; color: var(--blue-deep); letter-spacing: -0.02em; }
.col-set-view-prog { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.col-view-filters { display: flex; gap: 5px; flex-wrap: wrap; }

/* CARDS VISUAL GRID */
.col-cards-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; padding: 0 24px 40px; }
.col-card-tile { background: rgba(255,255,255,0.5); border: 0.5px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; position: relative; }
.col-card-tile:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(10,20,60,0.12); }
.col-card-tile--owned { border-color: rgba(106,173,106,0.5); background: rgba(106,173,106,0.06); }
.col-card-tile--wish  { border-color: rgba(224,92,92,0.35); background: rgba(224,92,92,0.04); }
.col-card-tile-img { position: relative; aspect-ratio: 2.5/3.5; overflow: hidden; background: linear-gradient(135deg,rgba(255,222,216,0.15),rgba(255,208,200,0.05)); }
.col-card-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.2s; }
.col-card-tile:not(.col-tile--owned) .col-card-tile-img img { opacity: 0.6; filter: saturate(0.7); }
.col-card-tile--owned .col-card-tile-img img { opacity: 1; filter: none; }
.col-img-error { background: rgba(38,40,48,0.06); display: flex; align-items: center; justify-content: center; }
.col-card-tile-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; font-size: 9px; color: var(--text-muted); text-align: center; padding: 8px; }
.col-card-tile-overlay { position: absolute; top: 4px; right: 4px; display: flex; gap: 3px; }
.col-tile-badge { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.col-tile-owned { background: rgba(106,173,106,0.9); color: #fff; }
.col-tile-wish   { background: rgba(224,92,92,0.85); color: #fff; }
.col-tile-track  { background: rgba(40,80,200,0.85); color: #fff; font-size: 9px; }
.col-tile-trade  { background: rgba(39,174,96,0.9); color: #fff; font-size: 9px; }
.col-card-tile-name { font-size: 8px; color: var(--text-secondary); padding: 4px 6px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-card-tile-actions { display: flex; gap: 4px; padding: 0 5px 7px; }
.col-own-btn, .col-minus-btn, .col-wish-btn, .col-track-btn, .col-trade-btn, .col-detail-btn { flex: 1; height: 28px; border: 1px solid var(--border); border-radius: 6px; background: rgba(255,255,255,0.7); font-size: 13px; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.08s; display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: inherit; }
.col-own-btn:hover, .col-minus-btn:hover, .col-wish-btn:hover, .col-track-btn:hover, .col-trade-btn:hover, .col-detail-btn:hover { transform: translateY(-2px); }
/* Añadir = AZUL — al pasar el ratón se rellena de azul con el símbolo en blanco */
.col-own-btn { background: rgba(227,53,13,0.1); border-color: rgba(227,53,13,0.4); color: #e3350d; }
.col-own-btn:hover   { background: #e3350d; border-color: #e3350d; color: #fff; box-shadow: 0 3px 10px rgba(227,53,13,0.4); }
.col-own-btn.active  { background: #e3350d; border-color: #e3350d; color: #fff; }
.col-own-btn.active:hover { background: #1d3ea0; border-color: #1d3ea0; }
/* Restar = ROJO — al pasar el ratón se rellena de rojo con el signo en blanco */
.col-minus-btn { background: rgba(224,92,92,0.12); border-color: rgba(224,92,92,0.4); color: #c0392b; flex: 0 0 28px; }
.col-minus-btn:hover { background: #e0245e; border-color: #e0245e; color: #fff; box-shadow: 0 3px 10px rgba(224,46,94,0.4); }
/* Corazón: fondo blanco + corazón rojo; al pasar el ratón (y en wishlist) → fondo rojo + corazón blanco */
.col-wish-btn { flex: 0 0 32px; background: #fff; border-color: rgba(224,46,94,0.5); color: #e0245e; }
.col-wish-btn:hover  { background: #e0245e; border-color: #e0245e; color: #fff; box-shadow: 0 3px 10px rgba(224,46,94,0.4); }
.col-wish-btn.active { background: #e0245e; border-color: #e0245e; color: #fff; }
.col-wish-btn.active:hover { background: #fff; border-color: rgba(224,46,94,0.5); color: #e0245e; }
/* Tracking: fondo blanco + icono azul; activo → fondo azul + icono blanco */
.col-track-btn { flex: 0 0 32px; background: #fff; border-color: rgba(40,80,200,0.5); color: #2850c8; }
.col-track-btn:hover  { background: #2850c8; border-color: #2850c8; color: #fff; box-shadow: 0 3px 10px rgba(40,80,200,0.4); }
.col-track-btn.active { background: #2850c8; border-color: #2850c8; color: #fff; }
.col-track-btn.active:hover { background: #fff; border-color: rgba(40,80,200,0.5); color: #2850c8; }
/* Cambio (🔁): fondo blanco + icono verde; activo → fondo verde + icono blanco */
.col-trade-btn { flex: 0 0 32px; background: #fff; border-color: rgba(39,174,96,0.5); color: #27ae60; }
.col-trade-btn:hover  { background: #27ae60; border-color: #27ae60; color: #fff; box-shadow: 0 3px 10px rgba(39,174,96,0.4); }
.col-trade-btn.active { background: #27ae60; border-color: #27ae60; color: #fff; }
.col-trade-btn.active:hover { background: #fff; border-color: rgba(39,174,96,0.5); color: #27ae60; }
/* Detalle (⋯) — realce suave en azul */
.col-detail-btn:hover { background: rgba(227,53,13,0.12); border-color: rgba(227,53,13,0.35); color: #e3350d; }
.col-detail-btn { flex: 0 0 30px; font-weight: 600; color: var(--text-secondary); }

/* ═══ POKÉDEX MODE TABS ═══ */
.pkdex-tabs { display: flex; gap: 4px; margin: 0 24px 16px; background: rgba(38,40,48,0.04); border-radius: 12px; padding: 4px; width: fit-content; }
.pkdex-tab { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; font-family: inherit; background: none; border: none; border-radius: 9px; padding: 9px 18px; cursor: pointer; color: var(--text-muted); transition: background 0.18s, color 0.18s; }
.pkdex-tab.active { background: #fff; color: var(--blue-deep); box-shadow: 0 1px 5px rgba(38,40,48,0.1); }
.pkdex-tab:hover:not(.active) { color: var(--text-secondary); }

/* TCG browser grid (Pokédex TCG view) */
.pk-tcg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; padding: 0 24px 40px; }
.tcg-grid-card { cursor: zoom-in; border-radius: 9px; overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; aspect-ratio: 2.5/3.5; background: linear-gradient(135deg,rgba(255,222,216,0.12),rgba(255,208,200,0.04)); }
.tcg-grid-card:hover { transform: translateY(-4px); box-shadow: 0 8px 26px rgba(10,20,60,0.16); }
.tcg-grid-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcg-grid-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--text-muted); text-align: center; padding: 8px; }
@media (max-width: 700px) {
  .pkdex-tabs { margin-left: 14px; margin-right: 14px; }
  .pk-tcg-grid { padding: 0 14px 40px; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

/* ═══ CONMUTADOR DE IDIOMA (ES / EN) ═══ */
.lang-switch { display: inline-flex; gap: 2px; background: rgba(38,40,48,0.06); border-radius: 8px; padding: 2px; }
.lang-switch button { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; font-family: inherit; background: none; border: none; border-radius: 6px; padding: 4px 9px; cursor: pointer; color: var(--text-muted); transition: background 0.13s, color 0.13s; }
.lang-switch button.active { background: #fff; color: var(--blue-deep); box-shadow: 0 1px 3px rgba(38,40,48,0.12); }

/* ═══ PRELOADER (transición entre páginas) ═══ */
.page-preloader { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, #eef4ff 0%, #f5f6f8 70%);
  transition: opacity 0.45s ease, visibility 0.45s ease; }
.page-preloader.hide { opacity: 0; visibility: hidden; }
.preloader-logo { width: 86px; height: 86px; object-fit: contain; animation: preload-bounce 1.1s ease-in-out infinite; filter: drop-shadow(0 6px 16px rgba(227,53,13,0.2)); }
.preloader-bar { width: 140px; height: 4px; border-radius: 3px; background: rgba(227,53,13,0.12); overflow: hidden; position: relative; }
.preloader-bar::after { content: ''; position: absolute; inset: 0; width: 40%; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(227,53,13,0.9), transparent); animation: preload-slide 1.1s ease-in-out infinite; }
@keyframes preload-bounce { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.05); } }
@keyframes preload-slide { 0% { left: -40%; } 100% { left: 100%; } }
/* Aparición suave del contenido principal al cargar */
/* Solo opacidad: un transform en .main rompería el centrado de los modales
   (position:fixed se posiciona respecto al ancestro con transform). */
.main { animation: page-fade-in 0.45s ease both; }
@keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ═══ REGULATION / FORMAT PILLS (compartido) ═══ */
.tb2-picker-reg { display: flex; align-items: center; gap: 6px; padding: 12px 20px 0; flex-wrap: wrap; }
.vgcc-reg-bar { display: flex; align-items: center; gap: 6px; margin: 0 24px 12px; flex-wrap: wrap; }
.tb2-reg-pill { font-size: 10.5px; font-weight: 500; font-family: inherit; background: rgba(255,255,255,0.65); border: 1px solid var(--border-strong); border-radius: 20px; padding: 5px 14px; cursor: pointer; color: var(--text-secondary); transition: background 0.13s, color 0.13s, border-color 0.13s; }
.tb2-reg-pill:hover { border-color: rgba(227,53,13,0.35); color: var(--blue-deep); }
.tb2-reg-pill.active { background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }
@media (max-width: 700px) { .vgcc-reg-bar { margin-left: 14px; margin-right: 14px; } }

/* ═══ AD PLACEHOLDERS (monetización) ═══ */
.ad-slot {
  position: relative;
  z-index: 0;   /* siempre por debajo de los popups/modales (z-index ≥ 200) */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  background:
    repeating-linear-gradient(45deg, rgba(227,53,13,0.025) 0 12px, transparent 12px 24px),
    rgba(255,255,255,0.4);
  border: 1px dashed rgba(227,53,13,0.28);
  border-radius: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-align: center;
}
.ad-slot::before {
  content: 'PUBLICIDAD';
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  font-size: 7px; font-weight: 700; letter-spacing: 0.18em;
  color: rgba(38,40,48,0.3);
}
.ad-slot-label { font-size: 12px; font-weight: 600; color: rgba(38,40,48,0.45); letter-spacing: 0.02em; }
.ad-slot-size  { font-size: 9px; color: var(--text-muted); letter-spacing: 0.06em; }
.ad-slot svg   { opacity: 0.35; margin-bottom: 2px; }

/* Skyscraper vertical lateral — en el hueco reservado a cada lado */
.ad-sky { width: 100%; height: 100%; }
/* Al fondo en capas: por debajo del contenido (z-index del main = 1) y de los popups. */
.ad-rail { position: fixed; top: calc(var(--topbar-h) + var(--ticker-h) + 16px); transform: none; width: 120px; height: calc(100vh - var(--topbar-h) - var(--ticker-h) - 32px); max-height: 600px; z-index: 0; display: none; }
.ad-rail-left  { left: 72px; }
.ad-rail-right { right: 16px; }
/* Anuncios laterales RESPONSIVE: rails finos en pantallas pequeñas que crecen
   con el ancho, hasta half-page en monitores grandes. Así se ven en todas las
   resoluciones sin aplastar el contenido (p.ej. el Deck Builder a 2 columnas). */
@media (min-width: 1180px) {
  .ad-rail { display: block; width: 125px; height: min(580px, calc(100vh - 110px)); }
  .main { padding-left: 172px; padding-right: 158px; }
}
@media (min-width: 1450px) {
  .ad-rail { width: 170px; height: min(660px, calc(100vh - 105px)); }
  .main { padding-left: 218px; padding-right: 206px; }
}
@media (min-width: 1750px) {
  .ad-rail { width: 240px; height: min(720px, calc(100vh - 95px)); }
  .ad-rail-left { left: 90px; }
  .main { padding-left: 300px; padding-right: 286px; }
}
@media (min-width: 2050px) {
  .ad-rail { width: 300px; height: min(750px, calc(100vh - 90px)); }
  .ad-rail-left { left: 100px; }
  .main { padding-left: 360px; padding-right: 340px; }
}

/* Variantes por formato */
.ad-leaderboard { height: 90px; margin: 0 24px 18px; }       /* 728×90 */
.ad-rectangle   { height: 250px; width: 100%; }               /* 300×250 (sidebar) */
.ad-infeed      { height: 110px; margin: 6px 0; }             /* nativo en feed */
.ad-billboard   { height: 160px; margin: 4px 24px 24px; }     /* 970×250 reducido */

@media (max-width: 700px) {
  .ad-leaderboard, .ad-billboard { margin-left: 14px; margin-right: 14px; height: 70px; }
}

/* ═══ ARTÍCULOS RELACIONADOS (modal Pokédex) ═══ */
.pk-articles-section { border-top: 0.5px solid var(--border); margin-top: 18px; }
.pk-articles-list { display: flex; flex-direction: column; gap: 6px; }
.pk-article-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; background: rgba(255,255,255,0.5); border: 0.5px solid var(--border); cursor: pointer; transition: background 0.13s, transform 0.13s; text-decoration: none; }
.pk-article-item:hover { background: #fff; transform: translateX(2px); }
.pk-article-emoji { font-size: 18px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(227,53,13,0.06); border-radius: 8px; flex-shrink: 0; }
.pk-article-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pk-article-title { font-size: 12px; font-weight: 600; color: var(--blue-deep); line-height: 1.35; }
.pk-article-meta { display: flex; align-items: center; gap: 8px; }
.pk-article-time { font-size: 9px; color: var(--text-muted); }
.pk-article-arrow { font-size: 18px; color: var(--text-muted); flex-shrink: 0; }

/* ═══ COVERFLOW (carrusel 3D expositor) ═══ */
.cf-carousel { position: relative; height: 230px; perspective: 1100px; display: flex; align-items: center; justify-content: center; margin: 10px 0 4px; overflow: hidden; }
.cf-stage { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.cf-item { position: absolute; top: 50%; left: 50%; width: 150px; transition: transform 0.55s cubic-bezier(0.22,0.61,0.36,1), opacity 0.45s ease; cursor: pointer; transform-origin: center center; backface-visibility: hidden; }
.cf-item img { width: 100%; border-radius: 9px; box-shadow: 0 10px 30px rgba(10,20,60,0.3); display: block; }
.cf-item.cf-active img { box-shadow: 0 16px 44px rgba(227,53,13,0.35); }
.cf-fallback { width: 150px; height: 209px; background: rgba(38,40,48,0.08); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-muted); text-align: center; padding: 8px; }
.cf-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.9); border: 0.5px solid var(--border-strong); color: var(--blue-deep); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(10,20,60,0.15); transition: background 0.13s, transform 0.13s; }
.cf-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.cf-arrow-left { left: 6px; } .cf-arrow-right { right: 6px; }
@media (max-width: 700px) { .cf-carousel { height: 180px; } .cf-item { width: 116px; } .cf-fallback { width: 116px; height: 162px; } }

/* ═══ TCG CARDS IN POKÉDEX MODAL ═══ */
.pk-tcg-section { border-top: 0.5px solid var(--border); margin-top: 18px; }
.pk-tcg-row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: thin; }
.pk-tcg-card { flex: 0 0 100px; cursor: pointer; transition: transform 0.13s; }
.pk-tcg-card:hover { transform: translateY(-3px); }
.pk-tcg-card img { width: 100px; border-radius: 7px; box-shadow: 0 3px 12px rgba(10,20,60,0.15); display: block; }

/* ═══ CARD LIGHTBOX (zoom) ═══ */
.card-lightbox { position: fixed; inset: 0; background: rgba(8,16,44,0.82); backdrop-filter: blur(8px); z-index: 400; display: none; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out; animation: lb-fade 0.18s ease; }
.card-lightbox.active { display: flex; }
.card-lightbox-img { max-width: min(440px, 90vw); max-height: 92vh; border-radius: 16px; box-shadow: 0 20px 70px rgba(0,0,0,0.5); }
.card-lightbox-close {
  position: fixed; top: 16px; right: 18px; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 0.5px solid rgba(255,255,255,0.3); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.card-lightbox-close:hover { background: rgba(255,255,255,0.22); }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }

/* ═══ CARD SHOWCASE (expositor: flechas + ampliar) ═══ */
.showcase-bg {
  position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center;
  background: rgba(8,16,44,0.9); backdrop-filter: blur(8px); animation: lb-fade 0.18s ease; padding: 30px;
}
.showcase-bg.active { display: flex; }
.showcase-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: min(440px, 78vw); }
.showcase-img { max-width: 100%; max-height: 70vh; border-radius: 16px; box-shadow: 0 20px 70px rgba(0,0,0,0.5); }
.showcase-meta { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; text-align: center; }
.showcase-name { font-size: 14px; font-weight: 700; }
.showcase-counter { font-size: 11px; color: rgba(255,255,255,0.55); }
.showcase-close {
  position: absolute; top: 20px; right: 24px; background: none; border: none; color: #fff;
  font-size: 28px; line-height: 1; cursor: pointer; z-index: 1;
}
.showcase-arrow {
  background: rgba(255,255,255,0.1); border: 0.5px solid rgba(255,255,255,0.2); color: #fff; font-size: 30px;
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%; cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: background 0.15s, transform 0.15s; margin: 0 18px;
}
.showcase-arrow:hover { background: rgba(255,255,255,0.22); transform: scale(1.06); }
@media (max-width: 700px) {
  .showcase-arrow { width: 40px; height: 40px; font-size: 22px; margin: 0 8px; }
  .showcase-close { top: 12px; right: 14px; }
}

/* ═══ BIG CARD MODAL (deck builder) ═══ */
.cardbig-modal { max-width: 1000px; }
.cardbig-grid { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: start; }
.cardbig-img-col { display: flex; align-items: flex-start; justify-content: center; }
/* La carta grande escala con la altura del viewport → el modal no necesita scroll */
.cardbig-img { width: auto; max-width: 360px; max-height: min(62vh, 500px); border-radius: 14px; box-shadow: 0 14px 50px rgba(10,20,60,0.28); }

/* Para jugar esta carta necesitarás… */
.cardbig-needs { margin-top: 14px; background: rgba(227,53,13,0.04); border: 0.5px solid rgba(227,53,13,0.15); border-radius: 10px; padding: 11px 14px; }
.cardbig-needs ul { list-style: none; display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.cardbig-needs li { font-size: 11px; color: var(--text-secondary); line-height: 1.45; padding-left: 14px; position: relative; }
.cardbig-needs li::before { content: '▸'; position: absolute; left: 0; color: rgba(227,53,13,0.6); }
.cardbig-needs strong { color: var(--blue-deep); }

/* CTA registrar en colección */
.card-collect-cta { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 13px 16px; border-radius: 12px; text-decoration: none;
  background: linear-gradient(135deg, rgba(227,53,13,0.1), rgba(245,130,110,0.08)); border: 0.5px solid rgba(227,53,13,0.25); transition: background 0.15s, transform 0.15s; }
.card-collect-cta:hover { background: linear-gradient(135deg, rgba(227,53,13,0.16), rgba(245,130,110,0.12)); transform: translateY(-1px); }
.card-collect-cta .cc-icon { font-size: 20px; }
.card-collect-cta .cc-text { flex: 1; font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; }
.card-collect-cta .cc-text strong { color: var(--blue-deep); }
.card-collect-cta .cc-btn { flex-shrink: 0; font-size: 11.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
  padding: 8px 14px; border-radius: 9px; color: #fff; background: linear-gradient(135deg, var(--blue-deep, #e3350d), #f1502f);
  box-shadow: 0 2px 8px rgba(227,53,13,0.3); transition: transform 0.12s, box-shadow 0.12s; }
.card-collect-cta .cc-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(227,53,13,0.42); }
.cardbig-info-col { display: flex; flex-direction: column; }
.cardbig-illus { font-size: 11px; color: var(--text-secondary); margin: 4px 0 12px; }
.cardbig-artist-section { border-top: 0.5px solid var(--border); margin-top: 14px; }
.cardbig-artist-row { display: flex; gap: 7px; overflow-x: auto; padding: 4px 0 6px; scrollbar-width: thin; }
.cardbig-artist-card { flex: 0 0 72px; cursor: pointer; transition: transform 0.13s; }
.cardbig-artist-card:hover { transform: translateY(-3px); }
.cardbig-artist-card img { width: 72px; border-radius: 6px; box-shadow: 0 3px 12px rgba(10,20,60,0.15); display: block; }
.cardbig-artist-fallback { width: 72px; height: 100px; background: rgba(38,40,48,0.06); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 7px; color: var(--text-muted); text-align: center; padding: 5px; }
.cardbig-artist-name { font-size: 7.5px; color: var(--text-muted); display: block; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 72px; }
@media (max-width: 700px) {
  .cardbig-grid { grid-template-columns: 1fr; }
  .cardbig-img-col { max-width: 220px; margin: 0 auto; }
}

/* CARD DETAIL MODAL */
.col-card-detail-modal { max-width: 700px; }
.col-detail-grid { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: 24px; align-items: start; }
.col-detail-img-col { grid-column: 1; grid-row: 1 / 3; }
.col-detail-header { grid-column: 2; grid-row: 1; }
.col-detail-body { grid-column: 2; grid-row: 2; }
.col-detail-img-wrap { position: relative; display: inline-block; }
.col-detail-card-img { width: auto; max-width: 240px; max-height: min(56vh, 420px); border-radius: 12px; box-shadow: 0 12px 40px -8px rgba(10,20,60,0.28), 0 2px 6px rgba(10,20,60,0.12); display: block; transition: transform 0.25s cubic-bezier(0.22,1,0.36,1); }
.col-detail-card-img:hover { transform: translateY(-3px) scale(1.02); }
.col-img-fs { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: none; border-radius: 9px;
  background: rgba(10,20,60,0.6); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px); transition: background 0.13s, transform 0.1s; }
.col-img-fs:hover { background: rgba(227,53,13,0.92); transform: scale(1.08); }
.col-artist-link { color: #e3350d; text-decoration: none; font-weight: 700; }
.col-artist-link:hover { text-decoration: underline; }
.card-lightbox--full .card-lightbox-img { max-width: 96vw; max-height: 96vh; border-radius: 12px; }
.col-detail-localid { font-size: 9px; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.col-detail-name { font-size: 22px; font-weight: 700; color: var(--blue-deep); letter-spacing: -0.02em; margin: 5px 0 10px; }
.col-detail-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.col-detail-rarity { font-size: 9px; font-weight: 600; background: rgba(227,53,13,0.1); color: var(--blue-deep); border-radius: 5px; padding: 2px 8px; }
.col-detail-hp { font-size: 11px; font-weight: 700; color: #e05c5c; }
.col-detail-section { font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.col-detail-attack { padding: 8px 0; border-bottom: 0.5px solid var(--border); }
.col-atk-head { display: flex; align-items: center; gap: 8px; }
.col-atk-name { flex: 1; font-size: 12px; font-weight: 600; color: var(--blue-deep); }
.col-atk-cost { display: inline-flex; gap: 2px; }
.col-atk-energy { font-size: 11px; color: #e8a840; line-height: 1; }
.col-atk-dmg { font-size: 13px; font-weight: 700; color: var(--blue-deep); }
.col-atk-effect { font-size: 10.5px; color: var(--text-secondary); line-height: 1.45; margin-top: 4px; }
.col-detail-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.col-detail-own, .col-detail-wish, .col-detail-track, .col-detail-trade { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 1 1 auto; min-width: 120px; font-size: 11px; font-weight: 600; font-family: inherit; border-radius: 999px; padding: 9px; cursor: pointer; transition: background 0.13s; border: 0.5px solid var(--border-strong); background: rgba(255,255,255,0.7); color: var(--blue-deep); }
.col-detail-wish svg, .col-detail-track svg, .col-detail-trade svg { flex: 0 0 auto; width: 13px; height: 13px; }
.col-detail-own.active  { background: rgba(106,173,106,0.2); border-color: rgba(106,173,106,0.4); color: #27ae60; }
.col-detail-wish.active { background: rgba(224,92,92,0.12); border-color: rgba(224,92,92,0.35); color: #c0392b; }
.col-detail-track.active { background: rgba(40,80,200,0.12); border-color: rgba(40,80,200,0.4); color: #2850c8; }
.col-detail-trade.active { background: rgba(39,174,96,0.15); border-color: rgba(39,174,96,0.4); color: #27ae60; }


/* ════════════════════════════════════════
   RESPONSIVE NUEVAS PÁGINAS
   ════════════════════════════════════════ */
@media (max-width: 1100px) {
  .tb2-slots { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .calc-layout { grid-template-columns: 1fr; }
  .calc-move-col { order: -1; }
  .deck-layout { grid-template-columns: 1fr; }
  .deck-list-panel { position: static; }
  /* El mazo (lleno o vacío) se queda siempre visible arriba; el explorador de
     colecciones/cartas pasa a ser un panel deslizante inferior (pestaña: se
     abre/cierra arrastrando o con un toque). Ver js/mobile-sheet.js. */
  .deck-layout2 { grid-template-columns: 1fr; height: auto; }
  .deck-panel-top { overflow: visible; }
  .deck-panel-top .deck-slots-grid { overflow: visible; }
  .deck-browser {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    max-height: 82vh; border-radius: 20px 20px 0 0; margin: 0;
    box-shadow: 0 -10px 30px rgba(10,20,60,0.18);
    background: #fbfbfd;   /* opaco: en pantalla completa no debe transparentar el mazo de detrás */
  }
  .deck-browser .dk-card-grid { flex: 1; min-height: 0; overflow-y: auto; max-height: none; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .page-deckbuilder .main { padding-bottom: 64px; }   /* la pestaña cerrada no tapa el último botón */

  /* Acciones del mazo: todas en una sola línea; "Limpiar" solo icono. */
  .deck-actions { flex-wrap: nowrap; overflow-x: auto; justify-content: center; gap: 4px; -webkit-overflow-scrolling: touch; }
  .deck-actions .tb-action-btn { flex: 0 0 auto; font-size: 8.8px; padding: 6px 6px; }
  .deck-actions .tb-action-clear { padding: 6px; }
  .deck-actions .tb-action-clear-label { display: none; }
  .mobile-sheet-handle {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 0 8px; cursor: grab; touch-action: none; user-select: none;
    position: sticky; top: 0; background: inherit; z-index: 2;
  }
  .mobile-sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: rgba(38,40,48,0.22); }
  .mobile-sheet-label { font-size: 11px; font-weight: 700; color: var(--text-muted); }
  /* Selectores de serie/set: una fila, navegación solo con flechas. */
  .dk-serie-selector, .dk-set-selector { flex-wrap: nowrap; overflow-x: hidden; justify-content: flex-start; }
  .dk-serie-selector > *, .dk-set-selector > * { flex: 0 0 auto; }
  .tb2-slots { grid-template-columns: repeat(3, 1fr); }
  .tbed-body { grid-template-columns: 1fr; }
  .tbed-left { border-right: none; border-bottom: 0.5px solid var(--border); }
  .tb2-picker-grid { grid-template-columns: repeat(3, 1fr); }
  .tb2-summary { grid-template-columns: 1fr; }
  .tb2-sum-col + .tb2-sum-col { border-left: none; border-top: 0.5px solid var(--border); }

  /* Selector de Pokémon → panel deslizante inferior (arrastra la pestaña o
     pulsa para cerrar), en vez de modal centrado. Los slots del equipo se
     quedan siempre visibles detrás. */
  .tb2-picker-bg { align-items: flex-end; padding: 0; }
  .tb2-picker { max-width: none; width: 100%; max-height: 88vh; border-radius: 20px 20px 0 0; }
  #tb2PickerHandle { display: flex; align-items: center; justify-content: center; padding: 10px 0 4px; cursor: grab; touch-action: none; }
}
@media (max-width: 700px) {
  /* Aprovecha todo el ancho disponible en vez de forzar columnas fijas
     (antes 10 columnas siempre, aunque el móvil fuera estrecho → slots diminutos). */
  .deck-slots-grid { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }
  .tb2-slots { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 0 14px 12px; }

  /* "Decks populares": título más grande y centrado, tarjetas más pequeñas
     (caben 4 en vez de 1-2) — solo esta sección, no toca al Team Builder. */
  .dk-popular { padding: 0 14px 14px; }
  .dk-popular-head { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
  .dk-popular-title { font-size: 18px; font-weight: 700; color: var(--blue-deep); }
  .dk-popular-count { order: 2; }
  .dk-popular-sub { order: 3; }
  .dk-popular-shuffle { order: 4; margin: 4px 0 0; }
  .dk-popular-row { gap: 8px; }
  .dk-popcard.dk-popcard { width: 80px; padding: 7px 4px; gap: 4px; }
  .dk-popcard .tb2-sugcard-name { font-size: 8.5px; }
  .dk-popcard .dk-popbubble { width: 32px; height: 32px; font-size: 13px; }
  .dk-popcard .dk-popbubble img { width: 28px; height: 28px; }
  .dk-popcard .tb2-sugcard-author { font-size: 8px; padding: 2px 5px; }
  .dk-popcard .tb2-sugcard-author svg { width: 8px; height: 8px; }
  .dk-popcard .tb2-sugcard-load { font-size: 8.5px; padding: 4px; }
  .tb-arena { margin-left: 14px; margin-right: 14px; }
  .tb2-header, .tb2-actions, .tb2-editor, .tb2-tourney, .tb2-summary { margin-left: 0; margin-right: 0; padding-left: 14px; padding-right: 14px; }
  .tb2-editor { margin: 8px 14px 16px; }
  .tb2-tourney { margin: 8px 14px 40px; }
  .tb2-tourney-header { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
  .tb2-tourney-title { font-size: 14px; }
  .tb2-tourney-sub { margin-left: 0; }
  .tb2-tourney-latest { margin-left: 0 !important; }
  .tb2-summary { margin: 8px 14px 16px; }
  .tb2-picker-grid { grid-template-columns: repeat(2, 1fr); }
  /* Las 5 estadísticas (tengo/busco/tracking/sets/completado) en una sola
     línea en vez de apiladas en 2 filas. */
  .col-stats-bar { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .col-stat-item { padding: 8px 4px; gap: 1px; }
  .col-stat-num { font-size: 15px; }
  .col-stat-lbl { font-size: 6.5px; letter-spacing: 0.04em; text-align: center; line-height: 1.2; }
  .pk-modal-grid { grid-template-columns: 1fr; }
  .pk-modal-left { display: flex; gap: 16px; align-items: flex-start; }
  .pk-modal-art { width: 100px; height: 100px; }
  .pk-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); padding: 0 14px 40px; }
  .pk-controls { padding: 0 14px 16px; }
  .calc-layout, .deck-layout, .deck-layout2 { padding: 0 14px 24px; }
  .col-stats-bar, .col-controls, .col-sets { padding-left: 14px; padding-right: 14px; }

  /* Mi Colección: título más grande y centrado, buscador a todo el ancho,
     tarjetas de set cuadradas y más pequeñas — solo en esta página y en móvil. */
  .page-coleccion .page-header-inner { flex-direction: column; align-items: center; text-align: center; }
  .page-coleccion .page-title { font-size: 26px; }
  .page-coleccion #colSearchWrap { max-width: none !important; flex: 1 1 100%; order: -1; }
  .page-coleccion .col-sets-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .page-coleccion .col-set-card-img { aspect-ratio: 1 / 1; height: auto; padding: 8px; }
  .page-coleccion .col-set-card-img img { max-height: 100%; }
  .page-coleccion .col-set-card-body { padding: 7px 8px 9px; }
  .page-coleccion .col-set-card-name { font-size: 9.5px; margin-bottom: 3px; }
  .page-coleccion .col-set-card-count { font-size: 8px; margin-bottom: 3px; }
  /* Siempre 4 botones por tile: añadir, eliminar, seguir precio y ofrecer
     para cambio. "Busco esta carta" y el detalle completo (⋯) se hacen desde
     el popup, que ahora se abre tocando la carta. */
  .page-coleccion .col-card-tile-actions { gap: 4px; }
  .page-coleccion .col-wish-btn, .page-coleccion .col-detail-btn { display: none; }
  .page-coleccion .col-own-btn, .page-coleccion .col-minus-btn,
  .page-coleccion .col-track-btn, .page-coleccion .col-trade-btn { flex: 1; height: 32px; font-size: 13px; }

  /* Team Builder + Calculadora de daño: la arena ocupa mucho menos (≈15% de
     pantalla) y se queda fija arriba mientras se hace scroll por debajo;
     los Pokémon se reducen a juego; los botones de acciones caben en una
     sola línea (con scroll horizontal si hiciera falta); los títulos van
     centrados. */
  .tb-arena {
    height: 15vh; min-height: 90px; max-height: 130px;
    position: sticky; top: calc(var(--topbar-h) + var(--ticker-h)); z-index: 20;
    margin-left: 14px; margin-right: 14px;
  }
  .tb-arena-stage { bottom: 10px; }
  .tb-arena-mon img { max-height: 58px; max-width: 62px; }
  .tb-arena-mon-shadow { width: 30px; height: 7px; }
  .calc-arena-side img { max-height: 66px; max-width: 84px; }
  /* .page-calc para igualar/ganar la especificidad de la regla "compacta"
     de más arriba (.page-calc .calc-arena-side-atk{left:30%}) que si no gana
     siempre por tener más clases, aunque esté fuera de la media query. */
  .page-calc .calc-arena-side-atk, .calc-arena-side-atk { left: 4%; }
  .page-calc .calc-arena-side-def, .calc-arena-side-def { right: 4%; }
  .calc-arena-vs2 { font-size: 13px; }
  .calc-arena-placeholder { padding: 6px 8px; gap: 2px; }
  .calc-arena-placeholder svg { width: 18px; height: 18px; }
  .calc-arena-placeholder-label { font-size: 8px; max-width: 60px; }

  .tb2-header, .page-calc .page-header-inner { flex-direction: column; align-items: center; text-align: center; }
  .tb2-title, .page-calc .page-title { text-align: center; }
  .tb2-subtitle { text-align: center; }

  .tb2-actions {
    flex-wrap: nowrap; justify-content: center; padding: 0 14px 14px;
  }
  /* Solo icono en móvil (el texto no cabría en una sola línea con 5 botones). */
  .tb2-actions .tb2-btn { flex: 0 0 auto; padding: 9px; }
  .tb2-actions .tb2-btn span { display: none; }

  /* Formato: como dos pestañas unidas, no dos píldoras sueltas. */
  .vgcc-reg-bar {
    flex-wrap: nowrap; display: flex; gap: 2px; background: rgba(38,40,48,0.06);
    border-radius: 10px; padding: 3px; margin-left: 14px; margin-right: 14px;
  }
  .vgcc-reg-bar .tb2-type-label { display: none; }
  .vgcc-reg-bar .tb2-reg-pill {
    flex: 1 1 0; text-align: center; font-size: 10.5px; padding: 8px 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: none; border: none; border-radius: 8px; color: var(--text-muted);
  }
  .vgcc-reg-bar .tb2-reg-pill.active { background: #fff; color: var(--blue-deep); box-shadow: 0 1px 4px rgba(38,40,48,0.14); border-color: transparent; }
}

/* ═══ MI PERFIL (social / intercambio) ═══ */
.prof-shared-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 24px 14px; padding: 11px 18px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(227,53,13,0.12), rgba(245,130,110,0.06));
  border: 0.5px solid var(--border-strong); font-size: 12px; color: var(--text-secondary); }
.prof-create-btn { background: var(--blue-deep); color: #fff; text-decoration: none; font-size: 11px; font-weight: 700;
  padding: 7px 14px; border-radius: 20px; }
.prof-create-btn:hover { filter: brightness(1.08); }

.prof-card-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 0 24px 14px; padding: 18px 22px; border-radius: 16px;
  background: rgba(255,255,255,0.5); border: 0.5px solid var(--border-strong); box-shadow: 0 6px 22px rgba(10,20,60,0.07); }
.prof-avatar { width: 58px; height: 58px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #e3350d, #ff7a5c); box-shadow: 0 4px 14px rgba(227,53,13,0.35); }
.prof-head-info { flex: 1; min-width: 0; }
.prof-name-row { display: flex; align-items: center; gap: 8px; }
.prof-name { font-size: 22px; font-weight: 800; color: var(--blue-deep); margin: 0; letter-spacing: -0.02em; }
.prof-edit-name { background: none; border: none; cursor: pointer; font-size: 14px; opacity: 0.6; }
.prof-edit-name:hover { opacity: 1; }
.prof-stats { display: flex; gap: 18px; margin-top: 6px; }
.prof-stat { font-size: 12px; color: var(--text-secondary); }
.prof-stat strong { font-size: 16px; color: var(--blue-deep); }
.prof-share-btn { flex: 0 0 auto; background: linear-gradient(135deg, #e3350d, #f1502f); color: #fff; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; padding: 11px 18px; border-radius: 12px; transition: filter 0.13s, transform 0.1s; }
.prof-share-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }

.prof-share-box { display: flex; gap: 8px; margin: 0 24px 16px; }
.prof-share-box input { flex: 1; font-family: inherit; font-size: 11px; padding: 9px 12px; border-radius: 10px;
  border: 0.5px solid var(--border-strong); background: rgba(255,255,255,0.7); color: var(--text-secondary); }

.prof-section { margin: 0 24px 22px; }
.prof-section-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.prof-section-head h3 { font-size: 15px; font-weight: 700; color: var(--blue-deep); margin: 0; }
.prof-section-sub { font-size: 11px; color: var(--text-muted); }
.prof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.prof-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; background: none; border: none; padding: 0; font: inherit; color: inherit; text-align: inherit; cursor: pointer; }
.prof-card-img { position: relative; aspect-ratio: 2.5 / 3.5; border-radius: 8px; overflow: hidden;
  background: rgba(255,255,255,0.5); border: 0.5px solid var(--border); display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s, box-shadow 0.12s; }
.prof-card:hover .prof-card-img { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(10,20,60,0.2); }
.prof-card-img img { width: 100%; height: 100%; object-fit: cover; }
.prof-card-fb { font-size: 9px; text-align: center; padding: 4px; color: var(--text-muted); }
.prof-card-qty { position: absolute; top: 5px; right: 5px; background: #e3350d; color: #fff; font-size: 10px; font-weight: 800;
  padding: 2px 6px; border-radius: 10px; box-shadow: 0 2px 6px rgba(10,20,60,0.35); }
.prof-card-name { font-size: 9px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.prof-empty { font-size: 12px; color: var(--text-muted); padding: 18px 4px; }
@media (max-width: 700px) {
  .prof-card-head, .prof-shared-banner, .prof-section, .prof-share-box { margin-left: 14px; margin-right: 14px; }
}

/* ═══ CUENTA EN LA BARRA SUPERIOR (login / perfil + moneda) ═══ */
.acct-host { position: relative; display: flex; align-items: center; }
.acct-btn { background: none; border: none; cursor: pointer; padding: 0; display: flex; border-radius: 50%; }
.acct-btn:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
/* La "moneda" (avatar) — imagen circular */
.coin-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  overflow: hidden; flex: 0 0 auto; background: rgba(255,255,255,0.6);
  box-shadow: 0 2px 6px rgba(10,20,60,0.3); line-height: 0; }
.coin-avatar img { width: 100%; height: 100%; object-fit: cover; }
.acct-btn:hover .coin-avatar { filter: brightness(1.06); transform: scale(1.05); transition: transform 0.1s; }
.acct-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px;
  background: rgba(250,252,255,0.99); border: 0.5px solid var(--border-strong); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(10,20,60,0.18); padding: 10px; display: none; flex-direction: column; gap: 6px; z-index: 250; }
.acct-menu.open { display: flex; }
.acct-name { font-size: 13px; font-weight: 800; color: var(--blue-deep); padding: 2px 4px; }
.acct-coin-label { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding: 0 4px; }
.acct-coins { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; padding: 2px 2px 8px; border-bottom: 0.5px solid var(--border); }
.acct-coin { background: none; border: 2px solid transparent; border-radius: 50%; padding: 1px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.acct-coin:hover { border-color: rgba(227,53,13,0.35); }
.acct-coin.sel { border-color: var(--blue-deep); }
.acct-menu-item { display: flex; align-items: center; gap: 8px; font-family: inherit; font-size: 12.5px; font-weight: 600;
  text-decoration: none; color: var(--text-secondary); background: none; border: none; cursor: pointer; text-align: left;
  width: 100%; padding: 8px; border-radius: 8px; }
.acct-menu-item:hover { background: rgba(227,53,13,0.08); color: var(--blue-deep); }
.acct-logout { color: #c0392b; }
.acct-logout:hover { background: rgba(224,92,92,0.1); color: #c0392b; }

/* ═══ PERFIL: edición (usuario, descripción, redes, monedas) ═══ */
.prof-desc { font-size: 12px; color: var(--text-secondary); margin: 4px 0 6px; line-height: 1.5; }
.prof-socials { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.prof-social { font-size: 11px; font-weight: 600; text-decoration: none; color: #e3350d;
  background: rgba(227,53,13,0.08); border: 0.5px solid rgba(227,53,13,0.25); border-radius: 20px; padding: 3px 10px; }
.prof-social:hover { background: rgba(227,53,13,0.16); }

.prof-login-cta { display: none; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  margin: 0 24px 16px; padding: 30px 22px; border-radius: 16px; background: rgba(255,255,255,0.5);
  border: 0.5px dashed var(--border-strong); color: var(--text-secondary); font-size: 13px; }

.prof-edit { margin: 0 24px 22px; padding: 18px 20px; border-radius: 16px;
  background: rgba(255,255,255,0.5); border: 0.5px solid var(--border-strong); }
.prof-edit-title { font-size: 14px; font-weight: 800; color: var(--blue-deep); margin: 0 0 14px; }
.prof-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.prof-field-lbl { font-size: 11px; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.01em; }
.prof-field textarea, .prof-username-row input, .prof-socials-inputs input {
  font-family: inherit; font-size: 12px; padding: 9px 11px; border-radius: 9px;
  border: 0.5px solid var(--border-strong); background: rgba(255,255,255,0.8); color: var(--text-primary); resize: vertical; }
.prof-username-row { display: flex; align-items: center; gap: 6px; }
.prof-username-row .prof-at { font-weight: 800; color: var(--text-muted); }
.prof-username-row input { flex: 1; }
.prof-username-row .lf-btn { flex: 0 0 auto; }
.prof-socials-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prof-hint { font-size: 10.5px; color: var(--text-muted); min-height: 13px; }
.prof-hint.ok { color: #27ae60; } .prof-hint.bad { color: #c0392b; }
.prof-coins { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
.prof-coin { background: none; border: 2px solid transparent; border-radius: 50%; padding: 2px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.1s; }
.prof-coin:hover { transform: scale(1.08); border-color: rgba(227,53,13,0.3); }
.prof-coin.sel { border-color: var(--blue-deep); }
#profSaveBtn { margin-top: 4px; }
@media (max-width: 700px) { .prof-edit, .prof-login-cta { margin-left: 14px; margin-right: 14px; } .prof-socials-inputs { grid-template-columns: 1fr; } }

/* ═══ PERFIL: avatar con lápiz, acciones y modales (estilo móvil) ═══ */
.prof-avatar-wrap { position: relative; flex: 0 0 auto; }
.prof-avatar-pencil { position: absolute; bottom: -2px; right: -2px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #fff; background: #e3350d; color: #fff; cursor: pointer; font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(10,20,60,0.35); }
.prof-avatar-pencil:hover { background: #1d3ea0; }
.prof-handle { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-left: 6px; }
.prof-handle-fixed { font-size: 14px; font-weight: 800; color: var(--blue-deep); padding: 8px 11px;
  background: rgba(227,53,13,0.07); border: 0.5px solid var(--border-strong); border-radius: 9px; width: fit-content; }
.prof-head-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.prof-edit-open { font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 8px 14px;
  border-radius: 10px; border: 1px solid rgba(227,53,13,0.4); background: rgba(227,53,13,0.08); color: #e3350d; }
.prof-edit-open:hover { background: rgba(227,53,13,0.16); }
/* La tarjeta de edición, dentro del modal, sin márgenes externos */
.prof-edit-modal, .prof-coin-modal { max-width: 460px; width: 100%; }
.prof-edit-modal .prof-edit { margin: 0; padding: 0; background: none; border: none; }
.prof-coin-modal .prof-coins { margin-top: 12px; }
@media (max-width: 560px) {
  .prof-edit-modal, .prof-coin-modal { max-width: 100%; width: 100%; min-height: 100vh; max-height: 100vh; border-radius: 0; }
}

/* ═══ PERFIL: equipos compartidos ═══ */
.prof-teams { display: flex; flex-direction: column; gap: 12px; }
.prof-team { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.5);
  border: 0.5px solid var(--border-strong); }
.prof-team-name { font-size: 13px; font-weight: 800; color: var(--blue-deep); margin-bottom: 8px; }
.prof-team-mons { display: flex; flex-wrap: wrap; gap: 8px; }
.prof-team-mon { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, rgba(227,53,13,0.1), rgba(227,53,13,0.03)); border: 0.5px solid var(--border); }
.prof-team-mon img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
/* Checklist de equipos en el modal de edición */
.prof-teams-pick { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; }
.prof-team-check { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--text-secondary);
  padding: 8px 10px; border-radius: 9px; border: 0.5px solid var(--border); background: rgba(255,255,255,0.6); cursor: pointer; }
.prof-team-check input { width: 16px; height: 16px; cursor: pointer; }
.prof-team-check span:nth-child(2) { flex: 1; font-weight: 600; }
.prof-team-check-mons { font-size: 11px; color: var(--text-muted); }

/* ═══ TEAM BUILDER: modal de guardar (nombre + público/privado) ═══ */
.tb-save-field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.tb-save-field .lf-input, #tbSaveName { font-family: inherit; font-size: 13px; padding: 10px 12px; border-radius: 9px;
  border: 0.5px solid var(--border-strong); background: rgba(255,255,255,0.85); color: var(--text-primary); width: 100%; box-sizing: border-box; }
.tb-vis-pills { display: flex; gap: 8px; }
.tb-vis-pill { flex: 1; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 9px 10px;
  border-radius: 10px; border: 1px solid var(--border-strong); background: rgba(255,255,255,0.7); color: var(--text-secondary); }
.tb-vis-pill.active { background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }
/* Badge público/privado en Mis Equipos */
.me-vis-badge { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; padding: 9px;
  border-radius: 9px; cursor: pointer; border: 0.5px solid var(--border-strong); background: rgba(255,255,255,0.7); color: var(--text-secondary); }
.me-vis-badge.public { background: rgba(227,53,13,0.12); border-color: rgba(227,53,13,0.4); color: #e3350d; }

/* ═══ MIS EQUIPOS: barra inferior "Guardar cambios" de visibilidad ═══ */
.me-savebar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(40px);
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 300; }
.me-savebar.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.me-savebar .lf-btn { box-shadow: 0 10px 28px rgba(10,20,60,0.4); font-size: 13px; padding: 12px 22px; }
.me-vis-badge.pending { outline: 2px dashed rgba(227,53,13,0.55); outline-offset: 1px; }

/* ═══ Marcas en texto (logos retirados; se añadirán nuevos) ═══ */
.site-title-text { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--blue-deep); }
.site-title-text em { font-style: normal; color: #e3350d; }
.login-logo-text { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--blue-deep); }
.login-logo-text em { font-style: normal; color: #e3350d; }
.preloader-logo-text { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--blue-deep); animation: preload-bounce 1.1s ease-in-out infinite; }
.preloader-logo-text em { font-style: normal; color: #e3350d; }
.me-shot-logo-text { font-size: 12px; font-weight: 800; color: #fff; opacity: 0.92; }

/* ═══════════════ ESTILO REDDIT (capa global) ═══════════════ */
body { background: #f6f7f8; }

/* Botones tipo píldora */
.lf-btn, .auth-submit, .tb2-btn, .tb-action-btn, .filter-pill, .prof-share-btn,
.prof-edit-open, .me-btn, .dk-pop-copy, .vgcc-tool-btn, .vgcc-roll-btn, .sr-buy,
.prof-create-btn, .me-incite-btn, .btn-cuenta {
  border-radius: 999px !important;
}
/* Acción principal en rojo sólido (estilo "Unirse" de Reddit, en rojo) */
.lf-btn, .auth-submit, .tb2-btn-primary { background: #e3350d; color: #fff; border: 1px solid transparent; }
.lf-btn:hover, .auth-submit:hover, .tb2-btn-primary:hover { background: #c62d0b; color: #fff; }

/* Tarjetas: esquinas grandes, borde hairline, sombra mínima */
.hero-card, .featured-wide, .news-hero, .news-card, .feed-item, .col-set-card,
.col-card-tile, .dk-card2, .me-card, .deck-guide-card, .col-value-banner,
.vgcc-panel, .prof-card-head, .sr-store, .prof-team, .dk-pop-card, .pk-card {
  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.045) !important;
}
/* Cards con imagen → recortan esquinas (las que NO tienen desplegables internos) */
.hero-card, .featured-wide, .news-hero, .news-card, .col-set-card, .col-card-tile,
.dk-card2, .me-card, .prof-team, .pk-card { overflow: hidden; }
.hero-card:hover, .news-card:hover, .col-set-card:hover, .pk-card:hover, .dk-card2:hover {
  border-color: rgba(0,0,0,0.22) !important;
}

/* ── Elevación sutil al pasar el ratón, unificada en todo el sitio ── */
.hero-card, .featured-wide, .news-hero, .news-card, .feed-item, .col-set-card,
.col-card-tile, .dk-card2, .me-card, .deck-guide-card, .prof-team, .dk-pop-card,
.pk-card, .prof-card, .ed-item, .prof-panel {
  transition: transform 0.22s var(--ease-out, cubic-bezier(0.22,1,0.36,1)), box-shadow 0.22s ease, border-color 0.15s ease;
}
.hero-card:hover, .featured-wide:hover, .news-hero:hover, .news-card:hover, .feed-item:hover,
.col-set-card:hover, .col-card-tile:hover, .dk-card2:hover, .me-card:hover, .deck-guide-card:hover,
.prof-team:hover, .dk-pop-card:hover, .pk-card:hover, .prof-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -10px rgba(10,20,60,0.22) !important;
}
@media (prefers-reduced-motion: reduce) {
  .hero-card, .featured-wide, .news-hero, .news-card, .feed-item, .col-set-card,
  .col-card-tile, .dk-card2, .me-card, .deck-guide-card, .prof-team, .dk-pop-card,
  .pk-card, .prof-card, .ed-item, .prof-panel { transition: none; }
  .hero-card:hover, .featured-wide:hover, .news-hero:hover, .news-card:hover, .feed-item:hover,
  .col-set-card:hover, .col-card-tile:hover, .dk-card2:hover, .me-card:hover, .deck-guide-card:hover,
  .prof-team:hover, .dk-pop-card:hover, .pk-card:hover, .prof-card:hover { transform: none; }
}

/* ── Entrada suave: las secciones principales de cada página aparecen con un
   ligero fade + deslizamiento hacia arriba al cargar, en cascada. ── */
/* Solo opacidad (sin transform): un transform "vivo" en un ancestro de .main
   convertiría a ese ancestro en containing block de cualquier position:fixed
   descendiente (paneles deslizantes, modales…) y los rompería. */
@keyframes sr-fade-in-up { from { opacity: 0; } to { opacity: 1; } }
.main > *:not(.topbar) { animation: sr-fade-in-up 0.5s ease both; }
.main > *:nth-child(2) { animation-delay: 0.04s; }
.main > *:nth-child(3) { animation-delay: 0.08s; }
.main > *:nth-child(4) { animation-delay: 0.12s; }
.main > *:nth-child(5) { animation-delay: 0.16s; }
.main > *:nth-child(n+6) { animation-delay: 0.2s; }
@media (prefers-reduced-motion: reduce) {
  .main > *:not(.topbar) { animation: none; }
}

/* Inputs / buscadores redondeados */
.pk-search, .dk-search, .lf-input, .vgcc-pk-search, #colSearch, #wlSearch, #colCardSearch {
  border-radius: 999px !important;
}

/* Hover de navegación estilo Reddit (gris suave) */
.nav-item:hover { background: rgba(0,0,0,0.06); }

/* ═══════════ POP-UP DE PERFIL (estilo Instagram "Editar perfil") ═══════════ */
.prof-edit-modal { max-width: 440px; }
.prof-edit-title { text-align: center; font-size: 16px; margin-bottom: 16px; }
.prof-edit-avatar { display: flex; align-items: center; gap: 14px; background: #f3f4f6; border-radius: 16px; padding: 14px 16px; margin-bottom: 18px; }
.prof-edit-av-info { display: flex; flex-direction: column; gap: 3px; }
.prof-edit-av-name { font-weight: 800; color: var(--blue-deep); font-size: 14px; }
.prof-edit-changecoin { background: none; border: none; color: #e3350d; font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 0; text-align: left; }
.prof-edit-changecoin:hover { text-decoration: underline; }
.prof-edit .prof-field { gap: 7px; margin-bottom: 16px; }
.prof-edit .prof-field-lbl { font-size: 12px; font-weight: 700; color: var(--blue-deep); }
.prof-edit .prof-socials-inputs { grid-template-columns: 1fr; }
.prof-edit textarea, .prof-edit .prof-username-row input, .prof-edit .prof-socials-inputs input, #profDisplayInput {
  background: #f3f4f6; border: 1px solid transparent; border-radius: 12px; padding: 11px 13px; font-size: 13px;
}
.prof-edit textarea:focus, .prof-edit .prof-username-row input:focus, .prof-edit .prof-socials-inputs input:focus, #profDisplayInput:focus {
  background: #fff; border-color: #e3350d; outline: none;
}
.prof-edit .prof-handle-fixed { border-radius: 12px; }
#profSaveBtn { width: 100%; margin-top: 6px; }

/* ── Redes sociales del perfil: icono + @ visibles ── */
.prof-edit .prof-social-row { display: flex; align-items: center; background: #f3f4f6; border: 1px solid transparent; border-radius: 12px; padding: 0 12px; }
.prof-edit .prof-social-row:focus-within { background: #fff; border-color: #e3350d; }
.prof-social-ico { font-size: 15px; width: 22px; text-align: center; flex: 0 0 auto; }
.prof-social-at { color: var(--text-muted); font-weight: 800; margin: 0 2px 0 8px; flex: 0 0 auto; }
.prof-edit .prof-social-row input { flex: 1; border: none !important; background: none !important; border-radius: 0 !important; padding: 11px 4px !important; font-size: 13px; outline: none; }

/* ── Calculadora: margen interior en los campos a rellenar (look pastilla) ── */
.vgcc-pk-search, .vgcc-field-input, .vgcc-move-name { padding-left: 14px !important; padding-right: 14px !important; }
.vgcc-pk-search, .vgcc-field-input { border-radius: 999px; }
select.vgcc-field-input { padding-right: 28px !important; }
.vgcc-move-name { padding-top: 7px; padding-bottom: 7px; }

/* Iconos reales de redes (Social-Media-Icons-API) */
.prof-social-ico-img { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; }
.prof-social-chip-ico { width: 14px; height: 14px; object-fit: contain; vertical-align: -2px; margin-right: 5px; }

/* Perfil: botón "Ver más" en las galerías (carga por páginas) */
.prof-more { grid-column: 1 / -1; justify-self: center; margin-top: 10px; font-family: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; padding: 9px 22px; border-radius: 999px; border: 1px solid rgba(40,80,200,0.4); background: rgba(40,80,200,0.08); color: #2850c8; }
.prof-more:hover { background: rgba(40,80,200,0.16); }
.prof-more:disabled { opacity: 0.5; cursor: default; }

/* Calculadora: flecha desplegable del campo de objeto */
.vgcc-pick-wrap { position: relative; }
.vgcc-pick-wrap .vgcc-field-input { padding-right: 26px !important; }
.vgcc-pick-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--text-muted); cursor: pointer; pointer-events: auto; }

/* Perfil: pestañas (Para cambiar / Busco / Equipos) */
/* ═══ DASHBOARD DEL PERFIL: las 3 secciones visibles a la vez ═══ */
.prof-dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin: 0 24px 22px; align-items: stretch; }
.prof-panel { display: flex; flex-direction: column; background: rgba(255,255,255,0.5); border: 0.5px solid var(--border-strong); border-radius: 16px; padding: 18px 20px; min-height: 560px; }
.prof-panel .prof-section-head { margin-bottom: 2px; }
.prof-panel .prof-section-sub { display: block; margin-bottom: 12px; }
.prof-panel-count {
  font-size: 11px; font-weight: 800; color: var(--blue-deep); background: rgba(227,53,13,0.1);
  border-radius: 999px; padding: 1px 8px; margin-left: auto;
}
.prof-grid--panel { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); flex: 1; align-content: start; overflow-y: auto; }
.prof-teams--panel { flex: 1; overflow-y: auto; }
@media (max-width: 700px) { .prof-dashboard { margin-left: 14px; margin-right: 14px; grid-template-columns: 1fr; } .prof-panel { min-height: 320px; } }

/* ── NEWSLETTER · POPUP DE PRIMERA VISITA ── */
.sr-nl-popup { max-width: 420px; text-align: center; padding: 30px 26px 24px; }
.sr-nl-popup-emoji { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.sr-nl-popup-title { font-size: 20px; font-weight: 800; color: var(--blue-deep, #1a1a2e); letter-spacing: -0.02em; margin: 0 0 8px; }
.sr-nl-popup-text { font-size: 13px; line-height: 1.55; color: var(--text-secondary, #555); margin: 0 0 18px; }
.sr-nl-popup-form { display: flex; gap: 8px; }
.sr-nl-popup-input { flex: 1; min-width: 0; font-family: inherit; font-size: 13px; padding: 11px 14px; border-radius: 999px;
  border: 1px solid var(--border-strong, #ccc); background: rgba(255,255,255,0.9); color: inherit; }
.sr-nl-popup-input:focus { outline: none; border-color: #e3350d; }
.sr-nl-popup-btn { flex: none; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 11px 18px;
  border-radius: 999px; border: none; background: #e3350d; color: #fff; white-space: nowrap; }
.sr-nl-popup-btn:hover { background: #c52d0b; }
.sr-nl-popup-msg { font-size: 12.5px; font-weight: 600; margin: 12px 0 0; min-height: 16px; }
.sr-nl-popup-msg.ok { color: #1f9d4d; }
.sr-nl-popup-skip { display: block; margin: 14px auto 0; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--text-muted, #999); text-decoration: underline; }
.sr-nl-popup-skip:hover { color: var(--text-secondary, #555); }
@media (max-width: 480px) { .sr-nl-popup-form { flex-direction: column; } .sr-nl-popup-btn { width: 100%; } }

/* ── REGISTRO · PANTALLA DE CUENTA CREADA ── */
.auth-success { text-align: center; padding: 14px 6px 6px; }
.auth-success-icon { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; background: #1f9d4d;
  color: #fff; font-size: 30px; line-height: 54px; font-weight: 700; }
.auth-success-title { font-size: 19px; font-weight: 800; margin: 0 0 8px; color: var(--blue-deep, #1a1a2e); }
.auth-success-text { font-size: 13px; line-height: 1.55; color: var(--text-secondary, #555); margin: 0 0 18px; }

/* ── ADSENSE · hueco con anuncio real montado ── */
.ad-slot.ad-live { background: none; border: none; padding: 0; }
.ad-slot.ad-live::before { content: none; }
.ad-slot.ad-live .adsbygoogle { display: block; width: 100%; height: 100%; }

/* ── Team Builder · botón "Cargar los últimos" ── */
.tb2-tourney-latest { font-family: inherit; font-size: 10px; font-weight: 700; cursor: pointer;
  border: 1px solid rgba(227,53,13,0.4); background: rgba(227,53,13,0.08); color: #e3350d;
  border-radius: 999px; padding: 4px 12px; white-space: nowrap; transition: background .15s, color .15s; }
.tb2-tourney-latest:hover { background: #e3350d; color: #fff; }
.tb2-tourney-latest:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 700px) { .tb2-tourney-sub { display: none; } .tb2-tourney-latest { margin-left: auto; } }

/* ── ONBOARDING (workflow de 3 pasos tras el registro) ── */
.ob-modal { max-width: 440px; padding: 26px 26px 20px; }
.ob-progress { display: flex; gap: 6px; justify-content: center; margin-bottom: 18px; }
.ob-dot { width: 26px; height: 4px; border-radius: 999px; background: var(--border-strong, #d4dae6); transition: background .2s; }
.ob-dot.active { background: #e3350d; }
.ob-slide { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.ob-emoji { font-size: 38px; line-height: 1; }
.ob-title { font-size: 18px; font-weight: 800; color: var(--blue-deep, #1a1a2e); margin: 0; }
.ob-opt { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.ob-field { display: flex; flex-direction: column; gap: 4px; text-align: left; font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.ob-field input, .ob-field textarea { font-family: inherit; font-size: 13px; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--border-strong, #ccc); background: rgba(255,255,255,0.9); color: inherit; resize: vertical; }
.ob-field input:focus, .ob-field textarea:focus { outline: none; border-color: #e3350d; }
.ob-hint { font-size: 11px; min-height: 14px; margin: 0; color: var(--text-muted); }
.ob-hint.bad { color: #c0392b; }
.ob-choices { display: flex; gap: 8px; }
.ob-choice { flex: 1; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 14px 6px;
  border-radius: 11px; border: 1px solid var(--border-strong, #ccc); background: rgba(255,255,255,0.8); color: var(--text-secondary); }
.ob-choice:hover { border-color: rgba(227,53,13,0.4); }
.ob-choice.active { background: #e3350d; border-color: #e3350d; color: #fff; }
.ob-nav { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.ob-back, .ob-skip { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 12px; color: var(--text-muted); }
.ob-back:hover, .ob-skip:hover { color: var(--blue-deep); }
.ob-skip { margin-left: auto; }
.ob-next { font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 10px 22px;
  border-radius: 999px; border: none; background: #e3350d; color: #fff; }
.ob-next:hover { background: #c52d0b; }
.ob-next:disabled { opacity: 0.6; }

/* ── Perfil · eliminar cuenta ── */
.prof-danger { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(224,92,92,0.3); display: flex; flex-direction: column; gap: 8px; }
.prof-danger-lbl { font-size: 11px; color: var(--text-muted); line-height: 1.45; }
.prof-delete-btn { align-self: flex-start; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  padding: 9px 16px; border-radius: 9px; border: 1px solid #c0392b; background: transparent; color: #c0392b; }
.prof-delete-btn:hover { background: #c0392b; color: #fff; }

/* ── UI · confirm visual + toast ── */
.sr-confirm { max-width: 380px; padding: 24px 24px 18px; text-align: center; }
.sr-confirm-title { font-size: 17px; font-weight: 800; color: var(--blue-deep, #1a1a2e); margin: 0 0 8px; }
.sr-confirm-msg { font-size: 13px; line-height: 1.5; color: var(--text-secondary, #555); margin: 0 0 18px; }
.sr-confirm-actions { display: flex; gap: 10px; justify-content: center; }
.sr-confirm-actions button { font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--border-strong, #ccc); background: #fff; color: var(--text-secondary); }
.sr-confirm-cancel:hover { background: #f4f6fb; }
.sr-confirm-ok { background: #e3350d; border-color: #e3350d; color: #fff; }
.sr-confirm-ok:hover { background: #c52d0b; }
.sr-confirm-ok.danger { background: #c0392b; border-color: #c0392b; }
.sr-confirm-ok.danger:hover { background: #a93226; }
.sr-toast-host { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.sr-toast { background: rgba(26,26,46,0.96); color: #fff; font-size: 12.5px; font-weight: 600; padding: 11px 18px; border-radius: 999px; box-shadow: 0 6px 22px rgba(10,20,60,0.25); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; max-width: 90vw; }
.sr-toast.show { opacity: 1; transform: translateY(0); }
.sr-toast-ok { background: #1f9d4d; }
.sr-toast-bad { background: #c0392b; }

/* ── Tus leads (selección manual) ── */
.tb2-leads-hint { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
.tb2-leads-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.tb2-lead-pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
  width: 78px; padding: 8px 4px 6px; border-radius: 11px; border: 1px solid var(--border-strong, #ccc); background: rgba(255,255,255,0.7); transition: border-color .15s, background .15s; }
.tb2-lead-pick:hover { border-color: rgba(227,53,13,0.4); }
.tb2-lead-pick.active { border-color: #e3350d; background: rgba(227,53,13,0.08); }
.tb2-lead-pick img { width: 46px; height: 46px; object-fit: contain; }
.tb2-lead-pick-name { font-size: 9px; font-weight: 700; color: var(--blue-deep); text-align: center; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tb2-lead-badge { position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #e3350d; color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; }
.tb2-leads-note { width: 100%; margin-top: 12px; font-family: inherit; font-size: 12px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--border-strong, #ccc); background: rgba(255,255,255,0.9); color: inherit; resize: vertical; }
.tb2-leads-note:focus { outline: none; border-color: #e3350d; }

/* Icono de la colección (símbolo del set) junto al nombre de la carta */
.col-detail-name { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.col-detail-setsym { height: 22px; width: auto; max-width: 40px; object-fit: contain; opacity: 0.9; }

/* ── Mis Equipos · preview WYSIWYG + leads ── */
.me-preview { width: 100%; position: relative; overflow: hidden; border-radius: 14px; background: #2a0d0a; box-shadow: 0 8px 28px rgba(10,20,60,0.18); }
.me-preview .me-shot-node { position: absolute; top: 0; left: 0; }
.me-lead-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.me-lead-lbl { font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.me-lead-sel { font-family: inherit; font-size: 12px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border-strong, #ccc); background: rgba(255,255,255,0.9); color: inherit; cursor: pointer; }
.me-lead-sel:focus { outline: none; border-color: #e3350d; }

/* ── Team Builder · pares de leads ── */
.tb2-leadpair { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tb2-leadpair-lbl { font-size: 11px; font-weight: 800; color: #e3350d; min-width: 46px; }
.tb2-leadpair-plus { font-size: 14px; font-weight: 800; color: var(--text-muted); }
.tb2-lead-sel { font-family: inherit; font-size: 12px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--border-strong, #ccc); background: rgba(255,255,255,0.9); color: inherit; cursor: pointer; }
.tb2-lead-sel:focus { outline: none; border-color: #e3350d; }
.tb2-lead-note { flex: 1; min-width: 160px; font-family: inherit; font-size: 12px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border-strong, #ccc); background: rgba(255,255,255,0.9); color: inherit; }
.tb2-lead-note:focus { outline: none; border-color: #e3350d; }

/* Aviso de leads en Mis Equipos (se definen en el Team Builder) */
.me-lead-hint { font-size: 11px; color: var(--text-muted); margin: 10px 0 4px; }

/* ── Mis Decks · estilo/notas/visibilidad ── */
.md-playstyle, .md-notes { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 12px; margin-top: 8px;
  padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border-strong, #ccc); background: rgba(255,255,255,0.9); color: inherit; resize: vertical; }
.md-playstyle:focus, .md-notes:focus { outline: none; border-color: #e3350d; }
.md-vis-badge { font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer; padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--border-strong, #ccc); background: rgba(255,255,255,0.7); color: var(--text-secondary); }
.md-vis-badge.public { background: #1f9d4d; border-color: #1f9d4d; color: #fff; }
.md-btn-img { background: rgba(227,53,13,0.1); color: #e3350d; }
.md-card-actions { flex-wrap: wrap; gap: 6px; }

/* Autor de deck popular: píldora con icono (estilo igual al Team Builder) */
.dk-pop-by { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; text-decoration: none;
  font-size: 9.5px; font-weight: 700; background: rgba(227,53,13,0.1); color: #e3350d; border-radius: 999px;
  padding: 3px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background .13s, color .13s; }
.dk-pop-by:hover { background: #e3350d; color: #fff; }
.dk-pop-by svg { flex: 0 0 auto; }

/* Selectores de serie/set (colecciones): una fila, navegación solo con flechas */
@media (max-width: 900px) {
  .dk-serie-selector, .dk-set-selector { flex-wrap: nowrap; overflow-x: hidden; justify-content: flex-start; }
  .dk-serie-selector > *, .dk-set-selector > * { flex: 0 0 auto; }
}

/* Tarjeta de deck popular (estructura Team Builder) */
.dk-popcard { cursor: pointer; }
.dk-popcard .tb2-sugcard-sprites { gap: 8px; min-height: 56px; }
/* Deck de LimitlessTCG: miniatura del deck en vez de sprites por Pokédex */
.dk-popcard-img { width: 100%; height: 84px; border-radius: 10px; overflow: hidden; margin: 2px 0 2px;
  background: rgba(38,40,48,0.05); border: 0.5px solid var(--border); display: flex; align-items: flex-start; justify-content: center; }
.dk-popcard-img img { width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top; display: block; }
.dk-popcard--img:hover .dk-popcard-img img { transform: scale(1.03); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
.dk-popbubble { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.dk-popbubble img { width: 50px; height: 50px; object-fit: contain; }
.dk-popcard-count { font-size: 10px; font-weight: 700; color: var(--text-muted); }

/* Deck Builder · flechas para el scroll lateral de selectores */
.dk-sel-row { display: flex; align-items: center; gap: 4px; }
.dk-sel-row > .dk-serie-selector, .dk-sel-row > .dk-set-selector { flex: 1 1 auto; min-width: 0; }
.dk-sel-arrow { flex: 0 0 auto; width: 26px; height: 30px; border: 1px solid var(--border-strong, #ccc); background: rgba(255,255,255,0.85);
  color: var(--text-secondary); border-radius: 8px; cursor: pointer; font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center; font-family: inherit; }
.dk-sel-arrow:hover { background: #e3350d; color: #fff; border-color: #e3350d; }

/* Botón "Lista oficial (imprimir)" */
.sr-print-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px;
  font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; padding: 11px 16px; border-radius: 11px;
  border: none; color: #fff; background: linear-gradient(135deg, #1a1a2e, #3a0f0a 60%, #7a1810);
  box-shadow: 0 4px 14px rgba(122,24,16,0.28); transition: transform .12s, box-shadow .12s, filter .12s; letter-spacing: .01em; }
.sr-print-btn:hover { transform: translateY(-1px); filter: brightness(1.12); box-shadow: 0 6px 20px rgba(122,24,16,0.4); }
.sr-print-btn:active { transform: translateY(0); }

/* Icono del set en los items del ticker de precios */
.tk-setsym { height: 13px; width: auto; max-width: 22px; object-fit: contain; vertical-align: -2px; margin-right: 2px; opacity: 0.9; }

/* ══════════════════════════════════════════════════════════════
   CAPA DE ANIMACIÓN GLOBAL
   Principios: solo transform/opacity, curvas ease-out custom (nunca
   'all' ni linear/ease-in-out), feedback instantáneo, y respeto total
   a prefers-reduced-motion. Aplica a toda la web (tema claro).
   ══════════════════════════════════════════════════════════════ */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
}
html { scroll-behavior: smooth; }

/* Botones y pills: transición de propiedades concretas (no 'all') */
button, .lf-btn, .tb-action-btn, .pbtn, .sr-buy, .sr-print-btn, .deck-rename-btn,
.col-detail-own, .col-detail-wish, .col-detail-track, .col-detail-trade, .col-own-btn, .col-minus-btn,
.col-wish-btn, .col-track-btn, .col-trade-btn, .col-detail-btn, .prof-tab, .prof-edit-open, .prof-share-btn,
.ob-choice, .dk-filter, .filter-pill, .tb2-type-pill, .tb2-reg-pill, .tb2-slot-swap,
.me-vis-badge, .lang-switch button, .cc-btn, .me-incite-btn {
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}

/* Pulsación física: se hunde ligeramente al presionar */
button:active, .lf-btn:active, .tb-action-btn:active, .pbtn:active, .sr-buy:active,
.filter-pill:active, .dk-filter:active, .prof-tab:active, .ob-choice:active,
.col-detail-own:active, .col-detail-wish:active, .col-detail-track:active, .col-detail-trade:active,
.tb2-type-pill:active, .tb2-reg-pill:active { transform: scale(0.955); }

/* CTAs principales: pequeño lift con sombra tintada al hover */
.lf-btn:hover, .sr-buy-packs:hover, .me-incite-btn:hover, .cc-btn:hover, .tb-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(227, 53, 13, 0.5);
}
/* Chips/pills: realce sutil al hover */
.filter-pill:hover, .dk-filter:hover, .tb2-type-pill:hover, .tb2-reg-pill:hover,
.prof-tab:hover, .ob-choice:hover { transform: translateY(-1px); }

/* Foco accesible y con la marca */
:where(button, a, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(227, 53, 13, 0.3);
}

/* Nav: el icono se desliza levemente al pasar */
.nav-icon { transition: transform var(--dur) var(--ease-out); }
.nav-item:hover .nav-icon { transform: translateX(2px); }

/* Modales/overlays existentes: entrada suave (si tienen .active) */
.pk-modal-bg, .tb2-picker-bg, .export-modal-bg { transition: opacity var(--dur) var(--ease-out); }

/* Reveal al hacer scroll — la clase .sr-reveal la coloca main.js solo en
   elementos bajo el pliegue (sin parpadeo en los visibles al cargar). */
.sr-reveal { opacity: 0; transform: translateY(18px); }
.sr-reveal.sr-in {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .sr-reveal { opacity: 1 !important; transform: none !important; }
}

/* En iPhones no-Pro-Max (~390px) el logo centrado llegaba a solaparse con el
   selector ES/EN + botón Login cuando no hay sesión iniciada. Encogemos ese
   lado para dejarle sitio al logo centrado. (Al final del archivo para ganar
   la cascada frente a las reglas base de .lang-switch/.btn-cuenta/.site-title-text.) */
@media (max-width: 900px) {
  .topbar { padding: 0 14px; }
  .topbar-right { gap: 6px; }
  .lang-switch { padding: 1px; }
  .lang-switch button { padding: 4px 6px; font-size: 9px; }
  .btn-cuenta { padding: 6px 10px; font-size: 9.5px; }
  .site-title-text { font-size: 15px; }
}

/* Popup de detalle de carta (Mi Colección) en mobile: la regla mobile de
   .col-detail-grid vivía ANTES que la base (auto 1fr) en el archivo, así que
   la base ganaba la cascada y la columna de info quedaba aplastada a ~130px
   sin que se notara hasta probarlo en el móvil real. La repetimos aquí, al
   final, para que gane de verdad — y de paso hacemos que todo quepa (2×2 en
   vez de 4-en-fila, sin min-width que fuerce overflow horizontal). */
@media (max-width: 700px) {
  .col-card-detail-modal { padding: 16px; max-width: 100%; }
  /* Carta pequeña + nombre/tipo/rareza AL LADO (no encima) — así la cabecera
     entera cabe sin scroll; ataques/comprar/precio siguen debajo. */
  .col-detail-grid { grid-template-columns: 92px 1fr; grid-template-rows: auto auto; gap: 4px 12px; }
  .col-detail-img-col { grid-column: 1; grid-row: 1; }
  .col-detail-header { grid-column: 2; grid-row: 1; }
  .col-detail-body { grid-column: 1 / 3; grid-row: 2; margin-top: 10px; }
  .col-detail-card-img { max-width: 100%; max-height: 128px; }
  .col-detail-localid { font-size: 7.5px; }
  .col-detail-name { font-size: 14px; margin: 3px 0 6px; line-height: 1.15; }
  .col-detail-meta { margin-bottom: 0; gap: 4px; }
  /* Los 4 botones (añadir/busco/seguir/cambio) en una sola línea — el texto
     puede partirse en 2 líneas dentro de cada botón antes que apilarlos. */
  .col-detail-actions { flex-wrap: nowrap; gap: 4px; }
  .col-detail-own, .col-detail-wish, .col-detail-track, .col-detail-trade {
    min-width: 0; flex: 1 1 0; font-size: 8.5px; padding: 7px 3px; line-height: 1.25; white-space: normal;
  }
  .col-own-controls { flex: 1 1 0; min-width: 0; }
  .col-own-controls .col-own-count { font-size: 8.5px; white-space: normal; line-height: 1.2; }
  .col-own-controls { flex-wrap: nowrap; }
  .sr-buy-row { gap: 6px; }
  .sr-buy { min-width: 0; flex: 1 1 calc(50% - 6px); font-size: 10.5px; padding: 9px 6px; }
  /* La × siempre visible y pulsable, tal cual esté de bajado el scroll del
     popup — fija al viewport en vez de anclada al contenido con scroll. */
  .pk-modal-close {
    position: fixed; top: 14px; right: 14px; z-index: 210;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.9); border: 0.5px solid var(--border-strong); border-radius: 50%;
    font-size: 18px; box-shadow: 0 2px 10px rgba(10,20,60,0.14); backdrop-filter: blur(6px);
  }
}