/* ========================================================================= 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. */ .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. ========================================================================= */ /* 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); } .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); } .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; } /* 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); 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); } /* ⚠️ 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-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-ter MÓVIL — LA TARJETA QUE SE RELLENA (`ds-table--editable`) La tercera variante, y existe porque las dos anteriores dan por supuesto que la tarjeta se LEE. Cuando la fila se ESCRIBE —una rejilla de `ds-cellinput`, que es lo que Stock estrenó y hoy usan también las líneas de «Pedir presupuesto» del Coordinador— la tarjeta de §5.a se comporta al revés de lo que hace falta: · El rótulo se lleva el **38 %** del ancho, así que el campo se queda con lo que sobra… y encima `.ds-cellinput` tiene `max-width: 5rem`, pensado para una COLUMNA de escritorio. Medido a 390 px en el modal del Coordinador (arnés `files/coordinador_tarea_detalle/medir_modal.py --lineas=5`): **campos de 80 px** en una tarjeta de 342. · Cada celda es un renglón, y un renglón con un control dentro mide 44 px (§6, objetivo táctil). Seis celdas más la de acciones = **368 px por línea** y **1.903 px las cinco**: media pantalla por tratamiento. Lo que cambia, y son tres cosas: 1. **El campo se lleva el ancho que sobra** — se levanta el `max-width` de la celda de escritorio y el rótulo pasa a columna fija y estrecha. 2. **La acción sube al primer renglón**, con el mismo mecanismo del corte explícito de §5.a-bis (`order` + un pseudo-elemento de base 100 %). Un renglón entero para una ✕ es el gasto más fácil de quitar. 3. **`ds-col--mitad`**: dos celdas cortas y seguidas comparten renglón. Con el rótulo EN LÍNEA —no en columna— el campo sale más ancho que antes aunque la celda mida la mitad, así que esto no es un recorte: es un renglón menos y un campo mayor a la vez. Medido en el mismo sitio, a 390 × 664 con 5 líneas: la línea pasa de **368 a 230 px**, las cinco de **1.903 a 1.171**, el campo de **80 a 119–238** y los nombres partidos en dos renglones de **5 de 5 a 1 de 5** (el que queda tiene 51 caracteres: ese SÍ tiene que envolver). El campo sigue midiendo 44 px de alto, que es el objetivo táctil de §6 — la densidad no sale de encoger lo que se pulsa. NO toca el escritorio: todo va dentro de la `@media` de tarjeta. Ahí la fila sigue siendo una rejilla, que es lo correcto cuando hay ancho. Comprobado a 1440 × 900: la línea se queda en 37 px y los campos suben de 58–75 a 63–80. ⚠️ Es **opt-in**: se declara junto a `--responsive` y ninguna de las ~230 pantallas que ya la usan cambia. Lo vigila `coordinador/tests/test_modal_solicitud_compacto.py`, que falla si algún selector de este bloque deja de empezar por `.ds-table--editable` o si alguna regla se sale de la `@media`. ⚠️ 2026-08-19 — LOS CAMPOS EMPIEZAN TODOS EN LA MISMA VERTICAL, Y ESA VERTICAL LA MARCA EL RÓTULO MÁS LARGO. El CEO, con la ventana abierta en su móvil: *«el textbox de uds se alinearía a la izquierda con el de dientes y nota, en la posición que marque la palabra DIENTES como tope por la izquierda»*. Lo que tenía delante eran **tres arranques distintos** en la misma tarjeta: «Uds» a 58 px porque su rótulo va en línea y es corto, «Dientes» y «Nota» a 124 porque el suyo va en columna. Un borde izquierdo en escalera en un formulario de cinco renglones. El mecanismo es **una rejilla de cuatro columnas en la FILA**, no un ancho por celda: `max-content | minmax(0,1fr) | max-content | minmax(0,1fr)` La primera columna es el carril de los rótulos, y `max-content` la hace medir **el más ancho de los que caen dentro**. Quién cae dentro lo decide el marcado: las celdas con campo (`ds-col--campo`) se subrejillan (`grid-template-columns: subgrid`), así que su rótulo entra en esa columna y la sostiene; las de los renglones 1 y 2 ocupan la fila entera y **no** contribuyen —un ítem que cruza una pista flexible no cuenta para el tamaño intrínseco de las que cruza (CSS Grid §12.5)—, que es exactamente por lo que «TRATAMIENTO», más largo que «DIENTES», no mueve la línea. Por eso no hay ni un píxel medido a ojo: si mañana un rótulo se alarga, se traduce o se añade un campo, la columna se recalcula sola y los cuatro campos siguen alineados. El rótulo de una celda ya no manda sobre su propio campo; manda el carril. Las dos columnas flexibles son iguales entre sí, y de ahí sale lo otro que pidió el CEO: los dos campos del renglón 3 —«Uds» y «Dto %», media fila cada uno (`ds-col--mitad`)— **se reparten uniformes** lo que queda desde la línea hasta el borde derecho, con su rótulo en medio. Los campos de renglón entero se estiran hasta el borde (`grid-column: 2 / -1`), o sea que **crecen hacia la izquierda** hasta tocar la línea: se ensanchan, no se estrechan. La rejilla sustituye al `flex-wrap`, y con ella se va el pseudo-elemento que cortaba la línea: cada celda declara **cuántas columnas ocupa**, así que el renglón en el que cae no depende de dónde deje de caber. ------------------------------------------------------------------------ */ @media (max-width: 640px) { /* CUATRO COLUMNAS: el carril de los rótulos, el campo, el rótulo de en medio y el segundo campo. Las dos flexibles con `minmax(0, …)` a propósito: un `` tiene ancho intrínseco propio (~177 px), y con el `auto` que trae `1fr` por defecto ese ancho sería el mínimo de la pista y la tarjeta desbordaría a lo ancho. */ .ds-table--editable tbody tr { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); align-items: center; column-gap: var(--s-5); padding: var(--s-4) var(--s-5); } /* Un dato por renglón; la separación entre renglones baja a `--s-1` porque el alto de la celda ya lo fija el control que lleva dentro. */ .ds-table--editable tbody td { grid-column: span 4; order: 2; min-width: 0; gap: var(--s-4); padding: var(--s-1) 0; } /* El rótulo deja de ser el 38 % y pasa a una columna fija: 38 % de 342 px son 130 y ningún rótulo de esta tabla los necesita. Es exactamente el ancho que se le devuelve al campo. Vale para los renglones que solo se LEEN —código y tratamiento—; el de los que se escriben lo fija la rejilla, más abajo. */ .ds-table--editable tbody td::before { width: 5.5rem; } /* RENGLÓN 1 — la identidad de la fila y la acción que la quita, con `order: 0` para que la ✕ suba desde el final del marcado. Ya no hace falta cortar la línea con un pseudo-elemento: la identidad ocupa tres columnas y la acción la cuarta, así que el renglón se cierra por sí solo. */ .ds-table--editable tbody td:first-child { grid-column: span 3; order: 0; } .ds-table--editable tbody td.ds-cell--acciones { grid-column: span 1; width: auto; order: 0; padding: 0; } /* RENGLONES 3, 4 y 5 — LA LÍNEA ÚNICA. La celda se subrejilla en vez de maquetar por su cuenta: hereda las columnas de la fila, así que su rótulo cae en el carril común y su campo empieza donde empiezan todos. Es la ÚNICA declaración que fija la línea, y no dice ningún píxel. */ .ds-table--editable tbody td.ds-col--campo { display: grid; grid-template-columns: subgrid; align-items: center; } /* El rótulo mide lo que mide su palabra; quien iguala es la columna. */ .ds-table--editable tbody td.ds-col--campo::before { width: auto; } /* Dos celdas cortas y seguidas, un solo renglón: media rejilla cada una —rótulo y campo—, así que los dos campos salen del mismo tamaño. */ .ds-table--editable tbody td.ds-col--mitad { grid-column: span 2; } /* El campo de un renglón entero llega hasta el borde derecho: crece hacia la izquierda hasta la línea, no al revés. */ .ds-table--editable tbody td.ds-col--campo:not(.ds-col--mitad) .ds-cellinput { grid-column: 2 / -1; } /* EL CAMPO SE LLEVA LO QUE QUEDE. `max-width: 5rem` es de la celda de escritorio (§5.b), donde la columna manda; aquí manda la tarjeta. */ .ds-table--editable tbody .ds-cellinput { max-width: none; } /* Un número se sigue leyendo por la derecha; un texto libre, no. En columna estrecha daba igual —todo cabía justo—, pero en un campo de 240 px un «1.6, 2.6» pegado al borde derecho se lee como si estuviera mal puesto. */ .ds-table--editable tbody .ds-cellinput:not([type="number"]) { text-align: left; } /* LA CEBRA SE PINTA EN LA FILA, NO EN LA CELDA. `--zebra` tiñe los `td`, y eso vale mientras la celda ocupa el renglón entero; aquí la fila es un flex con hueco entre columnas y relleno propio, así que teñir las celdas dejaba la tarjeta a medio pintar —franjas blancas entre «Uds» y «Dto %» y alrededor del borde—. Es el mismo movimiento que §5.a ya hace con la fila seleccionada. */ .ds-table--editable.ds-table--zebra tbody tr:nth-child(even) { background: var(--n-25); } .ds-table--editable.ds-table--zebra tbody tr:nth-child(even) td { background: none; } } /* ========================================================================= 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); } /* Y el tercer estado, que faltaba: EDITADO Y TODAVÍA SIN GUARDAR. En una rejilla que guarda al salir del campo, es la diferencia entre «ya está» y «esto se pierde si te vas». Lo tenía Stock resuelto con un `#eab308` escrito a mano dentro del JavaScript —el amarillo del sistema anterior, que el tema no alcanza—; es un estado del componente, así que su sitio es este. */ .ds-cellinput--pendiente { border-color: var(--warn); background: var(--warn-bg); } /* LA CELDA QUE DECIDE ALGO: un control y el botón que lo confirma, en la misma línea y sin excepciones. No es un `.ds-cluster`. El cluster ENVUELVE —`flex-wrap: wrap`, que es lo correcto en una barra de acciones de pantalla— y `.ds-input`/`.ds-select` miden el 100 %, así que dentro de una celda el control se come el renglón entero y el botón cae debajo: medido en el buzón de imagen del Coordinador el 2026-08-18, **9 de 9 filas** con el ✓ en el renglón de abajo y la fila a 77px en vez de 37. El CEO lo describió como «el botón salta». Rejilla y no flex a propósito: `minmax(0, 1fr)` deja que el control se ENCOJA por debajo de su tamaño intrínseco, que es lo que hace que un desplegable con nombres largos no reviente la columna ni saque la tabla a scroll horizontal. Un flex con `width: 100%` no se encoge: desborda. */ .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; } .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 `
` y, DETRÁS de cada fila de resumen, una `` con un único `` de la MISMA tabla y no un panel flotante: así hereda el ancho de las columnas, se imprime, y el navegador la anuncia dentro de la fila a la que pertenece. ========================================================================= */ .ds-table[data-ds-detalle] tbody tr:has(+ tr.ds-fila-detalle) { cursor: pointer; } /* La señal de que hay algo debajo. Sin ella el detalle existe y no lo encuentra nadie, que es el fallo mudo que ya costó §5.a. */ .ds-table[data-ds-detalle] tbody tr:has(+ tr.ds-fila-detalle) td:first-child::after { content: "▾"; margin-left: var(--s-3); color: var(--n-400); } .ds-table[data-ds-detalle] tbody tr[data-expanded="true"]:has(+ tr.ds-fila-detalle) td:first-child::after { content: "▴"; } .ds-table[data-ds-detalle] tbody tr[data-expanded="true"] { background: var(--n-25); } .ds-fila-detalle > td { background: var(--n-25); padding: var(--s-5) var(--s-6); border-bottom: var(--bd); } .ds-detalle { display: flex; flex-direction: column; gap: var(--s-5); } .ds-detalle__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); } .ds-detalle__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--n-0); border: var(--bd-strong); border-radius: var(--r-md); } .ds-detalle__titulo { font-weight: 600; } /* El renglón secundario de un item: área, estado, responsable, antigüedad. Va en la misma línea mientras quepa y baja entero cuando no. */ .ds-detalle__meta { color: var(--n-500); font-size: var(--fs-xs); } /* Las acciones se van al final de la línea, nunca al principio: lo primero que hay que leer es de qué va esto. */ .ds-detalle__acciones { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--s-3); } @media (max-width: 640px) { /* En modo tarjeta la celda ya es un bloque; lo que sobra es el rótulo fantasma que `--responsive` añade con `::before`. Se suprime con `data-label=""`, igual que en la columna de acciones. */ .ds-detalle__acciones { margin-left: 0; width: 100%; } } /* El pie del detalle: acciones que son de LA PERSONA y no de una de sus fichas — hoy solo el opt-out comercial de la cola única. Separado por un filete y alineado a la derecha para que no se lea como una acción más de la última ficha de la lista, que es justo el error que costaría caro aquí: lo que hay debajo es irreversible. */ .ds-detalle__pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-3); padding-top: var(--s-4); border-top: var(--bd); } /* ========================================================================= 27. LA CONVERSACIÓN Añadido el 2026-08-07, con el chat de Claudia. El fichero nació con el ETL Hub, que es «el estado de algo que se mueve solo», y por eso hasta ahora solo tenía panel de salud: semáforo, piezas, avisos. Pero DESIGN.md §3-D describe DOS formas —«el contenido crece por abajo y el compositor está anclado», «indicadores de estado de sesión»— y esa segunda no existía en ninguna parte del núcleo. Es la unidad de trabajo de Mensajería y de Claudia: LA CONVERSACIÓN. Se escribe aquí y no en la hoja de Claudia porque Mensajería la va a pedir igual, y la lección de las trece bifurcaciones es exactamente esa. Va sin prefijo de arquetipo —`ds-chat`, no `ds-d__chat`— por el mismo criterio que `.ds-etapas` en el B: es una pieza reutilizable, no la estructura de la pantalla. LO QUE NO SE CONSERVA DEL CHAT ANTERIOR, y es el motivo de la mitad de este bloque: era una **terminal negra** con el verde de marca de prompt. §3-D lo prohíbe por escrito —«fondo neutro, no oscuro, para no romper con el resto de la plataforma»— y no era una excusa estética: la consola vivía en el mismo portal claro que el resto y se leía como una ventana ajena incrustada. Lo que sí se conserva es la voz monoespaciada de los turnos, que aquí SÍ informa: se está leyendo lo que un modelo genera palabra a palabra, y la anchura fija es lo que deja comparar dos respuestas. ⚠️ VIVIÓ EN `archetypes/d-tiempo-real.css` HASTA EL 2026-08-31, con el párrafo de arriba —«es una pieza reutilizable, no la estructura de la pantalla»— desmintiendo dónde estaba. Se mudó aquí el día que hizo falta en otro arquetipo: la curación del banco de pruebas es **C** —se lee un caso, no se vigila algo que se mueve— y `base_eval.html` carga UNA hoja de arquetipo, la que nombra la vista. La conversación que hay que juzgar no podía pintarse como conversación, y el fallo habría sido el mudo de siempre: las clases se escriben, no dan error y no pintan. ========================================================================= */ .ds-chat { display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--n-0); } /* LA CONVERSACIÓN COMO CONTENIDO, no como panel vivo. En el panel dividido el hilo es la única región que scrollea y el compositor se queda anclado abajo; eso es correcto cuando la pantalla ES la conversación y falso cuando la conversación es una PRUEBA dentro de un documento que se lee entero. Sin este modificador, un hilo dentro de un panel de arquetipo C se encierra en su propia caja con su propia barra, y leer cuatro mensajes cuesta dos scrolls anidados —el de la página y el suyo—, que es la forma más segura de que nadie llegue al último turno. Solo apaga el scroll: el relleno del hilo, las burbujas y la alternancia izquierda/derecha son los mismos. Quien lo use pone el cuerpo del panel a sangre (`ds-panel__body--flush`), o el relleno se cuenta dos veces. */ .ds-chat--estatico { height: auto; } .ds-chat--estatico .ds-chat__hilo { flex: none; overflow: visible; } /* Cabecera: quién contesta y en qué estado está la sesión. */ .ds-chat__cab { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5) var(--s-6); border-bottom: var(--bd-strong); } .ds-chat__quien { font-weight: 600; display: flex; align-items: baseline; gap: var(--s-4); min-width: 0; } /* Quien contesta puede llamarse «María Dolores Sánchez Peñalver»: sin tope, en una cabecera flex el nombre parte por palabras y en móvil se comía cuatro renglones, empujando fuera de pantalla el botón de la derecha. Se trunca. */ .ds-chat__quien > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Estado de sesión CON TEXTO, no solo el punto: §3-D lo pide expresamente y §5 lo exige. El punto reutiliza `.ds-d__punto`, que ya distingue por forma. */ .ds-chat__estado { display: inline-flex; align-items: center; gap: var(--s-3); 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); } /* EL HILO. La única región que hace scroll, y crece por abajo. */ .ds-chat__hilo { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5); } .ds-chat__turno { max-width: 76ch; padding: var(--s-5) var(--s-6); border-radius: var(--r-md); background: var(--n-50); font-size: var(--fs-base); line-height: var(--lh-base); white-space: pre-wrap; overflow-wrap: anywhere; } /* LA VOZ MONOESPACIADA ES UN MODIFICADOR, NO EL DEFECTO (2026-08-09, con Mensajería). El turno nació en mono con Claudia y el motivo estaba escrito: «se lee lo que un modelo genera palabra a palabra, y la anchura fija es lo que deja comparar dos respuestas». Eso es cierto de una consola de modelo y falso de una conversación con un paciente, que es texto humano y se lee mejor proporcional. Como es una propiedad de TODO el hilo y no de un turno suelto, el modificador va en el contenedor: `.ds-chat--maquina`. La traza técnica conserva la mono siempre, porque ahí sigue informando. */ .ds-chat--maquina .ds-chat__turno, .ds-chat--maquina .ds-chat__texto, .ds-chat__traza { font-family: var(--font-mono); font-size: var(--fs-sm); } /* Lo que escribe la persona va a la derecha y en acento suave: es uno de los cinco sitios del acento —la selección— y aquí hace de «esto lo he dicho yo». La alternancia izquierda/derecha es lo que permite recorrer un hilo largo sin leer quién habla en cada turno. */ .ds-chat__turno--propio { align-self: flex-end; background: var(--accent-bg); } .ds-chat__turno--sistema { align-self: center; max-width: 68ch; background: none; color: var(--n-500); font-size: var(--fs-xs); text-align: center; } /* El coste de la respuesta (tiempo, tokens/s) y cualquier otra anotación de máquina: se lee si se busca y no compite con el texto. */ .ds-chat__meta { align-self: flex-start; display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--n-500); } /* Volcado técnico dentro del hilo: la traza de una decisión, un JSON. Conserva los saltos y no se estira: es para leerlo, no para escanearlo. */ .ds-chat__traza { align-self: stretch; max-width: none; background: var(--n-25); border: var(--bd-strong); } .ds-chat__fila { display: flex; gap: var(--s-5); } .ds-chat__rotulo { flex: none; font-weight: 600; color: var(--n-600); } .ds-chat__fila--tenue { color: var(--n-500); } .ds-chat__fila--salida { color: var(--ok); } .ds-chat__fila--fallo { color: var(--risk); } /* EL COMPOSITOR, ANCLADO ABAJO. Es el otro requisito literal de §3-D. */ .ds-chat__compositor { /* Posicionado porque los popover del compositor (§29) se anclan a él con `bottom: 100%`. Sin esto su ancestro posicionado más cercano es el panel entero y la caja de emoticonos se abre FUERA de la pantalla, por arriba. */ position: relative; display: flex; align-items: flex-end; gap: var(--s-5); padding: var(--s-5) var(--s-6); border-top: var(--bd-strong); background: var(--n-25); } .ds-chat__texto { flex: 1; min-height: var(--ctl-h); max-height: 8rem; resize: none; font-size: var(--fs-base); } /* Barra de contexto entre el hilo y el compositor: los parámetros con los que se está simulando. No es parte del hilo —no es algo que alguien dijera— así que va fuera de la región que scrollea. */ .ds-chat__contexto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); padding: var(--s-4) var(--s-6); border-top: var(--bd); background: var(--n-25); font-size: var(--fs-xs); } /* En pantalla estrecha la cabecera y el compositor envuelven. Es el mismo defecto que DESIGN.md §3-B documenta para el expediente —cabecera `nowrap` correcta en escritorio que en móvil expulsa la acción fuera de la pantalla— y aquí se daba dos veces: el nombre partía en cuatro renglones y el compositor dejaba la caja de escribir en 60px de ancho. Medido a 390px. */ @media (max-width: 640px) { .ds-chat__hilo { padding: var(--s-5); } .ds-chat__turno { max-width: 100%; } .ds-chat__compositor { padding: var(--s-5); flex-wrap: wrap; } .ds-chat__cab { flex-wrap: wrap; } /* La caja de escribir sube a su propio renglón y los botones quedan debajo: en un teléfono el ancho de la caja importa más que la fila de iconos. */ .ds-chat__texto { order: -1; flex: 1 1 100%; } } /* ========================================================================= 28. LA CONVERSACIÓN HUMANA Lo que le faltaba a `ds-chat` (§27) para servir a Mensajería: separador de día, entrega del mensaje y meta dentro de la burbuja. ========================================================================= */ /* El turno entrante ocupa la izquierda con fondo blanco y contorno: en un hilo de dos voces, blanco contra `--accent-bg` separa más que dos grises. */ .ds-chat__turno--entrante { align-self: flex-start; background: var(--n-0); border: var(--bd-strong); } .ds-chat__turno--seleccionable { cursor: pointer; } .ds-chat__turno--seleccionado { outline: 2px solid var(--accent); outline-offset: 1px; } /* EL TURNO BAJO ESCRUTINIO, que no es lo mismo que un turno seleccionado: no lo ha elegido nadie con el ratón, es el motivo de que la pantalla exista —el mensaje que hay que etiquetar en la curación, el que disparó una alerta—. Va con `--foco` y NUNCA solo con el contorno: encima lleva su rótulo (`.ds-chat__dia--foco`), que es la palabra que §5 exige al lado del color. El acento es el mismo de la selección porque es el mismo trabajo —«este de aquí»— y el sistema tiene un solo acento. El contorno se separa dos píxeles en vez de uno: el turno en foco convive con burbujas propias, que ya son `--accent-bg`, y a un píxel el contorno se leía pegado a ellas. */ .ds-chat__turno--foco { outline: 2px solid var(--accent); outline-offset: 2px; } /* LA RÁFAGA: varios mensajes seguidos que son UN turno. Añadido el 2026-09-04 con la curación, y va en el núcleo y no en la hoja de la app porque una ráfaga es un hecho de `mensajeria` —lo que alguien escribe seguido, `rafagas.VENTANA_RAFAGA`— y la bandeja la va a pedir igual. El defecto que corrige: la pantalla de etiquetar cosía la ráfaga en UNA burbuja con UNA hora, y **210 de los 493 casos de la primera tanda eran ráfagas de 2+**. Quien etiquetó no podía ver que eran tres mensajes ni con qué ritmo se escribieron, y el ritmo cambia el sentido: «perdón por las molestias» pegado detrás de «ayer no pude ir» es una disculpa. Con UN solo mensaje esto no pinta nada —ni línea, ni hueco, ni separación extra—, que es el otro requisito: la mayoría de los casos son de uno y no se les puede añadir ruido. */ .ds-chat__rafaga { align-self: flex-start; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); } /* EL RESALTE ABARCA LA RÁFAGA ENTERA, no cada burbuja. `--foco` (arriba) marca UN turno bajo escrutinio; cuando el turno son tres mensajes, tres contornos a dos píxeles se tocan y se leen como tres cosas distintas — justo lo contrario de lo que hay que ver. El contorno se sube al grupo, y la palabra sigue estando encima (`.ds-chat__dia--foco`): las dos cosas y no solo el color, que es lo que exige §5. */ .ds-chat__rafaga--foco { outline: 2px solid var(--accent); outline-offset: var(--s-4); border-radius: var(--r-md); } /* EL NEXO: la línea que encadena dos mensajes de la ráfaga, y cuya ALTURA dice cuánto tiempo pasó entre ellos. ⚠️ La altura sale de `data-hueco`, nunca de un `style="height:…"` en el marcado: el tramo lo decide el servicio (`curacion.TRAMOS_DEL_HUECO`) y la escala vive aquí, que es donde el tema puede alcanzarla. ⚠️ Y NO es una escala lineal. El hueco está acotado en 3 minutos por la ventana de la ráfaga, así que a tamaño real 2 s es invisible y 170 s rompe la pantalla. Son cuatro tramos con cuatro alturas, y cada uno se lee también **en cifra** (`__nexo-hueco`) y **en palabra** (el `title`): una señal que solo es geometría no la lee quien va rápido. */ .ds-chat__nexo { display: flex; align-items: center; gap: var(--s-3); margin-left: var(--s-7); height: var(--ds-nexo-h, var(--s-4)); } .ds-chat__nexo-linea { width: var(--s-1); height: 100%; background: var(--n-300); } .ds-chat__nexo-hueco { font-family: var(--font-cond); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; color: var(--n-500); } .ds-chat__nexo[data-hueco="seguido"] { --ds-nexo-h: var(--s-4); } .ds-chat__nexo[data-hueco="segundos"] { --ds-nexo-h: var(--s-7); } .ds-chat__nexo[data-hueco="medio"] { --ds-nexo-h: var(--s-9); } .ds-chat__nexo[data-hueco="largo"] { --ds-nexo-h: var(--s-11); } /* Separador de día. No es un turno —nadie lo dijo— así que no lleva burbuja. */ .ds-chat__dia { align-self: center; padding: var(--s-2) var(--s-5); border-radius: var(--r-pill); background: var(--n-100); font-family: var(--font-cond); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--n-600); } /* Pie de la burbuja: canal, hora y entrega. */ .ds-chat__pie { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--n-500); } /* ENTREGA — y aquí está la corrección de un defecto real, no de estilo. «Entregado» y «leído» pintaban los dos `✓✓` y se distinguían SOLO por el color del segundo, que §5 prohíbe y que con deuteranopia no existe. Ahora la escala se lee por FORMA y por PALABRA: pendiente (reloj), enviado (un tick), entregado (dos ticks), leído (dos ticks + la palabra) y fallido (icono + «no enviado»). El color se queda como refuerzo del que ya lo dice todo sin él. */ .ds-chat__entrega { display: inline-flex; align-items: center; gap: var(--s-2); } .ds-chat__entrega--leido { color: var(--info); } .ds-chat__entrega--fallo { color: var(--risk); font-weight: 600; } /* Adjunto dentro de la burbuja. */ .ds-chat__adjunto { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-sm); background: var(--n-100); font-size: var(--fs-sm); } /* BUSCAR DENTRO DEL HILO. Una barra bajo la cabecera, no un popover: mientras se busca hay que seguir viendo la conversación, y lo que se teclea acota lo que se está mirando. Es del núcleo y no de Mensajería porque la bandeja de Claudia tiene el mismo hilo y va a pedir lo mismo. */ .ds-chat__buscar { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-6); border-bottom: var(--bd-strong); background: var(--n-25); } /* `.ds-input` es `width: 100%`: dentro de la barra el texto se reparte lo que sobra y la fecha se queda con su ancho natural, o el selector nativo se estruja hasta no poder pulsarlo. */ .ds-chat__buscar-q { flex: 1; min-width: 8rem; } .ds-chat__buscar-fecha { flex: none; width: auto; } /* El contador y las tres teclas son una pieza y envuelven juntas. */ .ds-chat__buscar-nav { flex: none; display: flex; align-items: center; gap: var(--s-4); margin-left: auto; } .ds-chat__buscar-n { white-space: nowrap; font-variant-numeric: tabular-nums; } /* LA COINCIDENCIA. Todas se marcan con fondo; la que se está mirando lleva ADEMÁS contorno y negrita, que es forma: distinguir «la activa» de «las demás» solo por el matiz del fondo es exactamente lo que §5 no permite. */ .ds-chat__match { background: var(--warn-bg); color: inherit; border-radius: var(--r-sm); } .ds-chat__match--activa { outline: 2px solid var(--warn); outline-offset: 1px; font-weight: 600; } /* El separador del día al que ha saltado la búsqueda por fecha: sin esto, un salto a un día sin coincidencias de texto no deja ninguna señal de haber ocurrido y parece que el control no hace nada. */ .ds-chat__dia--diana { background: var(--warn-bg); color: var(--warn); } /* El rótulo del turno en foco. Misma pieza que el separador de día —una pastilla centrada, que no es un turno porque nadie la dijo— y en el acento, para que la palabra y el contorno de la burbuja de debajo digan lo mismo. */ .ds-chat__dia--foco { background: var(--accent-bg); color: var(--accent); } /* A un ancho de móvil no caben los dos campos y las teclas en un renglón: el texto se queda con el suyo entero y abajo van la fecha y la navegación. */ @media (max-width: 640px) { .ds-chat__buscar { flex-wrap: wrap; padding: var(--s-4) var(--s-5); } .ds-chat__buscar-q { flex-basis: 100%; } } /* ========================================================================= 29. EL POPOVER DEL COMPOSITOR Emoticonos y plantillas: dos cajas que se abren sobre el compositor y se cierran al elegir. No es un modal —no bloquea, no vela la pantalla y no pide confirmación— y por eso no reutiliza `.ds-modal`. ========================================================================= */ .ds-chat__pop { position: absolute; bottom: 100%; left: 0; right: 0; z-index: 20; max-height: 18rem; overflow-y: auto; border: var(--bd-strong); border-radius: var(--r-md) var(--r-md) 0 0; background: var(--n-0); box-shadow: var(--sh-overlay); } .ds-chat__pop-cab { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: var(--bd); background: var(--n-0); 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-chat__pop-grupo { border-bottom: var(--bd); } .ds-chat__pop-grupo:last-child { border-bottom: none; } .ds-chat__pop-grupo-tit { padding: var(--s-3) var(--s-5); background: var(--n-25); 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-chat__pop-item { display: block; width: 100%; padding: var(--s-4) var(--s-5); border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .ds-chat__pop-item:hover { background: var(--n-50); } .ds-chat__emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.25rem, 1fr)); gap: var(--s-2); padding: var(--s-4); } .ds-chat__emoji { aspect-ratio: 1; border: 0; border-radius: var(--r-sm); background: none; font-size: var(--fs-lg); line-height: 1; cursor: pointer; } .ds-chat__emoji:hover { background: var(--n-50); } /* ========================================================================= 25. LA OPCIÓN QUE SE RECONOCE POR SU LOGO Sube al núcleo el 2026-09-03, al cortar el puente de Contabilidad. Es el mismo problema que `.ds-picker` resolvió para el almacén: **hay listas donde el identificador no es el texto**. Nadie lee «Banco Santander, cuenta terminada en 4900»: se reconoce el logo rojo. Un `` de verdad, que sigue en el marcado y es lo que se envía: si el JavaScript no corre, el `` de verdad y el foco y el teclado los da el navegador. ⚠️ El icono NUNCA va solo. En `.ds-selicono` el nombre viaja al lado en el menú, y en `.ds-iconos` debajo de cada casilla: un logotipo es un color y una forma, o sea justo lo que §5 no admite como única señal. Y la opción vacía se dice con `—` y borde discontinuo, no solo con la ausencia de imagen. ========================================================================= */ /* ---- Elegir de una lista: el nativo, una vez construido el desplegable: fuera de la vista pero dentro del formulario. `clip` y no `display: none` para que siga siendo la fuente de verdad y el respaldo sin JavaScript. */ .ds-selicono__native { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; clip-path: inset(50%); } .ds-selicono__trigger { display: inline-flex; align-items: center; gap: var(--s-3); max-width: 100%; min-height: var(--ctl-h); padding: 0 var(--s-4); border: var(--bd-strong); border-radius: var(--r-sm); background: var(--n-0); line-height: 1; cursor: pointer; transition: border-color var(--dur-fast) var(--ease); } .ds-selicono__trigger:hover { border-color: var(--n-400); } .ds-selicono__trigger[aria-expanded="true"] { border-color: var(--accent); } .ds-selicono__trigger:focus-visible { box-shadow: var(--focus); outline: 0; } /* Sin elegir: el borde discontinuo lo dice sin depender del color, igual que `.ds-drop` dice «aquí se suelta algo». */ .ds-selicono__trigger--vacio { border-style: dashed; } .ds-selicono__img { display: block; width: 22px; height: 22px; border-radius: var(--r-sm); } .ds-selicono__fa { width: 20px; text-align: center; color: var(--n-500); } .ds-selicono__none { padding: 0 var(--s-2); font-weight: 600; color: var(--n-400); } .ds-selicono__caret { margin-left: auto; padding-left: var(--s-2); font-size: var(--fs-xs); color: var(--n-400); } .ds-selicono__menu { position: absolute; top: calc(100% + var(--s-2)); left: 0; z-index: 1080; min-width: 200px; max-height: 320px; overflow-y: auto; padding: var(--s-2); border: var(--bd-strong); border-radius: var(--r-lg); background: var(--n-0); box-shadow: var(--sh-overlay); display: none; } .ds-selicono[data-abierto] > .ds-selicono__menu { display: block; } .ds-selicono__item { display: flex; align-items: center; gap: var(--s-4); width: 100%; padding: var(--s-3) var(--s-4); border: 0; border-radius: var(--r-sm); background: none; color: var(--n-700); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; } .ds-selicono__item:hover { background: var(--n-50); } /* El elegido: fondo Y peso. Solo con el fondo, en un menú de logos de colores, no se distingue del que tienes debajo del ratón. */ .ds-selicono__item[aria-selected="true"] { background: var(--accent-bg); color: var(--accent-600); font-weight: 600; } .ds-selicono__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* En una ficha el desplegable ocupa el ancho del campo, no el de su contenido. */ .ds-selicono--ancho, .ds-selicono--ancho > .ds-selicono__trigger { display: flex; width: 100%; } /* ---- Elegir el icono: el juego corto, todo a la vista ----------------- */ .ds-iconos { display: flex; flex-wrap: wrap; gap: var(--s-5); } /* 72px y no 56: el ancho lo manda el ROTULO, no el icono. Con 56 no cabía «Automático» sin partirse por la mitad («Automátic / o»), y ninguna de las dos salidas fáciles vale — recortar con puntos suspensivos deja «Banco Sa…» en Santander y en Sabadell, o sea el rótulo dejando de desambiguar justo entre las dos casillas que más se parecen. */ .ds-iconos__opt { display: flex; flex-direction: column; align-items: center; width: 72px; cursor: pointer; } /* El radio de verdad, invisible pero presente: el foco, las flechas del teclado y el envío del formulario los sigue dando el navegador. */ .ds-iconos__opt > input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; clip-path: inset(50%); } .ds-iconos__tile { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 2px solid var(--n-200); border-radius: var(--r-lg); background: var(--n-0); color: var(--n-400); transition: border-color var(--dur-fast) var(--ease); } .ds-iconos__tile > img { width: 30px; height: 30px; } .ds-iconos__opt > input:checked ~ .ds-iconos__tile { border-color: var(--accent); background: var(--accent-bg); } .ds-iconos__opt > input:focus-visible ~ .ds-iconos__tile { box-shadow: var(--focus); } /* El nombre debajo, siempre: ver el aviso de la cabecera. ENVUELVE, no recorta, y es lo único que lo hace servir para algo. Con `text-overflow: ellipsis` sobre 56px, «Banco Santander» y «Banco Sabadell» salían los dos como «Banco Sa…»: el rótulo dejaba de desambiguar justo entre las dos casillas que más se parecen, y entonces lo único que las distingue es el color del logo — que es exactamente lo que el aviso de la cabecera dice que no puede pasar. Dos renglones cuestan 12px y se leen. */ .ds-iconos__nombre { max-width: 72px; margin-top: var(--s-2); font-size: var(--fs-micro); line-height: var(--lh-tight); color: var(--n-500); text-align: center; overflow-wrap: break-word; } .ds-iconos__opt > input:checked ~ .ds-iconos__nombre { color: var(--accent-600); font-weight: 600; }