/* ============================================================
   smgr · css/pages/quintetos.css — ANÁLISIS DE QUINTETOS
   Cinco vistas servidas en servidor sobre la misma tabla ancha.
   La celda del quinteto son 5 fichas (foto + nombre corto) que
   se envuelven solas: es lo que fija el alto de la fila.
   Tokens en css/tokens.css; base en css/rincon.css.
   ============================================================ */

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

/* ---------- Conmutador de vistas ---------- */
.q-views {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: var(--sp-4);
}
.q-views a {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font-size: 13px; font-weight: 600; line-height: 1;
}
.q-views a:hover { background: var(--hover); text-decoration: none; }
.q-views a.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Barra de filtros ---------- */
.q-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--sp-4); padding: var(--sp-4); margin-top: var(--sp-4);
}
.q-filters .fgroup { display: flex; flex-direction: column; gap: 6px; }
.q-filters .fgroup--grow { flex: 1 1 520px; }
.q-filters .flabel {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
}
.q-filters select,
.q-filters input[type="text"] {
  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: 7px 12px;
}
.q-filters select {
  padding-right: 32px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235B6577' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.q-filters input[type="text"] { font-weight: 500; }
.q-filters select:focus-visible,
.q-filters input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.q-filters .btn { padding: 7px 18px; font-size: 13px; }

/* Los 5 huecos de jugador: rejilla que cabe en una línea en escritorio. */
.q-players { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 860px) { .q-players { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .q-filters { gap: var(--sp-3); }
  .q-filters .fgroup, .q-filters select, .q-filters .btn { width: 100%; }
  .q-players { grid-template-columns: 1fr; }
}

.q-warn {
  margin-top: var(--sp-3); padding: 10px var(--sp-4);
  background: var(--accent-soft); border-radius: var(--r-input);
  font-size: 13px; color: var(--ink);
}
.q-empty {
  margin-top: var(--sp-5); padding: var(--sp-6);
  text-align: center; font-size: 14px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card);
}

/* ---------- Tarjeta que envuelve la tabla ----------
   Existe por dos motivos a la vez: ordena la página (rótulo arriba, firma abajo)
   y es lo que se captura con el botón de compartir, así que la imagen que acaba
   en X sale con contexto y con marca sin montar una viz aparte. */
.q-card { padding: 0; overflow: hidden; }
.q-card__bar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-4) var(--sp-4) var(--sp-3);
  background: var(--court); color: #fff;
}
.q-card__kicker {
  display: block; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; color: var(--accent);
}
.q-card__bar h2 {
  font-family: var(--score); font-size: 19px; font-weight: 700;
  line-height: 1.2; margin-top: 3px; color: #fff;
}
.q-card__right { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

.q-legend { display: flex; gap: var(--sp-3); list-style: none; }
.q-legend li {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--muted-dark);
}
.q-legend li::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid currentColor;
}
.q-legend--b::before { color: var(--pos-b); }
.q-legend--a::before { color: var(--pos-a); }
.q-legend--p::before { color: var(--pos-p); }

.q-card__foot {
  padding: 9px var(--sp-4); background: var(--court-a);
  font-size: 11px; color: var(--muted-dark); text-align: center;
}
.q-card__foot strong { color: var(--accent); }

@media (max-width: 740px) {
  .q-card__bar { flex-direction: column; gap: var(--sp-2); }
  .q-card__right { align-self: stretch; justify-content: space-between; }
  .q-card__bar h2 { font-size: 17px; }
}

/* ---------- Tabla ---------- */
.q-wrap { overflow-x: auto; }
.q-table { min-width: 920px; }
.q-table--start { min-width: 1020px; }
.q-table th { position: sticky; top: 0; z-index: 3; line-height: 1.2; }
.q-table td { padding: 6px 12px; vertical-align: middle; }

/* Primera columna fija al hacer scroll lateral (equipo en «titulares»). */
.q-table th.stick-1, .q-table td.stick-1 { position: sticky; left: 0; }
.q-table th.stick-1 { z-index: 4; }
.q-table td.stick-1 { z-index: 2; background: var(--surface); }
.q-table tbody tr:nth-child(even) td.stick-1 { background: var(--zebra); }
.q-table tbody tr:hover td.stick-1 { background: var(--hover); }

.q-team { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ink); }
.q-team:hover { color: var(--accent-deep); text-decoration: none; }

.q-up { color: var(--up); }
.q-down { color: var(--down); }

/* Barrita divergente del Net: media anchura a cada lado de una línea central.
   Convierte una columna de diez números sueltos en algo que se lee de un vistazo. */
