/* ═══════════════════════════════════════════════════════════════
   Proyectos (ProjectsPage, ProjectDetailPage · PM-F0): lista de proyectos, tabla de work items, editor y miembros.
   Only theme tokens (light and dark — midnight navy and gold is the default): no fixed colour here.
   ═══════════════════════════════════════════════════════════════ */

.pj-page { display: flex; flex-direction: column; gap: var(--space-4); }
.pj-key { font-family: var(--font-display); font-weight: 700; color: var(--ds-color-primary, var(--blue-700)); white-space: nowrap; }

.pj-form-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; }
.pj-field { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 220px; min-width: 0; }
.pj-field > span { font-size: 12px; font-weight: 600; color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-field--narrow { flex: 0 1 160px; }
.pj-field--key { flex: 0 1 140px; }
.pj-field--action { flex: 0 0 auto; }
.pj-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pj-check { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ds-color-text, var(--gray-900)); }

.pj-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pj-table-wrap { overflow-x: auto; }
.pj-row { cursor: pointer; }
.pj-muted-icon { color: var(--ds-color-text-muted, var(--gray-500)); margin-left: var(--space-1); }

.pj-status { display: inline-block; padding: 2px var(--space-2); border-radius: var(--r-pill); font-size: 12px; font-weight: 600; border: 1px solid var(--ds-color-border, var(--gray-200)); }
.pj-status--todo { background: var(--ds-color-surface-2, var(--gray-100)); color: var(--ds-color-text, var(--gray-800)); }
.pj-status--inprogress { background: var(--gold-100); color: var(--gold-700); border-color: var(--gold-300); }
.pj-status--done { background: var(--green-100); color: var(--green-600); border-color: var(--green-border); }

@media (max-width: 640px) {
    .pj-field--narrow, .pj-field--key { flex: 1 1 100%; }
}

/* ── Segunda entrega: estados con nombre (paleta cerrada de tokens), filtros, historial, configuración ── */
.pj-state { min-width: 140px; font-size: 12px; font-weight: 600; }
.pj-state--gray { background: var(--ds-color-surface-2, var(--gray-100)); color: var(--ds-color-text, var(--gray-800)); }
.pj-state--blue { background: var(--blue-100); color: var(--blue-700); border-color: var(--blue-300); }
.pj-state--gold { background: var(--gold-100); color: var(--gold-700); border-color: var(--gold-300); }
.pj-state--green { background: var(--green-100); color: var(--green-600); border-color: var(--green-border); }
.pj-state--red { background: var(--red-100); color: var(--red-600); border-color: var(--red-border); }
.pj-state--purple { background: var(--purple-100); color: var(--purple-500); border-color: var(--purple-500); }

.pj-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--r-pill); font-size: 12px; font-weight: 600;
    border: 1px solid var(--ds-color-border, var(--gray-200)); background: var(--ds-color-surface-2, var(--gray-100)); color: var(--ds-color-text, var(--gray-800)); }
.pj-badge--warn { background: var(--gold-100); color: var(--gold-700); border-color: var(--gold-300); cursor: pointer; text-decoration: none; }
.pj-subtitle { margin: var(--space-3) 0 var(--space-2); font-size: 14px; font-weight: 700; color: var(--ds-color-text, var(--gray-900)); }
.pj-filters { align-items: flex-end; }
.pj-input--short { max-width: 90px; }
.pj-actions-cell { white-space: nowrap; }
.pj-matrix td, .pj-matrix th { text-align: center; }
.pj-fields { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pj-history__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pj-history__row { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 13px; color: var(--ds-color-text, var(--gray-800)); }
.pj-history__when, .pj-history__reason { color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-history__who { font-weight: 600; }
.pj-history__what { color: var(--ds-color-text, var(--gray-800)); overflow-wrap: anywhere; }

/* ── Fase 1: texto enriquecido, epics y fases con avance, checklist DoR / DoD, excepción ── */
/* Inside a vertical fieldset a field is as tall as its content: «flex: 1 1 220px» of .pj-field is a WIDTH in a row and became a 220px-tall
   empty gap under «Descripción» in a column (the owner's screenshot). */
.pj-fieldset > .pj-field, .pj-fieldset > .pj-form-row > .pj-field--rich { flex: 0 0 auto; }
.pj-field--rich { flex: 1 1 320px; }
.pj-form-row--top { align-items: flex-start; }

.pj-epics__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pj-epic { width: 100%; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); text-align: left; cursor: pointer;
    border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); background: var(--ds-color-surface, var(--gray-50));
    color: var(--ds-color-text, var(--gray-900)); font: inherit; }
