/* ========================================================================= 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; 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); } /* Cabecera de pantalla: título, contexto y la acción primaria a la derecha. */ .ds-pagehead { display: flex; align-items: flex-start; gap: var(--s-6); padding-bottom: var(--s-6); border-bottom: var(--bd); } .ds-pagehead__title { font-size: var(--fs-xl); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.01em; } .ds-pagehead__sub { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--n-500); } .ds-pagehead__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); } /* ⚠️ 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; } /* ========================================================================= 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); } .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); 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); } /* 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. ========================================================================= */ .ds-field { display: flex; flex-direction: column; gap: var(--s-3); } .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); } .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; } .ds-field__help { 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); } .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); } } /* 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; } /* 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); 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); } .ds-badge--warn { background: var(--warn-bg); color: var(--warn); } .ds-badge--risk { background: var(--risk-bg); color: var(--risk); } .ds-badge--info { background: var(--info-bg); color: var(--info); } .ds-badge--idle { background: var(--idle-bg); color: var(--idle); } /* 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); } .ds-table td.ds-num--pos { color: var(--ok); } /* 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); } .ds-table th[aria-sort]::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: var(--s-3); border-left: 4px solid transparent; border-right: 4px solid transparent; } .ds-table th[aria-sort="ascending"]::after { border-bottom: 5px solid var(--n-600); } .ds-table th[aria-sort="descending"]::after { border-top: 5px solid var(--n-600); } .ds-table th[aria-sort="none"]::after { border-bottom: 5px solid var(--n-300); } /* Celda de acciones por fila: se reserva el ancho siempre, para que la fila no dé un salto lateral al aparecer los botones. */ .ds-table 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; } /* 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. */ /* ------------------------------------------------------------------------ 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); } /* 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-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.b CELDA EDITABLE Descubierto en el piloto de Stock: su tabla de productos no es una lista, es una rejilla que se edita en el sitio (stock mínimo, uds. de pedido…), y eso no lo cubría ni `.ds-input` ni la celda normal. Lo reinventan también Gestión Taller y Contabilidad con su propio CSS en línea. Estrecho, tabular y alineado a la derecha como el resto de la columna numérica: si al entrar en edición el número se mueve o cambia de forma, la columna deja de escanearse. ========================================================================= */ .ds-cellinput { width: 100%; max-width: 5rem; height: calc(var(--row-h) - var(--s-5)); padding: 0 var(--s-4); border: var(--bd-strong); border-radius: var(--r-sm); background: var(--n-0); font-size: var(--cell-fs); font-variant-numeric: tabular-nums; text-align: right; } .ds-cellinput:disabled { background: var(--n-50); color: var(--n-500); } /* Confirmación de guardado. Es un acuse transitorio de una acción que el usuario acaba de hacer, no un estado de la fila, así que aquí el color sí basta: nadie lo lee sin haber pulsado antes. El error NO es transitorio y por eso lleva texto al lado (`.ds-field__error`). */ .ds-cellinput--saved { border-color: var(--ok); background: var(--ok-bg); } .ds-cellinput--error { border-color: var(--risk); background: var(--risk-bg); } /* ========================================================================= 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; } .ds-tabs__item[aria-current] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } /* Segundo nivel: mismo vocabulario, menos peso. Va sobre fondo escalonado para que se lea como dependiente del primero y no como su competencia. ⚠️ ESTE NIVEL ENVUELVE, EL PRIMERO NO. Y es la diferencia entre los dos: arriba hay cuatro grupos y caben siempre; aquí hay tantos ítems como módulos tenga el grupo, y Aplicaciones tiene DIECIOCHO. Heredaba el `overflow-x: auto` del nivel 1, o sea que esos dieciocho vivían en un carril horizontal que en la mayoría de resoluciones no cabía. Tres cosas fallaban a la vez, y ninguna daba error: 1. 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 a media palabra y se lee como el final de la lista. 2. El módulo activo puede quedar fuera de la vista al cargar, así que la navegación no dice dónde estás, que es su otro trabajo. 3. Con ratón, un carril horizontal no se desplaza: la rueda mueve la página. Hay que arrastrar la barra que además no se ve. La intención escrita en `includes/nav_modulos.html` era «preferimos que se vea que hay más a que haya que adivinarlo», y envolver la cumple mejor que el scroller: no esconde ni un ítem en ninguna resolución, y baja sola a una fila cuando el grupo es corto. `overflow-x: visible` porque envolver hace que no haya desbordamiento que gestionar, y dejar el `auto` heredado reintroduciría el carril en cuanto un ítem fuera más ancho que la caja. */ .ds-tabs--sub { flex-wrap: wrap; overflow-x: visible; gap: var(--s-1); row-gap: var(--s-2); padding: var(--s-3) var(--s-6); background: var(--n-50); border-bottom: var(--bd); } .ds-tabs--sub .ds-tabs__item { padding: var(--s-3) var(--s-4); border-bottom: 0; border-radius: var(--r-sm); font-size: var(--fs-sm); } .ds-tabs--sub .ds-tabs__item:hover { background: var(--n-100); } .ds-tabs--sub .ds-tabs__item[aria-current] { background: var(--accent-bg); color: var(--accent-600); } /* LAS COLAS DE UNA BANDEJA CABEN EN UNA FILA, TAMBIÉN EN UN TELÉFONO (2026-08-17, con la bandeja del doctor del Coordinador). `--colas` no es «otra barra»: es `--sub` cuando sus ítems son las COLAS de una misma pantalla —destinos fijos, contados y conocidos de antemano—, y no los módulos de un grupo. Esa diferencia es la que permite lo contrario de lo que hace `--sub`: aquí **no se envuelve**. Envolver es correcto cuando no se sabe cuántos ítems hay (Aplicaciones tiene dieciocho); con cuatro fijos, envolver es gastar tres renglones del teléfono en la fila que menos información lleva de la pantalla. Medido a 390 × 664 px en el armazón del doctor: la barra de colas ocupaba **153 px de 664 en tres renglones** y la primera fila de datos empezaba en y=449 — dos tercios de lo que se ve sin scroll gastados en cromo. Y NO es un carril horizontal, a propósito. `flex: 1 1 auto` + `min-width: 0` reparte el ancho entre los ítems y los deja encogerse, así que **no hay desbordamiento que gestionar**: ni barra de scroll invisible que esconda un destino (§5.c ya lo pagó dos veces), ni una región con `overflow` que se queda el gesto del dedo cuando no desborda —eso costó que la pantalla del doctor no se pudiera scrollear (`apps/coordinador.css`)—. Lo único que se recorta es el ROTULO, y con puntos suspensivos, que sí se ve. El icono se retira porque es decoración (`aria-hidden`) y es lo que más ancho come por destino; el CONTADOR se queda, porque es el dato: dice si hay algo que hacer. */ @media (max-width: 640px) { .ds-tabs--colas { flex-wrap: nowrap; gap: var(--s-1); padding-left: var(--s-3); padding-right: var(--s-3); } .ds-tabs--colas .ds-tabs__item { flex: 1 1 auto; min-width: 0; justify-content: center; gap: var(--s-2); padding-left: var(--s-2); padding-right: var(--s-2); font-size: var(--fs-xs); } .ds-tabs--colas .ds-tabs__item > i { display: none; } /* El rótulo es lo único elástico de la fila. `min-width: 0` en el ítem no basta: sin esto el texto —`white-space: nowrap` heredado del ítem— se sale por encima del destino de al lado en vez de recortarse. Va scopeado a `--colas` a propósito: fuera de esta variante los ítems no se encogen, así que recortar el rótulo solo podría esconder texto sin motivo. */ .ds-tabs--colas .ds-tabs__rotulo { overflow: hidden; text-overflow: ellipsis; } .ds-tabs--colas .ds-badge { flex: none; padding-left: var(--s-3); padding-right: var(--s-3); } } /* ========================================================================= 5.d BUSCADOR TRANSVERSAL Sale del análisis de navegación de Stock: hay 17 cajas de búsqueda, cada una atada a su propia lista, y ninguna que cruce las entidades. Ése es el motivo real por el que se acaban teniendo cuatro pestañas del navegador abiertas — el usuario está supliendo a mano una vista que no existe. Vive en la cabecera de la app, no dentro de una lista, porque su trabajo es justamente saltarse la lista. Comercial ya resolvió esto mismo con su buscador universal de contactos; esto es el componente que allí faltó. ========================================================================= */ .ds-search { position: relative; flex: 1; max-width: 520px; } .ds-search__input { width: 100%; height: var(--ctl-h); padding: 0 var(--s-6) 0 var(--s-9); border: var(--bd-strong); border-radius: var(--r-sm); background: var(--n-0); font-size: var(--fs-base); } .ds-search__icono { position: absolute; left: var(--s-5); top: 50%; transform: translateY(-50%); color: var(--n-400); pointer-events: none; } /* Atajo de teclado a la derecha. Se enseña porque un buscador que hay que ir a buscar con el ratón no ahorra el viaje que venía a ahorrar. */ .ds-search__atajo { position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%); padding: var(--s-1) var(--s-3); border: var(--bd); border-radius: var(--r-sm); background: var(--n-50); font-family: var(--font-cond); font-size: var(--fs-micro); letter-spacing: var(--track-micro); color: var(--n-500); pointer-events: none; } .ds-search__panel { position: absolute; top: calc(100% + var(--s-3)); left: 0; right: 0; z-index: 40; max-height: 60vh; overflow-y: auto; background: var(--n-0); border: var(--bd-strong); border-radius: var(--r-md); box-shadow: var(--sh-overlay); } /* Los resultados van AGRUPADOS por tipo, con el tipo escrito. Una lista plana obligaría a deducir de qué es cada fila, que es el trabajo que el buscador viene a quitar. */ .ds-search__grupo { padding: var(--s-3) var(--s-6) var(--s-2); 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); border-top: var(--bd); } .ds-search__grupo:first-child { border-top: 0; } .ds-search__res { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-4) var(--s-6); text-decoration: none; color: var(--n-800); } .ds-search__res:hover, .ds-search__res[aria-selected="true"] { background: var(--accent-bg); text-decoration: none; } .ds-search__res-meta { margin-left: auto; font-size: var(--fs-xs); color: var(--n-500); font-variant-numeric: tabular-nums; } /* Autocompletado. NO es el buscador transversal: es un campo de formulario o de filtro que sugiere mientras se teclea, y lo único que necesita del componente de arriba es el panel de resultados —de ahí que solo aporte el ancla posicionada y reutilice `.ds-search__panel` y `.ds-search__res`—. Se sube al núcleo porque estaba reimplementado en SIETE hojas de app (configuracion, datalytics, taller, retenciones, contabilidad, recordatorios2, odontohr), cada una con su `.autocomplete-results`. Lo destapó la segunda app migrada: al borrar `stock.css` el autocompletado de la ficha de producto se quedó sin estilo y nadie lo notó, porque el que lo pintaba era el CSS viejo de otra app. El resaltado del teclado viaja en `aria-selected` y no en una clase `active`: así lo anuncia el lector de pantalla, y el panel ya lo pinta. */ .ds-autocomplete { position: relative; } .ds-autocomplete > .ds-input { width: 100%; } /* El botón de vaciar va DENTRO del campo. Fuera se apila debajo del input —`.ds-field` es una columna— y deja de leerse como «borrar lo escrito» para parecer otra acción del formulario. */ .ds-autocomplete__x { position: absolute; top: 0; right: 0; height: var(--ctl-h); color: var(--n-400); } .ds-autocomplete__x:hover { color: var(--n-700); background: none; } /* ========================================================================= 5.e BANDEJA DE TRABAJO La fila de «esto está pendiente y esto es lo que hay que hacer». Es el componente de la pantalla «Hoy» de Stock, y el mismo que reinventan las alertas de Comercial, las worklists de Coordinador y la cola de auditoría de Recordatorios2 — cada una con su CSS. Regla: toda fila termina en una ACCIÓN. Una bandeja que solo informa es un listado, y para eso ya está la tabla. ========================================================================= */ .ds-tasks { display: flex; flex-direction: column; } .ds-task { display: flex; align-items: center; gap: var(--s-6); padding: var(--s-5) var(--s-6); border-bottom: var(--bd); background: var(--n-0); } .ds-task:hover { background: var(--n-25); } /* Cifra grande a la izquierda: cuántos son. Es lo que decide si esta fila se atiende ahora o después, así que va primero y en tabular. */ .ds-task__n { flex: none; min-width: 3.5rem; font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; line-height: var(--lh-tight); text-align: right; } .ds-task__cuerpo { min-width: 0; flex: 1; } .ds-task__titulo { font-weight: 600; } .ds-task__detalle { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--n-500); } .ds-task__accion { margin-left: auto; flex: none; } /* La urgencia tiñe SOLO la cifra, no la fila. Una bandeja con cuatro filas de colores distintos deja de leerse como una lista y pasa a ser un semáforo averiado; y el nivel va escrito además en el badge del detalle. */ .ds-task--risk .ds-task__n { color: var(--risk); } .ds-task--warn .ds-task__n { color: var(--warn); } .ds-task--ok .ds-task__n { color: var(--ok); } .ds-task--idle .ds-task__n { color: var(--n-300); } @media (max-width: 640px) { .ds-task { flex-wrap: wrap; } .ds-task__accion { margin-left: calc(3.5rem + var(--s-6)); } } /* ------------------------------------------------------------------------ La bandeja EN REJILLA, y COMPACTA. Para cuando la lista de colas no es la pantalla sino su cabecera, y lo que hay debajo es el trabajo. Una columna es lo correcto cuando la bandeja ES la pantalla —se recorre de arriba abajo y se elige—. Deja de serlo en cuanto hay algo debajo que también necesita alto: siete colas apiladas en una pantalla ancha gastan media página en una columna de texto de 40 caracteres, y el listado de abajo se queda en una franja tan estrecha que ni se puede desplazar. Pasó en la Bandeja de Recepción (2026-08-17) con siete carriles y un monitor grande. Se pide a propósito con el modificador y no se hace sola: la rejilla cambia el orden de lectura —de una columna a filas de dos o tres— y eso solo es aceptable donde el orden de la lista es una prioridad blanda, no una secuencia. En rejilla cada cola se separa por marco y no por línea: sin marco, tres celdas contiguas se leen como una sola fila de tres columnas. ⚠️ **La rejilla sola no bastaba, y es el mismo problema medido otra vez** (CEO, 2026-08-17, sobre la pantalla ya en rejilla): «seguimos consumiendo todo el espacio en cards que podrían ser mucho más pequeños sin perder significado y nos quedamos sin espacio para las respuestas por resolver». Tres cosas gastaban ese alto, y ninguna era la cifra ni el título: 1. **el párrafo de tres líneas** que explica de qué va la cola — se lee la primera vez y se vuelve a pintar las quinientas siguientes; 2. **el botón en su propio renglón**, que suma un alto de control entero a cada celda; 3. **celdas de 24rem**, que en un monitor ancho dan tres columnas y por tanto tres filas para siete colas. Ahora la celda es **una línea**: cifra · título · acción a la derecha. Medido con las siete colas reales, celda de 180 px → **60 px**: | Ancho del contenedor | Antes | Después | Devuelto | |---|---:|---:|---:| | 1516 px (monitor grande) | 520 px | 128 px | **392 px** | | 1280 px (portátil) | 520 px | 168 px | **352 px** | | 1024 px (tablet) | 690 px | 217 px | **473 px** | Tres cuartas partes del alto, y no se ha quitado ni una cifra ni un título: en un portátil es la diferencia entre ver tres filas de trabajo y no ver ninguna. La comprobación es reproducible y vive en `files/recepcion_bandeja_compacta/comparativa.html`, que enlaza estas mismas hojas y pinta las dos versiones una encima de otra. El texto **no se pierde**: sigue en el DOM (lo lee un lector de pantalla entero) y la plantilla lo repite en el `title` de la celda para el ratón. Recortar con `overflow` y no con `display:none` es justo esa diferencia. ------------------------------------------------------------------------ */ .ds-tasks--cols { display: grid; /* 21rem y no 24: la celda ya no sostiene un párrafo, pero sí un título de seis palabras y su botón. Estrecharla más mete cinco columnas y parte los títulos en dos líneas — se gana ancho y se paga en alto, que es lo que se venía a ahorrar. */ grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); gap: var(--s-4); } .ds-tasks--cols .ds-task { align-items: center; flex-wrap: nowrap; gap: var(--s-4); padding: var(--s-4) var(--s-5); border: var(--bd); border-radius: var(--r-md); } /* La cifra deja de reservar 3,5rem: aquí no hay una columna de cifras que alinear —cada celda es una isla— y ese ancho salía del texto. */ .ds-tasks--cols .ds-task__n { min-width: 2.25rem; text-align: left; } .ds-tasks--cols .ds-task__cuerpo { flex: 1 1 auto; } /* El párrafo sale de la vista, NO del documento: mismas propiedades que `.ds-sr-only` (base.css), así que un lector de pantalla lo sigue leyendo entero y el ratón lo tiene en el `title` de la celda. Se probó antes recortarlo a un renglón con `text-overflow`. No vale, y se ve en cuanto se mira: «Contestaron al recordatorio y el sist…» no informa de nada que el título no dijera ya, cuesta 20 px por celda y —al estrechar la columna para que quepa— parte en dos líneas los títulos, que son lo único que de verdad hay que leer aquí. */ .ds-tasks--cols .ds-task__detalle { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* La acción vuelve a la derecha, en la misma línea. Cuando la celda sostenía un párrafo esto le robaba el ancho al texto; sin párrafo, no hay a quién robárselo. */ .ds-tasks--cols .ds-task__accion { margin-left: var(--s-4); margin-top: 0; padding-left: 0; flex: none; flex-basis: auto; } @media (max-width: 640px) { /* En una sola columna la celda compacta sigue siendo lo correcto: el `flex-wrap` de la fila ancha devolvería el botón a su propio renglón, que es el alto que se viene a quitar. */ .ds-tasks--cols .ds-task { flex-wrap: nowrap; } .ds-tasks--cols .ds-task__accion { margin-left: var(--s-4); } } /* ========================================================================= 6. TARJETA KPI Rótulo en micro-etiqueta ENCIMA, cifra grande tabular, variación debajo en color semántico y con flecha (DESIGN.md §3-C). ========================================================================= */ .ds-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-5); } /* El relleno se apretó el 2026-08-07 (de --s-5/--s-6 a --s-4/--s-5) por una observación del CEO: «las tarjetas de KPI son demasiado grandes, restan espacio para la información realmente útil». Medida antes de tocarlas, la tira se llevaba 115 px, o sea el 16 % del pliegue en un portátil, para seis cifras. Lo que se recorta es CHROME, no información: el relleno y los dos huecos internos. La cifra sigue en --fs-2xl donde el contrato la pide (§3-C: en un informe la cifra ES la pantalla). Dónde deja de ser hero lo decide el arquetipo — ver `.ds-a .ds-kpi` en archetypes/a-tabla.css. */ .ds-kpi { padding: var(--s-4) var(--s-5); background: var(--n-0); border: var(--bd-strong); border-radius: var(--r-md); } .ds-kpi__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-kpi__value { margin-top: var(--s-2); font-size: var(--fs-2xl); font-weight: 600; line-height: var(--lh-tight); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .ds-kpi__unit { font-size: var(--fs-md); font-weight: 500; color: var(--n-500); margin-left: var(--s-2); } .ds-kpi__delta { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--n-500); } .ds-kpi__delta--up { color: var(--ok); } .ds-kpi__delta--down { color: var(--risk); } /* Hay métricas donde bajar es bueno (no-shows, cartera parada). El sentido lo decide la plantilla eligiendo la clase, no el signo del número. */ .ds-kpi__delta--good { color: var(--ok); } .ds-kpi__delta--bad { color: var(--risk); } /* KPI QUE FILTRA. Lo pide el detalle de ejecución de Recordatorios2, donde las doce cifras de arriba no informan: cada una acota la tabla de abajo («ver solo los fallidos»). Allí estaba resuelto con `
` + un `click` colgado, o sea inalcanzable con el tabulador y mudo para el lector de pantalla. Va como VARIANTE y no como componente aparte porque el KPI no cambia de forma al volverse control: cambia de elemento (` 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); } .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 `