/* ============================================================
   smgr · css/pages/viz_tiempos_muertos.css — DISEÑO de las CUATRO tarjetas
   capturables de "Tiempos muertos" (visualizacion_tiempos_muertos.php).
   Portado 1:1 del clásico.

   MULTI-CAPTURA: hay cuatro targets (capTmTabla, capTmChart, capTmMejora,
   capTmMinuto), 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 las cuatro).
   Todo el diseño va scopeado bajo .viz-card; sólo los helpers de maquetación
   fuera de las tarjetas (.viz-capbar / .viz-scroll) van sin scope. Anchos fijos
   (1050px las tablas/gráfico, 1400px la ancha de minutos); en móvil se hace
   scroll horizontal.
   ============================================================ */

/* ---------- Maquetación fuera de las tarjetas (chrome Foco) ---------- */
.viz-capbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: var(--sp-4); }
.viz-capbar__title { font-size: 15px; font-weight: 700; color: var(--ink); }
.viz-scroll { margin-top: var(--sp-2); overflow-x: auto; }

/* ---------- 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: #2d3748; }
.viz-card img { display: inline; max-width: none; vertical-align: baseline; }

/* ---------- Tarjeta (blanca) ---------- */
.viz-card {
  font-family: 'Inter', sans-serif;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
  overflow: hidden;
  width: 1050px;
}
.viz-card.wide { width: 1400px; }

.viz-card .header {
  background: linear-gradient(135deg, #2c5282 0%, #2a4365 100%);
  color: white; padding: 10px 20px; text-align: center;
}
.viz-card .logo-section { display: flex; align-items: center; justify-content: center; gap: 15px; }
.viz-card .header h1 { font-size: 20px; font-weight: 800; }
.viz-card .header p { font-size: 12px; opacity: 0.9; margin-top: 3px; }

.viz-card table { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
.viz-card thead th {
  background: #2d3748; color: white; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px;
  padding: 8px 4px; text-align: center; font-size: 10px; white-space: nowrap;
}
.viz-card thead th.col-pos { width: 30px; }
.viz-card thead th.col-team { width: 95px; text-align: left; padding-left: 8px; }
.viz-card tbody td {
  padding: 3px 4px; text-align: center;
  border-bottom: 1px solid #e2e8f0; font-weight: 600; font-size: 13px;
}
.viz-card tbody tr:nth-child(even) td { background-color: rgba(0,0,0,0.02); }
.viz-card td.pos { font-weight: 800; font-size: 13px; color: #2d3748; }
.viz-card td.team-cell { text-align: left; white-space: nowrap; padding-left: 8px; }
.viz-card .team-info { display: flex; align-items: center; gap: 6px; }
.viz-card .team-shield { width: 22px; height: 26px; border-radius: 3px; border: 1px solid #e2e8f0; }
.viz-card .team-abbr { font-weight: 700; font-size: 12px; color: #2d3748; }
.viz-card .block-border-left { border-left: 1px dotted #2d3748 !important; }
.viz-card .val-positive { color: #065f46; }
.viz-card .val-negative { color: #991b1b; }

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

/* ---------- Tarjeta-gráfico (oscura) ---------- */
.viz-card.chart-card { background: #2d3748; }
.viz-card.chart-card .chart-header { padding: 20px 30px 0; }
.viz-card.chart-card .chart-header h2 { color: white; font-size: 20px; font-weight: 700; }
.viz-card.chart-card .chart-header p { color: #d4a76a; font-size: 12px; margin-top: 4px; }
.viz-card.chart-card .chart-empty { color: #cbd5e0; text-align: center; padding: 60px 20px; font-size: 14px; }
.viz-card.chart-card .chart-footer {
  padding: 10px 20px; text-align: center; font-size: 12px;
  display: flex; justify-content: center; gap: 20px;
}
.viz-card.chart-card .chart-footer span { color: white; opacity: 0.8; }

/* ---------- Heatmap de minutos ---------- */
.viz-card .minute-table { table-layout: auto; font-size: 10px; }
.viz-card .minute-table th { padding: 4px 2px; font-size: 9px; }
.viz-card .minute-table th.col-team { width: 85px; }
.viz-card .minute-table td { padding: 2px 1px; font-size: 11px; font-weight: 700; }
.viz-card .minute-table td.minute-val { min-width: 22px; }
.viz-card .minute-table .period-border { border-left: 2px solid #4a5568 !important; }