/* ============================================================
   smgr · css/pages/mapa_tiros.css — CARTA DE TIRO COMPLETA
   Skin "Foco": el cromado de la página (cabecera, filtros, botón, panel de
   detalle, leyenda) usa los tokens claros; la CANCHA en sí es una superficie
   de datos oscura (fondo --ink, líneas blancas, círculos coloreados) porque su
   geometría y su escala de color se conservan 1:1 del sitio clásico.

   Geometría de cancha: constantes del sistema de coordenadas (mm) fijado en
   mapa_tiros.php — span de ancho = max_y-min_y = 15000; span de fondo =
   max_x-min_x = 8100; rejilla = 16 columnas × 9 filas (cell_size 940).
   Tokens en css/tokens.css; base en css/rincon.css.
   ============================================================ */

/* ---------- Cabecera de página ---------- */
.mt-head { margin-top: var(--sp-5); }
.mt-head h1 {
  font-family: var(--score); font-size: 26px; font-weight: 700;
  letter-spacing: .01em; color: var(--ink);
}
.mt-head .sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
@media (max-width: 640px) { .mt-head h1 { font-size: 22px; } }

/* ---------- Filtros (mismo look que broker-filters) ---------- */
.mt-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--sp-4); padding: var(--sp-4); margin-top: var(--sp-4);
}
.mt-filters .fgroup { display: flex; flex-direction: column; gap: 6px; }
.mt-filters .flabel {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
}
.mt-filters select {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
  background-color: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-input); padding: 6px 32px 6px 12px;
  appearance: none; -webkit-appearance: none; cursor: pointer; min-width: 200px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235B6577' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.mt-filters select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mt-filters__reset {
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  align-self: center; white-space: nowrap;
}
.mt-filters__reset:hover { color: var(--down); }

.mt-empty { margin-top: var(--sp-4); padding: var(--sp-5); text-align: center; color: var(--muted); }

/* ---------- Botón de captura ---------- */
.mt-actions { margin-top: var(--sp-4); display: flex; justify-content: flex-end; }
.mt-shot-btn { padding: 8px 18px; font-size: 13px; }
.mt-shot-btn:disabled { opacity: .8; cursor: default; }

/* ---------- Área capturable (tarjeta clara) ---------- */
.mt-capture { margin-top: var(--sp-3); overflow: hidden; padding: 0; }

/* Cabecera del viz: escudo + nombre + títulos */
.mt-viz-head {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line);
}
.mt-viz-team { flex-shrink: 0; }
.mt-team-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.mt-team-link:hover { color: var(--accent-deep); text-decoration: none; }
.mt-team-link .shield { width: 34px; height: 34px; }
.mt-team-name { font-family: var(--score); font-weight: 700; font-size: 18px; color: var(--ink); }
.mt-team-name--liga { font-size: 18px; }
.mt-viz-titles h2 {
  font-family: var(--score); font-size: 19px; font-weight: 700;
  color: var(--ink); margin: 0; line-height: 1.15;
}
.mt-viz-titles p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.mt-player-link { color: var(--accent-deep); font-weight: 600; }
.mt-player-link:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .mt-viz-head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
  .mt-viz-titles h2 { font-size: 16px; }
}

