/* ============================================================================
Controles de UI TRANSVERSALES
----------------------------------------------------------------------------
Piezas visuales reutilizables por CUALQUIER vista de la app. No dependen de
ningún módulo (a diferencia de work.css, que es del módulo de Trabajo) y no
deben referenciar clases de una pantalla concreta.
Convención: prefijo `ui-` + BEM (`ui-bloque__elemento`, estado `is-*`).
Todo se apoya en variables del tema de Bootstrap (--bs-*), así que funciona
en claro y oscuro sin overrides por tema.
PROFUNDIDAD — LA REGLA QUE MÁS VECES SE HA ROTO EN ESTE REPO:
el `#page-topbar` del tema es `position: fixed; z-index: 1`, así que CREA su
propio contexto de apilado y hacia afuera vale 1 — su menú de notificaciones
vale 1000 solo por DENTRO. Consecuencia: cualquier z-index >= 1 de contenido
de página lo pisa, menú incluido (y un `stretched-link`, cuyo `::after` vale
1, EMPATA y gana por orden de pintado).
Por eso todo contenedor que eleve algo dentro de sí —controles sobre un
enlace estirado, sticky, overlays internos— crea su propio contexto con
`isolation: isolate` (o con `contain: paint`, que también lo crea) y NUNCA
con `position: relative; z-index: N`, que eleva de verdad. Aislar contiene
sin elevar. Se verifica con `elementFromPoint`, que es lo único que lo
delata: a ojo el control se ve perfecto.
ESTOS CONTROLES SON EL ESTÁNDAR DE ACABADO DE LA APP, no el detalle de una
pantalla (decisión de Randolf, 2026-07-22: "que sea claro que en cualquier
vista similar en la aplicación deberá verse así de pulido"). Cada regla de
abajo nació de un defecto real detectado mirando la pantalla —áreas de clic
diminutas, hover que borraba el estado, anillos recortados por las esquinas,
ruedas de carga parpadeando—, así que USARLOS trae el acabado puesto.
Reimplementar una lista con markup propio es la desviación que hay que
justificar, no al revés. El resumen de las reglas y su porqué está en
CLAUDE.md → "Listados: el acabado de `ui-list` es el ESTÁNDAR de la app".
Índice
1. Control segmentado (`ui-segmented`)
2. Lista seleccionable (`ui-list`)
3. Pastilla de metadato (`ui-pill`)
4. Avatar de iniciales (`ui-avatar`)
5. Menú contextual (`ui-menu`)
6. Botón de ícono (`ui-icon-btn`)
7. Popover anclado de ajustes (`ui-popover`)
8. Captura rápida (`ui-capture`)
9. Detalle en hoja de vidrio (`ui-detail`)
10. Desplegable de filtro (`ui-select`) y su rótulo (`ui-field-label`)
11. Conmutador de un eje booleano (`ui-toggle`)
12. Tablero por columnas (`ui-board`)
13. Repaso guiado (`ui-plan`)
14. Campos de formulario: el interior va BLANCO (`.form-control`/`.form-select`)
15. Zona de arrastre de archivo (`ui-dropzone`), fila de chips (`ui-chips`)
y lista de errores por fila (`ui-errors`)
16. Lista de definiciones (`ui-defs`) y esqueleto de carga (`ui-skeleton`)
17. Hoja de tiempo semanal (`ui-sheet`)
18. Páginas de estado — error y no encontrado (`status-page`)
19. Inicio — capturar y elegir qué hacer ahora (`ui-home`)
20. Espacios de trabajo — el tablero de plataforma (`ui-tenants`)
21. User story map (`ui-storymap`)
22. Piezas de un producto de software (`ui-domains`)
23. Diálogos (`ui-dialog`)
24. Portafolio de tarjetas (`ui-cards`, `ui-card`)
25. Actores / personas (`ui-actor`) — avatar, franja del mapa y selector
==========================================================================*/
/* ── 16. Lista de definiciones y esqueleto ───────────────────────────────────
`ui-defs` lista COSAS QUE SE DEFINEN (hoy los campos personalizados de un
espacio). No es `ui-list`: aquello es una lista SELECCIONABLE con detalle y
acciones de lote; esto es un inventario donde cada fila se edita o se borra y
nada se marca. Compartir la clase habría traído el aparato de selección para
nada.
Cada ítem lleva su rótulo arriba con sus pastillas, y debajo la REGLA en una
línea — sin ella hay que abrir el editor de cada campo para saber qué está
pidiendo el espacio, que es la pregunta de la pantalla. */
.ui-defs {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.ui-defs__item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 0.9rem;
border: 1px solid var(--bs-border-color);
border-radius: 12px;
background-color: var(--bs-body-bg);
}
/* Inactivo se ATENÚA, no se esconde: sigue existiendo y hay que poder reactivarlo. */
.ui-defs__item.is-inactive { opacity: 0.6; }
.ui-defs__main {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0; /* sin esto un rótulo largo desborda el flex */
}
.ui-defs__head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem;
}
.ui-defs__label {
font-weight: 650;
font-size: 0.95rem;
}
/* El texto secundario va al 88 % del color del cuerpo y NO a
`--bs-secondary-color`: ese token da 3.47:1 sobre el fondo de la tarjeta en
oscuro — peor que el 4.12 que la app tiene de línea base, o sea una regresión
de ESTA pantalla y no el límite heredado del tema. Al 88 % da 4.65:1 en oscuro
y 8.45:1 en claro, ambos sobre el 4.5 que exige el texto pequeño. Mismo
criterio que `ui-pill` y el "sin ritmo" del repaso. */
.ui-defs__rule {
font-size: 0.82rem;
color: color-mix(in srgb, var(--bs-body-color) 88%, transparent);
}
.ui-defs__key {
font-size: 0.72rem;
color: color-mix(in srgb, var(--bs-body-color) 88%, transparent);
background: none;
padding: 0;
}
/* Indivisible: media botonera en cada renglón es justo lo que se ve mal. */
.ui-defs__actions {
display: flex;
flex-wrap: nowrap;
gap: 0.35rem;
flex-shrink: 0;
}
/* El estado de carga tiene la FORMA del contenido, no una rueda centrada: el
layout ya está puesto y solo se llena, así que la pantalla no salta al llegar
los datos. ESTÁTICO a propósito — una animación infinita repinta sin parar, el
defecto que este repo ya pagó una vez con el halo del checkbox. */
.ui-skeleton {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.ui-skeleton__row {
height: 4.5rem;
border: 1px solid var(--bs-border-color);
border-radius: 12px;
background-color: color-mix(in srgb, var(--bs-body-color) 3.5%, transparent);
}
/* ── 15. Zona de arrastre, chips y errores por fila ──────────────────────────
Nacieron con la importación de clientes; son transversales a propósito, porque
cualquier carga masiva futura necesita las mismas tres piezas.
LA ZONA ES UN ÁREA GRANDE Y EL `` llevan `class="text-danger"` a mano, y los 7 que no la
llevaban salían en NEGRO. Un estándar que depende de repetir una clase en cada
sitio no es un estándar, es una disciplina que falla.
EL TONO SE MIDIÓ, no se eligió a ojo: `--bs-danger` puro (#fd625e) da 2.9:1
sobre blanco y esto es texto pequeño, que exige 4.5:1; el `*-text-emphasis`
del tema da 11.22:1 pero es un vino tan oscuro que se lee NEGRO — que es el
defecto que se estaba corrigiendo. El 75 % del danger sobre negro da 4.96:1 y
sigue leyéndose rojo. En oscuro se aclara en vez de oscurecerse.
Y `class="text-danger"` SE QUITÓ de los 115 `` que lo
traían, en vez de ganarle con `!important`: las utilidades de Bootstrap llevan
`!important`, así que esa clase pisaba esta regla y dejaba DOS rojos distintos
conviviendo. Con la clase fuera, el color vive en un solo sitio. */
.validation-message,
.field-validation-error {
color: color-mix(in srgb, var(--bs-danger) 75%, #000);
font-size: 0.8125rem;
}
[data-bs-theme="dark"] .validation-message,
[data-bs-theme="dark"] .field-validation-error {
color: color-mix(in srgb, var(--bs-danger) 85%, #fff);
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
background-color: var(--bs-tertiary-bg);
}
/* ── 1. Control segmentado ───────────────────────────────────────────────────
Grupo de opciones MUTUAMENTE EXCLUSIVAS, pocas y siempre visibles (3 a 5).
Se lee de un vistazo, a diferencia de un que esconde las opciones
hasta abrirlo. Para más opciones, o si son combinables, este control NO es
el indicado.
Uso:
3
…
El estado activo lo decide el servidor (Blazor) escribiendo `is-active` y
`aria-pressed`; el CSS no guarda estado — nada de :checked ni JS. */
.ui-segmented {
/* Acento de marca: índigo del tema → violeta. Se declara AQUÍ (no se toma
de work.css) para que el control no dependa de ningún módulo; es la
misma fórmula, así que se ve idéntico al de la vista anterior. */
--ui-accent-gradient:
linear-gradient(135deg,
var(--bs-primary),
color-mix(in srgb, var(--bs-primary) 55%, #8b5cf6));
display: inline-flex;
gap: 2px;
padding: 3px;
border-radius: 11px;
background: color-mix(in srgb, var(--bs-body-color) 6%, transparent);
/* Con muchas opciones en pantalla angosta, se envuelve en vez de desbordar. */
flex-wrap: wrap;
}
.ui-segmented__item {
border: 0;
background: transparent;
color: var(--bs-secondary-color);
font-size: 0.8rem;
font-weight: 550;
padding: 0.28rem 0.7rem;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 0.35rem;
white-space: nowrap;
transition: background-color 130ms ease-out, color 130ms ease-out;
}
.ui-segmented__item:hover { color: var(--bs-body-color); }
/* Anillo de foco explícito: los fondos tenues de este control se comen el
estilo por defecto de Bootstrap, y sin esto el recorrido por teclado es
invisible. */
.ui-segmented__item:focus-visible {
outline: 2px solid var(--bs-primary);
outline-offset: 1px;
}
/* La opción activa lleva el acento de marca: es el eje que decide QUÉ se está
viendo, así que se lee de lejos. */
.ui-segmented__item.is-active {
background: var(--ui-accent-gradient);
color: #fff;
font-weight: 650;
box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--bs-primary) 70%, transparent);
}
.ui-segmented__item.is-active:hover { color: #fff; }
/* CONMUTADOR DE VISTA: el mismo segmentado, pero con ENLACES en vez de botones
—cada vista es una URL propia, así que tiene que poder abrirse en otra
pestaña y marcarse como favorita—. Un `` llega con subrayado y con el
color del tema, que es lo único que hay que neutralizar para que se vea
idéntico a las demás opciones del control. */
a.ui-segmented__item {
text-decoration: none;
color: var(--bs-secondary-color);
}
a.ui-segmented__item:hover { color: var(--bs-body-color); }
/* El nombre de la vista se pliega en pantallas angostas: el ícono basta, y así
el conmutador no le roba ancho al título de la página. */
@media (max-width: 991.98px) {
.ui-segmented--views .ui-segmented__name { display: none; }
}
/* Variante DISCRETA: el activo es una pastilla neutra en vez del acento. Para
controles secundarios que no deben competir con el eje principal cuando hay
varios segmentados en la misma barra. */
.ui-segmented--subtle .ui-segmented__item.is-active {
background: var(--bs-body-bg);
color: var(--bs-body-color);
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.14);
}
/* Contador opcional dentro de una opción (p. ej. cuántos ítems trae). */
/* PLEGADO: solo la opción activa dice su nombre; las demás se quedan en su
ícono. El nombre no se BORRA —sigue en el árbol de accesibilidad y en el
`title`—, se pliega hasta ancho cero.
El pliegue usa `0fr → 1fr` de rejilla, no un `max-width` fijo: así anima
EXACTAMENTE hasta el ancho de cada palabra, sin adivinar un número que dejaría
la animación corta con "Entrada" y larga con "Realizables". Es el mismo truco
con el que el detalle se abre a una altura desconocida, y con el mismo costo:
rehace el layout por frame. Aquí es despreciable —son cuatro pastillas—, pero
por eso mismo se mantiene corta.
OJO AL ANCHO DEL CONTROL: al cambiar de opción crece o encoge según la palabra
nueva, así que lo que venga a su derecha en la fila se corre. Es parte del
efecto —el control respira— y no un defecto; si algún día estorba, la salida
es fijarle un ancho al hueco del nombre, no quitar la animación. */
.ui-segmented--collapse .ui-segmented__item { gap: 0; }
.ui-segmented--collapse .ui-segmented__label {
display: grid;
grid-template-columns: 0fr;
opacity: 0;
transition: grid-template-columns 190ms cubic-bezier(0.05, 0.7, 0.1, 1),
opacity 130ms ease-out;
}
.ui-segmented--collapse .ui-segmented__label > span {
overflow: hidden;
white-space: nowrap;
/* El aire entre ícono y nombre vive AQUÍ y no en el `gap` del ítem: plegado,
un gap dejaría un hueco fantasma al lado del ícono. */
padding-inline-start: 0.35rem;
}
.ui-segmented--collapse .ui-segmented__item.is-active .ui-segmented__label {
grid-template-columns: 1fr;
opacity: 1;
}
/* El ícono no se encoge mientras el nombre de al lado se despliega. */
.ui-segmented--collapse .ui-segmented__item > i { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
.ui-segmented--collapse .ui-segmented__label { transition: none; }
}
.ui-segmented__count {
font-size: 0.68rem;
font-weight: 650;
line-height: 1;
padding: 0.16rem 0.34rem;
border-radius: 999px;
background: color-mix(in srgb, var(--bs-body-color) 9%, transparent);
color: var(--bs-secondary-color);
}
/* Sobre el acento, el contador se resuelve en blanco translúcido: mantener el
índigo ahí lo dejaría ilegible. */
.ui-segmented__item.is-active .ui-segmented__count {
background: rgba(255, 255, 255, 0.22);
color: #fff;
}
.ui-segmented--subtle .ui-segmented__item.is-active .ui-segmented__count {
background: color-mix(in srgb, var(--bs-primary) 14%, transparent);
color: var(--bs-primary);
}
/* Variante PESTAÑAS: para secciones de un MISMO objeto (las del detalle de una
tarea), no para filtrar una lista. La diferencia no es estética — un control
segmentado dice "elige un modo" y unas pestañas dicen "el mismo objeto visto
por otra cara"; usar el segmentado para lo segundo hacía que el panel pareciera
tener filtros. Además, sobre una superficie ya tintada el activo de la variante
discreta (una pastilla del color del fondo) se perdía: aquí el activo se marca
con un subrayado del acento, que se lee sobre cualquier fondo.
Se apoya en las MISMAS clases que emite el componente (`is-active`,
`aria-pressed`): solo cambia la piel. */
.ui-segmented--tabs {
display: flex;
gap: 0.15rem;
padding: 0;
border-radius: 0;
background: transparent;
/* Riel bajo TODA la fila: da a las pestañas un suelo común y separa la
cabecera del panel de su contenido sin meter otro filete. */
box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--bs-body-color) 10%, transparent);
}
.ui-segmented--tabs .ui-segmented__item {
border-radius: 0;
padding: 0.42rem 0.7rem;
font-size: 0.82rem;
/* Reserva del subrayado en TODAS: sin ella, activar una pestaña movía la
fila un pixel. */
box-shadow: inset 0 -2px 0 transparent;
transition: color 130ms ease-out, box-shadow 130ms ease-out;
}
.ui-segmented--tabs .ui-segmented__item:hover {
background: transparent;
box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--bs-body-color) 18%, transparent);
}
.ui-segmented--tabs .ui-segmented__item.is-active,
.ui-segmented--tabs .ui-segmented__item.is-active:hover {
background: transparent;
color: var(--bs-primary);
font-weight: 650;
box-shadow: inset 0 -2px 0 var(--bs-primary);
}
.ui-segmented--tabs .ui-segmented__item:focus-visible {
outline-offset: -2px;
border-radius: 6px;
}
/* ── 2. Lista seleccionable ──────────────────────────────────────────────────
Listado de filas homogéneas donde UNA puede quedar seleccionada (el detalle
se abre al lado o debajo). La superficie es una tarjeta con filetes entre
filas; la selección se marca con el acento, no con un fondo saturado.
Uso:
Cada fila es un para que el teclado la alcance con Tab y la active
con Enter/Espacio sin una sola línea de JS. */
/* ── ui-toggle ────────────────────────────────────────────────────────────
Eje de alcance BOOLEANO ("solo mías"). No es un desplegable de dos opciones:
un valor con dos estados se ALTERNA de un toque, y un `` obligaría a
abrir una lista para elegir entre "sí" y "no".
Material del segmentado, y encendido toma su MISMO acento: así se lee que
está acotando, con el vocabulario que la barra ya usa para "esto está
activo". */
.ui-toggle {
--ui-accent-gradient:
linear-gradient(135deg,
var(--bs-primary),
color-mix(in srgb, var(--bs-primary) 55%, #8b5cf6));
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.34rem 0.8rem;
border: 1px solid transparent;
border-radius: 10px;
background-color: color-mix(in srgb, var(--bs-body-color) 6%, transparent);
color: var(--bs-secondary-color);
font-size: 0.8rem;
font-weight: 550;
white-space: nowrap;
cursor: pointer;
transition: background-color 130ms ease-out, color 130ms ease-out, box-shadow 130ms ease-out;
}
.ui-toggle:hover { background-color: color-mix(in srgb, var(--bs-body-color) 10%, transparent); }
.ui-toggle:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 22%, transparent);
}
.ui-toggle.is-on {
background: var(--ui-accent-gradient);
color: #fff;
}
.ui-toggle.is-on:hover { filter: brightness(1.05); }
/* ── ui-select ────────────────────────────────────────────────────────────
Desplegable con el MISMO material que el segmentado: fondo tintado del color
del texto, esquinas suaves y sin borde duro. Los `form-select` de Bootstrap
traían un borde gris y un radio distintos, así que en la misma fila convivían
dos lenguajes — el control del sistema operativo al lado del control de la
app.
`appearance: none` quita el adorno nativo y el chevron se dibuja como imagen
de fondo. No puede tomar `currentColor` (un `` no admite
pseudo-elementos), así que va con un gris neutro y su variante para el tema
oscuro, que es como lo resuelve el propio Bootstrap. */
.ui-select {
appearance: none;
display: block;
width: 100%;
padding: 0.34rem 1.85rem 0.34rem 0.7rem;
border: 1px solid transparent;
border-radius: 10px;
background-color: color-mix(in srgb, var(--bs-body-color) 6%, transparent);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.55rem center;
background-size: 0.75rem;
color: var(--bs-body-color);
font-size: 0.8rem;
font-weight: 550;
line-height: 1.5;
cursor: pointer;
transition: background-color 130ms ease-out, box-shadow 130ms ease-out, border-color 130ms ease-out;
}
.ui-select:hover { background-color: color-mix(in srgb, var(--bs-body-color) 10%, transparent); }
/* Mismo anillo de foco que el resto de los controles de la pantalla. */
.ui-select:focus {
outline: none;
border-color: color-mix(in srgb, var(--bs-primary) 45%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 22%, transparent);
}
.ui-select:disabled { opacity: 0.55; cursor: default; }
[data-bs-theme="dark"] .ui-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
}
/* Las OPCIONES las pinta el sistema operativo: se les fija fondo y color del
tema para que el desplegable abierto no salga en blanco sobre oscuro. */
.ui-select option {
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
}
/* El RÓTULO del control, en el mismo tono discreto que el segmentado usa para
sus opciones en reposo: nombra el eje sin competir con el valor. */
.ui-field-label {
display: block;
margin-bottom: 0.3rem;
/* 85% del color del cuerpo y NO `--bs-secondary-color`: ese token mide 4.12
en oscuro y esto es texto pequeño en negrita (exige 4.5). Medido en el
banco; el defecto del token ya está documentado en el repo. Sube el
contraste de todas las barras de filtro a la vez. */
color: color-mix(in srgb, var(--bs-body-color) 85%, transparent);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.01em;
}
/* ── CÍRCULO DE ESTADO (vocabulario compartido) ───────────────────────────────
"Un círculo con un chulo" significa lo mismo en toda la pantalla: vacío,
tocar para completar; verde macizo, ya está hecha (y tocarlo la reabre). Lo
usan TRES superficies —la fila de la lista, la lista de subtareas de la hoja
y la cabecera de la hoja—, así que la forma se declara UNA vez aquí y cada
sitio añade solo lo suyo: el tamaño, y el apilado o el aire que necesite.
Antes estaba copiado en dos bloques y ya había empezado a divergir (el chulo
tenue era 30 % en la fila y 32 % en la hoja, sin ninguna razón). Va ANTES de
sus consumidores a propósito: las reglas específicas de cada uno se declaran
después y por tanto lo pisan cuando hace falta. */
.ui-list__complete,
.ui-detail__complete {
flex-shrink: 0;
padding: 0;
border-radius: 50%;
border: 1.5px solid color-mix(in srgb, var(--bs-body-color) 26%, transparent);
background: transparent;
color: color-mix(in srgb, var(--bs-body-color) 30%, transparent); /* el chulo, tenue */
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out, opacity 120ms ease-out;
}
/* HECHA: el mismo verde macizo, lo pinte la marca de la fila o el círculo de la
hoja. La marca de la fila no tiene borde, así que el `border-color` solo lo
estrena quien sí lo lleva. */
.ui-list__done,
.ui-detail__complete.is-done {
border-color: var(--bs-success);
background: var(--bs-success);
color: #fff;
}
.ui-list {
border: 1px solid var(--bs-border-color);
border-radius: 14px;
background: var(--bs-body-bg);
overflow: hidden;
/* ── MEDIDAS DE LA FILA, EN PÍXELES ENTEROS ───────────────────────────
No es manía: son enteros PORQUE la guía del árbol debe caer en el mismo
pixel que el chevrón.
· Con medidas fraccionarias (0.9rem = 14.4px, 1.05rem = 16.8px…) el
centro del chevrón y el de la línea se redondean POR SEPARADO —son
una caja de elemento y un fondo— y se descuadraban hasta medio pixel,
distinto en cada nivel de zoom.
· Enteros REDUCEN además la costura entre filas: dos cajas adyacentes
con frontera fraccionaria no teselan al rasterizar y dejan 1px por
el que asoma el fondo del contenedor, que sobre la guía se ve como
un corte blanco. No la eliminan del todo: bajo zoom fraccionario el
propio borde de 1px se resuelve en fracción (medido: 0.667px) y la
frontera vuelve a caer entre píxeles. Eliminarla por completo exige
pintar la guía en UN elemento continuo, no fila por fila.
De ahí que el relleno y la sangría vayan en px enteros. Al tocarlos,
mantenerlos enteros. */
--ui-list-pad-x: 14px;
--ui-list-pad-y: 11px;
/* Cuánto sangra cada nivel de jerarquía. Un solo sitio para afinarlo: lo
consumen la fila y su detalle. */
--ui-list-indent: 22px;
/* Color de las guías del árbol: el ACENTO del producto, no un gris. Es lo
que hace que una familia se lea como un grupo y no como filas con más
margen. Atenuado para que agrupe sin competir con el contenido —las
pastillas de vencimiento y los avatares ya ponen color— y resuelto contra
el fondo del tema, así que funciona en claro y oscuro sin overrides.
OPACO y no translúcido a propósito: la capa del arranque solapa a la de
ancestros en la mitad inferior de una cabeza de familia, y con
transparencia ese tramo saldría más oscuro que el resto de la línea. */
--ui-list-guide: color-mix(in srgb, var(--bs-primary) 62%, var(--bs-body-bg));
/* Tinte del BLOQUE de una familia. Muy bajo a propósito: junto con la guía
basta para que el grupo se lea de un vistazo, y no compite con los
estados de la fila (hover, marcada, completada), que se declaran después
y por tanto lo pisan — que es justo lo que debe pasar. */
--ui-list-family-tint: color-mix(in srgb, var(--bs-primary) 4%, transparent);
/* Grosor de la guía. 2px se lee como una decisión; 1px, como un borde. */
--ui-list-guide-width: 2px;
/* Las guías como IMAGEN: una línea por nivel de ancestro. El número de
líneas no está aquí — lo decide el `background-size` de quien la use
(`nivel × sangría`), así que la misma imagen sirve a la fila y a su
detalle. */
--ui-list-guide-image: repeating-linear-gradient(
to right,
var(--ui-list-guide) 0 var(--ui-list-guide-width),
transparent var(--ui-list-guide-width) var(--ui-list-indent));
/* Columna RESERVADA al inicio de cada fila para el conteo de subtareas
(histórica del chevrón — la pastilla heredó su sitio y su geometría). Se
reserva SIEMPRE, tenga esa fila subtareas o no: si apareciera solo en los
padres, los títulos bailarían entre filas — y, peor, la lista entera se
desplazaría al completar la última subtarea.
Es MÁS ANCHA que el botón: la diferencia es el hueco que separa el
chevrón de la casilla. Sin ese hueco, el realce de la franja de la
casilla —que se pinta DETRÁS de ella, así que solo se percibe por los
márgenes que asoman— no tenía por dónde asomar a la izquierda y se leía
como media pastilla pegada al borde derecho. */
--ui-list-twisty: 28px;
/* La pastilla de conteo (su alto y su ancho MÍNIMO — con dos dígitos crece
hacia el hueco). Del mismo tamaño base que la casilla, para que las dos
piezas del inicio de la fila se lean como pareja. */
--ui-list-twisty-size: 16px;
/* Hueco entre la pastilla y la casilla — lo que le queda a la columna una
vez puesta la pastilla. Es por donde asoma el realce de la franja. */
--ui-list-twisty-gap: calc(var(--ui-list-twisty) - var(--ui-list-twisty-size));
/* Columna donde vive la guía: el CENTRO de la pastilla de conteo (no el de
la columna). Así la línea del grupo nace del número que anuncia a las
hijas — la lectura correcta ("esto cuelga de aquello"). */
--ui-list-guide-x: calc(var(--ui-list-pad-x) + var(--ui-list-twisty-size) / 2);
/* Borde IZQUIERDO de la guía — el valor que consumen de verdad todas las
capas. Se calcula una sola vez para que la línea de la cabeza y la de sus
hijas partan EXACTAMENTE de la misma x. */
--ui-list-guide-col: calc(var(--ui-list-guide-x) - var(--ui-list-guide-width) / 2);
/* Hueco entre las piezas de la fila (conteo · casilla · título · metas), y
ancho de la casilla. Se declaran aquí porque el DETALLE los necesita para
alinear su contenido EXACTAMENTE con el título de su fila: sin ellos el
panel arrancaba 2 px antes y se leía como una capa ajena a la lista. */
--ui-list-gap: 12px;
--ui-list-check: var(--ui-list-twisty-size);
}
.ui-list__item {
width: 100%;
/* Ancla del radio de navegación, que se extiende sobre toda la fila. */
position: relative;
border: 0;
border-top: 1px solid var(--bs-border-color);
background: transparent;
color: var(--bs-body-color);
text-align: start;
padding: var(--ui-list-pad-y) var(--ui-list-pad-x);
/* SANGRÍA POR NIVEL de jerarquía. El nivel lo pone la fila como
`--ui-list-level` (0 = raíz) y el espaciado lo decide AQUÍ, no el
componente: así la fila, su franja sensible y el detalle se alinean solos.
El tope de 6 niveles es defensivo: la jerarquía admite 8, y a partir de
cierto punto seguir sangrando deja el título sin ancho útil en pantallas
angostas sin aportar ya ninguna lectura. Se prefiere que dos niveles muy
profundos se vean iguales antes que un título de tres palabras por línea.
La franja de la casilla (`.ui-list__check::before`) se desplaza sola: su
`left` es relativo a la casilla, así que arranca en el borde izquierdo de
ESTA fila — que es justo lo que debe cubrir. */
padding-left: calc(var(--ui-list-pad-x)
+ var(--ui-list-twisty)
+ min(var(--ui-list-level, 0), 6) * var(--ui-list-indent));
display: flex;
align-items: center;
gap: var(--ui-list-gap);
transition: background-color 120ms ease-out, color 120ms ease-out;
/* AQUÍ VIVÍA `content-visibility: auto` (la "virtualización del navegador"),
y SE QUITÓ porque SE COMÍA LOS TOQUES — bug real en móvil, 2026-07-26.
Mientras el navegador considera que el contenido de la fila no es
"relevante" todavía, el HIT-TESTING NO LLEGA A SUS HIJOS: el punto sobre
la casilla o sobre el chulo de completar resuelve a la FILA. Medido en el
banco con `elementFromPoint` sobre el markup real: con
`content-visibility: auto` devuelve `DIV.ui-list__item` para los dos
controles; con `contain: paint` devuelve `INPUT.ui-list__check` y
`BUTTON.ui-list__complete`.
Por qué con ratón nunca se notó y con el dedo siempre: para hacer clic,
el puntero PASA ANTES por encima de la fila, y ese hover ya la vuelve
relevante — cuando llega el clic, los hijos son alcanzables. El dedo no
tiene ese paso previo: el primer contacto ES el toque, la fila todavía
está saltada y el toque aterriza en ella. De ahí los dos síntomas
reportados: en iOS la casilla exigía DOS toques (el primero solo la
volvía relevante) y el chulo de completar se teñía (el `:hover` sí se
aplica) sin completar nada, porque el clic era de la fila.
Una optimización que impide tocar los controles no es una optimización, y
menos en el dispositivo donde más falta hace. Se conserva `contain` —que
es lo que `content-visibility` implicaba y de lo que sí depende el
diseño—: cada fila sigue siendo frontera de PINTURA (ningún repintado se
filtra a sus vecinas, y es lo que RECORTA al alto de la fila las franjas
sensibles de la casilla y del chulo, que se estiran ±1-2rem a propósito)
y de LAYOUT (lo de dentro no puede reflotar a la lista). El coste de
pintar filas fuera de pantalla se lo compensa que la lista está acotada a
500 filas (`MaxRows`) y que la fila es un flex de una línea. */
contain: layout paint;
/* Techo base solo para que la animación de salida (`is-leaving`) pueda
colapsar HASTA 0 — no se puede transicionar `max-height` desde `none`.
6rem es holgado: las filas son de una línea (título con elipsis, meta en
una fila). El detalle abierto es un HERMANO (`.ui-list__detail`), no vive
dentro de la fila, así que este techo no lo afecta. */
max-height: 6rem;
}
.ui-list__item:first-child { border-top: 0; }
/* ── GUÍAS DEL ÁRBOL ──────────────────────────────────────────────────────
Una familia (una tarea con sus subtareas) se lee como UN grupo gracias a una
guía vertical con el acento del producto que baja desde la pastilla de conteo
del padre y recorre a todas sus hijas. Sin ella, la sangría sola parece un margen
accidental — que es exactamente como se veía.
TODAS las guías se pintan como CAPAS DE FONDO de la fila. Dos razones, cada
una de un bug real:
· Un pseudo-elemento NO sirve: la fila lleva `contain: paint`, y eso
RECORTA a sus hijos —pseudo-elementos incluidos— al borde INTERIOR. Como cada fila tiene un `border-top` de
1px, la línea se cortaba en cada frontera y el árbol se veía punteado.
Un fondo sí pinta bajo el borde (`background-origin/clip: border-box`).
· Y las DOS piezas —el arranque en la cabeza y la línea de las hijas—
tienen que usar la MISMA técnica. Cuando el arranque era un
pseudo-elemento y la continuación un degradado, la misma x se rasterizaba
con medio pixel de diferencia y la línea se veía TORCIDA justo en la
primera hija (la que no tiene chevrón). Por eso ambas salen de
`--ui-list-guide-col`, que se calcula una sola vez.
Los estados (hover, marcada, completada) solo fijan `background-color`, así
que no borran la imagen. */
.ui-list__item {
/* Una línea por cada nivel de ANCESTRO: el número no está escrito en ningún
sitio, sale del ancho de la capa (`nivel × sangría`) sobre un degradado
repetido. A nivel 0 la capa mide 0 y no se pinta nada. */
background-image: var(--ui-list-guide-image);
background-origin: border-box;
background-clip: border-box;
background-repeat: no-repeat;
background-size: calc(min(var(--ui-list-level, 0), 6) * var(--ui-list-indent)) 100%;
background-position: var(--ui-list-guide-col) 0;
}
/* CABEZA DE FAMILIA con su familia DESPLEGADA (la cadena del detalle abierto):
además de las guías de sus ancestros, el ARRANQUE de la suya. Es una capa más
—media altura, anclada abajo— que empieza a media fila, justo bajo su pastilla
de conteo (si empezara arriba la atravesaría), y baja hasta el borde inferior,
donde engancha con la guía de su primera hija. Es lo que hace que el grupo
empiece EN el padre y no debajo de él. Plegada (el estado por defecto) la capa
no se pinta: la cabeza sola no encabeza nada visible y la línea quedaría
colgando en el vacío.
Usa LA MISMA IMAGEN que las otras guías y con el MISMO ancho de mosaico
(`--ui-list-indent`, del que solo se ve la primera línea), no un degradado
sólido de 2px. Es deliberado: en pantallas con escala fraccionaria, una capa
de 2px y un mosaico de 22.4px NO redondean la misma x al mismo pixel físico,
y la línea se veía TORCIDA justo al pasar de la cabeza a su primera hija.
Misma función de imagen y mismo período ⇒ misma rasterización. */
.ui-list__item.is-parent.is-expanded {
background-image:
var(--ui-list-guide-image),
var(--ui-list-guide-image);
/* La capa del arranque cubre UNA COLUMNA MÁS que la de ancestros (la
propia), a media altura y anclada abajo. */
background-size:
calc((min(var(--ui-list-level, 0), 6) + 1) * var(--ui-list-indent)) 50%,
calc(min(var(--ui-list-level, 0), 6) * var(--ui-list-indent)) 100%;
/* MISMO ORIGEN que todas las demás capas de la lista. Es el invariante que
mantiene la línea recta y lo que estaba mal: la capa del arranque partía
de `guide-col + nivel × sangría`, así que su mosaico se rasterizaba desde
una x distinta que el de la hija —misma coordenada nominal, otra FASE— y
en escala fraccionaria las dos líneas no caían en el mismo pixel físico. */
background-position:
var(--ui-list-guide-col) 100%,
var(--ui-list-guide-col) 0;
}
/* CONTEO DE SUBTAREAS. Vive en la columna reservada al inicio de la fila (la
del difunto chevrón) y va POSICIONADO ABSOLUTO a propósito: como solo se
renderiza en las filas con subtareas, si fuera un elemento de flujo
desplazaría casilla y título en esas filas y no en las demás. Así ocupa su
columna sin mover nada.
NO es un control: el plegado se deriva del detalle abierto, así que el clic
burbujea a la fila y un solo gesto abre el detalle Y despliega la familia.
Es la cabeza de la guía —de él baja la línea del grupo al desplegarse— y por
eso se alinea con la misma columna que `--ui-list-guide-x`. */
.ui-list__count {
position: absolute;
left: calc(var(--ui-list-pad-x) + min(var(--ui-list-level, 0), 6) * var(--ui-list-indent));
top: 50%;
transform: translateY(-50%);
min-width: var(--ui-list-twisty-size);
height: var(--ui-list-twisty-size);
padding: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 0.6875rem;
font-weight: 600;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--bs-secondary-color);
/* Fondo OPACO a propósito (mezcla contra el fondo del tema, no contra
transparente — mismo truco que `--ui-list-guide`): la guía del grupo se
pinta como fondo de la fila justo bajo esta columna, y con un tinte
translúcido la línea se veía ATRAVESANDO el círculo. Opaca, la línea
queda detrás y nace visualmente en el borde inferior de la pastilla. */
background-color: color-mix(in srgb, var(--bs-body-color) 8%, var(--bs-body-bg));
/* Por encima del radio que cubre la fila, para que su tooltip responda; el
clic atraviesa igual (burbujea hasta la fila). */
z-index: 1;
transition: background-color 120ms ease-out, color 120ms ease-out;
}
/* Familia desplegada: la pastilla se tiñe del acento — es de donde nace la guía
que baja hacia las hijas, y el tinte los ata visualmente. Igual de OPACA. */
.ui-list__count.is-open {
color: var(--bs-primary);
background-color: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-body-bg));
}
/* CHEVRÓN DE APERTURA de las HOJAS. En una fila sin subtareas la columna del
conteo quedaba muda y nada decía que la fila se abre. Es DECORATIVO puro
(sin eventos: el clic es de la fila, por eso `pointer-events: none`) y sigue
el mismo patrón del chulo de completar: invisible en reposo, aparece al
pasar el cursor por la fila, y en táctil —donde no hay hover— está siempre,
tenue. Vocabulario clásico de disclosure: cerrado apunta a la DERECHA
("aquí hay algo que abrir"); con el detalle abierto se queda fijo, en acento
y apuntando hacia ABAJO — hacia lo que se abrió. */
.ui-list__disclose {
position: absolute;
left: calc(var(--ui-list-pad-x) + min(var(--ui-list-level, 0), 6) * var(--ui-list-indent));
top: 50%;
width: var(--ui-list-twisty-size);
height: var(--ui-list-twisty-size);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.62rem;
color: var(--bs-secondary-color);
pointer-events: none;
opacity: 0;
/* El ícono es chevron-down: -90° lo deja apuntando a la derecha. */
transform: translateY(-50%) rotate(-90deg);
transition: opacity 120ms ease-out, color 120ms ease-out, transform 160ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
.ui-list__item:hover .ui-list__disclose { opacity: 1; }
}
.ui-list__item.is-open .ui-list__disclose {
opacity: 1;
color: var(--bs-primary);
transform: translateY(-50%); /* abierto: gira a su orientación natural, abajo */
}
/* Sin hover (táctil) no hay forma de "revelarlo": queda siempre visible, tenue
— mismo criterio que el chulo de completar. */
@media (hover: none) {
.ui-list__disclose { opacity: 0.55; }
.ui-list__item.is-open .ui-list__disclose { opacity: 1; }
}
/* Dentro de una familia NO se dibuja el filete de separación: el bloque se lee
como una pieza y los cortes fuertes quedan entre familias. El borde se
conserva en TRANSPARENTE (no se quita) por dos motivos: mantiene el alto de
la fila idéntico al de las demás, y deja que la guía —que se pinta como fondo
con `background-origin: border-box`— lo cruce sin interrupción. */
.ui-list__item.is-nested {
border-top-color: transparent;
}
/* Las hijas ENTRAN con una aparición sutil al desplegarse su familia. Solo
ellas: una fila de nivel 0 jamás se inserta por una expansión (la carga
inicial nace plegada), así que la lista completa nunca anima. `@starting-style`
aplica al INSERTARSE el elemento en el DOM — cero JS, cero clases toggleadas;
`opacity`/`translate` componen en GPU y no tocan layout. */
.ui-list__item.is-nested {
transition: background-color 120ms ease-out, color 120ms ease-out,
opacity 180ms ease-out, translate 180ms ease-out;
}
@starting-style {
.ui-list__item.is-nested {
opacity: 0;
translate: 0 -6px;
}
}
@media (prefers-reduced-motion: reduce) {
.ui-list__item.is-nested {
transition: background-color 120ms ease-out, color 120ms ease-out;
}
}
/* El BLOQUE de la familia DESPLEGADA —cabeza e hijas— comparte un tinte mínimo
del acento. Es la segunda mitad del agrupamiento: la guía dice "esto cuelga
de aquello" y el tinte dice "esto es un bloque". Plegada (el defecto), la
cabeza es una fila más: sin tinte, o media lista quedaría teñida sin familia
visible que lo explique. Va ANTES de las reglas de estado (hover, marcada,
completada) a propósito: todas se declaran después y deben pisarlo, porque el
estado de una fila importa más que a qué grupo pertenece. */
.ui-list__item.is-parent.is-expanded,
.ui-list__item.is-nested {
background-color: var(--ui-list-family-tint);
}
/* EL HOVER DE LA LISTA SOLO EXISTE CON PUNTERO FINO (2026-07-26). En táctil el
navegador aplica `:hover` al tocar y lo deja PEGADO hasta el toque siguiente,
así que la fila (y sus controles) se quedaban resaltados como si estuvieran
activos sin estarlo; y en iOS un `:hover` que cambia estilos sobre el
elemento tocado se come el PRIMER toque, que es la segunda mitad del bug de
"hay que tocar dos veces". El dedo no puede "pasar por encima": una pista de
hover no le sirve de nada y sí le estorba. El `:focus-visible` (teclado) se
deja SIEMPRE fuera de esta puerta. */
@media (hover: hover) and (pointer: fine) {
.ui-list__item:hover { background-color: color-mix(in srgb, var(--bs-body-color) 4%, transparent); }
}
.ui-list__item:focus-visible {
outline: 2px solid var(--bs-primary);
outline-offset: -2px;
}
/* DOS estados distintos que pueden convivir en la misma fila, y por eso usan
señales visuales que no se confunden:
· MARCADA (`is-marked`, la casilla): pertenece al conjunto sobre el que
actuará una acción de lote. Tinte del acento + filete lateral. Es un
estado de CONJUNTO: puede haber muchas a la vez.
· ACTIVA (`is-active`, un clic en la fila): la tarea que el usuario está
mirando, la que abre el doble clic. Anillo alrededor de la fila. Es
ÚNICA, y por eso se dibuja como un contorno y no como un relleno — así
se distingue de un vistazo aunque esté además marcada.
El filete lateral se prefiere al borde completo del diseño de referencia
porque este último se lee mal en la primera y la última fila (choca con el
radio de la tarjeta). */
.ui-list__item.is-marked {
background-color: color-mix(in srgb, var(--bs-primary) 7%, transparent);
box-shadow: inset 3px 0 0 var(--bs-primary);
}
/* Sin esto el hover neutro PISA el tinte (misma especificidad, declarado
después) y la fila parece desmarcarse al pasar el cursor. */
@media (hover: hover) and (pointer: fine) {
.ui-list__item.is-marked:hover {
background-color: color-mix(in srgb, var(--bs-primary) 12%, transparent);
}
}
/* SALIDA al completar (`is-leaving`): la fila se desvanece, se desliza y COLAPSA
su alto, de modo que sus vecinas suben suave en vez de dar un salto al
recargar. `opacity`/`transform` los compone la GPU; el colapso de alto es la
única parte que toca layout, pero para las pocas filas de una acción es
imperceptible y lo que hace que se lea "chévere". La duración debe coincidir
con `LeaveAnimationMs` en la página.
Requiere un `max-height` base en la fila (abajo) para poder animar HASTA 0. */
.ui-list__item.is-leaving {
opacity: 0;
max-height: 0;
padding-block: 0;
border-color: transparent;
transform: translateX(1.5rem);
overflow: hidden;
pointer-events: none;
transition:
opacity 160ms ease-out,
transform 180ms ease-out,
max-height 200ms ease-out,
padding 200ms ease-out;
}
/* BORRADO (`is-deleting`): la fila se DESGARRA hacia la izquierda —al lado
contrario que la salida al completar— mientras se tiñe de rojo y colapsa.
La dirección es lo que distingue las dos salidas de un vistazo: completar
despacha la tarea hacia adelante; borrar la retira.
El tinte va con `!important` porque los estados de fila (hover, marcada,
completada, tinte de familia) fijan `background-color` y ganarían — y aquí el
color ES el mensaje. Es la única regla de la lista que lo necesita.
La duración debe coincidir con `DeleteAnimationMs` en la página. Requiere el
`max-height` base de la fila para poder animar HASTA 0. */
.ui-list__item.is-deleting {
opacity: 0;
max-height: 0;
padding-block: 0;
border-color: transparent;
transform: translateX(-2rem) scale(0.97);
background-color: color-mix(in srgb, var(--bs-danger) 20%, transparent) !important;
overflow: hidden;
pointer-events: none;
transition:
opacity 190ms ease-in,
transform 220ms cubic-bezier(0.4, 0, 1, 1),
background-color 120ms ease-out,
max-height 240ms ease-in,
padding 240ms ease-in;
}
/* Con menos movimiento: se desvanece y colapsa, sin el desgarro lateral. */
@media (prefers-reduced-motion: reduce) {
.ui-list__item.is-deleting { transform: none; }
}
/* VUELTA AL TRABAJO (`is-returning`): al DESCOMPLETAR una tarea desde el
ARCHIVO, deja de pertenecer a ese listado y se va — hacia la IZQUIERDA, de
donde vino, que es el gesto contrario al de completar.
Con esto el vocabulario de direcciones queda cerrado y se lee sin explicación:
a la DERECHA se despacha (completar), a la IZQUIERDA en rojo se retira
(borrar), y a la IZQUIERDA en neutro se DEVUELVE (reabrir). Nada de rojo aquí:
reabrir no destruye nada, solo mueve la tarea de sitio.
La duración debe coincidir con `ReturnAnimationMs` en la página. Requiere el
`max-height` base de la fila para poder animar HASTA 0. */
.ui-list__item.is-returning {
opacity: 0;
max-height: 0;
padding-block: 0;
border-color: transparent;
transform: translateX(-1.5rem);
overflow: hidden;
pointer-events: none;
transition:
opacity 160ms ease-out,
transform 180ms ease-out,
max-height 200ms ease-out,
padding 200ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
.ui-list__item.is-returning { transform: none; }
}
/* ENTRADA de una fila recién capturada (`is-captured`). Es el gemelo exacto de
la salida de arriba, al revés: la fila DESPLIEGA su alto, entra deslizándose
y se enciende un instante con el acento, que se apaga solo. Que se despliegue
—y no aparezca de golpe— es lo que hace que la lista se lea como si la fila
se hubiera hecho sitio, en vez de dar un salto.
Va con `@starting-style`: anima al INSERTARSE en el DOM, sin una línea de JS
ni un segundo render que encienda una clase (mismo mecanismo que la apertura
del detalle). El destello es una animación aparte porque tiene que volver a
su sitio sola: una transición se quedaría en el valor final.
`opacity`/`translate` los compone la GPU; el despliegue del alto es lo único
que toca layout, y para una fila es imperceptible. */
.ui-list__item.is-captured {
animation: ui-list-capture-flash 1100ms ease-out;
transition:
opacity 200ms ease-out,
translate 200ms ease-out,
max-height 200ms ease-out;
}
@starting-style {
.ui-list__item.is-captured {
opacity: 0;
translate: -0.75rem 0;
max-height: 0;
}
}
/* Destello del acento que se desvanece: dice "esta es la que acabas de crear"
sin dejar un resaltado permanente que después habría que explicar. */
@keyframes ui-list-capture-flash {
from { background-color: color-mix(in srgb, var(--bs-primary) 16%, transparent); }
to { background-color: transparent; }
}
/* Quien pidió menos movimiento recibe solo el destello: sigue viendo CUÁL es la
fila nueva, sin desplazamiento ni despliegue. */
@media (prefers-reduced-motion: reduce) {
.ui-list__item.is-captured { transition: none; }
@starting-style {
.ui-list__item.is-captured { opacity: 1; translate: none; max-height: 6rem; }
}
}
/* El título de una fila marcada gana peso: con varias, el bloque elegido se
distingue de un vistazo sin recurrir a un fondo saturado. */
.ui-list__item.is-marked .ui-list__title { font-weight: 600; }
.ui-list__item.is-active {
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bs-primary) 55%, transparent);
border-radius: 6px;
}
/* La tarjeta recorta sus esquinas (`overflow: hidden` + radio), así que el
anillo de la PRIMERA fila se veía cortado por arriba y el de la ÚLTIMA por
abajo. Se les da el radio INTERIOR de la tarjeta (su radio menos el borde)
para que el anillo siga la curva en vez de chocar contra ella.
Va sobre `.ui-list > :first/last-child` y no sobre `.ui-list__item` porque
con un detalle abierto al final el último hijo es el panel, no la fila — así
la curva la lleva siempre quien de verdad cierra la tarjeta. Y con
propiedades lógicas, cada regla toca solo DOS esquinas: no se pisan entre sí
cuando la lista tiene una sola fila. */
.ui-list > :first-child {
border-start-start-radius: 13px;
border-start-end-radius: 13px;
}
.ui-list > :last-child {
border-end-start-radius: 13px;
border-end-end-radius: 13px;
}
/* Marcada Y activa: las dos señales a la vez — el filete lateral se dibuja
dentro del anillo, así que ninguna tapa a la otra. */
.ui-list__item.is-marked.is-active {
box-shadow:
inset 0 0 0 2px color-mix(in srgb, var(--bs-primary) 55%, transparent),
inset 3px 0 0 var(--bs-primary);
}
/* Toda la fila es clicable (selecciona), no solo la casilla. */
.ui-list__item { cursor: pointer; }
/* Al seleccionar se arrastra la selección de texto del navegador, que deja los
títulos resaltados en azul y ensucia el gesto — sobre todo con Shift+clic,
que además extiende la selección nativa de texto. */
.ui-list__item { user-select: none; }
/* Detalle abierto DENTRO de la lista, justo debajo de su fila (patrón Things).
Es hermano de la fila, no hijo: así el `contain: paint` de la fila no lo
recorta y su alto libre no afecta al de la fila. */
.ui-list__detail {
/* SANGRADO CON SU FILA: el detalle es hermano, no hijo, así que sin esto
una subtarea abriría su ficha pegada al margen del primer nivel. El
padding llega hasta la columna de la CASILLA; lo que falta para alcanzar
el título lo pone `.ui-detail` (casilla + hueco), de modo que el mismo
cálculo sirve a la banda de escritorio y a la hoja móvil sin duplicarse. */
padding: 2px var(--ui-list-pad-x) 0
calc(var(--ui-list-pad-x) + var(--ui-list-twisty)
+ min(var(--ui-list-level, 0), 6) * var(--ui-list-indent));
/* Fondo LISO del color de la hoja. SIN tinte y SIN DEGRADADO: se probaron
los dos y Randolf los rechazó (el velo del acento, "vuelve todo muy
morado, muy monótono"; el degradado gris que lo sustituyó, tampoco). El
razonamiento de fondo se sostiene: el índigo del producto ya está en las
guías del árbol, en la fila activa y en las pestañas, así que sumarlo al
fondo del detalle era ruido y encima apagaba los ÚNICOS colores que deben
resaltar aquí, los de los datos. Chrome invisible, color en el dato.
Dónde TERMINA el detalle se lee sin fondo propio: si abajo viene una
hija, esa fila lleva el tinte de familia; si viene una fila suelta, su
filete separador es opaco. */
background-color: var(--bs-body-bg);
/* El detalle es HERMANO de la fila, así que se mete ENTRE una cabeza de
familia y sus hijas. Sin dibujar él también las guías, la línea del grupo
desaparecía por completo mientras la ficha estuviera abierta — que es
justo cuando más falta hace saber de qué cuelga lo que se está mirando.
Misma imagen y misma columna que la fila: se lee como una sola línea. */
background-image: var(--ui-list-guide-image);
background-origin: border-box;
background-clip: border-box;
background-repeat: no-repeat;
background-size: calc(min(var(--ui-list-level, 0), 6) * var(--ui-list-indent)) 100%;
background-position: var(--ui-list-guide-col) 0;
/* Transparente para no cortar la guía: la fila abierta ya renuncia a su
borde inferior (`is-open`), así que fila y detalle se leen como una pieza
y el cambio de fondo basta como separación. */
border-top: 1px solid transparent;
/* Apertura ANIMADA: el panel entra creciendo desde cero (~200 ms) y ese
tiempo es el colchón de la consulta que viene en camino — el contenido
normalmente aterriza antes de que la expansión termine, así que abrir con
UN clic se siente instantáneo sin haberlo sido. El truco 0fr→1fr anima
hasta la altura natural del contenido sin conocerla; `@starting-style`
(abajo) aplica el 0fr AL INSERTARSE el elemento en el DOM, sin JS ni
clases toggleadas. Navegador sin soporte: abre sin animación, y ya. */
display: grid;
grid-template-rows: 1fr;
/* 160 ms y curva DECELERADA (arranque rápido, frenada suave), no la `ease`
de antes, que arrancaba despacio: en una expansión el ojo juzga la
velocidad por los primeros milisegundos, así que una curva que sale
lenta se siente lenta aunque dure lo mismo. Es la corrección más barata
posible — no cambia lo que cuesta el frame, cambia cuándo ocurre el
movimiento.
Y hay que saber lo que ESTO cuesta: `grid-template-rows` NO es una
propiedad de compositor. Animar 0fr→1fr rehace el LAYOUT en cada frame
(el del panel y el de todo lo que tiene debajo), a diferencia de
`translate`/`opacity`, que el compositor resuelve sin repintar. Se paga a
propósito porque es lo único que anima hasta una altura desconocida sin
JS; a cambio se mantiene corta. Si algún día pesa de verdad, la salida no
es afinar la curva: es dejar de animar el alto y entrar solo con
opacidad. */
transition: grid-template-rows 160ms cubic-bezier(0.05, 0.7, 0.1, 1);
}
@starting-style {
.ui-list__detail { grid-template-rows: 0fr; }
}
/* Durante la apertura la fila del grid mide menos que su contenido; el hijo la
acompaña recortando en vez de desbordar sobre las filas de abajo. */
.ui-list__detail > * {
min-height: 0;
overflow: hidden;
}
/* Mientras el contenido viene en camino, el hueco reserva altura para que el
reemplazo pendiente→detalle AJUSTE en vez de saltar.
Sube de 3.75 rem a 7 rem porque con la tarea sin cachear se encadenaban DOS
expansiones —primero al hueco, después al contenido— y ese doble movimiento
es lo que se percibía como lentitud (reportado por Randolf). 7 rem es la
altura de un panel de pocos campos: el segundo tramo pasa a ser un ajuste
corto, y en las tareas con poco contenido no llega a encoger. */
.ui-list__detail:has(> .ui-list__detail-pending) { min-height: 7rem; }
@media (prefers-reduced-motion: reduce) {
.ui-list__detail { transition: none; }
}
/* Detalle de una cabeza de familia DESPLEGADA: la guía tiene que seguir hasta
las hijas que vienen debajo, así que se pinta una columna MÁS que la de sus
ancestros — la suya propia. */
.ui-list__detail.is-parent {
background-size: calc((min(var(--ui-list-level, 0), 6) + 1) * var(--ui-list-indent)) 100%;
}
/* La fila con el detalle abierto pierde la separación inferior: fila y detalle
se leen como UNA pieza. */
.ui-list__item.is-open { border-bottom: 0; }
/* Indicador de carga con APARICIÓN DIFERIDA: arranca invisible y solo se revela
a los 250 ms. Si la respuesta llega antes —el caso normal, porque el detalle
se precarga al seleccionar la fila— el indicador nunca se ve. Un destello de
"cargando" más corto que un parpadeo se percibe como un defecto, no como
información; es la razón por la que las guías de rendimiento recomiendan no
mostrar nada hasta pasado ese umbral. */
.ui-list__detail-pending {
opacity: 0;
animation: ui-reveal-late 1ms linear 250ms forwards;
/* Centrado en el hueco reservado del detalle. Como ítem de grid el span se
blockifica, pero su tamaño explícito (spinner-border-sm) lo mantiene
chico; esto solo decide DÓNDE queda. */
justify-self: center;
align-self: center;
}
@keyframes ui-reveal-late { to { opacity: 1; } }
/* Mismo criterio para la LISTA ENTERA mientras espera los datos del filtro que
se acaba de elegir. Reserva alto para que la página no dé un salto cuando las
filas entren, y se revela igual de tarde: en un cambio de filtro normal la
entrega llega antes de los 250 ms y el usuario nunca ve un indicador. */
.ui-list-pending {
display: flex;
align-items: center;
justify-content: center;
min-height: 4rem;
opacity: 0;
animation: ui-reveal-late 1ms linear 250ms forwards;
}
/* Título: ocupa el espacio libre y se recorta con puntos suspensivos — nunca
empuja los metadatos ni parte la fila en dos líneas. */
.ui-list__title {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* Aire entre la franja de la casilla y el texto. Va como padding del TÍTULO
y no como recorte de la franja: así el texto respira sin que el objetivo
de clic pierda ni un píxel. */
padding-inline-start: 0.4rem;
}
/* Metadatos al final de la fila (fechas, avatares): no se encogen. */
/* RENOMBRAR: el lápiz abre el modo y el chulo lo cierra guardando. Solo
aparece al pasar por encima de la fila —o cuando el teclado lo enfoca— para
no llenar la lista de controles: en reposo, una fila son datos, no botones.
En táctil no hay hover y el lápiz no aparece nunca; ahí el título se edita en
la hoja, que es donde se ve. */
.ui-list__rename-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--bs-secondary-color);
font-size: 0.8rem;
opacity: 0;
cursor: pointer;
transition: opacity 120ms ease-out, background-color 120ms ease-out, color 120ms ease-out;
}
.ui-list__rename-btn:focus-visible { opacity: 0.65; }
@media (hover: hover) and (pointer: fine) {
.ui-list__item:hover .ui-list__rename-btn { opacity: 0.65; }
.ui-list__rename-btn:hover {
opacity: 1;
background-color: color-mix(in srgb, var(--bs-body-color) 8%, transparent);
color: var(--bs-body-color);
}
}
/* EN TÁCTIL EL LÁPIZ NO EXISTE, y tiene que dejar de OCUPAR SITIO: con
`opacity: 0` seguía siendo un objetivo de 28 px perfectamente tocable —
invisible— justo antes de la pastilla de vencimiento, así que un toque algo
corto entraba a renombrar sin que nada lo anunciara. Ahí el título se edita
en la hoja, que es donde se ve. */
@media (hover: none) {
.ui-list__rename-btn:not(.is-on) { display: none; }
}
.ui-list__rename-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 25%, transparent);
}
/* GUARDANDO: deja de ser discreto — es la salida del modo y debe verse siempre,
también con el dedo, sin depender del hover. */
.ui-list__rename-btn.is-on {
opacity: 1;
color: var(--bs-primary);
background-color: color-mix(in srgb, var(--bs-primary) 12%, transparent);
}
/* EL CAMPO OCUPA EL SITIO EXACTO DEL TÍTULO: mismo tipo, mismo tamaño y el
relleno compensado con margen negativo, así el texto no salta ni un píxel al
entrar o salir del modo — y la banda del detalle, que se alinea con este
texto, tampoco se mueve. */
.ui-list__rename {
flex: 1 1 auto;
min-width: 0;
margin-inline-start: 0.4rem; /* el aire que el título pone con padding */
padding: 2px 6px;
margin-block: -2px;
border: 1px solid color-mix(in srgb, var(--bs-primary) 45%, transparent);
border-radius: 7px;
background-color: var(--bs-body-bg);
color: inherit;
font: inherit;
}
.ui-list__rename:focus {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 22%, transparent);
}
.ui-list__meta {
display: flex;
align-items: center;
gap: 0.4rem;
flex-shrink: 0;
}
/* Casilla de SELECCIÓN al inicio de la fila. Es un obligaría a reimplementar
a mano todo ese comportamiento del navegador.
CUADRADA a propósito: el círculo es el vocabulario universal de "tarea
completada" (Things, Todoist, Apple Recordatorios), así que usarlo para
seleccionar confundía las dos acciones. El cuadrado dice "elegir", y deja el
círculo libre para cuando la fila gane su marca de completado. */
.ui-list__check {
flex-shrink: 0;
width: var(--ui-list-twisty-size);
height: var(--ui-list-twisty-size);
margin: 0;
border-radius: 0.25rem;
cursor: pointer;
}
/* Radio de NAVEGACIÓN: invisible pero CUBRIENDO la fila entera.
No es la técnica sr-only de recortar a 1px, y la diferencia importa: el foco
por ratón lo decide el `mousedown`, que aterriza en lo que esté BAJO EL
CURSOR. Con el radio recortado fuera de la vista, el clic caía sobre el texto
—que no es enfocable— y el foco se iba al `body`; el radio quedaba marcado
pero SIN foco, así que las flechas no respondían hasta un segundo clic
(comprobado en vivo: `document.activeElement` daba BODY).
Extendido sobre la fila, el `mousedown` lo golpea a él: el navegador lo
enfoca y lo marca de forma nativa. Ni `FocusAsync`, ni una referencia por
fila, ni JS. Lo que se ve sigue siendo el anillo de la fila. */
.ui-list__radio {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
cursor: pointer;
/* Debajo de la casilla, que debe seguir recibiendo sus propios clics. */
z-index: 0;
}
/* Como el control enfocado es invisible, el foco lo delata la FILA. Sin esto,
navegar con las flechas no se vería. */
.ui-list__item:has(.ui-list__radio:focus-visible) {
outline: 2px solid var(--bs-primary);
outline-offset: -2px;
}
/* ÁREA SENSIBLE de la casilla = toda la franja izquierda de la fila, de borde
a borde y de alto completo, no el cuadro de 17px. Un objetivo de 17px está
muy por debajo del mínimo de 44px de las guías táctiles y obliga a apuntar
con precisión también con el ratón.
Se consigue con un pseudo-elemento estirado: los eventos de un pseudo-elemento
pertenecen a su ELEMENTO, así que un clic en cualquier punto de la franja es
un clic en la casilla — sin JS y sin envolver la casilla en otro contenedor
que rompería la separación entre marcar y seleccionar.
Los desbordes verticales generosos los recorta la propia fila (`contain:
paint`), así que la franja termina
midiendo exactamente el alto de la fila sin tener que calcularlo. */
.ui-list__check {
position: relative;
/* POR ENCIMA del radio de navegación, que cubre la fila entera: la franja
de la casilla debe seguir recibiendo sus propios clics (marcar), no
activar la fila. */
z-index: 1;
}
.ui-list__check::before {
content: "";
position: absolute;
top: -2rem; /* recortado por la fila */
bottom: -2rem; /* recortado por la fila */
/* La casilla se mudó al EXTREMO DERECHO, así que su franja mira hacia allá:
hasta el borde de la tarjeta, y por la izquierda solo el hueco previo
—sin llegar al avatar— para no marcar al tocarlo. Es exactamente la
franja que tenía el chulo cuando ocupaba este sitio: al intercambiar los
dos controles se intercambian también sus áreas, o el clic aterrizaría
en el lado equivocado. */
right: calc(-1 * var(--ui-list-pad-x));
left: -0.3rem;
z-index: -1; /* detrás del cuadro, para que el realce no lo tape */
}
/* La señal del hover es un HALO pequeño alrededor de la casilla, no el tinte de
la franja completa: teñir todo el rectángulo se leía como un subrayado extraño
cruzando la columna del chevrón/conteo (reporte de Randolf, 2026-07-24). La
franja SIGUE siendo el área de clic íntegra —eso no cambió—; como el `::before`
pertenece a la casilla, pasar el cursor por CUALQUIER punto de la franja
enciende el halo sobre la casilla: la pista apunta a lo que el clic hace. */
@media (hover: hover) and (pointer: fine) {
.ui-list__check:hover {
box-shadow: 0 0 0 5px color-mix(in srgb, var(--bs-body-color) 8%, transparent);
}
}
/* Fila COMPLETADA que permanece en la vista (modo "al finalizar el día"): se
HUNDE (recessed, patrón Things 3). Sigue ahí como registro del progreso del
día y se limpia sola al terminar el día (o con "Limpiar ahora"), pero retrocede
para no competir con lo que aún está por hacer: fondo levemente inset, texto en
el tono secundario y tachado, metadatos atenuados. La transición de color de la
fila (arriba) hace que el hundimiento sea suave cuando se completa en el sitio.
`@key` por id conserva el nodo al recargar, así que la fila no se recrea: solo
gana `is-completed` y transiciona. */
.ui-list__item.is-completed {
background-color: color-mix(in srgb, var(--bs-body-color) 3.5%, transparent);
color: var(--bs-secondary-color);
}
@media (hover: hover) and (pointer: fine) {
.ui-list__item.is-completed:hover {
background-color: var(--bs-body-bg);
}
}
.ui-list__item.is-completed .ui-list__title {
color: var(--bs-secondary-color);
font-weight: 400;
text-decoration: line-through;
text-decoration-color: color-mix(in srgb, var(--bs-secondary-color) 55%, transparent);
}
/* Los metadatos (fecha, avatar) retroceden con la fila… menos la marca de HECHA,
que debe quedar nítida como la única señal viva. La `opacity` se COMPONE con la
del hijo, así que no se puede "des-atenuar" un hijo de un padre atenuado: por
eso se atenúan los hermanos de la marca uno a uno, no el `ui-list__meta` entero. */
.ui-list__item.is-completed .ui-list__meta > :not(.ui-list__done) { opacity: 0.65; }
/* Marca de COMPLETADA, en el EXTREMO DERECHO de la fila. Selección a la izquierda
(casilla CUADRADA = "elegir"), estado a la derecha (este CÍRCULO verde =
"hecho"): forma distinta, color distinto y extremo distinto, para que las dos
ideas NO puedan confundirse (era el punto: reutilizar la casilla las mezclaba).
Sobre la fila recessed, el verde es el único acento vivo — el "check
satisfactorio" del patrón Things. */
.ui-list__done {
flex-shrink: 0;
width: 1.15rem;
height: 1.15rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.6rem;
/* El verde lo pone la regla compartida del círculo de estado. */
}
/* Botón de COMPLETAR: el gemelo ACCIONABLE del chulo verde, en el mismo extremo
derecho de una fila NO completada. Un círculo con el check tenue que, al pasar
el cursor o con foco, se rellena de verde: "clic o toque para completar" — la
versión con ratón/dedo del "marcar como realizada" del clic derecho. Mismo
tamaño que `ui-list__done` para que la columna derecha no salte entre filas
completadas y no. */
.ui-list__complete {
/* La forma la pone el círculo de estado compartido (arriba); aquí solo va
la medida de la fila y su apilado. */
width: 1.15rem;
height: 1.15rem;
font-size: 0.58rem;
/* Por encima del radio de navegación que cubre la fila, como la casilla. */
position: relative;
z-index: 1;
}
.ui-list__complete:focus-visible {
border-color: var(--bs-success);
background: var(--bs-success);
color: #fff;
outline: none;
}
/* El relleno verde es la PREVISUALIZACIÓN de "esto va a completar", y solo tiene
sentido con un puntero que se posa antes de hacer clic. En táctil se aplicaba
al tocar y se quedaba pegado: el chulo se ponía verde como si hubiera
completado y la tarea seguía igual — exactamente lo reportado ("se activa el
ícono y no pasa nada"). Ahí el estado real lo dice la fila (tachada y con su
chulo verde), no un hover. */
@media (hover: hover) and (pointer: fine) {
.ui-list__complete:hover {
border-color: var(--bs-success);
background: var(--bs-success);
color: #fff;
}
}
/* Botón de REABRIR: el chulo verde de una fila completada, ahora ACCIONABLE —lo
"des-completa" (marca como no realizada). Hereda de `ui-list__done` el relleno
verde y el tamaño; aquí van solo los reseteos de y el estado
interactivo. */
.ui-list__done--action {
border: 0;
padding: 0;
cursor: pointer;
position: relative;
z-index: 1;
transition: box-shadow 120ms ease-out;
}
/* Al pasar el cursor (o con foco) NO se pierde el verde. La versión anterior lo
volvía un contorno transparente para "previsualizar" el des-completar, pero eso
confundía JUSTO al completar: el ratón queda sobre el chulo recién hecho y el
hover lo hacía parecer des-marcado (reportado por Randolf). El chulo sigue
verde; solo un halo sutil delata que es accionable (un clic lo reabre). */
.ui-list__done--action:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-success) 32%, transparent);
outline: none;
}
@media (hover: hover) and (pointer: fine) {
.ui-list__done--action:hover {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-success) 32%, transparent);
}
}
/* El círculo visible mide ~18 px: un objetivo pequeño para un dedo (guía: 44 px).
Un pseudo-elemento estira el ÁREA SENSIBLE a lo ALTO de la fila y hasta el borde
DERECHO de la tarjeta, sin agrandar el círculo. Los eventos del pseudo son del
botón, así que tocar cerca del chulo completa igual. Se extiende a la derecha y
al hueco previo —NO hacia el avatar (a 0.3rem, sin cruzar el gap de 0.4rem)—
para no actuar por error al tocarlo. La fila (`contain: paint`) recorta el
desborde vertical al alto exacto de la fila.
Aplica a AMBOS: completar (fila no hecha) y reabrir (fila hecha). */
.ui-list__complete::before,
.ui-list__done--action::before {
content: "";
position: absolute;
top: -1rem; /* recortado por la fila → alto completo */
bottom: -1rem;
/* Ahora el chulo abre la fila, así que su franja se estira hacia la
IZQUIERDA —quedándose la columna del chevrón cuando está vacía— y por la
derecha llega justo antes del título: el hueco de la fila leído de la
variable, que en el teléfono es más ceñido (con un valor fijo se pasaba
sobre el texto y tocar la primera letra completaba la tarea). */
/* SOLO EL HUECO PREVIO, nunca la columna del chevrón/conteo. Esa columna es
de la FILA: el chevrón anuncia que se expande —y es `pointer-events:
none` justo para que el clic burbujee— y la pastilla de conteo abre la
familia. Estirarla hasta el borde de la tarjeta hacía que apuntar al
chevrón COMPLETARA la tarea (bug reportado por Randolf, 2026-08-03);
el hueco de 16 px que ese estirado pretendía recuperar no estaba muerto,
era la columna de expandir. */
left: -0.3rem;
right: calc(-1 * var(--ui-list-gap));
}
/* Con ratón (puntero fino con hover) el chulo aparece al pasar por la FILA, para
no llenar la lista de círculos en reposo. En TÁCTIL no hay hover —el dedo no
puede "pasar por encima"—, así que ahí queda SIEMPRE visible (esta regla no
aplica y gana el `opacity` por defecto). El foco por teclado también lo revela. */
/* AL INVERTIR LOS PAPELES SE INVIERTE TAMBIÉN QUIÉN SE VE EN REPOSO. El chulo
pasó a ser el control PRIMARIO —lo que se hace en la inmensa mayoría de las
filas— así que ya no se esconde: dejarlo con `opacity: 0` habría dejado la
columna de la izquierda vacía en reposo y la lista sin su riel de anclaje.
Quien se revela ahora es la CASILLA, que es lo excepcional: con ratón
aparece al pasar por la fila, para no llenar la lista de cuadros que casi
nadie usa. En TÁCTIL no hay hover —el dedo no puede "pasar por encima"—, así
que ahí queda siempre visible (esta regla no aplica). Y una casilla MARCADA
se ve SIEMPRE, con hover o sin él: esconder lo que está seleccionado dejaría
al usuario sin saber sobre qué van a actuar las acciones de lote. */
@media (hover: hover) and (pointer: fine) {
.ui-list__check { opacity: 0; }
.ui-list__item:hover .ui-list__check,
.ui-list__check:checked,
.ui-list__check:focus-visible { opacity: 1; }
}
/* ── LA FILA EN EL TELÉFONO: todo el ancho es para el TÍTULO ──────────────────
Decisión de Randolf (2026-07-26): en un teléfono la fila no da para leer la
tarea. Medido en 390 px con la fila completa, al título le quedaban 142 px —
media docena de palabras cortadas. El resto se lo repartían piezas que ahí no
hacen falta:
· El CHEVRÓN y el CONTADOR de subtareas viven en una columna reservada de
28 px al inicio de TODAS las filas. Su trabajo es anunciar que la fila se
abre y cuántas hijas tiene, y en el teléfono eso lo cuenta la propia hoja
del detalle ("Subtareas 3", con la lista). Tocar la fila la abre igual:
ninguno de los dos era el gesto, solo la pista.
· La CASILLA de selección, ahora en el extremo derecho. Aquí solo quita
ancho al texto: marcar filas para una acción de LOTE es un gesto de
escritorio, y en el teléfono cada píxel es una letra más. El chulo de
completar SÍ se queda —desde que se mudó al inicio es el control
primario, y completar con el pulgar es justo lo que se hace en el
móvil—, ocupando la columna que la casilla dejó libre: el título
arranca donde arrancaba antes.
Se quitan los dos extremos y se recorta el relleno lateral, que en escritorio
da aire y aquí es texto perdido. La marca VERDE de completada se queda: es
estado, no acción, y es lo que hace legible el archivo.
Todo con `display: none`, no con opacidad: un control invisible pero tocable
es la trampa que ya se corrigió en el lápiz de renombrar. */
@media (max-width: 767.98px) {
.ui-list {
/* La columna reservada del inicio desaparece con lo que la ocupaba. */
--ui-list-twisty: 0px;
/* Relleno lateral más ceñido (entero, por la regla de la guía). */
--ui-list-pad-x: 10px;
/* Y la sangría por nivel: 22 px por escalón se comen una línea entera a
dos niveles de profundidad. 16 sigue leyéndose como jerarquía. */
--ui-list-indent: 16px;
/* Hueco entre las piezas de la fila: lo mismo, cada píxel es una letra. */
--ui-list-gap: 8px;
}
.ui-list__disclose,
.ui-list__count,
.ui-list__check { display: none; }
/* Y el LÁPIZ de renombrar, que se llevaba 28 px del título (lo cazó Randolf
en una captura: "Indagar por el estado de la migración d…"). Aquí no es
una pérdida de función: en el teléfono el título se edita en la HOJA, que
es donde de verdad se lee. El chulo de GUARDAR se exceptúa —si alguien
entra a renombrar por el menú de ⋯, tiene que poder salir— y por eso la
regla lleva `:not(.is-on)`.
Convive con la de `hover: none` de más arriba y no la reemplaza: aquella
cubre una tablet ancha con dedo (sin hover que revele el lápiz), y esta,
una ventana angosta con ratón. Son dos motivos distintos para lo mismo. */
.ui-list__rename-btn:not(.is-on) { display: none; }
/* El TÍTULO arranca antes: menos hueco entre piezas y menos aire propio.
El aire sigue existiendo (el texto no se pega a la casilla), solo que
medido para una pantalla en la que cada píxel es una letra más. */
.ui-list__title { padding-inline-start: 0.2rem; }
/* La FRANJA SENSIBLE de la casilla se reancla al borde de la fila: su
`left` se calculaba desde la columna que acaba de desaparecer, así que
sin esto el área de marcar se encogía justo al cuadro dibujado. */
.ui-list__check::before,
.ui-list__item.is-parent .ui-list__check::before {
left: calc(-1 * var(--ui-list-pad-x));
}
}
/* ── 3. Pastilla de metadato ─────────────────────────────────────────────────
Dato corto y secundario dentro de una fila (una fecha, un conteo). El tono
comunica urgencia; el neutro es el default. */
.ui-pill {
/* inline-flex por el ícono opcional (DueDatePill y las pastillas del
detalle): mantiene el flujo en línea y separa ícono/texto sin espacios
fantasma del markup. */
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.72rem;
font-weight: 600;
line-height: 1;
padding: 0.28rem 0.5rem;
border-radius: 999px;
white-space: nowrap;
background: color-mix(in srgb, var(--bs-body-color) 7%, transparent);
/* NO `--bs-secondary-color`: MEDIDO sobre este mismo fondo tintado da 3.69:1
en oscuro, y esto es texto pequeño en negrita (0.72rem), que exige 4.5:1.
Es el mismo defecto que las variantes de color de abajo ya corrigieron con
los tokens `*-text-emphasis`; la pastilla BASE se había quedado sin él.
Al 90% del color del cuerpo pasa en los dos temas (8.3:1 claro, 4.6:1
oscuro) conservando el tono apagado que la distingue del texto normal. */
color: color-mix(in srgb, var(--bs-body-color) 90%, transparent);
}
/* Requiere atención hoy o ya se pasó.
El texto NO usa `var(--bs-danger)` puro: MEDIDO sobre superficie blanca da
2.96:1, y esta pastilla es texto pequeño en negrita (0.72rem), que exige
4.5:1. `--bs-*-text-emphasis` son los tokens que Bootstrap calcula
precisamente para texto sobre un fondo tintado del mismo color, y pasan en
los dos temas (11.2:1 en claro, 6.4:1 en oscuro) sin perder el rojo. */
.ui-pill--danger {
background: color-mix(in srgb, var(--bs-danger) 12%, transparent);
color: var(--bs-danger-text-emphasis);
}
/* Algo anda mal pero no es una fecha incumplida: un proyecto que no se mueve,
trabajo detenido. Ámbar = "míralo", frente al rojo = "ya se pasó". */
.ui-pill--warning {
background: color-mix(in srgb, var(--bs-warning) 16%, transparent);
/* Misma razón que el rojo: el ámbar puro sobre blanco mide 2.6:1. */
color: var(--bs-warning-text-emphasis);
}
/* Informativo con peso: no es un problema, es algo que el sistema señala
(toca revisar, esperando a un tercero). Toma el acento del producto. */
.ui-pill--accent {
background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
color: color-mix(in srgb, var(--bs-primary) 80%, var(--bs-body-color));
}
/* En oscuro el índigo del acento se hunde contra el fondo: MEDIDO, la fórmula
de arriba da 2.6:1 sobre la superficie de una tarjeta, muy por debajo del
4.5:1 que exige un texto de 0.72rem. Se aclara hacia el blanco, que conserva
el tinte del producto en vez de virarlo a gris. */
[data-bs-theme=dark] .ui-pill--accent {
color: color-mix(in srgb, var(--bs-primary) 45%, #fff);
}
/* ── 4. Avatar de iniciales ──────────────────────────────────────────────────
Identifica a una persona sin cargar una imagen. El color lo decide quien lo
usa (variable --ui-avatar-bg) para que la misma persona conserve el suyo. */
.ui-avatar {
--ui-avatar-bg: var(--bs-secondary);
flex-shrink: 0;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
background: var(--ui-avatar-bg);
color: #fff;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.02em;
display: inline-flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
/* Variante compacta, para cuando el avatar acompaña a un texto en una ficha
(el DRI del panel de historia) y no debe competir con él. */
.ui-avatar--sm {
width: 1.25rem;
height: 1.25rem;
font-size: 0.52rem;
}
/* ── 5. Menú contextual ──────────────────────────────────────────────────────
Menú flotante que abre el clic derecho (evento nativo `@oncontextmenu` de
Blazor; el CSS solo lo presenta). Va con un backdrop invisible de cuerpo
completo que lo cierra al primer clic en cualquier parte.
Uso:
@if (MenuOpen)
{
} */
.ui-menu-backdrop {
position: fixed;
inset: 0;
z-index: 1050;
}
.ui-menu {
position: fixed;
z-index: 1051;
min-width: 12rem;
padding: 0.35rem;
border-radius: 10px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.35);
}
/* Variante ANCLADA: el mismo menú, colgando de su botón en vez de flotar en las
coordenadas del puntero. Es lo que da un camino táctil a las acciones (en un
móvil no hay clic derecho) sin JS de posicionamiento: se apoya en el mismo
`ui-popover-anchor` del popover de ajustes. */
.ui-menu--anchored {
position: absolute;
top: calc(100% + 0.4rem);
inset-inline-end: 0;
}
.ui-menu__item {
width: 100%;
border: 0;
background: transparent;
color: var(--bs-body-color);
text-align: start;
font-size: 0.85rem;
padding: 0.45rem 0.6rem;
border-radius: 7px;
display: flex;
align-items: center;
gap: 0.55rem;
cursor: pointer;
transition: background-color 110ms ease-out;
}
.ui-menu__item:hover,
.ui-menu__item:focus-visible {
background: color-mix(in srgb, var(--bs-body-color) 7%, transparent);
outline: none;
}
/* Acción DESTRUCTIVA: en rojo y separada por un filete de las demás, para que
no se confunda con ellas al recorrer el menú a la carrera. El filete solo
aparece si hay algo encima (`:not(:first-child)`): con una sola acción en el
menú, una línea suelta arriba sería ruido. */
.ui-menu__item--danger { color: var(--bs-danger); }
.ui-menu__item--danger:not(:first-child) {
margin-top: 0.25rem;
padding-top: 0.5rem;
border-top: 1px solid var(--bs-border-color);
border-radius: 0 0 7px 7px;
}
.ui-menu__item--danger:hover,
.ui-menu__item--danger:focus-visible {
background: color-mix(in srgb, var(--bs-danger) 12%, transparent);
}
/* Explicación cuando no hay ninguna acción posible (p. ej. sin estado "Hecha"
configurado): un texto tenue, no un botón muerto. */
.ui-menu__empty {
display: block;
padding: 0.45rem 0.6rem;
font-size: 0.82rem;
color: var(--bs-secondary-color);
}
/* ── 6. Botón de ícono ───────────────────────────────────────────────────────
Disparador compacto y CUADRADO para una acción secundaria representada solo
por un ícono (ajustes, "más"…). No es un `` de Bootstrap a
propósito: en una barra de acciones que se estira en móvil, un `.btn` se
ensancharía a todo el ancho; este conserva su tamaño. */
.ui-icon-btn {
flex-shrink: 0;
width: 2.125rem;
height: 2.125rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
color: var(--bs-body-color);
font-size: 0.95rem;
cursor: pointer;
transition:
background-color 120ms ease-out,
border-color 120ms ease-out,
color 120ms ease-out;
}
.ui-icon-btn:hover {
background: color-mix(in srgb, var(--bs-body-color) 5%, transparent);
}
.ui-icon-btn:focus-visible {
outline: 2px solid var(--bs-primary);
outline-offset: 1px;
}
/* Activo = su popover está abierto: tinte del acento, para que se lea que el
panel que cuelga de él le pertenece. */
.ui-icon-btn.is-on {
background: color-mix(in srgb, var(--bs-primary) 12%, var(--bs-body-bg));
border-color: color-mix(in srgb, var(--bs-primary) 45%, transparent);
color: var(--bs-primary);
}
/* ── 7. Popover anclado de ajustes ───────────────────────────────────────────
Panel flotante que CUELGA de su disparador (un `ui-icon-btn`), SIN JS de
posición: el disparador y el panel van dentro de un ancla `position: relative`
y el panel se ancla con `position: absolute`. Cierra con el MISMO backdrop
invisible del menú contextual (`ui-menu-backdrop`) — y, a diferencia de un
menú, NO se cierra al elegir dentro: es un panel de AJUSTES, se queda abierto
mientras se toca (patrón Linear/Todoist).
Es un CONTENEDOR QUE CRECE: se compone de secciones (`ui-popover__section`),
una por grupo de ajustes. Sumar un ajuste es una sección (o una fila) más,
cero refactor.
Anclaje/z-index calcados del menú contextual: el ancla no crea contexto de
apilado (sin z-index/opacity/transform), así que el panel (z 1051) gana al
backdrop fijo (z 1050) en el contexto raíz — mismo modelo verificado de
`ui-menu` + `ui-menu-backdrop`.
Uso:
*/
.ui-popover-anchor { position: relative; }
.ui-popover {
position: absolute;
top: calc(100% + 0.5rem);
inset-inline-end: 0; /* alineado al borde derecho del disparador */
z-index: 1051; /* sobre el ui-menu-backdrop (1050) */
width: 19rem;
max-width: min(19rem, 90vw); /* nunca se sale de la pantalla en móvil */
padding: 0.35rem;
border-radius: 13px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: 0 18px 48px -18px rgba(15, 23, 42, 0.4);
}
.ui-popover__head {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.5rem 0.6rem;
}
.ui-popover__head-icon {
color: var(--bs-secondary-color);
font-size: 0.85rem;
}
.ui-popover__title {
flex: 1 1 auto;
font-size: 0.9rem;
font-weight: 600;
}
.ui-popover__close {
flex-shrink: 0;
border: 0;
background: transparent;
color: var(--bs-secondary-color);
line-height: 1;
padding: 0.2rem;
border-radius: 6px;
cursor: pointer;
transition: background-color 110ms ease-out, color 110ms ease-out;
}
.ui-popover__close:hover,
.ui-popover__close:focus-visible {
background: color-mix(in srgb, var(--bs-body-color) 7%, transparent);
color: var(--bs-body-color);
outline: none;
}
/* Cada grupo de ajustes es una sección con su encabezado. El filete superior la
separa de la cabecera del panel (y a las secciones entre sí). */
.ui-popover__section {
padding: 0.6rem 0.5rem 0.4rem;
border-top: 1px solid var(--bs-border-color);
}
.ui-popover__eyebrow {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0 0 0.55rem;
font-size: 0.68rem;
font-weight: 650;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.ui-popover__label {
margin: 0 0 0.15rem;
font-size: 0.9rem;
font-weight: 550;
}
.ui-popover__help {
margin: 0 0 0.6rem;
font-size: 0.8rem;
line-height: 1.45;
color: var(--bs-secondary-color);
}
/* ── 8. Captura rápida ───────────────────────────────────────────────────────
Campo de una línea para AGREGAR un elemento a la lista que tiene debajo:
se escribe, Enter, y el foco se queda para encadenar capturas. Va siempre
pegado a su lista (mismo ancho, mismo radio, mismo filete) para que se lea
como la primera fila de esa lista y no como un formulario aparte.
Uso:
↵
El input NO lleva clase de Bootstrap a propósito: `.form-control` trae su
propio borde, sombra y anillo de foco, y aquí quien los pinta es el
CONTENEDOR (así el ícono y la pista ↵ quedan DENTRO del mismo campo, en vez
de flotando al lado de una caja). */
.ui-capture {
display: flex;
align-items: center;
gap: 0.6rem;
/* Mismo relleno horizontal que una fila de `ui-list`: el ícono cae en la
columna de la casilla y el texto arranca donde arrancan los títulos. */
padding: 10px var(--ui-capture-pad-x, 14px);
margin-bottom: 0.75rem;
border: 1px solid var(--bs-border-color);
border-radius: 14px;
background: var(--bs-body-bg);
transition:
border-color 130ms ease-out,
box-shadow 130ms ease-out;
}
/* El foco se pinta en el CONTENEDOR (`:focus-within`), no en el input: el campo
visible es toda la barra. Anillo del acento, mismo lenguaje que el resto. */
.ui-capture:focus-within {
border-color: color-mix(in srgb, var(--bs-primary) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 15%, transparent);
}
.ui-capture__icon {
flex-shrink: 0;
font-size: 0.8rem;
color: var(--bs-secondary-color);
transition: color 130ms ease-out;
}
.ui-capture:focus-within .ui-capture__icon { color: var(--bs-primary); }
.ui-capture__input {
flex: 1 1 auto;
min-width: 0;
border: 0;
padding: 0;
background: transparent;
color: var(--bs-body-color);
font-size: 0.95rem;
line-height: 1.4;
}
/* Sin anillo propio: lo pinta el contenedor (ver arriba). */
.ui-capture__input:focus { outline: none; }
.ui-capture__input::placeholder {
color: var(--bs-secondary-color);
opacity: 0.75;
}
/* Vista previa de la fecha reconocida en el texto. Violeta del acento y no el
índigo primario: es una LECTURA de lo que el sistema entendió, no un estado
del control, y así no compite con el anillo de foco. */
.ui-capture__date-chip {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.15rem 0.55rem;
border-radius: 999px;
font-size: 0.75rem;
white-space: nowrap;
color: #7c3aed;
background: color-mix(in srgb, #7c3aed 13%, transparent);
}
/* Pista de que Enter captura. Aparece solo con texto, así que en reposo el
campo queda limpio. */
.ui-capture__kbd {
flex-shrink: 0;
padding: 0.1rem 0.4rem;
border-radius: 6px;
border: 1px solid var(--bs-border-color);
background: color-mix(in srgb, var(--bs-body-color) 5%, transparent);
color: var(--bs-secondary-color);
font-size: 0.72rem;
line-height: 1.3;
}
/* Variante COMPACTA — la captura de subtareas dentro del panel de detalle.
Misma anatomía y mismos estados (es el mismo control), en la escala del
panel: no compite con la captura principal, que es el hero de la pantalla.
El fondo sólido de la base (`--bs-body-bg`) queda a propósito: sobre el
vidrio de la hoja móvil un campo de texto necesita asiento opaco, igual que
la rejilla de campos. */
/* Variante BÚSQUEDA — mismo control, sin el margen inferior propio (su fila ya
lo pone) y con la × de limpiar al final. Comparte anatomía con la captura a
propósito: en el archivo ocupa su mismo sitio, así que tiene que medir igual. */
.ui-capture--search { margin-bottom: 0; }
.ui-capture__clear {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--bs-secondary-color);
font-size: 0.75rem;
cursor: pointer;
transition: background-color 120ms ease-out, color 120ms ease-out;
}
.ui-capture__clear:hover {
color: var(--bs-body-color);
background-color: color-mix(in srgb, var(--bs-body-color) 10%, transparent);
}
.ui-capture__clear:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 25%, transparent);
}
/* El aspa nativa del `type=search` sobraría: ya hay una, y la del navegador no
avisa al servidor. */
.ui-capture__input::-webkit-search-cancel-button { display: none; }
.ui-capture--sub {
margin-bottom: 0;
padding: 7px 12px;
border-radius: 11px;
}
.ui-capture--sub .ui-capture__input { font-size: 0.88rem; }
.ui-capture--sub .ui-capture__icon { font-size: 0.72rem; }
/* ── 9. Detalle del ítem ─────────────────────────────────────────────────────
El panel de detalle que se abre DENTRO de la lista (TaskDetailPanel y quien
venga después). DOS presentaciones con el MISMO markup, decididas 100% por
CSS — cero JS, cero clases toggleadas desde el servidor:
· ESCRITORIO (≥md): el detalle NO es una tarjeta. Es una CONTINUACIÓN de
la fila — banda de ancho COMPLETO, sin borde ni sombra propios, con el
contenido alineado al TÍTULO de su fila y al borde derecho de sus metas.
(La primera versión ponía aquí una tarjeta con borde y sombra DENTRO de
la lista, que ya es una tarjeta: se leía superpuesta y su ancho no
coincidía con nada — medido, 2px fuera por la izquierda y 14px por la
derecha. Tarjeta dentro de tarjeta nunca; el detalle pertenece a la hoja.)
· MÓVIL ( del propio render, y
dejar ambos los duplicaría. Lo que sigue es la tipografía de ese contenido —
compacta, porque son notas de trabajo dentro de un panel, no un artículo. */
.ui-detail__notes {
margin: 0;
font-size: 0.9rem;
line-height: 1.6;
color: var(--bs-body-color);
overflow-wrap: break-word;
}
.ui-detail__notes > :first-child { margin-top: 0; }
.ui-detail__notes > :last-child { margin-bottom: 0; }
.ui-detail__notes p,
.ui-detail__notes ul,
.ui-detail__notes ol,
.ui-detail__notes blockquote,
.ui-detail__notes pre,
.ui-detail__notes table { margin: 0 0 0.5rem; }
.ui-detail__notes ul,
.ui-detail__notes ol { padding-inline-start: 1.25rem; }
/* Los títulos dentro de una nota son SEPARADORES de secciones cortas, no
titulares: apenas más grandes que el texto, en semibold. */
.ui-detail__notes h1,
.ui-detail__notes h2,
.ui-detail__notes h3,
.ui-detail__notes h4,
.ui-detail__notes h5,
.ui-detail__notes h6 {
margin: 0.75rem 0 0.35rem;
font-size: 0.95rem;
font-weight: 650;
line-height: 1.4;
}
/* El COLOR se fija a propósito: sin él, `code` hereda el rosa de Bootstrap
(3.82:1 en claro) y `pre` el gris FIJO que el tema compila (1.29:1 en
oscuro — invisible). La caja es lo que distingue al código, no su tinte. */
.ui-detail__notes code {
padding: 0.1em 0.35em;
border-radius: 5px;
color: var(--bs-body-color);
background-color: color-mix(in srgb, var(--bs-body-color) 8%, transparent);
font-size: 0.85em;
}
.ui-detail__notes pre {
padding: 0.6rem 0.75rem;
border-radius: 8px;
color: var(--bs-body-color);
background-color: color-mix(in srgb, var(--bs-body-color) 6%, transparent);
overflow-x: auto; /* el código ancho desplaza dentro de su caja, jamás el panel */
}
.ui-detail__notes pre > code { padding: 0; background: none; }
.ui-detail__notes blockquote {
padding-inline-start: 0.75rem;
border-inline-start: 3px solid color-mix(in srgb, var(--bs-body-color) 18%, transparent);
color: var(--bs-secondary-color);
}
.ui-detail__notes table { border-collapse: collapse; }
.ui-detail__notes th,
.ui-detail__notes td {
padding: 0.25rem 0.6rem;
border: 1px solid var(--bs-border-color-translucent);
text-align: start;
}
/* Las listas de chequeo (`- [ ]`) sin la viñeta duplicada al lado de la casilla. */
.ui-detail__notes .contains-task-list { list-style: none; padding-inline-start: 0.25rem; }
.ui-detail__notes .task-list-item input { margin-inline-end: 0.4rem; }
/* Las propiedades van en REJILLA, y es la rejilla la que da la coherencia: como
todos los campos se pintan siempre (tengan valor o no), cada dato cae en el
MISMO sitio en todas las tareas del espacio y el ojo lo encuentra sin releer
los rótulos.
La unidad base es estrecha (9 rem) y los campos que necesitan más piden DOS
celdas (`--wide`). Esa es la diferencia con la primera versión, que daba a
todos el mismo ancho: entonces "Baja" desperdiciaba 170 px de los 200 que
recibía mientras "22/07/2026 · Randolf Rincón Fadul" se partía en dos con los
mismos 200. Con base estrecha + dos tamaños, ni se desperdicia ni se parte, y
la posición sigue siendo estable — que es lo que una rejilla da y un reparto
por contenido no puede dar. */
.ui-detail__side {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
gap: 0.95rem 1.75rem;
align-content: start;
}
/* Los campos con listas dentro (contextos, personas, adjuntos) o con textos
largos (fechas con autor, recurrencia) ocupan DOS celdas. No la fila entera:
eso los dejaba solos con media banda vacía al lado. */
.ui-detail__field--wide { grid-column: span 2; }
/* Campo SIN valor: el guion queda tenue para que la lectura salte por encima
de lo vacío y se detenga en lo que sí tiene dato. */
.ui-detail__empty { color: var(--bs-secondary-color); opacity: 0.55; }
/* Filete de separación: solo cuando ARRIBA hay contenido que separar. */
.ui-detail__main:not(:empty) + .ui-detail__side {
padding-top: 1rem;
border-top: 1px solid var(--ui-detail-rule);
}
/* ── Campos ── */
.ui-detail__field {
display: grid;
gap: 0.3rem;
min-width: 0;
/* Anclado ARRIBA: sin esto el rótulo y su valor se separaban repartiéndose
el alto de la fila y dos campos vecinos quedaban desalineados. */
align-content: start;
}
/* Rótulo: versalitas pequeñas con tracking amplio. Da jerarquía sin recurrir al
peso (que competiría con el valor) ni al color fuerte. */
.ui-detail__label {
font-size: 0.65rem;
font-weight: 650;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--bs-secondary-color);
line-height: 1.2;
}
.ui-detail__value {
font-size: 0.86rem;
line-height: 1.4;
min-width: 0;
word-break: break-word;
}
/* Fila de valores que son pastillas o avatares (etiquetas, asignados). */
.ui-detail__chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
}
.ui-detail__person {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.84rem;
}
/* El ARCHIVO no es una lista de trabajo: un filete lo aparta de las tres del
ciclo GTD, para que el control no sugiera que hay cuatro sitios donde buscar
qué hacer. Mismo gesto que el separador del Logbook en Things. */
.ui-segmented--with-archive .ui-segmented__item:last-child {
margin-left: 0.3rem;
padding-left: calc(0.3rem + 0.65rem);
border-left: 1px solid var(--bs-border-color);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* ── Edición en el sitio (`ui-editable`) ──
Tocar un valor lo vuelve editable. La afordancia tiene que ser DISCRETA —el
panel se lee mucho más de lo que se edita, así que no puede parecer un
formulario— pero DESCUBRIBLE: al pasar por encima, el valor se asienta sobre
una superficie tenue y aparece un lápiz. En táctil no hay hover con el que
revelar nada, así que ahí el lápiz queda visible en tenue (misma solución
que el chevrón de las filas). */
.ui-editable { min-width: 0; }
/* El disparador NO parece un botón: es el mismo texto de siempre, alineado
igual, para que la lectura del panel no cambie por ser editable. */
.ui-editable__display {
display: flex;
align-items: center;
gap: 0.4rem;
width: 100%;
padding: 2px 6px;
margin: -2px -6px; /* el relleno no puede correr el valor de su sitio */
border: 0;
border-radius: 7px;
background: transparent;
color: inherit;
font: inherit;
text-align: inherit;
cursor: text; /* dice "aquí se escribe", no "aquí se navega" */
transition: background-color 120ms ease-out;
}
.ui-editable__display.is-static {
cursor: default;
padding: 0;
margin: 0;
}
.ui-editable__display:hover {
background-color: color-mix(in srgb, var(--bs-body-color) 6%, transparent);
}
.ui-editable__display:focus-visible {
outline: none;
background-color: color-mix(in srgb, var(--bs-primary) 10%, transparent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-primary) 45%, transparent);
}
.ui-editable__shown { min-width: 0; }
.ui-editable__pen {
flex-shrink: 0;
margin-left: auto;
font-size: 0.68rem;
color: var(--bs-secondary-color);
opacity: 0;
transition: opacity 120ms ease-out;
}
.ui-editable__display:hover .ui-editable__pen,
.ui-editable__display:focus-visible .ui-editable__pen { opacity: 0.8; }
/* Sin hover (táctil) el lápiz no se podría revelar: queda tenue y siempre. */
@media (hover: none) {
.ui-editable__pen { opacity: 0.45; }
}
/* El editor hereda la escala del panel: al abrirse, el valor no salta de
tamaño ni desplaza a sus vecinos de la rejilla. */
.ui-editable__input {
width: 100%;
padding: 3px 7px;
border: 1px solid color-mix(in srgb, var(--bs-primary) 55%, transparent);
border-radius: 7px;
background: var(--bs-body-bg);
color: var(--bs-body-color);
font: inherit;
line-height: 1.4;
}
.ui-editable__input:focus {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 15%, transparent);
}
.ui-editable__input--area {
resize: vertical;
min-height: 5rem;
white-space: pre-wrap;
}
/* El editor compuesto de fecha: día y hora caben en la misma línea y envuelven
cuando el campo es estrecho. */
.ui-editable__pair {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.ui-editable__pair .ui-editable__input { width: auto; flex: 1 1 8.5rem; }
.ui-editable__input--time { flex: 0 1 7rem; }
/* Las pestañas y la bandera comparten renglón: las pestañas ocupan lo que haya
y la bandera CIERRA la línea en su propia columna, sin encogerse nunca. */
.ui-detail__tabs-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.ui-detail__tabs-row > .ui-segmented { flex: 1 1 auto; min-width: 0; }
/* En la hoja móvil el título es EDITABLE y ocupa el ancho; la ✕ lo cierra. */
.ui-detail__head > .ui-editable { flex: 1 1 auto; min-width: 0; }
/* CHULO DE COMPLETAR de la cabecera de la hoja (móvil). Vive dentro de
`.ui-detail__head`, que en escritorio no se pinta, así que no hace falta
ninguna media query: donde el título ya está en la fila, este botón no
existe. 44 px porque es la guía táctil y porque es la acción principal de la
pantalla; el círculo y el verde son los MISMOS de la fila. */
.ui-detail__complete {
/* La forma la pone el círculo de estado compartido; aquí, la medida táctil
(44 px, la guía) y el aire para alinearlo con la primera línea del título. */
width: 44px;
height: 44px;
margin-top: -0.15rem;
font-size: 1rem;
}
.ui-detail__complete:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-success) 32%, transparent);
}
/* La previsualización en verde solo con puntero: en táctil el hover se queda
pegado y el círculo parecería completado sin estarlo (la misma trampa que se
corrigió en el chulo de la fila). */
@media (hover: hover) and (pointer: fine) {
.ui-detail__complete:not(.is-done):hover {
border-color: var(--bs-success);
background: var(--bs-success);
color: #fff;
}
}
/* Objetivo GRANDE y a la mano: marcar es un gesto de priorización que se hace
al vuelo, y con el dedo. En reposo es discreto (sin borde ni relleno) para no
competir con el título; encendido toma el ámbar de "marcada". */
.ui-detail__flag-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.125rem;
height: 2.125rem;
border: 0;
border-radius: 9px;
background: transparent;
color: var(--bs-secondary-color);
font-size: 0.95rem;
opacity: 0.5;
cursor: pointer;
transition: opacity 120ms ease-out, background-color 120ms ease-out, color 120ms ease-out;
}
.ui-detail__flag-btn:hover { opacity: 1; background-color: color-mix(in srgb, var(--bs-body-color) 6%, transparent); }
.ui-detail__flag-btn:focus-visible {
outline: none;
opacity: 1;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 25%, transparent);
}
/* MARCADA: el mismo ámbar que ya usa el resto del panel para la prioridad. */
.ui-detail__flag-btn.is-on {
opacity: 1;
color: var(--ui-detail-flag, #b45309);
background-color: color-mix(in srgb, var(--ui-detail-flag, #b45309) 12%, transparent);
}
/* Sin permiso es una LECTURA, no un control. */
.ui-detail__flag-btn.is-static { cursor: default; }
/* El TÍTULO encabeza el contenido: es el único valor del panel con peso propio. */
/* Notas vacías: invitan a escribir sin fingir que hay contenido. */
.ui-detail__notes.is-placeholder {
color: var(--bs-secondary-color);
opacity: 0.7;
font-style: italic;
}
/* ── Valores de MUCHOS: etiquetas y personas ──
No abren editor (no hay UN valor que reemplazar): cada pastilla trae su × y
al final va el control para agregar otra. La × se revela al pasar por encima
de SU pastilla — mostrarlas todas a la vez convertiría el campo en una fila
de botones de borrar. */
.ui-detail__chip-x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
margin-left: 0.15rem;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: inherit;
font-size: 0.6rem;
line-height: 1;
cursor: pointer;
opacity: 0;
transition: opacity 120ms ease-out, background-color 120ms ease-out;
}
.ui-detail__tag:hover .ui-detail__chip-x,
.ui-detail__person:hover .ui-detail__chip-x,
.ui-detail__chip-x:focus-visible { opacity: 0.75; }
.ui-detail__chip-x:hover {
opacity: 1;
background-color: color-mix(in srgb, currentColor 18%, transparent);
}
/* Sin hover (táctil) no hay forma de revelarla: queda tenue y siempre. */
@media (hover: none) {
.ui-detail__chip-x { opacity: 0.5; }
}
/* El control de "agregar otra": discreto, del tamaño de las pastillas que
acompaña, para que el campo se siga leyendo como una lista y no como un
formulario. */
.ui-detail__chip-add {
min-width: 0;
max-width: 11rem;
padding: 2px 8px;
border: 1px dashed var(--bs-border-color);
border-radius: 999px;
background: transparent;
color: var(--bs-secondary-color);
font-size: 0.78rem;
line-height: 1.5;
}
.ui-detail__chip-add:focus {
outline: none;
border-style: solid;
border-color: color-mix(in srgb, var(--bs-primary) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 15%, transparent);
color: var(--bs-body-color);
}
/* ── Adjuntos (`ui-attach`) ──
El último campo de la rejilla, y el único que no es un dato sino un ESPACIO:
se le sueltan archivos encima o se hace clic para elegirlos. Cierra el panel
ocupando la fila entera. */
/* La FILA ENTERA, siempre. Es el último campo y el único que crece con el uso:
con dos celdas se quedaba en ~415px —donde no caben dos tarjetas— y cada
adjunto se comía un renglón dejando el resto del ancho vacío. */
.ui-attach {
grid-column: 1 / -1;
display: grid;
gap: 0.6rem;
}
/* Lo YA subido, en rejilla fluida: varios por renglón cuando hay ancho, uno
cuando no, sin una sola media query. Cada uno se reconoce por el ícono de su
tipo antes de leer el nombre. */
/* Rejilla de DOCE columnas, y cada adjunto ocupa TRES (decisión de Randolf,
2026-07-25): cuatro por renglón en escritorio y dos en móvil (seis de doce).
Ancho FIJO y no por contenido — medir el contenido hacía que "Fondo.jpg"
ocupara una tarjeta diminuta y el renglón quedara desparejo; y por debajo de
tres columnas no cabe nada legible. Un nombre que no quepa se recorta y se
lee entero en el tooltip. */
.ui-attach__list {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 0.4rem;
margin: 0;
padding: 0;
list-style: none;
}
/* EN EL PANEL DE UNA HISTORIA van DOS por renglón, no cuatro: su diálogo mide
~640 px (contra la columna ancha del inspector de tareas), así que con cuatro
el nombre se quedaba en 14-26 px — medido en el banco (2026-08-04). Y el
nombre es justamente lo que dice qué es el archivo. */
.ui-attach--story .ui-attach__item { grid-column: span 6; }
.ui-attach__item {
grid-column: span 3;
min-width: 0;
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
padding: 0.35rem 0.5rem;
border: 1px solid var(--bs-border-color);
border-radius: 10px;
background: var(--bs-body-bg);
transition: border-color 120ms ease-out, background-color 120ms ease-out;
}
.ui-attach__item:hover {
border-color: color-mix(in srgb, var(--bs-primary) 40%, var(--bs-border-color));
}
.ui-attach__link {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
flex: 1 1 auto;
color: inherit;
text-decoration: none;
}
.ui-attach__icon {
flex-shrink: 0;
font-size: 1rem;
color: var(--bs-secondary-color);
}
/* El nombre es lo que se busca, así que se queda con todo el ancho sobrante y
se recorta con puntos suspensivos — nunca parte la tarjeta en dos renglones.
El nombre completo vive en el `title`. */
.ui-attach__name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.84rem;
}
.ui-attach__size {
flex-shrink: 0;
font-size: 0.72rem;
color: var(--bs-secondary-color);
font-variant-numeric: tabular-nums;
}
/* Botón PROPIO, no la × minúscula de las pastillas: aquella medía 14px y se
revelaba por hover —invisible con ratón e imposible de acertar con el dedo—.
Aquí es un objetivo de 28px y ROJO DESDE EL REPOSO (decisión de Randolf):
borrar un adjunto es destructivo, así que el color lo dice desde el primer
vistazo, sin esperar a que alguien pase el cursor —cosa que en táctil no
ocurre nunca—. Al apuntarlo sube al danger PLENO (fondo sólido, glifo
blanco): el color ya avisaba, y el hover confirma que se va a ejecutar. */
.ui-attach__remove {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
padding: 0;
border: 0;
border-radius: 7px;
background-color: color-mix(in srgb, var(--bs-danger) 12%, transparent);
/* `--bs-danger` puro da 2.6:1 sobre el tinte de su propio fondo — medido en
el banco (2026-08-04) al estrenar el bloque en el panel de historia. Es la
MISMA fórmula que ya corrigió los mensajes de validación: oscurecer en
claro y ACLARAR en oscuro, porque un `color-mix` no rinde igual en los dos
temas. El rojo se sigue leyendo rojo, que es lo que tiene que decir. */
color: color-mix(in srgb, var(--bs-danger) 75%, #000);
font-size: 0.8rem;
line-height: 1;
cursor: pointer;
transition: background-color 120ms ease-out, color 120ms ease-out;
}
.ui-attach__remove:hover {
color: #fff;
background-color: var(--bs-danger);
}
/* El teclado llega al mismo sitio que el ratón: mismo danger pleno, con su
anillo para que se vea DÓNDE está el foco. */
.ui-attach__remove:focus-visible {
outline: none;
color: #fff;
background-color: var(--bs-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-danger) 30%, transparent);
}
/* LA ZONA. Punteada en reposo (dice "aquí cabe algo") y encendida en el acento
mientras hay un arrastre encima. El se dibujaría sobre toda
la superficie estirada y se vería como un rectángulo suelto. */
.ui-card:focus-within {
outline: 2px solid var(--bs-primary);
outline-offset: 2px;
}
.ui-card:focus-within .stretched-link:focus-visible {
outline: none;
}
@media (prefers-reduced-motion: reduce) {
.ui-card { transition: none; }
.ui-card:hover { transform: none; }
}
/* La cabecera: identidad a la izquierda, lo que quepa a la derecha. */
.ui-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
/* min-width:0 es lo que permite que el nombre se recorte: sin él, un hijo de
flex se niega a encoger por debajo de su contenido y el recorte no ocurre. */
.ui-card__ident {
min-width: 0;
flex: 1;
}
.ui-card__title {
display: block;
font-size: 1rem;
font-weight: 650;
line-height: 1.3;
color: var(--bs-body-color);
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
.ui-card__title:hover { color: var(--bs-primary); }
}
.ui-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
/* 85% del color del cuerpo y no `--bs-secondary-color`: ese token da 4.1:1
en oscuro, por debajo del 4.5 que exige un texto pequeño (medido). */
color: color-mix(in srgb, var(--bs-body-color) 85%, transparent);
min-width: 0;
}
.ui-card__meta-item {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-inline-size: 100%;
}
/* Encabezado de GRUPO: se lee como una sección, no como una etiqueta suelta —
por eso el filete se extiende hasta el final de la fila. */
.ui-cards__group {
margin-block: 1.75rem 0.85rem;
display: flex;
align-items: baseline;
gap: 0.6rem;
}
.ui-cards__group:first-child {
margin-block-start: 0;
}
.ui-cards__group-name {
font-size: 0.95rem;
font-weight: 650;
color: var(--bs-body-color);
}
.ui-cards__group-count {
font-size: 0.78rem;
color: color-mix(in srgb, var(--bs-body-color) 85%, transparent);
}
.ui-cards__group-rule {
flex: 1;
height: 1px;
background: var(--bs-border-color);
}
/* ESQUELETO de carga con la FORMA de las tarjetas, no una rueda centrada: así
el layout ya está puesto y lo único que cambia es que se llena. Estático a
propósito — una animación infinita repinta sin parar, defecto ya corregido
una vez en este repo. */
.ui-card-skeleton {
border: 1px solid var(--bs-border-color);
border-inline-start: 4px solid var(--bs-border-color);
border-radius: 14px;
padding: 1rem 1.1rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.ui-card-skeleton__line {
display: block;
height: 0.7rem;
border-radius: 4px;
background: color-mix(in srgb, var(--bs-body-color) 8%, transparent);
}
.ui-card-skeleton__line--title { height: 1rem; width: 60%; }
.ui-card-skeleton__line--meta { width: 40%; }
.ui-card-skeleton__line--body { width: 85%; }
/* La línea de resumen ("5 productos"). Clase propia y no `.text-muted`: esa
utilidad de Bootstrap resuelve a `--bs-secondary-color`, que mide 4.12 en
oscuro — texto pequeño exige 4.5— y lleva `!important`, así que no se puede
corregir sin tocarla globalmente. */
.ui-cards__summary {
font-size: 0.8rem;
color: color-mix(in srgb, var(--bs-body-color) 85%, transparent);
}
/* ── 25. Actores / personas (`ui-actor`) ─────────────────────────────────────
El AVATAR de un actor: círculo de color con su ícono de persona en blanco —
la lectura de un vistazo de "quién ejecuta esto" (referencia funcional: las
personas de Avion). El color es un DATO del actor y viaja inline
(`--actor-color`); el catálogo de íconos vive en Shared (ActorIcons) para
que todas las superficies pinten lo mismo.
Tres tamaños: el de gestión (cabina, 32px), el de la franja del mapa (28px)
y la mini-carita de la card (18px). El glifo blanco sobre el color de la
paleta curada mide ≥4.6:1 en sus tonos más claros — y es un elemento
GRÁFICO (3:1), no texto. */
.ui-actor {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--actor-color, var(--bs-primary));
color: #fff;
font-size: .85rem;
flex-shrink: 0;
}
.ui-actor--sm { width: 28px; height: 28px; font-size: .75rem; }
/* La mini-carita de la CARD: se apilan solapadas (patrón avatar-stack) con un
aro del color del fondo de la card para separarse entre sí. */
.ui-actor--mini {
width: 18px;
height: 18px;
font-size: .55rem;
box-shadow: 0 0 0 2px var(--bs-body-bg);
}
/* ── La fila de gestión (cabina): avatar + nombre + presencia + herramientas ─ */
.ui-actors {
display: flex;
flex-direction: column;
gap: .35rem;
}
/* LA FILA ENVUELVE, y eso NO es un detalle estético (reportado por Randolf,
2026-08-04: "en pantalla grande no se ven los nombres de los actores").
Mete cuatro cosas en una línea —avatar, nombre, el toggle de presencia y dos
botones— y el NOMBRE era lo único que podía ceder, porque es lo único con
`min-width: 0`. Medido con el sidebar puesto: a 1280 de viewport la columna
queda en 341 px y el nombre en 25 — ilegible.
El arreglo NO es un breakpoint: `col-lg-4` ya decide por VIEWPORT ignorando
que el sidebar se lleva 250 px (la trampa que /tasks documentó), así que otro
umbral heredaría el mismo error. Con `flex-wrap` + un suelo de ancho para el
nombre, el reparto se resuelve solo EN CUALQUIER ancho: cuando cabe todo va en
una línea, y cuando no, los controles bajan a la segunda. Sin umbral que
mantener. */
.ui-actors__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .6rem;
padding: .4rem .5rem;
border: 1px solid var(--bs-border-color);
border-radius: 10px;
background: var(--bs-body-bg);
}
.ui-actors__name {
font-weight: 600;
font-size: .875rem;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* EL NOMBRE NO SE ENCOGE — esa es toda la regla, y no un umbral. Con
`flex-shrink` el navegador lo estruja antes que envolver, y así es como
acababa en 25 px (medido con el sidebar puesto: dos letras y puntos
suspensivos). Con `0 0 auto` su base es el ancho del texto y no cede: si el
conmutador y los botones ya no caben al lado, BAJAN ellos.
Un suelo fijo (probé 10rem y 9rem) no sirve para esto: apila filas que caben
de sobra —un "Webmaster" quedaba en dos renglones— y aun así recorta los
nombres que superan el umbral. Sin número que calibrar, el reparto sale bien
en cualquier ancho: corto → una línea; largo → dos, con el nombre entero.
`max-width: 100%` es el tope del caso extremo: un nombre kilométrico ocupa su
línea completa y ahí sí se recorta con ellipsis, en vez de desbordar. */
.ui-actors__grow { flex: 0 0 auto; min-width: 0; max-width: 100%; }
.ui-actors__tools {
display: inline-flex;
gap: .25rem;
flex-shrink: 0;
}
/* ── La franja del mapa: los actores del sistema, clicables como LENTE ──────
Cada avatar es un : clic = atenuar las historias que ese actor NO
ejecuta (el criterio lente de /tasks — atenuar, no quitar: quitar movería
celdas y stats debajo del usuario). */
/* La fila de LENTES del mapa: separa "cómo se ve" (aquí) de "qué se crea"
(las acciones del header). El display lo ponen las utilidades d-none
d-md-flex — la fila solo existe donde existe el mapa. */
.ui-storymap-filters {
align-items: center;
gap: .75rem;
flex-wrap: wrap;
margin-block-end: .75rem;
}
.ui-actor-strip {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .35rem;
}
.ui-actor-strip__btn {
border: 2px solid transparent;
border-radius: 50%;
padding: 1px;
background: none;
line-height: 0;
cursor: pointer;
}
.ui-actor-strip__btn:focus-visible {
outline: 2px solid var(--bs-primary);
outline-offset: 2px;
}
/* El lente activo se marca con un ARO del acento — el avatar no cambia de
color (su color es identidad, no estado). */
.ui-actor-strip__btn.is-on {
border-color: var(--bs-primary);
}
/* La card que el lente deja fuera: presente pero atenuada (criterio /tasks). */
.ui-storymap__card.is-lens-out { opacity: .35; }
/* Las mini-caritas dentro de la card, al pie: solapadas hacia la izquierda. */
.ui-actor-stack {
display: inline-flex;
padding-inline-start: 4px;
}
.ui-actor-stack .ui-actor--mini { margin-inline-start: -6px; }
/* ── El selector de avatar del modal (rejilla de íconos, patrón del selector
de tipo de dominio): el elegido lleva el aro del acento. ─────────────── */
.ui-actor-picker {
display: flex;
flex-wrap: wrap;
gap: .4rem;
}
.ui-actor-picker__opt {
border: 2px solid transparent;
border-radius: 50%;
padding: 1px;
background: none;
line-height: 0;
cursor: pointer;
}
.ui-actor-picker__opt.is-on { border-color: var(--bs-primary); }
.ui-actor-picker__opt:focus-visible {
outline: 2px solid var(--bs-primary);
outline-offset: 2px;
}
/* ── LA CABINA DE UN PRODUCTO (`ui-cockpit`) ───────────────────────────────
Dos zonas: la de REFERENCIA (ficha del producto y sus actores) y la de
CONTENIDO (los dominios, que es a lo que se entra).
NO usa `col-lg-4 / col-lg-8`, y por una razón medida (reportado por Randolf
con captura, 2026-08-04: "todo ese espacio y eso tan básico no se hizo"). Las
columnas de Bootstrap reparten por PORCENTAJE del viewport, así que con el
sidebar puesto la de referencia caía a ~340 px: la descripción se partía en
cuatro renglones, el texto de ayuda en seis y la fila del actor se apilaba
entera — todo ello con media pantalla vacía al lado, porque el bloque de
dominios se quedaba con 2/3 aunque tuviera UNA tarjeta.
Aquí el reparto lo decide el CONTENIDO: la referencia pide el ancho en el que
sus campos y sus filas se leen (`flex-basis`), y el contenido se lleva TODO lo
que sobre (`flex-grow` desproporcionado). Cuando ya no caben las dos, envuelven
solas — sin un umbral de viewport que mantener, que es el error que este
layout tenía y que /tasks ya había documentado. */
.ui-cockpit {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 1rem;
}
/* El ancho en el que la ficha y las filas de actor se leen de verdad: por
debajo de 24rem el nombre del actor vuelve a competir con su conmutador, y
por encima de 32rem la referencia le robaría sitio a lo que de verdad se
consulta. */
.ui-cockpit__aside {
flex: 1 1 24rem;
max-width: 32rem;
min-width: 0;
}
/* `flex-grow` desproporcionado: mientras compartan renglón, el sobrante entero
se va a los dominios y la referencia se queda en su base. Al envolver, ambos
toman el 100 % por su `flex-basis`. */
.ui-cockpit__main {
flex: 999 1 26rem;
min-width: 0;
}
/* ── AURA AMBIENTAL DE PANTALLA (`ui-ambient`) ─────────────────────────
El fondo de la app. Nació en /work/tasks como `work-next-layout` y para
cuando se mudó aquí ya lo usaban trece pantallas de CUATRO módulos
(tareas, proyectos, clientes y parametrización): era transversal de facto
con nombre de módulo, que es justo lo que este archivo existe para evitar.
Se sube al pedirlo Randolf para el módulo de software (2026-08-04) — mismo
camino que siguió `ui-card` cuando le apareció el segundo consumidor.
Lo de abajo es el porqué original, que no cambia: ────────────────────────────────────────
`isolation` crea el stacking context SIN elevar nada: el aura (::before con
z-index -1) queda detrás del contenido DENTRO del layout, y el contenido
conserva z-index auto — jamás puede pintar encima del topbar/sidebar del
shell (bug reportado por Randolf 2026-07-18: la primera versión elevaba las
áreas del grid con z-index:1 y al hacer scroll el contenido se superponía).
El aura es un FONDO DE PANTALLA, no decoración del contenido: `position:
fixed` la ancla al VIEWPORT, así que no crece ni encoge según cuánto
contenido haya, y las superficies de vidrio (backdrop-filter) la difuminan
al pasar por encima durante el scroll — el frosted real. El ::before es
estático: nada anima. */
.ui-ambient {
position: relative;
isolation: isolate;
}
.ui-ambient::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(42rem 26rem at 24% 8%,
color-mix(in srgb, var(--bs-primary) 10%, transparent), transparent 70%),
radial-gradient(36rem 22rem at 86% 14%,
color-mix(in srgb, #8b5cf6 8%, transparent), transparent 70%),
radial-gradient(32rem 20rem at 52% 44%,
color-mix(in srgb, #38bdf8 6%, transparent), transparent 72%),
radial-gradient(26rem 16rem at 78% 60%,
color-mix(in srgb, #fb7185 5%, transparent), transparent 70%),
radial-gradient(38rem 24rem at 26% 88%,
color-mix(in srgb, #8b5cf6 7%, transparent), transparent 70%),
radial-gradient(32rem 20rem at 84% 92%,
color-mix(in srgb, var(--bs-primary) 7%, transparent), transparent 70%);
}
[data-bs-theme=dark] .ui-ambient::before {
background:
radial-gradient(42rem 26rem at 24% 8%,
color-mix(in srgb, var(--bs-primary) 14%, transparent), transparent 70%),
radial-gradient(36rem 22rem at 86% 14%,
color-mix(in srgb, #8b5cf6 11%, transparent), transparent 70%),
radial-gradient(32rem 20rem at 52% 44%,
color-mix(in srgb, #38bdf8 6%, transparent), transparent 72%),
radial-gradient(26rem 16rem at 78% 60%,
color-mix(in srgb, #fb7185 6%, transparent), transparent 70%),
radial-gradient(38rem 24rem at 26% 88%,
color-mix(in srgb, #8b5cf6 9%, transparent), transparent 70%),
radial-gradient(32rem 20rem at 84% 92%,
color-mix(in srgb, var(--bs-primary) 11%, transparent), transparent 70%);
}