/* ============================================================================
   CSS del módulo de TRABAJO — las piezas que NO son controles transversales
   ----------------------------------------------------------------------------
   Aquí vivía la pantalla ANTERIOR de tareas (`/tasks`): su árbol con teclado, su
   riel de vistas, su inspector, su tablero, el modo Enfoque y el repaso en
   asistente. Esa pantalla se ELIMINÓ —la reemplazó `/work/tasks`, que es cero-JS
   y una consulta por interacción— y con ella se fueron 86 de las 92 clases que
   este archivo declaraba, incluido el `.work-tasks-layout` que las sostenía.

   Lo que queda es lo que de verdad usa alguien:

     · el selector de color de la paleta curada (proyectos y estados de tarea);
     · el menú de vidrio y la captura rápida GLOBAL del shell (`work-qa`);
     · la medida del anillo de progreso (`ProgressRing`);
     · el PORTAFOLIO de proyectos (`work-portfolio`, `work-project-card`).

   Los controles de la pantalla nueva (listas, pastillas, tablero, mapa de carga,
   hoja de detalle…) NO están aquí: viven en `controls.css` con prefijo `ui-`, que
   es el archivo transversal. Al añadir CSS, la pregunta es si sirve a CUALQUIER
   vista (controls.css) o solo al módulo de trabajo (aquí).
   ==========================================================================*/

/* ── Selector de color de la paleta curada ────────────────────────────────
   Lo comparten el editor de proyectos y el de estados de tarea. */

.work-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 150ms ease-out, border-color 150ms ease-out;
}

.work-color-swatch:hover {
    transform: scale(1.1);
}

.work-color-swatch--selected {
    border-color: var(--bs-body-color);
}

/* ── Anillo de progreso ───────────────────────────────────────────────────
   Un `<svg>` con `viewBox` y sin medida propia se estira a todo el ancho que le
   den, así que la medida es obligatoria aquí. */

.work-project-progress-ring {
    width: 40px;
    height: 40px;
}

.work-project-progress-ring circle {
    transition: stroke-dashoffset 300ms ease-out;
}

/* ── Menú de vidrio ───────────────────────────────────────────────────────
   Con valores literales (no tokens del módulo): lo usan superficies que viven
   FUERA de cualquier layout del módulo y no heredarían las variables. */

.work-glass-menu {
    border: 1px solid color-mix(in srgb, var(--bs-body-color) 11%, transparent);
    border-radius: 12px;
    padding: 0.4rem;
    background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 16px 40px -16px rgba(15, 23, 42, 0.25);
}

[data-bs-theme=dark] .work-glass-menu {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 40px -16px rgba(0, 0, 0, 0.55);
}

.work-glass-menu .dropdown-item {
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
    font-size: 0.875rem;
}

/* ── Captura rápida GLOBAL (el modal del atajo del shell) ─────────────────── */

.work-qa .modal-content { border-radius: 16px; }

.work-qa__project { max-width: 60%; }

.work-qa__due { width: auto; }


/* ── Portafolio de proyectos (`/projects`) ─────────────────────────────────
   La rejilla de tarjetas y la tarjeta misma. La tarjeta no es un adorno: su
   trabajo es responder "¿este proyecto va bien?" de un vistazo, así que la
   jerarquía visual va de arriba abajo — identidad (color + nombre), señales
   de salud, y el frente de trabajo (las próximas acciones).

   TODA LA TARJETA ES CLICABLE sin ser un botón gigante: el NOMBRE es el
   enlace y se estira sobre la tarjeta con `.stretched-link` de Bootstrap. Así
   hay UN solo elemento enfocable por tarjeta (y con nombre accesible de
   verdad, no un `div role=button`), y los enlaces de las próximas acciones
   —que necesitan su propio clic— se elevan por encima con `position:
   relative`. Un `<a>` dentro de otro `<a>` sería HTML inválido; esto no. */

.work-portfolio {
    display: grid;
    /* auto-fill + minmax: la rejilla decide cuántas columnas caben, sin media
       queries propias. 20rem es el ancho por debajo del cual el título y una
       próxima acción empiezan a truncarse de más. */
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem;
    align-items: start;
}

.work-portfolio__group {
    margin-block: 1.75rem 0.85rem;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.work-portfolio__group:first-child {
    margin-block-start: 0;
}

.work-portfolio__group-name {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--bs-body-color);
}

