/* ========================================================================= NÚCLEO — components.css Los componentes que el inventario de Fase 1 encontró REINVENTADOS de forma independiente tres veces o más. No es un catálogo de lo que podría hacer falta: cada bloque de aquí abajo existe porque el repositorio ya lo tiene escrito varias veces con nombres distintos. Prefijo `ds-` en todo. Es lo que mantiene el núcleo inerte mientras dura la migración: ninguna de estas clases existe hoy en las ~47.000 líneas de CSS de app, así que cargar este fichero no puede cambiar una pantalla sin migrar. Ver la cabecera de base.css. Reglas que se cumplen aquí sin excepción (DESIGN.md §2, §4, §5): - Ni un literal de color, tamaño de fuente o espaciado. Todo de tokens. - Ninguna sombra salvo en lo que flota de verdad (modal, panel lateral). - Ningún estado comunicado solo por color: siempre texto, y icono en los críticos. - El acento solo en navegación, acción primaria, fila seleccionada, foco y logotipo. Aquí eso significa: .ds-btn--primary, .ds-table tr[aria-selected] y el anillo de foco. En ningún borde decorativo. ========================================================================= */ /* ========================================================================= 1. SUPERFICIES Las tarjetas NO llevan sombra (DESIGN.md §1): se separan con borde y escalón de fondo. Reinventado en ~18 de los 20 CSS del repo. ========================================================================= */ .ds-panel { background: var(--n-0); border: var(--bd-strong); border-radius: var(--r-md); } .ds-panel__head { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5) var(--s-6); border-bottom: var(--bd); } .ds-panel__title { font-size: var(--fs-md); font-weight: 600; line-height: var(--lh-tight); } .ds-panel__body { padding: var(--s-6); } /* El cuerpo de un panel que contiene una tabla no lleva relleno: la tabla llega hasta el borde y son sus celdas las que respiran. */ .ds-panel__body--flush { padding: 0; } .ds-panel__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); padding: var(--s-5) var(--s-6); border-top: var(--bd); background: var(--n-25); border-radius: 0 0 var(--r-md) var(--r-md); } /* UN AVISO NO ES UNA COLUMNA AL LADO DEL BOTÓN: SE LLEVA SU RENGLÓN. El pie es una fila, y una fila coloca a su lado todo lo que le eches. En la ficha de tarea del doctor eso puso TRES columnas en un móvil —«queda 1 presupuesto por validar», el botón «Pedir nuevo presupuesto» y «Atención al paciente lo creará…»— cada una de un tercio de 390px. El botón, que es `white-space: nowrap`, se sale de su caja antes que ceder ancho. Es EXACTAMENTE el defecto que ya estaba resuelto para la fila de acciones de un bloque (`.ds-b__accion` en `apps/coordinador.css`), con la misma cura y por el mismo motivo, y aquí faltaba: el pie del panel es el otro sitio donde el sistema pone un motivo escrito junto a un botón, porque §6 no admite que una información viva solo en un `title` —en un móvil no hay hover, así que un tooltip informa igual que el silencio—. `flex: 1 0 100%` en las dos anchuras y no bajo una media query: por encima de 640px los botones son de ancho automático, así que dar el renglón entero al aviso no cambia nada mientras quepa, y por debajo es lo único que evita las columnas. `margin: 0` porque el hueco lo pone el `gap` del pie. */ .ds-panel__foot > .ds-help { flex: 1 0 100%; margin: 0; } /* Cabecera de pantalla: título, contexto y la acción primaria a la derecha. */ /* BARRA DE TITULAR (CEO, 2026-10-24): título, una línea de contexto y las acciones, en una franja. Se trabaja en portátiles de 15″ y la cabecera se llevaba ~90 px antes del primer dato; ver DESIGN.md §6.5. */ .ds-pagehead { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-6); padding-bottom: var(--s-4); border-bottom: var(--bd); } .ds-pagehead__title { font-size: var(--fs-lg); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.01em; } .ds-pagehead__sub { margin-top: var(--s-1); max-width: 110ch; font-size: var(--fs-xs); color: var(--n-500); } .ds-pagehead__actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); } /* ⚠️ EL ARMAZÓN CEDE SU CABECERA A LA PANTALLA (2026-08-17, medido en la app del doctor). Un armazón de app instalada pinta su propia `ds-pagehead` —el nombre de dónde estás, que en un móvil no lo da ninguna barra superior—, y las pantallas ya migradas traen la suya dentro del contenido. Cuando coinciden pasan dos cosas, las dos medidas: **dos `

` en el documento** —un lector de pantalla anuncia dos títulos de página— y **48 px de chrome muerto encima del pliegue**, que a 390 × 664 es un cuarto de lo que se ve sin hacer scroll y es justo el alto que se está peleando pantalla por pantalla. Manda la de la PANTALLA, porque es la que dice algo: la del armazón es el nombre de la app. Y se resuelve por la ESTRUCTURA y no pantalla por pantalla: así vale para la que se añada el año que viene sin que nadie se acuerde de esto — que es exactamente cómo aparecieron las dos primeras. `display: none` y no `visibility`: hay que quitarlo del árbol de accesibilidad, no solo de la vista, o el lector sigue leyendo los dos. Acotado a los armazones que declaran barra inferior (`--con-nav-inferior`): son los que pintan cabecera propia. El `> ` es imprescindible — la cabecera de la pantalla vive dentro de `main`, y sin él se retirarían las dos. */ .ds-app--con-nav-inferior:has(main .ds-pagehead) > .ds-pagehead { display: none; } /* La cabecera del armazón va FUERA del contenido de la pantalla, así que no hereda el margen lateral de ningún arquetipo: el título quedaba pegado al borde del teléfono mientras la lista, un palmo más abajo, llevaba sus 16 px (medido en «Mis tareas» del Coordinador, 2026-09-25: tres márgenes izquierdos distintos en la misma pantalla). El margen es el de `.ds-a__pad`, para que título y contenido caigan en la misma vertical. */ .ds-app--con-nav-inferior > .ds-pagehead { padding: var(--s-6) var(--s-6) var(--s-5); } /* ========================================================================= 2. BOTONES Tres pesos y no más: primaria (una por pantalla), normal y fantasma. ========================================================================= */ .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); height: var(--ctl-h); padding: 0 var(--s-5); border: var(--bd-strong); border-radius: var(--r-sm); background: var(--n-0); color: var(--n-800); font-size: var(--fs-sm); font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .ds-btn:hover { background: var(--n-50); } .ds-btn:active { background: var(--n-100); } /* ⚠️ UN BOTÓN QUE ES UN `` PIERDE SU COLOR AL PASARLE EL RATÓN, y hay que reafirmarlo aquí (2026-08-17). Es el mismo choque que la cabecera de `base.css` describe entre el reset y la decisión, solo que con la hoja ANTIGUA y por el otro lado: - `static/css/base.css` declara `a:hover { color: var(--accent-600) }`, que es (0,1,1) —elemento + pseudo-clase—, y `base.html` la carga DESPUÉS de este fichero, a propósito, para que el CSS de las apps sin migrar siga ganando durante la migración. - Las variantes de botón son (0,1,0) y solo declaran su color en reposo. Así que (0,1,1) le ganaba a (0,1,0) y **el texto de CUALQUIER botón-enlace se volvía acento al pasar por encima**. En el primario eso es índigo sobre índigo: el rótulo desaparece justo en el momento de pulsarlo. Lo destapó «Empezar sin presupuesto» de Primera Visita, pero no era de esa pantalla — le pasaba a los tres pesos de botón en las 30 sub-apps, y al `--danger`, que además perdía lo único que dice que es destructivo. `.ds-btn:hover` es (0,2,0) y le gana a (0,1,1) sin `!important` y sin tocar el orden de carga, que es una decisión deliberada de `base.html`. El subrayado viene del mismo sitio (`.ds-app :where(a):hover`) y se quita por lo mismo: un botón no se subraya. Se retira el día que `css/base.css` deje de cargarse, o sea cuando no quede una sola pantalla sin migrar. */ .ds-btn:hover, .ds-btn:active { color: var(--n-800); text-decoration: none; } .ds-btn--primary:hover, .ds-btn--primary:active { color: var(--n-0); } .ds-btn--ghost:hover, .ds-btn--ghost:active { color: var(--n-600); } .ds-btn--danger:hover, .ds-btn--danger:active { color: var(--risk-ink); } .ds-btn:disabled:hover, .ds-btn[aria-disabled="true"]:hover { color: var(--n-400); } .ds-btn:disabled, .ds-btn[aria-disabled="true"] { color: var(--n-400); background: var(--n-50); cursor: not-allowed; } /* La acción primaria. Es uno de los cinco sitios donde el acento aparece, así que como mucho una por pantalla: dos botones de acento es no haber decidido cuál es la siguiente acción. */ .ds-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--n-0); } .ds-btn--primary:hover { background: var(--accent-600); border-color: var(--accent-600); } .ds-btn--primary:active { background: var(--accent-600); } .ds-btn--ghost { background: transparent; border-color: transparent; color: var(--n-600); } .ds-btn--ghost:hover { background: var(--n-100); } /* Destructiva. Va en texto rojo sobre fondo neutro, no en rojo macizo: un botón rojo lleno compite con los badges de riesgo de la propia tabla. */ .ds-btn--danger { color: var(--risk-ink); border-color: var(--n-200); } .ds-btn--danger:hover { background: var(--risk-bg); border-color: var(--risk); } /* Solo icono. Lleva aria-label obligatorio; sin él es un botón mudo. */ .ds-btn--icon { width: var(--ctl-h); padding: 0; } .ds-btn--lg { height: calc(var(--ctl-h) + var(--s-4)); padding: 0 var(--s-7); font-size: var(--fs-base); } /* El hermano pequeño de `--lg`, para una celda de acciones: tres botones a la altura de control completa dentro de un `` empujan la fila al doble de alto y la tabla deja de leerse como una lista. ⚠️ Existía escrito en dos sitios y **no estaba definido en ninguno** (`coordinador-biometria.js` lo pinta desde JS desde hace meses): la clase viajaba en el HTML y no hacía nada. Es el fallo mudo de siempre en versión CSS — nadie ve un botón «que no se ha empequeñecido». */ .ds-btn--sm { height: calc(var(--ctl-h) - var(--s-4)); padding: 0 var(--s-4); font-size: var(--fs-sm); } /* Grupo de botones pegados (vistas, rangos de fecha, densidad). */ .ds-btngroup { display: inline-flex; } .ds-btngroup .ds-btn { border-radius: 0; } .ds-btngroup .ds-btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); } .ds-btngroup .ds-btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; } .ds-btngroup .ds-btn + .ds-btn { margin-left: -1px; } .ds-btngroup .ds-btn[aria-pressed="true"] { background: var(--n-100); color: var(--n-900); font-weight: 600; } /* ========================================================================= 3. CAMPOS La etiqueta es una micro-etiqueta condensada: es la firma del sistema y además comprime el formulario, que es lo que necesita una pantalla densa. ========================================================================= */ /* La separación entre la etiqueta y su control **no es estética**: el anillo de foco se pinta 4px por fuera de la caja (`--focus`, ver base.css §5), así que con los 6px que había aquí antes el anillo pasaba a 2px del rótulo y lo rozaba. Con 8px queda a 4px, la misma holgura que el sistema deja en cualquier otro sitio. Medido el 2026-08-18 en el card del Coordinador. */ .ds-field { display: flex; flex-direction: column; gap: var(--s-4); } .ds-field__label { font-family: var(--font-cond); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--n-500); } .ds-field__label--req::after { content: " *"; color: var(--risk-ink); } .ds-input, .ds-select, .ds-textarea { width: 100%; min-height: var(--ctl-h); padding: var(--s-3) var(--s-4); border: var(--bd-strong); border-radius: var(--r-sm); background: var(--n-0); color: var(--n-800); font-size: var(--fs-base); line-height: var(--lh-base); } .ds-textarea { min-height: calc(var(--ctl-h) * 3); } /* Tres renglones es el mínimo razonable para un texto libre, y de más para un campo que casi siempre tiene DOS líneas —los teléfonos de un contacto: un móvil y a veces un fijo—. El `rows="2"` del marcado no basta, porque el `min-height` de arriba lo pisa. Importa donde el alto es el recurso escaso: en el editor de la Libreta (§26) esos 28px son una fila de fichas menos en la lista que hay debajo, en cada pantalla y todo el rato. */ .ds-textarea--corta { min-height: calc(var(--ctl-h) * 2); } /* Un control dentro de una BARRA (`.ds-cluster`, `.ds-pagehead__actions`) y no dentro de un formulario en columna. El `width: 100%` de arriba es correcto en un `.ds-field` —los campos de un formulario se alinean— y equivocado aquí: la barra envuelve, así que la etiqueta, el campo y el botón caen en tres renglones y una sola pregunta ocupa el alto de tres. Pasó en la Bandeja de Recepción (2026-08-17): el selector de ventana comía el espacio de la lista que hay debajo, en una pantalla grande. No se arregla quitando el 100 % de `.ds-select`: en un formulario en columna haría que cada campo midiese lo que mide su opción más larga, y la columna dejaría de estar alineada. Son dos sitios y dos anchos. */ .ds-input--auto, .ds-select--auto { width: auto; } .ds-input::placeholder, .ds-textarea::placeholder { color: var(--n-400); } .ds-input:disabled, .ds-select:disabled, .ds-textarea:disabled { background: var(--n-50); color: var(--n-500); } /* Solo lectura: un campo que no se puede escribir tiene que PARECER que no se puede escribir. Sin esto es idéntico a uno editable, así que quien lo tiene delante hace clic, teclea y no pasa nada — la pantalla no falla, miente. No es `:disabled`: el texto sigue leyéndose entero y se puede seleccionar y copiar, que es justo para lo que se usa (un campo que rellena la aplicación). De ahí que conserve el color del texto y solo pierda el fondo blanco. */ .ds-input[readonly], .ds-textarea[readonly] { background: var(--n-50); cursor: default; } /* Importes y cantidades: alineados a la derecha y tabulares también dentro del input, o el número salta al pasar de edición a celda. */ .ds-input--num { text-align: right; font-variant-numeric: tabular-nums; } /* La ayuda de un campo es TEXTO, así que tiene medida: en un panel a sangre —el del plan de tratamiento mide 1.304px en un portátil— una sola frase se estiraba en un renglón de punta a punta de la tarjeta y dejaba de leerse como la nota de su campo. El tope no se nota en un formulario en columna, donde la columna ya es más estrecha que esto. */ .ds-field__help { max-width: 62ch; font-size: var(--fs-xs); color: var(--n-500); } /* Error: borde + texto. El borde rojo solo sería color (DESIGN.md §5). */ .ds-field--error .ds-input, .ds-field--error .ds-select, .ds-field--error .ds-textarea { border-color: var(--risk); } .ds-field__error { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-xs); color: var(--risk-ink); } .ds-check { display: inline-flex; align-items: center; gap: var(--s-4); font-size: var(--fs-base); cursor: pointer; } .ds-check input { accent-color: var(--accent); } /* LA CASILLA SUELTA (2026-08-17). `.ds-check` viste la pareja etiqueta + casilla, y eso cubre el marcado que escribe una plantilla. No cubre el que escribe **Django**: un `forms.CheckboxInput` rinde el `` y nada más, así que la clase va en la casilla y no en un envoltorio que no existe. Sin esto, la regla de arriba no la alcanza nunca y el `input` sale con el azul por defecto del navegador — el mismo azul que DESIGN.md §1 prohíbe por escrito. Sube al núcleo porque ya se estaba usando: `apps/common/incidencias/forms.py` pone `class="ds-checkbox"` desde su migración y **ninguna hoja la declaraba**. Es el modo de fallo que este sistema tiene peor: una clase que nadie declara se ve casi bien —la casilla nativa funciona— y no falla nunca, así que nada avisa. Al pasar los 270 controles de `contabilidad/forms.py` y `stock/forms.py` se encontró el hueco, y arreglarlo ES la tarea: el contrato (§2) dice que si falta un componente se lleva al núcleo, no se escribe en la app. El objetivo táctil sigue el mismo criterio que el resto: 44px con puntero grueso, aunque el modo compacto esté activo (§6). Se hace con `outline` y no con caja para no mover la línea de base del renglón donde vive la casilla. */ .ds-checkbox { accent-color: var(--accent); width: var(--s-6); height: var(--s-6); margin: 0; flex: none; cursor: pointer; } @media (pointer: coarse) { .ds-app .ds-checkbox { width: var(--s-7); height: var(--s-7); } } /* EL CAMPO QUE ES UNA CASILLA (2026-09-14). Un formulario que se pinta en bucle (`{% for campo in form %}`) mete cada control en un `.ds-field`, que es una COLUMNA: rótulo arriba, control debajo. Con un booleano eso sale mal de dos maneras, y las dos se midieron en las seis pantallas de Marketing Central que lo tienen: la casilla se estira al ancho de la columna —846 px de caja— y el navegador dibuja el cuadrado centrado en ella, a media pantalla y 22 px por debajo de su texto; y el texto sale en versalitas como si nombrara un campo que no está. El marcado es el de `.ds-check` (la casilla dentro de su etiqueta) y este modificador solo arregla lo que la columna rompe: la etiqueta mide lo que mide su frase —no el ancho de la columna, que haría clicable media pantalla— y la ayuda y el error se sangran hasta donde empieza el texto, para que se lean como nota de ESA casilla y no como un párrafo suelto. El sangrado es el ancho de la casilla más el hueco de `.ds-check`, también en táctil. */ .ds-field--check { gap: var(--s-2); } .ds-field--check > .ds-check { align-self: flex-start; } .ds-field--check > :is(.ds-field__help, .ds-field__error) { padding-left: calc(var(--s-6) + var(--s-4)); } @media (pointer: coarse) { .ds-app .ds-field--check > :is(.ds-field__help, .ds-field__error) { padding-left: calc(var(--s-7) + var(--s-4)); } } /* Sección de formulario. Un formulario largo no es una lista de campos: son grupos con nombre, y sin ellos «Fecha prevista» y «Cubetas devueltas» pesan lo mismo. La rejilla reparte los campos en columnas que se adaptan al ancho, así que uno de veinte campos no obliga a bajar veinte veces. Sube al núcleo porque la primera app migrada ya lo necesitaba y lo resolvió con `

` incrustado en la plantilla (stock/producto_form.html): eso es la señal de que faltaba el componente, no de que sobrara la sección. */ .ds-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .ds-fieldset + .ds-fieldset { margin-top: var(--s-9); } .ds-fieldset__legend { display: block; width: 100%; padding: 0 0 var(--s-4); margin-bottom: var(--s-6); border-bottom: var(--bd-strong); font-family: var(--font-cond); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--n-500); } .ds-formrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-6); } .ds-formrow + .ds-formrow { margin-top: var(--s-6); } /* Campo que ocupa la fila entera: notas, direcciones, cualquier texto largo. */ .ds-formrow__full { grid-column: 1 / -1; } /* UNA FILA DE PANELES NO ES UNA FILA DE CAMPOS. El `minmax(220px, …)` de arriba está medido para un `` con su etiqueta encima. Cuando lo que se reparte son PANELES enteros —con su nota explicativa dentro— la misma rejilla mete cuatro columnas de 290px en una columna de 1.240 y la nota se lee en tiras de tres palabras: medido en `/configuracion/datalytics/` el 2026-08-27, donde «¿Qué es ETL Hub?» ocupaba trece renglones. Un panel pide ancho de LECTURA, no de campo: dos por fila como mucho, y uno solo en cuanto la pantalla no da para los dos. 28rem es el mínimo con el que dos caben en la columna ancha de Configuración (1.240px) y ninguno baja del ancho al que su texto sigue siendo un párrafo. */ .ds-formrow:has(> .ds-panel) { grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); } /* Pie de formulario. La acción primaria a la izquierda —donde termina de leer quien acaba de rellenar— y la destructiva separada por el empujón, para que «Eliminar» no quede pegado a «Guardar». */ .ds-formfoot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-top: var(--s-9); padding-top: var(--s-6); border-top: var(--bd-strong); } /* ========================================================================= 4. BADGE DE ESTADO SIEMPRE texto; icono en los críticos. Un badge que solo es color no lo lee ni un daltónico ni una impresión en blanco y negro, y esto es software clínico (DESIGN.md §5). El icono va con aria-hidden: lo que se lee en voz alta es el texto. ========================================================================= */ .ds-badge { display: inline-flex; align-items: center; gap: var(--s-3); padding: var(--s-1) var(--s-4); border-radius: var(--r-pill); background: var(--idle-bg); color: var(--idle-ink); font-size: var(--fs-xs); font-weight: 600; line-height: var(--lh-tight); white-space: nowrap; } .ds-badge__i { font-size: var(--fs-micro); } .ds-badge--ok { background: var(--ok-bg); color: var(--ok-ink); } .ds-badge--warn { background: var(--warn-bg); color: var(--warn-ink); } .ds-badge--risk { background: var(--risk-bg); color: var(--risk-ink); } .ds-badge--info { background: var(--info-bg); color: var(--info-ink); } .ds-badge--idle { background: var(--idle-bg); color: var(--idle-ink); } /* Punto de estado para listas muy densas, donde el badge no cabe. Lleva siempre el texto al lado; el punto es refuerzo, no sustituto. */ .ds-dot { display: inline-block; width: var(--s-4); height: var(--s-4); border-radius: var(--r-pill); background: currentColor; flex: none; } /* ========================================================================= 5. TABLA El componente más usado de Lydent. La referencia real del repositorio es la columna numérica de Contabilidad (.importe-cell / .tes-num), no la de Analytics: es la única familia que ya alinea a la derecha, no envuelve y usa numeración tabular. ========================================================================= */ .ds-table { width: 100%; font-size: var(--cell-fs); } /* Cabecera: micro-etiqueta condensada sobre regla de un píxel. La firma. */ .ds-table thead th { position: sticky; top: 0; z-index: 2; padding: var(--s-3) var(--cell-pad-x); background: var(--n-0); border-bottom: var(--bd-strong); font-family: var(--font-cond); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--n-500); text-align: left; white-space: nowrap; } .ds-table tbody td { height: var(--row-h); padding: var(--cell-pad-y) var(--cell-pad-x); border-bottom: var(--bd); vertical-align: middle; } .ds-table tbody tr:hover td { background: var(--n-50); } /* Fila seleccionada: uno de los cinco sitios del acento. */ .ds-table tbody tr[aria-selected="true"] td { background: var(--accent-bg); } /* LA FILA DE LA QUE SE SALIÓ, al volver del detalle o de la edición (`ds_url_ficha … ancla=`, `nucleo.js`). El querystring devuelve la lista con sus filtros y su página; esto devuelve el RENGLÓN, que en una tabla de 40 filas es la mitad de «donde estaba». Se apaga sola a los pocos segundos y no es un estado: si se quedara fija se confundiría con la selección de arriba, que sí lo es y significa otra cosa. El destello no comunica nada por sí mismo —solo dice «mira aquí»—, así que no incumple la regla de no informar solo con color. */ .ds-table tbody tr:target td { animation: ds-fila-vuelta 2.4s var(--ease) 1; } @keyframes ds-fila-vuelta { 0%, 55% { background: var(--accent-bg); } 100% { background: transparent; } } @media (prefers-reduced-motion: reduce) { .ds-table tbody tr:target td { animation: none; background: var(--accent-bg); } } /* Zebra SOLO a partir de 8 columnas (DESIGN.md §4). Por debajo, la regla de un píxel ya guía el ojo y el zebreado solo mete ruido. */ .ds-table--zebra tbody tr:nth-child(even) td { background: var(--n-25); } .ds-table--zebra tbody tr:hover td { background: var(--n-50); } /* Columna numérica. Derecha, sin envolver, tabular, mismos decimales en toda la columna y el símbolo de moneda SOLO en la cabecera. */ .ds-table th.ds-num, .ds-table td.ds-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Signo y color. El signo «−» es lo que comunica; el color solo refuerza. */ /* SOLO PARA MAGNITUDES CON SIGNO, y esto es una regla, no un consejo. El «-» —o el «+» que la plantilla escribe delante— es el segundo canal, y el color solo lo subraya. Usarlas por UMBRAL («win-rate por debajo de 50, en rojo») deja el color como único canal, que es lo que §5 prohíbe: medido, --ok y --risk se separan solo ΔE 7,7 en deuteranopia, así que ese rojo y ese verde son el mismo color para bastante gente. Si lo que se quiere marcar es un umbral, es un badge con su palabra, no una cifra teñida. (Analytics, 2026-08-06: se retiraron 15 usos por umbral introducidos en su propia migración.) */ .ds-table td.ds-num--neg { color: var(--risk-ink); } .ds-table td.ds-num--pos { color: var(--ok-ink); } /* El cero no es un dato: se apaga para que las cifras reales destaquen. */ .ds-table .ds-num--zero { color: var(--n-300); } /* Columna de totales y fila de resultado. */ .ds-table .ds-col--total { border-left: var(--bd-strong); font-weight: 600; background: var(--n-25); } .ds-table tfoot td, .ds-table tr.ds-row--total td { height: var(--row-h); padding: var(--cell-pad-y) var(--cell-pad-x); border-top: var(--bd-strong); background: var(--n-50); font-weight: 600; } /* Primera columna fija en tablas anchas. Se activa a mano con --fija: no todas las tablas anchas la quieren, y fijarla sin querer parte el scroll. */ .ds-table--fija tbody th:first-child, .ds-table--fija tbody td:first-child { position: sticky; left: 0; z-index: 1; background: var(--n-0); } .ds-table--fija tbody tr:hover td:first-child { background: var(--n-50); } .ds-table--fija thead th:first-child { position: sticky; left: 0; z-index: 3; } /* Orden: el indicador se ve SIEMPRE en la columna ordenada, no solo al pasar el ratón — en tableta no hay ratón (DESIGN.md §4 y §6). */ .ds-table th[aria-sort] { cursor: pointer; } .ds-table th[aria-sort]:hover { color: var(--n-700); } /* ⚠️ EL TRIÁNGULO NO ERA UN SITIO DONDE SE PUDIERA PULSAR, Y ESO ES LO QUE EL CEO REPORTÓ COMO «LOS TRIÁNGULOS NO FUNCIONAN» (2026-08-21). El `` declaraba `cursor: pointer` —o sea, prometía que la celda entera obedece— pero el único elemento navegable era el `` del rótulo, y el indicador lo pintaba un `::after` **del ``**: fuera del enlace por construcción. En las columnas de ancho justo era peor todavía, porque ahí el `margin-right` negativo lo empujaba al relleno de la celda, separado del texto: se veía una flecha, se pulsaba la flecha y no pasaba nada. Se arregla moviendo las dos cosas —el relleno de la celda y el indicador— al propio enlace: el `` pasa a ser un bloque que ocupa el `` entero (márgenes negativos que se comen el relleno de la celda y lo vuelven a poner como suyo), así que cualquier píxel de la cabecera, triángulos incluidos, es el enlace. No hace falta tocar `sort_th`: se selecciona por `th[aria-sort] > a`, y así las 108 columnas del portal lo heredan de golpe. */ /* El relleno se lo queda el ENLACE, no la celda: es la única forma de que el enlace llegue hasta el borde. Y `height: 100%` es la otra mitad — sin él el enlace mide lo que mide SU rótulo, y en una fila donde otra cabecera ocupa tres renglones («EN JUEGO €» partido) las cortas dejaban una franja muerta debajo del texto: pulsabas dentro de la celda, con la mano de «esto se pulsa» puesta, y no pasaba nada. La franja era el defecto original en pequeño. */ .ds-table thead th[aria-sort]:has(> a) { padding: 0; /* `height: 1px` es un MÍNIMO, no una altura: la celda sigue creciendo con su contenido. Está aquí para que sea una altura DECLARADA, que es lo que hace que el `height: 100%` del enlace resuelva contra la celda en vez de caer a `auto`. Sin ella el enlace vuelve a medir lo que mide su rótulo. */ height: 1px; } .ds-table thead th[aria-sort] > a { position: relative; display: flex; align-items: center; height: 100%; /* Por la derecha, 14px de más: es el hueco del indicador (8 de triángulo + 6 de aire). Reservarlo en el RELLENO y pintar el par en `absolute` es lo que impide que el indicador cuente como una palabra más del rótulo y se vaya él solo a un tercer renglón en una columna estrecha. */ padding: var(--s-3) calc(var(--cell-pad-x) + 14px) var(--s-3) var(--cell-pad-x); color: inherit; text-decoration: none; } /* ⚠️ SON DOS TRIÁNGULOS, NO UNO — petición literal del CEO el mismo día: «dos triángulos, uno sobre otro (un rombo con espacio en medio), así puedes ordenar como quieras». Con un solo triángulo la cabecera enseñaba el orden VIGENTE y callaba el otro sentido, así que para saber si «Espera (máx.)» se podía poner al revés había que pulsarla y ver qué pasaba. Con el par, los dos sentidos están dibujados desde el primer pintado y el color dice cuál manda: gris los dos mientras la columna no ordena, y el que ordena en acento. Es la misma razón por la que la rama `none` ya estaba vestida —una columna ordenable tiene que distinguirse de una que no lo es sin pasar el ratón por encima—, llevada hasta el final. */ .ds-table thead th[aria-sort] > a::before, .ds-table thead th[aria-sort] > a::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; } /* El hueco del medio son los 4px que separan el `-7` del `+2`: sin él los dos triángulos se tocan y el par se lee como un rombo macizo, que es otra cosa. */ .ds-table thead th[aria-sort] > a::before { margin-top: -7px; border-bottom: 5px solid var(--n-300); } .ds-table thead th[aria-sort] > a::after { margin-top: 2px; border-top: 5px solid var(--n-300); } /* De gris a ACENTO en cuanto la columna ordena, y solo el sentido vigente. El `aria-sort` ya lo decía para el lector de pantalla; esto lo dice para el ojo. No es color como único canal: la posición del triángulo teñido —arriba o abajo— es el segundo. */ .ds-table thead th[aria-sort="ascending"] > a::before { border-bottom-color: var(--accent); } .ds-table thead th[aria-sort="descending"] > a::after { border-top-color: var(--accent); } /* Columna de texto: el par va DETRÁS del rótulo, en el hueco que le reserva el relleno de aquí arriba. */ .ds-table thead th[aria-sort] > a::before, .ds-table thead th[aria-sort] > a::after { right: var(--cell-pad-x); } /* ⚠️ COLUMNA NUMÉRICA: EL PAR VA DELANTE, y esa es la otra mitad de lo que el CEO pidió («justifica a la derecha el texto Espera (máx.)»). `.ds-num` alinea el rótulo a la derecha para que caiga justo encima de sus cifras. Reservando el hueco del indicador por la derecha, ese rótulo quedaba 14px por dentro y **la cabecera dejaba de caer sobre la columna que nombra** —el mismo defecto que `.ds-cell--acciones` documenta unas líneas más abajo—. Poniendo el par a la izquierda, el borde derecho del rótulo y el de los números vuelven a ser el mismo. */ .ds-table thead th.ds-num[aria-sort] > a { /* `justify-content` y no `text-align`: el rótulo es un item de flex y al `text-align` heredado de `.ds-num` no le llega mientras el item mida lo que mide su contenido. Los dos hacen falta —este coloca la CAJA, aquel alinea los renglones cuando el rótulo se parte en dos. */ justify-content: flex-end; padding-right: var(--cell-pad-x); padding-left: calc(var(--cell-pad-x) + 14px); } .ds-table thead th.ds-num[aria-sort] > a::before, .ds-table thead th.ds-num[aria-sort] > a::after { right: auto; left: var(--cell-pad-x); } /* ⚠️ LA CABECERA QUE NO TIENE ENLACE DENTRO — y no es un caso raro: es el `initTableSorting()` de `comercial.js`, que ordena EN CLIENTE sobre `table.sortable-table` y pone el `aria-sort` en un `` pelado, con el manejador de clic en el propio ``. Ahí el enlace no existe y no debe existir: el orden no cambia de URL. Así que ese caso pinta el par sobre el ``, que es donde se pulsa. `:not(:has(> a))` es lo que separa a los dos sin marcar nada en la plantilla: una clase que hubiera que acordarse de poner dejaría veinte tablas sin indicador, que es de donde venimos. */ /* ⚠️ `sticky` Y NO `relative`, aunque aquí solo haga falta ser un bloque contenedor para el par de triángulos de abajo. `relative` lo era, y de paso PISABA el `position: sticky` con el que nace `.ds-table thead th` —este selector pesa más—: o sea que la fila de títulos dejaba de clavarse exactamente en las tablas que se pueden ordenar, que son las largas. `sticky` contiene a los absolutos igual de bien y conserva el `top: 0` y el `z-index` que la cabecera ya declara. Encontrado el 2026-09-01 con el CEO mirando Stock → Bajo mínimo: 60 filas y ningún título a partir de la séptima. */ .ds-table th[aria-sort]:not(:has(> a)) { position: sticky; padding-right: calc(var(--cell-pad-x) + 14px); } .ds-table th[aria-sort]:not(:has(> a))::before, .ds-table th[aria-sort]:not(:has(> a))::after { content: ""; position: absolute; top: 50%; right: var(--cell-pad-x); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; } .ds-table th[aria-sort]:not(:has(> a))::before { margin-top: -7px; border-bottom: 5px solid var(--n-300); } .ds-table th[aria-sort]:not(:has(> a))::after { margin-top: 2px; border-top: 5px solid var(--n-300); } .ds-table th[aria-sort="ascending"]:not(:has(> a))::before { border-bottom-color: var(--accent); } .ds-table th[aria-sort="descending"]:not(:has(> a))::after { border-top-color: var(--accent); } /* Celda de acciones por fila: se reserva el ancho siempre, para que la fila no dé un salto lateral al aparecer los botones. Vale también para el ``, y no es cosmética: sin él el rótulo de la columna se queda a la izquierda mientras sus botones están a la derecha, y una cabecera que no cae encima de lo que nombra se lee como desorden aunque los píxeles estén exactamente donde tienen que estar. Salió midiendo el «no sale ordenado» del buzón de imagen (2026-08-18): las cuatro columnas alineaban al píxel y aun así la tabla parecía descuadrada. */ .ds-table :is(th, td).ds-cell--acciones { width: 1%; white-space: nowrap; text-align: right; } /* Y los botones de esa celda NO ENVUELVEN. Lo destapó el Club al mirar sus listas en pantalla: con dos o tres acciones por fila metidas en un `.ds-cluster` —que es `flex-wrap: wrap`— el `width: 1%` de arriba las apilaba en vertical y cada fila pasaba a ocupar tres renglones; la tabla dejaba de ser una tabla. Envolver es lo correcto en una barra de acciones de pantalla, no dentro de una celda que ya se dimensiona por su contenido. */ .ds-table td.ds-cell--acciones .ds-cluster { flex-wrap: nowrap; /* Y SE PEGAN AL BORDE DERECHO. La celda ya declaraba `text-align: right` arriba, pero eso no coloca nada: dentro hay un `.ds-cluster`, que es un contenedor flex, y a un flex lo alinea `justify-content` — el `text-align` del padre no le llega. Así que la declaración de intención estaba escrita y no se cumplía. Qué se veía, y lo reportó el CEO mirando la bandeja de recepción (2026-08-18): la columna de acciones mide lo que mide la fila MÁS ancha —`width: 1%` la encoge al contenido, pero una columna de tabla es una sola anchura para todas—, así que la fila que además lleva el icono de conversación fija el ancho de la columna, y las que no lo llevan dejaban su botón azul **alineado a la izquierda**, medio botón por delante de los demás. En una lista de siete filas donde el icono va y viene, la acción primaria bailaba de sitio en cada renglón. Se alinea por la DERECHA y no por la izquierda porque la acción primaria es el ancla: es la que se busca, la que se pulsa y la única que está en todas las filas. Alinear por la izquierda dejaría cuadrado lo opcional y bailando lo importante. Es además lo que ya hace el mismo componente en móvil (`justify-content: flex-end`, §5.a), así que esto no estrena criterio: lo iguala. */ justify-content: flex-end; } /* Cuando la celda de acciones lleva un formulario con campo —«canjear» pide el teléfono, «reenviar» el número nuevo—, ese campo NO cabe: la fila se sale de la pantalla y la acción principal queda fuera, que es el mismo defecto que §5 del arquetipo A ya corrigió en la barra de selección. Un campo dentro de la celda de acciones es la señal de que eso pide un modal. */ /* LA COLUMNA DE ANCHO PREDECIBLE MIDE SU CONTENIDO, NO LA SOBRA DE LA TABLA. Es la misma mecánica que `.ds-cell--acciones` de aquí arriba (`width: 1%` es «encógete a lo tuyo» en el reparto automático), pero para datos: una fecha, un importe, un contador de días. Por qué hace falta, y es medible (cola comercial, 2026-08-21, avisado por el CEO): en el reparto automático una columna nunca baja de su **contenido mínimo**, y en estas columnas lo más ancho no es el dato — es el RÓTULO, que `thead th` pinta en versalitas y `white-space: nowrap`. «Último movimiento» reservaba 152 px para pintar «16/07/2026», y «Espera (máx.)» 118 px para tres dígitos: 371 px de una tabla de 1.248 —el 30 %— para tres columnas cuyo dato más largo mide un tercio de eso. Lo que sobra se lo quitan las columnas que sí varían, y con ellas estranguladas la fila se parte en cuatro renglones: «Pendiente de aceptación» salía a palabra por línea. Medido a 1.280 px, con control negativo: las tres columnas pasan de 371 px a 262 —incluido el hueco que se le reserva a la flecha de orden, ver abajo—, la de «por qué» de 310 a 405 y la fila alta de la lista de 109 px a 51. Por eso el rótulo SÍ puede partirse en dos renglones y el dato no: la cabecera es una línea más una sola vez, y la fila se repite cuarenta veces. Ese es todo el intercambio. ⚠️ **NO ES OPT-IN, Y ESA FUE LA CORRECCIÓN DEL CEO EL MISMO DÍA.** El defecto no es de la cola: lo tiene toda tabla con una columna de ancho fijo y rótulo largo, y son 354 plantillas. Una clase que hay que acordarse de poner arregla la pantalla que se está mirando y deja rotas las otras 353 — que es exactamente cómo se llegó aquí. Así que la regla la hereda `.ds-num`, que YA marca en todo el portal —2.654 celdas— lo mismo que esta clase declara: derecha, tabular, sin envolver, o sea **ancho predecible**. `ds-col--justa` se queda para lo que el sistema no puede saber: la fecha, el código, el «hace N días» — columnas igual de predecibles que no son un número. Lo que la automática NO hace es romper la tabla que va sobrada: `width: 1%` nunca baja del contenido mínimo, así que una columna numérica no se estrecha por debajo de su cifra más larga, y si TODAS las columnas son numéricas el reparto vuelve a ser el de antes porque no queda ninguna a la que dar la sobra. */ .ds-table :is(th, td):is(.ds-num, .ds-col--justa) { width: 1%; } /* `.ds-num` ya lo trae de su propia regla; esto es para las demás. */ .ds-table :is(th, td).ds-col--justa { white-space: nowrap; } .ds-table thead th:is(.ds-num, .ds-col--justa) { white-space: normal; } /* EL INDICADOR DE ORDEN NO ES UNA PALABRA MÁS DEL RÓTULO. En cuanto la cabecera puede partirse, un triángulo que fuera contenido de la línea sería lo último de ella y en una columna estrecha no cabría: se iría él solo a un tercer renglón, debajo de un rótulo de dos. Un indicador de orden separado de la columna que ordena no se lee como su indicador. Por eso el par de triángulos de §5 va en `position: absolute` dentro del enlace, con su hueco reservado en el relleno: no cuenta para el salto de línea y queda centrado en la celda, que es donde el ojo lo busca cuando la fila de cabeceras mezcla rótulos de una y de dos líneas. Aquí ya no queda nada que declarar: el relleno de esas columnas lo pone la regla del enlace, y por eso el `padding-right` que vivía en este sitio se fue con ella. */ /* ------------------------------------------------------------------------ 5.a MÓVIL — LA TABLA SE VUELVE TARJETAS DESIGN.md §6 lo prohíbe expresamente: nunca scroll horizontal de tabla completa. En móvil se ven 3–4 columnas y el resto se despliega. Requisito de marcado: cada lleva `data-label` con el texto de su cabecera, y las columnas que no entran en el resumen llevan `ds-col--sec`. Vivía en `archetypes/a-tabla.css` §5 y se mudó aquí el 2026-08-06 al migrar Analytics. El motivo es de fondo: esto es comportamiento del COMPONENTE tabla, no del armazón de una app de listas, y mientras vivió en el arquetipo A cualquier app que no fuese de tablas —pero que tuviera tablas— se quedaba sin él. Analytics tiene 84, y se abre en el móvil del gabinete tanto como en el PC del despacho. ------------------------------------------------------------------------ */ @media (max-width: 640px) { /* La tabla deja de ser tabla. Hace falta bajar `display:block` también a , y : con las filas en bloque pero la tabla todavía en `display:table`, las filas se encogen al ancho de su contenido y las tarjetas salen a media columna. */ .ds-table--responsive, .ds-table--responsive tbody, .ds-table--responsive tfoot { display: block; width: 100%; } .ds-table--responsive thead { display: none; } .ds-table--responsive tbody tr { display: block; width: 100%; padding: var(--s-5) var(--s-6); border-bottom: var(--bd-strong); } .ds-table--responsive tbody td { display: flex; align-items: baseline; gap: var(--s-5); width: 100%; height: auto; padding: var(--s-2) 0; border: 0; } .ds-table--responsive tbody td::before { content: attr(data-label); flex: none; width: 38%; font-family: var(--font-cond); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--n-500); } /* Casilla y acciones no son datos: no llevan rótulo y no gastan la columna de la etiqueta. La casilla encabeza la tarjeta y las acciones la cierran por la derecha. */ .ds-table--responsive tbody td[data-label=""]::before { content: none; } /* El `width: 1%` que en escritorio impide que la columna de acciones robe ancho a los datos hay que deshacerlo aquí, o el botón se queda pegado a la izquierda de una celda de un píxel. */ .ds-table--responsive tbody td.ds-cell--acciones { width: 100%; justify-content: flex-end; padding-top: var(--s-4); } /* Y por lo mismo el de las columnas de ancho predecible: en tarjeta no hay columnas que repartir —cada celda es un renglón con su rótulo delante—, así que un `width: 1%` aquí dejaría el dato aplastado contra el borde izquierdo. Medido con control negativo: la fecha en 4 px. */ .ds-table--responsive tbody td:is(.ds-num, .ds-col--justa) { width: 100%; } /* La fila seleccionada se tiñe entera, no celda a celda. */ .ds-table--responsive tbody tr[aria-selected="true"] { background: var(--accent-bg); } .ds-table--responsive tbody tr[aria-selected="true"] td { background: none; } .ds-table--responsive tbody tr:hover td { background: none; } .ds-table--responsive tfoot tr { display: block; padding: var(--s-5) var(--s-6); } .ds-table--responsive tfoot td { display: flex; justify-content: space-between; } /* Columnas secundarias: solo cuando la fila está desplegada. */ .ds-table--responsive tbody tr:not([data-expanded="true"]) .ds-col--sec { display: none; } /* Y que se note que hay algo debajo. La regla de arriba llevaba desde 2026-08-06 escondiendo columnas SIN que nada las pudiera revelar —el atributo no lo ponía nadie— y sin ninguna señal de que existieran: la tabla se veía correcta, solo que le faltaban datos. El disparador está en `nucleo.js` y es opt-in con `data-ds-expandible`; esto es su rótulo. */ /* `:has()` porque una pantalla declara la tabla entera pero no todas sus filas esconden algo: sin esto, una fila sin columnas secundarias saldría con el cursor y la flecha de «pulsa aquí» y no pasaría nada al pulsar. Un rótulo que promete lo que no hay es peor que no ponerlo. */ .ds-table--responsive[data-ds-expandible] tbody tr:has(.ds-col--sec) { cursor: pointer; } .ds-table--responsive[data-ds-expandible] tbody tr:has(.ds-col--sec) td:first-child::after { content: "▾"; margin-left: var(--s-3); color: var(--n-400); } .ds-table--responsive[data-ds-expandible] tbody tr[data-expanded="true"]:has(.ds-col--sec) td:first-child::after { content: "▴"; } /* El número deja de ir a la derecha: en tarjeta compite con su rótulo. */ .ds-table--responsive td.ds-num { text-align: left; } } /* Una tabla de lectura analítica no siempre puede volverse tarjeta: la de detalle mensual son 12 filas × N áreas y en tarjetas ocuparía doce pantallas. Ahí la salida es la del propio DESIGN.md §6 —enseñar 3–4 columnas— con las demás marcadas como secundarias, que es lo que hace `.ds-col--sec` fuera del modo tarjeta. Se declara aparte y no dentro del bloque de arriba porque aplica a tablas que NO son `--responsive`. */ @media (max-width: 640px) { .ds-table:not(.ds-table--responsive) .ds-col--sec { display: none; } } /* ------------------------------------------------------------------------ 5.a-quinquies TABLETA — LA COLUMNA QUE SOLO CABE EN EL ESCRITORIO (2026-10-14) §6 decía qué pasa en el móvil (tarjetas) y en el escritorio (todo), pero la tableta en vertical —800 px, el tamaño de un Galaxy Tab en el gabinete— no tenía regla: la tabla se pintaba entera, como en el escritorio, y lo que no cabía se iba por la derecha. Medido en Stock ese día: **6 listas** se salían del ancho (Productos 1.066 px de 800, Entradas y salidas 955, Movimientos 888, Proveedores 864 con los botones de la fila fuera de la pantalla), y las que cabían lo hacían partiendo el nombre del producto en cinco o seis renglones porque las columnas de detalle se llevaban el ancho. Dos piezas, y se usan juntas: `ds-col--escritorio` en el `
` y el `` de una columna que en la tableta sobra. Solo se esconde entre 641 y 1024 px: en el móvil la tarjeta la enseña como un renglón más (o la manda al desplegable si además es `ds-col--sec`), y en el escritorio está siempre. `ds-sub--tableta` un renglón gris DENTRO de la celda que identifica la fila, que repite lo que se ha escondido («3M · REF-1010»). Solo existe en ese mismo tramo: en el escritorio duplicaría su columna, y en el móvil la tarjeta ya la enseña. La pregunta para elegir es la de §6.3: no «¿es importante?» —lo son todas— sino «¿hace falta para decidir sobre ESTA fila sin entrar en ella?». ------------------------------------------------------------------------ */ .ds-sub--tableta { display: none; } @media (min-width: 641px) and (max-width: 1024px) { .ds-table .ds-col--escritorio { display: none; } /* Una tabla editable lleva un campo en casi cada celda, y a 800 px el relleno lateral de diez celdas son ~250 px que no lleva nadie: el campo «Lote» de Entradas y salidas se quedaba en 40 px útiles. */ .ds-table--editable :is(th, td) { padding-inline: var(--s-4); } .ds-sub--tableta { display: block; margin-top: var(--s-1); font-size: var(--fs-xs); font-weight: 400; color: var(--n-500); } } /* ------------------------------------------------------------------------ 5.a-bis MÓVIL — LA TARJETA COMPACTA (`ds-table--compacta`) La tarjeta de §5.a gasta UN RENGLÓN POR COLUMNA: con las 3–4 columnas que §6 permite, más la celda de acciones, una fila son cuatro o cinco renglones y un dedo de alto. Medido el 2026-08-17 en la bandeja del doctor del Coordinador (arnés `files/coordinador_mis_tareas/medir_mis_tareas.py`, 390 × 664 px, `pointer: coarse`, armazón real): **239 px por tarea y UNA tarea visible sin scroll** en la pantalla que es el `start_url` de la app instalada. DESIGN.md §1 pide justo lo contrario —Linear, densidad sin ruido, «cada píxel se gana ayudando a decidir o a actuar»—. Esta variante reparte la tarjeta en DOS LÍNEAS en vez de N: línea 1 la identidad de la fila (`ds-cell--titulo`) + la acción línea 2 el resto de las columnas visibles, EN LÍNEA Con eso la misma fila mide **82 px y caben 5** —cuatro cuando la cola es larga y se gana su línea de orden—, sin quitar ni un dato de la pantalla: lo que sale de la tarjeta va a `ds-col--sec`, o sea al desplegable que la fila ya tenía. Es un modificador de `--responsive`, no un sustituto: se declara junto a ella y solo cambia el estado PLEGADO. Al desplegar (`data-expanded="true"`) la fila vuelve a la tarjeta con rótulos de §5.a, que es donde se leen los detalles y donde el rótulo sí hace falta. CONTRATO DE MARCADO, y son tres cosas: 1. `ds-cell--titulo` en la celda que identifica la fila. Su sitio en el marcado da igual —el reparto lo hace `order`— salvo si la tabla es `data-ds-expandible`: ahí va PRIMERA, porque el «▾» que avisa de que hay algo debajo lo pinta §5.a en `td:first-child` y tiene que caer junto al nombre. 2. El rótulo de las demás celdas va EN LÍNEA (ya no es una columna del 38 %), así que lo que se entiende solo se marca `data-label=""` y se ahorra el rótulo. Es el mecanismo que §5.a ya usa para la casilla y las acciones: aquí no cambia, solo se usa más. Y cuando el dato NO se entiende solo pero el rótulo tampoco cabe —«2 semanas»—, el rótulo se pone `ds-sr-only` dentro de la celda: va absoluto, así que el lector de pantalla lo oye y la tarjeta no paga un píxel. 3. Lo que no quepa en dos líneas, `ds-col--sec`. Si hay que elegir, la pregunta es «¿esto hace falta para decidir si entro?» y no «¿es un dato importante?»: lo segundo lo son todos. ⚠️ SOLO SE COMPACTA LA FILA QUE TIENE TÍTULO (`:has(> .ds-cell--titulo)`), y por eso el selector lo repite en todas las reglas. En un `tbody` conviven filas que no son tarjetas —la de detalle que rellena un AJAX, la de «no hay resultados»—, y convertirlas en una línea de datos las rompe. Que la fila declare que es una tarjeta es más barato que ir tapando los casos. ------------------------------------------------------------------------ */ @media (max-width: 640px) { /* La separación entre datos es `--s-4` y no `--s-5` porque la segunda línea va JUSTA: a 390 px mide **326 px** y el caso normal de la bandeja del doctor pide 293 (tipo «Revisión de estudio» 122 + espera 68 + estado «En proceso» 92, más las dos separaciones). Con 12 px sobraban 17 y con 8 sobran 33, que es lo que hace falta para que un rótulo un poco más largo no se lleve el estado a un tercer renglón. */ .ds-table--compacta tbody tr:not([data-expanded="true"]):has(> .ds-cell--titulo) { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-4); padding: var(--s-4) var(--s-6); } /* La celda deja de ser un renglón: mide lo que mide su dato. */ .ds-table--compacta tbody tr:not([data-expanded="true"]):has(> .ds-cell--titulo) > td { width: auto; padding: 0; } /* Y su rótulo deja de reservar el 38 % del ancho: va delante del dato, en la misma línea. Sigue siendo la micro-etiqueta condensada de la firma (DESIGN.md §1); lo único que cambia es que no monta columna. */ .ds-table--compacta tbody tr:not([data-expanded="true"]):has(> .ds-cell--titulo) > td::before { width: auto; } /* LÍNEA 1 — LA IDENTIDAD. Se lleva el ancho que le deje la acción y nunca lleva rótulo: un nombre no necesita que le pongan «NOMBRE» delante. ⚠️ `flex-basis: 0` y no `auto`, y no es un detalle: en una línea que ENVUELVE, un ítem se baja de renglón cuando no cabe **por su tamaño base**, y solo después se reparte lo que falta. Con `auto` el nombre entero era el tamaño base, así que el botón de la acción se iba a un renglón propio —« Revisar plan» medido a 390 px: la fila pasaba de 78 px a 126—. Con base 0 el nombre pide cero, la acción cabe siempre y el nombre se queda todo lo demás. Es la misma trampa que `.ds-select[data-orden]` en la hoja del Coordinador. */ .ds-table--compacta tbody tr:not([data-expanded="true"]):has(> .ds-cell--titulo) > td.ds-cell--titulo { flex: 1 1 0; min-width: 0; font-weight: 600; } .ds-table--compacta tbody tr:not([data-expanded="true"]):has(> .ds-cell--titulo) > td.ds-cell--titulo::before { content: none; } /* Lo que se pulsa en ella MIDE 44 (§6), y no cuesta un píxel de fila: la línea ya la fija la acción, que también mide 44. En la bandeja del doctor eran 24 enlaces de paciente a 42 px —un defecto anterior que se arregla al compactar, porque es el mismo renglón—. `min-height` y no `padding`: el valor sale de `--ctl-h`, que en táctil es 44 y en escritorio 28. */ .ds-table--compacta tbody tr:not([data-expanded="true"]):has(> .ds-cell--titulo) > td.ds-cell--titulo a { display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--ctl-h); } /* La acción cierra la línea 1, con su rótulo puesto: no se convierte en un botón de icono, que es lo que obligaría a hacer si estuviera fuera del flujo. */ .ds-table--compacta tbody tr:not([data-expanded="true"]):has(> .ds-cell--titulo) > td.ds-cell--acciones { width: auto; padding: 0; } /* EL CORTE DE LÍNEA ES EXPLÍCITO, y por eso hay un pseudo-elemento en medio. Un `flex-wrap` parte la línea donde deja de caber, o sea que la línea 2 empezaría en un sitio distinto por fila según lo largo que sea el nombre. Un ítem de base 100 % y alto 0 entre los dos grupos —el título y la acción con `order` 0, las demás celdas con 2— parte SIEMPRE en el mismo sitio y no pinta nada. */ .ds-table--compacta tbody tr:not([data-expanded="true"]):has(> .ds-cell--titulo)::after { content: ""; order: 1; flex-basis: 100%; height: 0; } /* LÍNEA 2 — lo que hace falta para decidir, en línea y en orden de marcado. */ .ds-table--compacta tbody tr:not([data-expanded="true"]):has(> .ds-cell--titulo) > td:not(.ds-cell--titulo):not(.ds-cell--acciones) { order: 2; } } /* ------------------------------------------------------------------------ 5.a-quater MÓVIL — LA FILA DE BANDEJA (`ds-table--bandeja`) La cuarta variante, para las colas de TRABAJO: listas donde cada fila es algo que abrir, y abrirla es lo único que se hace desde la lista. Es el patrón de una bandeja de correo, y nació en «Mis tareas» del Coordinador (CEO, 2026-09-25, con la app instalada delante): *«la veo muy hecha trozos»*. Lo medido en aquella pantalla con la tarjeta compacta: · **Diez botones de acento llenos** en la misma vista —§2 pide uno como mucho—, y eran lo que partía la pantalla en bloques. · **Tres destinos en la línea 1**: el nombre abría Vevi y sacaba de la app, el hueco desplegaba la fila y el botón abría la tarea. Lo natural es tocar el nombre, y era justo lo que llevaba fuera. · **Filas de dos y de tres renglones** mezcladas, porque la línea 2 pasaba por debajo del botón y envolvía cuando el tipo era largo. LA FORMA, y es siempre la misma: línea 1 la identidad (`ds-cell--titulo`) ········· el dato (`ds-cell--meta`) línea 2 el resto de celdas visibles, en línea ····· › · **Toda la fila abre**: el primer hijo de `ds-cell--acciones` (el enlace o el botón de la acción principal) se estira sobre la fila con un `::after` absoluto, y se pinta como un «›». No hay JavaScript: el toque cae en el propio ``/``. Un `display: grid` (o `flex`) sobre un `` lo saca de la maquetación de tabla: el navegador le da una celda anónima, la fila deja de medir lo que mide su contenido y el formulario se PINTA ENCIMA de las filas de abajo. Medido con Chrome el 2026-09-06 en `/stock/proveedor//productos-asociados/`, que lo llevaba en un ``: fila de **33px** para **60px** de contenido, o sea **31px** de la fila siguiente tapados por el campo de referencia; el CEO lo mandó como «error de css» con la captura. La forma correcta es la de `configuracion/_rows/carpeta_imagen.html`: `` limpio y la clase en el `
`/`
` de dentro. Lo vigila `apps/common/core/tests/test_celda_no_es_el_layout.py`. */ .ds-cellform { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); } /* ========================================================================= 5.c PESTAÑAS DE SECCIÓN Otro hallazgo del piloto, y de los caros: la navegación por secciones está reinventada al menos seis veces con nombres distintos —`stock-nav`, `config-tabs__tab--active`, `coord-tab--active`, `caja-mes-tab--active`, `acceso-tab--active`, `mock-modal__tab--active`—. Dos niveles, porque Stock usa dos y no es el único. El ítem activo es uno de los cinco sitios donde el acento puede aparecer (DESIGN.md §5: «navegación, barra e ítem activo»). ========================================================================= */ /* ⚠️ 2026-08-17 — ESTE NIVEL TAMBIÉN ENVUELVE, y por el mismo motivo que el nivel 2 (ver el bloque de `.ds-tabs--sub` más abajo, que lo razona entero). Era un carril horizontal —`overflow-x: auto` con los ítems a `nowrap`— escrito sobre un supuesto que está a diez líneas de aquí: «arriba hay cuatro grupos y caben siempre». Medido: de las **22 barras de primer nivel del repositorio, 15 pasan de cuatro ítems**, y dos tienen quince. El supuesto era falso, y su fallo es mudo — con las barras de scroll superpuestas (el default de macOS y de buena parte de Windows 11) no hay NINGUNA señal de que haya más: la fila termina cortada y se lee como el final de la lista. Lo destapó Recepción, que no es la barra de una app sino la de un PUESTO y tiene ocho secciones de tres apps distintas. La última es «Conversaciones», además con `ds-push`, o sea la primera en caerse por el borde: la pantalla donde recepción pasa el día quedaba fuera de su propia navegación. Envolver no esconde ni un ítem en ninguna resolución y baja sola a una fila cuando la barra es corta. `overflow-x: visible` porque envolver hace que no haya desbordamiento que gestionar, y dejar el `auto` reintroduciría el carril en cuanto un ítem fuera más ancho que la caja. */ .ds-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0 var(--s-6); border-bottom: var(--bd-strong); background: var(--n-0); overflow-x: visible; } .ds-tabs__item { display: inline-flex; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-5); border-bottom: var(--bd-w-signal) solid transparent; color: var(--n-600); font-size: var(--fs-base); font-weight: 500; white-space: nowrap; text-decoration: none; } .ds-tabs__item:hover { color: var(--n-900); text-decoration: none; } /* La pestaña también puede ser un `
` (nowrap) la pista heredaba el `nowrap` y salía en una sola línea de 600 px fuera de su caja; dentro de un `.ds-scroll-x` estiraba la tabla de 1.401 a 1.912 px (Marketing, 2026-10-11). */ white-space: normal; box-shadow: var(--sh-overlay); visibility: hidden; opacity: 0; transition: opacity var(--dur-fast) var(--ease); } .ds-hint:hover .ds-hint__txt, .ds-hint:focus-within .ds-hint__txt { visibility: visible; opacity: 1; } /* Pegada al borde derecho de la pantalla, una pista centrada se sale. En móvil se ancla al borde del disparador y no al centro. */ @media (max-width: 640px) { .ds-hint__txt { left: auto; right: 0; transform: none; } } /* La pista del TÍTULO de un panel, de la cabecera de página o de la etiqueta de un KPI se abre hacia la DERECHA, anclada al borde izquierdo del «?». Esos «?» van pegados a la izquierda de su caja, y centrada la pista salía por la izquierda y se montaba encima (o debajo) del menú lateral, que es `fixed` con z-index 300 (Marketing → Panel, «Por línea», 2026-10-22). Solo por encima de 640 px: en el móvil manda la regla de arriba. Va ANTES de `ds-hint--fin` (misma especificidad), que sigue ganando. */ @media (min-width: 641px) { :is(.ds-panel__title, .ds-pagehead__title, .ds-kpi__label) .ds-hint__txt { left: 0; right: auto; transform: none; } /* El ÚLTIMO KPI de una fila está pegado al borde derecho: abierta hacia la derecha se saldría de la pantalla, así que se abre hacia la izquierda. */ .ds-kpi:last-child .ds-kpi__label .ds-hint__txt { left: auto; right: 0; } } /* La pista de un botón de la ÚLTIMA columna de una tabla (el teléfono de la cola de Comercial): centrada se sale por la derecha a cualquier ancho, no solo en móvil, así que se ancla siempre al borde del disparador. */ .ds-hint--fin .ds-hint__txt { left: auto; right: 0; transform: none; } /* ========================================================================= 16. SELECCIÓN MÚLTIPLE CON BÚSQUEDA Elegir varias cosas de una lista larga: las áreas que se comparan en un informe, los destinatarios de un envío. Sube al núcleo el 2026-08-06, al cerrar la migración de Analytics: vivía en `analytics.css` como `.ms-*` y esa hoja se borra, pero el componente no es de esa app —Comercial tiene su propia versión— y dejarlo en `apps/analytics.css` habría sido esconder la duplicación en otro sitio. El ` El botón nace `disabled` en el HTML a propósito: si el JS no llega a cargarse, la acción no se puede disparar. La alternativa —habilitado y que el JS lo deshabilite— deja la puerta abierta justo cuando algo ha fallado. ========================================================================= */ .ds-confirm { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); border: var(--bd-w-signal) solid var(--risk); border-radius: var(--r-sm); background: var(--risk-bg); } .ds-confirm__aviso { font-size: var(--fs-sm); color: var(--risk-ink); } .ds-confirm__campo { max-width: 22ch; } /* Deshabilitado NO es solo un color más flojo: el cursor también lo dice, que es lo que se nota antes de leer. */ .ds-app .ds-confirm__ok:disabled { opacity: 0.5; cursor: not-allowed; } /* ========================================================================= 23. ZONA DE SOLTAR UN FICHERO Sube al núcleo el 2026-08-09, con PADI. El criterio de §2 —un componente entra cuando el repositorio ya lo tiene escrito varias veces— se cumple con holgura: hay SEIS implementaciones independientes del mismo gesto (`padi_dropzone.js`, `contabilidad.js`, `mensajeria.js`, los dos asistentes de Gestión Taller y el formulario de laboratorio de Configuración), cada una con su nombre de clase y su color de resalte. Gestión Taller ya la había resuelto dentro del sistema nuevo con dos reglas en su hoja de app (`.taller-drop`), y PADI la necesitaba idéntica: es el momento exacto en que copiar habría sido la segunda bifurcación. Se generaliza aquí y Taller pasa a consumirla — el mismo movimiento que hizo `includes/pagination_ds.html` al llegar su segundo consumidor. Se monta SOBRE `.ds-empty`, que ya centra icono, título y texto: lo único que aporta esto es el marco discontinuo —que es lo que dice «aquí cabe algo que todavía no está»— y el acuse del arrastre. El elemento es un `