/* ========================================================================== El Camino DT — TILE → CARD -------------------------------------------------------------------------- El sistema que da nombre a toda la interfaz de FM26 y que este juego no tenía. Está medido de las capturas del artículo del revamp de fichajes —ver `referencia/fm26/notas.md`, «La sección de Contratación»— y son tres reglas: · una pantalla es una retícula de TILES, y un tile RESUME; · al tocar uno se abre una CARD encima, con miga de pan y X, que deja ver la pantalla de atrás atenuada; · y la card REPITE ARRIBA el resumen que estabas mirando antes de dar el detalle. La tercera es la que importa y la que no teníamos de ninguna forma. Acá se navegaba a otra pantalla y el resumen quedaba atrás: mirabas el histograma de contratos, entrabas a la pila, y para volver a ver la forma del plantel había que salir. Un detalle sin su resumen obliga a recordar de dónde veníamos, y recordar es exactamente lo que una pantalla densa tiene que evitar. LA CARD ES UN PEDAZO DE PANTALLA, NO UNA CAJA DE DIÁLOGO, y de ahí sale todo lo demás de esta hoja: su fondo es `--bg-page` —la pizarra, la misma de la pantalla de atrás—, su barra es `--bg-chrome` como cualquier barra del juego, y lo de adentro son `.tarjeta` normales. No hay una superficie nueva. La alternativa era vestirla de `.dialogo` —una placa de `--bg-panel` con padding— y entonces el eco de arriba habría sido un panel dentro de un panel, que es lo único que `DESIGN.md` prohíbe de plano. POR QUÉ MODAL, que el criterio de este proyecto no regala. La regla general es no gastar un modal en algo que no necesita interrumpir; esta card se lo gana por dos motivos medidos y no por parecerse a la fuente: el detalle que tapa no cabe en el primer viewport de su pantalla, y `` trae el foco atrapado, el Escape y el fondo inerte, que son las tres cosas que un panel desplegable a mano se olvida. El día que un tile quiera abrir algo que sí entra en la pantalla, eso no es una card: es un tile más grande. ========================================================================== */ /* -------------------------------------------------------------------------- 1. EL TILE -------------------------------------------------------------------------- Una `.tarjeta` que además se abre. No es una clase de aspecto: lo único que agrega es la señal de que hay algo detrás y la superficie de clic. EL TILE SE QUEDA SÓLO CON EL RESUMEN, y esa es la mitad del sistema que se ve en la pantalla y no en la card. Un tile que muestra el detalle entero no resume nada, y entonces la card no tiene qué agregar. Si al sacarle el detalle a un tile no queda nada, ese tile no quería una card. TODA LA PLACA ES BLANCO DE CLIC, pero quien manda es el botón de su cabecera: el clic en cualquier sitio del tile lo pulsa a él. Es la única forma de que el ratón tenga la superficie grande de la fuente sin que el teclado se quede con un `
` que no se puede enfocar ni anunciar. Lo que NO se secuestra es un control de adentro —un botón, un enlace, una fila con su menú—: ahí manda el control, y por eso el reenvío pregunta. -------------------------------------------------------------------------- */ .tile { cursor: pointer; } /* La cabecera del tile deja de ser sólo un título: a la derecha va el control que abre, y el `.panel__head` ya es la fila que los sostiene a los dos. Y ENVUELVE, porque en un tile la cabecera puede llevar TRES cosas —título, eco y el control— y en una columna de 320 px no entran en una línea: medido en Propuestas, «Quién lo quiere» se partía a la mitad para hacerle sitio al botón. Con el `margin-left: auto` del control, envolver lo baja entero al renglón siguiente y pegado a la derecha, en vez de robarle letras al título. Donde entran los tres en una línea esto no hace nada. */ .tile > .panel__head { align-items: center; flex-wrap: wrap; } .tile__ir { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; padding: 0 var(--sp-3); height: 22px; border-radius: var(--r-sm); background: none; /* `--text-muted` y no `--text-dim`: el segundo NUNCA estuvo definido en `tokens.css` —lo nombraba la lista de colores de DESIGN.md, de donde ya salió—. Escrito así, la regla es inválida y el botón se queda con el color heredado —que acá es el primario— y entonces el reposo y el `:hover` se ven iguales. Cuesta cero verlo si uno no lo mide, porque el resultado es legible. */ color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .tile__ir .i { width: 12px; height: 12px; } /* EL TILE ENTERO SE ENCIENDE, no sólo el control. Es lo que dice que la placa es el blanco y no ese botoncito de la esquina: al pasar por encima sube el borde —la señal de foco de todo el sistema— y el control se aclara con él. Sin el borde, el único aviso de que un panel es tocable sería una palabra de 14px arriba a la derecha. */ .tile:hover { border-color: var(--line-strong); } .tile:hover .tile__ir { color: var(--text-primary); background: var(--bg-row); } .tile:hover .tile__ir .i { transform: translateX(1px); } .tile__ir .i { transition: transform var(--dur-fast) var(--ease); } /* El foco es del botón y no de la placa: el tile no es enfocable a propósito —ver el bloque de arriba— así que el anillo tiene que dibujarse donde el teclado realmente está parado. Y arrastra el mismo encendido que el ratón, porque las dos maneras de llegar tienen que verse igual de llegadas. */ .tile:has(.tile__ir:focus-visible) { border-color: var(--line-strong); } .tile__ir:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--text-primary); } /* -------------------------------------------------------------------------- 2. LA CARD -------------------------------------------------------------------------- Es el quinto escalón de la escala de modales de `app.css` —500 · 680 · 680 · 920 · 1120— y el más ancho porque es el único que no lleva una pregunta adentro sino una PANTALLA: el eco del tile arriba y su detalle entero debajo. Se toca junto con los otros cuatro o la jerarquía se rompe; el comentario de la escala vive allá y no acá. EL ALTO SE MIDE CON `--alto-ventana` Y NO CON `100dvh`. Adentro del zoom del sitio `100dvh` mide de más y lo que sobra se pierde por abajo — que es justamente donde termina la lista de una card. El token y su cuenta están en `tokens.css`. -------------------------------------------------------------------------- */ .dialogo--card { width: min(1120px, calc(100vw - 2 * var(--sp-6))); max-height: calc(var(--alto-ventana) - 2 * var(--sp-8)); padding: 0; overflow: hidden; flex-direction: column; /* La pizarra, no la placa: la card es un pedazo de la pantalla de atrás. */ background: var(--bg-page); } /* EL `display` VA CON `[open]`, Y NO A SECAS. Un `` cerrado lo esconde la hoja del navegador con `dialog:not([open]) { display: none }`, y un `display: flex` suelto en la card le gana: la caja cerrada seguía maquetada —medida, 278 px de alto en Contratación y 255 en Reserva— con su cabecera y su eco dibujados dentro de la página, y en una pantalla llegó a quedarse con el punto del medio en el `elementFromPoint`. No se vio antes porque el fantasma es corto: al cerrar, el detalle ya se fue al almacén y lo que queda es la barra y el resumen, que se parecen bastante a una tarjeta más. La forma de encontrarlo fue preguntar quién está en el centro de la pantalla, no mirarla. La contraprueba que lo aisló: el `.dialogo` normal del juego, cerrado, mide `display: none` y 0 px de alto. O sea que no es del `` ni del navegador — era de esta regla. */ .dialogo--card[open] { display: flex; } /* -------------------------------------------------------------------------- 2.1 LA BARRA: DE DÓNDE VENÍS Y CÓMO SE SALE -------------------------------------------------------------------------- Miga de pan y X, que es exactamente lo que tiene la de FM26 y las dos cosas que un panel encima de otro le debe al que lo abrió: dónde está y cómo se vuelve. LA MIGA ES LA MISMA DE LA PANTALLA, la de `app.css`, y esto es reúso y no parecido: la ruta de una card es la de su pantalla con un escalón más —«Contratación › Contratos que se acaban»— así que tiene que leerse con la misma voz. Lo único que cambia es la caja: la de la pantalla mide 26px porque es un renglón entre el chrome y el contenido, y acá es la barra de la card y lleva un control adentro. -------------------------------------------------------------------------- */ .card__cab { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--bg-chrome); border-bottom: 1px solid var(--line); } .card__cab .breadcrumb { flex: 1; min-width: 0; height: auto; padding: 0; border: 0; background: none; } /* La última hoja de la ruta es el nombre de la card y se lee como un título: es lo que contesta «¿qué estoy mirando?» cuando la pantalla de atrás quedó tapada. Sube a primaria y a peso 600 — la miga de la pantalla no lo hace porque allá el título está tres centímetros más abajo, escrito en grande. */ .card__cab .breadcrumb [aria-current='page'] { color: var(--text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* -------------------------------------------------------------------------- 2.2 EL CUERPO: EL ECO Y EL DETALLE -------------------------------------------------------------------------- EL ECO NO SE VA CON EL SCROLL, y es la regla entera de este sistema. Si el resumen se sube al hacer rodar la lista, la card vuelve a ser una pantalla nueva que perdió lo anterior — que es de lo que veníamos. Así que el que rueda es el detalle y sólo el detalle: `min-height: 0` en la columna, porque sin eso un hijo con scroll crece hasta su contenido y saca la card de la ventana en vez de rodar por dentro. -------------------------------------------------------------------------- */ .card__cuerpo { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-5); min-height: 0; } /* El eco no se encoge y no rueda: es un envoltorio sin aspecto propio, porque la placa que se ve adentro es el clon del tile con su `.tarjeta` puesta. */ .card__eco { flex: none; } /* El detalle SÍ tiene placa propia —lleva `.tarjeta` en el marcado de `card.js`— y es también el que rueda. Van juntas a propósito: si rodara el contenedor de afuera, el borde de la placa se iría hacia arriba con la lista y a media pantalla no habría placa, sólo renglones sueltos sobre la pizarra. Es el mismo scroller de `.objetivos__lista`, con la misma barra fina. */ .card__detalle { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ink-700) transparent; } /* -------------------------------------------------------------------------- 3. EL MOVIMIENTO — YA NO VIVE ACÁ -------------------------------------------------------------------------- La card llegaba desde un 2 % más chica y cuatro píxeles abajo, con el velo entrando por separado y más lento. Sigue haciendo exactamente eso: lo que cambió el 1/9/2026 es quién lo escribe. Esos mismos cuatro píxeles y ese mismo 2 % estaban escritos TRES VECES —acá, en la mesa y en el parte del movimiento—, con el comentario de cada copia explicando que era deliberado que el gesto fuera el mismo. Y los otros cinco modales del juego no lo tenían: aparecían secos. El argumento de entonces —«esta hoja tiene que poder cargarse sola en una pantalla que no negocia nada»— era contra `mesa.css` y sigue en pie; contra `movimiento.css` no aplica, porque lo cargan las veinticuatro pantallas. Está en `movimiento.css`, punto 4, junto con LA SALIDA, que es lo que esta copia no tenía: la card llegaba con calma y se apagaba de un fotograma a otro. Ahí también está por qué el gesto se mudó de fotogramas a transición, que es lo único que permite animar el cierre de un ``. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 4. LA CARD ANGOSTA -------------------------------------------------------------------------- Por debajo de 900px la card deja de tener márgenes que regalar: se pega a los bordes y se queda con casi toda la ventana. El eco sigue arriba y sigue sin rodar, porque en una ventana chica es cuando más falta hace — es donde la pantalla de atrás se ve menos. -------------------------------------------------------------------------- */ @media (max-width: 900px) { .dialogo--card { width: calc(100vw - 2 * var(--sp-4)); max-height: calc(var(--alto-ventana) - 2 * var(--sp-5)); } .card__cuerpo { padding: var(--sp-4); gap: var(--sp-4); } }