.work-portfolio__group-count {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

/* El filete que separa el grupo del anterior: se extiende hasta el final de
   la fila para leerse como un encabezado de sección, no como una etiqueta. */
.work-portfolio__group-rule {
    flex: 1;
    height: 1px;
    background: var(--bs-border-color);
}


/* EL MARCO DE LA TARJETA VIVE EN `ui-card` (controls.css §24) — aquí quedan
   solo las piezas del módulo. Subió allá al aparecer su segundo consumidor
   (`/software`): si dos pantallas necesitan la misma regla no se copia, se
   comparte. Los componentes llevan `class="ui-card work-project-card ..."`.

   PENDIENTE conocido: `__head`, `__ident`, `__title` y `__meta` de abajo son
   gemelos de sus `ui-card__*`. No se migraron porque esas clases las usan
   ProjectCard y CustomerCard y las SELECCIONAN sus pruebas; el día que se
   toquen, el rename es mecánico y el test lo caza al instante.

   Un proyecto con algo mal lo dice ANTES de que se lean sus pastillas: el
   borde tomado del rojo del tema se percibe de un barrido, y no compite con
   el filete de identidad porque están en lados distintos de la caja. */
.work-project-card.is-attention {
    border-color: color-mix(in srgb, var(--bs-danger) 32%, var(--bs-border-color));
}


.work-project-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 y el cliente se recorten: sin
   él, un hijo de flex no encoge por debajo de su contenido. */
.work-project-card__ident {
    flex: 1;
    min-width: 0;
}

.work-project-card__title {
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--bs-body-color);
    text-decoration: none;
    /* Dos líneas y puntos suspensivos: el nombre es lo que identifica la
       tarjeta, así que se le da aire, pero un nombre kilométrico no puede
       empujar las señales fuera del primer vistazo. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.work-project-card__title:hover {
    color: var(--bs-primary);
}

.work-project-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    color: var(--bs-secondary-color);
    min-width: 0;
}

.work-project-card__customer {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 12rem;
}

/* El anillo no debe encogerse cuando el título ocupa dos líneas. */
.work-project-card__ring {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.work-project-card__ring-label {
    font-size: 0.68rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.work-project-card__signals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}


/* ── Próximas acciones ──
   Es lo que convierte la tarjeta en algo con lo que se trabaja: no dice que el
   proyecto TENGA acciones, muestra CUÁLES son. Cada una enlaza a su tarea. */

.work-project-card__actions {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--bs-border-color);
    padding-top: 0.7rem;
}

.work-project-card__action {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

/* Por encima del enlace estirado del título: sin esto, el clic sobre una
   próxima acción abriría el proyecto en vez de la tarea. */
.work-project-card__action-link {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    font-size: 0.83rem;
    color: var(--bs-body-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-project-card__action-link:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

.work-project-card__action-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bs-body-color) 30%, transparent);
}

.work-project-card__more {
    font-size: 0.76rem;
    color: var(--bs-secondary-color);
}

.work-project-card__empty {
    font-size: 0.83rem;
    color: var(--bs-secondary-color);
}


/* ── Destacar (estrella) ──────────────────────────────────────────────────
   SIEMPRE visible, nunca revelada al pasar el cursor: en táctil no hay hover y
   una acción que solo aparece con ratón es una función que la mitad de los
   usuarios no descubre. Apagada es un contorno tenue; encendida, ámbar sólido.

   Dentro de una tarjeta va POR ENCIMA del enlace estirado del nombre — sin el
   `position: relative`, destacar abriría el proyecto. */

.work-star {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 32px: objetivo cómodo con el dedo sin competir con el anillo. */
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--bs-secondary-color);
    /* 0.8 y no menos: MEDIDO, por debajo de eso la estrella apagada cae a ~2.2:1
       efectivos sobre la tarjeta en oscuro, y un control interactivo pide 3:1.
       Sigue leyéndose como "apagada" frente al ámbar sólido de la encendida. */
    opacity: 0.8;
    transition: opacity 140ms ease, color 140ms ease, background-color 140ms ease;
}

.work-star.is-on {
    color: var(--bs-warning-text-emphasis);
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    .work-star:hover {
        opacity: 1;
        background: color-mix(in srgb, var(--bs-body-color) 7%, transparent);
    }
}

.work-star:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    opacity: 1;
}

/* La estrella del encabezado del bloque de destacados: es decoración del
   rótulo, no un control. */
.work-portfolio__group-star {
    color: var(--bs-warning-text-emphasis);
}


/* ── Portafolio en TABLA ──────────────────────────────────────────────────
   Densidad para decenas o cientos de proyectos. Se apoya en `.table` del tema
   (rayado, hover, responsive) y solo añade lo que la tabla del tema no tiene:
   el encabezado ordenable, la identidad del proyecto y la barra de progreso. */

