/* ============================================================
   equipos_tope.php — Equipos al límite
   Monta sobre el componente .ideal de rincon.css y sobre la rejilla de
   css/pages/ideales.css (.ideales-grid). Aquí sólo va lo propio: el
   subtítulo del criterio, el pie con valor y cupo, y el aviso de arriba.
   ============================================================ */

.tope-aviso { padding: var(--sp-4); margin-top: var(--sp-4); }
.tope-aviso p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.tope-aviso strong { color: var(--ink); }

/* Dos columnas en pantalla grande, como los ideales, pero las tarjetas de aquí
   llevan título largo y pie, así que piden algo más de ancho mínimo. */
.tope-grid { grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); }

.tope-card__titles { min-width: 0; }
.tope-card__sub {
  font-size: 12.5px; color: var(--muted); line-height: 1.45;
  margin-top: 4px; max-width: 42ch;
}
/* El titular del criterio puede ser un euro de siete cifras: que no empuje al
   título ni se parta en dos líneas. */
.tope-card .ideal__total { font-size: 25px; white-space: nowrap; }
.tope-card .ideal__total small { white-space: normal; max-width: 13ch; margin-left: auto; }

.tope-card__foot {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.tope-chip {
  font-size: 11.5px; color: var(--muted); letter-spacing: .02em;
  background: var(--zebra); border-radius: var(--r-pill); padding: 4px 11px;
}
.tope-chip strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* La pastilla de duda va dentro de la línea del equipo, que es diminuta. */
.tope-card .ideal-player__team .marca-baja { vertical-align: -1px; }

@media (max-width: 1000px) {
  .tope-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .tope-card .ideal__head { flex-direction: column; gap: var(--sp-2); }
  .tope-card .ideal__totals { text-align: left; }
  .tope-card .ideal__total { text-align: left; }
  .tope-card .ideal__total small { margin-left: 0; }
}

/* El techo jornada a jornada: dos gráficas y el texto que las resume. */
.tope-charts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tope-techo-texto { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.tope-techo-texto h3 { font-family: var(--score); font-size: 17px; font-weight: 700; }
.tope-techo-texto p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.tope-techo-texto strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.tope-techo-texto .note-muted { font-size: 12.5px; margin-top: auto; padding-top: var(--sp-2); }

@media (max-width: 1000px) {
  .tope-charts { grid-template-columns: minmax(0, 1fr); }
  /* A una columna el SVG es ancho y `flex: 1` de .chart-card le deja crecer con
     su proporción: 400 px de gráfica para seis puntos. Se fija la altura. */
  .tope-charts .chart-card svg { flex: none; height: 200px; }
}

/* ============================================================
   Bandera de cupo colgada de la foto
   Sólo la llevan el de formación y el extracomunitario: son los dos que fijan
   el reglamento (mín. 4 y máx. 2), así que verlas sobre las caras permite
   contar el cupo sin leer el pie. Chapa blanca debajo para que se lean igual
   sobre una foto clara que sobre una oscura.
   ============================================================ */
.tope-card .tope-foto { position: relative; display: inline-flex; line-height: 0; }
.tope-cupo {
  position: absolute; right: -5px; bottom: -3px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 16px; border-radius: 5px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgba(19, 28, 46, .14);
}
.tope-cupo .flag-cupo--inline { width: 15px; height: 11px; }
/* Un aro del color del cupo alrededor de la foto: a tamaño tarjeta la banderita
   sola es pequeña, y el aro hace que los cuatro de formación salten a la vista.
   La clase va en el envoltorio y no se usa :has(), que aquí no hace falta.
   ★ Y NO se usan --pos-b/--pos-a/--pos-p: en esta misma tarjeta esos tres
   colores ya significan base, alero y pívot, y un aro verde sobre un alero
   extracomunitario se lee como «pívot». Van el ámbar de la marca para el de
   formación (el amarillo de la bandera) y un gris pizarra para el de fuera. */
.tope-foto--nac img,
.tope-foto--nac .avatar-initials { box-shadow: 0 0 0 2px var(--accent); }
.tope-foto--extra img,
.tope-foto--extra .avatar-initials { box-shadow: 0 0 0 2px var(--muted); }

/* Pie de cupo: recuento con las dos banderas y los topes del reglamento. */
.tope-chip--cupo { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tope-chip--cupo i { font-style: normal; opacity: .7; }
.tope-chip--cupo .tope-sep { opacity: .45; }
.tope-cupo--chip {
  position: static; width: 18px; height: 14px; border-radius: 4px;
  box-shadow: 0 0 0 1px var(--line);
}
.tope-cupo--chip .flag-cupo--inline { width: 13px; height: 10px; }

/* Destacar la pregunta del desfase entre la gráfica y la tarjeta. */
.tope-ojo { display: block; color: var(--ink); margin-bottom: 2px; }