/* Colores de SoftwareFactory.App/Themes/Light.xaml y Dark.xaml (el tema sigue al del sistema). */
:root {
    color-scheme: light dark;
    --app-bg: #F3F4F6;
    --topbar: #1F2937;
    --nav-text: #D1D5DB;
    --surface: #FFFFFF;
    --column: #E7E9EE;
    --border: #D1D5DB;
    --text: #111827;
    --muted: #6B7280;
    --badge: #D1D5DB;
    --avatar-ring: #FFFFFF;
    --accent: #4F46E5;
    --accent-text: #4F46E5;
    --danger: #DC2626;
    --claude-text: #C2410C;
    --pr-text: #7E22CE;
    --pipeline-text: #0063B1;
    --build-text: #B45309;
    --merge-text: #047857;
    --scroll-thumb: #C4C8CF;
    --not-started-bg: #E5E7EB;
    --not-started-fg: #4B5563;
    --in-progress-bg: #E0E7FF;
    --in-progress-fg: #4338CA;
    --completed-bg: #DCFCE7;
    --completed-fg: #15803D;
    --error-bg: #FEE2E2;
    --error-fg: #B91C1C;
    --rejected-bg: #FEF3C7;
    --rejected-fg: #B45309;
    --spinner-track: #C7D2FE;
    --spinner: #4F46E5;
    --log-bg: #FBFBFC;
    --log-tool-label: #7C3AED;
    --log-tool-text: #6D28D9;
    --log-tool-result-text: #374151;
    --log-tool-result-bg: #F1F2F4;
    --log-command: #0F766E;
    --log-prompt-bg: #EEF2FF;
    --log-result: #15803D;
    --flash: #E0E7FF;
    --log-warning: #B45309;
    --log-stderr: #92400E;
    --running: #2563EB;
    --failed: #DC2626;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --app-bg: #15171B;
        --topbar: #0D0F12;
        --nav-text: #C9CDD4;
        --surface: #262A31;
        --column: #1D2025;
        --border: #3A3F4A;
        --text: #E5E7EB;
        --muted: #9CA3AF;
        --badge: #3A3F4A;
        --avatar-ring: #3A3F4A;
        --accent: #5B5BD6;
        --accent-text: #A5B4FC;
        --danger: #F87171;
        --claude-text: #FB923C;
        --pr-text: #C084FC;
        --pipeline-text: #60A5FA;
        --build-text: #F59E0B;
        --merge-text: #34D399;
        --scroll-thumb: #4A505C;
        --not-started-bg: #374151;
        --not-started-fg: #D1D5DB;
        --in-progress-bg: #312E81;
        --in-progress-fg: #C7D2FE;
        --completed-bg: #14532D;
        --completed-fg: #86EFAC;
        --error-bg: #7F1D1D;
        --error-fg: #FCA5A5;
        --rejected-bg: #78350F;
        --rejected-fg: #FCD34D;
        --spinner-track: #4338CA;
        --spinner: #C7D2FE;
        --log-bg: #1B1E23;
        --log-tool-label: #A78BFA;
        --log-tool-text: #C4B5FD;
        --log-tool-result-text: #D1D5DB;
        --log-tool-result-bg: #262A31;
        --log-command: #2DD4BF;
        --log-prompt-bg: #252A45;
        --log-result: #4ADE80;
        --flash: #312E81;
        --log-warning: #FBBF24;
        --log-stderr: #F59E0B;
        --running: #60A5FA;
        --failed: #F87171;
    }
}

/* Elegido con el botón de tema (theme.js): gana sobre el del sistema. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --app-bg: #15171B;
    --topbar: #0D0F12;
    --nav-text: #C9CDD4;
    --surface: #262A31;
    --column: #1D2025;
    --border: #3A3F4A;
    --text: #E5E7EB;
    --muted: #9CA3AF;
    --badge: #3A3F4A;
    --avatar-ring: #3A3F4A;
    --accent: #5B5BD6;
    --accent-text: #A5B4FC;
    --danger: #F87171;
    --claude-text: #FB923C;
    --pr-text: #C084FC;
    --pipeline-text: #60A5FA;
    --build-text: #F59E0B;
    --merge-text: #34D399;
    --scroll-thumb: #4A505C;
    --not-started-bg: #374151;
    --not-started-fg: #D1D5DB;
    --in-progress-bg: #312E81;
    --in-progress-fg: #C7D2FE;
    --completed-bg: #14532D;
    --completed-fg: #86EFAC;
    --error-bg: #7F1D1D;
    --error-fg: #FCA5A5;
    --rejected-bg: #78350F;
    --rejected-fg: #FCD34D;
    --spinner-track: #4338CA;
    --spinner: #C7D2FE;
    --log-bg: #1B1E23;
    --log-tool-label: #A78BFA;
    --log-tool-text: #C4B5FD;
    --log-tool-result-text: #D1D5DB;
    --log-tool-result-bg: #262A31;
    --log-command: #2DD4BF;
    --log-prompt-bg: #252A45;
    --log-result: #4ADE80;
    --flash: #312E81;
    --log-warning: #FBBF24;
    --log-stderr: #F59E0B;
    --running: #60A5FA;
    --failed: #F87171;
}

:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }

body {
    display: flex;
    flex-direction: column;
    background: var(--app-bg);
    color: var(--text);
    font: 13px/1.35 "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Barra superior */
