/* ============================================================
   smgr · css/pages/viz_lideres_zona.css — DISEÑO DE LA TARJETA capturable de
   "Líderes de anotación por zona" (visualizacion_lideres_zona.php). Portado 1:1
   del clásico, con TODO scopeado bajo #captureArea. Sin `body{background}` ni
   reset global (los aporta viz.css). Ancho fijo 900px. Tarjeta OSCURA.
   La geometría de pista que depende de valores PHP (paint/arc/corners/grid) va
   en estilos inline en el .php; aquí sólo lo estático (colores, posición, etc.).
   ============================================================ */

#captureArea {
  font-family: 'Inter', sans-serif;
  background: #0f0f1a;
  border-radius: 20px;
  overflow: hidden;
  width: 900px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
#captureArea * { box-sizing: border-box; }

/* ---------- Cabecera ---------- */
#captureArea .header {
  padding: 25px 30px 15px;
  text-align: left;
}
#captureArea .header h1 {
  font-size: 24px;
  font-weight: 900;
  color: #f5d742;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
#captureArea .header p {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

/* ---------- Pista ---------- */
#captureArea .court-wrapper { padding: 10px 25px 20px; }
#captureArea .court {
  position: relative;
  width: 100%;
  background: #0f0f1a;
}

/* Aro */
#captureArea .rim {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border: 3px solid #f5d742;
  border-radius: 50%;
  background: #0f0f1a;
  z-index: 25;
}
#captureArea .rim-label {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  color: #f5d742;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 25;
}

/* Zona de la pintura (ancho/alto en inline por depender de PHP) */
#captureArea .paint {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid #000;
  border-top: none;
  pointer-events: none;
  z-index: 20;
}

/* Arco de triple — semicírculo (ancho en inline) */
#captureArea .three-point-arc {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  aspect-ratio: 1;
  border: 2px solid #000;
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  clip-path: inset(50% 0 0 0);
}

/* Líneas de triple de esquina (alto y posición en inline) */
#captureArea .corner-3-left,
#captureArea .corner-3-right {
  position: absolute;
  top: 0;
  width: 2px;
  background: #000;
  z-index: 20;
}

/* Rejilla (columnas/filas/aspect-ratio en inline por depender de PHP) */
#captureArea .grid-container {
  position: relative;
  display: grid;
  gap: 0px;
}

#captureArea .zone {
  position: relative;
  background: rgba(30, 30, 40, 0.5);
  border: 1px solid rgba(255,255,255,0.08);
  aspect-ratio: 1;
  overflow: visible;
}
#captureArea .zone:hover {
  border-color: rgba(245, 215, 66, 0.6);
  z-index: 30;
}
#captureArea .zone.has-leader {
  background: transparent;
  border-color: rgba(255,255,255,0.2);
}
#captureArea .zone.empty { background: rgba(20, 20, 30, 0.6); }

#captureArea .player-region {
  z-index: 5;
  pointer-events: none;
}
#captureArea .player-region svg {
  width: 100%;
  height: 100%;
  display: block;
}

#captureArea .zone-tooltip {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,10,20,0.95);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 10px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  z-index: 100;
  border: 1px solid #f5d742;
  pointer-events: none;
}
#captureArea .zone:hover .zone-tooltip,
#captureArea .zone.highlighted .zone-tooltip {
  opacity: 1;
  visibility: visible;
}
#captureArea .zone.highlighted { z-index: 25; }
#captureArea .zone.dimmed { opacity: 0.3; }
#captureArea .player-region.dimmed { opacity: 0.3; }
#captureArea .player-region.highlighted { z-index: 15; }

#captureArea .tooltip-name {
  font-weight: 700;
  color: #f5d742;
  margin-bottom: 2px;
}
#captureArea .tooltip-stats { color: #999; }

/* ---------- Pie ---------- */
#captureArea .footer {
  padding: 15px 30px 25px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
#captureArea .footer-left {
  color: #444;
  font-size: 10px;
  font-weight: 600;
}
#captureArea .footer-right { text-align: right; }
#captureArea .footer-right .brand {
  color: #777;
  font-size: 11px;
  font-weight: 700;
}
#captureArea .footer-right .social {
  color: #444;
  font-size: 10px;
  margin-top: 3px;
}