/* ============================================================
   smgr · css/pages/equipo.css — estilos propios de la ficha
   de equipo (equipo.php). Requiere tokens.css + rincon.css.
   Índice: hero · tira de escudos activa · plantilla+calendario ·
   medias posicionales · 404.
   ============================================================ */

/* ---------- HERO DE EQUIPO (tarjeta clara, como el hero de jugador) ---------- */
.team-hero {
  margin-top: var(--sp-3); padding: var(--sp-6);
  display: flex; gap: var(--sp-6); align-items: center; flex-wrap: wrap;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-focus);
  box-shadow: var(--shadow-card);
}
.team-hero__id { display: flex; gap: var(--sp-5); align-items: center; flex: 1; min-width: 300px; }
.team-hero__shield {
  width: 112px; height: 112px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 6px 14px rgba(19, 28, 46, .18));
}
.team-hero__shield--fallback {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--score); font-weight: 700; font-size: 30px;
  color: var(--muted); background: var(--zebra); border-radius: 50%;
}
.team-hero__name {
  font-family: var(--score); font-weight: 700; font-size: 42px; line-height: 1.05;
  color: var(--ink); text-transform: uppercase; letter-spacing: .01em;
}
.team-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-3); }

.team-hero__record { text-align: right; margin-left: auto; }
.team-hero__vd {
  font-family: var(--score); font-weight: 700; font-size: 44px; line-height: 1.05;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.team-hero__vd .v { color: var(--up); }
.team-hero__vd .d { color: var(--down); }
.team-hero__vd .sep { color: var(--line); margin: 0 4px; }
.team-hero__record .btn { margin-top: var(--sp-3); }
/* El botón Compartir del hero pasa a sólido ink sobre tarjeta clara */
.team-hero .btn--ghost-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.team-hero .btn--ghost-dark:hover { background: var(--ink); opacity: .88; }

/* Cuadraditos de racha alineados dentro de la stat-card */
.stat-card .form5 { margin-top: 2px; }
.stat-card .form5 i { width: 12px; height: 12px; }

/* ---------- TIRA DE ESCUDOS: equipo activo ---------- */
.teamstrip__row a.is-active {
  background: var(--accent-soft);
  border-radius: 10px;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ---------- PLANTILLA + CALENDARIO (2 columnas en desktop) ---------- */
.team-cols {
  display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: var(--sp-5); align-items: start;
}
/* Los items de grid tienen min-width:auto por defecto y no bajarían del ancho
   de contenido de la tabla (roster min-width:940px) → obligamos a que puedan
   encoger para que el scroll horizontal viva dentro de .roster-wrap. */
.team-col-main, .cal-card { min-width: 0; }

/* Plantilla: scroll interno con thead sticky + primera columna sticky */
.roster-wrap { position: relative; overflow: auto; max-height: 620px; border-radius: var(--r-card); }
.roster { min-width: 940px; }
.roster th { z-index: 3; }
.roster th.stick-1, .roster td.stick-1 {
  position: sticky; left: 0; min-width: 178px;
  box-shadow: 4px 0 8px -4px rgba(19, 28, 46, .14);
}
.roster th.stick-1 { z-index: 4; top: 0; background: var(--ink); }
.roster td.stick-1 { background: var(--surface); z-index: 2; }
.roster tbody tr:nth-child(even) td.stick-1 { background: var(--zebra); }
.roster tbody tr:hover td.stick-1 { background: var(--hover); }

/* (.pos-badge ahora es global en rincon.css) */

.cupo-tag {
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}

/* Calendario: lista con scroll interno */
.cal-card { display: flex; flex-direction: column; }
.cal-scroll { overflow-y: auto; max-height: 620px; scrollbar-width: thin; }
.cal-list { list-style: none; }
.cal-list li + li { border-top: 1px solid var(--line); }
.cal-row {
  display: grid; grid-template-columns: 34px 1fr auto 1fr 26px;
  align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px;
}
a.cal-row:hover { background: var(--hover); text-decoration: none; }
.cal-j { color: var(--muted); font-weight: 600; font-size: 12px; }
.cal-team { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cal-team--home { justify-content: flex-end; }
.cal-team .team-code { font-weight: 600; font-size: 12.5px; }
.cal-score { font-family: var(--score); font-weight: 700; white-space: nowrap; }
.cal-score--v { color: var(--up); }
.cal-score--d { color: var(--down); }
.cal-when { text-align: center; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cal-row--future .team-code { color: var(--muted); }
.chip-vd--np { background: transparent; color: var(--line); }

/* ---------- MEDIAS POSICIONALES (una tarjeta por métrica; dos tablas
   Favor | Contra sin toggle) ---------- */
.pos-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: var(--sp-4);
}
.pos-metric { overflow: hidden; }
.pos-metric__body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.pos-side { padding: var(--sp-3) var(--sp-4) var(--sp-4); min-width: 0; }
.pos-side + .pos-side { border-left: 1px solid var(--line); }
.pos-side__head { margin-bottom: var(--sp-2); }
.pos-side__t {
  font-family: var(--score); font-size: 15px; font-weight: 700;
  display: inline-block;
}
.pos-side__t.up { color: var(--up); }
.pos-side__t.down { color: var(--down); }
.pos-side__d { display: block; font-size: 11px; color: var(--muted); line-height: 1.3; margin-top: 1px; }

.pos-mtable { font-size: 12.5px; }
.pos-mtable th { padding: 6px 8px; }
.pos-mtable td { padding: 7px 8px; vertical-align: top; }
.pos-mtable__pos {
  font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
}
.pos-mtable__pos .pos-badge { width: 20px; height: 20px; font-size: 11px; }
.pos-val {
  display: block; font-family: var(--score); font-weight: 600; font-size: 17px;
  line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums;
}
.pos-rk {
  display: block; font-size: 10.5px; font-weight: 700; margin-top: 1px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.pos-rk.up { color: var(--up); }
.pos-rk.down { color: var(--down); }

.pos-leyenda { font-size: 12.5px; color: var(--muted); margin-top: var(--sp-3); }
.pos-leyenda .pos-rk { display: inline; font-weight: 700; }
.pos-leyenda .pos-rk.up { color: var(--up); }
.pos-leyenda .pos-rk.down { color: var(--down); }

/* ---------- CARTA DE TIRO + AVANZADA ---------- */
.shot-adv {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--sp-5); align-items: start;
}
.shot-card { overflow: hidden; }
/* Cancha doble de fondo; las zonas se posicionan en % (mismos valores que
   el sitio clásico para que casen con la imagen). */
.shot-court {
  position: relative; width: 100%; padding-top: 60%;
  background: url("/smgr/images/cancha_doble.png") no-repeat center top;
  background-size: 100%;
}
.ct-zone {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  min-width: 40px; padding: 3px 7px; border-radius: 10px;
  background: #9E1B28; color: #fff; border: 2px solid #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, .4);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.ct-zone--triple { background: #012C3F; }
.ct-zone__ratio { font-size: 10.5px; font-weight: 500; opacity: .92; }
.ct-zone__pct { font-family: var(--score); font-size: 13px; font-weight: 700; }
/* Posiciones (idénticas al sitio actual) */
.ct-zone--p1  { top: 10%; left: 90%; }
.ct-zone--p2  { top: 23%; left: 70%; }
.ct-zone--p3  { top: 48%; left: 63%; }
.ct-zone--p4  { top: 73%; left: 70%; }
.ct-zone--p5  { top: 86%; left: 90%; }
.ct-zone--p6  { top: 48%; left: 45%; }
.ct-zone--p7  { top: 25%; left: 90%; }
.ct-zone--p8  { top: 30%; left: 80%; }
.ct-zone--p9  { top: 48%; left: 75%; }
.ct-zone--p10 { top: 65%; left: 80%; }
.ct-zone--p11 { top: 71%; left: 90%; }
.ct-zone--p12 { top: 48%; left: 90%; }
.ct-zone--t1  { top: 48%; left: 20%; }
.ct-zone--t2  { top: 48%; left: 5%; }
.ct-zone--t3  { top: 48%; left: 32%; }

.adv-scroll { max-height: 520px; overflow-y: auto; scrollbar-width: thin; }
.adv-table td:first-child { color: var(--muted); font-weight: 500; }
.adv-table td.up { color: var(--up); font-weight: 700; }
.adv-table td.down { color: var(--down); font-weight: 700; }

/* ---------- OTROS DATOS (rendimientos SM) ---------- */
.otros-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4);
}
.otros-scroll { max-height: 340px; }
.otros-table th { font-size: 10px; }
.otros-table td { padding: 6px 10px; }
.otros-table .player-cell { font-size: 13px; }
.otros-table .team-tag .team-code { font-size: 11.5px; }
.sede-tag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--zebra); color: var(--muted); font-size: 11px; font-weight: 700;
}
.otros-leyenda { margin-top: var(--sp-3); }