/* ---------- Resumen 2PT / 3PT ---------- */
.mt-stats { display: flex; justify-content: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5) var(--sp-3); }
.mt-stat {
  background: var(--ground); border: 1px solid var(--line);
  border-radius: var(--r-input); padding: 10px 20px; text-align: center; min-width: 120px;
}
.mt-stat-h {
  font-size: 11px; font-weight: 700; color: var(--accent-deep);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px;
}
.mt-stat-m { font-family: var(--score); font-size: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.mt-stat-sep { color: var(--muted); margin: 0 2px; font-weight: 500; }
.mt-stat-p { font-size: 12px; color: var(--muted); margin-top: 1px; }
@media (max-width: 640px) {
  .mt-stats { gap: var(--sp-2); padding: var(--sp-3) var(--sp-3) var(--sp-2); }
  .mt-stat { padding: 8px 14px; min-width: 92px; }
  .mt-stat-m { font-size: 18px; }
}

/* ============================================================
   CANCHA — superficie de datos oscura (geometría 1:1 del sitio clásico)
   ============================================================ */
.mt-court-wrap { padding: var(--sp-3) var(--sp-5) var(--sp-5); }
.mt-court {
  position: relative; width: 100%;
  background: var(--court-a); border-radius: 12px;
  padding: 22px 14px 10px; box-shadow: inset 0 0 0 1px var(--line-dark);
}

.mt-grid {
  position: relative; display: grid;
  grid-template-columns: repeat(16, 1fr);   /* cols = ceil(15000/940) */
  grid-template-rows: repeat(9, 1fr);        /* rows = ceil(8100/940)  */
  gap: 0; aspect-ratio: 16 / 9;
}

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

/* Zona pintada: 4600mm ancho / 4200mm fondo */
.mt-paint {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: calc(4600 / 15000 * 100%);
  height: calc(4200 / 8100 * 100%);
  border: 2px solid #fff; border-top: none; pointer-events: none; z-index: 20;
}

/* Arco de triple: círculo de 13000mm de diámetro recortado al semicírculo */
.mt-arc-wrap {
  position: absolute; top: 0;
  left: calc((15000 - 13000) / 2 / 15000 * 100%);
  width: calc(13000 / 15000 * 100%);
  aspect-ratio: 2 / 1; overflow: hidden; pointer-events: none; z-index: 20;
}
.mt-arc {
  position: absolute; bottom: 0; left: 0; width: 100%; aspect-ratio: 1;
  border: 2px solid #fff; border-radius: 50%;
}

/* Líneas de triple de esquina (900mm de fondo, a 6600mm del centro) */
.mt-corner-l, .mt-corner-r {
  position: absolute; top: 0; width: 2px;
  height: calc(900 / 8100 * 100%); background: #333; z-index: 20;
}
.mt-corner-l { left: calc((7500 - 6600) / 15000 * 100%); }
.mt-corner-r { right: calc((7500 - 6600) / 15000 * 100%); }

/* Zonas de la rejilla */
.mt-zone {
  position: relative; background: rgba(30, 30, 40, 0.3);
  border: 1px solid rgba(255,255,255,0.05); aspect-ratio: 1;
  overflow: visible; display: flex; align-items: center; justify-content: center;
}
.mt-zone:hover { border-color: rgba(240, 162, 60, 0.4); z-index: 30; }
.mt-zone.has-data { background: transparent; cursor: pointer; }
.mt-zone.selected { box-shadow: inset 0 0 0 2px var(--accent); z-index: 25; }

.mt-circle {
  border-radius: 50%; opacity: 0.85;
  transition: transform .15s, opacity .15s; pointer-events: none;
}
.mt-zone:hover .mt-circle { transform: scale(1.1); opacity: 1; }

/* Tooltip (flota sobre la cancha oscura) */
.mt-tooltip {
  position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%);
  background: rgba(10,10,20,0.96); color: #fff; padding: 8px 12px; border-radius: 6px;
  font-size: 11px; white-space: nowrap; opacity: 0; visibility: hidden;
  transition: opacity .15s, visibility .15s; z-index: 100;
  border: 1px solid var(--accent); pointer-events: none;
}
.mt-zone:hover .mt-tooltip { opacity: 1; visibility: visible; }
.mt-tt-fg { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.mt-tt-stats { color: #b9c0cc; }

/* ---------- Leyenda (Foco claro) ---------- */
.mt-legend {
  display: flex; justify-content: center; gap: var(--sp-6); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line); background: var(--ground);
}
.mt-legend-sec { display: flex; align-items: center; gap: 10px; }
.mt-legend-lbl { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.mt-legend-colors { display: flex; align-items: center; gap: 4px; }
.mt-legend-color { width: 22px; height: 12px; border-radius: 2px; }
.mt-legend-color-labels { display: flex; justify-content: space-between; width: 100%; margin-top: 2px; }
.mt-legend-color-labels span { color: var(--muted); font-size: 8px; }
.mt-legend-sizes { display: flex; align-items: center; gap: 6px; }
.mt-legend-size { border-radius: 50%; background: var(--muted); }
.mt-legend-note { color: var(--muted); font-size: 9px; margin-left: 5px; }
@media (max-width: 640px) {
  .mt-legend { flex-direction: column; gap: var(--sp-3); }
  .mt-legend-sec { flex-direction: column; gap: 5px; }
}

/* ---------- Panel de detalle de zona (Foco claro) ---------- */
.mt-detail {
  display: none; margin: var(--sp-3) var(--sp-5) 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-input); padding: var(--sp-4);
}
.mt-detail.visible { display: block; }
.mt-detail-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--sp-3); padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.mt-detail-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.mt-detail-sum { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mt-detail-close {
  background: none; border: none; color: var(--muted); font-size: 20px;
  cursor: pointer; padding: 4px; line-height: 1;
}
.mt-detail-close:hover { color: var(--down); }
.mt-detail-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; scrollbar-width: thin; }
.mt-detail-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  background: var(--ground); border-radius: 8px;
}
.mt-detail-rank { font-size: 11px; color: var(--muted); width: 20px; text-align: center; font-weight: 700; }
.mt-detail-name { flex: 1; font-size: 13px; color: var(--ink); font-weight: 600; }
.mt-detail-stats { display: flex; align-items: center; gap: 12px; }
.mt-detail-att { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mt-detail-pct {
  font-size: 13px; font-weight: 700; padding: 3px 8px; border-radius: 5px;
  min-width: 50px; text-align: center; font-variant-numeric: tabular-nums;
}

/* ---------- Marca de agua (sólo durante la captura) ---------- */
.mt-watermark {
  display: none; padding: 8px var(--sp-3);
  background: var(--ink); color: var(--muted-dark);
  font-size: 10px; text-align: center; border-top: 1px solid var(--line-dark);
}
.mt-watermark .wm-site { color: #fff; font-weight: 600; }
.mt-capture.capturing .mt-watermark { display: block; }
.mt-capture.capturing .mt-detail { display: none; }