/* ============================================================
   smgr · css/pages/pretemporada_lideres.css
   Los líderes de la pretemporada en una sola tarjeta para X.

   ★ Todo lo que cuelga de .pld-card va escrito COMPLETO a propósito: esta
   tarjeta es el área de captura y viz-chrome.js la clona en un iframe del que
   EXCLUYE rincon.css. Lo que aquí se dé por heredado de la hoja global se vería
   en pantalla y NO en el PNG que se comparte. (tokens.css sí viaja al clon,
   así que las var(--*) son seguras.)

   El reparto: dos cuadrantes arriba, la banda de Valoración en medio y dos
   cuadrantes abajo. La banda va en el centro porque la previa del timeline
   recorta desde el centro y es lo único que se ve sin abrir la imagen.
   ============================================================ */

.pld-card { padding: 26px 26px 0; }

/* ---------- Cabecera ---------- */
.pld-head { padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.pld-title {
  margin: 0; font-family: var(--score); font-size: 34px; font-weight: 700;
  line-height: 1.05; letter-spacing: -.01em; color: var(--ink); text-align: center;
}
.pld-sub {
  margin: 8px 0 0; text-align: center;
  font-size: 13px; line-height: 1.4; color: var(--muted);
}

/* ---------- Rejilla de cuadrantes ---------- */
.pld-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }

.pld-panel { padding: 16px 0 4px; min-width: 0; }
/* El titulo lleva a la derecha las etiquetas de las dos columnas numericas:
   sin esto el "5" pequeno de al lado de la media no se sabe que es. */
.pld-panel__head {
  display: grid; grid-template-columns: minmax(0, 1fr) 22px 50px;
  align-items: baseline; gap: 8px; margin: 0 0 6px;
  padding-bottom: 5px; border-bottom: 2px solid var(--ink);
}
.pld-panel__tit {
  margin: 0; font-family: var(--score); font-size: 15px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent-deep);
}
.pld-panel__lab {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); text-align: right;
}
.pld-list { list-style: none; margin: 0; padding: 0; }

.pld-row {
  display: grid;
  grid-template-columns: 18px 18px minmax(0, 1fr) 34px 22px 50px;
  align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink);
}
.pld-row:last-child { border-bottom: 0; }
/* El lider se marca con una pastilla ambar que no descuadra la rejilla: el
   fondo va en un ::before absoluto, no en la fila (un background con padding
   lateral movería las columnas respecto a las otras cuatro filas). */
.pld-row.is-first { position: relative; }
.pld-row.is-first::before {
  content: ""; position: absolute; inset: 0 -7px; z-index: 0;
  background: var(--accent-soft); border-radius: 5px;
}
.pld-row.is-first > * { position: relative; z-index: 1; }

.pld-pos {
  font-family: var(--score); font-size: 14px; font-weight: 700;
  color: var(--muted); text-align: center;
}
.pld-row.is-first .pld-pos { color: var(--accent-deep); }
.pld-card .pld-row .shield { width: 18px; height: 18px; }
.pld-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.pld-eq { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.pld-pj { font-size: 11.5px; color: var(--muted); text-align: right; }
.pld-val {
  font-family: var(--score); font-size: 20px; font-weight: 700;
  color: var(--ink); text-align: right; line-height: 1;
}
.pld-row.is-first .pld-val { color: var(--accent-deep); }

/* ---------- Banda central: Valoración ---------- */
.pld-band {
  margin: 14px -26px 0; padding: 16px 26px 18px;
  background: var(--court-a); color: #fff;
}
.pld-band__tit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 12px;
}
.pld-band__tit h2 {
  margin: 0; font-family: var(--score); font-size: 17px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.pld-band__star { font-size: 15px; color: var(--accent); line-height: 1; }

.pld-band__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
}
.pld-hero {
  position: relative; min-width: 0; padding: 0 10px; text-align: center;
  border-left: 1px solid var(--line-dark);
}
.pld-hero:first-child { border-left: 0; }

.pld-hero__pos {
  display: block; font-family: var(--score); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; color: var(--muted-dark);
}
.pld-hero.is-first .pld-hero__pos { color: var(--accent); }
.pld-hero__val {
  display: block; margin-top: 2px;
  font-family: var(--score); font-size: 40px; font-weight: 700; line-height: 1;
  color: #fff;
}
.pld-hero.is-first .pld-hero__val { color: var(--accent); }
.pld-hero__who {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 6px; min-width: 0;
}
.pld-card .pld-hero__who .shield { width: 16px; height: 16px; }
.pld-hero__name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px; font-weight: 600; color: #fff;
}
.pld-hero__pj {
  display: block; margin-top: 2px; font-size: 11px; color: var(--muted-dark);
}

/* ---------- Pie ---------- */
.pld-foot { margin-top: 14px; }

/* ============================================================
   Móvil: la tarjeta mide 1080px y se escala sola, pero a partir de aquí
   el contenido se reordena para que se pueda LEER en el teléfono. La captura
   va siempre por el iframe de 1160px, así que esto no toca al PNG.
   ============================================================ */
@media (max-width: 760px) {
  .pld-card { width: 100%; padding: 18px 16px 0; }
  .pld-title { font-size: 25px; }
  .pld-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pld-band { margin: 12px -16px 0; padding: 14px 16px 16px; }
  .pld-band__list { grid-template-columns: repeat(2, 1fr); gap: 12px 0; }
  .pld-hero:nth-child(odd) { border-left: 0; }
  /* El 5º se queda solo en la última fila: que ocupe el ancho y vaya centrado
     en vez de descolgado a la izquierda. */
  .pld-hero:nth-child(5) { grid-column: 1 / -1; border-left: 0; }
  .pld-hero__val { font-size: 32px; }
  .pld-row { grid-template-columns: 16px 18px minmax(0, 1fr) 32px 20px 46px; font-size: 13.5px; }
}