/* ---------- 404 DE EQUIPO ---------- */
.team-404 { padding: var(--sp-5); }
.team-404 .note-muted { color: var(--muted); }
.team-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.team-grid a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600;
}
.team-grid a:hover { background: var(--hover); text-decoration: none; }
.team-404__search { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.team-404__search input {
  flex: 1; min-width: 220px; font: inherit; color: var(--ink);
  background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 8px 14px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1000px) {
  /* minmax(0,1fr), no "1fr" a secas: 1fr = minmax(auto,1fr) y ese mínimo auto
     no baja del min-width:940px del roster → reventaba el ancho de página y
     rompía el sticky. minmax(0,...) deja que el track encoja y que el scroll
     y la columna sticky vivan dentro de .roster-wrap. */
  .team-cols { grid-template-columns: minmax(0, 1fr); }
  .cal-scroll { max-height: 420px; }
  .shot-adv { grid-template-columns: minmax(0, 1fr); }
  .otros-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  /* La rejilla de tarjetas de métrica tiene minmax(440px,1fr): ese suelo de
     440px NO cabía en móviles (~327px de contenido a 375px de viewport) y
     forzaba la tarjeta a 440px → desbordaba y la columna Total se salía de
     pantalla. minmax(0,1fr) deja que la tarjeta encoja al ancho real. */
  .pos-metrics { grid-template-columns: minmax(0, 1fr); }
  /* Las dos tablas Favor | Contra se apilan */
  .pos-metric__body { grid-template-columns: 1fr; }
  .pos-side + .pos-side { border-left: none; border-top: 1px solid var(--line); }

  /* Compacta la .pos-mtable para que sus 4 columnas (Posición | Local |
     Visitante | Total) quepan sin corte a 360px. Presupuesto a 360px:
     360 − 48 (padding .container) − 2 (borde card) − 24 (padding .pos-side
     reducido a sp-3) ≈ 286px para la tabla. Con estas medidas las columnas
     miden ~54/55/60/55px (la de "Visitante" es la más ancha por su cabecera)
     ≈ 224px → entran con holgura. */
  .pos-side { padding: var(--sp-3); overflow-x: auto; }
  .pos-mtable th { padding: 5px 5px; font-size: 9px; letter-spacing: .02em; }
  .pos-mtable td { padding: 5px 5px; }
  .pos-mtable__pos { gap: 5px; }
  .pos-mtable__pos .pos-badge { width: 18px; height: 18px; font-size: 10px; }
  .pos-val { font-size: 15px; }
  .pos-rk { font-size: 10px; }
  /* En cuanto las tablas se apilan (todo el rango móvil, no solo ≤400) dejamos
     solo el pos-badge B/A/P/T: la palabra "Bases/Aleros/Pívots/Todos" gastaba
     el ancho que necesitan Local/Visitante/Total. El badge de color + la
     cabecera "POSICIÓN" bastan. overflow-x en .pos-side es la red de seguridad
     por si algún dispositivo aún queda justo. */
  .pos-mtable__label { display: none; }
  .pos-mtable__pos { white-space: nowrap; }
}
@media (max-width: 640px) {
  /* Apila identidad sobre récord: evita que los chips (que envuelven en
     varias filas en pantalla estrecha) choquen con el bloque V-D/Compartir. */
  .team-hero { padding: var(--sp-5); gap: var(--sp-4); flex-direction: column; align-items: stretch; }
  .team-hero__id { min-width: 0; gap: var(--sp-4); }
  .team-hero__shield, .team-hero__shield--fallback { width: 76px; height: 76px; }
  .team-hero__name { font-size: 30px; }
  .team-hero__vd { font-size: 36px; }
  /* Récord a fila propia: V-D a la izquierda, Compartir a la derecha. */
  .team-hero__record {
    text-align: left; margin-left: 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line);
  }
  .team-hero__record .btn { margin-top: 0; flex-shrink: 0; }
}