/* ============================================================
   smgr · css/pages/viz_win_shares.css — DISEÑO de "Win Shares"
   (visualizacion_win_shares.php). La TARJETA capturable va scopeada bajo
   #captureArea; los CONTROLES (.ws-tools) y el MODAL (#wsModal) viven FUERA
   del captureArea (nunca se capturan) y se namespacean para no colisionar con
   el chrome "Foco". Sin `body{background}` ni reset global (los aporta viz.css).
   Ancho fijo 920px.
   ============================================================ */

/* ---------- Controles (FUERA del captureArea) ---------- */
.ws-tools { display: flex; justify-content: center; margin-top: var(--sp-4, 16px); }
.ws-tools .viz-controls { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.ws-tools .viz-controls label { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: #2d3748; }
.ws-tools .viz-controls select {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
  padding: 8px 14px; border-radius: 8px; border: 1px solid #cbd5e1;
  background: #fff; color: #1f2937; cursor: pointer; min-width: 240px;
}
.ws-tools .seg { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; }
.ws-tools .seg button {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  padding: 8px 14px; border: none; background: #fff; color: #4b5563; cursor: pointer;
}
.ws-tools .seg button.active { background: #2c5282; color: #fff; }

/* ---------- Tarjeta capturable ---------- */
#captureArea {
  font-family: 'Inter', sans-serif;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
  overflow: hidden;
  width: 920px;
}
#captureArea * { box-sizing: border-box; }

#captureArea .header {
  background: linear-gradient(135deg, #2c5282 0%, #2a4365 100%);
  color: #fff; padding: 14px 22px; display: flex; align-items: center; gap: 14px;
}
#captureArea .header h1 { font-size: 22px; font-weight: 800; line-height: 1.1; }
#captureArea .header p { font-size: 12px; opacity: 0.92; margin-top: 3px; }

#captureArea .criteria-info {
  background: #f8f9fa; padding: 8px 22px; border-bottom: 1px solid #e2e8f0;
  font-size: 11px; color: #4b5563; line-height: 1.5;
}
#captureArea .criteria-info b { color: #1f2937; }
#captureArea .legend { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; }
#captureArea .legend .swatch { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
#captureArea .sw-o { background: #059669; }
#captureArea .sw-d { background: #2563eb; }

#captureArea .grid6 { display: grid; grid-template-columns: 30px 1fr 220px 50px 48px 46px; gap: 9px; align-items: center; }
#captureArea .table-header {
  background: #2d3748; color: #fff; padding: 7px 22px;
  font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
}
#captureArea .table-header .c-ws, #captureArea .table-header .c-w40, #captureArea .table-header .c-eq { text-align: right; }
#captureArea .table-header .active-metric { color: #fbd38d; }

#captureArea .player-row { padding: 6px 22px; border-bottom: 1px solid #edf2f7; cursor: pointer; }
#captureArea .player-row:hover { background: #eef5ff; }
#captureArea .player-row.even { background: #f9fafb; }
#captureArea .player-row.even:hover { background: #eef5ff; }
#captureArea .rank { font-weight: 800; font-size: 15px; color: #94a3b8; text-align: center; }
#captureArea .player-row.top1 .rank { color: #d4a76a; }
#captureArea .player-row.top2 .rank, #captureArea .player-row.top3 .rank { color: #b8a888; }

#captureArea .player-info { display: flex; align-items: center; gap: 9px; overflow: hidden; }
#captureArea .player-photo {
  width: 32px; height: 38px; border-radius: 5px; object-fit: cover;
  border: 1px solid #e2e8f0; flex-shrink: 0; background: #eef1f5;
}
#captureArea .player-name { font-weight: 700; color: #1f2937; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#captureArea .player-sub { display: flex; align-items: center; gap: 6px; margin-top: 1px; }
#captureArea .team-shield { width: 16px; height: 19px; border-radius: 3px; }
#captureArea .player-team { font-size: 11px; font-weight: 600; color: #6b7280; }
#captureArea .player-min { font-size: 10px; color: #9ca3af; }

