` se blockifica,
así que las celdas secundarias caerían en un renglón CADA UNA y no se podrían
juntar en una línea con sus puntos. Siendo la fila un bloque se quedan
`inline` y fluyen seguidas; la cifra y las acciones se anclan a la derecha con
`position: absolute` sobre el hueco del `padding-inline-end`.
EL PAPEL DE CADA CELDA LO DICE LA TABLA (2026-09-18), NO LO ADIVINA LA HOJA
==========================================================================
Hasta el 2026-09-18 esto lo decidía la hoja sola: la PRIMERA celda era el
nombre, la que llevara `crud-celda-numero` era la cifra y las demás bajaban a
la segunda línea. Con las cuatro columnas del banco salía bien. Con la lista
de PRODUCTOS de verdad —diez columnas fijas más tres por cada lista de
precios: veinte en la instalación del usuario— salía mal de tres maneras a la
vez, y así llegó en una captura hecha en un iPhone:
1. cada producto ocupaba MAS DE UNA PANTALLA, porque las veinte columnas
bajaban a la fila, incluidas las vacías, que dejaban su rótulo sin valor;
2. las NUEVE columnas de precio son las nueve `crud-celda-numero`, así que
las nueve se anclaban al MISMO hueco de la derecha y se pintaban unas
encima de otras: nueve «0,00 €» superpuestos sobre los rótulos;
3. la casilla de selección, el duplicado y la papelera flotaban sueltos
encima del nombre y se llevaban el primer toque de la fila, que es el que
tiene que abrir la ficha.
La salida no es adivinar mejor: es que la TABLA DIGA el papel de cada celda.
`Services\Crud\PapelesDeColumna.cs` lo reparte en C# —donde se sabe cuántas
columnas hay y cuáles traen valor— y lo escribe en `data-papel`:
· `principal` el nombre: primera línea, peso 600, tinta;
· `cifra` UNA sola, anclada a la derecha de la primera línea;
· `secundaria` hasta tres, en la segunda línea y unidas con « · »;
· `escritorio` no se pinta: está en la ficha, a un toque;
· `acciones` el menú «⋯» de 44 px al final de la fila;
· `seleccion` la casilla, que sólo sale en modo «Seleccionar».
Y `data-vacia` marca la celda que no trae texto. Se decide en C# y no con
`:empty`, que es frágil: una celda con un espacio, con un enlace o con un
icono no está vacía para el selector, y una celda vacía dejaba colgando su
punto de separación.
LAS TRES FAMILIAS DE TABLA DE LA CENTRAL lo llevan —el marco CRUD, el diario
de documentos y los listados de la analítica—, y por eso los selectores van
por ETIQUETA (`tbody > tr > td`) y no por las clases de MudBlazor: las dos
primeras son `MudTable` y la tercera es un `
` a pelo. Una fila de la
central se lee igual venga de donde venga.
LAS QUE NO LOS DECLARAN SIGUEN ATENDIDAS, con la regla de antes escrita en
cuatro líneas (`:not([data-papel])`): la primera celda es el nombre y la
numérica es la cifra. Son las treinta y pico tablas escritas a mano dentro de
una ficha, que tienen tres o cuatro columnas y con las que esa regla acierta.
CON UNA EXCEPCION, Y SE DECIDE SOLA: una tabla que se ESCRIBE —líneas de un
albarán, grupos de platos de un menú, precios por tarifa— tiene campos dentro
de las celdas, y apilar la fila en una línea de texto dejaría los campos en
fila india. `:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))` las deja fuera:
las viste la gramática de FORMULARIO del final de este bloque. La casilla de
selección NO cuenta como campo (MudBlazor la pinta como `.mud-checkbox`), así
que una lista con selección múltiple sí se apila. */
@media (max-width: 719.98px) {
/* --- 1. LA TABLA SE DESHACE ------------------------------------------ */
/* Sin columnas no hay nada que encabezar; y con la cabecera se va la fila de
filtros por columna del diario, que son hasta treinta campos en fila. */
:is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) thead { display: none; }
:is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) :is(table, tbody, tfoot) {
display: block;
inline-size: 100%;
}
/* NINGUN CARRIL POR ENCIMA DE UNA FILA APILADA: un contenedor que se
desplaza sólo puede RECORTAR lo que ya cabe. Son tres capas, y dos las
escribe MudBlazor EN LINEA (el alto fijo y el `overflow` de `FixedHeader`
del diario de documentos). A un atributo `style` no le gana ningún
selector: es de los sitios donde el §6 admite `!important`. */
:is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))),
.informe-rejilla:has(.plano-papeles) { overflow: visible; }
:is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) .mud-table-container {
overflow: visible !important;
max-block-size: none !important;
block-size: auto !important;
}
:is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) table {
overflow-x: visible !important;
}
/* --- 2. LA FILA ------------------------------------------------------- */
/* EL CARRIL DE LA DERECHA se reserva SOLO si hay algo que poner en él: un
listado de la analítica no tiene ni cifra anclada ni acciones, y con el
carril fijo dejaba 132 px en blanco en cada una de sus cien filas. */
/* LA FILA ORDENA POR PAPEL Y NO POR COLUMNA, y por eso es `flex` y no `block`.
El orden de las columnas es el del ESCRITORIO y no tiene por qué empezar
por el nombre: los tres diarios de documentos empiezan por «Jornada», así
que la fila de una factura salía con «17/09/2026» en un renglón y
«A-000400» debajo. Con `order`, el nombre abre la fila siempre, venga en la
columna que venga, y lo secundario va detrás en el orden de la tabla.
`column-gap` en vez de espacios dentro del « · »: en una caja de línea, el
espacio de delante de un `::before` que abre línea se descarta, y el punto
se pegaba a la palabra. */
:is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 0.3rem;
position: relative;
--plano-carril-acciones: 0px;
--plano-carril-cifra: 0px;
padding: 0.5rem calc(var(--plano-carril-acciones) + var(--plano-carril-cifra) + 0.15rem) 0.5rem 0.15rem;
min-block-size: var(--plano-toque-movil);
border-block-end: 1px solid var(--plano-linea-fina);
}
:is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr:has(:is([data-papel="acciones"], .crud-celda-acciones)) {
--plano-carril-acciones: calc(var(--plano-toque) + 0.35rem);
}
:is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr:has(:is([data-papel="cifra"]:not([data-vacia]), td:not([data-papel]):is(.crud-celda-numero, .admin-celda-numero))) {
--plano-carril-cifra: 5.5rem;
}
/* La fila con el menú «⋯» abierto ya NO se sube por encima de las demás ni del velo (2026-10-15): el menú está en la capa
superior, y una fila subida no dejaba cerrarlo tocando en ella fuera del menú (el toque abría la ficha). */
/* --- 3. LA CELDA ------------------------------------------------------ */
/* La base: en línea, fina y en tinta rebajada, que es la segunda línea de la
etiqueta. Los papeles de abajo la pisan. Y sin el `::before` con el que
MudBlazor rotula cada celda: aquí no hay columnas que rotular. */
:is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr > :is(td, th) {
display: inline;
border: none;
padding: 0;
font-size: var(--plano-t-13);
font-weight: 420;
color: var(--plano-tinta-2);
white-space: normal;
text-align: start;
}
:is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) :is(tbody, tfoot) > tr > :is(td, th)::before { content: none; }
/* EL NOMBRE. Con papeles, el que lo diga; sin ellos, la primera celda que no
sea la casilla, que es el nombre en todas las tablas escritas a mano. */
:is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr > [data-papel="principal"],
:is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr > td:not([data-papel]):first-of-type:not(:has(.mud-table-cell-checkbox)),
:is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr > td:has(.mud-table-cell-checkbox) + td:not([data-papel]) {
display: block;
/* La primera línea entera, y la PRIMERA venga donde venga su columna. */
order: 1;
flex: 1 0 100%;
font-size: var(--plano-t-15);
font-weight: 600;
color: var(--plano-tinta);
}
:is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr > [data-papel="secundaria"],
:is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr > td:not([data-papel]) { order: 2; }
/* LA FILA ENTERA LLEVA A LA FICHA, y no sólo el nombre. El enlace deja de
pintarse de enlace —la fila es el objetivo, no una palabra dentro de ella—
y ESTIRA su área de toque sobre la fila con un `::after` que la cubre: son
los 48 px de alto y los 390 de ancho que pide el §4 para un móvil, en vez
de los 104 × 16 que mide «Café con leche».
La fila es `position: relative`, así que el `::after` se ancla a ella. Y no
tapa las acciones: la celda del «⋯» va DESPUES en el marcado y también está
posicionada, así que se pinta por encima.
`position: static`, Y NO ES UN ADORNO: es lo que hace que el `::after` se
ancle A LA FILA (avería del 2026-09-18 por la noche, el usuario tocando la
lista de Instalaciones en su iPhone). El truco funcionaba con un `` y no
con un `