.q-net { line-height: 1.15; }
.q-bar {
  display: block; position: relative; width: 62px; height: 4px;
  margin: 3px 0 1px auto; border-radius: 2px; background: rgba(19, 28, 46, .07);
}
.q-bar::before {
  content: ""; position: absolute; left: 50%; top: -1px;
  width: 1px; height: 6px; background: rgba(19, 28, 46, .28);
}
.q-bar__f {
  position: absolute; top: 0; left: 50%; height: 100%;
  border-radius: 0 2px 2px 0; background: var(--up);
}
.q-bar__f--neg { left: auto; right: 50%; border-radius: 2px 0 0 2px; background: var(--down); }

/* ---------- Las 5 fichas del quinteto ----------
   Flujo normal (inline-block + bloques) y NO flexbox a propósito: html2canvas, que
   es quien hace la captura, coloca mal los hijos de una columna flex dentro de una
   celda centrada verticalmente, y los nombres salían cortados en el PNG. */
.q-five { white-space: nowrap; font-size: 0; }
.q-p {
  display: inline-block; vertical-align: top;
  width: 80px; padding: 3px 2px; border-radius: 10px;
  color: var(--ink); text-align: center;
}
.q-p:hover { background: var(--hover); text-decoration: none; }
.q-p img {
  display: block; margin: 0 auto 2px;
  width: 37px; height: 37px; border-radius: 50%; box-sizing: border-box;
  object-fit: cover; background: var(--zebra);
  border: 2px solid var(--line);
}
/* Anillo por puesto: de un vistazo se ve la FORMA del quinteto (cuántos
   exteriores y cuántos altos), no solo quién está en pista.
   Con `border` y no con `box-shadow`: html2canvas no pinta las sombras, así que
   en la captura los anillos desaparecían y se perdía justo lo que aportan. */
.q-p--b img { border-color: var(--pos-b); }
.q-p--a img { border-color: var(--pos-a); }
.q-p--p img { border-color: var(--pos-p); }
/* Solo el anillo: con el fondo tintado además, la celda se convertía en una
   cuadrícula de caramelos que peleaba con el zebrado de la tabla. */
.q-p img.is-off { visibility: hidden; }
/* Sin `overflow: hidden`: es lo que hacía que html2canvas no contase el alto del
   nombre y lo dejase cortado en la captura. El recorte lo hace q_ficha_nombre(). */
.q-p span {
  display: block; font-size: 10px; line-height: 12px; font-weight: 600;
  white-space: nowrap;
}
/* Jugador buscado en la vista «con jugadores».
   Tres detalles, los tres por la captura: `box-shadow` html2canvas no lo pinta
   (de ahí el borde), el fondo va OPACO y no en rgba, y la ficha necesita
   `position: relative` + `z-index` — sin contexto de apilamiento propio,
   html2canvas pintaba el fondo DESPUÉS y tapaba la foto y el nombre. */
.q-p.is-sel {
  position: relative; z-index: 0;
  background: #FCEFD9; border: 2px solid var(--accent); box-sizing: border-box;
  padding: 1px 0;
}
.q-p.is-sel span { color: var(--accent-deep); }

/* ---------- Pie de resúmenes ---------- */
.q-table tfoot td {
  padding: 8px 12px; font-size: 13px; font-weight: 600;
  background: var(--zebra); border-top: 1px solid var(--line);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.q-table tfoot td.r { text-align: right; }
.q-sum--first td { border-top: 2px solid var(--ink); }
.q-sum--total td { background: #E9E8E1; }
.q-n { color: var(--muted); font-weight: 500; }

/* ---------- Definiciones ---------- */
.q-defs {
  margin-top: var(--sp-5); padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
}
.q-defs summary { font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; }
.q-defs__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-3); margin-top: var(--sp-4);
}
.q-defs__item { display: flex; flex-direction: column; gap: 3px; }
.q-defs__term {
  font-family: var(--score); font-size: 14px; font-weight: 700; color: var(--accent-deep);
}
.q-defs__desc { font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* ---------- Móvil ----------
   La tabla no cabe y se desliza en horizontal, como el resto de tablas anchas del
   sitio. No se esconde ninguna columna a propósito: la captura se hace desde el
   mismo DOM, así que esconder una columna en móvil da una imagen distinta a la de
   escritorio (y deja una franja vacía a la derecha). Se gana sitio apretando el
   relleno, que no cambia de qué está hecha la tabla. */
@media (max-width: 640px) {
  .q-table td { padding: 6px 8px; }
}