.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--topbar);
    color: var(--nav-text);
    flex-wrap: wrap;
}
.brand { font-size: 15px; font-weight: 700; color: #FFFFFF; }
/* Versión del API y el tablero, junto a la marca (version.js). */
.version-badge { font-size: 11px; opacity: 0.75; font-variant-numeric: tabular-nums; }
/* Insignia junto a la marca (p. ej. «API público» en api.html). */
.readonly {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.12);
}
/* Nueva tarea: el único botón de la barra que cambia datos. */
.new-task {
    padding: 5px 12px;
    border: 0;
    border-radius: 6px;
    background: var(--accent);
    color: #FFFFFF;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.new-task:hover { filter: brightness(1.1); }
.spacer { flex: 1; }
.updated { font-size: 12px; }
.icon-button {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: inherit;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    font-size: 15px;
    cursor: pointer;
}
.icon-button:hover { background: rgba(255, 255, 255, 0.1); }
/* Link de la barra (p. ej. a la documentación del API). */
.topbar-link {
    color: var(--nav-text);
    text-decoration: none;
    font-weight: 600;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
}
.topbar-link:hover { background: rgba(255, 255, 255, 0.1); }
button.topbar-link { background: none; font: inherit; font-weight: 600; cursor: pointer; }
button.topbar-link:disabled { opacity: 0.6; cursor: progress; }
.icon-button.spinning { animation: spin 0.9s linear infinite; }
/* Botón que despliega los filtros: solo en el celular (ver más abajo, «Celular»). */
.filters-toggle { display: none; }

/* Filtro de proyecto: una píldora por opción; la elegida se rellena con el color del proyecto. */
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-left: 12px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: var(--nav-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--chip-color); }
.chip:hover { border-color: var(--chip-color); }
.chip.selected { background: var(--chip-color); border-color: var(--chip-color); color: #FFFFFF; }
.chip.selected .dot { background: #FFFFFF; }
/* Filtro de PC: separado del de proyecto. */
.filters.machines { padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.2); }
.filters.owners { padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.2); }

/* Selector de vista (tablero / lista): dos botones pegados, el elegido con el acento. */
.segmented { display: inline-flex; }
.segmented button {
    height: 28px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: var(--nav-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.segmented button:not(:last-child) { border-right: 0; }
.segmented button:first-child { border-radius: 6px 0 0 6px; }
.segmented button:last-child { border-radius: 0 6px 6px 0; }
.segmented button:hover { background: rgba(255, 255, 255, 0.1); }
.segmented button.selected { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }

/* Filtro por agente */
.agent-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 600;
}
.agent-filter select {
    height: 28px;
    max-width: 220px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: var(--topbar);
    color: var(--nav-text);
    font: inherit;
    cursor: pointer;
}

.error {
    margin: 10px 16px 0;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--error-bg);
    color: var(--error-fg);
    font-weight: 600;
}

.login-form, .empty {
    margin: 12vh auto 0;
    max-width: 360px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 16px;
}
.login-form h1, .empty h1 { font-size: 18px; margin: 0; }
.login-form p, .empty p { margin: 0; color: var(--muted); }
.login-form input {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}
.primary {
    padding: 8px 14px;
    border: 0;
    border-radius: 6px;
    background: var(--accent);
    color: #FFFFFF;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.secondary {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.primary:disabled { opacity: 0.6; cursor: progress; }

/* Formulario de nueva tarea. */
.task-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
}
.task-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.task-dialog form { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.task-dialog h1 { font-size: 18px; margin: 0; }
.task-dialog .hint { margin: 0; color: var(--muted); }
.task-dialog .error { margin: 0; }
.task-dialog label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.task-dialog small { font-weight: 400; color: var(--muted); }
.task-dialog input, .task-dialog select, .task-dialog textarea {
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--app-bg);
    color: var(--text);
    font: inherit;
    font-weight: 400;
}
.task-dialog textarea { resize: vertical; min-height: 120px; }
.task-dialog [aria-invalid="true"] { border-color: var(--danger); }
.task-dialog details { display: flex; flex-direction: column; gap: 12px; }
.task-dialog details[open] summary { margin-bottom: 12px; }
.task-dialog details label + label { margin-top: 12px; }
.task-dialog summary { cursor: pointer; font-weight: 600; color: var(--accent-text); }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* Nueva tarea: ancho para escribir descripciones largas; los campos cortos de a dos por fila (uno solo si no caben). */
.new-task-dialog { width: min(960px, calc(100vw - 32px)); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.markdown-field { display: flex; flex-direction: column; gap: 4px; }
.markdown-field-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.task-dialog .markdown-field-header label { font-weight: 600; }
.task-dialog .markdown-field textarea {
    min-height: max(240px, 45vh);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
}
.markdown-preview {
    min-height: max(240px, 45vh);
    max-height: 70vh;
    overflow: auto;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--app-bg);
}
.markdown-preview:empty::before { content: attr(data-empty); color: var(--muted); }