.pj-epic:hover, .pj-epic--open { border-color: var(--gold-300); }
.pj-epic:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.pj-epic__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pj-epic__title { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.pj-epic__numbers { font-size: 12px; color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-epic__owner { font-weight: 600; }
.pj-progress { display: block; height: 8px; border-radius: var(--r-pill); background: var(--ds-color-surface-2, var(--gray-100)); overflow: hidden;
    border: 1px solid var(--ds-color-border, var(--gray-200)); }
.pj-progress__bar { display: block; height: 100%; background: var(--gold-500); border-radius: var(--r-pill); }
.pj-epic-detail { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3);
    border-top: 1px solid var(--ds-color-border, var(--gray-200)); }

.pj-checklist { display: flex; flex-direction: column; gap: var(--space-2); }
.pj-checklist__group { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) 0; }
.pj-checklist__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pj-checklist__title { font-weight: 700; font-size: 13px; color: var(--ds-color-text, var(--gray-900)); }
.pj-checklist__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pj-checklist__step { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); border-radius: var(--r-md);
    border: 1px solid var(--ds-color-border, var(--gray-200)); }
.pj-checklist__step--done { border-color: var(--green-border); }
.pj-checklist__expected, .pj-checklist__who { font-size: 12px; color: var(--ds-color-text-muted, var(--gray-500)); margin: 0; }
.pj-checklist__expected p { margin: 0; }
.pj-checklist__evidence { max-width: 520px; }
.pj-checkrow { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px dashed var(--ds-color-border, var(--gray-200)); }
.pj-badge--ok { background: var(--green-100); color: var(--green-600); border-color: var(--green-border); }

/* The DoR / DoD override (GateOverrideDialog) inside the shared CrmModal: the sentence, the one-line reason and its counter under the field,
   at the right; the footer wraps on a narrow screen (each button full width on a phone). */
.pj-override__body { display: flex; flex-direction: column; gap: var(--space-4); }
.pj-override__why { margin: 0; color: var(--gray-800); line-height: 1.5; }
.pj-override__count { align-self: flex-end; font-size: 12px; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.pj-override .crm-modal__footer { flex-wrap: wrap; }
@media (max-width: 480px) { .pj-override .crm-modal__footer > .crm-btn { flex: 1 1 100%; } }
.pj-history__note { flex-basis: 100%; font-size: 12px; color: var(--ds-color-text-muted, var(--gray-500)); white-space: pre-wrap; }

/* ── Fase 1 (PM-F1-05): el drawer del work item — panel lateral sobre la página, a pantalla completa en el móvil ── */
.pj-drawer-backdrop { position: fixed; inset: 0; z-index: 1000; background: color-mix(in srgb, var(--navy-900, var(--gray-900)) 45%, transparent); }
.pj-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001; width: min(820px, 100vw); display: flex; flex-direction: column;
    background: var(--ds-color-surface-1, var(--white)); color: var(--ds-color-text, var(--gray-900)); border-left: 1px solid var(--ds-color-border, var(--gray-200));
    box-shadow: var(--shadow-xl); }
.pj-drawer > .pj-editor { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.pj-drawer__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); flex-shrink: 0;
    border-bottom: 1px solid var(--ds-color-border, var(--gray-200)); background: var(--ds-color-surface-2, var(--gray-50)); }
.pj-drawer__title { margin: 0; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-2); font-size: 15px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-drawer__icon { flex: 0 0 auto; }
.pj-drawer__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.pj-drawer__body > * { flex-shrink: 0; }
.pj-drawer__tabs { padding-top: var(--space-3); border-top: 1px solid var(--ds-color-border, var(--gray-200)); }
/* The drawer's tabs wrap onto a new line instead of hiding one (the Checklist (DoR/DoD) is the last); a tab keeps its width. */
.pj-drawer__tabs { flex-wrap: wrap; row-gap: var(--space-2); scroll-margin-top: var(--space-4); }
.pj-drawer__tabs > .sf-btn { flex: 0 0 auto; max-width: 100%; white-space: normal; }
.pj-drawer__tab-count { font-weight: 700; }
.pj-drawer__tab { display: flex; flex-direction: column; gap: var(--space-3); }
@media (max-width: 760px) {
    .pj-drawer { width: 100vw; height: 100dvh; border-left: 0; }
    .pj-drawer__body { padding: var(--space-3); }
}

