/* ══════════════════════════════════════════════════════════════════ COP · LA TARJETA DE LIGA — UN SOLO ARCHIVO (27/08/2026) La tarjeta de Resultados: encabezado con la bandera del país y el nombre de la competencia, y debajo una fila por partido —camisetas al margen izquierdo, los dos nombres, el marcador y una columna a la derecha—. Sin caja ni bordes: lo que separa es una línea. Franco, 27/08/2026: *«las tarjetas de partidos de la tab de H2H dentro de un partido en particular tienen que tener el mismo diseño que tienen las tarjetas en la página de resultados… entonces reutilizamos la tarjeta tal cual agregándole la info de la liga arriba. Y quiero que esas tarjetas del H2H no tengan bordes ni nada, es el mismo diseño de separación por línea que tienen las tarjetas de partidos de una misma liga en la página de resultados»*. ⚠⚠ POR ESO ESTE ARCHIVO EXISTE. «El mismo diseño» sólo es verdad si es el mismo archivo. El H2H ya tenía su propia tarjeta (`.h2m`) que nació como copia de la de Champions Clash, y esa copia se separó de su original en cuanto alguien tocó una de las dos. Copiar ahora la de Resultados habría sido repetir exactamente ese error. ══ LO QUE LA TARJETA NO DECIDE ═════════════════════════════════════ No decide qué va en la columna de la derecha. En Resultados van la hora y el estado (`FIN`, el minuto en vivo); en el H2H van la fecha del duelo y la insignia de victoria / empate / derrota. La columna mide lo mismo en las dos y por eso las dos listas se leen igual. ══ LAS TRES MEDIDAS QUE ALINEAN TODO ═══════════════════════════════ `--lg-col`, `--lg-gap` y `--lg-aire` viven una sola vez, en `.lg-card`. Son las que ponen la bandera de la liga sobre la misma vertical que las camisetas de sus partidos, y el nombre de la competencia sobre la misma vertical que los nombres de los equipos. ══════════════════════════════════════════════════════════════════ */ /* ════════ TARJETA EN VIVO (igual que el inicio, a ancho completo) ════════ */ /* ── grupo por competencia: card redondeada con header + filas de partidos ── */ /* Sección de liga (Franco, 01/08): tarjeta con el fondo de la página, borde y esquinas redondeadas. Se fue el fondo azul de la liga propia —ahora se distingue con el borde, sin pintar el encabezado— y todas las secciones quedan del mismo alto y ancho. */ /* Sección de liga (Franco, 12/08): EL MISMO diseño que los mercados de lineup — sin caja ni bordes a los costados, filas separadas por una línea, con el botón de estadísticas + bandera + nombre + flecha. La barra entera abre y cierra; el botón lleva a la info de la competencia. Reusar el componente es lo que aumenta la simetría de marca en toda la plataforma. */ .lg-card{ border:none;background:none;border-radius:0; padding:0;margin-bottom:0; } .lg-card + .lg-card{border-top:1px solid var(--card-border)} /* el encabezado entero abre y cierra (div con rol de botón: adentro va OTRO botón y un botón dentro de otro es HTML inválido, §9octies) */ .lg-head{ display:flex;align-items:center;gap:var(--lg-gap);width:100%; padding:var(--lg-aire-v) var(--lg-aire); background:none;border:none;border-radius:0; color:inherit;cursor:pointer;text-align:left;font:inherit; } /* ⚠⚠ ACÁ VIVÍA `.lg-stats` Y SE BORRÓ (23/08/2026). Se borra el CSS y no se deja apagado, por la misma razón de siempre: el estilo de algo que ya no se dibuja es la forma más barata de que vuelva. */ /* ⚠ SIN PINTADO AL TOCAR (F9-UI, 20/08/2026, Franco): «cuando selecciono o cierro una competencia se queda como seleccionada en gris claro; jamás se debe pintar de ningún color por encima de la tarjeta». Era el :hover pegajoso del táctil: en el teléfono el hover QUEDA prendido después del tap hasta que tocás otra cosa. La fila no se pinta más — la flecha (chevron) sigue avisando el estado abierto/cerrado, que para eso está. */ /* flecha de desplegar, al final de la fila */ /* ── LA ESTRELLA DE FAVORITO (Franco, 23/08/2026) ───────────────── ⚠ APAGADA ES UN CONTORNO, ENCENDIDA ES MACIZA Y DORADA. Dos estados que se distinguen de un vistazo y sin leer nada: es un botón que se toca al pasar, no uno que se estudia. ⚠ Y TIENE ÁREA DE TOQUE PROPIA (34×34): el ícono mide 18, y un objetivo de 18 px al lado de otro botón es la receta para plegar la liga cuando uno quería marcarla. */ /* ⚠⚠ LA ESTRELLA SE MUDÓ A LA COLUMNA DEL MARCADOR (Franco, 27/08/2026): *«poné las camisetas en el margen izquierdo continuadas del nombre… después, donde va el marcador de los partidos, alineado para arriba en la misma columna, tenés que poner la estrella de las tarjetas de ligas»*. El 25/08 la estrella abría la fila; eso corría la bandera y las camisetas 45 px hacia adentro, que es justo lo que hoy pide sacar. Ahora la bandera arranca donde arranca la tarjeta y la estrella se va a la derecha, a la columna del resultado. ⚠⚠ EL MARGEN NEGATIVO NO ES UN AJUSTE A OJO: ES LA CUENTA. El encabezado cierra con `gap(--lg-gap) + margin(.55rem) + flecha`; la fila cierra con `gap(.9rem) + .lg-when`, y las dos columnas finales miden lo mismo (`--lg-chev-col`). Para que el borde derecho de la estrella caiga sobre el del marcador hay que recuperar la diferencia entre los dos cierres: .9 − .7 − .55 = −.35rem. Escrito con las variables: si mañana cambia cualquiera de los dos huecos, las dos columnas se siguen alineando solas. ⚠ Y MIDE LO MISMO QUE `.lg-scores` (`--lg-fav-col`). Mismo ancho y mismo borde derecho es lo único que hace que sea LA MISMA columna y no dos cosas parecidas. ⚠ `align-self:flex-start` — «alineado para arriba». El encabezado ahora tiene dos renglones (nombre y país) y sin esto la estrella quedaría centrada entre los dos. */ .lg-fav{ flex:0 0 var(--lg-fav-col);margin-left:auto; /* ⚠ 26/09 (espacios): la cuenta usa los MISMOS tokens que `.lg-match` (gap) y `.lg-chev` (margen); con los números escritos a mano la estrella se corrió 2,4 px */ margin-right:calc(var(--gap-lg, 1rem) - var(--lg-gap) - var(--gap-sm, .5rem)); align-self:flex-start; width:var(--lg-fav-col);height:var(--lg-fav-col);display:grid;place-items:center; background:none;border:none;padding:0;cursor:pointer; color:var(--text-faint,#5a6275);transition:color .2s,transform .15s; } .lg-fav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linejoin:round} .lg-fav:hover{color:var(--text-dim)} .lg-fav:active{transform:scale(.9)} .lg-fav.on{color:var(--gold,#ffc233)} .lg-fav.on svg{fill:currentColor;stroke:currentColor} /* el rótulo de cada grupo (Favoritos · Todas las competencias) */ .lg-grupo{ font-family:'Inter',sans-serif;font-weight:700;font-size:var(--fs-sm, .8rem); letter-spacing:.5px;text-transform:uppercase;color:var(--text-dim); padding:var(--gap-xl, 1.2rem) .2rem var(--gap-sm, .5rem); } /* ⚠ el primero no lleva el aire de arriba: pegado al filtro se lee como parte de él, y separado deja un hueco que no separa nada */ .lg-grupo:first-child{padding-top:var(--gap-xs, .3rem)} /* ⚠ y la primera tarjeta después de un rótulo no lleva la línea de arriba: el rótulo YA separa, y las dos juntas se ven como un error */ .lg-grupo + .lg-card{border-top:none} .lg-chev{flex:0 0 var(--lg-chev-col);width:var(--lg-chev-col);height:20px;margin-left:var(--gap-sm, .5rem);color:var(--text-dim); display:grid;place-items:center; transition:transform .22s ease,color .2s} .lg-chev svg{width:20px;height:20px;display:block} .lg-head:hover .lg-chev{color:#fff} .lg-card.cerrada .lg-chev{transform:rotate(-90deg)} .lg-card.cerrada .lg-match{display:none} /* ⚠ LA MISMA COLUMNA QUE `.lg-crest`: es lo que pone la bandera de la liga sobre la vertical de los escudos de sus partidos. */ .lg-ico{flex:0 0 var(--lg-col);display:grid;place-items:center;width:var(--lg-col)} .lg-ico img,.lg-ico svg{width:var(--lg-col);height:22px;border-radius:3px;object-fit:cover} /* ── EL TÍTULO: NOMBRE ARRIBA, PAÍS ABAJO (Franco, 27/08/2026) ────── *«reducí un poco el tamaño de los nombres de las ligas, y agregale abajo y en gris el país de esa liga, ya que con la bandera sola no alcanza porque muchas veces la gente no sabe de qué país es qué bandera»*. ⚠⚠ EL PAÍS YA EXISTÍA Y NO SE VEÍA NUNCA. Estaba a la DERECHA del encabezado y detrás de un `if`: la lista por liga pasa `evComp` con el id del primer partido, y ese `if` lo leía como «esto no es una competencia, no muestres el país». O sea que el dato viajaba desde `LIGAS` hasta la última línea del HTML y ahí se tiraba. ⚠ EL RENGLÓN USA `--lg-reng`: el mismo interlineado que la columna de la hora, el de las dos filas de equipos y el del marcador. Un solo número para todos los renglones apilados de la tarjeta. */ .lg-titulo{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--lg-reng)} .lg-name{flex:1;min-width:0;font-family:'Inter',sans-serif;font-weight:700;font-size:var(--fs-md, .88rem);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ⚠ EN EL H2H `.lg-name` ES HIJO DIRECTO DEL ENCABEZADO (esa tarjeta no lleva país): ahí `flex:1` es lo que le da el ancho para el recorte con puntos suspensivos. Adentro de la columna, en cambio, `flex:1` significaría «estirate a lo alto». Dos contextos, una sola clase. */ .lg-titulo > .lg-name{flex:0 1 auto} .lg-country{flex:0 0 auto;font-family:'Inter',sans-serif;font-weight:500;font-size:var(--fs-xs, .72rem);color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ══ LA COLUMNA QUE ALINEA TODO (Franco, 23/08/2026) ════════════════ *«quedan las camisetas alineadas con la bandera de la liga de forma vertical, el nombre de los equipos con el nombre de la competencia»*. ⚠⚠ ESO NO SE CONSIGUE ACOMODANDO CADA COSA POR SEPARADO. La bandera del encabezado y los escudos de las filas caen sobre la misma vertical solo si su columna arranca en el MISMO x y mide lo MISMO, y los nombres si además el hueco que sigue es el mismo. Son tres números y los tres viven acá arriba, una sola vez: si mañana la bandera crece, los escudos crecen con ella y la alineación se mantiene sola. ⚠ Escribirlos sueltos en cada regla es lo que había: el encabezado con 34 px y las filas con 22, más un botón de estadísticas adelante que corría todo. Nada podía coincidir. */ /* ⚠⚠ Y SE DECLARAN TAMBIÉN EN EL ENVOLTORIO DE LA PANTALLA (09/09/2026). Franco: *«tenés que alinear sobre el borde izquierdo, respetando el margen, el botón de en vivo para que esté alineado con las banderas»*. Ese botón NO está adentro de una tarjeta: es un hermano de la lista, así que con los tokens declarados sólo en `.lg-card` no los veía y la única salida era copiar el `.2rem` a mano — un número suelto que el día que la tarjeta cambie deja de coincidir SIN AVISAR, que es exactamente el problema del que vino esta sección. Un solo bloque de declaraciones, dos selectores: la tarjeta (para todas las pantallas que la usan) y el envoltorio de Resultados (para que la fila de filtros pueda alinearse con la lista de abajo). */ .lg-card, .re-wrap{ --lg-col:30px; /* el ancho de la columna de la bandera/escudo */ --lg-gap:.7rem; /* el hueco entre esa columna y el nombre */ --lg-aire:.2rem; /* dónde arranca el contenido, encabezado y filas */ /* ⚠⚠ EL AIRE VERTICAL, UNA SOLA VEZ (Franco, 24/08/2026). El encabezado tenía .95rem y las filas .8rem, más un `gap` de 1rem en el contenedor: tres números distintos para una misma distancia, y por eso no había forma de que coincidieran. Ahora es UNO: el encabezado y las filas lo usan igual, y la separación entre tarjetas la hace la línea. Si mañana hay que dar más aire, se toca acá y toda la lista se mueve junta y pareja. ⚠ El valor es el del encabezado, que es el que Franco marcó como correcto: *«tomando como la correcta la actual distancia de la línea de arriba con el contenido, la cual es más corta»*. */ --lg-aire-v:.95rem; /* ⚠⚠ EL INTERLINEADO DE TODO LO QUE VA APILADO (Franco, 27/08/2026): *«las camisetas de los equipos apenas más cerca entre ellas y los nombres también… los números del resultado también; creo que la distancia ideal es la que tienen la hora del partido y el texto FIN»*. Esa distancia era `.15rem` y estaba escrita suelta en `.lg-when`; ahora es UNA variable y la usan los cuatro apilados: la hora, los dos equipos, los dos números del marcador y el nombre/país del encabezado. ⚠ ACHICAR ESTO ACHICA LA FILA, que es lo que pidió en la misma frase: el alto de `.lg-match` sale de las dos camisetas más este hueco, así que la tarjeta baja exactamente lo mismo que bajó el interlineado. No hay un segundo número que tocar — si lo hubiera, serían dos cosas para una y volveríamos al problema de siempre. */ --lg-reng:.15rem; /* la columna de la derecha del encabezado: la estrella (34) y la flecha. La estrella mide lo mismo que la columna del marcador de las filas, y por eso las dos caen sobre la misma vertical. */ --lg-fav-col:34px; /* ⚠⚠ LA COLUMNA DE LA DERECHA SE ENSANCHÓ (Franco, 24/08/2026): ahí abajo ya no va sólo la flecha, va también la hora de inicio y el tiempo de juego / «Fin» del partido. 20 px alcanzaban para el chevron pero no para «16:00». La flecha se centra en la columna nueva, así el eje vertical es el mismo para las dos cosas. */ --lg-chev-col:52px; } /* fila de partido: equipos · marcador · hora/estado */ .lg-match{ display:flex;align-items:center;gap:var(--gap-lg, 1rem); /* ⚠ EL MISMO AIRE LATERAL QUE `.lg-head`, o los escudos arrancan 15 px a la derecha de la bandera y no hay forma de alinearlos */ padding:var(--lg-aire-v) var(--lg-aire);cursor:pointer; transition:background .2s; } /* sin pintado al tocar (misma regla F9-UI de arriba) */ /* partido que aún no comenzó: fondo de la app, como las tarjetas del menú de torneo */ .lg-match.lg-pre{background:var(--bg)} /* ⚠ LA HORA AHORA VA AL FINAL Y MÁS CHICA (Franco: *«a la derecha al final la fecha y estado del partido, que dicho sea de paso debe reducir un poco su tamaño»*). Alineada a la DERECHA, no centrada: es la última columna y su borde derecho es el de la pantalla. */ /* ⚠⚠ CAE EXACTAMENTE BAJO LA FLECHA, y el margen NO es un número elegido: es la cuenta. El encabezado cierra con `gap(--lg-gap) + margin(.55rem) + flecha(--lg-chev-col)`; la fila cierra con `gap(.9rem) + esto`. Para que los dos cierres midan lo mismo —y por lo tanto las dos ESTRELLAS caigan en la misma vertical— acá hace falta recuperar la diferencia. Escrito con las variables: si mañana cambia el `gap` o el ancho de la flecha, se sigue alineando solo. */ /* ⚠⚠ SIN EL MARGEN CALCULADO, Y NO ES UN DESCUIDO (25/08/2026). Ese `margin-left` compensaba el hueco que dejaba la estrella cuando iba ENTRE el resultado y la hora. La estrella se mudó al principio de la fila, así que `.lg-when` volvió a ser el último elemento de un flex con `.lg-teams` en `flex:1`: queda pegado al borde derecho solo, y el margen no movía nada. Lo confirmó la corrida de control, donde el sabotaje que lo ponía en 0 dejó de dar rojo. ⚠ La alineación con la flecha del encabezado la sigue midiendo el control 6; si algún día vuelve a hacer falta compensar, se escribe otra vez con las variables y no con el número final. */ .lg-when{flex:0 0 var(--lg-chev-col); display:flex;flex-direction:column;align-items:center;gap:var(--lg-reng)} /* hora y minuto: ancho completo y centrados entre sí; tabular-nums hace que todos los dígitos midan lo mismo, así las columnas no bailan */ .lg-hour{width:100%;text-align:center;font-family:'Inter',sans-serif;font-weight:500;font-size:var(--fs-sm, .8rem);color:var(--text-dim);font-variant-numeric:tabular-nums} .lg-status{width:100%;text-align:center;font-family:'Inter',sans-serif;font-weight:600;font-size:var(--fs-xs, .72rem);color:var(--text-faint);font-variant-numeric:tabular-nums} .lg-status.live{color:var(--red)} .lg-teams{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--lg-reng)} .lg-team{display:flex;align-items:center;gap:var(--lg-gap);min-width:0} /* ⚠ MISMO ANCHO QUE `.lg-ico`, o los nombres no arrancan en el mismo x */ .lg-crest{flex:0 0 var(--lg-col);width:var(--lg-col);height:22px;display:grid;place-items:center; border-radius:0;overflow:hidden;background:none} /* ⚠ `contain` Y SIN RECORTE REDONDO: la camiseta es una figura con hombros y mangas; en un círculo con `cover` se le comen las puntas y queda una mancha de color. Es la misma decisión de `.mc-crest`. */ .lg-crest img{width:22px;height:22px;object-fit:contain;display:block} /* ⚠ BLANCO, como el nombre de la liga (Franco, 24/08/2026). Estaba en `--text-dim` y sólo el ganador se ponía blanco; ahora los dos equipos se leen igual y lo que distingue al ganador es el marcador. */ .lg-tname{font-family:'Inter',sans-serif;font-weight:600;font-size:var(--fs-base, 1rem);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lg-tname.win{color:#fff} /* ⚠⚠ COLUMNA DE ANCHO FIJO, Y CENTRADA (27/08/2026). Antes era `auto` alineada a la derecha: el ancho lo ponía el número, así que la columna se movía sola entre un 2-1 y un partido sin empezar. Con el ancho de `--lg-fav-col` —el mismo de la estrella del encabezado— el marcador y la estrella son LA MISMA columna, que es lo que pidió Franco. */ .lg-scores{flex:0 0 var(--lg-fav-col);display:flex;flex-direction:column;align-items:center;gap:var(--lg-reng)} /* marcador: tabular-nums + centrado, para que el 1 y el 0 caigan en la misma vertical (en proporcional el "1" es más angosto y se corría) */ /* ⚠ `min-height` ADEMÁS DE `min-width` (24/08/2026). Desde que los partidos sin empezar van con el marcador VACÍO, un `` sin texto mide cero de alto y la columna se desarmaba: los dos huecos se juntaban y la fila del partido sin empezar quedaba distinta de las demás. Con el alto de una línea reservado, un partido sin marcador ocupa exactamente lo mismo que uno con 2-2. */ .lg-score{font-family:'Inter',sans-serif;font-weight:600;font-size:var(--fs-base, 1rem);line-height:1.35;color:var(--text-dim);min-width:14px;min-height:1.35em;text-align:center;font-variant-numeric:tabular-nums} .lg-score.win{color:#fff} /* ⚠⚠ ACÁ VIVÍA LA ESTRELLA DE UN PARTIDO (`.lg-fav-m`) Y SE BORRÓ (Franco, 27/08/2026): *«sacá las estrellas de favoritos de las tarjetas de partidos»*. Con ella se fueron sus dos reglas —el margen calculado que la alineaba con la de su liga y el `align-self`— y, en `resultados-en-vivo.html`, el botón, su handler y el almacenamiento con vencimiento. Se borra y no se deja apagado, por la razón de siempre: el estilo de algo que ya no se dibuja es la forma más barata de que vuelva. ⚠ Sacarla es además lo que pone las camisetas al margen izquierdo: la fila abría con 34 px de estrella + el hueco, y por eso los escudos y la bandera arrancaban a 45 px del borde de la tarjeta. */ /* separador fino entre partidos del mismo grupo */ .lg-match + .lg-match{border-top:1px solid rgba(255,255,255,.05)} /* ── EL ENCABEZADO QUE NO ABRE NADA ───────────────────────────────── En el H2H cada tarjeta es UN partido con su liga arriba: no hay nada que plegar. El encabezado se queda idéntico salvo por el cursor —una manito sobre algo que no responde es una promesa que la pantalla no cumple— y por la flecha, que directamente no se dibuja. */ .lg-head--fijo{cursor:default} /* ── VICTORIA · EMPATE · DERROTA ──────────────────────────────────── Franco: *«en lugar de FIN el logo de victoria derrota o empate»*. ⚠ ES LA INSIGNIA QUE YA EXISTÍA EN EL H2H (`.pa-res`), mudada acá con su verde, su rojo y su dorado. No se inventó una nueva y la vieja se borró: dos insignias para el mismo dato terminan diciendo cosas distintas del mismo partido. ⚠ ACHICADA DE 30 A 26 px: en Resultados esta columna lleva dos renglones de texto chico, y un disco de 30 px al lado de la fecha estiraba la fila de partido más que las dos filas de equipo que tiene al lado — o sea, la insignia decidía el alto de la tarjeta. */ .lg-res{ flex:0 0 26px;width:26px;height:26px;border-radius:50%; display:grid;place-items:center; font-family:'Inter',sans-serif;font-weight:800;font-size:var(--fs-sm, .8rem); color:var(--s0, #0b0e14); } .lg-res.v{background:var(--ok, #22c55e)} .lg-res.d{background:#ff5c5c} .lg-res.e{background:#c9a227} /* ── EL CATÁLOGO: los estados que pinta el dato ───────────────────── ⚠⚠ ESTO ESTABA ESCRITO CUATRO VECES EN `resultados-en-vivo.html`, en cuatro `