/* ============================================================
   smgr · css/pages/viz_playoffs_experiencia.css — DISEÑO de "Experiencia en
   playoffs" (visualizacion_playoffs_experiencia.php). El gráfico principal va
   scopeado bajo #captureArea (tarjeta oscura). El panel de detalle es
   interactivo y vive FUERA del #captureArea → sus selectores se scopean bajo
   #teamDetailCapture / #teamDetailSection para no colisionar con el chrome
   "Foco". Sin reset global ni body{background}. Ancho fijo 1100px.
   ============================================================ */

/* ==================== Gráfico principal ==================== */
#captureArea {
  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;
}
#captureArea * { box-sizing: border-box; }

#captureArea .chart-header { padding: 20px 30px 0; display: flex; align-items: center; gap: 15px; }
#captureArea .chart-header h2 { color: #fff; font-size: 20px; font-weight: 700; }
#captureArea .chart-header p { color: #a0aec0; font-size: 12px; margin-top: 4px; }

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

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

#captureArea .tooltip-container { position: relative; }
#captureArea .chart-plot { position: relative; }
#captureArea .photo-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
#captureArea .bubble-photo { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; object-fit: cover; background: #4a5568; }
#captureArea .shield-overlay { position: absolute; transform: translate(-50%, -50%); object-fit: contain; }

#captureArea .svg-tooltip {
  position: absolute;
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  display: none;
  white-space: nowrap;
  z-index: 100;
}
#captureArea .clickable-team { cursor: pointer; }
#captureArea .clickable-team:hover { opacity: 0.8; }

#captureArea .empty-state {
  padding: 40px 20px;
  text-align: center;
  color: #a0aec0;
  font-size: 14px;
  font-weight: 600;
}

/* ==================== Panel de detalle (fuera de #captureArea) ==================== */
.team-detail-section { display: none; margin-top: 8px; }
.team-detail-section.active { display: block; }
.team-detail-section .detail-title { font-size: 16px; font-weight: 700; }

.team-detail {
  font-family: 'Inter', sans-serif;
  background: #2d3748;
  border-radius: 20px;
  overflow: hidden;
  width: 1100px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}
.team-detail * { box-sizing: border-box; }

.team-detail .team-detail-header { padding: 20px 30px 0; display: flex; align-items: center; gap: 15px; }
.team-detail .team-detail-header .shield {
  width: 50px; height: 50px; background: #fff; 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;
}
.team-detail .team-detail-header .shield img { width: 38px; height: 38px; object-fit: contain; }
.team-detail .team-detail-header h2 { color: #fff; font-size: 20px; font-weight: 700; }
.team-detail .team-detail-header p { color: #a0aec0; font-size: 12px; margin-top: 3px; }

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

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

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

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

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

.team-detail .seasons-list { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.team-detail .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;
}
.team-detail .season-pill.champion { background: #d4a76a; color: #fff; }
.team-detail .season-pill.positive { background: rgba(5, 150, 105, 0.25); color: #68d391; }

.team-detail .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;
}

.team-detail .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;
}
.team-detail .no-exp-grid { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 5px 10px; }
.team-detail .no-exp-item { display: flex; align-items: center; gap: 6px; }
.team-detail .no-exp-item .player-photo { width: 26px; height: 26px; opacity: 0.5; }
.team-detail .no-exp-item .name { color: #718096; font-size: 12px; font-weight: 600; }
.team-detail .no-exp-item .pos-badge { opacity: 0.5; }

.team-detail .chart-footer { padding: 10px 20px; text-align: center; font-size: 12px; display: flex; justify-content: center; gap: 20px; }
.team-detail .chart-footer span { color: #fff; opacity: 0.8; }