/* ============================================================
   smgr · css/pages/viz_pretemporada.css — QUÉ DICE LA PRETEMPORADA
   (visualizacion_pretemporada_27.php)

   DOS tarjetas capturables (#capTop y #capOjo) con la gramática de la casa
   (cabecera en degradado, cabecera de tabla oscura, pie oscuro), pero con una
   diferencia deliberada: la segunda tarjeta lleva la cabecera en GRANATE. Estas
   dos imágenes viajan juntas en el mismo hilo de X y tienen que distinguirse de
   un vistazo en el timeline, donde se ven a un tercio de tamaño.

   El reset scopeado de viz.css sólo cubre #captureArea; aquí los targets son
   #capTop y #capOjo, así que se replica bajo .viz-card.
   ============================================================ */

/* ---------- Reset de la tarjeta (equivalente al de #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; }
.viz-card h1, .viz-card h2, .viz-card h3 { letter-spacing: normal; }

.viz-card {
  font-family: 'Inter', sans-serif;
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .1);
  width: 1024px; margin: 0 auto var(--sp-5);
}

/* ---------- Barra de cada tarjeta (fuera de la captura) ---------- */
.pv-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-6) 0 var(--sp-3);
}
.pv-toolbar h2 { font-family: var(--score); font-size: 21px; font-weight: 700; color: var(--ink); }

/* ---------- Cabecera de la tarjeta ---------- */
.viz-card .header {
  background: linear-gradient(135deg, #2c5282 0%, #2a4365 100%);
  color: #fff; padding: 16px 10px; text-align: center;
}
.viz-card .header-rojo { background: linear-gradient(135deg, #8c2f2a 0%, #6b2420 100%); }
.viz-card .logo-section { display: flex; align-items: center; justify-content: center; gap: 15px; }
.viz-card .header h1 { font-size: 31px; font-weight: 800; }
.viz-card .header p { font-size: 14px; opacity: .9; margin-top: 4px; }

/* ---------- Rejillas ---------- */
.viz-card .table-header, .viz-card .row { display: grid; align-items: center; gap: 10px; }
.viz-card .th-top, .viz-card .row-top {
  grid-template-columns: 46px minmax(0, 1fr) 96px 108px 96px 110px 92px;
}
.viz-card .th-ojo, .viz-card .row-ojo {
  grid-template-columns: minmax(0, 1fr) 96px 108px 108px 300px;
}
.viz-card .table-header {
  background: #2d3748; color: #fff; padding: 11px 20px;
  font-weight: 600; font-size: 12px; letter-spacing: .04em; text-align: center;
}
.viz-card .th-top div:nth-child(2), .viz-card .th-ojo div:nth-child(1) { text-align: left; }
.viz-card .th-ojo div:nth-child(5) { text-align: left; }

.viz-card .rows { background: #fff; }
.viz-card .row { padding: 9px 20px; border-bottom: 1px solid #e2e8f0; min-height: 56px; }
.viz-card .row:last-child { border-bottom: 0; }
.viz-card .row:nth-child(even) { background: #fafbfc; }

/* Los tres primeros de la tarjeta buena, resaltados: es lo que la gente mira. */
.viz-card .row-top:nth-child(-n+3) { background: rgba(5, 150, 105, .08); }

.viz-card .rk {
  width: 32px; height: 32px; border-radius: 50%; background: #2c5282; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}
.viz-card .row-top:nth-child(-n+3) .rk { background: #059669; }

.viz-card .nm { min-width: 0; }
.viz-card .nm strong { font-size: 17px; font-weight: 700; color: #1a202c; }
.viz-card .sub2 { display: block; font-size: 11.5px; color: #718096; margin-top: 1px; }
.viz-card .tag-new {
  display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 4px;
  background: #d4a76a; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  vertical-align: 2px;
}

.viz-card .eq { display: flex; align-items: center; justify-content: center; gap: 7px; }
.viz-card .eq span { font-size: 13px; font-weight: 700; color: #4a5568; }
.viz-card .eq img { width: 26px; height: 26px; object-fit: contain; }

.viz-card .num { text-align: center; font-size: 17px; font-weight: 700; color: #2d3748;
                 font-variant-numeric: tabular-nums; }
.viz-card .num.dim { color: #a0aec0; font-weight: 600; font-size: 15px; }
.viz-card .num .u { font-size: 11px; font-weight: 500; color: #cbd5e0; margin-left: 1px; }
.viz-card .num.big { font-size: 23px; font-weight: 800; color: #059669; }
.viz-card .num.pre { font-size: 15px; font-weight: 600; color: #4a5568; }
.viz-card .num.verde { color: #059669; }
.viz-card .num.rojo { font-size: 22px; font-weight: 800; color: #991b1b; }
.viz-card .pq { font-size: 13.5px; color: #4a5568; line-height: 1.35; }

/* ---------- Nota y pie ---------- */
.viz-card .nota {
  background: #f8f9fa; border-top: 2px solid #e9ecef;
  padding: 11px 22px; font-size: 12.5px; color: #4a5568; line-height: 1.45;
}
.viz-card .nota strong { color: #2d3748; font-weight: 700; }
.viz-card .footer {
  background: #2d3748; color: #fff; padding: 10px 20px; text-align: center; font-size: 13px;
}
.viz-card .social-links { margin-top: 6px; }
.viz-card .social-links span { margin: 0 10px; opacity: .8; font-size: 12px; }

.pv-pie { margin: var(--sp-4) 0 var(--sp-6); font-size: 13px; color: var(--muted); max-width: 70ch; }

/* En móvil la tarjeta se sale: scroll horizontal, como el resto de multi-captura. */
@media (max-width: 1080px) {
  .viz-card { width: 1024px; }
  main.container { overflow-x: auto; }
}

/* ---------- Tercera tarjeta: valor frente al precio ---------- */
.viz-card .header-verde { background: linear-gradient(135deg, #1f6b4f 0%, #14503a 100%); }
.viz-card .th-val, .viz-card .row-val {
  grid-template-columns: minmax(0, 1fr) 96px 96px 110px 110px 100px;
}
.viz-card .th-val div:nth-child(1) { text-align: left; }