.work-portfolio-table {
    /* La tabla del tema es transparente; sobre el aura del módulo el texto
       necesita una superficie para leerse. */
    background: var(--bs-body-bg);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 0;
}

.work-portfolio-table thead th {
    font-size: 0.74rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    border-bottom-color: var(--bs-border-color);
}

/* El encabezado ordenable es un BOTÓN dentro del th: se alcanza con teclado sin
   inventar tabindex ni roles, y el lector anuncia la acción en vez de leer una
   celda muda. */
.work-portfolio-table__sort {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}

.work-portfolio-table__sort.is-active {
    color: var(--bs-primary);
}

@media (hover: hover) and (pointer: fine) {
    .work-portfolio-table__sort:hover { color: var(--bs-primary); }
}

.work-portfolio-table__sort:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.work-portfolio-table__star { width: 44px; }

/* El punto de color es la identidad del proyecto, la misma que en la tarjeta
   lleva el filete lateral. */
.work-portfolio-table__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-inline-end: 0.5rem;
    vertical-align: middle;
}

.work-portfolio-table__name {
    font-weight: 600;
    color: var(--bs-body-color);
    text-decoration: none;
}

.work-portfolio-table__name:hover { color: var(--bs-primary); }

.work-portfolio-table__code,
.work-portfolio-table__muted {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

.work-portfolio-table__code { margin-inline-start: 0.45rem; }

.work-portfolio-table__signals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

/* "Al día" NO es una pastilla: si lo fuera competiría visualmente con las
   señales reales, que son lo único que debe saltar en un barrido de la columna. */
.work-portfolio-table__ok {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

.work-portfolio-table__progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.work-portfolio-table__bar {
    display: inline-block;
    width: 56px;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bs-body-color) 12%, transparent);
    overflow: hidden;
}

.work-portfolio-table__bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--bs-primary);
}

/* La próxima acción no puede estirar la fila: se recorta y el título completo
   queda en el tooltip. */
.work-portfolio-table__action {
    display: inline-block;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--bs-body-color);
    text-decoration: none;
}

.work-portfolio-table__action:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

/* Una fila que pide atención se marca por el borde de inicio, no tiñendo el
   fondo entero: el rayado y el hover del tema tienen que seguir leyéndose. */
.work-portfolio-table__row--attention td:first-child {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--bs-danger) 55%, transparent);
}


/* ── Remate inferior del portafolio ───────────────────────────────────────
   El `.footer` del tema es `position: absolute` de 60 px y vive FUERA del
   contexto de apilado del módulo, así que el contenido NO lo empuja: la última
   tarjeta (o la última fila de la tabla) queda pegada contra él. El colchón hay
   que ponerlo a mano — misma causa y mismo remedio que el pie de los pasos del
   repaso. 5.5rem deja aire holgado por encima de esos 60 px. */

.work-portfolio-page {
    padding-block-end: 5.5rem;
}


/* ── Esqueleto del portafolio ─────────────────────────────────────────────
   Ocupa el sitio de una tarjeta mientras no hay nada que mostrar. ESTÁTICO: sin
   brillo animado, porque una animación infinita repinta sin parar — el defecto
   que ya se corrigió una vez en este módulo. Su trabajo no es entretener sino
   que el layout esté puesto antes de que llegue el contenido, para que la
   pantalla se LLENE en vez de saltar. */

.work-project-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--bs-border-color);
    border-inline-start: 4px solid color-mix(in srgb, var(--bs-body-color) 12%, transparent);
    border-radius: 14px;
    background: var(--bs-body-bg);
}

.work-project-skeleton__line {
    display: block;
    height: 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bs-body-color) 9%, transparent);
}

.work-project-skeleton__line--title { height: 1rem; width: 70%; }
.work-project-skeleton__line--meta  { width: 45%; }
.work-project-skeleton__line--body  { width: 90%; }


/* ── LA CABINA DEL PROYECTO (`/projects/{id}`) ────────────────────────────
   Cabecera de identidad, cuatro indicadores, bloques de trabajo y el feed.
   El orden visual es el orden de decisión: primero si el proyecto va a llegar,
   luego qué lo frena, luego con qué se trabaja, y al final qué pasó. */

.work-project-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color);
    border-inline-start: 4px solid var(--card-accent, var(--bs-primary));
    border-radius: 14px;
    background: var(--bs-body-bg);
}

.work-project-head__ident { flex: 1; min-width: 0; }

.work-project-head__name {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    font-weight: 650;
    line-height: 1.25;
    color: var(--bs-body-color);
}