#captureArea .bar-wrap { display: flex; align-items: center; gap: 8px; }
#captureArea .bar-track { flex: 1; height: 18px; background: #f1f5f9; border-radius: 4px; overflow: hidden; display: flex; }
#captureArea .bar-o { background: #059669; height: 100%; }
#captureArea .bar-d { background: #2563eb; height: 100%; }
#captureArea .bar-vals { font-size: 9.5px; color: #64748b; white-space: nowrap; min-width: 70px; }
#captureArea .bar-vals .o { color: #059669; font-weight: 700; }
#captureArea .bar-vals .d { color: #2563eb; font-weight: 700; }

#captureArea .ws-total { font-weight: 800; font-size: 16px; color: #1f2937; text-align: right; }
#captureArea .ws40 { font-weight: 600; font-size: 12px; color: #6b7280; text-align: right; }
#captureArea .ws-eq { font-weight: 600; font-size: 12px; color: #6b7280; text-align: right; }
#captureArea .player-row .active-metric { color: #2c5282; }

#captureArea .team-summary {
  display: none; align-items: center; justify-content: space-between;
  padding: 9px 22px; background: #eef2f7; border-bottom: 2px solid #2d3748;
  font-size: 13px; color: #1f2937;
}
#captureArea .team-summary.show { display: flex; }
#captureArea .team-summary b { font-size: 16px; }

#captureArea .empty-state {
  padding: 30px 22px; text-align: center; color: #718096; font-size: 14px; font-weight: 600;
}

#captureArea .footer {
  background: #2d3748; color: #fff; padding: 8px 22px; text-align: center;
  font-size: 11px; display: flex; align-items: center; justify-content: center; gap: 20px;
}
#captureArea .footer .social-links { display: flex; gap: 15px; }
#captureArea .footer .social-links span { opacity: 0.85; font-size: 10px; }

/* ---------- Modal de desglose (overlay, FUERA del captureArea) ---------- */
#wsModal.ws-modal-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.55);
  z-index: 9999; align-items: center; justify-content: center; padding: 20px;
  font-family: 'Inter', sans-serif;
}
#wsModal.ws-modal-backdrop.show { display: flex; }
#wsModal .ws-modal {
  background: #fff; border-radius: 14px; width: 560px; max-width: 100%; max-height: 90vh;
  overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
#wsModal .ws-modal-head {
  background: linear-gradient(135deg, #2c5282 0%, #2a4365 100%); color: #fff;
  padding: 16px 20px; display: flex; align-items: center; gap: 14px; position: relative;
}
#wsModal .ws-modal-head img.mphoto { width: 46px; height: 55px; border-radius: 6px; object-fit: cover; background:#eef1f5; }
#wsModal .ws-modal-head .mname { font-size: 19px; font-weight: 800; }
#wsModal .ws-modal-head .msub { font-size: 12px; opacity: 0.9; margin-top: 2px; display:flex; align-items:center; gap:6px; }
#wsModal .ws-modal-head .msub img { width: 16px; height: 19px; border-radius: 3px; }
#wsModal .ws-modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; line-height: 1; opacity:0.85; }
#wsModal .ws-modal-body { padding: 18px 20px; }
#wsModal .ws-headline { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
#wsModal .ws-headline .big { font-size: 34px; font-weight: 800; color: #1f2937; line-height: 1; }
#wsModal .ws-headline .eq { font-size: 13px; color: #6b7280; }
#wsModal .ws-formula { font-size: 13px; color: #374151; margin-bottom: 14px; }
#wsModal .ws-formula .o { color: #059669; font-weight: 700; }
#wsModal .ws-formula .d { color: #2563eb; font-weight: 700; }
#wsModal .ws-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#wsModal .ws-panel { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; }
#wsModal .ws-panel h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
#wsModal .ws-panel.off h4 { color: #059669; }
#wsModal .ws-panel.def h4 { color: #2563eb; }
#wsModal .ws-stat { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; color: #374151; }
#wsModal .ws-stat b { color: #111827; }
#wsModal .ws-note { font-size: 10.5px; color: #6b7280; line-height: 1.45; margin-top: 14px; }
#wsModal .ws-modal-foot { padding: 0 20px 18px; }
#wsModal .ws-modal-foot a { color: #2c5282; font-weight: 600; font-size: 13px; text-decoration: none; }
@media (max-width: 560px) { #wsModal .ws-cols { grid-template-columns: 1fr; } }