/* ============================================================
   smgr · css/pages/viz_copa.css — DISEÑO de las DOS tarjetas capturables de
   "Experiencia en Copa del Rey" (visualizacion_copa.php). Portado 1:1 del
   clásico.

   MULTI-CAPTURA: hay dos targets (capChart, capDetalle), no #captureArea, así
   que el reset scopeado de viz.css no los cubre → aquí se replica ese reset bajo
   la clase .viz-card (común a ambas). Ambas tarjetas son de FONDO OSCURO
   (#2d3748): al capturar se pasa ese color como bgColor. El diseño va scopeado
   bajo .viz-card; sólo los helpers de maquetación (.viz-capbar / .viz-scroll /
   .viz-empty / .team-detail-section), fuera de las tarjetas, van sin scope.
   Ancho fijo 1100px; en móvil se hace scroll horizontal.
   ============================================================ */

/* ---------- Maquetación fuera de las tarjetas (chrome Foco) ---------- */
.viz-capbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4);
}
.viz-capbar__title { font-family: var(--score); font-weight: 700; font-size: 16px; color: var(--ink); }
.viz-scroll { margin-top: var(--sp-2); overflow-x: auto; }
.viz-empty {
  margin-top: var(--sp-4);
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card, 12px);
}

/* El panel de detalle está oculto hasta que se hace clic en un equipo. */
.team-detail-section { display: none; }
.team-detail-section.active { display: block; }

/* ---------- Reset scopeado (equivalente al de viz.css para #captureArea) ---------- */
.viz-card, .viz-card * { margin: 0; padding: 0; box-sizing: border-box; }
.viz-card { line-height: normal; color: #e2e8f0; }
.viz-card img { display: inline; max-width: none; vertical-align: baseline; }

/* ---------- Tarjeta (fondo oscuro común a gráfico y detalle) ---------- */
.viz-card {
  font-family: 'Inter', sans-serif;
  background: #2d3748;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
  overflow: hidden;
  width: 1100px;
}

/* ---------- Cabecera del gráfico ---------- */
.viz-card .chart-header {
  padding: 20px 30px 0;
  display: flex;
  align-items: center;
  gap: 15px;
}
.viz-card .logo {
  width: 70px; height: 53px; background: white; border-radius: 15%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,0.3); overflow: hidden;
  flex-shrink: 0;
}
.viz-card .logo img { width: 100%; height: 100%; object-fit: contain; }
.viz-card .chart-header h2 { color: white; font-size: 20px; font-weight: 700; }
.viz-card .chart-header p { color: #a0aec0; font-size: 12px; margin-top: 4px; }

.viz-card .chart-footer {
  padding: 10px 20px;
  text-align: center;
  font-size: 12px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.viz-card .chart-footer span { color: white; opacity: 0.8; }

.viz-card .legend {
  display: flex;
  justify-content: center;
  gap: 25px;
  padding: 12px 20px 5px;
  flex-wrap: wrap;
}
.viz-card .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #a0aec0;
  font-size: 11px;
  font-weight: 600;
}

/* Fotos de jugador como <img> HTML sobre el SVG (html2canvas las captura). */
.viz-card .tooltip-container { position: relative; }
.viz-card .chart-plot { position: relative; }
.viz-card .photo-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.viz-card .bubble-photo {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: cover;
  background: #4a5568;
}
.viz-card .shield-overlay {
  position: absolute;
  transform: translate(-50%, -50%);
  object-fit: contain;
}

.viz-card .svg-tooltip {
  position: absolute;
  background: rgba(0,0,0,0.85);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  display: none;
  white-space: nowrap;
  z-index: 100;
}

.viz-card .clickable-team { cursor: pointer; }
.viz-card .clickable-team:hover { opacity: 0.8; }

/* ---------- Panel de detalle por equipo ---------- */
.viz-card .team-detail-header {
  padding: 20px 30px 0;
  display: flex;
  align-items: center;
  gap: 15px;
}
.viz-card .team-detail-header .shield {
  width: 50px; height: 50px; background: white; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,0.3); overflow: hidden;
  flex-shrink: 0;
}
.viz-card .team-detail-header .shield img { width: 38px; height: 38px; object-fit: contain; }
.viz-card .team-detail-header h2 { color: white; font-size: 20px; font-weight: 700; }
.viz-card .team-detail-header p { color: #a0aec0; font-size: 12px; margin-top: 3px; }

.viz-card .team-detail-body { padding: 15px 25px 10px; }

.viz-card .player-row {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 8px;
  gap: 10px;
}
.viz-card .player-row:hover { background: rgba(255,255,255,0.04); }

.viz-card .player-photo {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  flex-shrink: 0; background: #4a5568;
}
.viz-card .player-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.viz-card .player-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 170px;
  flex-shrink: 0;
}
.viz-card .player-info .name { color: #e2e8f0; font-size: 13px; font-weight: 600; }
.viz-card .player-info .name.no-exp { color: #718096; }

.viz-card .pos-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.viz-card .pos-badge.base { background: #2b6cb0; color: white; }
.viz-card .pos-badge.alero { background: #2f855a; color: white; }
.viz-card .pos-badge.pivot { background: #9b2c2c; color: white; }

.viz-card .seasons-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
}
.viz-card .season-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,255,255,0.08);
  color: #a0aec0;
}
.viz-card .season-pill.champion { background: #d4a76a; color: white; }
.viz-card .season-pill.positive { background: rgba(5, 150, 105, 0.25); color: #68d391; }

.viz-card .player-totals {
  margin-left: auto;
  text-align: right;
  color: #a0aec0;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 140px;
}

.viz-card .no-exp-separator {
  text-align: center;
  color: #4a5568;
  font-size: 11px;
  font-weight: 600;
  padding: 10px 0 5px;
  border-top: 1px solid #4a5568;
  margin-top: 8px;
}
.viz-card .no-exp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 5px 10px;
}
.viz-card .no-exp-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.viz-card .no-exp-item .player-photo { width: 26px; height: 26px; opacity: 0.5; }
.viz-card .no-exp-item .name { color: #718096; font-size: 12px; font-weight: 600; }
.viz-card .no-exp-item .pos-badge { opacity: 0.5; }