/* ============================================================
   smgr · css/pages/viz_clasificacion_buckets.css — DISEÑO de la tarjeta
   capturable de "Clasificaciones por tramos" (visualizacion_clasificacion_buckets.php).
   Portado 1:1 del clásico. Captura ÚNICA (#captureArea): el reset scopeado ya
   lo aporta viz.css, aquí sólo va el diseño de la tarjeta, todo bajo #captureArea.
   ============================================================ */

#captureArea {
  font-family: 'Inter', sans-serif;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.1);
  overflow: hidden;
  width: 1024px;
}

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

#captureArea .intro {
  padding: 9px 18px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 12.5px;
  color: #2d3748;
  line-height: 1.45;
  text-align: center;
}
#captureArea .intro b { color: #1a365d; }
#captureArea .intro .legend {
  display: inline-flex;
  gap: 16px;
  font-size: 11px;
  color: #4a5568;
  margin-top: 4px;
}
#captureArea .intro .legend .lg-item { display: inline-flex; align-items: center; gap: 5px; }
#captureArea .intro .legend .dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
#captureArea .intro .legend .dot.top { background: #2c5282; }
#captureArea .intro .legend .dot.bot { background: #c53030; }

#captureArea .content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 12px 14px 6px;
}

#captureArea .bucket {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}
#captureArea .bucket-head {
  background: #2d3748;
  color: #fff;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#captureArea .bucket-head .h-title { letter-spacing: 0.3px; }
#captureArea .bucket-head .h-subtitle {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
}
#captureArea .bucket.left .bucket-head { background: linear-gradient(135deg, #2c5282 0%, #1a365d 100%); }
#captureArea .bucket.right .bucket-head { background: linear-gradient(135deg, #c53030 0%, #822727 100%); }

#captureArea table.cls {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
#captureArea table.cls thead th {
  background: #4a5568;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 5px 4px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.10);
}
#captureArea table.cls thead th:last-child { border-right: none; }
#captureArea table.cls thead th.team-col { text-align: left; padding-left: 10px; }
#captureArea table.cls tbody td {
  padding: 4px 4px;
  text-align: center;
  border-bottom: 1px solid #edf2f7;
  font-weight: 600;
  color: #2d3748;
}
#captureArea table.cls tbody td.rank { color: #718096; font-weight: 700; width: 24px; }
#captureArea table.cls tbody td.team-col {
  text-align: left;
  padding-left: 10px;
  font-weight: 700;
}
#captureArea table.cls tbody tr.row-bot td { background: #fff5f5; }
#captureArea table.cls tbody tr.row-bot td.team-col { box-shadow: inset 3px 0 0 #c53030; }
#captureArea table.cls tbody tr.row-top td.team-col { box-shadow: inset 3px 0 0 #2c5282; }

#captureArea .team-info { display: flex; align-items: center; gap: 7px; }
#captureArea .team-shield { width: 20px; height: auto; display: block; flex-shrink: 0; }
#captureArea .team-code { font-weight: 700; font-size: 12.5px; color: #2d3748; letter-spacing: 0.3px; }
#captureArea .real-pos {
  font-size: 9.5px;
  font-weight: 700;
  color: #718096;
  background: #edf2f7;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
}
#captureArea .row-top .real-pos { background: #ebf4ff; color: #1a365d; }
#captureArea .row-bot .real-pos { background: #fed7d7; color: #822727; }

#captureArea td.dif-pos { color: #065f46; font-weight: 700; }
#captureArea td.dif-neg { color: #b91c1c; font-weight: 700; }
#captureArea td.pct-cell { font-weight: 800; }

#captureArea .footer {
  background: #2d3748;
  color: #fff;
  padding: 8px 16px;
  text-align: center;
  font-size: 13px;
}
#captureArea .social-links { margin-top: 3px; font-size: 11px; opacity: 0.9; }
#captureArea .social-links span { margin: 0 8px; }