/* ============================================================
   smgr · css/pages/viz_bar_race.css
   Estilos específicos de la visualización "Bar Chart Race".
   Se carga junto a viz.css (andamiaje compartido) vía
   $page_css = array('viz', 'viz_bar_race').

   Estructura:
     · Controles de filtrado (.bcr-controls) — FUERA del #captureArea.
     · Controles de reproducción (.bcr-playback) — FUERA del #captureArea.
     · Acciones de cabecera (.bcr-head-actions) — vídeo + captura.
     · La TARJETA / lienzo (#captureArea .chart-container) conserva su diseño
       propio oscuro (Inter, cabecera azul, barras). Ancho FIJO 500px (viz vertical);
       el escalador móvil (.viz-scaler) la encoge en pantallas estrechas.
     · Overlay de exportación de vídeo (.bcr-overlay) — modal a pantalla completa.

   NB: el reset global del sitio clásico (*{} / body{}) se OMITE aquí a propósito;
   viz.css ya aporta el reset scopeado bajo #captureArea. Las clases de las barras
   (.bar-row, .bar-fill, …) las genera el JS dentro de #captureArea, por lo que se
   estilan scopeadas bajo #captureArea (sin chocar con rincon.css).
   ============================================================ */

/* ---------- Acciones de cabecera (vídeo + captura) ---------- */
.bcr-head-actions { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.bcr-btn-video { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- Controles de filtrado ---------- */
.bcr-controls {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
  padding: var(--sp-4) var(--sp-5); margin-top: var(--sp-4);
}
.bcr-control-group { display: flex; flex-direction: column; gap: 4px; }
.bcr-control-group label {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
}
.bcr-control-group select {
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  padding: 9px 12px; border: 1px solid var(--line);
  border-radius: var(--r-input); outline: none; background: var(--ground);
}
.bcr-control-group select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
}
.bcr-btn-load { padding: 10px 24px; }

/* ---------- Controles de reproducción ---------- */
.bcr-playback {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
  padding: var(--sp-3) var(--sp-5); margin-top: var(--sp-3);
}
.bcr-playback.hidden { display: none; }
.bcr-btn-play {
  width: 40px; height: 40px; border-radius: var(--r-pill); border: 0;
  background: var(--ink); color: #fff; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: opacity .2s;
}
.bcr-btn-play:hover { opacity: .88; }
.bcr-btn-step {
  padding: 7px 13px; background: var(--ground); border: 1px solid var(--line);
  border-radius: var(--r-input); font-family: var(--sans); font-size: 13px;
  font-weight: 600; cursor: pointer; color: var(--muted); transition: background .15s;
}
.bcr-btn-step:hover { background: var(--hover); }
.bcr-speed-group { display: flex; align-items: center; gap: var(--sp-2); }
.bcr-speed-group label { font-size: 11px; font-weight: 600; color: var(--muted); }
.bcr-speed-group input[type=range] { width: 110px; accent-color: var(--ink); }
.bcr-speed-val { font-size: 13px; color: var(--ink); font-weight: 700; min-width: 30px; }
.bcr-duration-info { font-size: 11px; color: var(--muted); }
.bcr-frame-info { font-size: 13px; color: var(--muted); margin-left: auto; font-weight: 600; }
.bcr-progress-bar-container {
  flex-basis: 100%; height: 7px; background: var(--line); border-radius: var(--r-pill);
  cursor: pointer; position: relative; overflow: hidden;
}
.bcr-progress-bar-fill {
  height: 100%; background: var(--ink); border-radius: var(--r-pill); transition: width .1s;
}

/* ============================================================
   TARJETA / LIENZO capturable — #captureArea (.chart-container)
   Diseño oscuro propio, ancho FIJO 500px (viz vertical). Todo lo interior
   se scopea bajo #captureArea para no chocar con rincon.css.
   ============================================================ */
#captureArea.chart-container {
  font-family: 'Inter', sans-serif;
  background: #2d3748; border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
  overflow: hidden; width: 500px;
}

#captureArea .chart-header {
  background: linear-gradient(135deg, #2c5282 0%, #2a4365 100%);
  padding: 12px 20px; display: flex; align-items: center; gap: 12px;
}
#captureArea .chart-header h2 { color: #fff; font-size: 16px; font-weight: 700; }
#captureArea .chart-header p { color: rgba(255,255,255,.7); font-size: 11px; margin-top: 2px; }
#captureArea .chart-footer {
  padding: 8px 16px; text-align: center; font-size: 10px;
  display: flex; justify-content: center; gap: 16px;
}
#captureArea .chart-footer span { color: #fff; opacity: .8; }

