/* ============================================================
   smgr · css/pages/viz_edades_historicas.css — DISEÑO de las DOS tarjetas
   capturables de "Edades históricas de la ACB"
   (visualizacion_edades_historicas.php). Portado 1:1 del clásico.

   MULTI-CAPTURA: hay dos targets (capSeasons, capMatches), 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 ambas). El diseño de tarjeta va scopeado bajo
   .viz-card; sólo los helpers de maquetación (.viz-capbar / .viz-scroll /
   .viz-empty), fuera de las tarjetas, van sin scope. Ancho fijo 880px; en móvil
   se hace scroll horizontal.
   ============================================================ */

/* ---------- Maquetación fuera de las tarjetas (chrome Foco) ---------- */
.viz-capbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4);
}
.viz-capbar__title { font-family: var(--score); font-weight: 700; font-size: 16px; color: var(--ink); }
.viz-scroll { margin-top: var(--sp-2); overflow-x: auto; }
.viz-empty {
  margin-top: var(--sp-4);
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card, 12px);
}

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

/* ---------- Tarjeta ---------- */
.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: 880px;
}

.viz-card .header {
  background: linear-gradient(135deg, #2c5282 0%, #2a4365 100%);
  color: white;
  padding: 10px;
  text-align: center;
}
.viz-card .logo-section {
  display: flex; align-items: center; justify-content: center;
  gap: 15px; margin-bottom: 10px;
}
.viz-card .logo {
  width: 91px; height: 69px; background: white; border-radius: 15%;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid rgba(255,255,255,0.3); overflow: hidden;
}
.viz-card .logo img { width: 100%; height: 100%; object-fit: contain; }
.viz-card .header h1 { font-size: 26px; font-weight: 800; }
.viz-card .header p { font-size: 13px; opacity: 0.9; margin-top: 5px; }

.viz-card .section-bar {
  background: #2d3748;
  color: #d4a76a;
  padding: 7px 15px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.viz-card .table-header {
  background: #4a5568;
  color: white;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}

/* Sección 1 grid */
.viz-card .table-header.season-grid, .viz-card .team-row.season-grid {
  display: grid;
  grid-template-columns: 35px 1.8fr 1fr 1.1fr 1fr 1.1fr;
  gap: 5px;
}

/* Sección 2 grid */
.viz-card .table-header.match-grid, .viz-card .team-row.match-grid {
  display: grid;
  grid-template-columns: 35px 1.5fr 0.8fr 1.5fr 0.8fr 1fr 0.8fr 1fr 0.6fr;
  gap: 4px;
}

.viz-card .team-row {
  padding: 5px 10px;
  border-bottom: 1px solid #e2e8f0;
  border-left: 4px solid transparent;
  align-items: center;
  font-size: 12px;
  text-align: center;
}
.viz-card .team-row:nth-child(even) { background: #f8f9fa; }
.viz-card .team-row:hover { background: #f0f4f8; }
.viz-card .team-row.current-season {
  background: rgba(212, 167, 106, 0.12);
  border-left: 4px solid #d4a76a;
}
.viz-card .team-row.current-season:hover { background: rgba(212, 167, 106, 0.2); }

.viz-card .rank { font-weight: 800; font-size: 13px; color: #2d3748; }

.viz-card .team-info {
  display: flex; align-items: center; gap: 6px; text-align: left;
}
.viz-card .team-shield {
  width: 20px; height: 24px; border-radius: 3px; border: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.viz-card .shield-placeholder {
  width: 20px; height: 24px; border-radius: 3px; border: 1px solid #cbd5e0;
  background: #e2e8f0; color: #4a5568;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.viz-card .team-name { font-weight: 700; font-size: 12px; color: #2d3748; }

.viz-card .age-value { font-weight: 800; font-size: 14px; color: #2c5282; }
.viz-card .age-small { font-weight: 600; font-size: 11px; color: #718096; }
.viz-card .season-label { font-weight: 600; font-size: 12px; color: #4a5568; }
.viz-card .stat-value { font-weight: 600; font-size: 12px; color: #4a5568; }

.viz-card .score-win { font-weight: 700; color: #065f46; }
.viz-card .score-loss { font-weight: 700; color: #991b1b; }

.viz-card .phase-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}
.viz-card .phase-lr { background: #e2e8f0; color: #4a5568; }
.viz-card .phase-pt { background: #fed7d7; color: #9b2c2c; }

.viz-card .footer {
  background: #2d3748;
  color: white;
  padding: 10px 20px;
  text-align: center;
  font-size: 14px;
}
.viz-card .social-links { margin-top: 5px; font-size: 12px; }
.viz-card .social-links span { margin: 0 10px; opacity: 0.8; }