/* The sections of the drawer's tabs: a title and its list, in a column like the checklist. */
.pj-comments, .pj-attachments, .pj-links, .pj-history { display: flex; flex-direction: column; gap: var(--space-2); }
.pj-comments__list, .pj-attachments__list, .pj-links__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pj-comment { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--ds-color-border, var(--gray-200));
    border-radius: var(--r-md); background: var(--ds-color-surface-2, var(--gray-50)); }
.pj-comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 13px; }
.pj-comment__who { font-weight: 700; }
.pj-comment__body { font-size: 14px; overflow-wrap: anywhere; }
.pj-comment__body p { margin: 0 0 var(--space-1); }
.pj-comment__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pj-comment-new { display: flex; flex-direction: column; gap: var(--space-2); }
.pj-badge--client { background: var(--gold-100); color: var(--gold-700); border-color: var(--gold-300); }
.pj-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pj-chip__remove { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 0 0 var(--space-1); }
.pj-attachment, .pj-links__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ── Fase 1 (PM-F1-06): búsqueda global de ítems (Ctrl+K) ── */
.pj-search-trigger { display: inline-flex; align-items: center; gap: var(--space-2); }
.pj-search-trigger kbd, .pj-search kbd { font-size: 11px; padding: 1px var(--space-1); border-radius: var(--r-sm, 4px); border: 1px solid var(--ds-color-border, var(--gray-200));
    background: var(--ds-color-surface-2, var(--gray-50)); color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-search-backdrop { position: fixed; inset: 0; z-index: 1002; background: color-mix(in srgb, var(--navy-900, var(--gray-900)) 45%, transparent);
    display: flex; justify-content: center; align-items: flex-start; padding: 10vh var(--space-4) var(--space-4); }
.pj-search { width: min(640px, 100%); max-height: 75vh; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4);
    background: var(--ds-color-surface-1, var(--white)); color: var(--ds-color-text, var(--gray-900)); border: 1px solid var(--ds-color-border, var(--gray-200));
    border-radius: var(--r-xl, 12px); box-shadow: var(--shadow-xl); }
.pj-search__results { list-style: none; padding: 0; margin: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-1); }
.pj-search__hit { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2); text-align: left; font: inherit; cursor: pointer;
    border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: inherit; }
.pj-search__hit:hover, .pj-search__hit:focus-visible { border-color: var(--gold-300); background: var(--ds-color-surface-2, var(--gray-50)); outline: none; }
.pj-search__project { font-size: 12px; color: var(--ds-color-text-muted, var(--gray-500)); }
@media (max-width: 640px) { .pj-search-backdrop { padding: 0; } .pj-search { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; } }

/* ── Fase 2 (PM-F2-01, F2-02): vistas guardadas, lista, tabla agrupada y tablero con arrastrar y soltar. Solo tokens del tema. ── */
.pj-views { display: flex; flex-direction: column; gap: var(--space-3); }
.pj-views__bar { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: flex-end; }
.pj-views__kinds { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.pj-views__editor { display: flex; flex-direction: column; gap: var(--space-3); }
.pj-views__filter { display: flex; gap: var(--space-2); align-items: flex-start; flex-wrap: wrap; padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--ds-color-border, var(--gray-200)); }
.pj-views__values { display: flex; gap: var(--space-2) var(--space-3); flex-wrap: wrap; flex: 1 1 260px; min-width: 0; }

.pj-table__group th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
    background: var(--ds-color-surface-2, var(--gray-50)); color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); }
.pj-list__group { padding: var(--space-2) var(--space-3); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    background: var(--ds-color-surface-2, var(--gray-50)); color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-list__row { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--ds-color-border, var(--gray-200)); }
.pj-list__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-color-text, var(--gray-900)); }
.pj-list__who { font-size: 12px; color: var(--ds-color-text-muted, var(--gray-500)); white-space: nowrap; }

.pj-board { display: flex; flex-direction: column; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-2); }
.pj-board__lane-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ds-color-text-muted, var(--gray-500));
    padding-top: var(--space-2); }
.pj-board__row { display: grid; grid-template-columns: repeat(var(--pj-board-columns, 3), minmax(240px, 1fr)); gap: var(--space-3); }
.pj-board__column { display: flex; flex-direction: column; gap: var(--space-2); min-height: 120px; padding: var(--space-2); border-radius: var(--r-md);
    background: var(--ds-color-surface-2, var(--gray-50)); border: 1px dashed transparent; }
.pj-board__column--over { border-color: var(--gold-500); }
.pj-board__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.pj-board__count { font-size: 12px; font-weight: 600; color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); border-radius: var(--r-md); cursor: grab;
    background: var(--ds-color-surface-1, var(--white)); color: var(--ds-color-text, var(--gray-900)); border: 1px solid var(--ds-color-border, var(--gray-200)); }
.pj-card[draggable="false"] { cursor: default; }
.pj-card--dragging { opacity: .5; }
.pj-card__open { all: unset; cursor: pointer; display: block; font-size: 14px; line-height: 1.35; }
.pj-card__open:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; border-radius: var(--r-md); }
.pj-card__title { color: var(--ds-color-text, var(--gray-900)); }
.pj-card__meta { display: flex; gap: var(--space-2); flex-wrap: wrap; font-size: 12px; color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-card__move { font-size: 12px; padding: 2px var(--space-1); }

@media (max-width: 640px) {
    .pj-board__row { grid-template-columns: repeat(var(--pj-board-columns, 3), minmax(220px, 85vw)); }
    .pj-list__who { display: none; }
}

/* PM-F2-04: bulk edit — choosing rows and the panel of changes. Tokens of the theme only (light and dark). */
.pj-select-cell { width: 36px; }
.pj-select { width: 16px; height: 16px; accent-color: var(--gold-500); cursor: pointer; }
.pj-bulk { display: flex; flex-direction: column; gap: var(--space-2); border-left: 3px solid var(--gold-500); }
.pj-bulk__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pj-bulk__summary { display: flex; flex-direction: column; gap: var(--space-2); }
.pj-bulk__refused { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); max-height: 40vh; overflow-y: auto;
    color: var(--ds-color-text, var(--gray-900)); }

/* PM-F2-03: «Mi trabajo» — groups by due date as a list or as a board of four columns. */
.pj-mywork__bar { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
.pj-mywork__group { display: flex; flex-direction: column; gap: var(--space-2); }
.pj-mywork__group-title { display: flex; gap: var(--space-2); align-items: baseline; margin: 0; font-size: 14px; font-weight: 700;
    color: var(--ds-color-text, var(--gray-900)); }
.pj-mywork__group-title--overdue { color: var(--ds-color-danger, var(--red-600)); }
.pj-mywork__count { font-size: 12px; font-weight: 600; color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-mywork__project { font-size: 12px; color: var(--ds-color-text-muted, var(--gray-500)); white-space: nowrap; }
.pj-mywork__link { all: unset; cursor: pointer; display: flex; gap: var(--space-3); align-items: center; flex: 1 1 auto; min-width: 0; }
.pj-mywork__link:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; border-radius: var(--r-md); }

/* ── Fase 2: sprints (PM-F2-05) y tiempo (PM-F2-06). Solo tokens del tema (claro y oscuro). ── */
.pj-field--grow { flex: 2 1 260px; }
.pj-time { display: flex; flex-direction: column; gap: var(--space-3); }
.pj-timer { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-3);
    border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); background: var(--ds-color-surface-2, var(--gray-50)); }
.pj-timer--running { border-color: var(--gold-500); background: var(--gold-100); }
.pj-timer__dot { width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--gold-500); animation: pj-timer-pulse 1.2s ease-in-out infinite; }
.pj-timer__clock { font-family: var(--font-display); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gold-700); }
@keyframes pj-timer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pj-timer__dot { animation: none; } }
.pj-time__totals { margin: 0; color: var(--ds-color-text, var(--gray-900)); }
.pj-time__form { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; }
.pj-time__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.pj-time__entry { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) 0;
    border-bottom: 1px solid var(--ds-color-border, var(--gray-200)); color: var(--ds-color-text, var(--gray-900)); }
.pj-time__who { font-weight: 600; }
.pj-time__when { font-variant-numeric: tabular-nums; color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-time__note { flex: 1 1 100%; color: var(--ds-color-text-muted, var(--gray-500)); overflow-wrap: anywhere; }
.pj-time__actions { margin-left: auto; display: inline-flex; gap: var(--space-1); }
.pj-sprints { display: flex; flex-direction: column; gap: var(--space-3); }
.pj-sprints__form { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; }
.pj-sprints__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pj-sprints__row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-3);
    border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); }
.pj-sprints__row--open { border-color: var(--gold-500); }
.pj-sprints__name { font-weight: 700; }
.pj-sprints__goal { flex: 1 1 100%; margin: 0; color: var(--ds-color-text-muted, var(--gray-500)); overflow-wrap: anywhere; }
.pj-sprints__actions { margin-left: auto; display: inline-flex; gap: var(--space-1); }
.pj-sprint-detail { display: flex; flex-direction: column; gap: var(--space-2); border-left: 3px solid var(--gold-500); padding-left: var(--space-3); }
.pj-sprint-outcome { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.pj-sprint-outcome > div { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); border-radius: var(--r-md);
    background: var(--ds-color-surface-2, var(--gray-50)); color: var(--ds-color-text, var(--gray-900)); }
/* A folded list (the sprint's photos, the poker's agreed values, the retro's people): a bordered box whose summary opens it. */
.pj-sprint-photo { border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); padding: var(--space-2) var(--space-3);
    background: var(--ds-color-surface-1, var(--white)); color: var(--ds-color-text, var(--gray-900)); }
.pj-sprint-photo > summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.pj-sprint-photo[open] > summary { margin-bottom: var(--space-2); }
.pj-sprint-photo__lines, .pj-sprint-items { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.pj-time-report { display: flex; flex-direction: column; gap: var(--space-3); }
.pj-time-report__tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-3); overflow-x: auto; }
.pj-time-costs { border-left: 3px solid var(--gold-500); padding-left: var(--space-3); }
/* Closing a sprint is a shared CrmModal: the sentence and one radio per destination, in a column. */
.pj-close-sprint .crm-modal__footer { flex-wrap: wrap; }
.pj-close-sprint__body { display: flex; flex-direction: column; gap: var(--space-2); }
.pj-close-sprint__body > p { margin: 0; color: var(--gray-800); }

/* PM-F2-07: tareas recurrentes (solo tokens del tema: claro y oscuro). */
.pj-recurring { display: flex; flex-direction: column; gap: var(--space-3); }
.pj-recurring__form { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3);
    border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); }
.pj-recurring__days { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; margin: 0; padding: 0; }
.pj-recurring__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pj-recurring__row { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3);
    border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); }
.pj-recurring__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pj-recurring__head strong { overflow-wrap: anywhere; }
.pj-recurring__actions { margin-left: auto; display: inline-flex; gap: var(--space-1); }
.pj-recurring__problem { margin: 0; color: var(--gold-700); overflow-wrap: anywhere; }
.pj-recurring__description { color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-recurring__occurrences { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.pj-recurring__occurrences li { display: inline-flex; align-items: center; gap: var(--space-1); }
.pj-badge--paused { background: var(--ds-color-surface-2, var(--gray-100)); color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-reminders { display: flex; flex-direction: column; gap: var(--space-3); }
.pj-reminders__row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }

/* PM-F3-01: capacidad del equipo y aviso de sobrecarga; PM-F3-02: planning poker (solo tokens del tema: claro y oscuro). */
.pj-capacity { display: flex; flex-direction: column; gap: var(--space-2); }
.pj-capacity__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.pj-capacity__table { overflow-x: auto; }
.pj-capacity__zone { display: block; font-weight: 400; }
.pj-capacity__row--over th, .pj-capacity__row--over td { background: var(--gold-100); color: var(--gold-700); }
.pj-badge--over { background: var(--red-100); color: var(--red-600); border-color: var(--red-border); }
.pj-team-capacity, .pj-absences { display: flex; flex-direction: column; gap: var(--space-3); }
.pj-poker { display: flex; flex-direction: column; gap: var(--space-2); border-left: 3px solid var(--gold-500); padding-left: var(--space-3); }
.pj-poker__open, .pj-poker__round { display: flex; flex-direction: column; gap: var(--space-2); }
.pj-poker__people { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; margin: 0; padding: 0; }
.pj-poker__item { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0; overflow-wrap: anywhere; }
.pj-poker__voters { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pj-poker__voter { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2);
    border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-poker__voter--done { color: var(--ds-color-text, var(--gray-900)); border-color: var(--gold-500); }
.pj-poker__card { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2.4rem; padding: 0 var(--space-1);
    border-radius: var(--r-md); font-weight: 700; }
.pj-poker__card--hidden { background: var(--ds-color-surface-2, var(--gray-100)); color: var(--gold-700); }
.pj-poker__card--shown { background: var(--gold-100); color: var(--gold-700); border: 1px solid var(--gold-300); }
.pj-poker__hand { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pj-poker__pick { min-width: 3rem; height: 4rem; border-radius: var(--r-md); font-weight: 700; font-size: 1.1rem; cursor: pointer;
    border: 1px solid var(--ds-color-border, var(--gray-200)); background: var(--ds-color-surface, var(--gray-50)); color: var(--ds-color-text, var(--gray-900)); }
.pj-poker__pick:hover, .pj-poker__pick:focus-visible { border-color: var(--gold-500); }
.pj-poker__pick--mine { background: var(--gold-500); border-color: var(--gold-500); color: var(--ds-color-surface, var(--gray-50)); }

/* PM-F3-03: roadmap (línea de tiempo con el Gantt de Syncfusion, dependencias e hitos). Solo tokens del tema. */
.pj-roadmap { display: flex; flex-direction: column; gap: var(--space-3); }
.pj-roadmap__gantt { min-width: 0; overflow-x: auto; border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); }
.pj-roadmap__gantt .e-gantt-child-taskbar-inner-div, .pj-roadmap__gantt .e-gantt-child-taskbar { background: var(--blue-400); border-color: var(--blue-500); }
.pj-roadmap__gantt .e-gantt-child-progressbar-inner-div, .pj-roadmap__gantt .e-gantt-child-progressbar { background: var(--gold-500); border-color: var(--gold-500); }
.pj-roadmap__gantt .e-gantt-milestone { background: var(--gold-500); }
.pj-roadmap__gantt .e-connector-line, .pj-roadmap__gantt .e-connector-line-right-arrow, .pj-roadmap__gantt .e-connector-line-left-arrow { border-color: var(--gray-400); }
.pj-roadmap__tip { display: flex; flex-direction: column; gap: var(--space-1); }
.pj-roadmap__warnings { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.pj-roadmap__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pj-roadmap__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; overflow-wrap: anywhere;
    padding: var(--space-2) var(--space-3); border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); }
.pj-roadmap__actions { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }

/* PM-F3-04: métricas de flujo. Cada gráfico con su tabla; los colores de las series son tokens (FlowMetricsView). */
.pj-metrics { display: flex; flex-direction: column; gap: var(--space-3); }
.pj-metrics__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-3); }
.pj-metrics__chart { margin: 0; min-width: 0; padding: var(--space-2); border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md);
    background: var(--ds-color-surface, var(--gray-50)); }
.pj-metrics__caption { font-size: 13px; font-weight: 600; color: var(--ds-color-text, var(--gray-900)); margin-bottom: var(--space-1); }
.pj-metrics__chart text { fill: var(--ds-color-text-muted, var(--gray-500)); }
.pj-metrics__table { overflow-x: auto; }
.pj-metrics__table td { text-align: right; font-variant-numeric: tabular-nums; }

/* PM-F3-05: pronóstico de cierre. Solo tokens del tema. */
.pj-forecast { display: flex; flex-direction: column; gap: var(--space-3); }
.pj-forecast__dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2); }
.pj-forecast__dates > div { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3);
    border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); }
.pj-forecast__likely { border-color: var(--gold-500) !important; background: var(--gold-100); color: var(--gold-700); }

/* PM-F3-06: retrospectiva (tres columnas, tarjetas de una línea, acciones de la retro anterior). Solo tokens del tema. */
.pj-retros, .pj-retro { display: flex; flex-direction: column; gap: var(--space-3); }
.pj-retro__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.pj-retro__column { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-2) var(--space-3);
    border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); background: var(--ds-color-surface, var(--gray-50)); }
.pj-retro__column-title { margin: 0; font-size: 14px; color: var(--ds-color-text, var(--gray-900)); }
.pj-retro__cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pj-retro__card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); overflow-wrap: anywhere;
    border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); color: var(--ds-color-text, var(--gray-900)); }
.pj-retro__card--action { border-left: 3px solid var(--gold-500); }
.pj-retro__text { white-space: pre-wrap; }
.pj-retro__add { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pj-retro__add .sf-input { flex: 1 1 160px; min-width: 0; }
.pj-retro__carried, .pj-retro__convert { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--gold-300); border-radius: var(--r-md); }

/* PM-F4-02: rentabilidad (tarjetas de cifras, barras de presupuesto, margen negativo en rojo). PM-F4-01: decisiones del cliente en el drawer.
   Solo tokens del tema. */
.pj-money, .pj-profit, .pj-cr { display: flex; flex-direction: column; gap: var(--space-3); }
.pj-money__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-2); }
.pj-money__card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3); min-width: 0;
    border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); color: var(--ds-color-text, var(--gray-900)); }
.pj-money__card strong { font-size: 18px; overflow-wrap: anywhere; }
.pj-money__margin--gain { border-color: var(--green-border); }
.pj-money__margin--loss { border-color: var(--red-border); background: var(--red-100); color: var(--red-600); }
td.pj-money__margin--loss { font-weight: 600; }
.pj-money__meter { display: flex; flex-direction: column; gap: var(--space-1); }
.pj-money__meter-head { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; font-size: 13px;
    color: var(--ds-color-text, var(--gray-900)); }
.pj-progress__bar--over { background: var(--red-500); }
.pj-money__alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); font-size: 13px;
    color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-client-reviews { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
    border: 1px dashed var(--gold-300); border-radius: var(--r-md); }
.pj-client-reviews__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pj-client-review { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--ds-color-text, var(--gray-900)); }

/* PM-F4-03: facturación de horas (revisión, totales, confirmación). PM-F4-04: reportes de reunión y propuestas de la IA. Solo tokens del tema. */
.pj-bill, .pj-mr-panel, .pj-mr { display: flex; flex-direction: column; gap: var(--space-3); }
.pj-bill__preview { display: flex; flex-direction: column; gap: var(--space-2); }
.pj-bill__table td { font-variant-numeric: tabular-nums; }
.pj-bill__table tfoot th, .pj-bill__table tfoot td { border-top: 2px solid var(--ds-color-border, var(--gray-200)); color: var(--ds-color-text, var(--gray-900)); }
.pj-bill__confirm { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--gold-300); border-radius: var(--r-md); color: var(--ds-color-text, var(--gray-900)); }
.pj-bill__confirm p { margin: 0; }
.pj-bill__problem { display: block; }
.pj-mr__link { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-3);
    border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); }
.pj-mr__content { max-height: 360px; overflow-y: auto; padding: var(--space-2) var(--space-3); overflow-wrap: anywhere;
    border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); background: var(--ds-color-surface-2, var(--gray-50));
    color: var(--ds-color-text, var(--gray-900)); }
.pj-mr__proposals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pj-mr__proposal { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-3); overflow-wrap: anywhere;
    border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); color: var(--ds-color-text, var(--gray-900)); }
.pj-mr__proposal--pending { border-left: 3px solid var(--gold-500); }
.pj-mr__proposal--approved { border-left: 3px solid var(--green-600); }
.pj-mr__proposal--dismissed { background: var(--ds-color-surface-2, var(--gray-50)); color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-mr__proposal-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pj-mr__criteria { display: flex; flex-direction: column; gap: var(--space-1); }
.pj-mr__inline-confirm { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }
.pj-mr__problems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); font-size: 13px; color: var(--red-600); }
/* The proposal editor is a shared CrmModal (large): its body scrolls, header and footer stay. */
.pj-mr-edit .crm-modal__footer { flex-wrap: wrap; }

/* PM-F1-04b (owner's report of 23-oct-2026): the item's checklist as a summary with progress bars and one card per step, with its evidence
   (note, links, files) and explicit buttons. Tokens of the theme only (light and dark — midnight navy and gold is the default). */
.pj-checksum { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); padding: var(--space-3);
    border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); background: var(--ds-color-surface-2, var(--gray-50)); }
.pj-checksum__row { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.pj-checksum__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pj-checksum__name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ds-color-text, var(--gray-900)); }
.pj-progress__bar--ok { background: var(--green-500); }
.pj-checklist__item { list-style: none; }
.pj-badge--required { background: var(--gold-100); color: var(--gold-700); border-color: var(--gold-300); }

.pj-stepcard { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--r-md); overflow-wrap: anywhere;
    border: 1px solid var(--ds-color-border, var(--gray-200)); border-left: 4px solid var(--gold-500); background: var(--ds-color-surface-1);
    color: var(--ds-color-text, var(--gray-900)); }
.pj-stepcard--done { border-left-color: var(--green-500); }
.pj-stepcard--client { border-left-color: var(--ds-color-border, var(--gray-200)); }
.pj-stepcard__head { display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.pj-stepcard__box { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); cursor: pointer;
    border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); background: var(--ds-color-surface-2, var(--gray-50)); }
.pj-stepcard__checkbox { width: 22px; height: 22px; margin: 0; accent-color: var(--green-500); cursor: pointer; }
.pj-stepcard__checkbox:disabled { cursor: not-allowed; }
.pj-stepcard__boxlabel { font-weight: 700; font-size: 13px; }
.pj-stepcard__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-pill);
    background: var(--gold-100); color: var(--gold-700); font-size: 18px; }
.pj-stepcard__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); flex: 1 1 240px; min-width: 0; }
.pj-stepcard__text { font-weight: 700; font-size: 15px; }
.pj-stepcard__pending { margin: 0; font-size: 13px; color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-stepcard__confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: 13px;
    border: 1px solid var(--gold-300); border-radius: var(--r-md); background: var(--gold-100); color: var(--gold-700); }

.pj-evidence { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px dashed var(--ds-color-border, var(--gray-200)); }
.pj-evidence__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.pj-evidence__title { font-weight: 700; font-size: 13px; }
.pj-evidence__block { display: flex; flex-direction: column; gap: var(--space-1); }
.pj-evidence__label { font-size: 12px; font-weight: 600; color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-evidence__note { padding: var(--space-2) var(--space-3); border-radius: var(--r-md); background: var(--ds-color-surface-2, var(--gray-50)); font-size: 14px; }
.pj-evidence__note p { margin: 0 0 var(--space-1); }
.pj-evidence__meta, .pj-evidence__empty { font-size: 12px; color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-evidence__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pj-evidence__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.pj-evidence__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.pj-evidence__url { color: var(--ds-color-primary, var(--blue-700)); word-break: break-all; text-decoration: underline; }
.pj-evidence__add { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.pj-evidence__add .sf-input { flex: 1 1 260px; min-width: 0; }
.pj-evidence__upload { display: flex; flex-direction: column; gap: var(--space-1); }
.pj-evidence__status { margin: 0; font-size: 13px; color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-evidence__status--ok { color: var(--green-600); }
@media (max-width: 640px) {
    .pj-stepcard { padding: var(--space-2); }
    .pj-stepcard__head { flex-direction: column; align-items: stretch; }
    .pj-evidence__add .sf-btn { flex: 1 1 100%; }
}

/* ── S00: un proyecto desde el flujo de su servicio (vista previa, tarjeta del flujo y progreso) ── */
.pj-flow { display: flex; flex-direction: column; gap: var(--space-2); }
.pj-flow-card { display: flex; flex-direction: column; gap: var(--space-3); }
.pj-flow__summary { margin: 0; font-size: 14px; color: var(--ds-color-text, var(--gray-900)); line-height: 1.5; }
.pj-flow__muted { margin: 0; font-size: 13px; color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-flow__phases { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); max-height: 320px; overflow-y: auto; }
.pj-flow__phase { color: var(--ds-color-text, var(--gray-900)); }
.pj-flow__phase-name { font-weight: 700; color: var(--ds-color-text, var(--gray-900)); }
.pj-flow__tasks { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.pj-flow__task { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--ds-color-text, var(--gray-800)); }
.pj-flow__progress { display: flex; align-items: flex-start; gap: var(--space-3); }
.pj-flow__progress > .ti { font-size: 22px; color: var(--ds-color-primary, var(--blue-600)); }
.pj-flow__stage { margin: 0 0 var(--space-1); font-weight: 700; color: var(--ds-color-text, var(--gray-900)); }
.pj-flow-progress { max-width: 460px; }

/* ── S12 (SEG-219): la inspección del trabajo de un subcontratista en el drawer — solo tokens del tema (claro y oscuro) ── */
.pj-inspection { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); margin-bottom: var(--space-3);
    border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); background: var(--ds-color-surface-2, var(--gray-50)); }
.pj-inspection__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pj-inspection__title { margin: 0; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: var(--space-2); color: var(--ds-color-text, var(--gray-900)); }
.pj-inspection__followup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pj-inspection__followup .sf-hint { flex-basis: 100%; margin: 0; }
.pj-inspection__label { font-size: 12px; font-weight: 600; color: var(--ds-color-text-muted, var(--gray-500)); }
.pj-inspection__log { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pj-inspection__entry { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-2);
    border-top: 1px dashed var(--ds-color-border, var(--gray-200)); font-size: 13px; color: var(--ds-color-text, var(--gray-900)); }
.pj-inspection__comment { flex-basis: 100%; font-size: 13px; }