/* ── 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;
  --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: var(--topbar-h); left: 0; bottom: 0;   /* empieza bajo la topbar full-width */
  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);
}

.main {
  margin-left: var(--sidebar-w);
  padding-top: calc(var(--topbar-h) + 20px);   /* topbar fija + 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-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-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 */

/* 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; } }

.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: 8px;
}

.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: 0 24px 8px;
  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: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;
  }
  .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; }
  .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; }

/* 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 1.2fr; 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; }

/* ═══ 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-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; }
.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); }

/* ── 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; }
.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 { background: rgba(255,255,255,0.5); border: 0.5px solid var(--border); border-radius: 12px; overflow: hidden; }

/* 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); }
}
@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; }
.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); }

/* 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; }
.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: baseline; gap: 12px; margin-top: 4px; }
.wish-now { font-size: 34px; font-weight: 900; color: var(--text-primary); line-height: 1; }
.wish-change { font-size: 17px; font-weight: 800; }
.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(260px, 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; gap: 6px; margin-top: 10px; }
.md-btn { flex: 1; font-size: 10.5px; font-weight: 700; padding: 7px 8px; 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; font-size: 11px; font-weight: 700; padding: 8px; 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); }
.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: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.dk-popular-title { font-size: 12px; font-weight: 800; color: var(--text-primary); }
.dk-popular-sub { font-size: 10px; color: var(--text-muted); }
.dk-popular-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.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: 8px; 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 18px; 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(62px, 1fr)); gap: 6px; 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: wrap; gap: 4px; padding: 10px 14px 2px; justify-content: center; }
.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 (en ~2 líneas) */
.dk-set-selector { display: flex; gap: 5px; padding: 6px 14px 2px; flex-wrap: wrap; justify-content: center; }
.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(110px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 10px; 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; }
.col-reset-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid rgba(229,72,77,0.4); background: rgba(229,72,77,0.08); color: #e5484d; border-radius: 9px; font-size: 11px; font-weight: 700; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; }
.col-reset-btn:hover { background: rgba(229,72,77,0.16); border-color: rgba(229,72,77,0.7); }
.col-reset-btn:active { transform: scale(0.96); }
.col-reset-btn svg { stroke: #e5484d; }
.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.55); border: 0.5px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform 0.15s, background 0.13s, box-shadow 0.15s; }
.col-set-card:hover { transform: translateY(-3px); background: rgba(255,255,255,0.85); box-shadow: 0 6px 20px rgba(10,20,60,0.1); }
.col-set-card-img { height: 100px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,rgba(255,222,216,0.15),rgba(255,208,200,0.05)); padding: 10px; }
.col-set-card-img img { max-width: 100%; max-height: 80px; object-fit: contain; }
.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: 10px 12px 12px; }
.col-set-card-name { font-size: 10px; font-weight: 700; color: var(--blue-deep); line-height: 1.3; margin-bottom: 5px; }
.col-set-card-count { font-size: 9px; color: var(--text-muted); margin-bottom: 5px; }
.col-set-card-bar-bg { height: 4px; background: rgba(38,40,48,0.08); border-radius: 2px; overflow: hidden; }
.col-set-card-bar { height: 100%; background: linear-gradient(90deg,rgba(227,53,13,0.5),rgba(245,130,110,0.7)); border-radius: 2px; transition: width 0.4s; }

/* 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-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-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-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; }
/* 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) + 16px); transform: none; width: 120px; height: calc(100vh - var(--topbar-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: 0 24px 18px; }       /* 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); }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }

/* ═══ 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; gap: 24px; align-items: start; }
.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: 10px; box-shadow: 0 8px 32px rgba(10,20,60,0.2); display: block; }
.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-trade { 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-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-trade.active { background: rgba(40,80,200,0.12); border-color: rgba(40,80,200,0.4); color: #2850c8; }


/* ════════════════════════════════════════
   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; }
  /* Apilar: mazo arriba, explorador abajo (altura natural) */
  .deck-layout2 { grid-template-columns: 1fr; height: auto; }
  .deck-panel-top { overflow: visible; }
  .deck-panel-top .deck-slots-grid { overflow: visible; }
  .deck-browser { max-height: none; }
  .dk-card-grid { max-height: 60vh; }
  .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); }
}
@media (max-width: 700px) {
  .deck-slots-grid { grid-template-columns: repeat(10, 1fr); }
  .tb2-slots { grid-template-columns: repeat(2, 1fr); padding: 0 14px 12px; }
  .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-summary { margin: 8px 14px 16px; }
  .tb2-picker-grid { grid-template-columns: repeat(2, 1fr); }
  .col-stats-bar { grid-template-columns: repeat(2, 1fr); }
  .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 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; }
.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 { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 12px; 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;
}

/* 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) */
.prof-tabs { display: flex; gap: 8px; margin: 0 24px 16px; flex-wrap: wrap; }
.prof-tab { font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: rgba(255,255,255,0.7); color: var(--text-secondary); }
.prof-tab:hover { border-color: rgba(227,53,13,0.4); }
.prof-tab.active { background: #e3350d; border-color: #e3350d; color: #fff; }
@media (max-width: 700px) { .prof-tabs { margin-left: 14px; margin-right: 14px; } }