/* Markdown formateado (vista previa de la descripción y detalle de la tarea). */
.markdown { overflow-wrap: anywhere; line-height: 1.5; }
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 { margin: 14px 0 6px; line-height: 1.25; }
.markdown h1 { font-size: 1.5em; }
.markdown h2 { font-size: 1.3em; }
.markdown h3 { font-size: 1.15em; }
.markdown h4, .markdown h5, .markdown h6 { font-size: 1em; }
.markdown p, .markdown ul, .markdown ol, .markdown pre, .markdown blockquote, .markdown table { margin: 0 0 10px; }
.markdown ul, .markdown ol { padding-left: 24px; }
.markdown li > ul, .markdown li > ol { margin: 2px 0; }
.markdown li.task-item { list-style: none; margin-left: -20px; }
.markdown a { color: var(--accent-text); }
.markdown code { padding: 1px 5px; border-radius: 4px; background: var(--column); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9em; }
.markdown pre { padding: 10px 12px; border-radius: 6px; background: var(--column); overflow-x: auto; }
.markdown pre code { padding: 0; background: none; font-size: 12px; white-space: pre; }
.markdown blockquote { padding: 2px 12px; border-left: 3px solid var(--border); color: var(--muted); }
.markdown hr { border: 0; border-top: 1px solid var(--border); margin: 12px 0; }
.markdown table { border-collapse: collapse; display: block; max-width: 100%; overflow-x: auto; }
.markdown th, .markdown td { padding: 4px 10px; border: 1px solid var(--border); }
.markdown th { background: var(--column); }

/* Mandar la tarea a ejecutar en una PC: cada PC es una opción, deshabilitada con el motivo si no sirve. */
.machine-choices { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.machine-choices legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.machine-list { display: flex; flex-direction: column; gap: 6px; }
.task-dialog label.machine-choice {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-weight: 400;
    cursor: pointer;
}
.task-dialog label.machine-choice:has(input:checked) { border-color: var(--accent); }
.task-dialog label.machine-choice.unavailable { cursor: not-allowed; opacity: 0.65; }
.machine-choice input { margin-top: 3px; }
.machine-choice .machine-name { font-weight: 600; }
.machine-choice .machine-state { display: block; color: var(--muted); font-size: 12px; }
.machine-choice .machine-state.ok { color: var(--completed-fg); }

/* Estado del último pedido de ejecución, en el detalle de la tarea. */
.request-row { margin-top: 8px; }
.request-status { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); }
.request-status.Pending { color: var(--in-progress-fg); }
.request-status.Accepted { color: var(--completed-fg); }
.request-status.Rejected, .request-status.Expired { color: var(--rejected-fg); }

/* Acciones del detalle (mover, retroalimentar, ver cambios, archivar). */
.small-select {
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
}
.task-dialog .note { margin: 0; padding: 8px 10px; border-radius: 6px; background: var(--in-progress-bg); }

/* Arrastrar una tarjeta a otra columna. */
.card[draggable="true"] { cursor: grab; }
.card.dragging { opacity: 0.5; }
/* Tarjeta o fila que cambió en la última actualización (la redibujó la consulta de cambios). */
.card.flash, .task-table tr.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: var(--flash); } }
@media (prefers-reduced-motion: reduce) {
    .card.flash, .task-table tr.flash { animation: none; }
}
.column.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; }

/* Diálogo «Retroalimentar». */
.feedback-dialog { width: min(680px, calc(100vw - 32px)); }
.feedback-history h2 { margin: 0 0 6px; font-size: 14px; }
.feedback-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.feedback-item { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; }
.feedback-item.pending { border-color: var(--accent); }
.feedback-header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.feedback-state { font-weight: 600; }
.feedback-item.pending .feedback-state { color: var(--accent-text); }
.feedback-header button { margin-left: auto; }
.feedback-text { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-follow-up { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.feedback-follow-up legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
/* Tareas archivadas. */
.archived-dialog { width: min(760px, calc(100vw - 32px)); }
.archived-list { display: flex; flex-direction: column; gap: 6px; max-height: min(60vh, 520px); overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.archived-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; }
.archived-main { flex: 1; min-width: 0; }
.archived-name { font-weight: 600; overflow-wrap: anywhere; }
.archived-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--muted); }
.archived-item button { flex: none; }
.task-dialog label.radio { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 400; }
.task-dialog label.radio select { width: auto; min-width: 160px; }

