/* ============================================================================ Cimientos ============================================================================ Lo que había aquí era el CSS que genera la plantilla de ASP.NET: la fuente clavada en 14px, un anillo de foco con un halo blanco y un `margin-bottom` de 60px para empujar el pie. Nada de eso era una decisión. El tema es **oscuro por defecto** y el claro existe: los colores salen de las variables de Bootstrap 5.3 (`--bs-body-bg`, `--bs-secondary-bg`…), así que casi todo el CSS de este fichero ya funcionaba en los dos sin tocarlo. Lo que NO sale gratis está marcado con «ojo con el tema» más abajo. ============================================================================ */ :root { /* El acento es el dorado del marco de las cartas multicolor. No es un color de maná: si fuera azul o rojo, un mazo mono-color parecería estar seleccionado. Este tono es el del tema OSCURO: 7,34:1 contra el fondo, medido. Sobre blanco ese mismo oro da 2,1:1 —ilegible—, así que el tema claro usa otro más abajo. Un acento no puede ser un color, tienen que ser dos. */ --mtg-acento: #e0aa3e; --mtg-acento-vivo: #f0bc55; --mtg-acento-texto: #1b1a17; --mtg-acento-halo: rgba(224, 170, 62, 0.45); /* Velo para una fila que pide atención. Translúcido a propósito: se mezcla con el fondo del tema, así que el texto sigue contrastando con él. */ --mtg-atencion-fondo: rgba(224, 170, 62, 0.16); /* Plata y bronce del podio de una liga. **Van con el acento**, que hace de oro, y como él necesitan un tono por tema: son colores claros por naturaleza y sobre blanco se hunden. Estos son los del tema OSCURO; el claro los redefine más abajo. **Lo que hay que separar aquí es el TONO, no la luminancia**, y hay que separarlo de DOS cosas: de los otros dos metales y del color del texto normal. Las dos se midieron y las dos fallaron a la primera: · Un bronce «realista» (#d08b4a) daba **1,34 contra el oro** —y 1,07 en el tema claro—: los dos eran marrón-naranja y a 14 px eran el mismo color. Resuelto llevándolo a rojo cobrizo. · Una plata gris (#b3c2d1) daba **1,40 contra el color del texto** (#dee2e6), que en Bootstrap es también un gris azulado: una cifra en plata se leía como texto normal. Lo preguntó el organizador antes de que se viera. Resuelto haciéndola **azul acero** —sigue leyéndose como el metal— para que la separe la saturación y no solo el brillo. Y una tercera cosa que solo apareció midiendo: el bronce de este tema estaba en **4,25 sobre el fondo**, por debajo del 4,5 que pide un texto normal. Pasaba desapercibido porque la cifra estaba escrita y dada por buena. Aclarado a #ee6c4d sube a 5,06 y de paso gana separación de tono contra el oro (28° frente a 21). Cifras de aquí, sobre `--bs-body-bg` (#212529): oro 7,34 · plata 6,24 · bronce 5,06. Y contra el color del texto: 1,61 · 1,90 · 2,34. */ /* El oro del podio **tiene variable propia y no reutiliza el acento**, aunque en este tema valgan lo mismo. No es redundancia: el acento significa «esto se pulsa» y una medalla no se pulsa, así que atarlos obligaba a que el metal cargara con el contraste que necesita un botón. Separados, el tema claro puede darle un amarillo de verdad. */ --mtg-oro: var(--mtg-acento); --mtg-plata: #7fa8d8; --mtg-bronce: #ee6c4d; /* El velo de una ficha con imagen de fondo: opaco donde va el texto y abriéndose hacia la derecha para dejar ver el tapete. Usa el color del cuerpo, así que sirve en los dos temas sin declararse dos veces. Vive aquí porque **la forma compacta se usa en dos sitios**: todos los listados en móvil, y las jornadas de una liga en cualquier tamaño. Con dos copias, el día que se ajustara una quedaría la otra distinta sin que nadie lo decidiera. */ /* ---- Lo que mide como mínimo una caja de lista de torneo ---- La usan las dos rejillas que pintan esa caja —«Barajas por preparar» en la portada y las pestañas de «Mis barajas»—, y está en una sola variable porque **son la misma caja**: con el número escrito dos veces, el día que se ajuste una quedaría la otra distinta sin que nadie lo decidiera. **38 rem no es un número redondo, es el único que cumple las dos cosas que pidió el organizador**: una caja por fila en la portada y dos en «Mis barajas». Sale de medir los contenedores, y el dato que lo hace posible es que **los dos dejan de crecer** —la página tiene ancho máximo—: | Ventana | Portada | «Mis barajas» | | 1280 | 730 | 1256 | | 1440 | 826 | 1416 | | 1600 | 922 | 1576 | | 1920 y más | 1051 | 1776 | Para una sola columna en la portada hace falta un mínimo mayor que (1051 − 8) / 2 = **521**; para dos en «Mis barajas» y nunca tres, entre (1776 − 16) / 3 = **587** y (1256 − 8) / 2 = **624**. La intersección es 587-624, y 38 rem son 608. El margen más justo es el de las tres columnas: hacen falta 1864 px de contenedor y el tope es 1776, o sea **88 px**. Si algún día crece el ancho máximo de la página, «Mis barajas» pasará a tres — y entonces hay que volver a esta cuenta, no ajustar a ojo. */ --mtg-caja-lista-min: 38rem; --mtg-velo-ficha: linear-gradient( 90deg, var(--bs-body-bg) 0%, var(--bs-body-bg) 52%, rgb(from var(--bs-body-bg) r g b / 0.72) 78%, rgb(from var(--bs-body-bg) r g b / 0.55) 100%); /* Superficie de una caja que tiene que parecer **elevada** sobre el panel que la contiene. Un velo translúcido y no un `--bs-*-bg`, y está medido: sobre el panel (`--bs-secondary-bg`, #343a40) tanto `--bs-body-bg` como `--bs-tertiary-bg` son más **oscuros**, así que una caja pintada con ellos sale como un agujero negro en lugar de como un relieve. Un blanco al 7 % aclara en oscuro y un negro al 5 % oscurece en claro: en los dos temas se lee como «un escalón por encima». */ --mtg-celda-fondo: rgba(255, 255, 255, 0.07); /* Alto mínimo de lo que se toca con un dedo. Solo se aplica con puntero grueso —ver el bloque de táctil—, para no inflar las tablas densas con ratón. */ --mtg-toque: 44px; } /* El oro oscurecido del tema claro: 5,94:1 sobre blanco y 5,64:1 sobre el gris de Bootstrap, los dos medidos. El texto encima pasa a ser blanco. */ [data-bs-theme="light"] { --mtg-acento: #855c0e; --mtg-acento-vivo: #6b4a0b; --mtg-acento-texto: #ffffff; --mtg-acento-halo: rgba(133, 92, 14, 0.35); --mtg-atencion-fondo: rgba(133, 92, 14, 0.12); /* Plata y bronce oscurecidos, por lo mismo que el oro: los del tema oscuro son claros y sobre blanco se hunden. **El bronce del tema claro es rojo y no cobre, y costó tres intentos.** Aquí el oro no es un dorado sino `#855c0e`, un marrón oscuro —el dorado de verdad da 2,1 sobre blanco y no se puede usar—, así que cualquier bronce «realista» acaba siendo el mismo marrón: el primero (#8a5220) daba **1,07 contra el oro** y el segundo (#a33c14) se quedaba en 1,10 con solo 22° de separación de tono. Los dos los vio el organizador antes que ninguna medición. Con rojo puro la separación sube a **39° de tono y 1,29 de contraste**, que es lo máximo que da de sí este tema sin tocar el acento. No choca con el rojo de peligro de Bootstrap (#dc3545): este es más oscuro y menos rosado, y además vive en una tabla donde no hay ninguna acción destructiva con la que confundirlo. Medidos sobre blanco: plata 5,08 y bronce 7,66. La plata va en **azul acero** y no gris, porque un gris medio se confundía con el texto secundario — que es justo con lo que comparte celda, ya que los ceros del medallero van en él. */ /* Y aquí es donde se nota que el oro del podio sea variable propia: el acento de este tema (#855c0e) es un **marrón**, porque tiene que aguantar como color de botón; para una medalla se leía como bronce viejo y no como oro. Lo dijo el organizador viéndolo. Este es más amarillo de verdad —saturación 100 % contra el 89 % del acento, y el tono sube de 39° a 45°— y aun así da **4,92 sobre blanco**, con margen sobre el 4,5 de un texto normal. De paso separa mejor del bronce: 1,56 frente al 1,29 que daba el acento. */ --mtg-oro: #8f6b00; --mtg-plata: #41729f; --mtg-bronce: #a80f0f; /* Un poco más que el 7 % del tema oscuro: el mismo porcentaje de negro sobre un panel claro se nota menos, y medido daba 1,12 de relieve frente a 1,24. */ --mtg-celda-fondo: rgba(0, 0, 0, 0.08); } html { /* 16px en todas partes. La plantilla bajaba a 14 en móvil, que es justo donde una tabla de clasificación con ocho columnas menos se lee. */ font-size: 16px; } body { /* La cifra de un desempate y un marcador se leen mejor con cifras de ancho fijo: las columnas de números quedan alineadas sin recurrir a monoespaciada. */ font-variant-numeric: tabular-nums; /* Pie pegado abajo con flexbox. Antes esto lo hacía el andamiaje de ASP.NET con `.footer { position: absolute; bottom: 0 }` sostenido por un `html{position:relative}` y un `body{margin-bottom:60px}` en otro fichero. Tres reglas repartidas en dos sitios, y al quitar dos de ellas el pie se soltó de la página: un `absolute` sin ancestro posicionado se ancla al bloque contenedor inicial, así que se quedaba clavado a la altura de la primera pantalla y **se superponía al contenido** en cuanto la página era más larga que la ventana. Con `margin-top: auto` el pie baja solo cuando sobra sitio y fluye cuando no. No hay altura mágica que mantener sincronizada. */ min-height: 100dvh; display: flex; flex-direction: column; } body > footer { margin-top: auto; padding-block: 1rem; } /* ============================================================================ La pantalla del juez en móvil: pestañas y barra fija ============================================================================ En escritorio la ronda y la clasificación se ven a la vez, una debajo de otra, y nada de este bloque aplica. En un móvil eso obligaba a desplazarse una pantalla entera para consultar la tabla entre resultado y resultado, y las acciones de juez —que es lo que se pulsa al final de cada ronda— quedaban al fondo del todo. Qué panel se ve lo dice `data-panel` en `#ronda-y-clasificacion`. Lo pinta el servidor («ronda») y lo restaura site.js tras cada intercambio de HTMX, porque el fragmento se reemplaza entero al guardar un resultado y sin eso el juez volvería a la pestaña de ronda aunque estuviera revisando la clasificación. ============================================================================ */ /* **Las pestañas valen en las dos vistas**, y esto antes vivía encerrado en la media query de móvil. Sacarlo fuera no añadió código: la maquinaria —el atributo en el contenedor, el servidor pintándolo y site.js restaurándolo tras cada intercambio— no dependía del tamaño para nada. El motivo de fondo no es ganar espacio: **las dos vistas se usan en secuencia**. El bucle del juez es meter resultados, cerrar la ronda, mirar la tabla y emparejar; nunca necesita las dos a la vez. Y la clasificación necesita el ancho, porque tiene nueve columnas y crecerá con el top y los grupos: a media pantalla le quedarían unos 600 px, el mismo apretón que se acaba de arreglar en móvil. Que la forma sea la misma arriba y abajo también significa **un solo estado que mantener**, en lugar de dos comportamientos según el tamaño. */ .mtg-pestanas { display: flex; gap: 0.5rem; } /* Qué mitad se ve. Fuera de la media query a propósito: es la regla que hace que la estructura sea la misma en las dos vistas. */ [data-panel="ronda"] .mtg-panel-clasificacion, [data-panel="clasificacion"] .mtg-panel-ronda { display: none; } /* Pestañas clásicas: una línea que separa del contenido y un subrayado de acento en la activa. **Deliberadamente distintas de las del grafo de fases**, que son pestaña rellena con anillo: son dos niveles anidados —fases fuera, ronda y clasificación dentro— y con el mismo lenguaje visual uno se leería como el otro. **Iguales en móvil y en escritorio**, y eso corrige un fallo de significado, no de gusto: en móvil la activa era un botón **relleno de amarillo**, y en esta aplicación el amarillo significa «esto se pulsa». La pestaña activa parecía la que había que pulsar, así que se leía justo del revés. Con el subrayado, la activa se lee como activa porque está *unida* al contenido de abajo, y el amarillo deja de mentir. El mecanismo no cambia: el estado sigue viviendo en el atributo del contenedor, que es lo que le hace sobrevivir al intercambio de HTMX. */ .mtg-pestanas { gap: 0; margin-bottom: 1rem; border-bottom: 1px solid var(--bs-border-color); } .mtg-pestanas .btn { border: 0; border-radius: 0; margin-bottom: -1px; padding: 0.45rem 1.1rem; box-shadow: inset 0 -2px 0 0 transparent; --bs-btn-color: var(--bs-secondary-color); } /* La activa, **para cualquier juego de pestañas de la aplicación**: se pinta por `aria-selected`, que es el atributo que `site.js` mantiene en los tres mecanismos que existen. Antes esto **enumeraba los pares panel/atributo** —`[data-panel="ronda"] [data-mtg-pestana="ronda"]`, y así con los cuatro— con el motivo escrito de que «el día que aparezca un tercer juego se añade aquí». Apareció —las cuatro vistas de la baraja— y **no se añadió**: sus pestañas funcionaban, pero no había forma de saber cuál estaba activa, ni subrayado ni nada. Lo vio el organizador en pantalla. Con `aria-selected` el problema desaparece por construcción en vez de por acordarse: un juego nuevo de pestañas se pinta solo, y de paso lo visible y lo que anuncia un lector de pantalla **no pueden discrepar**, que es lo que pasaba justo aquí. `aria-current="page"` es la segunda mitad de la misma regla, para las pestañas que son **enlaces de navegación entre páginas** —las tres pantallas de administración—: ahí `role="tab"` mentiría (promete un panel que cambia sin navegar), así que la activa la declara el atributo de un enlace, y esta regla la pinta igual. */ .mtg-pestanas .btn[aria-selected="true"], .mtg-pestanas .btn[aria-current="page"] { --bs-btn-color: var(--bs-body-color); box-shadow: inset 0 -2px 0 0 var(--mtg-acento); font-weight: 600; } /* El ancho lo reparte `flex-fill` **del marcado**, no de aquí: Bootstrap lo declara con `!important` y le gana a cualquier `flex` de esta hoja. Aquí hubo un `flex: 0 0 auto` para escritorio que no pintaba nada — medido: las dos pestañas ocupaban 652 px de 1304 igual—, y se quitó en lugar de dejar una regla muerta que hacía creer lo contrario. */ @media screen and (max-width: 767.98px) { /* ---- El distintivo «abandonó» se esconde, y el tachado se queda de señal ---- En la ficha de mesa el lado mide **109 px en móvil** y 250 en escritorio. La palabra «abandonó» ocupa 72 y **no encoge** —un distintivo con el texto en una línea no puede—, mientras que el nombre sí, porque es lo único flexible del lado. El resultado, medido: un «Alejandro Fernández» se quedaba en **dos caracteres**, «Al…», al lado de un distintivo que ocupaba dos tercios del hueco. Con «Ana», tres letras, ya se recortaba. Lo encontró una pasada de QA, no la pantalla. Se esconde **igual que el rótulo largo de la barra de acciones**: fuera de flujo y con `clip-path`, así que sigue siendo texto para el lector de pantalla y el nombre recupera el sitio —de 2 caracteres a 13, que es todo el que hay—. En escritorio no se toca: ahí caben los dos. La señal que se queda es **el tachado del nombre**, que ya estaba y tiene dos ventajas sobre el distintivo: es por jugador y no cuesta ancho. Se descartó abreviarlo a un «✕» (10 caracteres, pero es un icono sin rótulo, que es justo lo que se decidió no copiar de Tolaria) y bajarlo de línea (13 caracteres y la palabra entera, pero +24 px de alto por ficha con abandono). */ /* ---- Cambiar de ronda: en móvil, un desplegable ---- La franja de botones crece con el número de rondas y el ancho no. A 375 px caben **10**, y una liga de 24 jugadores tiene 23 rondas: medido, el documento pasaba a **765 px** y el navegador aleja la página entera, que es como se ve roto en un teléfono. El desplegable mide lo mismo con 3 rondas que con 39, se queda en una línea de 44 px y dice «Ronda 7 de 23» en vez de un «7» pelado. Y con eso el título de al lado sobra: repetirlo era el mismo defecto que se acaba de quitar del distintivo de estado. Se esconde con `clip-path`, no con `display: none`, porque **sigue siendo el encabezado de la sección** para un lector de pantalla. */ /* ---- Las tres pestañas del listado, apretadas para que quepan en una fila ---- A 375 px el hueco es de 351 y las tres piden **437** con el relleno de escritorio, así que se partían en dos líneas dentro de cada botón y la fila medía **86 px**. Bajando a 0,85 rem de letra y 0,35 de relleno entran en una sola de 44. El número está **medido contra el peor caso y no contra los datos de hoy**: con las cifras de una sola cifra aguantaban valores más cómodos (0,9 rem), pero en cuanto un contador llega a dos dígitos vuelven a partirse. Comprobado con 9, 17 y 128 en las tres a la vez: solo esta pareja sobrevive a las tres. */ .mtg-listado .mtg-pestanas .btn { padding: 0.45rem 0.35rem; font-size: 0.85rem; } .mtg-selector-rondas { display: none; } .mtg-titulo-de-ronda { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; } .mtg-mesa .mtg-abandono-marca { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; /* El relleno del distintivo impide bajar de 16×8 aunque la anchura sea de 1 px: con `box-sizing: border-box` el contenido no puede medir menos que cero, así que queda el relleno. Está fuera de flujo y recortado, o sea inofensivo, pero una caja en absoluto que mide más de lo que dice es la clase de cosa que aparece luego en un `scrollWidth` y no se entiende. */ padding: 0; overflow: hidden; } .mtg-pestanas { margin-bottom: 0.85rem; } /* Lo único que cambia en móvil: llegan a los 44 px del dedo. La forma —subrayado en la activa— es la misma que en escritorio a propósito. Aquí la activa era un **botón relleno de amarillo** y se leía como «púlsame», que es lo que significa el amarillo en toda la aplicación. */ .mtg-pestanas .btn { min-height: var(--mtg-toque); } /* La barra de juez pasa a ser una **botonera de icono y rótulo**, pegada abajo. `sticky` y no `fixed` a propósito: al llegar a su sitio natural del documento se queda ahí, no tapa el pie, y no hay que reservar hueco con un padding fantasma ni pelearse con `env(safe-area-inset-bottom)`. Antes era un `
` que se plegaba a 44 px porque desplegado medía 275 —un tercio de la pantalla— con los botones a fila completa. Con cuatro huecos en una fila mide ~60 más la línea de estado, así que **ya no hace falta plegarla**: se fue el ``, y con él el estado en `sessionStorage` que `site.js` restauraba en cada intercambio. */ .mtg-barra-acciones { position: sticky; bottom: 0; z-index: 1020; background: var(--bs-body-bg); box-shadow: 0 -0.35rem 0.85rem rgba(0, 0, 0, 0.25); padding: 0.5rem 0.5rem 0.35rem !important; } /* El título se queda para el lector de pantalla pero no gasta un renglón: `clip-path` como la cabecera de las tablas en modo ficha, no `display: none`. */ .mtg-barra-acciones .mtg-barra-acciones-titulo { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; } /* Cuatro huecos iguales, orden fijo. `grid` y no `flex` para que los botones midan lo mismo aunque los rótulos no: con `flex` el ancho lo decidiría el texto y el dedo tendría que aprender un objetivo distinto en cada estado. */ .mtg-acciones { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; } .mtg-acciones .mtg-accion-boton { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; width: 100%; min-height: 3.5rem; padding: 0.4rem 0.15rem; border: 0; border-radius: var(--bs-border-radius); font-size: 0.6875rem; line-height: 1.15; } /* El icono solo existe en móvil: en escritorio los botones son texto. */ .mtg-acciones .mtg-accion-icono { display: block; width: 1.375rem; height: 1.375rem; } /* ---- Un botón de la barra lleva UN rótulo, el mismo en los dos tamaños ---- `mtg-accion-rótulo`, y no necesita reglas: se ve siempre. Hubo un mecanismo de **dos** rótulos, largo y corto, para cuando el de escritorio no cabía en los 75 px de móvil: el corto se enseñaba y el largo se escondía con `clip-path` para seguir siendo el nombre accesible. Se quitó al poner los rótulos enteros también en móvil, porque el corto tiraba justo el complemento que hace falta —«Emparejar» en vez de «Emparejar ronda 2», «Cerrar» en vez de «Cerrar la liga»— y porque, ya iguales, era **el rótulo escrito dos veces** y libre de separarse sin que nadie lo viera: solo se ve uno de los dos a la vez. Y no cuesta alto: los rótulos parten en dos líneas y el hueco ya medía dos. Medido, la barra se queda en 78 px con cuatro botones. La palabra más larga que existe, «inscripción», ocupa 54 px de los 70 disponibles. Si algún día vuelve a hacer falta un rótulo distinto en móvil, la trampa está escrita: el `` que se vea **no puede llevar `aria-hidden`**, porque el icono también está oculto y el botón se quedaría sin nombre accesible ninguno. */ /* Los secundarios pierden el contorno: en una fila de cuatro, cuatro bordes hacen ruido y el hueco ya los separa. El principal conserva su relleno de acento, que es lo que lo distingue — y sigue siendo el único dorado. */ .mtg-acciones .btn-outline-secondary.mtg-accion-boton, .mtg-acciones .btn-outline-danger.mtg-accion-boton { background: transparent; } } /* El porqué de una acción que falta. Vive **en el contenido y fuera de la barra**, justo encima: la barra lleva acciones y nada más. Estuvo dentro con dos partes, un resumen y un detalle, y las dos cosas estaban mal: ocupaba sitio fijo en una barra pegada, y el resumen **repetía lo que el distintivo de la cabecera ya dice** («Ronda 1 de 3 · 4 sin resultado»). Quedó solo lo que no está en ningún otro sitio. */ .mtg-nota-de-estado { color: var(--bs-secondary-color); font-size: 0.875rem; margin-bottom: 0; } /* La forma de **escritorio** de la misma barra: una fila de botones de texto, como siempre. Es el mismo marcado — el rótulo es el mismo arriba y abajo, igual que una tabla ancha sigue siendo una `` y se vuelve fichas por debajo de 768 px. Va en su propio `@media` y no como regla base **a propósito**: el bloque de móvil está antes en el fichero, así que unas reglas base con la misma especificidad lo pisarían por orden de fuente. Pasó: la botonera salió en tres filas de 301 px. Acotando los dos lados, el orden deja de importar. */ @media (min-width: 768px) { /* El icono se apaga aquí y se vuelve a encender **dentro de `.mtg-acciones`**, unas líneas más abajo. Parece un rodeo y no lo es: la clase la usa además el campeón de una liga, donde no hay barra y sí tiene que seguir apagado en escritorio. */ .mtg-accion-icono { display: none; } /* ---- El icono también en escritorio ---- Lo pidió el organizador al ver las dos formas seguidas: en móvil cada botón llevaba icono y arriba no, así que el mismo botón se reconocía de dos maneras distintas según el tamaño. Con el icono en los dos, lo único que cambia entre formas es **cómo se apila**, que es la regla que ya sigue el resto de la aplicación. Solo se enciende dentro de `.mtg-acciones`: la clase la usa además el campeón de una liga, donde no hay barra y el `display: none` de arriba sigue valiendo. **1,125 rem = 18 px**, que es el tamaño de icono de escritorio que el proyecto ya fijó al arreglar el botón de imprimir; los 1,375 rem de la botonera de móvil aquí se comerían el alto del botón. Y el `flex: 0 0 auto` no es adorno: sin él el icono es un hijo flexible y se estruja antes que el texto cuando el rótulo es largo —«Emparejar ronda 2»—, que es justo al revés de lo que se quiere. */ .mtg-acciones .mtg-accion-boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; } .mtg-acciones .mtg-accion-icono { display: block; flex: 0 0 auto; width: 1.125rem; height: 1.125rem; } .mtg-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* ---- Cambiar de ronda: la franja de botones es de escritorio ---- */ .mtg-ir-a-ronda { display: none; } /* **Y puede saltar de línea.** Un `.btn-group` va en `nowrap` por defecto, así que la franja crecía a lo ancho sin techo: son 25,5 px por ronda y una liga tiene N−1 rondas, de modo que **a 992 px se rompía con 27 rondas y a 1280 con 35** — ligas de 28 y de 36 jugadores, nada exótico. Medido con el salto de línea: 23 rondas siguen en una fila a 992 px, y de 27 a 50 pasan a dos y ahí se quedan, así que deja de existir un número a partir del cual se rompe. El precio es cosmético y conocido: `.btn-group` redondea las esquinas del primero y del último del grupo, no de cada línea, así que el primer botón de la segunda fila tiene las esquinas izquierdas rectas. Se acepta a cambio de que no haya desbordamiento. */ .mtg-selector-rondas { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.25rem; } /* **Y los botones no se estiran.** `.btn-group > .btn` de Bootstrap lleva `flex: 1 1 auto`, así que al saltar de línea los que quedan sueltos se reparten el ancho sobrante: medido a 805 px con 23 rondas, los 4 de la segunda fila salían a **144 px cada uno** contra los 27-35 de arriba. Lo vio el organizador y describía justo eso. El `min-width` va un paso más allá de no estirarse: la primera fila **ya era irregular** —27 px los de una cifra y 35 los de dos—, así que igualándolos queda una rejilla uniforme en todas las filas en lugar de solo «las de abajo como las de arriba». 2,2 rem son los 35 px que ya medía el más ancho, o sea que no crece nada: solo deja de encoger el estrecho. */ .mtg-selector-rondas > .btn { flex: 0 0 auto; min-width: 2.2rem; } } /* ============================================================================ El grafo de fases del torneo ============================================================================ Cuenta **dos cosas a la vez**, y por eso usa dos canales visuales distintos: - **La bola rellena** dice en qué fase está el torneo. Es un hecho, cambia poco. - **La pestaña con anillo** dice qué fase estás mirando. Es navegación. Si las dos usaran el mismo canal —dos adornos sobre la bola— no se podrían leer a la vez, que es justo el punto ciego de la referencia de la que salió esto. Y es navegación, no un mando: pulsar un nodo no mueve el torneo de fase. ============================================================================ */ .mtg-fases { display: flex; align-items: stretch; position: relative; gap: 0; } /* La línea que une los nodos, por detrás de las bolas. */ .mtg-fases::before { content: ""; position: absolute; top: 1.85rem; left: 12%; right: 12%; height: 1.5px; background: var(--bs-border-color); z-index: 0; } .mtg-fase { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.7rem 0.25rem 0.6rem; border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0; text-decoration: none; color: var(--bs-secondary-color); min-width: 0; } .mtg-fase-bola { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--bs-border-color); background: var(--bs-body-bg); font-weight: 600; z-index: 1; } .mtg-fase-rótulo { font-size: 0.85rem; text-align: center; line-height: 1.25; } /* Fase que el torneo dejó atrás: se puede consultar, y se ve que se recorrió. */ .mtg-fase-pasada { color: var(--bs-body-color); } .mtg-fase-pasada .mtg-fase-bola { border-color: var(--mtg-acento); color: var(--mtg-acento); } /* Canal 1: donde está el torneo. Relleno macizo, que es lo que se ve de un vistazo. */ .mtg-fase-actual .mtg-fase-bola { background: var(--mtg-acento); border-color: var(--mtg-acento); color: var(--mtg-acento-texto); } .mtg-fase-actual .mtg-fase-rótulo { color: var(--mtg-acento); font-weight: 600; } /* Canal 2: lo que estás mirando. Pestaña unida al cuerpo, más anillo. */ .mtg-fase-mirando { background: var(--bs-secondary-bg); color: var(--bs-body-color); } .mtg-fase-mirando .mtg-fase-bola { box-shadow: 0 0 0 3px var(--bs-secondary-bg), 0 0 0 4.5px var(--mtg-acento); } /* Fase por la que el torneo no va a pasar. El tachado es **solo visual**: el motivo va en el `title` y en un texto oculto, porque un lector de pantalla no anuncia un tachado. Sin frase añadida al lado: ocupaba demasiado. */ /* **Sin `opacity`**, y está medido: con `opacity: .5` el rótulo daba 3,48:1 en oscuro y 2,97:1 en claro, por debajo del mínimo. La opacidad multiplica contra el fondo, que es justo el motivo por el que no se usa nunca para atenuar texto. La señal de «omitida» la dan el borde discontinuo y el tachado, que no cuestan contraste. */ .mtg-fase-omitida { color: var(--bs-secondary-color); } .mtg-fase-omitida .mtg-fase-bola { border-style: dashed; color: var(--bs-secondary-color); } .mtg-fase-omitida .mtg-fase-rótulo { text-decoration: line-through; } /* Fase futura: no hay nada que mirar todavía. No es un enlace, así que no se enfoca. */ .mtg-fase-cerrada { cursor: default; } a.mtg-fase:hover:not(.mtg-fase-mirando) { background: var(--bs-tertiary-bg); color: var(--bs-body-color); } /* El cuerpo de la fase, pegado al grafo para que la pestaña parezca unida a él. */ .mtg-fase-cuerpo { background: var(--bs-secondary-bg); border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius); padding: 1rem; } /* La franja de características: siempre visible, siempre de solo lectura. Los controles para cambiarlas viven en la fase de inscripción, que es la única donde se pueden cambiar. */ .mtg-caracteristicas { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--bs-border-color); font-size: 0.85rem; color: var(--bs-secondary-color); } .mtg-caracteristicas strong { color: var(--bs-body-color); font-weight: 600; } @media (max-width: 575.98px) { .mtg-fase-rótulo { font-size: 0.75rem; } .mtg-fase { padding-left: 0.1rem; padding-right: 0.1rem; } .mtg-fases::before { left: 14%; right: 14%; } } /* Quien abandonó, en la clasificación y en los pareos. El tachado va **solo sobre el nombre**, nunca sobre la fila: una línea encima de «3-0-0» o de «58,3» cuesta leerlas, y un cero tachado se parece a otra cosa. Y va **fino**, que es lo que se pidió y lo que hace que el nombre siga leyéndose. `line-through` pelado usa el grosor de la fuente; `text-decoration-thickness: 1px` lo fija, y `text-decoration-color` con el color secundario lo baja de intensidad sin tocar el del texto —bajar el del texto sería justo el fallo de contraste que estas convenciones prohíben—. Nunca es el único canal: al lado va el distintivo «abandonó en la N», con palabras. El tachado también marca el nodo omitido del grafo de fases, pero ahí significa «esta fase no existe» y el contexto no se confunde: son un rótulo de navegación y un nombre de persona. */ .mtg-abandonado { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--bs-secondary-color); } /* ============================================================================ LA MESA COMO FICHA ============================================================================ Los pareos **no son una tabla**, y esto sustituye a la variante compacta que lo intentaba. Un emparejamiento es una unidad, no una fila de celdas que se comparen con las de al lado; y para anidar franja, píldora y dos mitades dentro de un `
` había que pelearse con el layout de tabla. La clasificación sí sigue siendo una ``: allí las nueve columnas se comparan **entre filas**, que es lo que hace tabular a una tabla. La forma es la misma en móvil y en escritorio; lo único que cambia es cuántas caben al lado. Y la ficha es la que reutilizará el cuadro del top, donde no hay tabla ninguna: por eso es un componente y no una media query. Cinco huecos, y cada uno resuelve algo que antes se apretaba: · franja arriba → «Mesa 4», y a la derecha la fecha cuando exista el agendado · dos mitades → nombre, corona del ganador y sus distintivos, con sitio · píldora central → el ESTADO de la mesa; el marcador es su forma más común · renglón de abajo → lo que el marcador no puede decir ============================================================================ */ .mtg-mesas { display: grid; gap: 0.5rem; margin-bottom: 1rem; } /* **`min-width: 0` en el elemento de la rejilla, o la pista crece con el nombre más largo.** El tamaño mínimo automático de un hijo de `grid` es su contenido mínimo, así que la columna se dimensionaba por la ficha peor: medido a 375 px, un grupo con «Bruno Gil Lopez» pedía **354 px de ficha en una pista de 309** y otro con nombres cortos se quedaba en 320. Es la misma trampa que ya está escrita para el nombre dentro de la ficha —sin `min-width: 0` un hijo flexible no baja de su ancho de contenido y el `ellipsis` no se activa nunca—, un nivel más arriba y en `grid` en vez de `flex`. Venía de antes de que los grupos tuvieran caja y **se cortaba contra el borde de la pantalla**, que es por lo que no se había visto: la ficha se salía 11 px del panel y el nombre del segundo jugador se iba con ella. Al meter cada grupo en su caja la ficha empezó a cruzar un borde dibujado y se vio a la primera. */ .mtg-mesas > li { min-width: 0; } .mtg-mesa { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: 0.35rem 0.6rem 0.45rem; /* Un toque no debe seleccionar el texto de dos fichas: el síntoma era una banda gris en varias a la vez. El nombre del jugador se deja seleccionable aparte. */ user-select: none; -webkit-tap-highlight-color: transparent; } /* Sin resultado: pide atención con el mismo velo del acento que el resto de la aplicación, no con una clase contextual de Bootstrap —esas fijan un fondo claro y dejan el texto del tema encima, ilegible en oscuro—. */ .mtg-mesa-pendiente { background: var(--mtg-atencion-fondo); } .mtg-mesa-franja { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin: 0 0 0.15rem; color: var(--bs-secondary-color); font-size: 0.75rem; } /* Aquí hubo un ⚠ del peligro de corregir una ronda cerrada, primero dentro de la píldora —donde el acento lo volvía invisible— y luego en la franja. Se quitó de las dos: era una señal **pasiva** en un sitio que el juez no está mirando. Ese peligro se cobra ahora donde ocurre, con una confirmación al elegir el marcador, y la píldora lo insinúa con `.mtg-mesa-marcador-cerrada`. */ .mtg-mesa-cuerpo { display: flex; align-items: center; gap: 0.4rem; } /* Las dos mitades reparten el ancho a partes iguales y **no crecen con el nombre**: `flex: 1 1 0` con `min-width: 0` es lo que mantiene la píldora centrada aunque un lado se llame «Lim-Dûl» y el otro «José María Fernández». Sin el `min-width` un nombre largo empuja a la píldora fuera del centro. */ .mtg-lado { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.35rem; border-radius: var(--bs-border-radius-sm); } .mtg-lado-derecho { justify-content: flex-end; text-align: right; } .mtg-lado-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* Copiar un nombre sí tiene sentido, así que este trozo escapa del `user-select` de la ficha. */ user-select: text; } /* ---- En móvil los dos nombres se apilan y la píldora se va al lado ---- **El nombre disponía de 74,7 px de los 375**, o sea el 20 % de la pantalla, y ahí entran 7-8 caracteres: «Alejandro Fernández» se quedaba en «Alejand…» y con «Bruno Gil Lago» en «Bruno G…». Lo señaló el organizador. La salida **no es bajar la letra**, y está medido: de 16 px a 12 —un 25 % menos— se compran **4 caracteres**, y de paso el nombre pasaría a ser lo más pequeño de la ficha, que es exactamente el error que ya se cometió en el cuadro impreso y hubo que deshacer. El problema no era el cuerpo de letra sino el reparto del ancho: en una fila, dos nombres y una píldora de 67 px se reparten 288. Apilados, cada nombre coge **el ancho entero menos la píldora**. Se hace con `grid` y colocación explícita, no con `flex-wrap`: la píldora tiene que ocupar **las dos filas** a la derecha —es el objetivo táctil y el estado de la mesa, así que sigue siendo lo primero que se ve y se toca— y eso una fila envuelta no lo da. Dos detalles que hacen falta: los dos lados se alinean **a la izquierda** (el derecho pierde su `flex-end`, que apilado dejaba un nombre a cada extremo y se leía como dos columnas), y va en `@media screen` porque al imprimir las media queries **miden la hoja** y allí la ficha se aplana a una línea por mesa. */ @media screen and (max-width: 767.98px) { .mtg-mesa-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 0.4rem; row-gap: 0.1rem; } .mtg-mesa-cuerpo > .mtg-lado { grid-column: 1; } .mtg-mesa-cuerpo > .mtg-lado-derecho { grid-row: 2; justify-content: flex-start; text-align: left; } .mtg-mesa-cuerpo > .mtg-mesa-marcador { grid-column: 2; grid-row: 1 / span 2; } } /* El ganador: **corona y negrita, sin velo de fondo**. El velo estuvo primero y se quitó por redundante — con la corona al lado, teñir además la mitad era decir lo mismo dos veces, y el amarillo pasó a significar «esto se pulsa», que es lo que hace la píldora. Sigue sin depender del color: la corona lleva un «gana» oculto y el marcador está ahí. */ .mtg-lado-gana { font-weight: 600; } /* El bye no tiene segundo lado. El hueco se deja vacío en lugar de estirar el primero: así las mitades siguen alineadas con las de las fichas de al lado en la rejilla. */ .mtg-lado-vacio { padding: 0; } .mtg-corona { flex: none; color: var(--mtg-acento); } /* La píldora. Fondo sólido y no un borde: es el ancla visual de la ficha. Tabular para que «2 : 1» y «10 : 8» no bailen de ancho entre fichas. **El amarillo significa una sola cosa: esto se pulsa.** Es la regla que hace que el juez no tenga que aprenderse nada — si está en acento, se puede tocar; si no, no—. Por eso la píldora va en acento **tanto sin marcador como con él**, mientras la mesa sea editable: antes una mesa resuelta se pintaba en gris y no había forma de saber que se podía corregir. Y por eso el ganador dejó de llevar velo: el amarillo ya estaba diciendo otra cosa. */ .mtg-mesa-marcador { flex: none; min-width: 4.2rem; padding: 0.2rem 0.5rem; border: 0; border-radius: var(--bs-border-radius-sm); background: var(--bs-tertiary-bg); color: var(--bs-body-color); font-variant-numeric: tabular-nums; font-weight: 600; text-align: center; white-space: nowrap; } button.mtg-mesa-marcador { position: relative; background: var(--mtg-acento); color: var(--mtg-acento-texto); } /* Bye o mesa bloqueada: **resaltada pero no amarilla**, porque su resultado no se puede cambiar. El relieve lo da el fondo terciario del tema, no un borde. La segunda regla es para una píldora que **sí es un botón pero no es editable**: se pulsa para saber por qué está bloqueada, no para cambiarla. Hace falta la especificidad de `button.…-fijo`, porque `button.mtg-mesa-marcador` pinta el acento y le gana a una clase sola — sin esto, una mesa bloqueada seguía saliendo amarilla y el amarillo mentía. */ .mtg-mesa-marcador-fijo { color: var(--bs-secondary-color); font-weight: 400; } button.mtg-mesa-marcador.mtg-mesa-marcador-fijo { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); cursor: help; } /* Ronda cerrada con pareos posteriores: **acento en contorno**. Sigue diciendo «esto se pulsa» —la regla del amarillo no cambia— pero se lee como «esto está cerrado, tocarlo es deliberado». Un relleno más fuerte habría dicho lo contrario. El contorno con `box-shadow` interior y no con `border`: un borde suma 2 px al alto de la píldora y con ella a la ficha, y la lista dejaría de tener fichas iguales. */ button.mtg-mesa-marcador-cerrada { background: transparent; color: var(--mtg-acento); box-shadow: inset 0 0 0 1px var(--mtg-acento); } /* ---- La hora de una mesa ---- Vive en el hueco derecho de la franja, que llevaba reservado y **vacío** desde que existe la ficha esperando al agendado. Es el mismo componente en las dos fichas —la de la fase de rondas y la del cuadro—, así que el estilo va una vez. **No va en acento**, y eso no contradice que el amarillo signifique «esto se pulsa»: la regla es que lo amarillo se pulsa, no que solo lo amarillo se pulse — la píldora de una mesa bloqueada ya era el precedente. Aquí además el acento pelearía con la píldora del resultado, que es la acción principal de la ficha; una franja de 12 px con dos amarillos no tendría jerarquía ninguna. Hereda el tamaño y el color de la franja: es un dato de la franja que además se pulsa. */ .mtg-mesa-hora { display: inline-flex; align-items: center; gap: 0.25rem; flex: none; padding: 0; border: 0; background: none; color: inherit; font: inherit; white-space: nowrap; } button.mtg-mesa-hora { position: relative; border-radius: var(--bs-border-radius-sm); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 0.2em; } /* Sin hora, el rótulo es «Agendar» y ahí sí conviene que se lea como una acción: el subrayado punteado solo, sobre dos palabras cortas, se pierde en una franja de 12 px. */ .mtg-mesa-hora-vacia { font-weight: 600; } button.mtg-mesa-hora:hover, button.mtg-mesa-hora:focus-visible { color: var(--bs-body-color); } /* Sin permiso o fuera de plazo: **el mismo sitio y el mismo dibujo, sin subrayado**. La hora se sigue viendo —es información del evento, igual que el número de mesa— y lo que desaparece es la forma de cambiarla. */ .mtg-mesa-hora-fija { text-decoration: none; } .mtg-icono-hora { width: 1em; height: 1em; /* La franja alinea por **línea base** y un SVG se apoya en ella, así que sin esto el icono queda montado sobre el texto. Es la misma corrección —y la misma cifra— que ya hizo falta en la celda de la medalla de la clasificación de liga y en `.mtg-icono-junto`. */ vertical-align: -0.1em; flex: none; } /* El objetivo táctil es **la píldora**, no la ficha entera: pulsar cualquier parte de la caja abría el diálogo y resultaba desconcertante. Pero una píldora de ~27 px no llega al mínimo de 44 px del dedo, así que en puntero grueso se **agranda el área sin agrandar la píldora**: el pseudo-elemento se sale por arriba y por abajo hacia el relleno de la ficha, donde no hay nada que pulsar —el centro de la franja está libre y los nombres van a los lados—. Así el dedo tiene sus 44 px y la ficha no crece. Con ratón no hace falta: 27 px se aciertan de sobra, y el rectángulo invisible solo sería una forma de robar clics. */ @media (pointer: coarse) { /* Crecía 9 px por los cuatro lados y **arriba ya no está libre**: desde que la franja tiene la hora, esa expansión se metía 2,6 px dentro de su objetivo táctil —medido— y en esa banda el dedo abría el diálogo del resultado en vez del del horario. Arriba se queda en 6, que deja 0,4 px de holgura y mantiene el objetivo en **45,4 px**, por encima del mínimo. El comentario de arriba decía «donde no hay nada que pulsar»; era verdad y dejó de serlo. */ button.mtg-mesa-marcador::after { content: ""; position: absolute; inset: -6px -0.25rem -9px; } /* La hora, con el mismo mecanismo: el área crece hacia el relleno de la ficha y hacia el hueco entre fichas, sin que la franja crezca. Si creciera, la ficha entera subiría ~20 px y en el cuadro se llevaría por delante las tres cifras medidas de su geometría (93,97 la ficha, 70,19 la casilla vacía). */ button.mtg-mesa-hora::after { content: ""; position: absolute; inset: -13px -0.35rem; } } /* ---- El puesto, y quién entra en el cuadro ---- El puesto en grande ocupando la línea, y a su izquierda «top» con la cifra debajo, en pequeño. Al ser pequeño no se confunde con el puesto, que es el número que manda. Sustituye a un velo de fondo en la fila y a un «top 4» debajo del número. El velo teñía media tabla, y la etiqueta debajo competía con el puesto por el mismo sitio. Dos señales que no se pisan: la **línea** dice dónde está el corte y la **etiqueta** dice quién entra. Hacen falta las dos porque con abandonos no coinciden — si el tercero abandonó, los cuatro de un top 4 llegan hasta el puesto 5, y él no lleva etiqueta. */ .mtg-puesto { display: inline-flex; align-items: center; gap: 0.3rem; } .mtg-puesto-numero { font-size: 1.15rem; font-weight: 600; line-height: 1; color: var(--bs-body-color); font-variant-numeric: tabular-nums; } .mtg-puesto-top { display: flex; flex-direction: column; align-items: center; padding: 0.1rem 0.25rem; border-radius: var(--bs-border-radius-sm); /* **Fondo opaco y no un velo**, exactamente por lo mismo que el chip de semilla: un velo hereda lo que haya debajo, y aquí debajo puede haber el velo de atención de una fila. Medido sobre el velo, el acento daba **4,09 en oscuro y 4,28 en claro** —por debajo del 4,5 de un texto normal, y esto además se lee a 8,8 px—; con fondo opaco, **6,33 y 5,64**. Quitarlo del todo también pasaría (5,47 y 5,01, el mismo salto que dio la corona al perder su velo), pero se queda sin la forma de chip y sigue dependiendo de lo que tenga debajo. Y esto no es adorno: es la señal que dice quién entra en el corte. */ background: var(--bs-tertiary-bg); color: var(--mtg-acento); font-size: 0.55rem; font-weight: 700; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.04em; } .mtg-puesto-top > span { font-size: 0.7rem; letter-spacing: 0; } /* La línea de corte: va **debajo del último que entra**, así que su sitio se calcula en el servidor y no se puede desfasar de la etiqueta. En acento y de 2 px para que se distinga de las divisiones normales de la tabla. */ .mtg-línea-de-corte > * { border-bottom: 2px solid var(--mtg-acento) !important; } /* La semilla delante del nombre, solo en el cuadro. Ancho fijo para que los números de una y de dos cifras no desalineen los nombres de una columna. */ .mtg-puesto-chip { flex: none; min-width: 1.35rem; padding: 0 0.2rem; border-radius: var(--bs-border-radius-sm); /* Fondo **opaco** y no un velo. Con velo, el chip hereda lo que haya debajo, y encima del velo de atención de una ficha sin jugar se quedaba en **3,85 de contraste** — medido. Un velo sobre otro velo no se puede razonar: el color depende de la pila entera. */ background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); font-size: 0.75rem; font-variant-numeric: tabular-nums; text-align: center; } /* ============================================================================ EL CUADRO ELIMINATORIO ============================================================================ Dos formas de la misma cosa, y el interruptor **no vuelve al servidor**: el marcado se pinta siempre por mitades y el CSS decide si van una detrás de otra (en línea) o enfrentadas con la final en medio (a dos lados). La preferencia la recuerda site.js en localStorage, como el tema. Las mesas de cada columna van **centradas frente al hueco entre las dos que las alimentan**, que es lo que hace legible el cruce: la semifinal aparece a media altura exacta entre sus dos cuartos. Sale de `justify-content: space-around` sobre una columna a la altura completa — sin trigonometría, y sobrevive a que una ficha crezca. Los **conectores** son pseudo-elementos con bordes, la técnica de referencia: sin SVG, sin posiciones absolutas y sin JavaScript. Dicen la **estructura** y van en neutro; el **resultado** lo dice la flecha del ganador, en acento. Separar las dos cosas es lo que evita un cuadro lleno de color donde no se distingue qué es dato y qué es adorno. ============================================================================ */ .mtg-cuadro-cabecera { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; } .mtg-cuadro { overflow-x: auto; padding-bottom: 0.5rem; } /* ---- Móvil: una sola columna, sin conectores ---- A 375 px no caben dos lados ni tres columnas, y unas líneas que no llevan a ninguna parte visible son peor que ninguna. **Y se lee como el cuadro doblado, no «por rondas».** El orden lo pidió el organizador el 24 de agosto de 2026, de arriba abajo: la mitad izquierda entera de fuera hacia dentro, la final —con el tercer y cuarto puesto si lo hay—, y la mitad derecha **de dentro hacia fuera**: Ronda de 32 · Ronda de 16 · Cuartos · Semifinales · **FINAL (+ 3.º y 4.º)** · Semifinales · Cuartos · Ronda de 16 · Ronda de 32 Así que **los rótulos repetidos son intencionados**: es el espejo, y cada mitad dice de qué ronda es. Este documento afirmaba lo contrario —que la repetición era el defecto y que había que agrupar por rondas— y era una conclusión nuestra, no suya; queda retirada. Lo que sí estaba mal es el **orden interno de la mitad derecha**, que salía de fuera hacia dentro (32, 16, cuartos, semis) en vez de al revés, y que el **tercer puesto caía al final de todo** en vez de junto a la final. Medido en `Cuadro top 32` a 375 px antes del arreglo: 9 rótulos con la mitad derecha del revés. */ .mtg-cuadro-mitad, .mtg-cuadro-columna { display: flex; flex-direction: column; } .mtg-cuadro-titulo { margin: 0 0 0.5rem; color: var(--bs-secondary-color); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .mtg-cuadro-mesas { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 1rem; } .mtg-cuadro-centro { margin-bottom: 1rem; } /* El partido por el tercer puesto, **fuera de la rejilla**: no forma parte de la llave, de él no sale ningún conector, y dentro de la columna central movería el punto medio de la final —que es donde apuntan los codos de las semifinales—. Ancho de una ficha del cuadro para que se lea como una más. */ .mtg-cuadro-tercero { margin-top: 1.5rem; max-width: 16rem; } /* ---- El espejo del móvil: la mitad derecha del revés y el tercer puesto junto a la final ---- El truco es **`display: contents` en el cuadro**, que en móvil no pierde nada —ahí no hay rejilla, ni conectores, ni scroll horizontal (medido: `scrollWidth == clientWidth == 375`)— y a cambio saca sus tres hijos al mismo contenedor flexible que el tercer puesto. Sin eso no hay forma de meterlo **entre** la final y la mitad derecha: vive fuera del cuadro a propósito, así que `order` no lo alcanzaría. Y vive fuera por un motivo que sigue vigente en escritorio y **que estas reglas no tocan**: dentro de la columna central movería el punto medio de la final, que es donde apuntan los codos de las semifinales. Los `order` van a partir de 1 porque **el valor por defecto es 0**: así la cabecera y el interruptor, que no lo declaran, se quedan delante sin tener que enumerarlos. La barra de acciones va detrás de todo. */ @media (max-width: 991.98px) { #mtg-cuadro-fragmento { display: flex; flex-direction: column; } .mtg-cuadro { display: contents; } .mtg-cuadro-mitad-a { order: 1; } .mtg-cuadro-centro { order: 2; } .mtg-cuadro-tercero { order: 3; } /* De dentro hacia fuera: semifinales, cuartos, ronda de 16, ronda de 32. Cada columna conserva su rótulo arriba, que es lo que hace legible el espejo. */ .mtg-cuadro-mitad-b { order: 4; flex-direction: column-reverse; } #mtg-cuadro-fragmento > mtg-barra-acciones, #mtg-cuadro-fragmento > .mtg-barra-acciones { order: 5; } } /* El interruptor de forma **no se ofrece en móvil**: ahí el cuadro es siempre una columna, así que pulsarlo no haría nada. Un control sin efecto es peor que su ausencia. */ [data-mtg-cuadro-forma] { display: none; } @media (min-width: 992px) { [data-mtg-cuadro-forma] { display: inline-block; } } .mtg-cuadro-pendiente { margin: 0; padding: 0.75rem; border: 1px dashed var(--bs-border-color); border-radius: var(--bs-border-radius); color: var(--bs-secondary-color); font-size: 0.85rem; } .mtg-cuadro-ganador { display: flex; align-items: center; gap: 0.35rem; margin: 0.5rem 0 0; padding: 0.5rem 0.75rem; border: 1px solid var(--mtg-acento); border-radius: var(--bs-border-radius); background: var(--mtg-atencion-fondo); } /* ============================================================================ LA FICHA DE UN CRUCE ============================================================================ Los dos jugadores **apilados** y cada uno con **su** marcador en el borde derecho, como en los cuadros oficiales. No es capricho: en una columna de cuadro —estrecha por construcción— la ficha horizontal dejaba el nombre en 15 px de los 32 que necesita. ============================================================================ */ .mtg-cruce { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); overflow: hidden; background: var(--bs-body-bg); user-select: none; -webkit-tap-highlight-color: transparent; } /* La franja del número de mesa, cruzando las dos columnas de la ficha. Misma forma que la de la fase de rondas: el número a la izquierda y el hueco de la fecha a la derecha, vacío hasta que exista el agendado. Cuesta 22 px de alto por ficha y se paga a cambio de que las dos fichas de la aplicación se lean igual. */ .mtg-cruce-franja { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 0.5rem; margin: 0; padding: 0.15rem 0.5rem; border-bottom: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); font-size: 0.75rem; } .mtg-cruce-pendiente { background: var(--mtg-atencion-fondo); } /* El hueco de un cruce sin decidir. Mismo tamaño que una ficha —el cuadro se pinta entero desde el corte, así que estas casillas son la mitad del cuadro durante casi todo el torneo— y en discontinuo, que dice «aquí falta algo» sin competir con el oro de lo que ya está decidido. */ .mtg-cruce-vacio { border-style: dashed; /* El color del borde **no** es el de un borde cualquiera: en una ficha vacía la línea es lo único que dice que ahí hay un hueco, así que es un gráfico con significado y se le piden 3:1. `--bs-border-color` daba **1,41 y 1,10** —medido, el mismo fallo que tuvieron los conectores—; con el color de texto secundario, 5,76 y 6,17. */ border-color: var(--bs-secondary-color); background: none; color: var(--bs-secondary-color); } /* Longhands, y no `border-style: dashed`. **`border-width` vale `medium` —3 px— por defecto** y solo computa a 0 cuando el estilo es `none`, así que el atajo resucitaba a 3 px los tres lados que nunca declararon anchura: la ficha vacía medía 73 px donde la de verdad mide 70, y el hueco cambiaba de forma al llenarse. Medido, no visto. */ .mtg-cruce-vacio .mtg-cruce-lado + .mtg-cruce-lado { border-top-style: dashed; border-top-color: var(--bs-secondary-color); } /* Quien ya se ganó el sitio se lee **con el color del cuerpo**, no atenuado como el resto del hueco. La ficha entera va apagada porque no hay nada que jugar, pero el nombre que ya se sabe es justamente el dato que se busca al acabar una mesa: apagarlo igual que «por decidir» lo escondía. */ .mtg-cruce-vacio .mtg-cruce-lado:not(.mtg-cruce-lado-vacio) .mtg-cruce-nombre { color: var(--bs-body-color); } /* La franja de un hueco vacío no lleva fondo: con él parecía una ficha de verdad a medio cargar. Y **solo el borde de abajo**, que es el único que declara anchura. Aquí volvió a morder lo de siempre: con `border-top-style` la franja resucitaba un borde superior de `medium` —3 px— y la ficha vacía medía 97 en vez de 94. Segunda vez en la misma sesión. */ .mtg-cruce-vacio .mtg-cruce-franja { border-bottom-style: dashed; border-bottom-color: var(--bs-secondary-color); background: none; } .mtg-cruce-vacio .mtg-cruce-marcador { border-left-style: dashed; border-left-color: var(--bs-secondary-color); } .mtg-cruce-vacio .mtg-cruce-marcador { background: none; } /* La final pesa más que un cuartos, y hasta ahora no: todas las cajas eran iguales y eso era media razón de que el cuadro pareciera soso. */ .mtg-cruce-final { border-color: var(--mtg-acento); box-shadow: 0 0 0 1px var(--mtg-acento); } .mtg-cruce-lados { display: flex; flex-direction: column; min-width: 0; } .mtg-cruce-lado { display: flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.5rem; min-width: 0; min-height: 2rem; } .mtg-cruce-lado + .mtg-cruce-lado { border-top: 1px solid var(--bs-border-color); } /* ---- Quien pasa se lleva su fila entera ---- Y esto **devuelve al acento su único significado**, que es lo que estaba mal antes: la caja de marcador decía a la vez «se pulsa» y «ganó éste», y por eso se leía turbia. Ahora cada objeto dice una cosa — la caja, que se pulsa; la fila, quién ganó. El premio no era el objetivo y es lo mejor del cambio: la fila del ganador, la línea que sale de ella y la caja de la ronda siguiente quedan todas en oro y **seguidas**, así que el camino del campeón se lee como un hilo continuo por todo el cuadro. Un mismo idioma en vez de tres marcas distintas. Cuarto intento y van tres descartados por sutiles: un triangulito `▸` al final de la línea (se perdía), una barra de acento de 3 px al principio (no gustó) y la cifra sola (no se veía). El patrón estaba claro. */ .mtg-cruce-gana { background: var(--mtg-acento); color: var(--mtg-acento-texto); font-weight: 600; } /* El chip de semilla sobre fila dorada. Se compone **con** el acento y no con un velo encima: así el color resultante es opaco por construcción y se puede medir, que es la lección de las dos capas translúcidas. Y se mezcla con `--bs-body-color`, no con `--mtg-acento-texto`, aunque el segundo parezca lo natural: el texto del chip **es** `--mtg-acento-texto`, así que acercar el fondo a ese color resta contraste en los dos temas. Medido: daba 4,04 en claro. `--bs-body-color` es justo el contrario del texto del acento en ambos temas —claro donde el otro es oscuro—, así que separa en vez de juntar, sin necesidad de un valor por tema. */ .mtg-cruce-gana .mtg-puesto-chip { background: color-mix(in srgb, var(--bs-body-color) 18%, var(--mtg-acento)); color: var(--mtg-acento-texto); } /* De qué grupo viene el jugador, dentro del chip del puesto: `1 G4`. **Se quita al imprimir** —ver el bloque de impresión—, porque en papel la columna de un top 32 mide 28 mm y el chip ya se lleva 14 px de los 111: doblarlo se comería el nombre, que es el dato. En pantalla no hay ese problema. */ .mtg-puesto-grupo { font-weight: 400; } .mtg-cruce-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: text; } /* La corona del campeón dentro de la final: ahí no hay dónde pasar, así que en vez de la marca de «avanza» va la corona. El `color: inherit` no es cosmética: la corona se pinta con `currentColor` y por defecto lleva el acento, así que sobre la fila dorada del ganador quedaba **oro sobre oro — invisible**, con 1,00 de contraste medido. Y una corona que no se ve no da error: el SVG carga perfectamente. Sobre la fila del ganador tiene que ir en el color de esa fila, como el nombre. */ .mtg-cruce .mtg-corona { margin-left: auto; color: inherit; } .mtg-cruce-lado-vacio { color: var(--bs-secondary-color); font-style: italic; } /* ---- El marcador: la caja entera dice «esto se pulsa» ---- Dos celdas en el borde derecho, cada una alineada con su jugador, y **un solo botón** aunque enseñe dos cifras. Va en acento **si es editable**, con resultado y sin él, que es la misma regla que la píldora de la fase de rondas: el amarillo significa una cosa en toda la aplicación. Aquí hubo una excepción declarada —acento por resultado, la cifra del ganador dorada y la del perdedor oscura— y **se ha retirado**: quien gana se marca en su fila, así que la caja ya no tiene que decir dos cosas. */ .mtg-cruce-marcador { display: grid; grid-template-rows: 1fr 1fr; align-self: stretch; min-width: 2.2rem; border: 0; border-left: 1px solid var(--bs-border-color); background: var(--mtg-acento); color: var(--mtg-acento-texto); font-variant-numeric: tabular-nums; font-weight: 700; } .mtg-cruce-marcador > span { display: flex; align-items: center; justify-content: center; padding: 0 0.4rem; } /* El separador entre las dos cifras, sobre el acento: sin él las dos cifras de un `2 1` se leen como un número de dos dígitos. */ .mtg-cruce-marcador > span + span { border-top: 1px solid color-mix(in srgb, var(--mtg-acento-texto) 25%, transparent); } /* Lo que **no** se puede pulsar —un bye, una mesa bloqueada por abandono, un torneo terminado— va resaltado pero **no amarillo**, igual que en la fase de rondas. Y el marcador se lee con el color del cuerpo, no con el secundario: es un dato, no una anotación. */ .mtg-cruce-marcador-fijo { background: var(--bs-tertiary-bg); color: var(--bs-body-color); } /* Y con la misma especificidad que en la fase de rondas, por el mismo motivo: una mesa del cuadro bloqueada **es un botón** —se pulsa para saber por qué— pero no puede salir en acento, que significa «esto se puede cambiar». `button.mtg-cruce-marcador` le ganaría a la clase sola. */ button.mtg-cruce-marcador.mtg-cruce-marcador-fijo { background: var(--bs-tertiary-bg); color: var(--bs-body-color); cursor: help; } button.mtg-cruce-marcador.mtg-cruce-marcador-fijo > span + span { border-top-color: var(--bs-border-color); } .mtg-cruce-marcador-fijo > span + span { border-top-color: var(--bs-border-color); } button.mtg-cruce-marcador { cursor: pointer; } button.mtg-cruce-marcador:hover, button.mtg-cruce-marcador:focus-visible { box-shadow: inset 0 0 0 2px var(--mtg-acento-vivo); } .mtg-cruce-nota { grid-column: 1 / -1; margin: 0; padding: 0.2rem 0.5rem 0.3rem; border-top: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); font-size: 0.75rem; text-align: center; } /* ---- El objetivo táctil, igual que en la fase de rondas ---- La caja de marcador mide ~64 px de alto en total pero cada celda ~32, y lo que se pulsa es el botón entero, así que ya pasa de 44. No hace falta agrandar nada. */ /* ============================================================================ ESCRITORIO: LAS DOS FORMAS ============================================================================ `print` en la lista de medios, y no es un adorno: **al imprimir, las media queries miden la hoja**, no la ventana. Un A4 vertical son ~700 px de CSS y un horizontal ~1050, así que dejando esto solo en `min-width: 992px` la impresión salía **en la forma de una columna** — seis hojas de un top 32 con las mesas apiladas—. Lo descubrió el organizador imprimiendo, no yo, y le pasó dos veces porque la primera lo tapé con un zoom que iba por otro lado. Con `print` en la lista, en papel se aplica siempre la forma de escritorio y el ancho de la hoja deja de decidir la maqueta. Es la misma lección que arriba con las tablas, del revés: el modo ficha es **de pantalla** (`@media screen and (max-width: …)`) y esto es **de pantalla ancha y de papel**. */ @media print, (min-width: 992px) { /* ---- Cada mesa ocupa un hueco de altura igual ---- Es lo que hace que los conectores sean exactos sin una sola cuenta, y sustituye a un `justify-content: space-around` que los rompía. El razonamiento: Una columna con la mitad de mesas que la anterior reparte la misma altura entre la mitad de huecos, así que **el hueco de una mesa cubre exactamente los dos huecos de las mesas que la alimentan**. Su centro cae en la frontera entre esos dos, que es justo el punto medio de la pareja. Con eso, el codo mide `50%` **del hueco** y siempre acierta. Antes medía 50% de la ficha, que solo coincide en la primera columna: medido en un top 32, el codo necesitaba 39, 78 y 157 px por ronda y media siempre 39. De ahí las líneas cortadas. El aire entre fichas lo da el relleno del hueco, no un `gap`: un `gap` restaría altura al reparto y descuadraría el 50%. */ .mtg-cuadro-mesas { flex: 1 1 auto; gap: 0; margin-bottom: 0; } .mtg-cuadro-hueco { flex: 1 1 0; display: flex; align-items: center; padding: 0.25rem 0; } /* **La ficha llena su hueco a lo ancho**, y esto no es estética: el codo sale de `left: 100%` del hueco, así que si la ficha no llega al borde, la línea arranca en el aire. Medido en un top 32: hueco de 256 px, ficha de 104 → el conector nacía **152 px** a la derecha de la caja de la que decía salir y aterrizaba pegado a la columna siguiente, sin tocar nada. Un flex hijo se queda en su ancho de contenido por defecto, y con nombres cortos («J04») eso es un tercio de la columna. */ .mtg-cuadro-hueco > .mtg-cruce { flex: 1 1 auto; min-width: 0; } .mtg-cuadro-columna { flex: 0 0 16rem; min-width: 16rem; } /* La final es **una columna más**: su rótulo arriba, en la misma línea que «SEMIFINALES» y «CUARTOS DE FINAL». Antes el bloque centraba todo su contenido en vertical y el rótulo bajaba con la ficha, así que la final era la única ronda sin título visible arriba. La ficha se centra sola en lo que queda, con márgenes automáticos. */ .mtg-cuadro-centro { display: flex; flex-direction: column; flex: 0 0 16rem; min-width: 16rem; margin-bottom: 0; } .mtg-cuadro-centro > .mtg-cruce, .mtg-cuadro-centro > .mtg-cuadro-pendiente { margin-block: auto; } /* ---- En línea: todas las rondas de izquierda a derecha ---- Las dos mitades se disuelven con `display: contents` y cada columna se coloca en su ronda con `grid-column`, así que la mitad A y la mitad B de la misma ronda caen en la misma columna, una encima de otra. Es exactamente el orden de un cuadro en línea, y sale del mismo marcado que la forma a dos lados. **Los rótulos son una fila propia de la rejilla** (`auto`), no un trozo del alto de cada columna, y eso no es maquetación: es lo que hace exacto el conector de la última columna. Con el rótulo dentro, la zona de contenido de la mitad A empezaba media cabecera más abajo que la de la final, y el codo de la semifinal se quedaba corto por **media altura de rótulo** — la línea moría a media calle antes de llegar a la final. Sacándolo, las tres zonas arrancan a la misma altura y el `50%` del hueco vuelve a acertar sin una sola cuenta, igual que en el resto del cuadro. Las columnas lo consiguen con `subgrid`: heredan la fila del rótulo y la de su contenido de la rejilla de arriba. */ .mtg-cuadro[data-mtg-cuadro="linea"] { display: grid; grid-template-rows: auto 1fr 1fr; gap: 0 1.5rem; align-items: stretch; } .mtg-cuadro[data-mtg-cuadro="linea"] .mtg-cuadro-mitad { display: contents; } .mtg-cuadro[data-mtg-cuadro="linea"] .mtg-cuadro-columna { grid-column: var(--ronda); } /* La mitad de arriba ocupa la fila del rótulo y la suya. */ .mtg-cuadro[data-mtg-cuadro="linea"] .mtg-cuadro-mitad-a .mtg-cuadro-columna { display: grid; grid-template-rows: subgrid; grid-row: 1 / 3; } .mtg-cuadro[data-mtg-cuadro="linea"] .mtg-cuadro-mitad-b .mtg-cuadro-columna { grid-row: 3; } /* El rótulo de ronda solo una vez: en la mitad de abajo sería el mismo repetido. Va con `display: none` y no con `visibility: hidden`, que seguía **ocupando** el alto de una cabecera dentro de la fila de la mitad B y desigualaba las dos mitades. */ .mtg-cuadro[data-mtg-cuadro="linea"] .mtg-cuadro-mitad-b .mtg-cuadro-titulo { display: none; } /* La final: rótulo en la fila de rótulos y ficha centrada en las dos filas de las mitades, que es exactamente el punto medio de las dos semifinales. */ .mtg-cuadro[data-mtg-cuadro="linea"] .mtg-cuadro-centro { display: grid; grid-template-rows: subgrid; grid-column: var(--ronda); grid-row: 1 / -1; } .mtg-cuadro[data-mtg-cuadro="linea"] .mtg-cuadro-centro > .mtg-cruce, .mtg-cuadro[data-mtg-cuadro="linea"] .mtg-cuadro-centro > .mtg-cuadro-pendiente { grid-row: 2 / 4; } /* ---- A dos lados: la final en el centro ---- La mitad B se dibuja en espejo, así que su cuadro «crece» hacia el centro. Reduce el ancho a la mitad, que es lo que hace legible un top 16 o 32. */ .mtg-cuadro[data-mtg-cuadro="doslados"] { display: flex; gap: 1.5rem; align-items: stretch; } .mtg-cuadro[data-mtg-cuadro="doslados"] .mtg-cuadro-mitad { display: flex; flex-direction: row; gap: 1.5rem; } .mtg-cuadro[data-mtg-cuadro="doslados"] .mtg-cuadro-mitad-b { flex-direction: row-reverse; } /* En espejo, el marcador va al borde izquierdo y la flecha apunta hacia el centro. */ .mtg-cuadro[data-mtg-cuadro="doslados"] .mtg-cuadro-mitad-b .mtg-cruce { grid-template-columns: auto minmax(0, 1fr); } .mtg-cuadro[data-mtg-cuadro="doslados"] .mtg-cuadro-mitad-b .mtg-cruce-lados { grid-column: 2; } /* `grid-row: 2` y no 1: la fila 1 es la franja del número de mesa. Con el 1 heredado de antes de la franja, el marcador se metía en la fila de la franja y la ficha del espejo pasaba de 94 a 146 px de alto — medido. */ .mtg-cuadro[data-mtg-cuadro="doslados"] .mtg-cuadro-mitad-b .mtg-cruce-marcador { grid-column: 1; grid-row: 2; border-left: 0; border-right: 1px solid var(--bs-border-color); } /* En espejo el número de mesa va también al otro lado, para que quede en el borde de arranque. */ .mtg-cuadro[data-mtg-cuadro="doslados"] .mtg-cuadro-mitad-b .mtg-cruce-franja { flex-direction: row-reverse; } .mtg-cuadro[data-mtg-cuadro="doslados"] .mtg-cuadro-mitad-b button.mtg-cruce-marcador { border-right-color: var(--mtg-acento); } /* Aquí iba la barra del que pasa por el borde derecho, para la mitad en espejo. Sobra desde que la fila entera va en acento: un relleno no tiene lado. */ .mtg-cuadro[data-mtg-cuadro="doslados"] .mtg-cuadro-mitad-b .mtg-cruce .mtg-corona { margin: 0 auto 0 0; } /* ---- Los conectores ---- Un codo por mesa, dibujado con **dos bordes de una sola caja**: `border-top` traza el tramo horizontal que sale del centro de la ficha y `border-right` baja por el extremo hasta el punto medio de la pareja. La mesa de abajo hace el espejo vertical (`border-bottom` + `border-right`), así que las dos juntas forman la llave completa. Y la mesa de la ronda siguiente pone su propio **tramo de entrada** con `::before`, que es lo que cierra el hueco: sin él la llave moría a media calle. Se vio midiendo — la vertical llegaba al punto medio correcto y se quedaba a 12 px de la ficha siguiente. Pseudo-elementos y bordes: sin SVG, sin JavaScript y sin geometría calculada. La altura del codo es `50% + medio hueco`, que es exactamente la distancia del centro de la ficha al punto medio de su pareja. El color es el del texto secundario y no `--bs-border-color`: ese daba **1,41 de contraste** —medido— y una línea que no se ve no hace legible nada. Un conector es un gráfico con significado, así que se le pide 3:1; así pasa de 5,7. Y sigue siendo neutro porque el acento está reservado a la flecha del que pasa: la línea dice la estructura, el color dice el resultado. */ /* El color de la línea es **una variable en el hueco**, no un `border-color` en el pseudo-elemento, y eso no es estilo: es lo único que funciona. Los tramos del codo se declaran con los atajos `border-top` / `border-right` / `border-bottom`, que llevan el color dentro, y sus selectores —`.mtg-cuadro-mitad .mtg-cuadro-hueco:nth-child(odd)::after`— son más específicos que cualquier `.mtg-hilo-ganador::after`. El resultado, medido: la vertical del ganador salía en oro y **el brazo horizontal que sale de su ficha seguía gris**, y la línea de la semifinal a la final —que es solo brazo— salía gris entera. Con la variable la cascada se resuelve en el hueco y ya no hay carrera de especificidad. */ .mtg-cuadro-hueco { position: relative; --mtg-hilo: var(--bs-secondary-color); } .mtg-cuadro-hueco.mtg-hilo-ganador { --mtg-hilo: var(--mtg-acento); } /* **Todas** las mesas de una mitad sacan su codo, incluida la última columna: su destino es la final, que vive fuera de la mitad. Esto llevaba `:not(:last-child)` y el resultado fue que las semifinales se quedaban sin conectar con la final — se vio en pantalla, no compilando. Y no hace falta excluir la final: no está dentro de ninguna mitad, así que esta regla no la alcanza. */ .mtg-cuadro-mitad .mtg-cuadro-hueco::after { content: ""; position: absolute; left: 100%; width: 0.75rem; /* 50% **del hueco**, no de la ficha: el hueco cubre a las dos mesas alimentadoras, así que la mitad de su altura es exactamente la distancia de su centro al punto medio. */ height: 50%; border-right: 2px solid var(--mtg-hilo); } .mtg-cuadro-mitad .mtg-cuadro-hueco:nth-child(odd)::after { top: 50%; border-top: 2px solid var(--mtg-hilo); } .mtg-cuadro-mitad .mtg-cuadro-hueco:nth-child(even)::after { bottom: 50%; border-bottom: 2px solid var(--mtg-hilo); } /* Una columna con **una sola mesa** —la última de cada mitad— no forma pareja con nadie, y a dónde apunta su codo depende de la forma del cuadro: - **A dos lados** la final está a su misma altura, así que es solo el tramo horizontal. Sin esto, la vertical de una semifinal única apuntaba a un sitio donde no hay nada. - **En línea** la final está en el medio de las dos mitades, así que hace falta codo de verdad: la mitad de arriba baja y la de abajo sube. Esta regla se aplicaba en las dos formas, y en línea era la causa de que la línea de la semifinal saliera recta y muriera en el aire a media distancia de la final. La mitad de arriba ya lo hace bien con la regla general —es hija única, luego también impar—; la de abajo necesita el espejo vertical, y va justo debajo. */ .mtg-cuadro[data-mtg-cuadro="doslados"] .mtg-cuadro-mitad .mtg-cuadro-hueco:only-child::after { height: 0; border-right: 0; border-bottom: 0; top: 50%; bottom: auto; border-top: 2px solid var(--mtg-hilo); } /* En línea, la semifinal de la mitad de abajo tiene la final **encima**, así que su codo sube. Es hija única y por tanto impar, así que la regla general la manda hacia abajo: aquí se le da la vuelta. */ .mtg-cuadro[data-mtg-cuadro="linea"] .mtg-cuadro-mitad-b .mtg-cuadro-hueco:only-child::after { top: auto; bottom: 50%; border-top: 0; border-bottom: 2px solid var(--mtg-hilo); } /* ---- El hilo del que pasa ---- La línea que sale de una mesa **resuelta** va en acento, así que el recorrido del torneo se dibuja en oro a medida que se juega y lo que queda por jugar se queda en gris. La clase la pone el servidor mirando quién ganó, no un `:has()`: así la regla es la misma que decide el campeón. El tramo de entrada de una mesa va siempre en acento porque **una mesa solo existe cuando sus dos alimentadoras se resolvieron** — emparejar la ronda siguiente es lo que la crea—, de modo que su línea de entrada siempre forma parte de un camino ya decidido. Por eso el `::before` lleva el acento directamente y no `--mtg-hilo`: no depende de quién ganó **esta** mesa. Aquí había una lista de selectores con `border-color` que no pintaba nada: los tramos se declaran más abajo con atajos `border-*` de la misma especificidad y, al ir después, ganaban. Un `border-color` puesto antes de un `border-top` es como no ponerlo. */ /* ---- El camino de un jugador ---- Idea tomada de Tolaria: al pulsar a alguien se resalta **todo su recorrido** por el cuadro, que es la pregunta que uno se hace mirando un top 32. Se atenúa lo demás en lugar de encender lo suyo: encender competiría con el acento, que ya significa otras dos cosas aquí. */ .mtg-cuadro-siguiendo .mtg-cruce { opacity: 0.45; transition: opacity 0.12s ease-in-out; } .mtg-cuadro-siguiendo .mtg-cruce:has(.mtg-cruce-seguido) { opacity: 1; } /* El tramo de entrada de la ronda siguiente. */ .mtg-cuadro-columna:not(:first-child) .mtg-cuadro-hueco::before, .mtg-cuadro-centro .mtg-cruce::before { content: ""; position: absolute; top: 50%; right: 100%; width: 0.75rem; border-top: 2px solid var(--mtg-acento); } .mtg-cuadro-centro .mtg-cruce { position: relative; } /* ---- En espejo, todo por el otro lado ---- **Acotado a `doslados`**, y eso era un fallo: sin el acotado, la mitad B sacaba sus conectores por la izquierda también en la forma en línea, donde las dos mitades fluyen hacia la derecha. El resultado eran líneas apuntando hacia fuera del cuadro en la mitad de abajo. */ .mtg-cuadro[data-mtg-cuadro="doslados"] .mtg-cuadro-mitad-b .mtg-cuadro-hueco::after { left: auto; right: 100%; border-right: 0; border-left: 2px solid var(--mtg-hilo); } .mtg-cuadro[data-mtg-cuadro="doslados"] .mtg-cuadro-mitad-b .mtg-cuadro-hueco:only-child::after { border-left: 0; } .mtg-cuadro[data-mtg-cuadro="doslados"] .mtg-cuadro-mitad-b .mtg-cuadro-columna:not(:first-child) .mtg-cuadro-hueco::before { right: auto; left: 100%; } /* La final recibe por los dos lados cuando el cuadro va a dos lados, y solo por la izquierda cuando va en línea. */ .mtg-cuadro[data-mtg-cuadro="doslados"] .mtg-cuadro-centro .mtg-cruce::after { content: ""; position: absolute; top: 50%; left: 100%; width: 0.75rem; border-top: 2px solid var(--mtg-acento); } } .mtg-mesa-explicacion { margin: 0.15rem 0 0; color: var(--bs-secondary-color); font-size: 0.8rem; text-align: center; } /* Dos por fila desde 992 px y tres desde 1400. Es lo que la pestaña a todo el ancho hace posible: a media pantalla no cabían. */ @media (min-width: 992px) { .mtg-mesas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1400px) { .mtg-mesas { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---- Los botones de marcador del diálogo de resultado ---- Altura generosa **en ratón y en táctil**, no solo con puntero grueso. Aquí no se aplica el criterio de las tablas densas: el diálogo existe para tomar UNA decisión y hay pantalla de sobra, así que no hay nada que apretar. Medidos en 38 px con los tamaños por defecto de Bootstrap, que para el gesto más repetido de la aplicación —quince veces por ronda— es poco. */ .mtg-boton-marcador { min-height: 3.25rem; font-size: 1.15rem; font-weight: 600; } /* ============================================================================ Tablas que se convierten en fichas en pantalla estrecha ============================================================================ El HTML sigue siendo una `
`, que es lo correcto para una tabla: se lee igual con un lector de pantalla y no hay marcado duplicado. Lo que cambia por debajo del punto de ruptura es cómo se dibuja cada fila. El motivo, medido en un viewport de 390 px con la clasificación: ocho columnas necesitaban 421 px y solo había 366, así que las filas se partían y crecían a 81 px de alto. Y con un nombre real —«Sin Yuanes No Hay Paraíso»— hacían falta 548: no es que sobre una columna, es que **una tabla de ocho columnas no es el formato de un móvil**. Quitar la columna redundante dejaba la tabla todavía 84 px corta. Cómo se usa: `mtg-tabla-fichas` en la tabla, `data-ficha-titulo` en la celda que manda —el nombre— y `data-etiqueta` en las que necesitan que se diga qué son, porque la cabecera deja de estar. Nada depende del orden ni del número de columnas: la fila de la ronda pierde una en solo lectura y sigue funcionando. ============================================================================ */ /* **Una tabla no repinta la superficie sobre la que se apoya.** Bootstrap pinta cada celda con `--bs-table-bg`, que en tema oscuro es `#212529` — más oscuro que el panel de la fase (`#343a40`)—, y en modo ficha cada celda es un bloque: el resultado eran rectángulos negros sobre el panel. Transparente, el panel se ve a través y la ficha es una pieza y no un mosaico. El velo de «pide atención» sigue mandando, porque su regla es más específica. */ .mtg-tabla-fichas { --bs-table-bg: transparent; } /* Ni el ordinal ni el menú de acciones son texto que alguien quiera copiar, y en táctil un toque sobre ellos puede iniciar una **selección de texto** que se extiende por la ficha y por la de al lado: parece que al pulsar los tres puntos «se selecciona más de los tres puntos». Que haya banda en dos filas a la vez es justo lo que descarta un estado del botón, porque solo un elemento puede estar pulsado. */ .mtg-tabla-fichas td[data-ficha-orden], .mtg-tabla-fichas td[data-ficha-acciones] { user-select: none; -webkit-tap-highlight-color: transparent; } /* Y en un puntero sin hover, `:hover` **se queda pegado** tras el toque: con `table-hover` la fila se queda teñida hasta que se toca otra cosa. En modo ficha cada celda es un bloque, así que eso se ve como una banda y no como el resaltado de una fila. */ @media (hover: none) { .mtg-tabla-fichas { --bs-table-hover-bg: transparent; } } @media screen and (max-width: 767.98px) { .mtg-tabla-fichas { /* Los huecos de las dos esquinas, en un sitio. El de la derecha tiene que dar para el valor destacado más su unidad —«15 pts»— sin pisar el nombre. */ --mtg-hueco-orden: 2.1rem; --mtg-hueco-destacado: 5.5rem; } .mtg-tabla-fichas thead { /* `clip` y no `display: none`: la cabecera sigue existiendo para el lector de pantalla, que la usa para anunciar cada celda. */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .mtg-tabla-fichas, .mtg-tabla-fichas tbody, .mtg-tabla-fichas tbody tr, .mtg-tabla-fichas tbody td { display: block; width: auto; } .mtg-tabla-fichas tbody tr { /* Las dos esquinas —el ordinal y el dato destacado— van en posición absoluta, y el nombre ocupa una línea entera. Así la ficha tiene una estructura fija: arriba quién es, debajo sus cifras, y **no depende del orden ni del número de columnas**. Con flex a secas el orden de las celdas decidía dónde caía cada cosa. */ position: relative; display: flex; flex-wrap: wrap; align-items: baseline; /* El hueco horizontal es justo el que cabe: con 0,85 rem las cinco cifras de la clasificación se iban a dos líneas en un móvil de 390 px y la ficha crecía de 71 a 94 px — en una tabla de 22 jugadores, media pantalla de más. Cada cifra lleva su etiqueta, así que no necesita tanto aire para distinguirse de la de al lado. */ gap: 0.15rem 0.6rem; padding: 0.7rem 0.25rem; padding-left: var(--mtg-hueco-orden); border-bottom: 1px solid var(--bs-border-color); } /* El hueco del ordinal se reserva **solo si hay ordinal**. La tabla de preinscritos no lo tiene —no existe: el orden de inscripción se asigna al confirmar— y sin esto el nombre salía sangrado 34 px contra un hueco vacío, que a 375 px es una décima parte del ancho y se la come el nombre. `:has()` y no una clase en el marcado: quien sabe si hay ordinal es la propia fila, y una clase paralela se puede olvidar el día que se añada una tabla nueva. */ .mtg-tabla-fichas tbody tr:not(:has(td[data-ficha-orden])) { padding-left: 0.25rem; } /* El ordinal —el puesto, el número de mesa— en la esquina de arriba a la izquierda. */ .mtg-tabla-fichas tbody td[data-ficha-orden] { position: absolute; left: 0.25rem; top: 0.75rem; width: calc(var(--mtg-hueco-orden) - 0.5rem); text-align: end !important; color: var(--bs-secondary-color); } /* ---- La etiqueta del corte, en la esquina del ordinal ---- En escritorio va **a la izquierda del puesto**, en fila. En una ficha de móvil no cabe: el hueco del ordinal es una caja en absoluto de 1,6 rem dimensionada para un número de dos cifras, y la fila «top 32 · 15» se salía por la derecha **encima del nombre**. Se vio en pantalla, no midiendo, y la lección es que un cambio visual se prueba en los dos tamaños: esto entró con el Top Cut verificando solo escritorio. Se apila —el puesto arriba, la etiqueta debajo— y el hueco se ensancha **solo cuando hay etiqueta**, con `:has()`: ensancharlo siempre indentaría también el plantel y las demás tablas de ficha, que no la llevan. */ .mtg-tabla-fichas:has(.mtg-puesto-top) { --mtg-hueco-orden: 2.9rem; } /* `column` y no `column-reverse`: **el orden del marcado ya no es el mismo en las dos tablas**. En la de un torneo el chip va antes del número (celda alineada a la derecha, el chip cabe a su izquierda); en la de una liga va después, porque ahí la celda alinea a la izquierda y el chip delante empujaba el número de las filas del corte y los puestos dejaban de estar en columna. Con `column` manda el orden de cada marcado y las dos quedan igual en ficha —número arriba, etiqueta debajo—, que es lo que hay que conservar: apiladas caben en el hueco del ordinal, y en fila la etiqueta se salía por la derecha **encima del nombre**. */ /* `center` y no `flex-end`: apilados, el número y el chip tienen anchos muy distintos —10 px contra 26 medidos— y alineándolos a la derecha el número quedaba colgando de una esquina del chip en vez de encima de él. Centrados se leen como una unidad. Lo vio el organizador en pantalla. */ .mtg-tabla-fichas .mtg-puesto { flex-direction: column; align-items: center; gap: 0.15rem; } /* ---- Lo que solo tiene sentido como tabla ---- El desglose por jornada de una liga vive aquí: en escritorio son doce columnas que se leen en vertical, y en una ficha serían doce bloques sueltos compitiendo con el nombre y los puntos. Se probó antes a esconder solo las jornadas no jugadas y seguía siendo demasiado. En la ficha se conserva **el resumen que decide**: el medallero y las jornadas jugadas. El detalle de qué hizo cada día es una consulta de escritorio. */ .mtg-tabla-fichas .mtg-solo-tabla { display: none; } /* Aquí vivía una regla que escondía las medallas a cero en ficha. **Se quitó**: el efecto era el contrario del buscado, porque cada ficha acababa con un número distinto de elementos y la lista se veía descuadrada. Ahora salen las tres siempre y el cero va apagado — la estructura manda sobre el ahorro de tinta. `mtg-celda-vacia` se conserva para las columnas de jornada, que sí desaparecen. */ .mtg-tabla-fichas td.mtg-celda-vacia { display: none; } /* ---- En ficha, «jornadas N» va ANTES que las medallas ---- En la tabla el orden de las columnas es el del desempate —puntos, medallas, jornadas—, y ahí tiene sentido porque las cabeceras lo explican. En una ficha no hay cabeceras y sí un efecto molesto: las medallas aparecen o no según el jugador, así que con ellas delante **«jornadas 4» cambiaba de sitio en cada fila** y la lista parecía descuadrada. Lo vio el organizador. Con las medallas al final, el dato fijo está siempre en el mismo punto y lo variable se acumula detrás. Se hace con `order` y no reordenando el marcado, para no cambiar la tabla de escritorio. */ .mtg-tabla-fichas td.mtg-celda-medalla { order: 1; } /* ---- Que «jornadas 4» quede a la misma altura que las medallas ---- La fila alinea sus celdas por **línea base**, y una medalla es un `inline-flex` con un SVG dentro: a 1,1 em su caja crecía a 26,8 px contra los 20,4 del texto, así que «jornadas» caía **4,8 px más abajo** que los iconos de al lado. Lo vio el organizador; medido, el desfase entre centros era de casi 2 px y el de los bordes, de 4,8. Con el icono a 1 em y la medalla alineada por el medio, el desfase baja a 0,8 px. No se toca el `align-items` de la fila: eso reordenaría también el nombre y el resto de tablas de ficha. */ .mtg-tabla-fichas .mtg-medalla { vertical-align: middle; } .mtg-tabla-fichas .mtg-medalla-icono { width: 1em; height: 1em; } /* El botón del detalle sí crece: es lo único que se pulsa de la ficha, así que su icono va a 1,35 rem —el mismo tamaño que los de la barra de acciones— en lugar de heredar el de la medalla, que está dimensionado para acompañar a una cifra. El objetivo táctil ya eran 44 px de alto; esto hace que se **vea** tan grande como es. */ .mtg-tabla-fichas .mtg-ver-jornadas .mtg-medalla-icono { width: 1.35rem; height: 1.35rem; } /* El torneo pinta el chip **antes** que el número, así que en ficha hay que darle la vuelta para que el puesto quede arriba. La liga ya lo pinta después y no necesita nada. */ .mtg-tabla-fichas .mtg-puesto:has(> .mtg-puesto-top:first-child) { flex-direction: column-reverse; } /* El dato que manda —los puntos, el marcador— grande y en la esquina derecha. Alineado ahí abajo se lee en columna al recorrer la lista, que es como se busca a alguien. */ .mtg-tabla-fichas tbody td[data-ficha-destacado] { position: absolute; right: 0.25rem; top: 0.55rem; width: calc(var(--mtg-hueco-destacado) - 0.5rem); font-size: 1.35rem; font-weight: 700; line-height: 1.1; text-align: end !important; /* Guarda, y está aquí por un fallo que llegó a producción: la tabla de ronda puso en esta esquina el estado «sin jugar» y el distintivo de «no se presentó ninguno». Al estar en absoluto, el texto se partió en dos líneas y **se superpuso al nombre y al botón** — un fallo silencioso, porque el navegador no se queja de que dos cosas ocupen el mismo sitio. Con esto un valor demasiado largo se recorta con puntos suspensivos en lugar de invadir la ficha: falla a la vista y no por la espalda. **Esta esquina es solo para valores cortos**; lo que sea una frase va a la segunda línea. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* «15 pts» y no «Puntos 15»: la unidad detrás y pequeña se lee como una cifra, no como un campo de formulario. En escritorio no aparece — ahí lo dice la cabecera. */ .mtg-tabla-fichas tbody td[data-ficha-destacado][data-sufijo]::after { content: " " attr(data-sufijo); font-size: 0.55em; font-weight: 600; color: var(--bs-secondary-color); } .mtg-tabla-fichas tbody td { /* Bootstrap le pone un borde inferior a cada celda; en ficha eso serían ocho rayas por jugador. El borde lo lleva la fila. */ border: 0; padding: 0; text-align: start !important; } /* El nombre se queda con la primera línea entera —`flex-basis: 100%`—, así que el resto de las cifras baja siempre a la segunda. Con `auto` cabía alguna al lado del nombre cuando el nombre era corto, y la ficha no tenía una forma fija. */ .mtg-tabla-fichas tbody td[data-ficha-titulo] { flex: 1 1 100%; /* El hueco de la esquina derecha lo reserva **el nombre**, no la fila: el valor destacado solo ocupa la primera línea, así que apretar también la segunda le quitaba 88 px a las cifras y las repartía en tres líneas en lugar de dos. */ padding-right: var(--mtg-hueco-destacado) !important; font-size: 1.05rem; font-weight: 600; line-height: 1.35; /* Un nombre que no cabe **se recorta con puntos suspensivos, no salta de línea**. Saltando, la ficha crecía un renglón solo para ese jugador y la lista se descuadraba — el mismo problema que obligó a fijar el orden de las medallas. El nombre completo no se pierde: sigue entero en el marcado, así que un lector de pantalla lo lee y el `title` lo enseña. **Es una caja flexible y no un `nowrap` a secas**, y la diferencia importa: esta celda no siempre lleva solo el nombre. En la clasificación de un torneo lleva además distintivos —«abandonó en la 5», «campeón», «2 bye»—, y recortando la celda entera **el distintivo se salía 170 px y quedaba fuera de la vista**, medido. Con `flex`, lo que encoge es el nombre y los distintivos conservan su tamaño: cede lo que puede ceder, no el dato. Es la misma regla que ya rige la ficha de una mesa. */ display: flex; align-items: baseline; gap: 0.35rem; overflow: hidden; } /* El nombre: lo único que encoge. `min-width: 0` es imprescindible —sin él, un hijo flexible no baja de su ancho de contenido y el `ellipsis` no llega a activarse nunca—. */ .mtg-tabla-fichas tbody td[data-ficha-titulo] > .mtg-nombre, .mtg-tabla-fichas tbody td[data-ficha-titulo] > .mtg-abandonado { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Y los distintivos no se encogen ni se parten: o caben enteros o no dicen nada. */ .mtg-tabla-fichas tbody td[data-ficha-titulo] > .badge { flex: none; } /* La segunda línea, más pequeña: son los datos de apoyo, no la identidad. **Y sin partir**: el rótulo y su valor caben en una línea o la caja se ensancha, nunca al revés. Sin esto, «% del meta» se partía en tres renglones y la ficha crecía por el rótulo y no por el dato — se vio con las columnas de tendencia y nivel. Los valores de estas celdas son cifras cortas, así que el `nowrap` no puede desbordar nada. */ .mtg-tabla-fichas tbody td[data-etiqueta] { font-size: 0.85rem; white-space: nowrap; } /* Sin cabecera visible, un «52,0» suelto no dice nada. */ .mtg-tabla-fichas tbody td[data-etiqueta]::before { content: attr(data-etiqueta) " "; color: var(--bs-secondary-color); font-size: 0.85em; font-weight: 400; } /* Los controles de la fila, a su propia línea y a todo el ancho: es lo que se pulsa, y en la ficha no tiene sentido que quede encajado en un hueco. */ /* Los controles al final de la línea, **no a todo el ancho**. Esto estuvo mal y se vio en pantalla: la ficha de una mesa medía 108 px y más de la mitad se la llevaba un botón. El error fue dimensionar por «se toca con el dedo» en lugar de por **cuántas veces se toca**: el mínimo de 44 px habla del objetivo, no del bloque. */ .mtg-tabla-fichas tbody td[data-ficha-acciones] { margin-left: auto; } /* La variante compacta ya no existe: los pareos dejaron de ser una tabla y pasaron a ser fichas de verdad (`.mtg-mesa`), iguales en móvil y en escritorio. Lo que queda de este patrón es para tablas que **sí** lo son, y hoy eso es la clasificación. */ /* ---- Variante de celdas: los desempates en cuatro cajas iguales ---- Las cifras sueltas se envolvían y parecían una lista de la compra. En celdas del mismo ancho se leen **en columna** al bajar por la tabla, que es como se compara a dos jugadores. La etiqueta va encima del valor, no delante. */ .mtg-tabla-fichas-celdas tbody td[data-etiqueta] { flex: 1 1 0; min-width: 0; background: var(--mtg-celda-fondo); border-radius: var(--bs-border-radius-sm); padding: 0.15rem 0.2rem 0.25rem; text-align: center !important; } .mtg-tabla-fichas-celdas tbody td[data-etiqueta]::before { display: block; font-size: 0.7rem; } /* Una celda que en ficha no aporta. `Jugadas` es la suma de V-D-E, así que en el móvil V-D-E ya la lleva dentro: cuatro celdas es el máximo cómodo a 360 px, y de las cinco la que se puede recomponer con la vista es esa. En escritorio se queda la columna. */ .mtg-tabla-fichas tbody td[data-ficha-solo-escritorio] { display: none; } /* El velo de «pide atención» pasa de las celdas a la ficha. Medido: las celdas suman 331 px de los 366 de la fila, así que teñirlas una a una dejaba sin teñir los huecos del flex y la ficha salía a rayas. */ .mtg-tabla-fichas tbody tr.mtg-fila-atencion { background-color: var(--mtg-atencion-fondo); } .mtg-tabla-fichas tbody tr.mtg-fila-atencion > * { --bs-table-bg: transparent; } /* La línea de corte, **exactamente el mismo fallo que el velo** y descubierto aparte: en escritorio va en cada celda y los trozos se alinean en una línea continua, pero en ficha cada celda es un bloque y salían seis rayas —una bajo el nombre y una bajo cada cifra— en vez de una línea bajo la ficha. Pasa a la fila y se quita de las celdas. La lección es la de siempre y ya está escrita para el fondo: **en modo ficha, lo que abarca la fila entera se declara en la fila.** */ .mtg-tabla-fichas tbody tr.mtg-línea-de-corte > * { border-bottom: 0 !important; } .mtg-tabla-fichas tbody tr.mtg-línea-de-corte { border-bottom: 2px solid var(--mtg-acento); } } /* ---- Una fila que pide atención ---- Sustituye a `table-warning`. Las clases contextuales de Bootstrap fijan un fondo CLARO y un texto oscuro, pero el texto de dentro —«sin jugar», el número de mesa, el «vs»— lleva `text-body-secondary`, que en tema oscuro es gris claro: el resultado era gris claro sobre amarillo claro, ilegible. Aquí solo se tiñe el fondo, con un velo translúcido del acento sobre el fondo del tema, así que el texto conserva el color del tema y el contraste con él. */ .mtg-fila-atencion > * { --bs-table-bg: var(--mtg-atencion-fondo); } /* El anillo de foco del acento, visible en los dos temas. El de la plantilla llevaba un halo blanco que sobre fondo claro parecía un defecto de pintado. */ .btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus, a:focus-visible, summary:focus-visible { outline: none; border-color: var(--mtg-acento); box-shadow: 0 0 0 0.2rem var(--mtg-acento-halo); } /* ---- Acento en los elementos que lo llevan ---- */ .btn-primary { --bs-btn-bg: var(--mtg-acento); --bs-btn-border-color: var(--mtg-acento); --bs-btn-color: var(--mtg-acento-texto); --bs-btn-hover-bg: var(--mtg-acento-vivo); --bs-btn-hover-border-color: var(--mtg-acento-vivo); --bs-btn-hover-color: var(--mtg-acento-texto); --bs-btn-active-bg: var(--mtg-acento-vivo); --bs-btn-active-border-color: var(--mtg-acento-vivo); --bs-btn-active-color: var(--mtg-acento-texto); --bs-btn-disabled-bg: var(--mtg-acento); --bs-btn-disabled-border-color: var(--mtg-acento); --bs-btn-disabled-color: var(--mtg-acento-texto); font-weight: 600; } .btn-outline-primary { --bs-btn-color: var(--mtg-acento); --bs-btn-border-color: var(--mtg-acento); --bs-btn-hover-bg: var(--mtg-acento); --bs-btn-hover-border-color: var(--mtg-acento); --bs-btn-hover-color: var(--mtg-acento-texto); --bs-btn-active-bg: var(--mtg-acento); --bs-btn-active-border-color: var(--mtg-acento); --bs-btn-active-color: var(--mtg-acento-texto); } /* Los botones de contorno de Bootstrap usan **colores fijos** que no siguen al tema, y los dos temas los rompen por lados opuestos. Todo lo de aquí está medido: - `btn-outline-secondary` (#6c757d): 3,29:1 sobre el fondo oscuro y 4,68:1 sobre blanco. Por debajo o al filo del mínimo en los dos. - `btn-outline-warning` (#ffc107): sobre blanco daba **1,63:1**, ilegible — eran los ocho botones «Dropear» del plantel. - `btn-outline-dark`: su color ES el fondo del tema oscuro, contraste 1,0. Ese no se arregla, se deja de usar. El borde puede ser más flojo que el texto a propósito: como componente le basta 3:1. */ [data-bs-theme="light"] .btn-outline-warning { --bs-btn-color: #7a5200; --bs-btn-border-color: #b58100; --bs-btn-hover-bg: #b58100; --bs-btn-hover-border-color: #b58100; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #b58100; --bs-btn-active-border-color: #b58100; --bs-btn-active-color: #fff; } [data-bs-theme="light"] .btn-outline-secondary { --bs-btn-color: #565e64; } /* El mismo rojo fijo de Bootstrap, roto por el otro lado: #dc3545 da 3,82:1 sobre blanco. Medido en el botón «Eliminar ronda». */ [data-bs-theme="light"] .btn-outline-danger { --bs-btn-color: #a5232f; --bs-btn-border-color: #dc3545; --bs-btn-hover-bg: #a5232f; --bs-btn-hover-border-color: #a5232f; } /* El rojo de Bootstrap (#dc3545) da 2,94:1 sobre el fondo del diálogo y 3,41:1 sobre el de la página: por debajo del mínimo en los dos. Con #ea868f son 5,27 y 6,10. Afecta al botón de doble incomparecencia y al de dar por perdidas. */ [data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #ea868f; --bs-btn-border-color: #b02a37; --bs-btn-hover-bg: #b02a37; --bs-btn-hover-border-color: #b02a37; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #b02a37; --bs-btn-active-border-color: #b02a37; --bs-btn-active-color: #fff; } [data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #adb5bd; --bs-btn-border-color: #6c757d; --bs-btn-hover-bg: #6c757d; --bs-btn-hover-border-color: #6c757d; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #6c757d; --bs-btn-active-border-color: #6c757d; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #6c757d; --bs-btn-disabled-border-color: #495057; } .navbar-brand { font-weight: 700; letter-spacing: 0.01em; } /* La página en la que estás, marcada con el acento. Sin esto la barra no dice dónde estás, que en cinco secciones ya se nota. Se pisan **las variables de Bootstrap**, no la propiedad `color`: es la forma idiomática en 5.3 y evita un `!important`. Nota de depuración, que costó un rato: al cambiar de tema, `getComputedStyle` puede devolver el color del tema ANTERIOR y parecer un fallo de invalidación. No lo es. `.nav-link` tiene `transition: color .15s`, y el reloj de las transiciones **se congela cuando la pestaña no se está pintando** —panel oculto, otra pestaña—, así que la transición se queda en `currentTime: 0`. Se comprueba con `elemento.getAnimations()` y con `document.visibilityState`: con `transition: none` el valor correcto aparece al instante. */ .navbar { --bs-navbar-active-color: var(--mtg-acento); --bs-navbar-hover-color: var(--mtg-acento-vivo); } .navbar .nav-link.active { box-shadow: inset 0 -2px 0 var(--mtg-acento); } /* ---- Ojo con el tema: los símbolos de edición ---- Los SVG de Scryfall vienen SIN atributo `fill`, así que se pintan siempre en negro y no hay forma de recolorearlos desde CSS. Sobre fondo oscuro eso los volvía invisibles —y de forma silenciosa, porque el `` carga bien—. Se invierten con un filtro, que sí funciona sobre un monocromo. */ [data-bs-theme="dark"] .mtg-simbolo-set { filter: invert(1); } /* ---- Táctil ---- Solo con puntero grueso. Un desplegable de 27px de alto es imposible de acertar con el pulgar, y era la altura real del control de resultado del juez; con ratón esa misma altura está bien y las tablas densas se agradecen. */ @media (pointer: coarse) { .btn, .form-control, .form-select, .nav-link, summary { min-height: var(--mtg-toque); } .btn-sm, .form-control-sm, .form-select-sm { /* `btn-sm` se usa a propósito en las tablas para que quepan; en táctil lo que no cabe es el dedo, así que se le devuelve el alto y se conserva el ancho. */ min-height: var(--mtg-toque); padding-top: 0.35rem; padding-bottom: 0.35rem; } .form-check-input { width: 1.35rem; height: 1.35rem; } /* Un botón que solo lleva icono no gana ancho con el relleno del texto, así que la regla de arriba le da alto y lo deja en **36 px de ancho** — medido en el de imprimir. Para los demás botones el texto ya se encarga; para estos hay que decirlo. Y con el ancho hay que dar el **centrado**, que es la otra mitad del mismo problema: al estirar la caja a 44 × 44, el relleno del botón (5,6 px arriba y abajo, 8 a los lados) deja de repartirse y el icono se queda arriba a la izquierda — medido, **4,2 px de desvío horizontal y 6,6 de vertical**. Un `d-inline-flex` a secas no centra nada: `align-items` y `justify-content` valen `normal`. El tamaño del icono se sube aparte, **junto a su regla base y no aquí**: con la misma especificidad manda el orden de fuente, y la base está más abajo en este fichero. */ .btn:has(> .mtg-icono-boton) { min-width: var(--mtg-toque); align-items: center; justify-content: center; } } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ---- Cartas ---- */ /* Proporción real de una carta de Magic: 63 x 88 mm. */ .mtg-carta-imagen { width: 100%; max-width: 244px; } .mtg-carta-imagen img { width: 100%; } /* Sustituto cuando no hay ilustración: mantiene el hueco para que la maqueta no salte. */ .mtg-carta-sin-imagen { aspect-ratio: 63 / 88; display: flex; flex-direction: column; justify-content: flex-start; background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); overflow: hidden; } /* ---- Grid del editor de barajas ---- */ /* 145 px es el ancho al que se pinta cada carta del grid. La ilustración que se pide es la «normal» de Scryfall (488 px), así que se ve nítida también en pantallas de alta densidad. */ .mtg-miniatura { position: relative; width: 145px; /* Lo leen las marcas de puntos, restringida, prohibida y no legal para escalar con la carta. */ --mtg-carta-ancho: 145px; } /* **En móvil estrecho, tres cartas por fila en vez de dos**, a petición del organizador. El umbral está medido y no es uno de los de Bootstrap: con el relleno de la página en 24 px, tres cartas de 145 más sus dos huecos de 8 piden **451 px de contenedor**, o sea 475 de ventana. Por encima de ahí ya caben tres al tamaño grande y encogerlas sería perder nitidez a cambio de nada — comprobado a 479, donde entran tres sin tocar nada. Que se pueda encoger **está medido, no supuesto**: a 111 px la ilustración se reconoce, los sellos se leen y —el peor caso— el dado del 6 baja a 27,8 px con puntos de 5,1 y sus seis puntos se siguen contando. Era la duda razonable, porque a 96 px el dado ya solo mide 24 y los puntos 4,4. **La caja va en porcentaje y la variable en `vw`, y esa asimetría es deliberada.** Un `%` en `flex-basis` se resuelve contra el contenedor, así que la cuenta de cuántas caben por fila no puede fallar; pero un `%` dentro del `calc()` de un `font-size` se resolvería contra el font-size del padre y no contra el ancho, así que la variable necesita una longitud absoluta. Si algún navegador mete la barra de scroll en `100vw`, lo único que pasa es que las marcas salen un pelín pequeñas — nunca que la tercera carta se caiga de la fila. */ @media (max-width: 474.98px) { .mtg-miniatura { flex: 0 0 calc((100% - 1rem) / 3); width: auto; --mtg-carta-ancho: calc((100vw - 40px) / 3); } } .mtg-miniatura img, .mtg-miniatura .mtg-carta-sin-imagen { width: 100%; display: block; } .mtg-miniatura-nombre { font-size: 0.8rem; line-height: 1.15; word-break: break-word; } /* ---- Ancho de la página ---- */ .mtg-contenedor { max-width: 1800px; } /* ---- Columna de marcas de aviso del editor ---- */ .mtg-editor { display: flex; align-items: stretch; } /* Pegada al campo y con su mismo borde, para que las dos se lean como una sola pieza. */ .mtg-marcas { position: relative; flex: 0 0 1.6rem; overflow: hidden; border: 1px solid var(--bs-border-color); border-right: 0; border-radius: 0.375rem 0 0 0.375rem; background: var(--bs-secondary-bg); } .mtg-editor textarea { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* La altura la pone site.js: es la del renglón al que apunta la marca. */ .mtg-marca { position: absolute; left: 0; right: 0; text-align: center; font-size: 0.75rem; line-height: 1.5; cursor: default; } /* ---- Desplegables flotantes del editor ---- */ /* Por defecto cuelgan del pie de su bloque, a todo su ancho. Vacíos no ocupan nada: así el JavaScript «cierra» un desplegable limpiando su contenido, sin tocar estilos ni clases. */ .mtg-flotante { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; max-height: 16rem; overflow-y: auto; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } .mtg-flotante:empty { display: none; } /* El autocompletado no cuelga de ningún bloque: es uno solo para toda la página, lo crea site.js y lo cuelga del body. Por eso va `fixed` y con las coordenadas de la línea que se está escribiendo — así funciona en cualquier pantalla sin que su marcado prepare nada. Nace escondido: sin `display: none` se vería un recuadro vacío en la esquina hasta la primera consulta. */ .mtg-autocompletar { display: none; position: fixed; top: 0; left: 0; z-index: 1080; width: min(26rem, calc(100vw - 1rem)); max-height: 16rem; overflow-y: auto; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } /* ---- Gráficos de tarta ---- */ .mtg-tarta { width: 100%; max-width: 180px; display: block; } /* Un filete entre porciones, para que dos colores contiguos no se fundan. */ .mtg-tarta path, .mtg-tarta circle { stroke: var(--bs-body-bg); stroke-width: 1.5; } /* La leyenda de una tarta: muestra de color, nombre y «valor · %». Con **dos tartas por fila en móvil** el renglón se queda en 164 px y «Encantamientos 8 · 13%» pide 169 —medido: 10 de muestra, 98 de nombre, 45 de cifra y dos huecos de 8—, así que la cifra se caía a una segunda línea y esa fila medía 42 px contra los 21 de las demás. Se cierra por los tres lados: hueco de 4 px, la **cifra sin partir nunca** —es el dato— y el **nombre cediendo con puntos suspensivos**, que es lo que puede ceder y por eso lleva su `title`. Con 4 px de hueco el peor caso pasa a 161 y entra sin recortar nada. */ .mtg-tarta-leyenda li { gap: 0.25rem; } .mtg-tarta-leyenda li > .text-body-secondary { white-space: nowrap; } /* Paleta neutra para tipos de carta y curva, donde el color no significa nada por sí mismo. */ .mtg-tarta-1 { fill: #2c7cb8; background: #2c7cb8; } .mtg-tarta-2 { fill: #4aa3a2; background: #4aa3a2; } .mtg-tarta-3 { fill: #7ab648; background: #7ab648; } .mtg-tarta-4 { fill: #d9a441; background: #d9a441; } .mtg-tarta-5 { fill: #d3702c; background: #d3702c; } .mtg-tarta-6 { fill: #c9312c; background: #c9312c; } .mtg-tarta-7 { fill: #7d5ba6; background: #7d5ba6; } /* ---- Ficha de formato ---- */ /* Los símbolos de edición de Scryfall son SVG de un solo trazo y **sin atributo `fill`**: el navegador los pinta en negro y no hay forma de recolorearlos desde fuera. Se dibujan tal cual, sin fondo. Ponerles uno «para que contrasten» fue justo lo que los hizo invisibles: el color del texto es casi negro y quedaba negro sobre negro. Se intentó la vía elegante —usarlos como máscara de CSS rellenada con currentColor, que los haría tomar el color del texto— y no llegó a pintar nada. Como un o carga o no carga, y eso se puede comprobar, se prefiere lo que se puede verificar a lo que es más bonito. */ .mtg-simbolo-set { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; object-fit: contain; } /* En tema oscuro el símbolo negro sí desaparecería. Invertirlo es suficiente porque son monocromos. */ @media (prefers-color-scheme: dark) { .mtg-simbolo-set { filter: invert(1); } } /* Lo que pinta : símbolo, código opcional y nombre en una fila que no se parte. Clase propia y no `d-inline-flex` de Bootstrap para que una página pueda añadir `d-flex` sin que las dos reglas se peleen por cuál gana. */ .mtg-edicion { display: inline-flex; align-items: center; gap: 0.4rem; /* Sin esto, un hijo con text-overflow dentro de un flex no llega a encogerse nunca. */ min-width: 0; } .mtg-edicion-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* La ilustración al pasar el ratón por encima del nombre de una carta. Puro CSS: la imagen está en el HTML pero oculta, y como está oculta el navegador ni la descarga hasta que hace falta. */ .mtg-carta-al-vuelo { position: relative; } .mtg-carta-al-vuelo-nombre { border-bottom: 1px dotted var(--bs-border-color); cursor: help; } .mtg-carta-al-vuelo-imagen { display: none; position: absolute; bottom: 1.4em; left: 0; z-index: 1000; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35); /* Sin esto, el propio recuadro capta el ratón al aparecer bajo el cursor y parpadea. */ pointer-events: none; } .mtg-carta-al-vuelo:hover .mtg-carta-al-vuelo-imagen, .mtg-carta-al-vuelo:focus-within .mtg-carta-al-vuelo-imagen { display: block; } /* En táctil no hay hover que valga. El navegador simula uno al tocar y lo deja pegado hasta que se toca otra cosa, así que la regla de arriba dejaría la imagen abierta sin control: aquí se anula y manda la clase que pone site.js. Y se coloca con `fixed`, no `absolute`: anclada al nombre se saldría de una pantalla estrecha, y el JS necesita poder acotarla al viewport. */ @media (hover: none) { .mtg-carta-al-vuelo:hover .mtg-carta-al-vuelo-imagen, .mtg-carta-al-vuelo:focus-within .mtg-carta-al-vuelo-imagen { display: none; } .mtg-carta-al-vuelo.mtg-abierta .mtg-carta-al-vuelo-imagen { display: block; position: fixed; top: 0; left: 0; bottom: auto; width: 60vw; max-width: 280px; height: auto; } } /* La columna de casillas del comparador: lo justo para la casilla, que si no la tabla le da un ancho de columna entera. */ .mtg-columna-check { width: 2rem; } /* ---- Marcas sobre la ilustración de una carta ---- */ /* Puntos, restringida y prohibida. Las medidas van en fracción de `--mtg-carta-ancho`, que declara cada contenedor: así las mismas reglas sirven para la carta de 145 px del editor y para la de 96 px de la ficha de formato, sin escribir dos veces nada. Es la misma técnica que el cuadro impreso con `--mtg-columna-papel`. En `rem` no valdría: el adorno mediría lo mismo en una carta grande que en una pequeña. Ninguna va en color de acento — el amarillo significa «esto se pulsa» — y todas llevan su letra o cifra, porque el color no puede ser el único canal. */ /* **El fondo de las tres marcas es translúcido, y el valor está medido, no elegido a ojo.** Es una petición del organizador —opacas quedaban «pegote», tapando ilustración que se ha venido a ver— y es la **única excepción** a la regla de que un velo no puede sostener un contraste. Lo que la justifica es que aquí el peor caso **está acotado**: la marca cae sobre la ilustración de una carta, y lo más claro que puede haber debajo de un texto blanco es el borde blanco del marco. Nada puede ser más claro que blanco, así que basta medir contra blanco — mientras que la regla general se escribió para un velo sobre otro velo, donde el fondo depende de la pila entera y no se puede razonar. Medido componiendo cada marca sobre blanco, que es su peor caso: | Alfa | «R» y sello (rojo #b3241d) | Dado (#23282d) | |---|---|---| | 1,00 (opaco) | 6,59 | 13,84 | | 0,85 | **5,11** | 9,22 | | 0,80 | 4,63 | — | | 0,75 | 4,17 ❌ | — | De ahí el 0,85: es donde se ve la ilustración por debajo y el rojo **sigue pasando el 4,5:1** con margen. A 0,75 el rojo baja de 4,5 y la letra deja de cumplir, así que **el tope no es una opinión**. El que manda es el rojo; el dado es oscuro y translucirlo sobre blanco lo *aclara* hasta 9,22, o sea que le sobra. El **filo blanco se queda opaco a propósito**: es lo que mantiene el canto neto de la marca, que es lo que se perdió en el intento de la «R» con contorno de sombras. Un fondo suave con canto duro se lee; un fondo suave con canto suave, no. */ :root { --mtg-marca-alfa: 0.85; } .mtg-marca-carta { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; font-weight: 700; line-height: 1; } /* Los puntos, arriba a la izquierda **dentro de la ventana de la ilustración**, no pegados al borde de la carta: ahí arriba está la barra del nombre y el dado la tapaba, así que de una carta marcada no se podía leer cuál era. El 11 % es donde empieza el dibujo en el marco antiguo, el mismo valor que usa el sello de prohibida. Dado clásico: cuadrado redondeado. El filo blanco es lo que lo separa de una ilustración oscura, y los colores son fijos y no del tema porque van sobre un dibujo, no sobre el fondo de la página. El 25 % está medido contra los 145 px del editor, que es **el único tamaño en que se pinta**: la ficha de formato pasa los puntos en nulo, porque ahí la fila ya dice el valor. Da un dado de 36 px con puntos de 6,7, que se cuentan de un vistazo. Si algún día se pinta a 96 px hay que volver a medirlo: ahí el dado baja a 24 px y los puntos del 6 a 4,4. */ .mtg-marca-puntos { top: 11%; left: 5%; width: 25%; aspect-ratio: 1; /* Un dado real tiene las esquinas redondeadas, no es un cuadrado perfecto. */ border-radius: 22%; /* Translúcido, ver `--mtg-marca-alfa`. */ background: rgb(35 40 45 / var(--mtg-marca-alfa)); color: #fff; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.92); font-size: calc(var(--mtg-carta-ancho) * 0.145); } /* La cara del dado: rejilla de tres por tres, con punto en las casillas que toquen. Las casillas vacías se pintan igual y quedan invisibles, y eso es lo que hace que cada punto caiga en su sitio sin una regla de posición por cara: la rejilla las coloca. */ .mtg-dado { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); /* Deja el margen del canto del dado, que es donde el filo blanco tiene que verse. */ width: 74%; height: 74%; place-items: center; } .mtg-dado-punto { width: 74%; aspect-ratio: 1; border-radius: 50%; /* Del `color` del dado, así que el punto y la cifra del spindown no se pueden desparejar. */ background: currentColor; } /* Por encima de 6 el dado deja de poder representarlo y se pasa a un spindown con la cifra. Aquí la forma la da el polígono del SVG, así que la caja apaga lo suyo: sin fondo, sin redondeo y sin filo, o se vería el cuadrado por detrás del hexágono. */ .mtg-marca-puntos-spindown { background: none; border-radius: 0; box-shadow: none; } .mtg-marca-puntos-spindown > svg { position: absolute; inset: 0; width: 100%; height: 100%; } /* El canto relleno con el filo blanco por fuera: el mismo papel que el `box-shadow` del dado normal, que aquí no serviría porque seguiría la caja cuadrada y no el hexágono. */ .mtg-spindown-canto { fill: #23282d; stroke: rgba(255, 255, 255, 0.92); stroke-width: 5; } /* Las aristas de dentro, más flojas que el canto: a este tamaño son lo que hace reconocible la forma, no un dato, y la cifra se lee justo encima. */ .mtg-spindown-cara { fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 3.5; } /* La cifra va sobre las aristas, y de ahí el `position: relative`: el SVG está en absoluto y sin esto se pintaría encima por ser posterior en el marcado. */ .mtg-dado-cifra { position: relative; } /* La «R» de restringida, abajo a la derecha y pegada al borde, justo encima de la fuerza y resistencia. Es la convención de los carteles de X-Point y 7 Points, y quien juega estos formatos ya la reconoce. **Rectángulo rojo apretado a la letra**, y las tres formas que se descartaron cuentan por qué. Un **círculo** es la peor: para que la letra quepa necesita tanto alto como ancho, y ese alto sale de un dato — pegado a la esquina tapaba la caja de fuerza y resistencia y de una criatura no se podía leer el 4/4. Un **rectángulo holgado** (relleno de 0,42 em a los lados) seguía siendo el doble de ancho de lo necesario y en cartas como `Balance` se comía el final del texto de reglas. Y la **letra sola con contorno de sombras blancas**, sin caja, es la más estrecha de todas y se descartó en pantalla: **no se ve definida**. Tiene explicación y conviene recordarla — un contorno de sombras no tiene borde neto, así que a 17 px de letra el rojo y el blanco se mezclan en el antialias y la marca queda algodonosa; un fondo opaco sí tiene borde, y ese canto es lo que la hace legible de un vistazo. Así que la caja vuelve, y lo que se conserva del intento sin caja es **el ancho ganado**: el relleno lateral baja de 0,42 em a 0,2 em y `letter-spacing` desaparece —en una sola letra solo añade hueco **detrás**, o sea que despega la R del borde justo lo que se le acaba de ganar—. Con eso la marca mide 15,4 px de ancho contra los 21 de la versión holgada, y ese ahorro se gasta en arrimarla al borde derecho, donde el marco de la carta ya no lleva datos. Ocupa del 79,3 % al 88,2 % del alto. **Las cifras de las zonas de la carta no se escriben aquí a propósito**: las que hubo estaban deducidas a ojo y no cuadraban. Medirlas no se puede por el camino corto, porque la ilustración viene de Scryfall y un `canvas` que la muestree sale contaminado por origen cruzado. Si se toca esta posición, **se comprueba en pantalla y sobre una criatura**, que es el único caso donde ese rincón lleva un dato. Anclada con `bottom` y no con `top` a propósito: así, si algún día crece la letra, la etiqueta se estira **hacia arriba** y no hacia abajo sobre el 4/4, que es justo el dato que estorbaba. */ .mtg-marca-restringida { right: 1.5%; bottom: 11.8%; padding: 0.1em 0.2em; border-radius: 0.18em; /* Translúcido, ver `--mtg-marca-alfa`. Esta es la marca que fija el tope: 5,11 sobre blanco. */ background: rgb(179 36 29 / var(--mtg-marca-alfa)); color: #fff; font-size: calc(var(--mtg-carta-ancho) * 0.105); /* **El filo va más flojo que en el dado, al 0,70, y esa es la palanca del «pegote» aquí.** El organizador vio la transparencia en el dado y no en la «R», y tenía razón en lo que veía: el alfa del fondo está puesto igual en las dos, pero esta marca mide 11×12 px contra los 24 del dado —menos superficie donde ver lo de debajo— y cae en la esquina de abajo a la derecha, que en el marco antiguo es borde negro o cuadro de texto, así que rojo mezclado con casi negro sigue siendo rojo. El dado cae dentro del dibujo, donde hay color variado, y ahí sí se nota. Lo que a 11 px hacía que pareciera una pegatina no era el fondo sino el filo: al 0,90 es buena parte de la marca. Probadas cuatro variantes en pantalla sobre marco blanco y marco negro —0,90, 0,70, 0,55 y sin filo— y **sin filo se cae**: sobre el marco negro la letra pierde el canto y queda una mancha roja. El 0,70 conserva el borde. */ box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.7); } /* El sello de la carta, cruzando **el recuadro de la ilustración** y no la carta entera. Cruzando la carta tapaba el nombre y el texto de reglas; encajado en el dibujo se lee igual de bien y deja la carta reconocible. Los porcentajes son la ventana de arte del marco antiguo, medida sobre la carta. **Sirve para dos estados y por eso ya no se llama «prohibida»**: rojo `[BANNED]` y gris `[NOT LEGAL]`. Son excluyentes —lo garantiza `CardMarks`— porque dos sellos cruzando el mismo dibujo serían ilegibles. Va por encima de todo lo demás porque una carta que no se puede jugar no se puede jugar, así que sus puntos y su restricción son secundarios. */ .mtg-sello-carta { position: absolute; top: 11%; left: 7%; width: 86%; height: 37%; z-index: 3; display: flex; align-items: center; justify-content: center; /* Para que la banda, más ancha que su hueco, no se salga del recuadro del dibujo. */ overflow: hidden; } /* **Letras rojas con corchetes y sin banda.** Es el sello que eligió el organizador con la referencia delante, y el motivo es el mismo que le hizo pedir transparencia en las otras dos: la banda opaca cruzaba el dibujo entero y no dejaba ver la carta, que es justo lo que la sección viene a enseñar. Sin banda, la ilustración se ve **entre** las letras. Lo que **no** se copió de la referencia es su sitio —la ponía sobre el texto de reglas— porque el organizador prefiere el nuestro: cruzando la ventana del dibujo. Dice **«BANNED» y no «PROHIBIDA»**, también decisión suya: es el término que se reconoce en cualquier idioma y son seis caracteres en vez de nueve, o sea que la letra puede crecer un 30 % en el mismo hueco. El texto para el lector de pantalla y el `title` siguen en español. **El halo blanco no es adorno: es el fondo de la letra.** Sin banda, el contraste dependería de la ilustración, y ahí el peor caso *no* está acotado como en las otras dos marcas: rojo sobre blanco da 6,59 y sobre negro 3,19, pero sobre una ilustración de tono medio —la misma luminancia que el rojo— se iría a **1,0** y la palabra desaparecería. Con el halo, la letra se lee siempre contra su propio halo y no contra el dibujo, así que el contraste vuelve a ser **6,59 fijo**, sea lo que haya debajo. Va en `em` para que escale con la carta, y por eso es la excepción a que un velo no sostiene un contraste: aquí no hay velo debajo de la letra, hay blanco opaco. Sin `background` ni `box-shadow`: el filo de la banda era lo que se estaba quitando. */ .mtg-sello-carta-texto { /* Más ancha que su hueco a propósito: girada, tiene que cruzarlo de lado a lado. */ width: 125%; text-align: center; transform: rotate(-15deg); color: #c9201a; font-weight: 800; letter-spacing: 0.08em; font-size: calc(var(--mtg-carta-ancho) * 0.125); text-shadow: -0.06em 0 0 #fff, 0.06em 0 0 #fff, 0 -0.06em 0 #fff, 0 0.06em 0 #fff, -0.045em -0.045em 0 #fff, 0.045em -0.045em 0 #fff, -0.045em 0.045em 0 #fff, 0.045em 0.045em 0 #fff; } /* Los corchetes del sello. Van en pseudo-elementos porque son **adorno**: el texto de la marca es la palabra, y un lector de pantalla no tiene que leer «corchete BANNED corchete». */ .mtg-sello-carta-texto::before { content: "["; margin-right: 0.12em; } .mtg-sello-carta-texto::after { content: "]"; margin-left: 0.12em; } /* **`[NOT LEGAL]`: el mismo sello en gris.** La carta existe pero no se imprimió en ninguna edición del formato, y eso **no es estar prohibida** — no está en su banlist, es que nunca estuvo en el formato. `Black Lotus` en Premodern es el caso, y lo señaló el organizador en pantalla. **El rótulo y el color son los de Scryfall**, no una invención: leído de su propio CSS, allí `legal` va verde `#75986e`, `banned` rojo `rgba(167,31,42,.58)`, `restricted` azul `rgba(36,103,130,.58)` y `not-legal` gris `#aeaeae`. O sea que la distinción que hacía falta ya existe y se hace **por color**, con «not legal» en gris: no es rojo, así que no es un castigo. Dos cosas de esa lectura que conviene tener escritas: - **El gris no puede ser el suyo.** Scryfall lo usa de *fondo* con texto blanco; aquí es el color de la letra sobre un halo blanco, y `#aeaeae` daría **1,95** de contraste. Medidas las tres variantes en pantalla sobre marco blanco y marco negro: `#aeaeae` se desvanece, `#6b7178` baja a **4,90** —justo por encima del mínimo— y `#3d4147` da **10,37**. Se eligió el último. - Y la separación entre los dos sellos: gris `#3d4147` contra rojo `#c9201a` son **1,83** de luminancia, contra el 1,27 de un gris medio. Sigue siendo poca, así que **la palabra es el canal principal** y el color el secundario — que es la regla del proyecto, no una concesión. La letra baja a 0,10 del ancho: «NOT LEGAL» son nueve caracteres contra los seis de «BANNED», y al tamaño del rojo se sale del recuadro del dibujo. */ .mtg-sello-no-legal .mtg-sello-carta-texto { color: #3d4147; font-size: calc(var(--mtg-carta-ancho) * 0.1); } /* ---- La ilustración pulsable y el diálogo de la carta ---- */ /* El botón que envuelve la ilustración. **Un botón de verdad y despojado**: sin fondo, sin borde y sin relleno, para que la caja mida exactamente lo que la imagen y no descuadre la rejilla ni desplace las marcas, que se posicionan contra la miniatura. `display: block` porque un botón es `inline-block` y dejaría el hueco de la línea base debajo de la imagen — tres o cuatro píxeles que se notan en una fila de cartas. No lleva ninguna señal de que se pulsa, y es deliberado: **la carta entera es el objetivo**, así que un adorno solo taparía dibujo. Lo que sí lleva es el foco visible, que es lo que necesita quien llega con el teclado, y en puntero fino un realce al pasar por encima. */ .mtg-carta-pulsable { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; } .mtg-carta-pulsable:focus-visible { outline: 2px solid var(--mtg-acento); outline-offset: 2px; } /* Solo con puntero fino. En táctil no hay «pasar por encima», y un `:hover` pegajoso en móvil deja la última carta tocada resaltada para siempre. */ @media (hover: hover) and (pointer: fine) { .mtg-carta-pulsable:hover { filter: brightness(1.08); } } /* El texto de reglas conserva sus saltos de línea: en una carta separan habilidades, no son adorno. `pre-line` y no `pre`, porque el texto viene con líneas ya formadas y no hay que respetar sus espacios de sangrado. */ .mtg-carta-texto { white-space: pre-line; } /* El texto impreso va atenuado y en cursiva: es el que **no** se aplica. */ .mtg-carta-texto-impreso { color: var(--bs-secondary-color); font-style: italic; } .mtg-carta-detalle-cuerpo { display: flex; flex-wrap: wrap; gap: 1.25rem; } /* La ilustración a tamaño de lectura, y **no se encoge**: es lo primero que se ha venido a ver. El ancho está atado al de la caja para que en móvil pase a ocupar la fila entera. */ .mtg-carta-detalle-imagen { flex: 0 0 auto; width: min(100%, 15rem); } /* Los datos sí encogen, y necesitan `min-width: 0` o un texto largo no deja encoger la columna y la rejilla se sale del diálogo. `flex-basis` en una medida mínima legible: por debajo de eso, el texto se va debajo de la imagen en vez de quedarse en una columna de cuatro palabras. */ .mtg-carta-detalle-datos { flex: 1 1 16rem; min-width: 0; } .mtg-carta-detalle-bloque + .mtg-carta-detalle-bloque { margin-top: 1.1rem; } .mtg-carta-detalle-titulo { margin-bottom: 0.35rem; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bs-secondary-color); } .mtg-carta-detalle-separador { margin-inline: 0.35rem; } .mtg-carta-aclaraciones { margin: 0; padding-left: 1.1rem; font-size: 0.875rem; } .mtg-carta-aclaraciones > li + li { margin-top: 0.5rem; } /* El año de la aclaración, delante. Solo el año y no la fecha entera: lo que informa es si es de los noventa o de anteayer, y una fecha completa por línea llenaría el bloque de cifras. */ .mtg-carta-aclaracion-fecha { margin-right: 0.4rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; } .mtg-carta-legalidad { margin: 0; padding: 0; list-style: none; font-size: 0.875rem; } .mtg-carta-legalidad > li { display: flex; align-items: center; gap: 0.5rem; padding-block: 0.25rem; border-bottom: 1px solid var(--bs-border-color); } .mtg-carta-legalidad > li:last-child { border-bottom: 0; } .mtg-carta-legalidad-puntos { margin-left: auto; color: var(--bs-secondary-color); white-space: nowrap; } /* **Cuatro estados y cuatro tonos, que es lo contrario de lo que hacen las marcas sobre la carta.** No es una incoherencia y conviene tener escrito el porqué: encima de una ilustración solo hay dos sellos y una letra, nunca dos a la vez, así que el rojo puede significar «prohibida» y también «restringida» sin que se comparen. Aquí las siete filas están **una debajo de otra y se comparan**, que es la misma lección que las columnas del medallero de la liga: dos filas del mismo color en una tabla de comparación se leen como el mismo estado. El azul de restringida es además el que usa Scryfall. El rótulo va escrito en cada fila, así que **el color no es el único canal** — la regla del proyecto se cumple igual. */ .mtg-estado { flex: 0 0 auto; min-width: 6.5rem; padding: 0.1rem 0.4rem; border-radius: 0.25rem; color: #fff; font-size: 0.75rem; font-weight: 600; text-align: center; text-transform: uppercase; letter-spacing: 0.03em; } .mtg-estado-legal { background: #3f7a44; } .mtg-estado-restringida { background: #246782; } .mtg-estado-prohibida { background: #b3241d; } .mtg-estado-no-legal { background: #55595f; } /* ---- La leyenda de las marcas ---- */ /* Va al final de la pantalla, como nota al pie, con el mismo peso que la leyenda del medallero de la clasificación de liga: separada por una línea y en texto secundario. */ .mtg-leyenda-marcas { margin-top: 1.5rem; padding-top: 0.9rem; border-top: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); font-size: 0.875rem; } .mtg-leyenda-marcas-titulo { margin-bottom: 0.6rem; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } /* Cada entrada es una fila de muestra + explicación, y las filas se reparten en columnas mientras quepan. `minmax(0, …)` es obligatorio: sin él una explicación larga no deja encoger su columna y la rejilla se sale del contenedor. */ .mtg-leyenda-marcas-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 0.75rem 1.5rem; margin: 0; } .mtg-leyenda-marcas-lista > div { display: flex; align-items: flex-start; gap: 0.6rem; } /* **Ancho fijo, y por eso mismo el sello se encoge.** Con la columna en `auto` cada muestra medía lo suyo —16 px la «R», 36 el dado, 88,8 el sello— y las tres explicaciones empezaban en una `x` distinta: la lista se leía descuadrada. Lo vio el organizador en pantalla. El ancho lo manda la muestra más larga, que es el sello `[NOT LEGAL]` con 85,1 px. La muestra va **centrada** en el canal para que las cuatro se lean como una columna. */ .mtg-leyenda-marcas-lista dt { flex: 0 0 5.5rem; display: flex; align-items: center; justify-content: center; } .mtg-leyenda-marcas-lista dd { margin: 0; min-width: 0; } /* La muestra es el componente de verdad, así que hay que **quitarle el posicionamiento absoluto**: fuera de una carta, `top`/`left` lo colgarían del primer ancestro posicionado que hubiera, y las medidas en porcentaje se resolverían contra él. `--mtg-carta-ancho` se declara aquí a propósito, y con los 145 px del editor y no con un valor pequeño «de leyenda»: la marca tiene que salir del tamaño **al que se ve en la carta**, porque una R de 6 px no se reconocería. */ .mtg-marca-en-leyenda { position: static; --mtg-carta-ancho: 145px; } /* El ancho del dado es el 25 % de la carta, y en absoluto ese porcentaje se resolvía contra ella. Suelto hay que escribirlo, o mediría el 25 % de su fila. */ .mtg-marca-puntos.mtg-marca-en-leyenda { width: calc(var(--mtg-carta-ancho) * 0.25); } /* El sello suelto pierde el hueco de la ventana del dibujo, así que también su `overflow: hidden`, que le recortaría lo que sobresale por estar girado. Es la muestra que se aparta del tamaño de la carta, y es porque **es una palabra**: lo que se reconoce de él es el texto, no su cuerpo, así que encogerlo no le quita señal — mientras que una «R» de 6 px sí deja de leerse. **En la leyenda los dos sellos llevan la misma letra**, escrita aquí en vez de heredada de `--mtg-carta-ancho`, y eso arregla un defecto medido: sobre la carta el gris va más pequeño que el rojo a propósito —«NOT LEGAL» son nueve caracteres contra seis y al tamaño del rojo se sale del dibujo—, pero al heredar esa proporción la muestra de la leyenda salía con letra de **9 px frente a los 11,25** del rojo. En una leyenda eso no vale: es el único sitio donde la marca se lee en vez de reconocerse, así que las dos tienen que pesar igual. Con la letra fija, lo único que las diferencia es el número de caracteres — 68,6 px el rojo y 85,1 el gris — y el canal se dimensiona por la más larga. **Si cambia alguna de las dos palabras, hay que volver a medir el canal**: ya pasó al cambiar «PROHIBIDA» por «[BANNED]», que se fue a 80 px en un canal de 76 y se salía por la izquierda, porque `justify-content: center` no tiene dónde centrar lo que no cabe. */ .mtg-sello-carta.mtg-marca-en-leyenda { width: auto; height: auto; overflow: visible; } .mtg-sello-carta.mtg-marca-en-leyenda .mtg-sello-carta-texto { width: auto; font-size: 0.7rem; } /* ---- Las galerías de la ficha de un formato ---- */ /* El número a la izquierda de cada fila, como en los carteles que publican estos formatos. */ .mtg-puntos-valor { flex: 0 0 2.5rem; text-align: center; font-size: 1.5rem; font-weight: 700; line-height: 1.4; color: var(--bs-secondary-color); } /* Cada galería —puntos, restringidas, prohibidas— con su línea de separación y su rótulo. Tres secciones seguidas de cartas se confunden en una sola si no se separan: la línea de arriba y el subtítulo son lo que dice dónde acaba una y empieza la siguiente. */ .mtg-galeria-cartas { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--bs-border-color); } .mtg-galeria-cartas-subtitulo { margin-bottom: 1rem; color: var(--bs-secondary-color); font-size: 0.875rem; } /* Más pequeñas que las del editor: aquí se trata de ver la sección entera de golpe, no de leer la carta. La proporción real de una carta es 63 x 88 mm. La clase se llamaba `.mtg-puntos-carta` y se renombró al usarla las tres galerías: un nombre que dice «puntos» en la galería de prohibidas es la pista falsa que encuentra el siguiente. */ .mtg-carta-galeria { /* position: relative porque las marcas se pintan en absoluto sobre la carta. */ position: relative; width: 96px; --mtg-carta-ancho: 96px; } .mtg-carta-galeria img, .mtg-carta-galeria .mtg-carta-sin-imagen { width: 100%; display: block; } /* Los sets legales de la ficha: rejilla de símbolo y nombre, en orden de publicación. `auto-fill` con un mínimo y no un número de columnas fijo: la columna de la ficha mide 398 px en escritorio y el ancho entero en móvil, así que el número de sets por fila lo decide el sitio. La edición se apila —símbolo arriba, nombre debajo y centrado— y ahí hay que **deshacer dos cosas de `.mtg-edicion`**, que está pensada para ir en una línea de texto: su `flex-direction` en fila y el recorte del nombre con puntos suspensivos, que en una celda estrecha se comería «Limited Edition Alpha» hasta dejarlo en dos palabras. Aquí el nombre parte en varias líneas, que es lo que permite celdas estrechas sin perder el nombre. */ .mtg-sets-legales { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.9rem 0.5rem; } .mtg-sets-legales .mtg-edicion { display: flex; flex-direction: column; gap: 0.3rem; text-align: center; line-height: 1.2; } .mtg-sets-legales .mtg-edicion-nombre { overflow: visible; white-space: normal; } /* El símbolo, más grande que en una línea de texto: aquí es lo que se reconoce de un vistazo, y a 1,1 rem los de las ediciones viejas no se distinguen entre sí. */ .mtg-sets-legales .mtg-simbolo-set { width: 1.7rem; height: 1.7rem; } /* La tabla de puntos en texto: una línea por valor con sus cartas seguidas. Aquí **sí hay viñeta** —al contrario que las otras listas de la ficha, que van sin marcador—: con las cartas en prosa, una línea de tres renglones necesita algo que diga dónde empieza, y el valor en negrita solo no basta cuando el anterior acabó a media línea. El sangrado es el mínimo que deja la viñeta fuera del texto. Se fue con esto la clase `.columns-2`, que repartía en dos columnas las listas de prohibidas y restringidas: en prosa no hace falta, porque la línea se llena sola. */ .mtg-lista-por-puntos { margin-bottom: 1rem; padding-left: 1.1rem; } .mtg-lista-por-puntos > li + li { margin-top: 0.35rem; } /* ---- Curva de maná ---- */ .mtg-curva { display: flex; align-items: flex-end; gap: 0.25rem; } .mtg-curva-tramo { flex: 1 1 0; min-width: 0; text-align: center; } /* Altura fija: es lo que hace que las barras sean comparables entre sí. */ .mtg-curva-hueco { height: 8rem; display: flex; align-items: flex-end; } .mtg-curva-barra { width: 100%; /* Un tramo con una sola carta debe verse aunque su altura relativa sea mínima. */ min-height: 3px; border-radius: 0.25rem 0.25rem 0 0; background: var(--bs-primary); } .mtg-curva-valor { font-size: 0.75rem; border-top: 1px solid var(--bs-border-color); padding-top: 0.15rem; } .mtg-curva-cuenta { font-size: 0.7rem; color: var(--bs-secondary-color); } /* ---- Estadísticas del maindeck ---- */ .mtg-pip-muestra { /* No encoge: es un cuadrado de color, y encogido deja de ser el color de nadie. En el renglón estrecho de la leyenda, quien cede es el nombre. */ flex: 0 0 auto; width: 0.8rem; height: 0.8rem; border-radius: 0.2rem; border: 1px solid var(--bs-border-color); } /* Los cinco colores de Magic. Aproximaciones a los de las cartas, oscurecidas lo suficiente para que el texto en blanco de las etiquetas contraste. Se declaran las dos propiedades porque los mismos colores pintan cuadraditos de leyenda (background) y sectores de tarta (fill, que es lo que entiende el SVG). */ .mtg-color-w { background: #e4d9a8; fill: #e4d9a8; } .mtg-color-u { background: #2c7cb8; fill: #2c7cb8; } .mtg-color-b { background: #4a4642; fill: #4a4642; } .mtg-color-r { background: #c9312c; fill: #c9312c; } .mtg-color-g { background: #237a4c; fill: #237a4c; } /* La cantidad va encima de la esquina de la carta, como en los visores de mazos. */ .mtg-miniatura-cantidad { position: absolute; bottom: 4px; left: 4px; margin: 0; padding: 0 0.4rem; border-radius: 0.25rem; font-size: 0.85rem; font-weight: 600; color: #fff; background: rgba(0, 0, 0, 0.78); } /* ============================================================================ EL LISTADO DE TORNEOS ============================================================================ **Fichas, no tabla**, y la prueba es la del propio proyecto: ¿se comparan las celdas de una fila con las de la de al lado? En la clasificación sí; en una lista de torneos **no** — nadie compara los jugadores de un torneo con los del de al lado, se busca el que se quiere abrir. Es una lista de unidades, como los emparejamientos. Eso simplifica de verdad: una sola forma arriba y abajo, sin `mtg-tabla-fichas` que mantener ni `data-ficha-*` en las celdas. Antes eran **tres listas apiladas** con el estado como encabezado de cada una. Medido a 375 px con 25 torneos: 3.264 px de documento y **3,4 pantallas de scroll** hasta «Terminados». */ .mtg-listado-controles { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1rem; margin-bottom: 1rem; } .mtg-listado-controles .mtg-pestanas { flex: 1 1 16rem; margin-bottom: 0; } .mtg-listado-filtro { flex: 0 1 auto; padding-bottom: 0.35rem; } /* Aquí **ya no hace falta una regla para la pestaña activa**: la de arriba se marca por `aria-selected` y vale para todas. Este bloque decía «podrían unificarse; no se ha hecho para no tocar una pantalla que funciona», y unificarlas es justo lo que arregló que las cuatro vistas de la baraja no señalaran la suya. */ .mtg-torneos { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; } /* `position: relative` no es decoración: es lo que sostiene el `stretched-link` del nombre, y con él **la ficha entera es el objetivo**. Antes la única forma de abrir un torneo era un enlace de 22 px —lo sacó la pasada de QA— y aquí pasa a 72. */ .mtg-torneo { position: relative; display: flex; align-items: center; gap: 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--mtg-celda-fondo); } /* ---- La cinta de esquina de una jornada de liga ---- Idea del organizador, con un mockup delante: una **cinta diagonal encima de la imagen**, no una imagen nueva. Se probaron cuatro variantes en pantalla —cinta oscura, cinta azul, esquina doblada con el icono y píldora plana— y eligió esta. Con ella **se quitó el tinte de fondo de la caja** que había antes: la cinta se ve antes y desde más lejos, así que el matiz de fondo solo aportaba ruido y un color más. **Casi negra en los dos temas**, no una variable por tema: no se apoya en el fondo de la página sino sobre la imagen del torneo, que puede ser cualquier cosa. El **filo blanco** lo pidió él y resuelve justo el caso que la cinta sola no cubre: sobre un tapete oscuro la banda se funde con la imagen. Sobre uno claro el filo no se ve y no hace falta, porque ahí destaca lo negro. Va en `box-shadow` y no en `border`: un borde sumaría 2 px de alto a la banda, y además cambiar el estilo de un lado sin anchura declarada resucita la anchura `medium` —3 px—, que es una trampa que este proyecto ya ha pagado dos veces. `z-index` porque la imagen y el velo son hermanos suyos y se pintan después. **El fondo va al 0,68**, bajado del 0,88 a petición del organizador para que se vea el tapete por debajo — el mismo criterio que las marcas de las cartas. El valor está medido y no elegido a ojo: componiendo la cinta sobre blanco, que es el peor caso para su texto blanco porque nada puede ser más claro, | Alfa | «LIGA» sobre tapete blanco | sobre tapete negro | |---|---|---| | 0,88 (el de antes) | 13,52 | 19,06 | | **0,68** | **5,84** | 19,61 | | 0,58 | 4,58 | 19,76 | | 0,50 | 3,52 ❌ | 19,92 | El suelo está en 0,58 y a 0,50 la letra se cae, así que 0,68 deja margen. Se descartó bajar más viéndolo ampliado: a 0,58 el «LIGA» empieza a competir con el dibujo y la cinta pierde presencia, que es justo su trabajo — se ve recorriendo la cuadrícula con la vista. Y una cosa que la comparación enseñó y conviene saber antes de volver a tocar esto: **sobre un tapete oscuro el cambio no se aprecia**, porque casi negro mezclado con marrón oscuro sigue siendo casi negro. Es la misma trampa que con la «R» de restringida. Para juzgar este valor hay que mirarlo sobre un tapete **claro** —el de Premodern— y ampliado. */ /* **La geometría se declara una vez** (`.mtg-cinta`) porque la usan dos: la de liga y la de «cambia tu lista» de una caja de baraja. Con las medidas escritas dos veces, la segunda cinta se separaría de la primera en cuanto se tocara el ángulo o el filo. */ .mtg-cinta, .mtg-cinta-liga { position: absolute; top: 0.9rem; right: -2.4rem; z-index: 3; width: 9rem; padding: 0.18rem 0; transform: rotate(45deg); background: rgba(16, 18, 22, 0.68); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.9), 0 1px 0 rgba(255, 255, 255, 0.9); color: #fff; text-align: center; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; pointer-events: none; } /* **El gris del distintivo y no el casi negro de la cinta de liga**, y lo pidió el organizador viéndolo: con el mismo color, una caja de baraja parecía una jornada de liga. La cinta es un mecanismo compartido y el color es lo que dice de qué habla cada una — mismo par que `.badge.text-bg-secondary`, que es de donde viene este distintivo. Sin el filo blanco, además: aquel existe porque la cinta de liga se apoya sobre un tapete que puede ser cualquier cosa, y este gris ya es opaco. */ .mtg-cinta-aviso { background: var(--bs-secondary); box-shadow: none; letter-spacing: 0.04em; } /* En papel no se pinta: los navegadores descartan los fondos al imprimir, así que quedaría un «LIGA» blanco sobre blanco. Lo que identifica una jornada en una hoja es el icono y el nombre de la liga, que sí se imprimen. */ @media print { .mtg-cinta, .mtg-cinta-liga { display: none; } } /* ============================================================================ LA FASE DE INSCRIPCIÓN: DOS LISTAS ============================================================================ La cola y el plantel, una al lado de la otra en escritorio y en dos pestañas en móvil. La cola va a la **izquierda** porque el movimiento va en esa dirección —se confirma hacia la derecha— y porque es donde se escribe. Por defecto —móvil— es una columna con el panel elegido, así que **si el JavaScript fallara se verían las dos listas seguidas** y no una pantalla en blanco. Misma regla que la barra de juez y que el listado de torneos: el servidor lo pinta todo y el cliente estrecha. */ .mtg-inscripcion { display: grid; gap: 1.5rem; } /* ---- El umbral son 992 px y no los 768 de siempre ---- Este es el único sitio del proyecto donde el corte no es el de las tablas en modo ficha, y hay una medida detrás. A 768 px la columna se queda en **337**, menos que los 319 de un móvil de 375 más el ancho que gana al no compartir: al nombre le tocan 188 px y «Maria del Carmen Villanueva» se parte en dos, con la fila en 60 px. O sea que a ese ancho las dos columnas dan *menos* sitio que una sola. Medido lo que le toca a cada columna: 768 → 341, 880 → 397, **992 → 453**, 1280 → 597. A 992 el nombre tiene sitio de sobra y es además el umbral que ya usa el interruptor de forma del cuadro, así que no se inventa una anchura nueva. Por debajo, pestañas. */ @media (max-width: 991.98px) { .mtg-inscripcion[data-panel="cola"] #mtg-panel-plantel, .mtg-inscripcion[data-panel="plantel"] #mtg-panel-cola { display: none; } } /* De 992 en adelante las pestañas no hacen nada: las dos listas caben. Se esconden con `display: none` y no con `clip-path` —al contrario que un rótulo— porque no son texto que un lector de pantalla necesite: son un control de navegación de una vista que ahí no existe. */ @media (min-width: 992px) { .mtg-inscripcion { grid-template-columns: 1fr 1fr; align-items: start; } .mtg-inscripcion-pestanas { display: none; } } /* ---- El formulario de creación cambia de forma con el tipo ---- En eliminación directa no hay rondas que elegir, así que el campo **se esconde** en vez de apagarse: un campo deshabilitado invita a preguntarse qué habría que poner. Y el cuadro deja de ser opcional, así que su nota lo dice. Lo decide el CSS con `:has()` sobre el radio marcado — sin JavaScript y sin volver al servidor. Nace visible y se esconde, que es el orden correcto: si `:has()` no estuviera soportado se vería un campo de más, no faltaría uno. */ .mtg-solo-sin-rondas { display: none; } form:has(#tipo-eliminacion:checked) .mtg-solo-con-rondas { display: none; } form:has(#tipo-eliminacion:checked) .mtg-solo-sin-rondas { display: inline; } /* ---- Montar el cuadro ---- Aquí vivían **dos listas con pestañas** —«dentro» y «fuera», con el patrón de la inscripción— y una previa de cruces en texto. Se fueron enteras: la pantalla es ahora el cuadro y nada más, y cada hueco se pulsa para cambiar de jugador. Con eso desaparecieron el segundo panel, sus pestañas, el aviso de «falta un jugador» y la fila de móvil a dos renglones que hizo falta para que el nombre no se quedara en 73 px. Si vuelven las dos listas, vuelve ese bloque con ellas. Lo que queda es poco a propósito: el esqueleto del cuadro ya está resuelto por las reglas de `.mtg-cuadro`, que se comparten con la fase de top. */ /* El cuadro previsto no tiene resultados, así que **nada va en acento**: aquí el amarillo diría «esto se pulsa» de una caja de marcador que no existe. Lo pulsable son los huecos, y lo dice su flecha. */ .mtg-corte-hueco { /* Un `
` la decide el contenido. El truco de siempre —y es un truco, no hay otra en tablas— es `height: 1px` en la celda: la fila la ignora y la estira a su alto real, pero pasa a contar como definida, así que el `100%` de dentro se resuelve contra ella. */ /* ---- El alto de la fila lo pone esta celda ---- Aquí había `height: 1px`, que es el truco para que el hijo pueda medir `100%`. Servía para eso y para nada más: **la fila la seguía midiendo la celda del nombre** —62 px— y subir el relleno no cambiaba nada, porque el contenido de esta va en absoluto y no ocupa. Medido: con más relleno la fila seguía en 62 y al tapete le tocaban 72×42. Con una altura de verdad, esta celda pasa a ser la que manda: en una tabla el `height` de un `` es un **mínimo** para la fila, así que tiene que ser mayor que los 62 px que mide la del nombre — con 60 no pasaba nada, que fue el primer intento. Con `box-sizing: border-box` los 76 incluyen los 8+8 de relleno, así que a la caja le quedan 60 y el tapete pasa de 77×45 a 103×60. **El relleno no se toca desde aquí**: Bootstrap lo declara en `.table > :not(caption) > * > *`, que tiene más especificidad que una clase suelta. Un `padding` aquí no haría nada, y estuvo puesto sin hacerlo. */ .mtg-columna-logo { width: 1%; height: 76px; } /* El contenido va en **absoluto dentro de la caja**, y esa es la pieza que hace que esto funcione: así llena la fila entera sin poder empujarla. Con la imagen en flujo, un logo más alto que los demás estiraba su fila —medido: la de Premodern salía en 73 px y el resto en 62—, y una lista con filas desiguales es justo lo que se venía a arreglar. */ .mtg-logo-caja { position: relative; height: 100%; width: 6.5rem; border-radius: var(--bs-border-radius); overflow: hidden; } .mtg-logo-caja > .mtg-logo-formato, .mtg-logo-caja > .mtg-iniciales { position: absolute; inset: 0; width: 100%; height: 100%; } /* ---- En móvil el logo tampoco es una columna: es el fondo de la ficha ---- Lo mismo que en el listado de torneos y por petición del organizador, que lo vio allí primero. Aquí gana **más**, porque lo que sustituye no es una columna estrecha sino una **tira de 44 px** encima de cada ficha: el logo pasa a costar cero. Medido con los siete formatos a 375 px: la tabla baja de **1136 px a 964** (−15 %) y la ficha de 149-196 a 118-165. Antes de esto la celda tenía `height: auto` y la caja `2.75rem`, que era el arreglo del `height: 1px` —el truco para que el hijo mida `100%` dentro de una tabla— al dejar de estar dentro de una tabla: por debajo de 768 px cada celda es un bloque y ese 1 px es una altura de verdad, así que el logo desaparecía. Ese problema ya no existe porque la caja va en absoluto contra la ficha. **Va aquí y no en el bloque de modo ficha de más arriba**: misma especificidad, y con la misma especificidad manda el orden de fuente. Desde allí, la regla base la pisaría. **`screen`, no `max-width` a secas**: al imprimir las media queries miden la hoja, y un A4 vertical son ~703 px — sin la guarda, el listado se imprimiría con la imagen de fondo y el velo. Es la misma corrección que ya llevan las tablas en modo ficha. En papel queda la tabla de siempre. */ @media screen and (max-width: 767.98px) { /* ---- La fila tiene que ser una caja antes de poder tener fondo ---- Una ficha de tabla es hoy una **fila con una raya abajo**: sin fondo, sin borde y sin esquinas. Una imagen de fondo necesita un contorno que la recorte, así que esto es requisito y no adorno. Queda igual que la ficha del listado de torneos, que ya era una caja. **`:has()` y no una clase en el marcado**, por lo mismo que en la regla del ordinal de más arriba: quien sabe si hay logo es la propia tabla. `.mtg-tabla-fichas` la comparten la clasificación, la cola, el plantel y los formatos — sin acotar, esto convertiría en cajas las cuatro. */ .mtg-tabla-fichas:has(td.mtg-columna-logo) tbody tr { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--mtg-celda-fondo); margin-bottom: 0.5rem; overflow: hidden; padding: 0.7rem 0.6rem; } .mtg-tabla-fichas tbody td.mtg-columna-logo { position: absolute; inset: 0; height: auto; padding: 0 !important; } .mtg-tabla-fichas .mtg-logo-caja { position: absolute; inset: 0; width: auto; height: auto; border-radius: inherit; } /* `cover` y **sin la plaquita blanca**, al revés que en escritorio: de fondo, la plaquita pintaría la ficha entera de blanco. Eso obliga a que los logos tengan color propio — ver la nota de la plaquita más abajo, que es la que explica por qué Old Frame Vintage pasó a ser un tapete. */ .mtg-tabla-fichas .mtg-logo-caja > .mtg-logo-formato { object-fit: cover; background: none; padding: 0; border-radius: 0; } /* ---- El velo, opaco hasta el 68 % y no hasta el 52 % como en torneos ---- Y la diferencia está medida, no copiada: en la ficha de un formato el texto llega **más a la derecha** —el identificador en monoespaciada acaba en el 72 % del ancho— y con el velo de torneos se quedaba en **4,31 de contraste en oscuro y 4,43 en claro**, por debajo del 4,5 de un texto normal. Con la zona opaca en el 68 % el peor caso sube a **6,39 / 4,50**, y lo que importa es que ese peor caso ya no depende de la imagen: es el azul del enlace sobre el fondo de siempre. */ .mtg-tabla-fichas .mtg-logo-caja::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, var(--bs-body-bg) 0%, var(--bs-body-bg) 68%, rgb(from var(--bs-body-bg) r g b / 0.75) 88%, rgb(from var(--bs-body-bg) r g b / 0.6) 100%); } /* El texto, por encima del velo. Sin esto quedaría debajo y no se vería nada. */ .mtg-tabla-fichas:has(td.mtg-columna-logo) tbody td:not(.mtg-columna-logo) { position: relative; } } .mtg-logo-formato { display: block; object-fit: contain; object-position: center; /* ---- La plaquita blanca, y no es decoración ---- **Hay logos que son negro puro sobre transparencia** —un SVG sin `fill` es el mismo caso que hizo invisibles los símbolos de edición— y sobre el fondo oscuro, que es el de por defecto, no se ven. Medido pintándolos en un canvas: color medio [0,0,0]. La plaquita los salva **aquí, en escritorio**, donde el logo ocupa una caja suya. En móvil ya no puede: ahí el logo *es* el fondo de la ficha y una plaquita la pintaría entera de blanco. Así que por debajo de 768 px la plaquita se quita y **el logo tiene que traer color propio**. Eso es lo que obligó a convertir el de Old Frame Vintage en un tapete: medido en la banda que se ve, su PNG era **88 % transparente con la tinta en luminancia 0**, o sea invisible en cuanto se le quita el fondo. Se resuelve con un fondo claro y no con `filter: invert(1)` como los símbolos de edición: aquel vale porque son monocromos, y aquí invertir destrozaría los cuatro logos que sí llevan color. Va **en los dos temas** en lugar de solo en oscuro, y sale gratis: estos logos están hechos para las páginas claras de sus webs, y en tema claro la plaquita se confunde con el fondo. Una regla en vez de dos, y el mismo resultado. */ background: #fff; padding: 0.15rem 0.3rem; border-radius: var(--bs-border-radius-sm); } .mtg-logo-formato-grande .mtg-logo-formato, .mtg-logo-formato-grande .mtg-iniciales { width: auto; height: 3.5rem; max-height: none; max-width: 22rem; margin-bottom: 0.5rem; } .mtg-logo-formato-grande .mtg-iniciales { width: 3.5rem; border-radius: var(--bs-border-radius); } /* ============================================================================ LOS DOS LISTADOS EN ESCRITORIO: CUADRÍCULA DE CAJAS ============================================================================ Decisión del organizador del 7 de agosto de 2026, con las dos variantes capturadas delante y la referencia de la cuadrícula de tolaria.app: **imagen grande arriba, texto debajo**, y las columnas que quepan. Sustituye a las filas con la miniatura de 7 rem, que se quedaban flojas — la imagen a 112×68 no enseñaba casi nada del tapete; aquí pasa a ~300×144, cinco veces el área. El precio está medido y se asume: por debajo de ~1100 px de ventana las cajas ocupan más alto que las filas (a 1000 px, 1511 contra 1324 con 17 torneos). A 1280 son cuatro columnas y gana incluso en alto. El responsive lo hace `auto-fill` solo: 4 columnas a 1280, 3 a 1000, 2 en tableta. **`screen`, no `min-width` a secas**: al imprimir, las media queries miden la hoja —un A4 horizontal son ~1047 px— y sin la guarda el listado se imprimiría en cuadrícula. En papel quedan las filas de siempre en torneos y la tabla completa en formatos, que es lo que se quiere en una hoja. El móvil no se toca: por debajo de 768 sigue el fondo en degradado, que es lo que el organizador dio por bueno («queda muy chula»). */ @media screen and (min-width: 768px) { .mtg-torneos { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0.75rem; } .mtg-torneo { flex-direction: column; align-items: stretch; gap: 0; padding: 0; /* Recorta las esquinas de la imagen contra el radio de la caja. */ overflow: hidden; } /* La imagen pasa de columna lateral a cabecera: todo el ancho de la caja y proporción ~2:1, que es la de las cuadrículas de referencia y respeta casi entero un tapete de 1,71. El contenido sigue en absoluto (regla base), así que llena la cabecera sin poder estirarla. */ .mtg-torneo-miniatura { width: auto; height: 9rem; align-self: auto; margin: 0; border-radius: 0; } .mtg-torneo-cuerpo { flex: 0 0 auto; padding: 0.6rem 0.8rem 0; } .mtg-torneo-nombre { font-size: 1.05rem; } /* El estado a la izquierda y la fecha a la derecha, en el pie de la caja. `margin-top: auto` lo ancla abajo cuando la línea de datos de arriba ocupa una línea menos que en la caja de al lado: sin él, los pies de una misma fila bailaban de altura. */ .mtg-torneo-lado { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.8rem 0.7rem; margin-top: auto; text-align: start; } /* ---- Las jornadas de una liga NO van en cuadrícula: se quedan en la forma compacta ---- La cuadrícula es lo correcto para *buscar* un torneo entre treinta, que es lo que se hace en `/Torneos`. Aquí el problema es otro: **una liga son 24 jornadas y se leen como un calendario**, y encima comparten pantalla con la clasificación y con el formulario de datos. En cajas de 9 rem de cabecera, llegar a la tabla eran varias pantallas de scroll. Lo pidió el organizador viéndolo. Se declara **después** del bloque de cuadrícula y con un selector más específico, así que gana sin tocar ninguna de las reglas de arriba: el listado de torneos no se entera de que esto existe. */ .mtg-jornadas { display: flex; flex-direction: column; gap: 0.5rem; } .mtg-jornadas .mtg-torneo { flex-direction: row; align-items: center; gap: 0.9rem; padding: 0.7rem 0.9rem; overflow: hidden; } /* La imagen, de fondo y con su velo: la misma forma que en móvil, y el degradado sale de la variable compartida en lugar de repetirse aquí. */ .mtg-jornadas .mtg-torneo-miniatura { position: absolute; inset: 0; width: auto; height: auto; align-self: auto; margin: 0; border-radius: inherit; background: none; } .mtg-jornadas .mtg-torneo-miniatura::after { content: ""; position: absolute; inset: 0; background: var(--mtg-velo-ficha); } /* El texto, por encima del velo. Sin esto quedaría debajo y no se vería nada — es el mismo par de reglas que en móvil, y olvidarlo es un fallo que se ve enseguida pero no da error. */ .mtg-jornadas .mtg-torneo-cuerpo, .mtg-jornadas .mtg-torneo-lado { position: relative; } .mtg-jornadas .mtg-torneo-cuerpo { flex: 1 1 auto; padding: 0; } /* Aquí sí vuelve la columna de la derecha, al contrario que en móvil: en escritorio sobra ancho y el estado y la fecha se leen mejor alineados al borde. */ .mtg-jornadas .mtg-torneo-lado { flex: none; display: block; padding: 0; margin-top: 0; text-align: end; } .mtg-jornadas .mtg-torneo-nombre { font-size: 1rem; } /* ---- El listado de formatos, misma cuadrícula sobre el marcado de tabla ---- El HTML sigue siendo una `` —la cabecera escondida con `clip-path` sigue existiendo para el lector de pantalla, igual que en el modo ficha de móvil— y la forma la pone el CSS, acotada con `:has(td.mtg-columna-logo)` para no convertir en cajas la clasificación ni las listas de inscripción, que comparten `mtg-tabla-fichas`. Nota honesta que conviene conservar: por la prueba del proyecto («¿se comparan las celdas de una fila con las de al lado?») este listado ES una tabla —Sets, Prohibidas y Restringidas alimentan el botón Comparar—. El organizador eligió cajas viendo las dos capturas, y son siete filas: la pérdida de comparabilidad está a la vista y asumida. */ .mtg-tabla-fichas:has(td.mtg-columna-logo) { display: block; /* La caja pinta su propio fondo; el de tabla y el velo de hover de Bootstrap pintarían cada celda por su cuenta, que en bloques sueltos sale a parches. */ --bs-table-bg: transparent; --bs-table-hover-bg: transparent; } .mtg-tabla-fichas:has(td.mtg-columna-logo) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .mtg-tabla-fichas:has(td.mtg-columna-logo) tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0.75rem; } /* La cabecera de imagen se reserva con el relleno de arriba: 9rem de logo más el aire del texto. */ .mtg-tabla-fichas:has(td.mtg-columna-logo) tbody tr { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start; gap: 0.15rem 0.6rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--mtg-celda-fondo); overflow: hidden; padding: calc(9rem + 0.6rem) 0.8rem 0.8rem; } .mtg-tabla-fichas:has(td.mtg-columna-logo) tbody tr:hover { border-color: var(--mtg-acento); } .mtg-tabla-fichas:has(td.mtg-columna-logo) tbody td { display: block; width: auto; border: 0; padding: 0; } .mtg-tabla-fichas:has(td.mtg-columna-logo) tbody td.mtg-columna-logo { position: absolute; inset: 0 0 auto; height: 9rem; } .mtg-tabla-fichas:has(td.mtg-columna-logo) .mtg-logo-caja { position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; } /* De cabecera, el logo llena y sin plaquita — igual que en el fondo de móvil, y con la misma consecuencia: un logo de la semilla tiene que traer color propio. */ .mtg-tabla-fichas:has(td.mtg-columna-logo) .mtg-logo-caja > .mtg-logo-formato { object-fit: cover; background: none; padding: 0; border-radius: 0; } .mtg-tabla-fichas:has(td.mtg-columna-logo) tbody td[data-ficha-titulo] { flex: 0 0 100%; margin-bottom: 0.2rem; } .mtg-tabla-fichas:has(td.mtg-columna-logo) tbody td[data-ficha-titulo] a { font-size: 1.05rem; } /* Las cifras llevan su etiqueta delante, como en el modo ficha de móvil: sin cabecera de columna a la vista, un «11» suelto no dice nada. */ .mtg-tabla-fichas:has(td.mtg-columna-logo) tbody td[data-etiqueta]::before { content: attr(data-etiqueta) " "; color: var(--bs-secondary-color); font-size: 0.8rem; } /* El marcador de comparar, flotando sobre la imagen. Su fondo ya es opaco —`form-check-input` pinta el del tema—, así que se ve sobre cualquier tapete. */ .mtg-tabla-fichas:has(td.mtg-columna-logo) tbody td:first-child { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 2; } } .mtg-listado-vacio { padding: 1rem 0; color: var(--bs-secondary-color); } /* **`[hidden]` no gana a un `display` de autor.** La regla del navegador es `display: none` con especificidad de hoja de usuario-agente, así que el `display: flex` de estas dos clases la pisa y el elemento se sigue viendo. Hay que decirlo a mano, y es de los fallos que no dan error: se esconde con JavaScript, el atributo aparece en el DOM y en pantalla no cambia nada. */ .mtg-torneo[hidden], .mtg-torneos[hidden] { display: none; } /* ============================================================================ IMPRIMIR EL CUADRO ============================================================================ Para dos cosas concretas del organizador: sacar el cuadro en papel y pegarlo en la pared, y tener un PDF (que lo da el propio diálogo de imprimir, sin generarlo nosotros). Tres decisiones que se toman aquí y **no** las decide quien imprime: · **Horizontal.** Un cuadro es ancho por definición; en vertical no cabe ni un top 8. · **A dos lados.** La forma en línea de un top 32 mide 1697 px de alto (medido) y en una hoja horizontal queda ilegible. A dos lados parte la altura por la mitad. · **Tema claro.** Imprimir el tema oscuro es una hoja negra: gasta tinta y se lee peor. El tema es un atributo del , así que se cambia y se restaura en `beforeprint`/`afterprint`, igual que la forma del cuadro — sin duplicar una sola regla de las que ya existen. Lo que **sí** hace falta declarar aquí es que los colores salgan: por defecto los navegadores descartan fondos al imprimir, y con eso se irían el relleno de acento del ganador y el velo de las fichas. Sin `print-color-adjust: exact` el cuadro sale sin la mitad de su información. */ @media print { /* **Aquí NO va el `@page`**, y esa es la corrección del fallo que sacó dos PDF inservibles: un `@page` **anidado dentro de `@media print` no se aplica** en los navegadores basados en Chromium, así que la hoja salía vertical por mucho que dijera `size: A4 landscape`. La prueba estaba en el propio PDF —`/MediaBox [0 0 595.32 841.92]`, A4 en vertical— y la segunda prueba, más sutil, en que la forma a dos lados no aparecía: con la hoja en vertical el área mide ~700 px y no llegaba a los 992 de la forma de escritorio. Lo inyecta `site.js` **al nivel superior** de una hoja aparte, y de paso eso resuelve que haya tres impresiones con dos orientaciones distintas: horizontal para el cuadro, vertical para la clasificación y para los emparejamientos. Un documento solo puede declarar un `@page`, así que tiene que ser el que toque en cada impresión. */ html, body { background: #fff !important; } /* Los colores con significado se imprimen tal cual. Es lo que salva el hilo del ganador, el relleno de acento y los conectores. */ * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* Fuera todo lo que no es el cuadro: navegación, pie, grafo de fases, franja de características, título de la página, avisos, barra de acciones, y los propios controles de vista — un botón «Imprimir» impreso en el papel no tiene ninguna gracia. */ header, footer, .mtg-fases, .mtg-caracteristicas, .mtg-barra-acciones, .mtg-nota-de-estado, .alert, .modal, .mtg-cuadro-cabecera, .mtg-pestanas, .mtg-selector-rondas, .mtg-ir-a-ronda, [data-mtg-imprimir], [data-mtg-cuadro-forma] { display: none !important; } /* Los contenedores se quedan sin relleno ni márgenes, y **eso no es limpieza estética**: el zoom se calcula contra el ancho de la hoja, así que cualquier relleno por fuera del cuadro se suma a ese ancho y desborda. Lo destapó el emulador de impresión: sobraban 27 px y la hoja se partía en dos. El `container-fluid` de Bootstrap mete su `--bs-gutter-x` por los dos lados. */ .mtg-contenedor, main, .mtg-fase-cuerpo { padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; max-width: none !important; } /* El `

` con el nombre del torneo y el botón de volver: la cabecera del papel ya lleva el nombre, y un botón impreso no sirve para nada. */ .mtg-fase-cuerpo > .py-3 > .d-flex, body > .py-3 > .d-flex:first-child { display: none !important; } /* La cabecera del papel, que en pantalla no existe. */ .mtg-cabecera-impresion { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 0 1rem; margin-bottom: 4mm; font-size: 11pt; } .mtg-cabecera-impresion strong { font-size: 14pt; } /* ---- El cuadro cabe por construcción, sin escalar nada ---- Aquí hubo dos intentos fallidos y los dos por la misma razón: **suponer el tamaño de la hoja en píxeles**. El primero medía el cuadro con `getBoundingClientRect` (caja con scroll: 1209 en vez de 2496) y el segundo calculaba un factor de `zoom` contra 1047 px de hoja que no eran los reales — un top 32 salió con 6 de sus 9 columnas y el resto cortado. La forma que no puede fallar es dejar de contar en píxeles: **el ancho de columna se declara en milímetros de hoja**. Un A4 horizontal menos los márgenes de 10 mm da 277 mm útiles, y el servidor dice cuántas columnas hay (`--mtg-columnas`), así que cada una mide lo que le toca y la suma es exactamente el ancho de la hoja. No hay `zoom`, no hay medida, no hay nada que suponer. El precio es que en un top 32 la columna se queda en 29 mm y la letra en 6,5 pt: es pequeño, y es el tamaño real de meter nueve columnas en un A4. Con menos rondas se ensancha solo. */ /* Las tres medidas de hoja se declaran **en el fragmento y no en la rejilla**: describen el papel, no el cuadro, y el partido por el tercer puesto —que vive fuera de la rejilla— necesita heredarlas para salir del mismo ancho y con la misma letra que una ficha de la llave. */ #mtg-cuadro-fragmento { --mtg-hoja-util: 277mm; /* El hueco entre columnas **es el sitio del conector**, no aire: los dos brazos miden medio hueco cada uno. Estuvo en 1,5 mm, que dejaba el brazo en 0,75 y la llave casi sin tramo horizontal. Medido en el peor caso —un top 32, nueve columnas—, subirlo a 3 mm dobla el conector y cuesta 0,3 pt de letra y un carácter de nombre: la columna pasa de 29,4 a 28,1 mm. De ahí en adelante ya solo se paga letra sin ganar nombre (4 mm → 5,9 pt y los mismos 14 caracteres), así que 3 es la rodilla de la curva. */ --mtg-hueco-papel: 3mm; --mtg-columna-papel: calc( (var(--mtg-hoja-util) - (var(--mtg-columnas, 5) - 1) * var(--mtg-hueco-papel)) / var(--mtg-columnas, 5)); } .mtg-cuadro { /* ---- Los grises del tema claro no valen sobre papel ---- El borde de la ficha es `--bs-border-color`, que en claro es `#dee2e6`: **1,30 de contraste** sobre el blanco de la hoja. O sea que el recuadro de la ficha prácticamente no existía, y el fondo de su franja (`#f8f9fa`) daba **1,05**, indistinguible del papel. Lo vio el organizador en el PDF. Se corrige **redefiniendo la variable en el cuadro** y no rescribiendo los tres bordes que la usan —el de la ficha, el de debajo de la franja y el que separa a los dos jugadores—, que es la forma de que no se quede uno atrás. `#6c757d` da **4,69**, muy por encima del 3:1 que se le pide a un gráfico con significado, y **se queda por debajo del 5,94 del hilo dorado**: así el camino del campeón sigue pesando más que el marco de las cajas. La casilla vacía no se ve afectada porque declara su color aparte (`--bs-secondary-color`, 5,76), y ahí la señal es el discontinuo. */ --bs-border-color: #6c757d; overflow: visible !important; width: 100% !important; gap: var(--mtg-hueco-papel) !important; /* **La letra es una fracción del ancho de columna**, no una resta con un coeficiente ajustado a mano. Con eso entran los mismos caracteres por nombre en los tres tamaños, que es lo que de verdad se quiere: un top 32 no necesita «letra pequeña», necesita la letra que le corresponde a una columna de 29 mm. Sale 6,4 pt en un top 32, 8,4 en un top 16 y 11,8 en un top 8. Hubo antes una resta de 0,9 pt por columna, y lo que la delató fue medir: el alto de la ficha **no cambiaba** con la letra —53 px de 5,6 a 7,4 pt— porque la franja y la semilla estaban en `rem`, así que el número estaba ajustado contra una restricción que no existía. Lo que limita de verdad es el ancho, y por eso el ancho es lo que lo decide. El hueco sobra: 22 px de holgura en el caso más apretado, medido. */ font-size: calc(var(--mtg-columna-papel) / 13); } .mtg-cuadro .mtg-cuadro-mitad { gap: var(--mtg-hueco-papel) !important; } .mtg-cuadro .mtg-cuadro-columna, .mtg-cuadro .mtg-cuadro-centro { flex: 0 0 var(--mtg-columna-papel) !important; min-width: 0 !important; width: var(--mtg-columna-papel) !important; } /* ---- Dentro de la ficha, el espaciado va en `em` y no en `rem` ---- Es la misma lección que la franja y la semilla, y es la que de verdad decide si el cuadro se puede leer. **`rem` es relativo a la raíz**, así que todo el adorno interno de la ficha seguía midiendo lo mismo en un top 8 que en un top 32, donde la columna tiene la mitad de ancho. El desglose de los 111 px de una columna de top 32, medido: relleno de la ficha 8, **marcador 35** —`min-width: 2.2rem`—, relleno de los lados 16, hueco 5, semilla 14… y **17 px para el nombre**, o sea ocho caracteres. Con nombres de prueba de cuatro letras («J040») eso no se ve; con un «Alejandro Fernández» se ve enseguida, y no como un desborde sino como puntos suspensivos casi inmediatos, que es peor porque parece intencionado. En `em` el adorno encoge con la columna y el nombre se queda con lo que sobra, que es mucho más. La cuenta es la misma en los tres tamaños: proporción constante, ningún número ajustado a mano. Los puntos suspensivos ya los pone la regla de pantalla —`.mtg-cruce-nombre` los lleva sin condición de medio—, así que aquí no hacen falta. Hubo una regla mía para `.mtg-lado-nombre`, que es **la ficha de la fase de rondas**: no hacía nada. Tercera vez que confundo las dos fichas. */ /* ---- El rótulo de ronda: escalado, y con el alto reservado igual para todos ---- Otro `rem` que no encogía —12 px, **más grande que el texto de las fichas**, que en un top 32 está en 8,2— y esta vez no era solo cuestión de tamaño: en una columna de 28 mm «Cuartos de final» se parte en dos líneas mientras «Semifinales» cabe en una, así que **esa columna empezaba 14,4 px más abajo que sus vecinas** y con ella todos sus huecos. Los codos de la pareja seguían encontrándose entre sí, pero el punto de encuentro se iba 10,8 px del centro de la mesa a la que apuntan. En pantalla no se ve porque la columna mide 256 px y ningún rótulo se parte: es un fallo que **solo existe en papel**. Es el mismo defecto que ya obligó a sacar los rótulos a una fila propia de la rejilla en la forma «en línea»; en «a dos lados» seguía vivo. Aquí se cierra reservando **dos líneas para todos**, así que las columnas arrancan juntas por construcción y no porque el rótulo más largo quepa por los pelos — que es lo que se rompería en silencio el día que aparezca una «Ronda de 128». Y sale gratis: dos líneas a 0,9 em ocupan 17,8 px donde las dos grandes ocupaban 28,8. */ .mtg-cuadro .mtg-cuadro-titulo { height: 2.4em; line-height: 1.2; font-size: 0.9em; } :is(.mtg-cuadro, .mtg-cuadro-tercero) .mtg-cruce-lado { gap: 0.25em; padding: 0.15em 0.35em; } :is(.mtg-cuadro, .mtg-cuadro-tercero) .mtg-cruce-marcador { min-width: 2.2em; } /* La corona lleva su tamaño en los atributos del `` —14 px—, que es la otra forma de no encoger. En un top 32 salía a 1,6 veces el cuerpo del texto y era lo que dejaba **la final 4 px más alta** que las demás fichas: 44,1 contra 39,9, medido. En `em` guarda la misma proporción que en pantalla, donde son 14 px junto a un cuerpo de 16. */ .mtg-cuadro .mtg-corona { width: 1em; height: 1em; } :is(.mtg-cuadro, .mtg-cuadro-tercero) .mtg-cruce-marcador > span { padding: 0 0.35em; } /* ---- Y el alto, que costó tres intentos ---- Arreglar solo el ancho dejó un top 32 en 813 px sobre 718 de hoja: cabía a lo ancho y se salía por abajo. Los dos intentos fallidos y por qué: · **`max-height` en los huecos.** Los huecos son `flex: 1 1 0` y reparten la altura de la columna, así que limitarlos no da altura a nadie: la columna se quedó sin nada que repartir y todo colapsó a 11 px. Y `overflow: hidden` empeoró la caída, porque le quita al hueco su **altura mínima automática** — sin ella ya nada lo sostenía. · **La altura en la columna.** También circular: la columna se estira al alto de sus hermanas (`align-items: stretch`), o sea que su altura depende del contenido, que es justo lo que se quiere limitar. Lo que funciona es dársela **al cuadro entero**: el estirado la propaga a las mitades, de ahí a las columnas y de ahí al reparto de huecos, que es el mecanismo del que ya dependen los conectores para ser exactos. Los 148 mm están **medidos a base de ajustar**, no deducidos: 190 de hoja útil menos la cabecera del papel (28 px) y el rótulo de ronda (14), y aun así con 172 el documento se iba a 790 px sobre 718 de hoja, y con 155 se pasaba de 7. */ .mtg-cuadro { height: 148mm !important; } /* ---- El partido por el tercer puesto también va en la hoja ---- Está **fuera de la rejilla** —no forma parte de la llave—, así que su alto se suma al del cuadro y sin esto el cuadro se iba a una segunda hoja. Los 148 mm están ajustados a mano contra la hoja entera, o sea que aquí hay que devolverle a la llave lo que se lleva esta caja: se le quitan, no se estira la hoja. Se acota con `:has(~ …)` para no encoger el cuadro de los torneos que **no** llevan tercer puesto, que son casi todos: sin la guarda, cada cuadro impreso perdería 36 mm de alto sin motivo. */ .mtg-cuadro:has(~ .mtg-cuadro-tercero) { height: 112mm !important; } /* La ficha del tercer puesto se compacta **con las mismas reglas que las del cuadro**, y por eso esas reglas están acotadas con `:is(.mtg-cuadro, .mtg-cuadro-tercero)` en vez de solo a `.mtg-cuadro`. Sin eso quedaba fuera de todas y se imprimía con el relleno de pantalla: **90 px de alto contra los 62 de las demás**, medido, o sea un 45 % más alta al lado de la llave. Lo que **no** se comparte es la rejilla ni la altura de hoja, que son del cuadro y no de la ficha. */ .mtg-cuadro-tercero { margin-top: 4mm; /* Ancho y letra **los mismos que una columna del cuadro**, con la misma fórmula y no con una cifra suelta: `--mtg-columna-papel` se hereda porque se declara en el fragmento y no en la rejilla. Con un `8pt` a ojo la ficha salía en 47 px contra los 62 de la llave — el error simétrico del de antes, y de los dos el peor es el que parece intencionado. */ width: var(--mtg-columna-papel); font-size: calc(var(--mtg-columna-papel) / 13); } /* `min-height: 0` es lo que permite que el hueco se encoja por debajo de su contenido: sin él, flexbox se niega a bajar del alto natural de la ficha y la columna vuelve a desbordar. **Y aquí no puede ir un `overflow: hidden`.** Lo tuvo, arrastrado del intento fallido de limitar el alto por los huecos, y el precio fue que **el cuadro se imprimía sin una sola llave**: los conectores son pseudo-elementos del hueco que nacen en `left: 100%`, o sea justo fuera de su caja, así que recortar el hueco los borra enteros. Lo vio el organizador en el PDF, no yo midiendo — es un fallo que no da error y que ninguna de mis comprobaciones de alto podía detectar, porque el cuadro cabía perfectamente. Ya no hace falta: la ficha entra de sobra en su hueco (40 px en 66 en el caso más apretado), así que no hay nada que recortar. */ .mtg-cuadro .mtg-cuadro-hueco { min-height: 0 !important; padding: 0.4mm 0 !important; } /* ---- Y el brazo del conector mide la mitad del hueco entre columnas ---- En pantalla eso ya se cumple por casualidad de dos constantes que cuadran: el hueco es `1.5rem` (24 px) y los dos brazos —el codo que sale de una mesa y el tramo de entrada de la siguiente— miden `0.75rem` cada uno, así que se tocan justo en medio. En papel el hueco pasa a milímetros y los brazos seguían en `rem`, con lo que **los 24 px de brazo tenían 5,7 px de sitio**: aunque no los hubiera recortado el `overflow`, el codo habría entrado 18 px dentro de la ficha de la columna siguiente y el tramo de entrada habría salido por detrás de la anterior. Puestos en `calc(hueco / 2)` la relación deja de ser una casualidad y pasa a ser la definición: los dos brazos suman el hueco, midan lo que midan. */ .mtg-cuadro .mtg-cuadro-mitad .mtg-cuadro-hueco::after, .mtg-cuadro .mtg-cuadro-columna:not(:first-child) .mtg-cuadro-hueco::before, .mtg-cuadro .mtg-cuadro-centro .mtg-cruce::before { width: calc(var(--mtg-hueco-papel) / 2); } /* Y la ficha se compacta —tres renglones, número de mesa y dos jugadores, sin el relleno de pantalla— pero **conserva su altura natural y se centra en su hueco**, exactamente igual que en pantalla. Aquí hubo un `height: 100%` y era un error de bulto: el hueco de una mesa **se dobla en cada ronda** (es lo que hace exactos los conectores), así que estirar la ficha a su hueco daba cajas cada vez más altas y una final del alto de la columna entera. Lo vio el usuario en el PDF. El alto de la hoja no lo sostiene la ficha: lo sostiene el `height` del cuadro de arriba, que se reparte por sí solo. La ficha solo tiene que caber en lo que le toque, y le sobra sitio —en un top 32, 40 px de ficha en 70 de hueco—. */ :is(.mtg-cuadro, .mtg-cuadro-tercero) .mtg-cruce { padding: 0.5mm 1mm !important; line-height: 1.15; } /* ---- Y lo que no encogía: la franja y el chip de semilla ---- Las dos se declaran en `rem`, que es relativo **a la raíz** y no a la ficha, así que se quedaban en 12 px por mucho que bajara el cuerpo del cuadro. Dos consecuencias, y la primera es la mala: con el nombre del jugador en 7,5 px, **lo que más importa de la ficha era lo más pequeño de la ficha**. La segunda es que la altura de la ficha no dependía del cuerpo —medido: 53 px con cualquier tamaño entre 5,6 y 7,4 pt—, o sea que bajar la letra no ganaba ni un píxel de sitio. En papel pasan a `em`. Con eso la ficha vuelve a escalar con su letra y el cuerpo se puede subir hasta lo que de verdad la limita, que es el hueco más pequeño del cuadro. */ :is(.mtg-cuadro, .mtg-cuadro-tercero) .mtg-cruce-franja { margin: 0 !important; padding: 0 !important; line-height: 1.1; font-size: 0.85em; /* Y el número de mesa **en el color del cuerpo**, no en el secundario: daba **6,59** de contraste, que en pantalla basta pero a 6 pt sobre papel no —lo leyó el organizador y le costaba—. Pasa a **14,63**. En papel no hay lujo de texto secundario: la jerarquía ya la marcan el tamaño (0,85 em) y la banda, y el número de mesa es justo lo que el juez busca con el dedo. */ color: var(--bs-body-color); } /* El chip solo tiene que dar cabida a dos dígitos —la semilla más alta de un top 32 es 32—, y su `1.35rem` de ancho mínimo no encogía tampoco. */ :is(.mtg-cuadro, .mtg-cuadro-tercero) .mtg-puesto-chip { min-width: 1.4em; padding: 0 0.15em; font-size: 0.85em; } /* **`.mtg-cruce-lado`, no `.mtg-lado`**: son dos fichas distintas —la del cuadro y la de la fase de rondas— y apuntar a la equivocada fue lo que hizo que esta regla no hiciera nada durante tres intentos. La del cuadro lleva `min-height: 32px` por jugador, o sea 64 px de mínimo por ficha, y eso es lo que la sacaba de su hueco: 82 px de contenido en 63 de sitio, con 19 recortados por abajo — justo la segunda línea, el nombre del segundo jugador. */ :is(.mtg-cuadro, .mtg-cuadro-tercero) .mtg-cruce-lados, :is(.mtg-cuadro, .mtg-cuadro-tercero) .mtg-cruce-lado, :is(.mtg-cuadro, .mtg-cuadro-tercero) .mtg-cruce-marcador { min-height: 0 !important; padding-top: 0.2mm !important; padding-bottom: 0.2mm !important; } /* **En papel el chip vuelve a ser solo el puesto.** En pantalla dice también de qué grupo viene —«1 G4»—, que es lo que distingue a dos ganadores de grupo; aquí no cabe: la columna de un top 32 mide 28 mm y el chip ya se lleva 14 px de los 111, así que doblarlo saldría del nombre, que es el dato. Y en papel el juez tiene la clasificación de grupos al lado. */ .mtg-puesto-grupo { display: none; } /* ---- La caja de un grupo, en papel ---- Se queda, y no es adorno: en una hoja de emparejamientos de ocho grupos, lo que dice dónde acaba uno es el recuadro. Los fondos sobreviven a la impresión porque más arriba se fuerza `print-color-adjust: exact`, así que la cabecera conserva su franja. Lo que **no** sobrevive es el gris del tema claro: `--bs-border-color` es `#dee2e6`, **1,30 de contraste** sobre el blanco de la hoja, o sea un recuadro que prácticamente no está. Misma corrección que el cuadro y por el mismo motivo: se redefine **la variable** dentro de la caja en lugar de rescribir sus dos bordes, que es lo que impide que se quede uno atrás. `#6c757d` da **4,69**, por encima del 3:1 de un gráfico con significado. Y el relleno del cuerpo baja a cero por los lados: en papel las mesas son líneas a todo el ancho, no fichas, y una sangría solo les quitaría sitio al nombre. */ /* Sin `break-inside: avoid`: un grupo de veinte mesas no cabe en una hoja, así que pedir que no se parta lo empujaría entero a la siguiente y acabaría desbordándola igual. Lo que no se parte es **la mesa**, que ya lo declara por su cuenta. */ .mtg-grupo-caja { --bs-border-color: #6c757d; } .mtg-grupo-cuerpo { padding: 0.5mm 1.5mm !important; } /* ---- Los emparejamientos: una mesa por línea, en orden de mesa ---- En pantalla son fichas en rejilla porque un emparejamiento es una unidad, no una fila de celdas comparables. En papel se busca lo contrario: una lista que se recorre con el dedo buscando «mesa 14». Así que la ficha se aplana a una fila con `display: contents` en el cuerpo, que asciende sus hijos —los dos lados y el marcador— a huecos de la rejilla de la ficha. El orden de mesa lo garantiza el servidor ordenando la lista; aquí solo se cambia la forma. */ .mtg-mesas { display: block !important; } .mtg-mesa { display: grid !important; grid-template-columns: 22mm 1fr 16mm 1fr; align-items: baseline; gap: 0 3mm; padding: 1.6mm 0 !important; border: 0 !important; /* `#999` daba **2,85** sobre el papel, por debajo del 3:1 que se le pide a una línea con significado — y esta lo tiene: es lo que separa una mesa de la siguiente en una hoja de 49. `#6c757d` da 4,69, el mismo gris que el marco de las fichas del cuadro. */ border-bottom: 0.2mm solid #6c757d !important; border-radius: 0 !important; background: none !important; font-size: 10pt; /* Una mesa no se parte entre dos hojas. */ break-inside: avoid; } .mtg-mesa-cuerpo { display: contents !important; } /* El número de mesa, en el color del cuerpo por lo mismo que el del cuadro: en secundario daba 6,78 y es justo el dato que se busca recorriendo la hoja. Pasa a 15,43. */ .mtg-mesa-franja { margin: 0 !important; font-size: 9pt; color: var(--bs-body-color) !important; } /* **La hora no se imprime**, y no es un olvido. En papel la ficha es una rejilla de cuatro columnas y la primera —donde vive la franja— mide **22 mm**: «vie 21 ago · 19:00» no cabe ahí, así que partiría cada renglón en dos y una hoja de 49 mesas se iría a tres páginas. Y la hoja de pareos existe para una sala donde todo el mundo juega a la vez: quien agenda partidas las lee en la agenda, que es una pantalla. Si algún día hace falta en papel, necesita **columna propia** y eso cambia la rejilla. Vale también para la ficha del cuadro, que usa **la misma clase** porque es el mismo fragmento — y ahí hace más falta todavía: su columna mide 28 mm y el chip ya se lleva 14 px. */ .mtg-mesa-hora { display: none !important; } .mtg-mesa-marcador { justify-self: center; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: inherit !important; font-weight: 700; } .mtg-mesa-explicacion { grid-column: 1 / -1; margin: 0 !important; font-size: 8pt; } /* ---- La clasificación: una fila por jugador, con todas las columnas ---- El modo ficha es de pantalla —ya está acotado con `@media screen`— así que en papel la tabla es una tabla. Lo que sí hay que declarar es que la cabecera se repita en cada hoja: con 100 jugadores son tres, y una tabla sin cabecera a partir de la segunda no se puede leer. */ .mtg-tabla-fichas thead { display: table-header-group !important; } /* Las líneas entre filas daban **1,30** sobre el papel —`#dee2e6`, el mismo gris del tema claro que hacía invisible el marco de las fichas del cuadro—, o sea una tabla de 100 filas y ocho columnas sin una sola línea con la que seguir el renglón. `#6c757d` da 4,69. Va en las dos variables porque las celdas de una tabla de Bootstrap sacan su color de `--bs-table-border-color`, que a su vez cae en `--bs-border-color`: poner solo la segunda no basta si el tema ha resuelto ya la primera. **El texto de las celdas se deja como está**, y eso fue una corrección de rumbo: las cifras de desempate llevan `text-body-secondary` en el marcado y dan 6,78, que a 9 pt pasa de sobra el 4,5:1 de un texto normal. Aclararlas todas habría aplanado la única jerarquía que hace escaneable una tabla de ocho columnas. Aquí hubo un `color: var(--bs-body-color)` que además no servía: la utilidad de Bootstrap lleva `!important` y le gana, así que a esas celdas no llegaba, y a la cabecera —que ya estaba en negro— la bajaba de 21 a 15,43. */ .mtg-tabla-fichas { --bs-border-color: #6c757d; --bs-table-border-color: #6c757d; } .mtg-tabla-fichas th, .mtg-tabla-fichas td { padding: 1mm 1.5mm !important; font-size: 9pt; } .mtg-tabla-fichas tbody tr { break-inside: avoid; } /* El menú de tres puntos de cada fila no se imprime: es una acción. */ .mtg-tabla-fichas [data-ficha-acciones] { display: none !important; } } /* En pantalla la cabecera del papel no existe. Va fuera del `@media print` a propósito: si estuviera dentro como `display: none`, la regla de imprimir tendría que pelearse consigo misma. */ .mtg-cabecera-impresion { display: none; } /* Un icono dentro de un botón normal, para los que van **sin rótulo**. Solo la impresora del cuadro lo usa hoy: es de los poquísimos dibujos que no necesitan explicación. Cualquier otro lleva rótulo, como los de la barra de acciones. */ .mtg-icono-boton { width: 1.1rem; height: 1.1rem; } /* ---- Un icono **al lado de su rótulo**, en un botón que no es de la barra de acciones ---- Se distingue de `.mtg-icono-boton` en que allí el botón no lleva texto: aquí el icono acompaña y el rótulo sigue siendo quien lo nombra, así que va `aria-hidden`. **1 rem y no 1,125** como los de la barra: estos viven en botones `btn-sm`, cuya letra es más pequeña, y con el tamaño de los otros el dibujo pesaba más que la palabra. El `flex: 0 0 auto` no es adorno: sin él el icono es un hijo flexible y se estruja antes que el texto cuando el rótulo es largo, que es justo al revés de lo que se quiere. */ .btn:has(> .mtg-icono-junto) { display: inline-flex; align-items: center; gap: 0.35rem; } .mtg-icono-junto { flex: 0 0 auto; width: 1rem; height: 1rem; } /* En táctil crece al mismo tamaño que los iconos de la barra de acciones: dentro de una caja de 44 × 44 —el mínimo del dedo— 17,6 px se ven perdidos, y eso es lo que se veía en el botón de imprimir. **Y va aquí, después de la regla base, no en el bloque de `pointer: coarse` de más arriba**: con la misma especificidad manda el orden de fuente, así que allí la base lo pisaba y el icono seguía en 18 px. Es la misma trampa que ya obligó a sacar las reglas de escritorio de la barra a su propio medio. */ @media (pointer: coarse) { .mtg-icono-boton { width: 1.375rem; height: 1.375rem; } } /* ============================================================================ LA AYUDA ============================================================================ Una página de documentación, así que la primera decisión es de tipografía y no de color: **una medida de línea corta**. El resto de la aplicación usa todo el ancho porque son tablas y cuadros; aquí son párrafos, y una línea de 1200 px se lee mal — el ojo pierde el renglón al volver. 65 caracteres es la medida clásica; `72ch` deja sitio para las tablas comparativas sin romperla. */ .mtg-ayuda { max-width: 72ch; } /* Las tablas y los diagramas **sí** pueden salirse de la medida de texto: son datos, no prosa, y apretarlos a 72ch los partiría en más renglones. */ .mtg-ayuda .table-responsive, .mtg-ayuda .mtg-ayuda-figura, .mtg-ayuda .mtg-ayuda-captura, .mtg-ayuda .mtg-ayuda-flujo { max-width: none; } /* ---- Las capturas de pantalla de la ayuda ---- Las pidió el organizador: «que la de ayuda la llenaras de capturas de la aplicación para ayudar en las explicaciones y para darle algo de color». **La leyenda no es un adorno, es la mitad del asunto.** Una captura es la documentación que envejece más rápido que hay, y a diferencia del texto nada puede comprobar que siga siendo verdad. Con la leyenda debajo, una imagen que envejezca —o que no cargue— deja dicho *qué se estaba enseñando*, que es lo que evita el peor caso: un hueco silencioso en medio de una explicación. Por eso el `alt` es descriptivo y la leyenda va siempre. Se generan con `tools/qa/capturas-de-ayuda.ps1`, así que rehacerlas todas es un comando. */ .mtg-ayuda-captura { margin-block: 1.25rem; } /* **La captura se sale de la medida de texto, y las tablas de esta página no.** Aquí `max-width: none` no basta para eso y conviene saber por qué: la medida la pone `.mtg-ayuda` con su `max-width: 72ch`, o sea **el padre**, así que quitarle el tope a la figura no la hace más ancha — hay que darle un `width` mayor que el padre. Medido a 1280 px: la columna de texto son **621** y la página **1265**, así que a la derecha sobraban 640 px de nada mientras la captura se pintaba a 621 desde un original de 1000, o sea al 62 %. El tope es **64 rem acotado por la ventana**: a 1280 son 1024 px y la figura acaba en x=1036, dentro de los 1253 útiles del contenedor; a 992, 944 y acaba en 956. Sin el `calc(100vw …)` el desborde aparece solo, que es el defecto que este proyecto mide en cada pasada. Solo de 992 px en adelante: por debajo la columna ya ocupa casi todo y salirse no ganaría nada. */ @media (min-width: 992px) { .mtg-ayuda-captura { width: min(64rem, calc(100vw - 3rem)); } } /* **Dentro de un diálogo, la figura no hereda el ancho de /Ayuda.** La regla de arriba existe para salirse de la columna de 72ch de aquella página, y un modal no tiene esa columna: heredada, la figura medía **1024 px en un cuerpo de 798** y el diálogo de ayuda del ID de Discord scrolleaba en horizontal. Dos clases le ganan a una, así que esto manda sobre la media query sin depender del orden. */ .modal .mtg-ayuda-captura { width: auto; } /* **`max-width` y no `width`**, y la diferencia importa: con `width: 100%` la captura se estiraría hasta el ancho del contenedor —1265 px a 1280 de ventana— y una imagen de 1000 px se vería aumentada un 26 %, borrosa. Así se pinta a su tamaño cuando cabe y encoge cuando no. Es la figura la que puede salirse de la medida de texto (72ch ≈ 700 px), que es lo que le da sitio para llegar a su tamaño real. */ .mtg-ayuda-captura > img { display: block; max-width: 100%; height: auto; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); /* La captura es de la aplicación en tema oscuro. Sobre el tema claro necesita su propio fondo detrás o las esquinas redondeadas dejan ver el blanco por dentro del arco. */ background: var(--bs-tertiary-bg); } .mtg-ayuda-captura > figcaption { margin-block-start: 0.4rem; font-size: 0.875rem; line-height: 1.4; color: var(--bs-secondary-color); } /* **En papel no se imprimen.** La ayuda cabe en unas pocas hojas de texto; con doce capturas de 1000 px pasa a ser un folleto, y en una impresora en blanco y negro una captura de tema oscuro sale como un rectángulo gris. La leyenda **sí** se queda, que es lo que hace que el papel no pierda información. */ @media print { .mtg-ayuda-captura > img { display: none; } } .mtg-ayuda section { /* Aire entre secciones, que es lo que hace que un índice largo se pueda recorrer con la rueda sin perderse. Y `scroll-margin-top` para que al llegar desde el índice el título no quede pegado al borde de arriba. */ margin-top: 2.5rem; scroll-margin-top: 1rem; } .mtg-ayuda h2 { border-bottom: 1px solid var(--bs-border-color); padding-bottom: 0.35rem; margin-bottom: 1rem; } .mtg-ayuda h3 { margin-top: 1.5rem; color: var(--bs-secondary-color); } /* ---- El índice ---- Píldoras que fluyen y no una lista vertical: son trece secciones, y en columna se comerían la primera pantalla entera en un móvil. Aquí lo que se hace es **buscar un nombre**, no leerlas en orden. */ .mtg-ayuda-indice { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; } .mtg-ayuda-indice > a { padding: 0.35rem 0.7rem; border: 1px solid var(--bs-border-color); border-radius: 2rem; background: var(--mtg-celda-fondo); color: var(--bs-body-color); text-decoration: none; font-size: 0.875rem; } .mtg-ayuda-indice > a:hover, .mtg-ayuda-indice > a:focus-visible { border-color: var(--mtg-acento); } /* En táctil, los 44 px de siempre. Un índice es justo lo que se pulsa con el pulgar. */ @media (pointer: coarse) { .mtg-ayuda-indice > a { min-height: var(--mtg-toque); display: flex; align-items: center; } } /* ---- Los diagramas de fases ---- **HTML y no SVG**, a propósito: son cajas con texto dentro, así que se leen con un lector de pantalla, se encuentran con Ctrl+F y se reparten solas en móvil. Un SVG con texto no hace ninguna de las tres. La flecha va en un `::after` del paso, no en un elemento suyo: así no hay que pintar una flecha de más al final ni contar cuántos pasos hay. */ .mtg-ayuda-flujo { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; margin: 1rem 0; } .mtg-ayuda-paso { position: relative; flex: 1 1 9rem; padding: 0.6rem 0.75rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--mtg-celda-fondo); } .mtg-ayuda-paso > span { display: block; font-size: 0.8125rem; color: var(--bs-secondary-color); } /* La flecha entre pasos. `content` con `attr` no hace falta: es siempre la misma. Va **dentro del hueco** —`right: -0.5rem`, la mitad del `gap`— y con `pointer-events: none` para no comerse el clic de nada. Y no se pinta en el último de cada fila: como los pasos se reparten con `flex-wrap`, cuál es el último cambia con el ancho, así que se resuelve con `:last-child` para el final de verdad y aceptando que en un salto de línea quede una flecha apuntando al vacío — es lo que hace cualquier diagrama impreso y se lee sin problema. */ .mtg-ayuda-paso::after { content: "→"; position: absolute; top: 50%; right: -0.6rem; transform: translateY(-50%); color: var(--bs-secondary-color); pointer-events: none; } .mtg-ayuda-paso:last-child::after { content: none; } /* ---- En un móvil el diagrama baja en columna ---- Con `flex-wrap` a 375 px caben dos pasos por fila, y el segundo de cada fila se queda con una flecha apuntando al vacío: el siguiente paso no está a su derecha sino debajo. En columna la flecha señala adónde de verdad va, que es lo único que un diagrama de flujo tiene que hacer bien. El umbral son 576 px y no los 768 de las tablas: lo que decide aquí es si caben **dos cajas de 9 rem** en una línea, no si una tabla se convierte en fichas. */ @media (max-width: 575.98px) { .mtg-ayuda-flujo { flex-direction: column; /* Más aire que en fila, y por una razón medible: la flecha mide unos 16 px y el `gap` de 8 no da para meterla dentro, así que se quedaba encima del borde de la caja. Con 20 px cae en el hueco. */ gap: 1.25rem; } /* **`flex: 0 0 auto` no es opcional aquí**, y falla de forma llamativa: en columna, la base de un elemento flexible es su *alto*, así que el `flex: 1 1 9rem` de la regla base dejaba cada caja en 144 px de altura — cuatro cajas casi vacías ocupando una pantalla entera. Lo que se quiere es que cada una mida lo que mide su texto. */ .mtg-ayuda-paso { flex: 0 0 auto; } .mtg-ayuda-paso::after { content: "↓"; top: auto; right: auto; bottom: -1.15rem; left: 50%; transform: translateX(-50%); } } /* ---- Las tablas de la ayuda desbordan, no se comprimen ---- Es la trampa que ya está documentada para la clasificación de liga: una tabla sin ancho mínimo **no desborda nunca**, aprieta sus columnas. Aquí eso deja «Cómo empareja» partido en dos líneas y una columna de texto de 40 px en un móvil, que es ilegible; con un mínimo, la tabla se sale y su contenedor le da barra —y arrastre con el ratón, por `data-mtg-arrastrable`—. 30 rem es lo que necesita la más ancha de las cinco para que ninguna cabecera se parta. */ .mtg-ayuda-tabla { min-width: 30rem; } /* Un paso opcional se dibuja con el borde discontinuo. **Solo se toca el estilo del lado que ya tiene anchura declarada**: cambiar `border-style` de un lado que nunca la declaró le resucita la anchura `medium` —3 px— y la caja crece sin que nada avise. Ya mordió dos veces en el cuadro. */ .mtg-ayuda-paso-opcional { border-style: dashed; } /* ---- El cuadro de ejemplo ---- Este sí es un dibujo, así que va en SVG. Con `viewBox` y sin ancho fijo se escala solo, y todo el trazo usa `currentColor`: sirve en los dos temas sin declarar un color. */ .mtg-ayuda-figura { margin: 1rem 0; } .mtg-ayuda-cuadro { width: 100%; max-width: 34rem; height: auto; color: var(--bs-body-color); } .mtg-ayuda-figura > figcaption { font-size: 0.875rem; color: var(--bs-secondary-color); } /* El icono de un tipo de torneo dentro de una tabla de la ayuda. A 1 em y con `vertical-align: middle`, que es lo que evita que la línea base lo empuje y agrande la fila — medido en la clasificación de liga: un icono de 1,1 em subía la celda de 20,4 a 26,8 px. */ .mtg-ayuda-icono { width: 1em; height: 1em; vertical-align: middle; margin-right: 0.15rem; } /* El glosario en dos columnas cuando cabe: un término y su definición se leen mejor juntos que en dos renglones. Por debajo de 480 px vuelve a apilarse solo. */ .mtg-ayuda-glosario { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: 0.35rem 1rem; } .mtg-ayuda-glosario > dt { font-weight: 600; } .mtg-ayuda-glosario > dd { margin: 0; color: var(--bs-secondary-color); } @media (max-width: 479.98px) { .mtg-ayuda-glosario { grid-template-columns: 1fr; } .mtg-ayuda-glosario > dd { margin-bottom: 0.5rem; } } /* El selector de rondas de la pantalla de reparto. Con el dedo, **el alto ya lo da la regla general de `.btn` pero el ancho no**: medido a 375 px daba 26 × 44, o sea un objetivo tan estrecho como un dígito. El `min-width` es el mismo recurso —y casi la misma cifra— que igualó los botones del selector de rondas de la fase, que también son números de una y dos cifras. */ @media (pointer: coarse) { .mtg-selector-rondas-grupo .btn { min-width: 2.75rem; } } /* ---- El reparto en grupos ---- Cajas iguales en una rejilla que se llena sola. `auto-fill` con un mínimo y no un número de columnas por tamaño: los grupos van de 2 a 16 y sus tamaños de 2 a 10, así que un reparto de columnas fijo dejaría huecos en unos casos y apretaría en otros. El mínimo son 11 rem porque lo que manda es el **nombre**: por debajo de eso «Maria del Carmen Villanueva» se recorta en todas las cajas a la vez, y el reparto es justo la pantalla donde el organizador está buscando nombres concretos. */ .mtg-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; } .mtg-grupo { padding: 0.6rem 0.75rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--mtg-celda-fondo); } .mtg-grupo-titulo { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.35rem; font-size: 0.95rem; font-weight: 600; } /* La flecha que cambia el grupo entero de sitio. **Se empuja al final** con `margin-inline-start: auto`, igual que la de cada jugador dentro de su fila, para que todas las flechas de la pantalla caigan en la misma columna. Se dibuja como texto y no como botón por el mismo motivo que allí: en una caja de 11 rem un botón de Bootstrap por grupo la llenaría de marcos. */ .mtg-grupo-mover { margin-inline-start: auto; padding: 0 0.2rem; border: 0; border-radius: var(--bs-border-radius-sm); background: transparent; color: var(--bs-secondary-color); font: inherit; line-height: 1; } .mtg-grupo-mover:hover, .mtg-grupo-mover:focus-visible { background: var(--mtg-celda-fondo); color: var(--bs-body-color); } /* 44 px con el dedo, como el hueco de un jugador. */ @media (pointer: coarse) { .mtg-grupo-mover { min-width: 44px; min-height: 44px; } } /* ---- Los pasos de la pantalla de reparto ---- **No es un asistente** —no hay «siguiente» ni nada bloqueado—, pero las decisiones van en orden y la pantalla se leía como cuatro bloques sueltos. El número es la señal mínima que lo dice. La bola va en **contorno y no rellena**, y no es estética: rellena de acento diría «esto se pulsa», que es lo único que significa el amarillo aquí, y un número no se pulsa. Es el mismo tratamiento que `.mtg-fase-bola` le da a una fase que no es la actual. `flex: 0 0 auto` para que la bola no se estruje cuando el título es largo, que es la trampa de siempre con un hijo de flex. */ .mtg-paso { display: flex; align-items: center; gap: 0.5rem; } .mtg-paso-numero { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--bs-secondary-color); border-radius: 50%; color: var(--bs-secondary-color); font-size: 0.8rem; font-weight: 600; } /* ---- El resumen de cruces ---- Cada pareja es **una caja por grupo con un «vs» en medio**. Estuvo como «1 × 4» en texto plano y el organizador lo rechazó —«queda muy cutre»—: dos números sueltos no se leen como dos equipos enfrentados, y aquí lo que se está enseñando es precisamente un enfrentamiento. Las cajas de grupo repiten deliberadamente la forma de la cabecera de un grupo —el mismo velo de `--mtg-celda-fondo` y el mismo peso—, que es lo que hace que se reconozcan como grupos sin necesidad de decirlo en ninguna parte. Las parejas se reparten en una fila que se parte y no en columna: con 16 grupos son ocho, y en columna serían ocho renglones para algo que cabe en dos. */ .mtg-cruces-grupos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; } .mtg-cruce-pareja { display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.4rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); } .mtg-cruce-grupo { padding: 0.1rem 0.45rem; border-radius: var(--bs-border-radius-sm); background: var(--mtg-celda-fondo); font-size: 0.9rem; font-weight: 600; white-space: nowrap; } .mtg-cruce-vs { color: var(--bs-secondary-color); font-size: 0.75rem; text-transform: uppercase; } /* La lista lleva su propio contador y no el del navegador: con `list-style` la cifra queda fuera de la caja de contenido y el nombre pierde el `min-width: 0` que necesita para recortarse. Es la misma trampa de la ficha de mesa, y falla igual de callada — el nombre no se recorta nunca. */ .mtg-grupo-lista { counter-reset: mtg-grupo; margin: 0; padding: 0; list-style: none; } .mtg-grupo-lista > li { display: flex; gap: 0.4rem; min-width: 0; font-size: 0.9rem; line-height: 1.5; counter-increment: mtg-grupo; } .mtg-grupo-lista > li::before { flex: 0 0 auto; content: counter(mtg-grupo); min-width: 1.1rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; text-align: right; } /* Los cuadros a los que alimenta un reparto, en línea y separados por un punto medio que pone el CSS: en el marcado serían un carácter suelto entre elementos y se partiría solo al final de línea. El `gap` entre columnas es mayor que el de filas para que la separación se lea sin depender del punto. */ .mtg-tops-de-grupo { display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; } .mtg-tops-de-grupo > span + span::before { content: "·"; margin-inline-end: 0.6rem; color: var(--bs-secondary-color); } /* ---- La caja de un grupo ---- Un grupo es **una caja con cabecera**, y la misma en las dos pestañas de la fase de rondas: en emparejamientos envuelve la rejilla de fichas de mesa, y en clasificación es el `
` que ya se plegaba. Antes era un encabezado suelto con el contenido debajo, y con 4 u 8 grupos no se veía dónde acababa uno y empezaba el siguiente — lo pidió el organizador. Tres cosas que la caja **no** hace, y las tres son deliberadas: · **No lleva `overflow: hidden`**, que es la forma cómoda de redondear una cabecera pegada al borde. El menú de acciones de la clasificación es un desplegable, y `_TablaDeClasificacion` renuncia a `table-responsive` justo para no recortarlo: un `overflow` aquí lo recortaría igual, y por el mismo sitio. Las esquinas de la cabecera se redondean a mano, descontando el borde. · **El cuerpo va sin relleno de color.** Una mesa sin resultado lleva su velo de atención (`--mtg-atencion-fondo`), así que rellenar la caja dejaría un velo debajo de otro velo — lo que este proyecto ya sabe que no se puede razonar, y que obligaría a volver a medir cada mesa pendiente. El color va **solo en la cabecera**, donde no hay nada translúcido encima. · **En móvil apenas gasta relleno lateral.** Ahí el lado de una ficha de mesa mide 109 px y el nombre ya se recorta: el sitio que se llevara la caja se lo estaría quitando al dato. Y una que sí hace y no se ve hasta imprimir: en papel los navegadores descartan los fondos, así que de la cabecera solo queda el **borde** — que es justo por lo que una caja separa mejor que una franja de color, y el motivo de que el borde no sea opcional aquí. */ /* **El borde va en `--bs-secondary-color`, no en `--bs-border-color`**, y es la misma corrección que necesitaron los conectores del cuadro — con la misma cifra: `--bs-border-color` da **1,41 en oscuro** y **1,10 en claro** contra el cuerpo de la fase, o sea que la caja no se veía justo en el tema donde más falta hacía. Un recuadro que agrupa es un gráfico con significado y se le piden 3:1. Medido contra el panel: **5,76 en oscuro y 6,17 en claro**. Se descartó `#6c757d` —el gris que sirve en papel— porque el papel es blanco y aquí hay dos fondos en extremos opuestos: da 3,95 en claro pero **2,45 en oscuro**, por debajo del mínimo. Un gris fijo no puede pasar los dos; el token del tema sí, porque cambia con él. */ .mtg-grupo-caja { border: 1px solid var(--bs-secondary-color); border-radius: var(--bs-border-radius); } .mtg-grupo-caja + .mtg-grupo-caja { margin-top: 0.75rem; } /* La cabecera es lo que separa: una franja a todo el ancho de la caja. El fondo es `--mtg-celda-fondo` y no un `--bs-*-bg`, que sobre el cuerpo de la fase (`--bs-secondary-bg`) son todos más oscuros y saldrían como un agujero en vez de como un escalón. */ .mtg-grupo-cabecera { display: flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.3rem 0.6rem; /* El mismo color que el borde de la caja y por el mismo motivo: es su continuación, y con `--bs-border-color` esta línea se quedaba en 1,41 / 1,10 mientras el marco de alrededor se veía. */ border-bottom: 1px solid var(--bs-secondary-color); border-radius: calc(var(--bs-border-radius) - 1px) calc(var(--bs-border-radius) - 1px) 0 0; background: var(--mtg-celda-fondo); font-size: 1rem; } /* Plegada, la caja **es** su cabecera, y ahí el borde de abajo queda pegado al de la caja: dos líneas donde va una. Se quita la **anchura** y no el estilo, que resucitaría la `medium` de 3 px. */ details.mtg-grupo-caja:not([open]) > .mtg-grupo-cabecera { border-bottom-width: 0; border-radius: calc(var(--bs-border-radius) - 1px); } .mtg-grupo-cuerpo { padding: 0.5rem; } /* La lista de mesas trae su propio margen de abajo para separarse de lo que venga detrás; dentro de la caja el que separa es el relleno del cuerpo, y los dos juntos dejaban un escalón de aire muerto. */ .mtg-grupo-cuerpo > .mtg-mesas { margin-bottom: 0; } /* En móvil el ancho es el recurso escaso — ver arriba. El relleno se queda en lo justo para que las fichas no toquen el borde de la caja. */ @media (max-width: 767.98px) { .mtg-grupo-cuerpo { padding-inline: 0.25rem; } } /* El resumen es `flex` y no `display: list-item` para poder alinear el nombre del líder; con eso se pierde el marcador nativo, así que el triángulo se dibuja aparte. La caja pone ya el `flex` y el relleno: aquí queda solo lo que es de un ``. */ .mtg-grupo-resumen { list-style: none; cursor: pointer; } .mtg-grupo-resumen::-webkit-details-marker { display: none; } /* El nombre del líder cede primero: es la ayuda, no el dato. */ .mtg-grupo-lider { min-width: 0; overflow: hidden; font-size: 0.85rem; text-overflow: ellipsis; white-space: nowrap; } /* El triángulo va **en los dos tamaños**, y eso es una corrección: lo tuvo solo móvil, que es donde el plegado empieza plegado, y en escritorio quedaba un encabezado que se podía pulsar sin decirlo. Si se puede plegar, se señala. Va en un pseudo-elemento y no en el marcador nativo porque el resumen es `flex`, que se lo lleva por delante. */ .mtg-grupo-resumen::before { content: "▸"; display: inline-block; color: var(--bs-secondary-color); transition: transform 0.15s ease; } details[data-mtg-grupo][open] > .mtg-grupo-resumen::before { transform: rotate(90deg); } /* 44 px de objetivo con el dedo: el resumen es lo que se pulsa para abrir el grupo. */ @media (pointer: coarse) { .mtg-grupo-resumen { min-height: 44px; } } /* El sitio de un jugador en el reparto **es un botón**, como cada hueco del cuadro previsto: se pulsa para cambiarlo por otro. Se dibuja como texto y no como botón porque en una caja de 11 rem un botón de Bootstrap por jugador la llenaría de marcos; lo que dice que se pulsa es la flecha, igual que allí. */ .mtg-grupo-hueco { display: flex; align-items: center; gap: 0.3rem; width: 100%; min-width: 0; padding: 0.05rem 0.2rem; border: 0; border-radius: var(--bs-border-radius-sm); background: transparent; color: inherit; font: inherit; text-align: start; } .mtg-grupo-hueco:hover, .mtg-grupo-hueco:focus-visible { background: var(--mtg-celda-fondo); } .mtg-grupo-cambiar { margin-inline-start: auto; color: var(--bs-secondary-color); } /* Con el dedo, 44 px. La caja de grupo crece con ellos, que es lo correcto: lo que se toca es cada nombre. */ @media (pointer: coarse) { .mtg-grupo-hueco { min-height: 44px; } } /* ============================================================================ CUENTAS, AVISO LEGAL Y BIBLIOTECA DE BARAJAS ============================================================================ */ /* ---- Columna de lectura para formularios y texto legal ---- Un formulario de cuatro campos a 1800 px de ancho es ilegible: el rótulo queda a un palmo de su campo. Aquí no hay tabla ni cuadro que aproveche el ancho, al contrario que en las pantallas de torneo. */ .mtg-columna-formulario { max-width: 32rem; } .mtg-texto-legal { max-width: 46rem; } .mtg-texto-legal h2 { margin-block-start: 1.5rem; } /* ---- El campo trampa ---- Escondido con CSS y **no** con `type="hidden"` ni con `display: none`: un oculto de verdad lo rellenan también los gestores de contraseñas y algunos navegadores, y entonces la trampa cazaría a personas en vez de a guiones. Se saca de la vista fuera de flujo, que es el mismo patrón que usa el proyecto para el rótulo largo de la barra de acciones. Lleva además `aria-hidden` y `tabindex="-1"` en el marcado, así que para un lector de pantalla y para el tabulador no existe. */ .mtg-trampa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* La casilla del consentimiento pesa más que una casilla normal: es la que bloquea. */ .mtg-consentimiento .form-check-label { line-height: 1.4; } /* ---- La biblioteca: rejilla de fichas con portada ---- `auto-fill` con un mínimo, como los dos listados en cuadrícula: 2 columnas en un móvil, 4 en un escritorio, sin puntos de ruptura escritos a mano. */ /* **9,5 rem y no 11**, y la cifra está medida: a 375 px el contenido son 343, así que con un mínimo de 11 rem (176 px) dos fichas más el hueco piden 364 y **cae a una sola columna**. Con 9,5 rem son 316 y entran dos, que es como se lee una biblioteca en un móvil — y como la enseñan las aplicaciones que hacen esto bien. En escritorio no cambia nada: `auto-fill` sigue metiendo las que quepan. */ .mtg-biblioteca { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.75rem; } /* Alto de la pestaña de una carpeta. Va aquí, en la rejilla, y no en la ficha de carpeta, porque **todas** las fichas reservan ese hueco: si solo lo reservaran las carpetas, quedarían más bajas que las barajas de su misma fila. Ceden 12 px de alto por fila a cambio de que las dos formas convivan alineadas. */ .mtg-biblioteca { --mtg-pestana-alto: 0.75rem; } /* La ficha. `isolation` crea contexto de apilamiento propio: sin él, el enlace estirado de una ficha se solaparía con el de la de al lado según el orden del documento. **Sin `overflow: hidden`**, que es lo que tenía: la pestaña de una carpeta nace fuera de la caja y ese recorte se la comía entera. El redondeo de la ilustración y del velo se consigue con `border-radius: inherit` en cada uno, que hace lo mismo sin recortar a los pseudo-elementos. */ .mtg-portada { position: relative; isolation: isolate; aspect-ratio: 16 / 10; margin-block-start: var(--mtg-pestana-alto); border-radius: var(--bs-border-radius); background: var(--mtg-celda-fondo); border: 1px solid var(--bs-secondary-color); } /* La ilustración llena la ficha. `cover` y no `contain` —al revés que el logo de un formato— y aquí sí es lo correcto: un recorte de ilustración ya viene apaisado, así que no se pierde nada al recortarlo, mientras que un logo de 3,8:1 sí se destroza. */ .mtg-portada-imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Detrás del contenido pero delante del fondo de la ficha. Puede porque `.mtg-portada` crea contexto de apilamiento con `isolation`: sin él, un z-index negativo se iría detrás del fondo de la caja y la imagen desaparecería. */ z-index: -2; /* Sustituye al `overflow: hidden` que llevaba la ficha, que se comía la pestaña. */ border-radius: inherit; } /* El velo. **Vertical y no el `--mtg-velo-ficha` horizontal**, porque aquí el texto va arriba y no a la izquierda: el degradado se abre hacia abajo para dejar ver el dibujo. Opaco donde va el nombre, que es lo que sostiene el contraste — y no un velo sobre otro velo, que en este proyecto ya ha dado cifras inventadas tres veces. */ .mtg-portada-velo { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient( 180deg, var(--bs-body-bg) 0%, rgb(from var(--bs-body-bg) r g b / 0.82) 34%, rgb(from var(--bs-body-bg) r g b / 0.35) 62%, rgb(from var(--bs-body-bg) r g b / 0.15) 100%); } /* **Sin `position: relative`, y no es un olvido.** Lo llevaba, y con él el `::after` que estira el enlace se resolvía contra *este* bloque en vez de contra la ficha: el área pulsable se quedaba en el texto y **pulsar la ficha no navegaba**. No daba ningún error — se veía perfecta y no hacía nada—, y lo destapó probarla en pantalla. Ahora la imagen y el velo van a capas negativas, así que el texto se pinta encima estando en flujo normal, y `inset: 0` del `::after` se resuelve contra `.mtg-portada`, que es lo que se quería. */ .mtg-portada-texto { padding: 0.5rem 0.6rem; } .mtg-portada-nombre { font-size: 1rem; font-weight: 600; margin: 0; /* Dos líneas y a partir de ahí puntos suspensivos. La ficha tiene forma fija: un nombre largo cede, no descuadra la rejilla. Es la misma regla que la ficha de un torneo. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mtg-portada-enlace { color: var(--bs-body-color); text-decoration: none; } /* El icono de carpeta, dentro del nombre. **`vertical-align` y no flex**: el nombre es una caja `-webkit-box` con `-webkit-line-clamp` para recortarlo a dos líneas, y volverla flex desactiva el recorte. Y hace falta porque un SVG en línea **se apoya en la línea base del texto**, no en su centro, así que sin esto queda montado sobre la palabra. Es la misma trampa que ya descuadró la celda de la medalla en la clasificación de liga, y allí se cerró igual. */ /* `-0.1em` está **medido, no elegido a ojo**: con `-0.15em` el centro del icono caía 0,89 px por debajo del centro de la palabra, y con esto queda en 0,09. */ .mtg-portada-enlace .mtg-icono-junto { display: inline-block; vertical-align: -0.1em; margin-inline-end: 0.25rem; } .mtg-portada-enlace:hover, .mtg-portada-enlace:focus-visible { text-decoration: underline; } /* El área pulsable es la ficha entera. Se hace con un `::after` y no con la clase `stretched-link` de Bootstrap por lo mismo que en la ficha de mesa: aquella cuelga del ancestro posicionado más cercano, que aquí podría ser cualquiera. */ .mtg-portada-enlace::after { content: ""; position: absolute; inset: 0; } .mtg-portada-dato { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* El menú de acciones, en la esquina. `z-index` por encima del enlace estirado, o sería inalcanzable: el `::after` de arriba lo taparía entero. */ .mtg-portada-accion { position: absolute; inset-block-end: 0.4rem; inset-inline-end: 0.4rem; z-index: 1; } /* **La ficha con el menú abierto se sube por encima de sus hermanas.** Cada ficha crea contexto de apilamiento con `isolation`, así que las que van después en el documento se pintan encima: el desplegable de una carpeta salía **por debajo de la ilustración de la siguiente**, medio menú tapado. No se arregla subiendo el `z-index` del menú —está dentro del contexto de su ficha y de ahí no sale—, sino subiendo la ficha entera mientras está abierto. */ .mtg-portada:has(.dropdown-menu.show) { z-index: 3; } /* Con el dedo, 44 px: es un botón destructivo y el peor sitio para fallar el toque. */ @media (pointer: coarse) { .mtg-portada-accion .btn { min-width: 44px; min-height: 44px; } } /* ---- La pestaña que hace que una carpeta *parezca* una carpeta ---- Una carpeta y una baraja no se pueden distinguir solo por un icono de 14 px: la biblioteca se recorre con la vista y lo que se reconoce a esa velocidad es **la silueta**, no un detalle dentro de la caja. Es el mismo argumento por el que una jornada de liga lleva cinta de esquina además del nombre de su liga. Sale de la caja hacia arriba, por eso la ficha no puede llevar `overflow: hidden` y por eso todas reservan `--mtg-pestana-alto` de margen. `border-bottom: 0` y **1 px de más de alto**: así la pestaña se solapa con el borde superior de la ficha y las dos se leen como una sola pieza, sin costura. Ojo con esto — cambiar un `border-*-style` resucita la anchura `medium` de 3 px, así que aquí se declara `0` y no `none`. */ .mtg-portada-carpeta::before { content: ""; position: absolute; inset-block-start: calc(-1 * var(--mtg-pestana-alto)); inset-inline-start: 0; width: 42%; height: calc(var(--mtg-pestana-alto) + 1px); background: var(--mtg-celda-fondo); border: 1px solid var(--bs-secondary-color); border-bottom: 0; border-start-start-radius: var(--bs-border-radius); border-start-end-radius: var(--bs-border-radius); } /* Las migas no se parten en varias líneas cuando el camino es largo: se desplazan, que es lo que ya hace cualquier tabla ancha del proyecto. Sin esto, cuatro niveles con nombres largos suben la cabecera tres renglones en un móvil. */ .mtg-migas { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; /* **Centrado vertical, y hace falta desde que los enlaces miden 44 px con el dedo.** El último tramo —la carpeta en la que estás— no es un enlace, así que conserva su alto natural; con el `stretch` por defecto de un contenedor flex se estiraba a 44 y su texto se quedaba pegado arriba, desalineado respecto a los demás. Se vio en pantalla. */ align-items: center; } /* ---- El avatar de un usuario ---- Es la ilustración de una carta recortada en redondo. `cover` porque un recorte de ilustración viene apaisado (~626×457) y aquí la caja es cuadrada: sin él saldría deformado. */ .mtg-avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--bs-secondary-color); } /* El de la barra de navegación. Más pequeño que el mínimo táctil a propósito: **no es un objetivo**, es un adorno dentro del botón del menú, y el botón entero sí lo cumple. **Subido de 1,5 a 2 rem** el 24 de agosto de 2026, a petición del organizador: «se ve un poco pequeña, se puede hacer algo para que se aprecie mejor». A 24 px un recorte de ilustración no se reconoce — es un dibujo, no un icono—, y a 32 sí. Lo que hay que saber es **lo que cuesta**, porque son las dos cosas que esta barra ya tiene medidas: el botón pasa de 34 a 40 px de alto y con él la barra de 57 a 62, y el contenido con sesión sube 8 px de ancho, o sea de 959 a **967** — sigue por debajo de los 992 en que pliega, que es el número que importa. Con un nombre largo el recorte de `.mtg-navbar-nombre` absorbe el resto. El filo se queda **quitado**: a 32 px sobre la barra oscura la ilustración ya se separa sola, y un anillo de 1 px alrededor de un dibujo pequeño lo que hace es comerse 2 px del propio dibujo. */ .mtg-avatar-mini { width: 2rem; height: 2rem; border: 0; } .mtg-avatar-vacio { display: inline-block; background: var(--mtg-celda-fondo); } /* Un icono dentro de una opción de menú desplegable. El `.btn:has(> .mtg-icono-junto)` de arriba no lo alcanza: una opción de menú es un `.dropdown-item`, no un `.btn`. */ .dropdown-item:has(> .mtg-icono-junto) { display: flex; align-items: center; gap: 0.5rem; } /* ---- Con el dedo, las migas, el enlace legal y las fuentes de un formato llegan a 44 px ---- Todos son navegación de verdad —una sube por el árbol, otro abre el aviso legal, y las fuentes abren la página oficial del formato— y medidos daban **21, 24 y 19 px** (las fuentes, en la regresión del 26 de agosto de 2026). La regla del proyecto es 44 en todo lo que se toca, y solo con puntero grueso: con ratón una miga de 21 px se acierta sin problema y estirarla engordaría la cabecera para nada. `inline-flex` + `align-items` y no `padding` a secas: el relleno solo movería el texto hacia abajo dentro de una caja que sigue midiendo lo mismo. */ @media (pointer: coarse) { .mtg-migas .breadcrumb-item > a, .mtg-fuentes a, .footer a { display: inline-flex; align-items: center; min-height: 44px; } /* **El enlace del aviso de propiedad intelectual se queda fuera de esa regla**, y no es una excepción de conveniencia: la WCAG 2.5.8 exime a los enlaces que van *dentro de un bloque de texto*, porque agrandarlos rompería el renglón. Con `inline-flex` y 44 px este partía la línea del párrafo en dos. */ .mtg-pie-legal a { display: inline; min-height: 0; } } /* ============================================================================ IMPRIMIR PROXIES ============================================================================ Las medidas de una carta son **63,5 × 88,9 mm** (2,5 × 3,5 pulgadas) y son lo único de toda esta pantalla que no admite «casi»: una proxy que no las cumpla no entra en la funda junto a una carta de verdad, que es exactamente para lo que se imprime. Van en milímetros y no en píxeles ni en rem por el mismo motivo que el cuadro impreso declara su ancho de columna en milímetros: en papel el píxel no significa nada. */ .mtg-proxy-hoja { --mtg-carta-ancho-mm: 63.5mm; --mtg-carta-alto-mm: 88.9mm; /* El hueco entre cartas. Cero las deja pegadas y se cortan de un tijeretazo por fila, que es lo que se eligió; la línea de corte la pone el borde. */ --mtg-corte-hueco: 0mm; display: grid; grid-template-columns: repeat(3, var(--mtg-carta-ancho-mm)); gap: var(--mtg-corte-hueco); justify-content: start; } .mtg-proxy-carta { width: var(--mtg-carta-ancho-mm); height: var(--mtg-carta-alto-mm); /* La línea de corte. Media línea por carta, así que dos cartas pegadas suman una raya de 1 px entre las dos y no dos rayas juntas. */ outline: 0.5pt solid var(--bs-secondary-color); outline-offset: -0.25pt; overflow: hidden; } /* La ilustración llena su carta exactamente. `cover` y no `contain`: la imagen de Scryfall ya viene en la proporción de una carta, así que no recorta nada, y con `contain` un redondeo de un cuarto de píxel dejaría una línea blanca en un borde. */ .mtg-proxy-carta img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Una carta desmarcada desaparece de la hoja **y de la vista previa**, que son la misma cosa: lo que se ve es lo que sale. */ .mtg-proxy-carta[hidden] { display: none; } /* En pantalla la hoja se enseña reducida y centrada, para que quepa sin desplazarse. En papel este `zoom` desaparece: allí las medidas son las de verdad. */ @media screen { .mtg-proxy-hoja { zoom: 0.55; margin-inline: auto; padding-block-end: 2rem; } } @media print { /* Los controles no se imprimen —ya llevan `d-print-none`— y la hoja pierde cualquier contenedor que le reste ancho. */ .mtg-proxy-hoja { zoom: normal; margin: 0; padding: 0; } /* **Sin esto las ilustraciones no salen.** Los navegadores descartan los fondos y las imágenes de fondo al imprimir para ahorrar tinta; aquí la imagen *es* el contenido. Es la misma línea que hizo falta para el hilo dorado del cuadro. */ .mtg-proxy-carta, .mtg-proxy-carta img { print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* Una carta **no se parte entre dos hojas**. Sin esto, la fila que cae en el borde sale cortada por la mitad en una página y la otra mitad en la siguiente. */ .mtg-proxy-carta { break-inside: avoid; page-break-inside: avoid; } } /* ---- Los controles ---- */ .mtg-proxy-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.1rem 1rem; } .mtg-proxy-copias { display: inline-block; min-width: 2.2rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; } /* Con el dedo, la etiqueta entera es el objetivo: una casilla de 16 px no se acierta. */ @media (pointer: coarse) { .mtg-proxy-lista .form-check-label { display: inline-flex; align-items: center; min-height: 44px; } } /* ---- Al imprimir solo queda la hoja ---- Los dos diálogos que imprimen —proxies y hoja de lista— son **la excepción** a la regla de arriba que oculta `.modal` al imprimir: aquí lo que se quiere imprimir está justamente dentro de uno. Hay que deshacerle a Bootstrap las cuatro cosas que hacen que un modal sea un modal —fijo, con alto máximo, con scroll y con un telón encima—, porque todas ellas recortan el contenido a la altura de la ventana y en papel no existe tal cosa. **Los dos comparten estas reglas y no se escriben dos veces**: solo uno puede estar abierto a la vez, y el que esté cerrado sigue con el `display: none` de Bootstrap, así que no se estorban. */ @media print { /* Fuera el editor entero: en el papel no pinta nada. */ .mtg-editor-pagina { display: none !important; } /* **Con uno de los dos abiertos, el papel es SOLO ese diálogo.** La regla de arriba bastaba cuando los botones vivían solo en el editor; desde que la vista de solo lectura los lleva también dentro del diálogo de una lista presentada —pantalla del torneo y «Mis eventos»— y en `/Torneos/Apuntarme`, lo que hay alrededor es otra página cualquiera (las mesas de una ronda, la clasificación) y sin esto se imprimía debajo de la hoja. Los armazones son **hijos directos de `
`** en las cuatro pantallas que los incluyen, y esta regla lo exige: anidados más adentro, se esconderían con su ancestro. */ body:has(#mtg-dialogo-hoja.show) main > :not(#mtg-dialogo-hoja), body:has(#mtg-dialogo-proxies.show) main > :not(#mtg-dialogo-proxies) { display: none !important; } #mtg-dialogo-proxies.show, #mtg-dialogo-hoja.show { display: block !important; position: static !important; overflow: visible !important; /* Sin `opacity: 0` de la animación de Bootstrap: si se imprime con el diálogo a medio aparecer, salen hojas en blanco. */ opacity: 1 !important; } /* **El ancho hay que forzarlo, no basta con quitar el `max-width`.** Con el editor oculto, la cadena `body > .mtg-contenedor > main > .modal` se queda sin nada que le dé anchura y encoge al contenido: la hoja salía en **329 px de los 703** de un A4, con los nombres partidos en dos. Se ve solo en la emulación de impresión, porque en pantalla el editor ya ensancha el contenedor. */ .mtg-contenedor, main { width: 100% !important; } #mtg-dialogo-proxies .modal-dialog, #mtg-dialogo-hoja .modal-dialog { width: 100% !important; max-width: none; margin: 0; transform: none !important; } #mtg-dialogo-proxies .modal-content, #mtg-dialogo-hoja .modal-content { border: 0; background: transparent; } /* **`max-height` y `overflow` son los que recortan.** Sin quitarlos, el papel enseña solo la primera pantalla de cartas y el resto no existe: se imprime lo que cabía en el scroll. */ #mtg-dialogo-proxies .modal-body, #mtg-dialogo-hoja .modal-body { max-height: none !important; overflow: visible !important; padding: 0; } /* La cabecera, el pie y los controles del diálogo no se imprimen: un botón «Imprimir» impreso en el papel no tiene ninguna gracia. */ #mtg-dialogo-proxies .modal-header, #mtg-dialogo-proxies .modal-footer, #mtg-dialogo-hoja .modal-header, #mtg-dialogo-hoja .modal-footer, .mtg-proxy-controles, .mtg-hoja-controles { display: none !important; } .modal-backdrop { display: none !important; } } /* ============================================================================ LA HOJA DE LISTA ============================================================================ El papel que se entrega en la mesa de jueces —la *print sheet* de tcdecks—, ya escrito. **Va en negro sobre blanco siempre, también en tema oscuro**, y es una excepción deliberada a que todo se pinte con las variables del tema: esto no es una pantalla, es la previsualización de un documento. Con los colores del tema oscuro, lo que se ve arriba no sería lo que sale abajo — y de paso los navegadores descartan los fondos al imprimir, así que un papel oscuro saldría con el texto claro sobre blanco. */ .mtg-hoja { background: #fff; color: #111; padding: 1.2rem 1.4rem; border-radius: var(--bs-border-radius); font-size: 0.92rem; line-height: 1.35; } .mtg-hoja-titulo { font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.6rem; } .mtg-hoja-cabecera { border-block-end: 1.5pt solid #111; padding-block-end: 0.6rem; margin-block-end: 0.8rem; } /* Tres por fila: los seis datos entran en dos renglones y no en seis. */ .mtg-hoja-campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem 1.2rem; } .mtg-hoja-campo { display: flex; flex-direction: column; min-width: 0; } .mtg-hoja-campo > span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #555; } /* **Un campo vacío tiene que imprimirse como una raya para rellenar a boli**, y uno escrito como texto normal. Un `
` que HTMX reemplaza: la sección crece dentro de su lado, el `
` crece dentro de la sección, y la lista crece dentro del `
`. Si uno se queda sin crecer, la cadena se rompe y vuelve el hueco. Y el `min-height: 0` de la lista **no es redundante con el `flex: 1`**: un hijo flexible no baja de su alto de contenido, así que sin él la lista mediría sus 25 líneas enteras, la fila crecería hasta ahí y **el scroll del panel no aparecería nunca** — sería la página la que se alargara. Es la misma trampa que el `min-width: 0` de un nombre que se recorta con puntos suspensivos, en el otro eje. */ .mtg-inicio-noticias { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .mtg-inicio-noticias-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* **`flex-basis: 0` y no `auto`, y esto es la pieza que lo hace funcionar.** Con `auto`, el alto que la lista aporta a la fila es el de sus 25 líneas —1.611 px medidos—, así que la columna derecha pasaba a ser la más alta y **arrastraba la fila hasta 1.678**: ni había hueco que rellenar ni scroll en el panel, era la página la que se alargaba. Con la base a cero la lista no aporta alto, la fila la decide la columna izquierda, y la lista crece después hasta llenarla. El `min-height` es **el alto mínimo que pidió el organizador**: era el `max-height` de siempre y aquí pasa a ser un suelo en vez de un techo, así que sin barajas ni partidas el panel se ve como estaba. */ .mtg-inicio-noticias .mtg-noticias { flex: 1 1 0; min-height: 28rem; max-height: none; } /* **Una columna sola ocupa el ancho entero.** Desde que la derecha lleva dos cosas —barajas y noticias— los lados son envoltorios, y sin esto un jugador sin barajas por preparar y sin noticias vería sus partidas en tres quintos de la fila con dos quintos en blanco. */ .mtg-inicio-mio-lado:only-child { grid-column: 1 / -1; } } /* Los envoltorios de cada lado. **Existen porque el panel de noticias tiene que caer en la columna derecha** y con auto-colocación la tercera sección se habría ido debajo de las partidas — o sea a la izquierda, que es justo donde el organizador no señaló el hueco. El hueco vertical entre las secciones de un mismo lado lo pone esto y no un margen de la sección, que tendría que valer también entre columnas. */ .mtg-inicio-mio-lado { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; } /* ---- Mis partidas por jugar ---- Una lista de líneas, no fichas ni tabla: **la prueba del proyecto** —¿se comparan las celdas de una fila con las de la de al lado?— dice que no. Nadie compara la hora de su partida del jueves con la del sábado; cada línea es una unidad que se lee sola. Dos columnas en escritorio —la hora, y el resto— y **apiladas en móvil**, que es la misma decisión y el mismo motivo que apila los dos lados de una ficha de mesa: a 375 px, con la hora («vie 21 ago · 19:30», 129 px medidos) en su columna, al nombre del rival le quedan siete caracteres. */ .mtg-inicio-partidas { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; } /* `position: relative` es lo que sostiene el `stretched-link` del nombre del torneo, y con él **la línea entera es el objetivo táctil** — un enlace de una línea mide 22 px, que es el peor punto que sacó la pasada de QA del 7 de agosto y el mismo que ya se arregló en «ver todos». */ .mtg-inicio-partida { position: relative; display: grid; /* La hora primero y **con ancho fijo**, no `max-content`. La hora es la clave de ordenación, así que las columnas tienen que alinearse entre líneas para que la lista se lea como una agenda — y con `max-content` no se alinean, porque **cada línea es su propia rejilla**: «vie 21 ago · 19:00» mide 123 px y «Sin hora» 58, así que el rival empezaba en una `x` distinta en cada renglón. Es el mismo descuadre que ya se corrigió en la leyenda de marcas, y por el mismo motivo. 8,5 rem son 136 px, medido contra el peor caso de verdad: «mié 30 sept · 19:00», 132,2 px. El mes en español abrevia a cuatro letras en septiembre, que es lo que no cabía en 8. */ grid-template-columns: 8.5rem 1fr auto; grid-template-areas: 'cuando rival baraja' 'cuando donde baraja'; align-items: baseline; column-gap: 0.75rem; padding: 0.45rem 0.6rem; /* **El borde, y hace falta**: lo pidió el organizador viéndolo en los dos temas. El fondo de estas cajas es un velo translúcido muy suave, así que **donde el degradado de la imagen se acaba, el canto de la caja desaparece** y la lista se lee como texto suelto en vez de como una lista de cajas. Es el mismo par —velo de fondo + borde— que usa la caja de un torneo, que es la referencia que él citó. Cuesta 2 px de alto por línea, iguales en todas, así que no rompe ninguna de las cifras medidas. */ border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-sm); /* **Fondo opaco y no el velo translúcido**, pedido por el organizador —«en lugar de un borde, o además del borde, un color de fondo diferente»— y es lo correcto por la regla de siempre: **lo que necesita contraste garantizado no se apoya en un velo**. Con `--mtg-celda-fondo` la caja se veía o no según lo que tuviera debajo, que aquí es una ilustración; con un fondo opaco se lee igual en los dos temas y en todo el ancho. La ilustración **no se pierde**: va en un hijo a `z-index: -1` dentro de un contexto aislado, o sea por delante del fondo de la caja y por detrás del texto. Ojo con la regla gemela que dice lo contrario —una caja *sobre un panel* usa el velo, porque ahí todos los `--bs-*-bg` son más oscuros y la caja sale como un agujero—: esto se apoya en el fondo de la página, no en un panel, así que `--bs-tertiary-bg` es un escalón hacia arriba en oscuro y hacia abajo en claro. */ background: var(--bs-tertiary-bg); /* Las dos mitades del fondo de imagen: `overflow` recorta la imagen al redondeo de la caja, e `isolation` es lo que permite que el fondo vaya en **`z-index: -1` sin desaparecer** — dentro de un contexto propio, un hijo negativo pinta por encima del fondo de la caja y por debajo de todo su contenido, así que el texto no necesita `position: relative`... y eso importa: posicionar los `

` robaría el ancla del `stretched-link`, que es la trampa ya documentada de `.mtg-portada-texto`. */ isolation: isolate; overflow: hidden; } /* ---- El fondo de imagen de una caja que habla de un torneo ---- La imagen del torneo o el tapete de su formato, con **el mismo velo medido de las fichas** (`--mtg-velo-ficha`): opaco donde va el texto y abriéndose hacia la derecha. Sin imagen, la caja se queda con su velo de siempre y no hay rama que mantener. La clase **ya no lleva el prefijo de la portada**: la pintan las dos listas de `/` y el histórico de «Mis barajas», y el marcado sale de `_FondoDeEvento` — un solo sitio para los cuatro. */ .mtg-fondo-evento { position: absolute; inset: 0; z-index: -1; /* La misma línea que ya lleva la miniatura de una ficha, y por lo mismo: sin ella, el `overflow` recorta el rectángulo del fondo un pelín por dentro del arco del propio fondo de la caja, y en cada esquina quedaba un **anillo de un píxel más claro** — se vio en la captura como cuatro marquitas. **Y el recorte va aquí además de en la caja**: el `` es un rectángulo y sin esto asomaba por las esquinas del arco, que es la mitad del artefacto que quedaba después de la primera corrección. */ border-radius: inherit; overflow: hidden; } .mtg-fondo-evento img { display: block; width: 100%; height: 100%; object-fit: cover; } .mtg-fondo-evento::after { content: ""; position: absolute; inset: 0; background: var(--mtg-velo-ficha); } /* El chip de la baraja de la partida: el de la ficha de un torneo, colocado en su columna. `align-self` al centro de las dos filas — con `baseline` heredado se pegaba a la primera. */ .mtg-inicio-chip-baraja { grid-area: baraja; align-self: center; justify-self: end; /* **Fondo opaco y no el velo del chip de la ficha**: aquí debajo hay una ilustración, y un velo sobre una imagen es exactamente el contraste que no se puede razonar — la regla del chip de semilla. */ background: var(--bs-tertiary-bg); } /* ---- Barajas por preparar ---- Cajas y no líneas — «hazlo con cajas, que queda visualmente más bonito», dicho por el organizador — con el mismo fondo de imagen que las partidas. La caja entera es el objetivo (`stretched-link` anclado a la caja, que es la posicionada) y lleva a la pantalla de la baraja de ese torneo. */ /* ---- En rejilla y no en columna ---- Estuvo en `flex-direction: column`, o sea **una caja por fila pase lo que pase**, y eso deja una caja de 1050 px para un nombre de torneo y tres datos. Lo vio el organizador: «las cajas son muy largas, no se puede hacer que cuando hay tanto espacio se pongan a más columnas». El número de columnas **lo decide `auto-fill`** y no una media query, que es la misma decisión que ya rige las tarjetas de «Qué hay aquí» y las ocho de la portada pública: una anchura escrita a mano sería una segunda verdad sobre dónde rompe la rejilla. **El `min()` no es opcional.** El mínimo de un `minmax` es un mínimo de verdad, así que con el ancho a secas la rejilla pediría una pista de 608 px dentro de una ventana de 375 y el documento se desbordaría — es la trampa que ya costó una medida en el bloque de actividad de esta misma página, donde el medidor no señaló ningún elemento culpable y lo delató la anchura del documento. Con `min()`, en móvil es una columna. */ .mtg-inicio-barajas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--mtg-caja-lista-min), 100%), 1fr)); gap: 0.5rem; margin: 0; } .mtg-inicio-baraja { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; min-height: 4.25rem; padding: 0.55rem 0.75rem; /* El borde, por lo mismo que en la línea de una partida: sin él, donde acaba el degradado de la imagen desaparece el canto de la caja. */ border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-sm); /* Fondo opaco, por lo mismo que la línea de una partida. */ background: var(--bs-tertiary-bg); /* El mismo par que la línea de una partida, y por lo mismo. */ isolation: isolate; overflow: hidden; } /* ---- El borde en acento al pasar por encima ---- **La regla que había aquí no hacía nada**: ponía `background: var(--bs-tertiary-bg)`, que *ya es* el fondo base de la caja — el mismo fondo por el mismo fondo. Así que la caja no daba ninguna señal de ser pulsable, y lo es entera (`stretched-link`). Lo vio el organizador: «cuando te pones por encima no se marca que es clicable con el borde amarillo como el resto de cajas». Se hace con `border-color` y **es la misma regla que `.mtg-torneo`**, que es la convención de la aplicación para una caja que se pulsa. No suma alto porque el borde ya está declarado. */ .mtg-inicio-baraja:hover, .mtg-inicio-baraja:focus-within { border-color: var(--mtg-acento); } /* Las dos líneas **reservan el hueco del distintivo**, que va en absoluto sobre la esquina y no encoge: sin la reserva, el nombre de un torneo largo se metía por debajo de «Cambia tu lista». Es la misma corrección —y el mismo motivo— que el hueco que la cinta de liga se cobra en una ficha de móvil: cede el texto, que tiene su `title`, no la señal. */ .mtg-inicio-baraja-nombre, .mtg-inicio-baraja-para { padding-inline-end: 7.5rem; } .mtg-inicio-baraja-nombre { display: flex; min-width: 0; font-weight: 600; } /* El nombre en el color del cuerpo, no en el azul de Bootstrap: mismo motivo y misma cifra que el nombre del torneo en una partida — el enlace es la caja entera, y el azul daba 3,76 sobre el velo en claro. */ .mtg-inicio-baraja-nombre .mtg-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; } .mtg-inicio-baraja:hover .mtg-inicio-baraja-nombre .mtg-nombre, .mtg-inicio-baraja:focus-within .mtg-inicio-baraja-nombre .mtg-nombre { text-decoration: underline; } .mtg-inicio-baraja-para { display: flex; gap: 0.35rem; min-width: 0; font-size: 0.9rem; } .mtg-inicio-baraja-para .mtg-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bs-secondary-color); } /* Los datos, agrupados y con el separador **puesto por el CSS**. En el marcado el «·» iba dentro del texto de cada dato, y así no se le puede quitar al primero — que es justo lo que hace falta cuando el grupo baja a su propio renglón en móvil. */ .mtg-inicio-baraja-meta { display: flex; gap: 0.35rem; white-space: nowrap; } .mtg-inicio-baraja-meta .mtg-inicio-de::before { content: "·"; margin-inline-end: 0.35rem; } /* El borde en acento, igual que la caja de un torneo y que las dos cajas de baraja. **Aquí también la regla que había no hacía nada**: ponía `background: var(--bs-tertiary-bg)`, que *ya es* el fondo base de la línea —dos comentarios más arriba se explica por qué es opaco—, o sea el mismo fondo por el mismo fondo. Lo señaló el organizador: «en tus partidas por jugar no has dejado el borde de cuando te pones encima». */ .mtg-inicio-partida:hover, .mtg-inicio-partida:focus-within { border-color: var(--mtg-acento); } .mtg-inicio-cuando { grid-area: cuando; align-self: center; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } /* «Sin hora» **no va en el color del cuerpo**: es la ausencia de un dato, no el dato. Y no se apaga más que eso —`--bs-secondary-color` da 5,76 y 6,17 medidos— porque sigue siendo información. */ .mtg-inicio-sin-hora { color: var(--bs-secondary-color); font-weight: 400; } .mtg-inicio-rival { grid-area: rival; display: flex; gap: 0.3rem; /* Sin esto el `text-overflow` del nombre no se activa nunca: un hijo flexible no baja de su ancho de contenido. Es la trampa que ya está documentada para la celda de una tabla de fichas. */ min-width: 0; font-weight: 600; } .mtg-inicio-rival .mtg-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mtg-inicio-contra { flex: 0 0 auto; color: var(--bs-secondary-color); font-weight: 400; } .mtg-inicio-donde { grid-area: donde; display: flex; gap: 0.35rem; min-width: 0; font-size: 0.9rem; } /* El nombre del torneo es el enlace y va **en el color del cuerpo**, no en el azul de Bootstrap. No es estética: `#0d6efd` sobre el velo de la línea da **3,76** en tema claro, por debajo del 4,5 de un texto normal —medido—, y además aquí el enlace es la línea entera, así que pintarlo de azul prometería que lo pulsable es esa palabra. Con el color del cuerpo, 12,63 y 15,08. Es lo mismo que ya hace el título de una tarjeta de sección, dos bloques más abajo. */ .mtg-inicio-donde .mtg-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; } .mtg-inicio-partida:hover .mtg-inicio-donde .mtg-nombre, .mtg-inicio-partida:focus-within .mtg-inicio-donde .mtg-nombre { text-decoration: underline; } /* De qué es la partida **no encoge**: «Ronda 3 · mesa 4» son datos cortos, y con el reparto proporcional del flex el largo —el nombre del torneo— se los comería letra a letra. Misma corrección que en el segundo renglón de la ficha de un torneo. */ .mtg-inicio-de { flex: 0 0 auto; color: var(--bs-secondary-color); white-space: nowrap; } /* ---- Las tarjetas de sección ---- Mismas reglas que la ficha de un torneo y por el mismo motivo: `position: relative` es lo que sostiene el `stretched-link` del título, y con él **la tarjeta entera es el objetivo táctil**. Un título de una línea mide 22 px de alto, que es exactamente el peor punto que sacó la pasada de QA del 7 de agosto. `minmax(20rem, …)` se midió **contra seis tarjetas**: con 15 rem salían cuatro columnas a 1280 px y la segunda fila se quedaba a medias. **Hoy son cinco** —al borrar `/Cartas` el 14 de agosto se fue la suya— así que a 1280 salen 3 + 2 y el hueco se ve abajo a la derecha, que es exactamente el defecto que aquella cifra venía a evitar. La cifra se queda: lo que se arregla es el hueco, estirando la última tarjeta hasta el final de su fila. A ~1000 px pasan a dos columnas y en móvil a una. */ .mtg-inicio-secciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 0.75rem; margin: 0; } /* El icono ocupa su columna y **abarca las dos filas** —título y texto—, así que no hace falta un elemento que envuelva al título para ponerlo a su lado. Con `align-self: start` se queda arriba en vez de estirarse hasta el pie de la tarjeta. */ .mtg-inicio-seccion { position: relative; display: flex; flex-direction: column; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--mtg-celda-fondo); /* Recorta la ilustración contra el radio de la caja, igual que la tarjeta de la portada pública y la caja de un torneo en cuadrícula. */ overflow: hidden; } /* La rejilla de icono + título + texto se mudó al cuerpo cuando la caja pasó a llevar una cabecera de ilustración encima: es la misma división que ya tenía `.mtg-publica-cosa`. */ .mtg-inicio-seccion-cuerpo { display: grid; grid-template-columns: auto 1fr; column-gap: 0.6rem; row-gap: 0.15rem; padding: 0.9rem; } /* ---- La ilustración de cabecera de una tarjeta de sección ---- Lo pidió el organizador el 24 de agosto de 2026: las mismas cartas y la misma forma que en la portada pública, «para que quede más bonito». **7,5 rem y no las 9 de la portada pública**, y la diferencia está medida: allí la tarjeta es lo único que hay en la página, y aquí va detrás de las partidas por jugar y las barajas por preparar, así que 9 rem por cinco cajas metían la última fila fuera de dos pantallas de escritorio. **Sin `position: relative`**, al contrario que `.mtg-publica-cabeza`, y eso no es una simplificación: la tarjeta lleva `stretched-link`, cuyo `::after` se resuelve contra el ancestro posicionado más cercano. Con la cabecera posicionada, el área pulsable de la tarjeta se habría encogido **a la ilustración** —el enlace del título dejaría de cubrir la caja— y eso no da ningún error: solo deja de funcionar el gesto. Por eso el hijo se dimensiona con `width`/`height` al 100 % en vez de con `inset: 0`. */ .mtg-inicio-seccion-arte { flex: none; height: 7.5rem; /* Si la ilustración no carga, el hueco tiene que parecer un hueco y no un fallo de maquetación. */ background: var(--bs-tertiary-bg); } .mtg-inicio-seccion-arte > img, .mtg-inicio-seccion-arte > .mtg-carta-sin-imagen { display: block; width: 100%; height: 100%; object-fit: cover; } /* En móvil baja a 6 rem por lo mismo que la de la portada pública: a 375 px la caja mide 343 de ancho, así que la cabecera es lo que más scroll añade. */ @media (max-width: 767.98px) { .mtg-inicio-seccion-arte { height: 6rem; } } /* El acento al pasar por encima y al enfocar, igual que la ficha de un torneo. `focus-within` porque quien recibe el foco es el enlace estirado, no la tarjeta. */ .mtg-inicio-seccion:hover, .mtg-inicio-seccion:focus-within { border-color: var(--mtg-acento); } /* El icono **no va en acento**, y eso es la regla y no un gusto: el amarillo significa «esto se pulsa», y con seis tarjetas encendidas dejaría de significarlo. Lo que dice que la tarjeta se pulsa es el borde al pasar por encima, que es lo mismo que hace un torneo. */ /* **1,2 rem no es un tamaño elegido, es la altura de la línea del título** (`h6` = 16 px × 1,2 = 19,2), y por eso el icono queda centrado con él **por construcción y sin margen de compensación**. Estuvo en 1,4 rem con un `margin-block-start: 0.1rem` puesto a ojo, y `medir.js` lo cazó: el dibujo sobresalía 3,2 px por debajo del centro del título, porque medía 22,4 contra los 19,2 de la línea. Compensarlo habría pedido un margen **negativo** de 1,59 px, que es la señal de que el tamaño era el problema. Medido después: desvío 0. */ .mtg-inicio-icono { grid-row: 1 / span 2; align-self: start; width: 1.2rem; height: 1.2rem; color: var(--bs-secondary-color); } /* El título es el enlace, así que **se pinta como texto y no como enlace**: en una tarjeta que se pulsa entera, subrayarlo prometería que solo esa línea lleva a algún sitio. */ .mtg-inicio-seccion h3 a { color: inherit; text-decoration: none; } /* El título de la tarjeta de noticias es un `