/* ============================================================
   smgr · css/pages/pretemporada.css — estilos SOLO de pretemporada.php
   (tokens en css/tokens.css; componentes base en css/rincon.css)
   ============================================================ */

/* ---------- Cabecera de página ---------- */
.pret-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap;
}
.pret-head h1 {
  font-family: var(--score); font-size: 26px; font-weight: 700;
  letter-spacing: .01em; color: var(--ink);
}
.pret-head .sub { font-size: 13px; color: var(--muted); }

/* ---------- Nota informativa (crónicas / cálculo / actualización) ---------- */
.pret-info {
  margin-top: var(--sp-4); padding: var(--sp-4);
  border-left: 4px solid var(--accent);
}
.pret-info p {
  display: flex; gap: 8px; font-size: 13px; line-height: 1.45;
  color: var(--muted); margin: 6px 0;
}
.pret-info p:first-child { margin-top: 0; }
.pret-info p:last-child { margin-bottom: 0; }
.pret-info .ico { flex: none; font-size: 14px; line-height: 1.45; }
.pret-info strong { color: var(--ink); font-weight: 600; }
.pret-info a { color: var(--accent-deep); font-weight: 600; }
.pret-info a:hover { text-decoration: underline; }

/* ---------- Barra de filtros (client-side) ---------- */
.pret-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--sp-4); padding: var(--sp-4); margin-top: var(--sp-4);
}
.pret-filters .fgroup { display: flex; flex-direction: column; gap: 6px; }
.pret-filters .flabel {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
}

/* Segmented de botones (mismo look que broker .seg, pero con <button>) */
.pret-filters .seg {
  display: inline-flex; background: var(--ground);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px;
}
.pret-filters .seg button {
  font: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--r-pill); color: var(--muted); white-space: nowrap;
}
.pret-filters .seg button:hover { color: var(--ink); }
.pret-filters .seg button.is-active { background: var(--ink); color: #fff; }
.pret-filters .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Multiselect de equipos ---------- */
.pret-teams { position: relative; }
.pret-teams__btn {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
  background-color: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-input); padding: 6px 12px; cursor: pointer;
  min-width: 132px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.pret-teams__btn:hover { border-color: var(--accent); }
.pret-teams__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pret-teams__arrow { font-size: 10px; color: var(--muted); transition: transform .2s ease; }
.pret-teams.is-open .pret-teams__arrow { transform: rotate(180deg); }
.pret-teams__panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
  min-width: 220px; max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-input); box-shadow: 0 10px 28px rgba(19,28,46,.16);
  display: none;
}
.pret-teams.is-open .pret-teams__panel { display: block; }
.pret-teams__head {
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface);
}
.pret-teams__clear {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted);
  background: none; border: 0; cursor: pointer; padding: 2px 0;
}
.pret-teams__clear:hover { color: var(--down); }
.pret-teams__item {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 7px 12px; cursor: pointer; font-size: 13px; color: var(--ink);
}
.pret-teams__item:hover { background: var(--hover); }
.pret-teams__item input { margin: 0; cursor: pointer; }

/* ---------- Tabla: thead sticky + 1.ª columna sticky ---------- */
.pret-section { margin-top: var(--sp-4); }
.pret-wrap {
  position: relative; overflow: auto; max-height: 74vh;
  border-radius: var(--r-card);
}
.pret-table { min-width: 720px; }
.pret-table th { z-index: 3; }
.pret-table th.stick-1, .pret-table td.stick-1 {
  position: sticky; left: 0; min-width: 168px; max-width: 168px;
  box-shadow: 4px 0 8px -4px rgba(19, 28, 46, .14);
}
.pret-table td.stick-1 .player-cell a { overflow: hidden; text-overflow: ellipsis; }
.pret-table th.stick-1 { z-index: 4; top: 0; background: var(--ink); }
.pret-table td.stick-1 { background: var(--surface); z-index: 2; }
.pret-table tbody tr:nth-child(even) td.stick-1 { background: var(--zebra); }
.pret-table tbody tr:hover td.stick-1 { background: var(--hover); }

/* Equipo (escudo + código) */
.pret-team-cell { display: inline-flex; align-items: center; gap: 6px; }
.pret-team-cell span { font-size: 12px; font-weight: 600; color: var(--muted); }

/* Broker coloreado según valoración estimada vs precio */
.pret-table td.broker-up { color: var(--up); font-weight: 700; }
.pret-table td.broker-down { color: var(--down); font-weight: 700; }