/* Tarjetas y filas que abren el detalle de la tarea. */
.card[data-task], .task-table tr[data-task] { cursor: pointer; }
.card[data-task]:hover { border-color: var(--accent); }
.card[data-task]:focus-visible, .task-table tr[data-task]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Detalle de una tarea (como TaskRunsPanel de la aplicación). */
.detail-dialog {
    width: min(1200px, calc(100vw - 32px));
    height: calc(100vh - 32px);
    max-height: none;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--app-bg);
    color: var(--text);
}
.detail-dialog[open] { display: flex; flex-direction: column; }
.detail-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.detail-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px 0; }
.detail-header h1 { flex: 1; margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.detail-header .icon-button { border-color: var(--border); color: var(--muted); }
.detail-header .icon-button:hover { background: var(--column); color: var(--text); }
.detail-info { padding: 10px 16px 0; }
.info-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.info-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.info-label { color: var(--muted); }
.info-item .badge.project { color: #FFFFFF; }
.info-item a { color: var(--accent-text); text-decoration: none; font-weight: 600; }
.info-item a:hover { text-decoration: underline; }
.accent { color: var(--accent-text); }
.avatar.small { flex-basis: 22px; width: 22px; height: 22px; border-width: 1px; }
.detail-description { margin-top: 8px; }
.detail-description summary { cursor: pointer; font-weight: 600; color: var(--accent-text); }
.detail-description div {
    margin-top: 6px;
    max-height: 160px;
    overflow: auto;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* La descripción va en Markdown formateado: los saltos de línea ya los da el HTML. */
.detail-description div.markdown {
    max-height: 320px;
    white-space: normal;
}
.detail-dialog .error { margin: 10px 16px 0; }
.hint { margin: 0; color: var(--muted); }

.detail-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 16px 16px;
}
.runs-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 10px;
    border-radius: 8px;
    background: var(--column);
}
.runs-panel h2 { margin: 0 2px 10px; font-size: 14px; }
.runs-panel .hint { margin: 4px; }
.runs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.run {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
}
.run:hover { border-color: var(--accent); }
.run.selected { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.run:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.run-title { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.run-title .ellipsis { flex: 1; min-width: 0; }
.run-meta, .run-message { margin-top: 4px; font-size: 11px; color: var(--muted); }
.run-message {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.run-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    padding: 4px 12px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
}
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.tabs button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.tabs button:hover { color: var(--text); }
.tabs button.selected { color: var(--text); border-bottom-color: var(--accent); }
.tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.tab-page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.log-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 8px; }
.secondary.small, .primary.small { padding: 4px 10px; font-size: 12px; }
.secondary.danger { color: var(--danger); }
.follow { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* Selector Resumen / Log completo sobre fondo claro (el de la barra es para fondo oscuro). */
.segmented.light button { height: 26px; border-color: var(--border); color: var(--text); font-size: 12px; }
.segmented.light button:hover { background: var(--column); }
.segmented.light button.selected { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }

.summary, .log, .tests, .shots, .qa-plan { flex: 1; min-height: 0; overflow: auto; }
.summary-section { padding: 10px 12px; margin-bottom: 10px; border-radius: 6px; background: var(--column); }
.summary-section h3 { margin: 0; font-size: 13px; }
.summary-section p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.summary-section ul { margin: 6px 0 0; padding-left: 18px; }
.summary-section li { margin: 2px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.summary-section li::marker { color: var(--muted); }
.summary-section ul.mono { font-size: 12px; }

.log {
    padding: 4px;
    border-radius: 6px;
    background: var(--log-bg);
    font: 12px/1.4 "Cascadia Mono", Consolas, monospace;
}
.log-line { display: grid; grid-template-columns: 64px 86px minmax(0, 1fr); padding: 2px 4px; }
.log-time, .log-label { color: var(--muted); }
.log-label { font-weight: 600; }
.log-text { white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 4px; }
.log-line.Info .log-text { color: var(--muted); }
.log-line.Assistant .log-label { color: var(--accent-text); }
.log-line.Assistant .log-text { font: 13px/1.4 "Segoe UI", system-ui, sans-serif; }
.log-line.Thinking .log-text { color: var(--muted); font: italic 12px/1.4 "Segoe UI", system-ui, sans-serif; }
.log-line.Tool .log-label { color: var(--log-tool-label); }
.log-line.Tool .log-text { color: var(--log-tool-text); }
.log-line.ToolResult .log-text { color: var(--log-tool-result-text); background: var(--log-tool-result-bg); padding: 3px 6px; }
.log-line.Command .log-text { color: var(--log-command); }
.log-line.Prompt .log-text { background: var(--log-prompt-bg); padding: 3px 6px; }
.log-line.Result .log-label, .log-line.Result .log-text { color: var(--log-result); }
.log-line.Result .log-text { font-weight: 600; }
.log-line.Warning .log-label, .log-line.Warning .log-text { color: var(--log-warning); }
.log-line.Stderr .log-label { color: var(--log-warning); }
.log-line.Stderr .log-text { color: var(--log-stderr); }
.log-line.Error .log-label, .log-line.Error .log-text { color: var(--danger); }

.tests {
    margin: 0;
    padding: 8px;
    border-radius: 6px;
    background: var(--log-bg);
    font: 12px/1.4 "Cascadia Mono", Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.shots { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 12px; }

/* Plan de pruebas de QA (qa-plan.js): cada caso como un encabezado destacado, la prioridad en una etiqueta de color
   y el resultado esperado en verde, para que la persona que lo ejecuta lo siga de un vistazo. */
.qa-plan { padding: 12px 16px; border-radius: 6px; background: var(--log-bg); }
.qa-plan h1, .qa-plan h2, .qa-plan h3, .qa-plan h4 { color: var(--accent-text); }
.qa-plan h1 { padding-bottom: 6px; border-bottom: 2px solid var(--accent); }
.qa-plan h2 { padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.qa-plan .qa-case {
    margin-top: 22px;
    padding: 8px 12px;
    border-left: 4px solid var(--accent);
    border-radius: 0 6px 6px 0;
    background: var(--in-progress-bg);
    color: var(--in-progress-fg);
}
.qa-plan .qa-id {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--accent);
    color: #FFFFFF;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.8em;
    vertical-align: middle;
}
.qa-priority {
    display: inline-block;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.qa-priority-high { background: var(--error-bg); color: var(--error-fg); }
.qa-priority-medium { background: var(--rejected-bg); color: var(--rejected-fg); }
.qa-priority-low { background: var(--completed-bg); color: var(--completed-fg); }
.qa-plan .qa-expected { color: var(--completed-fg); }
.qa-plan ol > li { margin: 3px 0; }
.qa-plan ol > li::marker { color: var(--accent-text); font-weight: 700; }
.qa-plan li.task-item input { accent-color: var(--accent); }
.shot {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 260px;
    max-width: 100%;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
    text-decoration: none;
}
.shot:hover { border-color: var(--accent); }
.shot img { width: 100%; height: 160px; object-fit: contain; }
.summary::-webkit-scrollbar, .log::-webkit-scrollbar, .runs::-webkit-scrollbar, .tests::-webkit-scrollbar,
.shots::-webkit-scrollbar, .qa-plan::-webkit-scrollbar { width: 8px; height: 8px; }
.summary::-webkit-scrollbar-thumb, .log::-webkit-scrollbar-thumb, .runs::-webkit-scrollbar-thumb,
.tests::-webkit-scrollbar-thumb, .shots::-webkit-scrollbar-thumb,
.qa-plan::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; }

/* Celular (angosto, o acostado y bajo): el detalle ocupa la pantalla y se desplaza entero, como una página. El título
   con ✕ queda fijo arriba; debajo van los datos, las acciones y la descripción, después las ejecuciones (con altura
   limitada) y al final las pestañas, que miden casi toda la pantalla y desplazan su contenido por dentro. Así los
   datos de la tarea ya no se comen el espacio del log: se pasa de unos a otro deslizando. */
@media (max-width: 760px), (max-height: 500px) {
    .detail-dialog {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-width: none;
        max-height: none;
        border: 0;
        border-radius: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .detail-dialog > *, .detail-body > * { flex-shrink: 0; }
    .detail-header {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
        background: var(--app-bg);
    }
    .detail-header h1 { font-size: 15px; }
    .detail-info { padding: 10px 12px 0; }
    .detail-dialog .error { margin: 10px 12px 0; }
    .detail-body { flex: none; display: flex; flex-direction: column; padding: 12px 12px 16px; }
    .runs-panel { max-height: 45vh; max-height: 45dvh; }
    .run-panel { height: calc(100vh - 64px); height: calc(100dvh - 64px); min-height: 320px; padding: 4px 8px 8px; }
    .tabs { overflow-x: auto; }
    .tabs button { flex-shrink: 0; padding: 8px 10px; }
    .log-line { grid-template-columns: 56px 72px minmax(0, 1fr); }
}
/* Muy angosto: el log usa el ancho para el texto (la hora y la etiqueta van arriba de cada línea). */
@media (max-width: 480px) {
    .log-line { grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; }
    .log-text { grid-column: 1 / -1; }
}

/* Tablero: las columnas se reparten el ancho de la pantalla (con un mínimo; si no caben, desplazamiento horizontal);
   cada columna se desplaza sola en vertical. El tamaño elegido es un zoom (--board-zoom, ver board-display.js). */
.board {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 8px 10px 10px;
    overflow-x: auto;
    zoom: var(--board-zoom, 1);
}

.column {
    flex: 1 1 0;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 8px;
    border-radius: 8px;
    background: var(--column);
}
.board.compact .column { min-width: 140px; }

/* Columna vacía colapsada: una franja con el avatar, la cantidad y el nombre en vertical. */
/* .board delante para ganarle al mínimo de las columnas compactas. */
.board .column.collapsed {
    flex: 0 0 auto;
    min-width: 0;
    width: 48px;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    opacity: 0.75;
}
.column.collapsed .avatar { flex-basis: 32px; width: 32px; height: 32px; }
.column.collapsed .column-title {
    writing-mode: vertical-rl;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 0;
}

.column-header { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; }
.avatar {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--avatar-ring);
    background: var(--avatar-ring);
    overflow: hidden;
}
.avatar svg { display: block; width: 100%; height: 100%; border-radius: 50%; }
.column-titles { flex: 1; min-width: 0; }
.column-title { font-size: 14px; font-weight: 700; }
.cli-label { margin-top: 1px; font-size: 11px; font-weight: 600; color: var(--accent-text); }
.cli-label.claude { color: var(--claude-text); }
.cli-label.pr { color: var(--pr-text); }
.cli-label.pipeline { color: var(--pipeline-text); }
.cli-label.build { color: var(--build-text); }
.cli-label.merge { color: var(--merge-text); }
.transitions { margin: -4px 2px 10px; font-size: 11px; color: var(--muted); white-space: pre; }

.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.badge {
    display: inline-block;
    max-width: 100%;
    padding: 1px 8px;
    border-radius: 9px;
    background: var(--badge);
    font-size: 11px;
    font-weight: 600;
}

.badge.approval { background: var(--rejected-bg); color: var(--rejected-fg); }
/* Encargado de la tarea en un agente humano. */
.badge.assignee { background: var(--in-progress-bg); color: var(--in-progress-fg); }
.approval-list { margin: 6px 0 0; padding-left: 18px; }
.approval-list li { margin-bottom: 6px; }
.approval-comment { white-space: pre-wrap; color: var(--muted); }

.cards {
    flex: 1;
    min-height: 80px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 2px;
}
.cards::-webkit-scrollbar, .board::-webkit-scrollbar { width: 8px; height: 8px; }
.cards::-webkit-scrollbar-thumb, .board::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; }

.card {
    flex: 0 0 auto;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
}
/* Vista compacta: el título (hasta dos líneas) a todo el ancho y debajo el estado y el proyecto. */
.card.compact { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; }
.card.compact .card-title {
    min-width: 0;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Si no entran en una fila, el proyecto baja debajo del estado; un nombre largo se corta con «…». */
.card-compact-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.card-compact-meta .badge { min-width: 0; }
.card-pr-link { font-size: 11px; color: var(--accent-text); text-decoration: none; white-space: nowrap; }
.card-pr-link:hover { text-decoration: underline; }
.card-compact-pr { margin-top: 4px; font-size: 11px; }
.board.compact .cards { gap: 4px; }
/* Destacadas a distancia: en ejecución (azul, con un pulso suave) y con error (rojo), con el estado en color sólido. */
.card.running, .card.failed { border-width: 2px; padding-left: 12px; }
.card.compact.running, .card.compact.failed { padding-left: 12px; }
.card.running {
    border-color: var(--running);
    background: color-mix(in srgb, var(--running) 12%, var(--surface));
    box-shadow: inset 6px 0 0 var(--running);
    animation: running-pulse 2s ease-in-out infinite;
}
.card.failed {
    border-color: var(--failed);
    background: color-mix(in srgb, var(--failed) 14%, var(--surface));
    box-shadow: inset 6px 0 0 var(--failed);
}
.card.running .status.InProgress { background: var(--running); color: #FFFFFF; }
.card.running .status.InProgress .spinner { border-color: rgba(255, 255, 255, 0.4); border-top-color: #FFFFFF; }
.card.failed .status.Error { background: var(--failed); color: #FFFFFF; }
@keyframes running-pulse {
    50% { box-shadow: inset 6px 0 0 var(--running), 0 0 0 3px color-mix(in srgb, var(--running) 35%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .card.running { animation: none; }
}
.task-table tr.running td:first-child { box-shadow: inset 5px 0 0 var(--running); }
.task-table tr.failed td:first-child { box-shadow: inset 5px 0 0 var(--failed); }
.task-table tr.running .status.InProgress { background: var(--running); color: #FFFFFF; }
.task-table tr.failed .status.Error { background: var(--failed); color: #FFFFFF; }
.card-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.card-badges .badge { min-width: 0; }
.card .project { color: #FFFFFF; }
.card-title-row { display: flex; gap: 8px; align-items: baseline; }
.card-title { flex: 1; font-weight: 600; overflow-wrap: anywhere; }
.position { font-size: 11px; color: var(--muted); }
/* Avatar del creador de la tarea: un círculo chico con su foto o sus iniciales sobre su color. */
.user-avatar {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    color: #FFFFFF;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    user-select: none;
}
.description {
    margin-top: 4px;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
}
.meta { margin-top: 2px; font-size: 11px; color: var(--accent-text); }
.meta.first { margin-top: 6px; }
.mono { font-family: "Cascadia Mono", Consolas, monospace; }
.meta a { color: inherit; text-decoration: none; }
.meta a:hover { text-decoration: underline; }
/* Estado del PR (lo sigue la PC de la tarea) y conflictos. */
.pr-status { color: var(--muted); }
.pr-status.merged { color: var(--completed-fg); }
.pr-status.failed { color: var(--error-fg); }
.pr-conflicts { color: var(--rejected-fg); font-weight: 600; }

.card-footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.card-footer .stats { margin-left: auto; text-align: right; font-size: 11px; color: var(--muted); }

/* Lista: una fila por tarea; la tabla se desplaza dentro de la página y el encabezado queda fijo. */
.list {
    flex: 1;
    min-height: 0;
    margin: 8px 10px 10px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    zoom: var(--board-zoom, 1);
}
.list::-webkit-scrollbar { width: 8px; height: 8px; }
.list::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; }
.task-table { width: 100%; min-width: 980px; border-collapse: collapse; }
.task-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    background: var(--column);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
}
.task-table th:hover, .task-table th.sorted { color: var(--text); }
.task-table .sort-arrow { margin-left: 6px; font-size: 9px; }
.task-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    max-width: 240px;
}
.task-table tbody tr:last-child td { border-bottom: 0; }
.task-table tbody tr:hover td { background: var(--app-bg); }
.task-table td.grow { max-width: none; width: 40%; }
.task-table .num { white-space: nowrap; }
.task-table .muted { color: var(--muted); font-size: 12px; }
.task-table .badge { color: #FFFFFF; vertical-align: middle; }
.task-table .badge.machine { color: inherit; }
.task-table .badge.assignee { color: var(--in-progress-fg); }
.agent-cell { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.agent-cell .avatar { flex: 0 0 24px; width: 24px; height: 24px; border-width: 1px; }
.task-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }
.branch-cell { font-size: 11px; color: var(--accent-text); min-width: 0; }
.branch-cell a { color: inherit; text-decoration: none; }
.branch-cell a:hover { text-decoration: underline; }
.list-empty { margin: 12vh 0 0; text-align: center; color: var(--muted); }

/* Tarjetas: cada una con toda su información sin recortar, en una grilla que en el celular queda de una sola columna
   (una debajo de la otra) y en una pantalla ancha pone varias una al lado de la otra. */
.list.feed-view { border: 0; border-radius: 0; background: transparent; }
.feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    align-items: start;
    gap: 10px;
    padding-bottom: 16px;
}
.feed .card { padding: 10px 12px; }
/* Compactas: más angostas y con menos relleno, para ver más tareas a la vez. */
.list.compact .feed { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 6px; }
.feed .card.compact { padding: 6px 10px; }
.card.compact .card-agent { margin-bottom: 2px; padding-bottom: 4px; }
.feed .card.running, .feed .card.failed { padding-left: 16px; }
.feed .card .ellipsis { white-space: normal; overflow-wrap: anywhere; }
.feed .card .description { display: block; overflow: visible; font-size: 13px; }
.feed .card .meta { font-size: 12px; }
.feed .card-footer { flex-wrap: wrap; align-items: flex-start; }
.feed .card-footer .stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 10px; }
.card-agent {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}
.card-agent .avatar { flex: 0 0 22px; width: 22px; height: 22px; border-width: 1px; }

/* Estado de ejecución (StatusBadge) */
.status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px 2px 7px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.status .glyph { font-size: 10px; }
.status.NotStarted { background: var(--not-started-bg); color: var(--not-started-fg); }
.status.InProgress { background: var(--in-progress-bg); color: var(--in-progress-fg); }
.status.Completed { background: var(--completed-bg); color: var(--completed-fg); }
.status.Error { background: var(--error-bg); color: var(--error-fg); }
.status.Rejected { background: var(--rejected-bg); color: var(--rejected-fg); }
.spinner {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--spinner-track);
    border-top-color: var(--spinner);
    animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .spinner, .icon-button.spinning { animation: none; }
}

@media (max-width: 600px) {
    .board { padding: 8px 10px; }
    .column { flex-basis: min(300px, calc(100vw - 32px)); }
}

/* Celular (angosto, o acostado y bajo): la barra muestra solo la marca, «Nueva tarea», el botón de los filtros y
   actualizar; los filtros, los links, el tema y cerrar sesión (.collapsible) se despliegan debajo con el botón. Así las
   columnas tienen casi toda la pantalla, y al deslizar el tablero cada columna queda alineada al borde. */
@media (max-width: 760px), (max-height: 500px) {
    .topbar { gap: 8px; padding: 8px 10px; max-height: 70vh; overflow-y: auto; }
    .brand { font-size: 14px; }
    .filters-toggle { display: inline-block; margin-right: auto; white-space: nowrap; }
    .topbar:not(.filters-open) .collapsible { display: none; }
    .topbar.filters-open .filters-toggle { background: rgba(255, 255, 255, 0.15); }
    /* Desplegados van debajo de la fila principal, sin los separadores verticales de la barra ancha. */
    .topbar .collapsible { order: 1; }
    .topbar .spacer { display: none; }
    .filters { margin-left: 0; }
    .filters.machines, .filters.owners, .agent-filter { padding-left: 0; border-left: 0; }
    .agent-filter select { max-width: calc(100vw - 120px); }
    .board { scroll-snap-type: x proximity; scroll-padding-inline: 10px; }
    .column { scroll-snap-align: start; }
}
/* Muy angosto: la marca deja lugar para que los botones quepan en una sola fila. */
@media (max-width: 360px) {
    .brand { display: none; }
}

/* Prioridad (punto y texto en su color) y etiquetas (fondo de su color) */
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.card-tags .badge { min-width: 0; }
.badge.priority {
    border: 1px solid var(--priority-color);
    background: transparent;
    color: var(--priority-color);
    font-size: 10px;
}
.badge.priority .dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    background: var(--priority-color);
}
.badge.label { color: #FFFFFF; font-size: 10px; }
/* Riesgo de los cambios: fondo lleno de su color (verde, amarillo o rojo) para que se vea de lejos. */
.badge.risk { background: var(--risk-color); color: #FFFFFF; font-size: 10px; white-space: nowrap; }
.badge.risk.risk-medium { color: #422006; }
.task-table .badge.risk.risk-medium { color: #422006; }
.risk-row { gap: 6px 8px; }
.risk-row .badge.risk { font-size: 11px; }
.risk-justification { white-space: pre-wrap; }
.task-table .badge.priority { color: var(--priority-color); }
.label-cell { display: flex; flex-wrap: wrap; gap: 4px; }
.task-dialog fieldset.labels-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 8px 10px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
}
.task-dialog fieldset.labels-field legend { padding: 0 4px; font-weight: 600; }
.label-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
/* Ramas comunes del proyecto: un clic las pone como rama base. */
.branch-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.branch-picks[hidden] { display: none; }
.branch-pick {
    padding: 2px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
}
.branch-pick:hover { border-color: var(--accent); color: var(--accent-text); }
.task-dialog label.label-check { flex-direction: row; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }
/* Elegir de qué tareas depende: buscador y lista con desplazamiento (el proyecto puede tener muchas tareas). */
.dependency-picker { display: flex; flex-direction: column; gap: 6px; }
.dependency-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
}
.task-dialog label.dependency-check {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    cursor: pointer;
    min-width: 0;
}
.dependency-check span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dependency-check small { flex: none; }
.dependency-list[hidden], .task-dialog label.dependency-check[hidden] { display: none; }
.dependency-count { color: var(--muted); }

/* Tamaños grandes (para leer a distancia): más contraste, sin textos grises y con títulos más gruesos. */
:root[data-size="large"] .board, :root[data-size="xlarge"] .board,
:root[data-size="large"] .list, :root[data-size="xlarge"] .list { --muted: var(--text); }
:root[data-size="large"] .card, :root[data-size="xlarge"] .card { border-color: color-mix(in srgb, var(--text) 35%, var(--border)); }
:root[data-size="large"] .card-title, :root[data-size="xlarge"] .card-title { font-weight: 700; }

/* Modo TV (pantalla de monitoreo): sin la barra superior, todo el espacio para las columnas. */
body.tv .topbar { display: none; }
body.tv .board { padding: 6px; gap: 6px; }
body.tv .list { margin: 6px; }
body.tv .error { margin: 6px 6px 0; }
/* Barrita del modo TV: casi transparente hasta pasarle el mouse (o el foco). */
.tv-bar {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--topbar);
    color: var(--nav-text);
    opacity: 0.35;
    transition: opacity 0.2s;
}
.tv-bar:hover, .tv-bar:focus-within { opacity: 1; }
.tv-bar .icon-button { width: auto; min-width: 30px; padding: 0 6px; font-size: 13px; font-weight: 700; }
.tv-bar .icon-button:disabled { opacity: 0.4; cursor: default; }

/* Subtareas y dependencias: bloqueada, avance de las subtareas y la división propuesta por un agente */
.badge.blocked { margin-left: 4px; background: var(--rejected-bg); color: var(--rejected-fg); }
.blocked-text { color: var(--log-warning); font-weight: 600; }
.meta.relation { color: var(--muted); }
.subtasks { display: inline-flex; align-items: center; gap: 6px; }
.subtasks progress { width: 60px; height: 6px; }
.info-row.relations { flex-wrap: wrap; }
.split-proposal { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; }
.split-proposal ol { margin: 8px 0; padding-left: 20px; }
.split-item { margin-bottom: 8px; }
.split-item input[type="text"], .split-item textarea { display: block; width: 100%; box-sizing: border-box; margin-bottom: 4px; }
.split-proposal .error-text { color: var(--log-warning); }

/* Vista flujo: los agentes del flujo en las filas que quepan a lo ancho y las flechas de a quién pasa sola la tarea (ver flow-graph.js). Cada
   tipo de flecha con el color de su estado: termina bien, rechaza, falla, PR mezclado y comentarios en el PR. */
.flow {
    flex: 1;
    min-height: 0;
    padding: 8px 10px 10px;
    overflow-y: auto;
    zoom: var(--board-zoom, 1);
}
.flow .success { --flow-color: var(--completed-fg); }
.flow .rejection { --flow-color: var(--rejected-fg); }
.flow .failure { --flow-color: var(--failed); }
.flow .merged { --flow-color: var(--pr-text); }
.flow .comments { --flow-color: var(--pipeline-text); }
.flow-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 2px 10px; font-size: 12px; color: var(--muted); }
.flow-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.flow-legend-line { width: 22px; height: 0; border-top: 2px solid var(--flow-color); }
.flow-graph { margin-bottom: 12px; padding: 8px 10px; border-radius: 8px; background: var(--column); }
.flow-name { margin: 2px 2px 6px; font-size: 15px; }
.flow-hint { margin: 2px 2px 6px; font-size: 12px; color: var(--muted); }
.flow-scroll { overflow-x: auto; }
.flow-canvas { position: relative; }
.flow-edges { position: absolute; left: 0; top: 0; overflow: visible; }
.flow-edge path { fill: none; stroke: var(--flow-color); stroke-width: 2; }
.flow-edge circle { fill: var(--surface); stroke: var(--flow-color); stroke-width: 1.5; }
.flow-edge text {
    fill: var(--flow-color);
    font-size: 11px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}
.flow-edge:hover path { stroke-width: 3; }
.flow-arrow path { fill: var(--flow-color); }
.flow-node {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.flow-node:hover, .flow-node:focus-visible { border-color: var(--accent); outline: none; box-shadow: 0 0 0 1px var(--accent); }
.flow-node.human { border-style: dashed; }
.flow-node.approval { border-color: var(--rejected-fg); }
.flow-node .avatar { flex-basis: 32px; width: 32px; height: 32px; }
/* Agente con tareas en ejecución: borde y halo que pulsa en el color de «en ejecución» (como las tarjetas), y un spinner
   en su cantidad de tareas. */
.flow-node.running {
    border-color: var(--running);
    box-shadow: 0 0 0 1px var(--running);
    animation: flow-running-glow 2s ease-in-out infinite;
}
.flow-node.running .badge { display: inline-flex; align-items: center; gap: 5px; background: var(--running); color: #FFFFFF; }
.flow-node.running .badge .spinner { border-color: rgba(255, 255, 255, 0.4); border-top-color: #FFFFFF; }
@keyframes flow-running-glow {
    50% { box-shadow: 0 0 0 1px var(--running), 0 0 14px 4px color-mix(in srgb, var(--running) 55%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .flow-node.running { animation: none; }
}
.flow-node-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* El título hace word wrap (nunca se corta): el agente crece a lo que mida (flowContentHeight en dashboard.js). */
.flow-node-title { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.flow-node-type { font-size: 11px; color: var(--muted); }
.flow-node-return { color: var(--rejected-fg); }
.flow-measure { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }
.flow-measure .flow-node { position: static; animation: none; }
.flow-entry { position: absolute; font-size: 11px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }