/* /mis-partidas (tanda 230). Hoja propia de la página: components.css lo
   baja TODO el mundo y la portada anda con el presupuesto justo, así que
   lo que solo se usa aquí vive aquí (norma de CLAUDE.md). */

.partidas-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.partidas-dato {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.partidas-dato-titulo {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-mid);
}

.partidas-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}
.partidas-barra label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--t-sm);
  color: var(--text-mid);
}

.partidas-form-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 12px;
}
.partidas-form-fila label,
.partidas-form-notas {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--t-sm);
  color: var(--text-mid);
  flex: 1 1 180px;
}
.partidas-form-notas { margin-bottom: 12px; }

/* ── Los enfrentamientos (tanda 251) ──
   Antes esto era una TABLA de mi mazo × mazo rival con `overflow-x`, y
   con quince rivales había que arrastrarla de lado. Ahora cada mazo mío
   es un bloque con su lista dentro: se lee de arriba abajo y no hay
   scroll horizontal en ninguna anchura. */
.partidas-mazo-bloque {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  margin-bottom: 16px;
  overflow: hidden;
}
.partidas-mazo-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--ice);
  border-bottom: 1px solid var(--border);
}
.partidas-mazo-nombre {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-lg);
  min-width: 0;
}
.partidas-mazo-nombre strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.partidas-mazo-total {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--t-sm);
}

/* El récord del mazo, teñido: en un vistazo se ve con cuál vas bien sin
   leer los porcentajes uno a uno. En rgba sobre el fondo, que así el
   mismo valor vale en tema claro y en oscuro. */
.partidas-mazo-total.partidas-bien { background: rgba(46, 160, 67, 0.18); }
.partidas-mazo-total.partidas-mal { background: rgba(214, 64, 64, 0.16); }
.partidas-mazo-total.partidas-igualado { background: rgba(160, 160, 160, 0.16); }

.partidas-enfrentamientos { margin: 0; padding: 0; list-style: none; }
.partidas-enf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  font-size: var(--t-sm);
}
.partidas-enf:last-child { border-bottom: none; }
/* El nombre se lleva el ancho sobrante y se corta con puntos suspensivos
   en vez de empujar la fila: es lo único que puede crecer sin fin. */
.partidas-enf-rival {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.partidas-enf-rival > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* La barra: proporcional al porcentaje, y del color del casillero. Es
   lo que permite comparar dos filas sin leer los números. */
.partidas-enf-barra {
  flex: 0 1 160px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--ice-dark);
  overflow: hidden;
}
.partidas-enf-barra > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--text-dim);
}
.partidas-enf-barra.partidas-bien > span { background: #2ea043; }
.partidas-enf-barra.partidas-mal > span { background: var(--danger); }
.partidas-enf-barra.partidas-igualado > span { background: #9aa7ae; }

.partidas-enf-record { flex: none; width: 54px; text-align: right; color: var(--text-mid); }
.partidas-enf-pct { flex: none; width: 46px; text-align: right; font-weight: 700; }

/* En móvil la barra estorba más de lo que aporta: el nombre y los
   números son lo que se lee, y con 320 px de ancho no caben las cuatro
   cosas sin apretarlo todo. */
@media (max-width: 480px) {
  .partidas-enf-barra { display: none; }
  .partidas-enf { gap: 8px; }
}

.partidas-titulo-lista { margin-top: 32px; }

/* ── Las tarjetas de torneos (tandas 236-237) ──
   Como la lista de trainingcourt: cada torneo es una fila con los
   sprites de TU mazo, el nombre, y el récord coloreado a la derecha;
   al pulsarla se despliegan las rondas, cada una con el mazo del rival
   en sprites y su letra de resultado. */
.partidas-torneo {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
}
.partidas-torneo-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font: inherit;
}
.partidas-torneo-cab:hover { background: var(--bg); }
.partidas-torneo-sprites { display: flex; align-items: center; flex: none; min-width: 34px; }
.partidas-sprite {
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
  flex: none;
}
.partidas-sprite-hueco { width: 34px; height: 34px; flex: none; }
.partidas-torneo-titulo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.partidas-torneo-record {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(160, 160, 160, 0.14);
  color: var(--text-mid);
  flex: none;
}
.partidas-torneo-record.bien { background: rgba(46, 160, 67, 0.16); color: var(--success); }
.partidas-torneo-record.mal { background: var(--danger-bg); color: var(--danger); }

.partidas-torneo-detalle { padding: 0 16px 12px; border-top: 1px solid var(--border); }
.partidas-torneo-detalle > .subtext { margin: 12px 0 0; }
.partidas-torneo-rondas {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: var(--t-sm);
}
.partidas-torneo-rondas li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.partidas-torneo-rondas li:first-child { border-top: none; }
.partidas-ronda-num { color: var(--text-dim); font-weight: 600; min-width: 2.4ch; }
.partidas-ronda-rival { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.partidas-torneo-rondas .partidas-sprite,
.partidas-fila .partidas-sprite { width: 26px; height: 26px; }
/* La letra del resultado, V/D/E, como el badge de trainingcourt. */
.partidas-ronda-res {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: var(--t-xs);
  font-weight: 700;
  flex: none;
}
.partidas-ronda-win { background: rgba(46, 160, 67, 0.16); color: var(--success); }
.partidas-ronda-loss { background: var(--danger-bg); color: var(--danger); }
.partidas-ronda-draw { background: rgba(160, 160, 160, 0.14); color: var(--text-mid); }
.partidas-torneo-acciones {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
/* El formulario de ronda, mudado dentro de la tarjeta. */
[data-hueco-form] .simple-card { margin: 12px 0 0; }
.partidas-fila-mazos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.partidas-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  background: var(--white);
  /* La franja de la izquierda dice el resultado sin tener que leer. */
  border-left-width: 4px;
}
.partidas-win { border-left-color: rgba(46, 160, 67, 0.8); }
.partidas-loss { border-left-color: rgba(214, 64, 64, 0.8); }
.partidas-draw { border-left-color: rgba(160, 160, 160, 0.8); }
.partidas-fila-mazos { flex: 1 1 220px; }
.partidas-fila-res { font-size: var(--t-sm); }
.partidas-fila-donde { flex: 0 1 auto; }
.partidas-fila-notas { flex: 1 1 100%; }
.partidas-borrar { margin-left: auto; }

@media (max-width: 560px) {
  .partidas-barra { gap: 8px; }
  .partidas-barra label,
  .partidas-form-fila label { flex: 1 1 100%; }
  /* La fila del registro se apila: en vertical no caben cuatro cosas
     en una línea sin partir palabras. */
  .partidas-fila { flex-direction: column; align-items: flex-start; }
  .partidas-borrar { margin-left: 0; }
}

/* ── El selector de mazo con buscador (tanda 233) ──
   No es un <select>: un desplegable nativo no lleva imágenes ni se
   filtra escribiendo. Es un campo con su lista debajo. */
.selector-mazo { position: relative; flex: 1 1 200px; }
.selector-mazo-campo {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  padding: 4px 8px;
}
.selector-mazo-campo:focus-within { border-color: var(--border-strong); }
.selector-mazo-sprite { width: 30px; height: 30px; object-fit: contain; flex: none; }
.selector-mazo-texto {
  flex: 1;
  border: none;
  background: none;
  padding: 8px 0;
  color: var(--text);
  font-size: var(--t-md);
  min-width: 0;
}
.selector-mazo-texto:focus { outline: none; }
.selector-mazo-limpiar {
  border: none;
  background: none;
  color: var(--text-mid);
  cursor: pointer;
  font-size: var(--t-xl);
  line-height: 1;
  padding: 0 4px;
}

.selector-mazo-lista {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.selector-mazo-opcion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--t-md);
}
.selector-mazo-opcion.resaltada { background: var(--ice); }
.selector-mazo-opcion img { width: 30px; height: 30px; object-fit: contain; flex: none; }
/* Solo los minisprites (hijos directos o en el marco sin recorte): las
   fotos de carta recortadas NO van en píxel, que son fotos. */
.selector-mazo-opcion > img,
.selector-mazo-sprite:not(.es-carta) img {
  image-rendering: pixelated;
}
/* El hueco mantiene alineados los nombres cuando una opción no tiene
   sprite (un arquetipo que se nombra por un objeto). */
.selector-mazo-hueco { width: 30px; flex: none; }

.partidas-mazo-fila { align-items: flex-start; }

/* Los botones de lo que no se llegó a jugar. El activo se marca con el
   color de la casa en vez de con un radio suelto: son cuatro opciones
   excluyentes y así se ve cuál manda de un vistazo. */
.partidas-tipo.activo {
  border-color: var(--navy);
  font-weight: 600;
}

@media (max-width: 560px) {
  .selector-mazo { flex: 1 1 100%; }
}

/* Una CARTA en el buscador ya no sale entera —a este tamaño no se
   leía— sino con su ILUSTRACIÓN recortada en un cuadrado, con el mismo
   peso a la vista que el minisprite de un Pokémon (tanda 235; antes,
   tanda 234, iba con proporción de carta). El marco recorta y la
   imagen, más grande que él, se coloca con el dibujo centrado — en una
   carta moderna vive entre el 11% y el 46% de la altura. */
.selector-mazo-marco {
  position: relative;
  width: 30px;
  height: 30px;
  flex: none;
}
.selector-mazo-marco img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.selector-mazo-marco.es-carta {
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.selector-mazo-marco.es-carta img {
  position: absolute;
  width: 205%;
  height: auto;
  left: -52%;
  top: -30%;
}

/* ── Cerrar, editar y filtrar (tanda 251) ── */

/* Un torneo cerrado se ve apagado: sigue ahí y se puede consultar, pero
   ya no pide nada. La chapa lo dice por si el color no basta. */
.partidas-torneo.cerrado { opacity: 0.72; }
.partidas-torneo.cerrado:hover { opacity: 1; }
.partidas-chapa-cerrado {
  flex: none;
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  background: var(--ice);
  color: var(--text-mid);
  font-size: var(--t-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.partidas-cerrado-nota { margin-right: auto; align-self: center; }

/* Las acciones de una ronda: pequeñas y apagadas hasta que pasas por
   encima de la fila. Compiten con el resultado por el mismo sitio y no
   pueden ganarle protagonismo. */
.partidas-ronda-acciones {
  display: inline-flex;
  gap: 8px;
  margin-left: 12px;
  opacity: 0;
  transition: opacity 0.15s;
}
.partidas-torneo-rondas li:hover .partidas-ronda-acciones,
.partidas-ronda-acciones:focus-within { opacity: 1; }
.partidas-ronda-acciones .link-btn { font-size: var(--t-xs); }

/* En un móvil no hay «pasar por encima»: si se dejaran ocultas, no
   habría forma de editar una ronda desde el teléfono. */
@media (hover: none) {
  .partidas-ronda-acciones { opacity: 1; }
}

.partidas-fila-acciones { display: inline-flex; gap: 8px; margin-left: auto; }

/* El buscador de torneos ocupa lo que le dejen; el resto de la barra
   manda menos. */
#torneoBuscarCampo { flex: 1 1 220px; }

/* El «Ver N más» de las listas. La regla de verdad vive en
 * css/torneos.css, que /mis-partidas NO carga: el botón salía pegado a la
 * izquierda en vez de centrado bajo la lista. Son dos líneas — traerse la
 * hoja entera de torneos por esto sería pagar 30 KB por un margen. */
.torneo-ver-mas {
  display: block;
  margin: 12px auto 0;
}