.work-project-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}


/* ── Los cuatro indicadores ──
   auto-fit para que a poco ancho pasen a dos y luego a uno, sin media queries
   propias. El mínimo de 13rem es donde la frase de contexto deja de caber. */

.work-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.85rem;
    margin-bottom: 0.25rem;
}

.work-tile {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    background: var(--bs-body-bg);
}

/* El tono va en el BORDE, no en el fondo: cuatro tiles con fondos de color
   compiten entre sí y ninguno destaca. */
.work-tile.is-danger  { border-color: color-mix(in srgb, var(--bs-danger) 38%, var(--bs-border-color)); }
.work-tile.is-warning { border-color: color-mix(in srgb, var(--bs-warning) 45%, var(--bs-border-color)); }

.work-tile__label {
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.work-tile__value-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.work-tile__value {
    font-size: 1.5rem;
    font-weight: 650;
    line-height: 1.15;
    color: var(--bs-body-color);
}

.work-tile__value--muted { color: var(--bs-secondary-color); }

.work-tile__hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

/* La letra pequeña: lo que matiza el número (la base del cálculo, lo que no se
   contó). Se lee si se busca, no compite con el dato. */
.work-tile__note {
    font-size: 0.7rem;
    line-height: 1.3;
    color: var(--bs-secondary-color);
    opacity: 0.85;
}

.work-tile__flag {
    font-weight: 650;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
}

.work-tile__flag.is-danger {
    color: var(--bs-danger-text-emphasis);
    background: color-mix(in srgb, var(--bs-danger) 12%, transparent);
}

.work-tile__flag.is-ok {
    color: var(--bs-success-text-emphasis);
    background: color-mix(in srgb, var(--bs-success) 14%, transparent);
}

.work-tile__trend { font-weight: 700; }
.work-tile__trend.is-up   { color: var(--bs-success-text-emphasis); }
.work-tile__trend.is-down { color: var(--bs-danger-text-emphasis); }


/* ── Bloques ── */

.work-block {
    padding: 1rem 1.1rem;
    margin-top: 0.85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    background: var(--bs-body-bg);
}

.work-block__title {
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* Pista bajo el título de un bloque: texto de AYUDA que envuelve (no es la
   meta de una fila, que va `nowrap` con ellipsis y recortaría la frase). Con
   el 85 % del color del cuerpo y no `text-muted`: ese token da 4.1 en oscuro y
   a 12.5 px esto es texto pequeño. */
.work-block__hint {
    margin: 0;
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--bs-body-color) 85%, transparent);
}

.work-block__empty {
    margin: 0;
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}


/* ── Reparto por estado: el mini-tablero de una línea ── */

.work-statebar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--bs-body-color) 8%, transparent);
}

.work-statebar__seg { display: block; height: 100%; }

.work-statebar__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.6rem;
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

.work-statebar__key { display: inline-flex; align-items: center; gap: 0.35rem; }

.work-statebar__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}


/* ── Listas de acciones ── */

.work-actions { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }

/* El capturador del bloque de próximas acciones va DESPUÉS de la lista, que no
   trae margen propio (`work-actions { margin: 0 }`) — sin esto el campo queda
   pegado a la última acción. Y sin margen inferior: el `margin-bottom` que
   `ui-capture` trae para una lista dejaría un hueco al cerrar el bloque. */
.work-block__capture { margin-top: 0.75rem; margin-bottom: 0; }

.work-actions__item { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }

.work-actions__dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bs-body-color) 30%, transparent);
}

.work-actions__link {
    flex: 1;
    min-width: 0;
    font-size: 0.87rem;
    color: var(--bs-body-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-actions__link:hover { color: var(--bs-primary); text-decoration: underline; }


/* ── Equipo ── */

.work-team { display: flex; flex-direction: column; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }

.work-team__item { display: flex; align-items: center; gap: 0.6rem; }

.work-team__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }

.work-team__name {
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-team__roles { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.work-team__load {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.work-team__hours { font-variant-numeric: tabular-nums; }


/* ── Historial ──
   Línea de tiempo con filete: se lee como una secuencia, no como una lista
   suelta de frases. */

.work-feed { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }

.work-feed__item {
    position: relative;
    display: flex;
    gap: 0.6rem;
    padding-bottom: 0.7rem;
}

.work-feed__item:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: 3px;
    top: 0.75rem;
    bottom: 0;
    width: 1px;
    background: var(--bs-border-color);
}

.work-feed__dot {
    position: relative;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-top: 0.4rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bs-body-color) 28%, transparent);
}

.work-feed__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.work-feed__text { font-size: 0.85rem; color: var(--bs-body-color); }

.work-feed__when { font-size: 0.72rem; color: var(--bs-secondary-color); }


/* ── La ficha, editable en el sitio ── */

.work-card-fields { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 0.9rem; margin: 0; }

.work-card-fields dt {
    font-size: 0.78rem;
    font-weight: 600;
    /* 85 % del color del cuerpo y NO `--bs-secondary-color`: ese token da 4.12
       en oscuro y a 12.5 px esto es texto pequeño (exige 4.5). Mismo criterio
       ya aplicado a `ui-pill` y a `ui-tenants__meta`, y medido en los DOS temas
       — los porcentajes de `color-mix` no rinden igual en claro y en oscuro.
       Aplica a las tres cabinas que comparten esta ficha (cliente, proyecto y
       producto de software). */
    color: color-mix(in srgb, var(--bs-body-color) 85%, transparent);
    align-self: center;
}

.work-card-fields dd { margin: 0; min-width: 0; }

.work-card-fields__review { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.85rem; }

.work-card-fields__muted { color: var(--bs-secondary-color); font-size: 0.8rem; }

/* ── ARRANQUE DE PROYECTO (/projects/new) ─────────────────────────────────
   La pantalla que crea un proyecto y le pone sus primeras acciones. Reusa los
   bloques de la cabina (`work-block`) para que crear y consultar se lean como
   la misma superficie; lo propio de aquí es el formulario y la lista de
   acciones anotadas-pero-no-creadas. */

.work-start__lead {
    max-width: 62ch;               /* medida de lectura: es texto corrido */
    margin-bottom: 1rem;
    color: var(--bs-secondary-color);
}

.work-start__field { margin-bottom: 1rem; }

.work-start__field:last-child { margin-bottom: 0; }

.work-start__hint {
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

.work-start__error {
    margin: 0.6rem 0 0;
    font-size: 0.82rem;
    color: var(--bs-danger-text-emphasis);
}

/* Las acciones ANOTADAS todavía no existen en la base: se ven como lo que son
   —un borrador— con el mismo vocabulario de las próximas acciones de la cabina,
   para que al crearlas no cambien de aspecto. */
.work-start__actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.work-start__action {
    display: flex;
    align-items: flex-start;   /* el título puede ocupar dos líneas */
    gap: 0.5rem;
    min-width: 0;
}

.work-start__action-dot {
    flex: 0 0 auto;
    margin-top: 0.55rem;       /* a la altura de la primera línea del título */
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bs-body-color) 35%, transparent);
}

/* ENVUELVE, no recorta. En la cabina las próximas acciones sí se recortan
   —son muchas y el título completo vive en el detalle—, pero esto es un borrador
   de tres líneas que el usuario ACABA de escribir: esconderle lo que tecleó, en
   el teléfono y justo antes de confirmar, es lo contrario de lo que necesita. */
.work-start__action-title {
    flex: 1;
    min-width: 0;
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

/* Quitar es destructivo aunque nada se haya guardado: objetivo cómodo (28px) y
   visible sin hover — en táctil el hover no ocurre nunca. */
.work-start__action-remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-danger-text-emphasis);
    cursor: pointer;
    transition: background-color 140ms ease-out;
}

.work-start__action-remove:hover,
.work-start__action-remove:focus-visible {
    background: color-mix(in srgb, var(--bs-danger) 14%, transparent);
}

/* El pliegue de los detalles. Es un botón de verdad (no un <summary>, que en
   Blazor obliga a pelear con el toggle nativo del navegador por el estado). */
.work-start__toggle {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: start;
    cursor: pointer;
    color: inherit;
}

.work-start__toggle .work-block__title { margin: 0; }

.work-start__toggle:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 3px;
    border-radius: 6px;
}

.work-start__swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }

/* "Sin color" no puede ser un círculo vacío del color del fondo: se leería como
   un hueco de carga. Lleva su propio borde y el glifo de prohibido. */
.work-color-swatch--none {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-color: color-mix(in srgb, var(--bs-body-color) 25%, transparent);
    color: var(--bs-secondary-color);
    font-size: 0.7rem;
}

/* El bloque de arranque de la CABINA: mismo lenguaje, tinte del acento para que
   se lea como una invitación y no como una alarma. */
.work-block--start {
    background: color-mix(in srgb, var(--bs-primary) 4%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--bs-primary) 22%, var(--bs-border-color));
}

.work-block__lead {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    max-width: 62ch;
}