/* ---------- Zona de la carrera ---------- */
#captureArea .race-area {
  position: relative; padding: 10px 18px; min-height: 100px; overflow: hidden;
}
#captureArea .season-indicator {
  position: absolute; right: 20px; bottom: 6px;
  line-height: 1; pointer-events: none; text-align: right; z-index: 0;
}
#captureArea .season-indicator .season-text {
  font-size: 42px; font-weight: 900; color: rgba(255,255,255,.06);
}
#captureArea .season-indicator .date-text {
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,.12); margin-bottom: 3px;
}
#captureArea .empty-state {
  color: #a0aec0; text-align: center; padding: 100px 20px; font-size: 14px;
}

/* ---------- Filas de barras (generadas por JS) ---------- */
#captureArea .bar-row {
  position: absolute; left: 18px; right: 18px; height: 28px;
  display: flex; align-items: center; will-change: transform, opacity; z-index: 1;
}
#captureArea .bar-row.offscreen { pointer-events: none; }
#captureArea .bar-initials {
  width: 24px; height: 24px; border-radius: 50%; background: #4a5568;
  display: flex; align-items: center; justify-content: center;
  color: #cbd5e0; font-size: 9px; font-weight: 700; flex-shrink: 0; margin-right: 6px;
}
#captureArea .bar-photo {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; margin-right: 6px; background: #4a5568;
}
#captureArea .bar-name {
  width: 90px; min-width: 90px; font-size: 11px; font-weight: 600;
  color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#captureArea .bar-track { flex: 1; height: 22px; position: relative; margin: 0 55px 0 6px; overflow: visible; }
#captureArea .bar-fill { height: 100%; border-radius: 3px; min-width: 2px; will-change: width; }
#captureArea .bar-value {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 11px; font-weight: 700; color: #e2e8f0;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ============================================================
   Overlay de exportación de vídeo (modal a pantalla completa)
   ============================================================ */
.bcr-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7);
  z-index: 9999; align-items: center; justify-content: center;
}
.bcr-overlay.active { display: flex; }
.bcr-modal {
  background: var(--surface); border-radius: var(--r-card); padding: 30px 40px;
  text-align: center; min-width: 360px; max-width: 92vw; box-shadow: var(--shadow-pop);
}
.bcr-modal h3 { font-family: var(--score); font-size: 20px; color: var(--ink); margin-bottom: 12px; }
.bcr-modal p { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.bcr-export-setup { margin-bottom: 16px; }
.bcr-export-setup label { font-size: 13px; font-weight: 600; color: var(--muted); margin-right: 8px; }
.bcr-export-setup select {
  font-family: var(--sans); font-size: 14px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-input);
  background: var(--ground); color: var(--ink);
}
.bcr-export-estimate { font-size: 12px; color: var(--muted); margin-left: 10px; }
.bcr-modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.bcr-modal-cancel {
  font-family: var(--sans); padding: 10px 22px;
  border: 1px solid var(--line); border-radius: var(--r-input);
  background: var(--surface); font-size: 14px; cursor: pointer; color: var(--muted);
}
.bcr-modal-cancel:hover { background: var(--hover); }
.bcr-modal-start {
  font-family: var(--sans); padding: 10px 28px;
  background: var(--ink); color: #fff; border: 0; border-radius: var(--r-input);
  font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .2s;
}
.bcr-modal-start:hover { opacity: .88; }
.bcr-export-progress {
  height: 8px; background: var(--line); border-radius: var(--r-pill);
  overflow: hidden; margin-bottom: 12px;
}
.bcr-export-progress-fill {
  height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width .2s;
}
.bcr-export-pct { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 16px; }

/* ---------- Responsive: los controles se apilan en móvil ---------- */
@media (max-width: 640px) {
  .bcr-controls, .bcr-playback { padding: var(--sp-3) var(--sp-4); }
  .bcr-control-group { flex: 1 1 130px; }
  .bcr-control-group select { width: 100%; }
  .bcr-frame-info { margin-left: 0; }
}