/* Val Est. es la columna protagonista */
.pret-table td.val-est { color: var(--accent-deep); font-weight: 700; }

.pret-empty td { text-align: center; color: var(--muted); padding: var(--sp-5); }
.pret-note { margin-top: var(--sp-3); font-size: 12.5px; }

/* Nombre sin ficha a la que enlazar (jugador sin paso por ACB): <button> que
   abre el modal, pintado igual que el <a> de al lado para que la columna no
   parezca de dos tipos. */
.pret-plink {
  font: inherit; font-weight: 600; color: var(--ink); text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.pret-plink:hover { color: var(--accent-deep); }
.pret-plink:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ============================================================
   Modal: acta partido a partido (ajax/pretemporada_jugador.php)
   ============================================================ */
.pjm-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.pjm-head__team { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.pjm-head__meta { font-size: 12.5px; color: var(--muted); }

/* El acta son 16 columnas y en los 640px del modal la última (Val, justo la que
   se viene a ver) queda fuera de la vista. Se ensancha el diálogo SOLO cuando
   lleva un acta dentro. Si el navegador no entiende :has(), no se rompe nada:
   vuelve a 640 y manda el scroll horizontal de .pjm-scroll, que es el mismo
   respaldo que se usa en móvil. */
.player-modal:has(.pjm) { max-width: 820px; }
.pjm-scroll { overflow-x: auto; }
.pjm-table { min-width: 760px; font-size: 12.5px; }
.pjm-table th, .pjm-table td { padding: 6px 7px; white-space: nowrap; }

/* Rival sticky al scrollar en horizontal, con los mismos valores que la doble
   columna sticky de .gamelog en rincon.css: en móvil, donde la tabla no cabe,
   sin esto se pierde de vista de qué partido es cada fila. */
.pjm-table th.pjm-rival, .pjm-table td.pjm-rival {
  position: sticky; left: 0; min-width: 92px;
  box-shadow: 4px 0 8px -4px rgba(19, 28, 46, .14);
}
.pjm-table th.pjm-rival { z-index: 4; background: var(--ink); }
.pjm-table td.pjm-rival { z-index: 2; background: var(--surface); }
.pjm-table tbody tr:nth-child(even) td.pjm-rival { background: var(--zebra); }
.pjm-table tbody tr:hover td.pjm-rival { background: var(--hover); }
.pjm-table tfoot td.pjm-rival { z-index: 3; background: var(--ground); }

/* Solo td: en el th el color lo pone .table (blanco sobre ink) y pisarlo aquí
   dejaba la cabecera «Rival» invisible. */
.pjm-table td.pjm-rival { font-weight: 600; color: var(--ink); }
.pjm-table .pjm-fecha { color: var(--muted); }
.pjm-loc {
  display: inline-block; margin-left: 5px; padding: 0 4px;
  font-size: 10px; font-weight: 700; line-height: 15px;
  color: var(--muted); background: var(--ground);
  border: 1px solid var(--line); border-radius: 3px;
}
/* Pares secundarios (O/D, tapones, faltas): presentes pero en segundo plano. */
.pjm-table .pjm-sub { color: var(--muted); font-size: 11.5px; }
.pjm-table .pjm-val { color: var(--accent-deep); font-weight: 700; }
.pjm-table .pjm-val--est { color: var(--muted); font-weight: 600; }
.pjm-table tfoot td {
  border-top: 2px solid var(--line); font-weight: 700;
  color: var(--ink); background: var(--ground);
}
.pjm-note { margin-top: var(--sp-3); font-size: 12px; line-height: 1.45; color: var(--muted); }
.pjm-note strong { color: var(--ink); }
.pjm-foot { margin-top: var(--sp-3); font-size: 13px; }
.pjm-foot a { color: var(--accent-deep); font-weight: 600; }
.pjm-foot a:hover { text-decoration: underline; }
.pjm-empty { font-size: 13px; color: var(--muted); padding: var(--sp-4) 0; }

/* ---------- Móvil ---------- */
@media (max-width: 640px) {
  .pret-head h1 { font-size: 22px; }
  .pret-filters { gap: var(--sp-3); }
  .pret-table { font-size: 12px; }
  .pret-table th, .pret-table td { padding: 6px 7px; }
  .pret-table th.stick-1, .pret-table td.stick-1 { min-width: 128px; max-width: 128px; }
  .pret-table td.stick-1 .player-cell { gap: 5px; }
  .pret-table td.stick-1 .player-cell a {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  td.has-flag .player-cell { padding-right: 18px; }
  .flag-cupo { width: 20px; }
}