/* Modal generico para historial / timeline / quick open dentro de /claude */
.cl-spec-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 200;
    animation: cl-spec-modal-in 150ms ease;
}
@keyframes cl-spec-modal-in { from { opacity: 0; } to { opacity: 1; } }
.cl-spec-modal {
    width: min(760px, 90vw);
    max-height: 80vh;
    background: #000000;
    border: 1px solid rgba(76, 214, 224, 0.25);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 40px rgba(76, 214, 224, 0.08);
    display: flex; flex-direction: column;
    overflow: hidden;
    color: #d9dee5;
}
.cl-spec-modal-head {
    background: #0a0a0a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cl-spec-modal-head span:first-child { color: #4cd6e0; }
.cl-spec-modal-close { color: #8a929c; }
.cl-spec-modal-close:hover { color: #4cd6e0; }
.cl-spec-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cl-border);
    color: var(--cl-text);
    font-size: 13px;
    font-family: var(--cl-mono, ui-monospace, monospace);
}
.cl-spec-modal-close {
    background: transparent; border: none; color: var(--cl-text-dim);
    font-size: 20px; cursor: pointer; line-height: 1; padding: 0 6px;
}
.cl-spec-modal-close:hover { color: var(--cl-accent); }

/* Navegación entre tareas dentro del modal detalle (← contador →). */
.cl-task-nav {
    display: inline-flex; align-items: center; gap: 8px;
    margin-left: auto; margin-right: 12px;
}
.cl-task-nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0;
    border-radius: 5px;
    border: 1px solid rgba(76,214,224,0.35);
    background: rgba(76,214,224,0.08);
    color: #4cd6e0;
    font-size: 16px; line-height: 1;
    cursor: pointer;
    transition: background 120ms ease, opacity 120ms ease;
}
.cl-task-nav-btn:hover:not(:disabled) {
    background: rgba(76,214,224,0.18);
    border-color: rgba(76,214,224,0.65);
}
.cl-task-nav-btn:disabled {
    opacity: 0.35; cursor: not-allowed;
}
.cl-task-nav-count {
    font-size: 11px; color: #8a929c;
    min-width: 42px; text-align: center;
    font-family: var(--cl-mono, ui-monospace, monospace);
}
@media (max-width: 640px) {
    .cl-task-nav { gap: 6px; margin-right: 8px; }
    .cl-task-nav-btn { width: 24px; height: 24px; font-size: 14px; }
    .cl-task-nav-count { font-size: 10.5px; min-width: 36px; }
}

/* Mobile Reporte por Tarea: colapsar grid a 2 filas / 1 col. */
@media (max-width: 640px) {
    .cl-r-row {
        grid-template-columns: 1fr auto auto;
        grid-template-areas:
            "fase   time  dur"
            "subj   subj  subj"
            "chat   chat  chat";
        gap: 4px 8px;
    }
    .cl-r-row-fase { grid-area: fase; }
    .cl-r-row-time { grid-area: time; }
    .cl-r-row-dur { grid-area: dur; }
    .cl-r-row-subject { grid-area: subj; }
    .cl-r-row-chat { grid-area: chat; font-size: 10.5px; }
    .cl-r-subproy { margin: 4px; padding-left: 6px; }
    .cl-r-subproy-name { font-size: 11px; }
    .cl-r-subproy summary { padding: 5px 6px; }
}
@media (max-width: 380px) {
    .cl-r-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "fase"
            "subj"
            "chat"
            "time"
            "dur";
    }
    .cl-r-row-time, .cl-r-row-dur { text-align: left; }
}
.cl-spec-modal-body {
    flex: 1; overflow-y: auto;
    padding: 12px 16px;
    color: var(--cl-text);
    font-size: 13px;
}
.cl-spec-modal-loading { padding: 20px; color: var(--cl-text-dim); text-align: center; }

/* Historial git */
.cl-spec-hist-row {
    display: grid;
    grid-template-columns: 80px 1fr 130px 90px;
    gap: 10px;
    padding: 6px 8px;
    align-items: center;
    border-bottom: 1px dashed var(--cl-border);
    font-family: var(--cl-mono, ui-monospace, monospace);
    font-size: 12px;
}
.cl-spec-hist-row { border-bottom: 1px dashed rgba(255,255,255,0.06); }
.cl-spec-hist-sha { color: #4cd6e0; }
.cl-spec-hist-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d9dee5; }
.cl-spec-hist-date { color: #5f6770; font-size: 11px; }
.cl-spec-hist-diff .add { color: #4ade80; }
.cl-spec-hist-diff .del { color: #f47171; }

/* Timeline */
/* Timeline horizontal */
.cl-spec-modal-large {
    width: 92vw !important;
    max-width: 92vw !important;
    height: 90vh !important;
    max-height: 90vh !important;
}
.cl-spec-modal-large .cl-spec-modal-body {
    display: flex;
    flex-direction: column;
}
.cl-recent-toolbar {
    padding: 10px 16px;
    background: #0a0a0a;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 12.5px;
    color: #b3bac2;
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cl-recent-commit-mini {
    display: flex;
    gap: 6px;
    align-items: baseline;
    font-size: 11.5px;
    padding: 2px 4px;
    color: #b3bac2;
    line-height: 1.3;
}
.cl-recent-commit-mini .cl-recent-repo {
    font-size: 9.5px;
    min-width: 55px;
    padding: 0 4px;
}
.cl-recent-commit-mini .cl-recent-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.cl-recent-more {
    font-size: 11px;
    color: #6f7780;
    padding: 4px;
    font-style: italic;
}
.cl-recent-list-inner {
    padding: 12px 16px;
}

/* Grilla de actividad reciente: filas por repo, columnas por día */
.cl-recent-grid {
    display: flex;
    flex-direction: column;
    padding: 8px 40px;
    gap: 0;
    overflow-x: auto;
    background: transparent;
}
.cl-recent-grid-row {
    display: grid;
    grid-template-columns: var(--cl-grid-cols);
    align-items: center;
    min-height: 44px;
}
.cl-recent-grid-head-row {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #0a0a0a;
    min-height: 32px;
    border-bottom: 1px solid rgba(76, 214, 224, 0.15);
}
.cl-recent-grid-day-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: var(--cl-mono, ui-monospace, monospace);
    color: #8a929c;
    padding: 6px 4px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    line-height: 1.15;
}
.cl-recent-grid-day-dow {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #6a737d;
}
.cl-recent-grid-day-date { font-size: 11px; }
.cl-recent-grid-day-head:hover { color: #d9dee5; }
.cl-recent-grid-day-head:hover .cl-recent-grid-day-dow { color: #d9dee5; }
.cl-recent-grid-day-head[data-selected="true"] {
    color: #4cd6e0;
    border-bottom-color: #4cd6e0;
}
.cl-recent-grid-day-head[data-selected="true"] .cl-recent-grid-day-dow { color: #4cd6e0; }
.cl-recent-grid-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    margin: 2px 3px;
    min-height: 34px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease;
    font-family: var(--cl-mono, ui-monospace, monospace);
    font-size: 12px;
    color: #d9dee5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-recent-grid-cell[data-empty="true"] {
    cursor: default;
}
.cl-recent-grid-cell:not([data-empty="true"]):hover {
    background: rgba(76, 214, 224, 0.04);
}
.cl-recent-grid-cell:not([data-empty="true"]):hover .cl-recent-grid-node {
    transform: rotate(45deg) scale(1.15);
}
.cl-recent-grid-cell[data-selected="true"]:not([data-empty="true"]) {
    background: rgba(76, 214, 224, 0.08);
}
.cl-recent-grid-cell[data-selected="true"]:not([data-empty="true"]) .cl-recent-grid-node {
    background: #4cd6e0;
    box-shadow: 0 0 10px rgba(76, 214, 224, 0.55);
}
.cl-recent-grid-node {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    background: rgba(76, 214, 224, 0.7);
    transform: rotate(45deg);
    border-radius: 1px;
    transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.cl-recent-grid-repo {
    flex: 1 1 auto;
    color: #d9dee5;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.cl-recent-grid-count {
    flex: 0 0 auto;
    color: #6a737d;
    font-size: 11px;
}
.cl-recent-grid-row:not(.cl-recent-grid-head-row) + .cl-recent-grid-row:not(.cl-recent-grid-head-row) {
    border-top: 1px solid rgba(255,255,255,0.02);
}

.cl-recent-repo-group {
    margin-bottom: 18px;
}
.cl-recent-repo-group:last-child { margin-bottom: 0; }
.cl-recent-repo-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #0a0a0a;
    padding: 8px 4px 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(76, 214, 224, 0.25);
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--cl-mono, ui-monospace, monospace);
}
.cl-recent-repo-name {
    color: #4cd6e0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.cl-recent-repo-count {
    color: #6a737d;
    font-size: 11px;
}
.cl-recent-repo-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #0a0a0a;
    padding: 8px 4px 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(76, 214, 224, 0.25);
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--cl-mono, ui-monospace, monospace);
}
.cl-recent-repo-name {
    color: #4cd6e0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.cl-recent-repo-count {
    color: #6a737d;
    font-size: 11px;
}

/* Detalle del día: repos como columnas lado a lado */
.cl-recent-cols {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    overflow-x: auto;
    align-items: flex-start;
    min-height: 0;
}
.cl-recent-repo-col {
    flex: 1 1 0;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.015);
    border-radius: 8px;
    border: 1px solid transparent;
    overflow: hidden;
    max-height: 100%;
}
.cl-recent-repo-col[data-active="true"] {
    border-color: rgba(76,214,224,0.5);
    background: rgba(76,214,224,0.04);
}
.cl-recent-repo-col-head {
    padding: 8px 12px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    border-bottom: 1px solid rgba(76, 214, 224, 0.2);
    font-family: var(--cl-mono, ui-monospace, monospace);
    position: sticky;
    top: 0;
    background: #0a0a0a;
    z-index: 1;
}
.cl-recent-repo-col-body {
    padding: 6px 8px 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Toggle Grilla / Calendario */
.cl-recent-view-toggle {
    display: inline-flex;
    gap: 2px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    padding: 2px;
}
.cl-recent-view-btn {
    background: transparent;
    border: 0;
    color: #8a929c;
    padding: 4px 12px;
    font-size: 11.5px;
    font-family: var(--cl-mono, ui-monospace, monospace);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.cl-recent-view-btn:hover { color: #d9dee5; }
.cl-recent-view-btn[data-active="true"] {
    background: rgba(76,214,224,0.18);
    color: #4cd6e0;
}

/* Vista Calendario mensual */
.cl-cal-wrap {
    padding: 12px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cl-cal-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #4cd6e0;
    font-size: 15px;
    font-family: var(--cl-mono, ui-monospace, monospace);
    text-transform: capitalize;
    letter-spacing: 0.4px;
    padding: 4px 0;
}
.cl-cal-title-text {
    min-width: 160px;
    text-align: center;
}
.cl-cal-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(76, 214, 224, 0.35);
    background: rgba(76, 214, 224, 0.08);
    color: #4cd6e0;
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.cl-cal-nav-btn:hover {
    background: rgba(76, 214, 224, 0.18);
    border-color: rgba(76, 214, 224, 0.65);
}
.cl-cal-nav-btn:active {
    transform: scale(0.94);
}
.cl-cal-nav-btn:focus-visible {
    outline: 2px solid #4cd6e0;
    outline-offset: 2px;
}
.cl-cal-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cl-cal-dow-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.cl-cal-dow-head {
    text-align: center;
    color: #6a737d;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 4px 0;
    font-family: var(--cl-mono, ui-monospace, monospace);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cl-cal-cells {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.cl-cal-cell {
    min-height: 88px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.015);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background 0.12s ease, box-shadow 0.12s ease;
    overflow: hidden;
}
.cl-cal-cell:hover { background: rgba(76,214,224,0.06); }
.cl-cal-cell[data-in-month="false"] { opacity: 0.35; }
.cl-cal-cell[data-today="true"] .cl-cal-cell-num { color: #4cd6e0; font-weight: 600; }
.cl-cal-cell[data-cursor="true"] {
    box-shadow: inset 0 0 0 1px rgba(76,214,224,0.55);
    background: rgba(76,214,224,0.08);
}
.cl-cal-cell-head {
    display: flex;
    justify-content: flex-start;
}
.cl-cal-cell-num {
    font-size: 12px;
    color: #d9dee5;
    font-family: var(--cl-mono, ui-monospace, monospace);
}
.cl-cal-cell-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.cl-cal-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-family: var(--cl-mono, ui-monospace, monospace);
    color: #d9dee5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-cal-chip-node {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    background: rgba(76,214,224,0.75);
    transform: rotate(45deg);
    border-radius: 1px;
}
.cl-cal-chip-repo {
    flex: 1 1 auto;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #b3bac2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-cal-chip-count {
    flex: 0 0 auto;
    color: #6a737d;
    font-size: 10px;
}

.cl-spec-qo-group {
    padding: 6px 12px 4px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4cd6e0;
    font-family: var(--cl-mono, ui-monospace, monospace);
    background: #050505;
    border-top: 1px solid rgba(255,255,255,0.04);
    position: sticky;
    top: 0;
}
.cl-spec-qo-group:first-child { border-top: 0; }
.cl-spec-qo-row.cl-spec-qo-grouped {
    padding-left: 20px;
}
.cl-spec-explorer-toolbar {
    padding: 10px 12px;
    background: #0a0a0a;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: sticky;
    top: 0;
    z-index: 2;
}
.cl-spec-explorer-toolbar input {
    width: 100%;
    background: #000;
    color: #d9dee5;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-family: var(--cl-mono, ui-monospace, monospace);
    outline: none;
}
.cl-spec-explorer-toolbar input:focus { border-color: #4cd6e0; }
.cl-spec-explorer-split {
    display: flex;
    flex: 1;
    min-height: 0;
    max-height: calc(90vh - 90px);
}
.cl-spec-explorer-left {
    width: 35%;
    min-width: 260px;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #000;
    border-right: 1px solid rgba(255,255,255,0.06);
}
.cl-spec-explorer-tree {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
    font-family: var(--cl-mono, ui-monospace, monospace);
    font-size: 12.5px;
}
.cl-spec-explorer-oe {
    flex: 0 0 auto;
    max-height: 40%;
    overflow-y: auto;
    padding: 4px 0 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-family: var(--cl-mono, ui-monospace, monospace);
    font-size: 12.5px;
}
.cl-spec-explorer-oe[hidden] { display: none; }
.cl-spec-explorer-oe-header {
    padding: 6px 12px 4px;
    color: #6a737d;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-family: var(--cl-sans, ui-sans-serif, system-ui);
}
.cl-spec-explorer-oe-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px 3px 12px;
    color: #d9dee5;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-spec-explorer-oe-row:hover { background: rgba(255,255,255,0.04); }
.cl-spec-explorer-oe-row[data-active="true"] { background: rgba(76,214,224,0.18); border-left: 2px solid #4cd6e0; padding-left: 10px; }
.cl-spec-explorer-oe-row[data-current="true"] span { color: #4cd6e0; }
.cl-spec-explorer-oe-row span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.cl-spec-explorer-chat-preview {
    padding: 16px 22px 24px;
    max-width: 720px;
    margin: 0 auto;
}
.cl-spec-explorer-chat-turn {
    margin: 0;
    padding: 10px 0 14px;
    background: transparent;
    border-radius: 0;
    border-left: 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 10px;
    align-items: baseline;
}
.cl-spec-explorer-chat-turn:last-child { border-bottom: 0; }
.cl-spec-explorer-chat-role {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    font-weight: 600;
    color: #6a737d;
    margin: 3px 0 0;
    text-align: right;
    padding-right: 4px;
    font-family: var(--cl-sans, ui-sans-serif, system-ui);
}
.cl-spec-explorer-chat-turn[data-role="user"] .cl-spec-explorer-chat-role { color: #4cd6e0; }
.cl-spec-explorer-chat-body {
    font-size: 13px;
    line-height: 1.6;
    color: #d9dee5;
    font-family: var(--cl-sans, ui-sans-serif, system-ui);
    min-width: 0;
}
.cl-spec-explorer-chat-body p { margin: 0 0 8px; }
.cl-spec-explorer-chat-body p:last-child { margin-bottom: 0; }
.cl-spec-explorer-chat-body ol, .cl-spec-explorer-chat-body ul {
    margin: 4px 0 8px;
    padding-left: 18px;
}
.cl-spec-explorer-chat-body li { margin: 2px 0; }
.cl-spec-explorer-chat-body pre {
    background: #000;
    padding: 8px;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 11.5px;
    margin: 6px 0;
}
.cl-spec-explorer-chat-body code {
    color: #4cd6e0;
    background: rgba(76,214,224,0.08);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11.5px;
    font-family: var(--cl-mono, ui-monospace, monospace);
}
.cl-spec-explorer-preview {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    background: #050505;
    color: #d9dee5;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}
/* Pane "fake" solo lectura renderizado por renderHistory dentro del preview del explorer.
   Se muestra con los mismos estilos que la vista normal del chat, sin composer ni header. */
.cl-spec-explorer-preview > .cl-spec-explorer-chat-pane {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: #050505;
    overflow-y: auto;
    padding: 12px 18px 24px;
    color: #d9dee5;
}
.cl-spec-explorer-preview > .cl-spec-explorer-chat-pane .cl-composer,
.cl-spec-explorer-preview > .cl-spec-explorer-chat-pane .cl-pane-header {
    display: none !important;
}
.cl-spec-explorer-row[data-active="true"] { background: rgba(76,214,224,0.18); border-left: 2px solid #4cd6e0; padding-left: calc(var(--pad, 8px) - 2px); }
.cl-spec-explorer-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 12px;
    color: #d9dee5;
    cursor: pointer;
    line-height: 1.9;
}
.cl-spec-explorer-row:hover { background: rgba(76,214,224,0.08); }
.cl-spec-explorer-caret {
    display: inline-block;
    width: 10px;
    color: #6f7780;
    font-size: 9px;
    transition: transform 100ms ease;
    text-align: center;
}
.cl-spec-explorer-caret[data-open="true"] { transform: rotate(90deg); }
.cl-spec-explorer-caret-empty { display: inline-block; width: 10px; }
.cl-spec-explorer-children { }
.cl-commit-diff-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.cl-commit-diff-head {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 10px 16px;
    background: #0a0a0a;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cl-commit-diff-body {
    display: flex;
    flex: 1;
    min-height: 0;
}
.cl-commit-diff-files {
    width: 300px;
    flex-shrink: 0;
    overflow-y: auto;
    background: #050505;
    border-right: 1px solid rgba(255,255,255,0.06);
}
.cl-commit-diff-file {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background 100ms ease;
}
.cl-commit-diff-file:hover { background: rgba(255,255,255,0.03); }
.cl-commit-diff-file[data-selected="true"] {
    background: rgba(76,214,224,0.1);
    border-left-color: #4cd6e0;
}
.cl-commit-diff-status {
    font-family: var(--cl-mono, ui-monospace, monospace);
    font-size: 10px;
    width: 16px;
    text-align: center;
    padding: 1px 3px;
    border-radius: 3px;
    background: rgba(255,255,255,0.06);
}
.cl-cds-A { background: rgba(76,214,144,0.18); color: #7de3b0; }
.cl-cds-M { background: rgba(76,214,224,0.14); color: #4cd6e0; }
.cl-cds-D { background: rgba(244,113,113,0.18); color: #f47171; }
.cl-cds-R { background: rgba(240,180,90,0.18); color: #f0b45a; }
.cl-commit-diff-path {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--cl-mono, ui-monospace, monospace);
    color: #d9dee5;
}
.cl-commit-diff-stats { font-family: var(--cl-mono, ui-monospace, monospace); font-size: 10.5px; }
.cl-commit-diff-stats .add { color: #7de3b0; }
.cl-commit-diff-stats .del { color: #f47171; }
.cl-commit-diff-bin { font-size: 10px; color: #6f7780; font-style: italic; }
.cl-commit-diff-view {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    background: #000;
    display: flex;
    flex-direction: column;
}
/* Override Diff2Html a paleta negro puro + turquesa consistente con /claude */
.cl-commit-diff-view .d2h-file-wrapper,
.cl-commit-diff-view .d2h-file-diff,
.cl-commit-diff-view .d2h-file-side-diff,
.cl-commit-diff-view .d2h-code-wrapper,
.cl-commit-diff-view .d2h-diff-table {
    background: #000 !important;
    border-color: rgba(255,255,255,0.05) !important;
}
.cl-commit-diff-view .d2h-file-header {
    background: #0a0a0a !important;
    border-color: rgba(255,255,255,0.06) !important;
    color: #b3bac2 !important;
}
.cl-commit-diff-view .d2h-code-linenumber,
.cl-commit-diff-view .d2h-code-side-linenumber {
    background: #050505 !important;
    border-color: rgba(255,255,255,0.05) !important;
    color: #5f6770 !important;
}
.cl-commit-diff-view .d2h-code-line-ctn { color: #d9dee5 !important; }
.cl-commit-diff-view .d2h-ins { background: rgba(76,214,144,0.10) !important; }
.cl-commit-diff-view .d2h-ins .d2h-code-line-ctn { color: #a9e8cb !important; }
.cl-commit-diff-view .d2h-del { background: rgba(244,113,113,0.10) !important; }
.cl-commit-diff-view .d2h-del .d2h-code-line-ctn { color: #f2a8a8 !important; }
.cl-commit-diff-view .d2h-info { background: rgba(76,214,224,0.06) !important; color: #4cd6e0 !important; }
.cl-commit-diff-view .d2h-emptyplaceholder { background: #050505 !important; border-color: rgba(255,255,255,0.03) !important; }
/* Contenedor: fuerza que respete el alto del modal y no rebase */
.cl-commit-diff-body { max-height: calc(90vh - 100px); overflow: hidden; height: calc(90vh - 100px); }
.cl-monaco-diff { width: 100%; height: 100%; flex: 1; }
.cl-commit-diff-view .d2h-wrapper { max-width: 100%; }
/* Cuando el diff tenga highlighting de hljs, respetar sus colores */
.cl-commit-diff-view .d2h-code-line-ctn.hljs { background: transparent !important; padding: 0 !important; }
.cl-diff-inline {
    font-family: var(--cl-mono, ui-monospace, monospace);
    font-size: 12px;
    line-height: 1.55;
    padding: 8px 0;
}
.cl-diff-line {
    padding: 0 12px;
    white-space: pre;
    color: #b3bac2;
}
.cl-diff-add { background: rgba(76,214,144,0.09); color: #a9e8cb; }
.cl-diff-del { background: rgba(244,113,113,0.09); color: #f2a8a8; }
.cl-diff-hunk { color: #4cd6e0; background: rgba(76,214,224,0.05); }
.cl-recent-toolbar select {
    background: #050505;
    color: #d9dee5;
    border: 1px solid rgba(255,255,255,0.12);
    padding: 4px 8px;
    border-radius: 4px;
    margin-left: 6px;
    min-width: 160px;
}
.cl-recent-list { flex: 1; overflow-y: auto; }
.cl-recent-day {
    padding: 12px 16px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cl-recent-day-title {
    margin: 0 0 8px;
    color: #4cd6e0;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
}
.cl-recent-commit {
    padding: 6px 10px 8px;
    border-top: 1px dashed rgba(255,255,255,0.05);
    border-left: 2px solid transparent;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.cl-recent-commit:first-of-type { border-top: 0; }
.cl-recent-commit[data-selected="true"] {
    background: rgba(76,214,224,0.08);
    border-left-color: #4cd6e0;
}
.cl-recent-commit:hover { background: rgba(255,255,255,0.03); }
.cl-recent-commit[data-selected="true"]:hover { background: rgba(76,214,224,0.12); }
.cl-recent-commit-head {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 13px;
    color: #d9dee5;
}
.cl-recent-repo {
    font-family: var(--cl-mono, ui-monospace, monospace);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(76, 214, 224, 0.12);
    color: #4cd6e0;
    min-width: 70px;
    text-align: center;
}
.cl-recent-repo[data-repo="specs"] {
    background: rgba(76, 214, 224, 0.22);
}
.cl-recent-sha {
    font-family: var(--cl-mono, ui-monospace, monospace);
    color: #7fb3b9;
    font-size: 11.5px;
    min-width: 60px;
}
.cl-recent-subject { flex: 1; }
.cl-recent-time { color: #6f7780; font-size: 11.5px; }
.cl-recent-files {
    margin: 4px 0 0 70px;
    padding: 0;
    list-style: none;
    font-size: 11.5px;
    color: #8a9099;
}
.cl-recent-files li { padding: 1px 0; }
.cl-recent-file-link { color: #4cd6e0; text-decoration: none; }
.cl-recent-file-link:hover { text-decoration: underline; }
.cl-spec-tl-hint {
    font-family: var(--cl-mono, ui-monospace, monospace);
    font-size: 11px;
    color: #5f6770;
    padding: 0 4px 6px;
    border-bottom: 1px dashed rgba(255,255,255,0.06);
    margin-bottom: 8px;
}
.cl-spec-tl-list {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 0 18px;
    min-height: 260px;
    transition: max-height 180ms ease, opacity 180ms ease;
}
.cl-spec-tl-list.cl-spec-tl-collapsed {
    max-height: 78px;
    min-height: 78px;
    overflow: hidden;
    opacity: 0.55;
    filter: saturate(0.7);
    padding-bottom: 0;
    margin-bottom: 0;
    cursor: pointer;
    transition: opacity 120ms ease, filter 120ms ease;
}
.cl-spec-tl-list.cl-spec-tl-collapsed:hover {
    opacity: 0.85;
    filter: saturate(1);
}
.cl-spec-tl-list.cl-spec-tl-collapsed .cl-spec-tl-day-items { display: none; }
.cl-spec-tl-list.cl-spec-tl-collapsed .cl-spec-tl-day-header { margin-bottom: 4px; }
.cl-spec-tl-list.cl-spec-tl-collapsed .cl-spec-tl-track { padding-top: 4px; }
.cl-spec-tl-track {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding: 0 50%;
    min-width: max-content;
}
.cl-spec-tl-axis {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 62px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0, rgba(255,255,255,0.08) 24px, rgba(255,255,255,0.08) calc(100% - 24px), transparent 100%);
    pointer-events: none;
}
.cl-spec-tl-day {
    min-width: 220px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.cl-spec-tl-day-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #4cd6e0;
    font-family: var(--cl-mono, ui-monospace, monospace);
    font-size: 12px;
    margin-bottom: 14px;
    text-align: center;
}
.cl-spec-tl-day-date { font-weight: 600; }
.cl-spec-tl-day-count { color: #5f6770; font-size: 10.5px; }
.cl-spec-tl-node {
    width: 12px;
    height: 12px;
    background: #000;
    border: 2px solid #4cd6e0;
    transform: rotate(45deg);
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 4px #000, 0 0 12px rgba(76,214,224,0.35);
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.cl-spec-tl-day:hover .cl-spec-tl-node {
    transform: rotate(45deg) scale(1.15);
    box-shadow: 0 0 0 4px #000, 0 0 18px rgba(76,214,224,0.55);
}
.cl-spec-tl-day[data-selected="true"] .cl-spec-tl-node {
    background: #4cd6e0;
    transform: rotate(45deg) scale(1.35);
    box-shadow: 0 0 0 4px #000, 0 0 22px rgba(76,214,224,0.85);
}
.cl-spec-tl-day[data-selected="true"] .cl-spec-tl-day-date {
    text-shadow: 0 0 8px rgba(76,214,224,0.6);
}
.cl-spec-tl-day-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.cl-spec-tl-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    color: #d9dee5;
    font-family: var(--cl-mono, ui-monospace, monospace);
    font-size: 12px;
    background: #0a0a0a;
    border: 1px solid rgba(255,255,255,0.06);
    transition: border-color 120ms ease, background 120ms ease;
}
.cl-spec-tl-item:hover {
    background: rgba(76,214,224,0.08);
    border-color: #4cd6e0;
}
.cl-spec-tl-motivo {
    font-size: 9.5px;
    color: #5f6770;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cl-spec-tl-motivo-creado { color: #6ee7b7; }
.cl-spec-tl-motivo-actualizado { color: #f4c471; }
.cl-spec-tl-item-tipo {
    display: inline-block;
    font-size: 9.5px;
    padding: 1px 5px;
    border-radius: 3px;
    background: #000;
    color: #5f6770;
    border: 1px solid rgba(255,255,255,0.06);
    align-self: flex-start;
}
.cl-spec-tl-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #d9dee5;
    font-size: 12px;
}
.cl-spec-tl-detail {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 4px 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cl-spec-tl-detail[hidden] { display: none; }
.cl-spec-tl-detail-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: #0a0a0a;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: sticky;
    top: 0;
    z-index: 2;
}
.cl-spec-tl-detail-head .cl-spec-btn[data-role=back] {
    background: transparent;
    color: #4cd6e0;
    border: 1px solid rgba(76,214,224,0.35);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    font-family: var(--cl-mono, ui-monospace, monospace);
    transition: background 120ms ease, border-color 120ms ease;
}
.cl-spec-tl-detail-head .cl-spec-btn[data-role=back]:hover {
    background: rgba(76,214,224,0.12);
    border-color: #4cd6e0;
}
.cl-spec-tl-detail-title { display: flex; flex-direction: column; gap: 2px; }
.cl-spec-tl-detail-date { font-family: var(--cl-mono, ui-monospace, monospace); font-size: 14px; color: #4cd6e0; font-weight: 600; }
.cl-spec-tl-detail-count { font-family: var(--cl-mono, ui-monospace, monospace); font-size: 11px; color: #5f6770; }
.cl-spec-tl-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}
.cl-spec-tl-detail-card {
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    background: #0a0a0a;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.cl-spec-tl-detail-card:hover { border-color: #4cd6e0; background: rgba(76,214,224,0.08); }
.cl-spec-tl-detail-card-head { display: flex; align-items: center; gap: 8px; }
.cl-spec-tl-detail-card-title { font-size: 14px; color: #d9dee5; font-weight: 500; }
.cl-spec-tl-detail-card-path { font-family: var(--cl-mono, ui-monospace, monospace); font-size: 11px; color: #5f6770; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-spec-tl-detail-card-meta { font-family: var(--cl-mono, ui-monospace, monospace); font-size: 11px; color: #5f6770; }
.cl-spec-tl-item {
    display: flex; gap: 10px; align-items: center;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12.5px;
}
.cl-spec-tl-item:hover { background: var(--cl-surface-3); }
.cl-spec-tl-motivo {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 80px;
    color: var(--cl-text-dim);
}
.cl-spec-tl-motivo-creado { color: #6ee7b7; }
.cl-spec-tl-motivo-actualizado { color: #f4c471; }
.cl-spec-tl-title {
    flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--cl-text);
}

/* Quick Open */
.cl-spec-qo-input {
    width: 100%;
    padding: 10px 12px;
}

/* ==========================================================================
   RESPONSIVE — modal HenryActividadReciente en tablet, mobile, foldables
   Ver spec henrydiaz/paginas/actividad_reciente_shared/features/modulo_shared
   ========================================================================== */

/* Tablet portrait y menos: modal full-screen y detalle apilado */
@media (max-width: 900px), (pointer: coarse) {
    .cl-spec-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 100vh;
        border-radius: 0;
    }
    .cl-spec-modal-large {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }
    .cl-spec-modal-body { padding: 10px 12px; }
    .cl-recent-toolbar {
        padding: 8px 10px;
        flex-wrap: wrap;
        gap: 6px;
    }
    /* Hint del teclado no aplica en touch — ocultar */
    .cl-spec-tl-hint,
    #cl-recent-hint,
    .cl-recent-toolbar > .cl-recent-hint,
    .cl-recent-toolbar span[data-hint] {
        display: none !important;
    }
    /* Detalle del día: apilar columnas verticalmente. Ver descartado en
       actividad_reciente_shared/features/modulo_shared/descartados.md sobre
       por qué hay que anular max-height y overflow del original. */
    .cl-recent-cols {
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 8px 10px;
        min-height: 0;
    }
    .cl-recent-repo-col {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        max-height: none !important;
        overflow: visible;
        flex: 0 0 auto;
    }
    .cl-recent-repo-col-body {
        overflow: visible;
    }
    /* Grilla horizontal: cell más apretada */
    .cl-recent-grid { padding: 6px 8px; }
    .cl-recent-grid-cell { padding: 4px 8px; font-size: 11px; }
    /* Calendario: reducir altura de celdas y padding */
    .cl-cal-wrap { padding: 8px 10px 12px; }
    .cl-cal-cell { min-height: 68px; padding: 4px 6px; }
    .cl-cal-title { font-size: 13px; }
}

/* Mobile grande (S25 Ultra portrait ~412px, Fold desplegado ~344-540px) */
@media (max-width: 640px), (pointer: coarse) {
    .cl-spec-modal-head { padding: 10px 12px; font-size: 12px; }
    .cl-spec-modal-body { padding: 8px 8px; }
    .cl-recent-toolbar { padding: 6px 8px; font-size: 11.5px; gap: 5px; }
    .cl-recent-view-btn { padding: 4px 10px; font-size: 11px; }
    /* Calendario compacto */
    .cl-cal-wrap { padding: 6px 6px 10px; gap: 6px; }
    .cl-cal-cell { min-height: 56px; padding: 3px 4px; gap: 2px; }
    .cl-cal-cell-num { font-size: 11px; }
    /* En pantallas angostas el nombre del repo trunca a 1 letra y no aporta;
       mejor mostrar solo diamante + count (más informativo). */
    .cl-cal-chip { font-size: 9.5px; gap: 3px; justify-content: flex-start; }
    .cl-cal-chip-repo { display: none; }
    .cl-cal-chip-count { display: inline; color: #d9dee5; font-size: 10px; }
    .cl-cal-dow-head { font-size: 9px; padding: 3px 0; }
    /* Grilla: minimizar columna repo, ampliar días por scroll */
    .cl-recent-grid { padding: 4px 6px; }
    .cl-recent-grid-cell { min-height: 32px; padding: 4px 6px; font-size: 10.5px; }
    .cl-recent-grid-repo { font-size: 10px; letter-spacing: 0.2px; }
    .cl-recent-grid-day-dow { font-size: 9px; }
    .cl-recent-grid-day-date { font-size: 10px; }
    /* Detalle: cards más compactas */
    .cl-recent-repo-col-head { padding: 6px 10px; }
    .cl-recent-repo-col-body { padding: 4px 6px 8px; }
    .cl-spec-tl-item { padding: 6px 8px; }
    /* Historial git: reducir columnas */
    .cl-spec-hist-row {
        grid-template-columns: 60px 1fr 60px;
        gap: 6px;
        font-size: 11px;
    }
    .cl-spec-hist-date { display: none; }
}

/* Mobile chico (iPhone SE ~375px, Fold cerrado ~280px) */
@media (max-width: 380px), (pointer: coarse) and (max-width: 380px) {
    .cl-spec-modal-head { padding: 8px 10px; font-size: 11.5px; }
    .cl-spec-modal-body { padding: 6px 6px; }
    .cl-recent-toolbar { padding: 5px 6px; }
    .cl-cal-cell { min-height: 48px; }
    .cl-cal-chip-repo { font-size: 9px; }
    /* Abreviar dow a una letra sola vía text-transform no funciona;
       usamos font más chica y padding cero para reducir el espacio */
    .cl-cal-dow-head { font-size: 8.5px; padding: 2px 0; letter-spacing: 0; }
    .cl-recent-grid-day-dow { font-size: 8.5px; }
    .cl-recent-grid-day-date { font-size: 9.5px; }
    .cl-spec-hist-row {
        grid-template-columns: 50px 1fr 40px;
        gap: 4px;
        font-size: 10.5px;
    }
}

/* Overrides globales cuando el body tiene .force-mobile — duplican los ajustes
   del @media 640px + 900px para que desde desktop (Playwright, testing) se
   pueda ver exactamente el layout mobile sin depender del viewport o touch.
   Ver spec lista_proyectos/_lista_proyectos.md sección "Flag ?mobile=1". */
body.force-mobile .cl-spec-modal,
body.force-mobile .cl-spec-modal-large {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
}
body.force-mobile .cl-spec-modal-body { padding: 8px 8px; }
body.force-mobile .cl-recent-toolbar {
    padding: 6px 8px; gap: 5px; flex-wrap: wrap; font-size: 11.5px;
}
body.force-mobile .cl-recent-view-btn { padding: 4px 10px; font-size: 11px; }
body.force-mobile .cl-spec-tl-hint,
body.force-mobile #cl-recent-hint { display: none !important; }
body.force-mobile .cl-cal-wrap { padding: 6px 6px 10px; gap: 6px; }
body.force-mobile .cl-cal-cell { min-height: 56px; padding: 3px 4px; gap: 2px; }
body.force-mobile .cl-cal-cell-num { font-size: 11px; }
body.force-mobile .cl-cal-chip {
    font-size: 9.5px; gap: 3px; justify-content: flex-start;
}
body.force-mobile .cl-cal-chip-repo { display: none; }
body.force-mobile .cl-cal-chip-count { display: inline; color: #d9dee5; font-size: 10px; }
body.force-mobile .cl-cal-dow-head { font-size: 9px; padding: 3px 0; }
body.force-mobile .cl-recent-cols {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 10px;
    min-height: 0;
}
body.force-mobile .cl-recent-repo-col {
    min-width: 0; width: 100%; max-width: 100%;
    max-height: none !important;
    overflow: visible;
    flex: 0 0 auto;
}
body.force-mobile .cl-recent-repo-col-body { overflow: visible; }
body.force-mobile .cl-recent-grid { padding: 4px 6px; }
body.force-mobile .cl-recent-grid-cell {
    min-height: 32px; padding: 4px 6px; font-size: 10.5px;
}
body.force-mobile .cl-recent-grid-repo { font-size: 10px; letter-spacing: 0.2px; }
body.force-mobile .cl-recent-grid-day-dow { font-size: 9px; }
body.force-mobile .cl-recent-grid-day-date { font-size: 10px; }

/* ─── Vista Grilla mobile como lista (Samsung Calendar-like) ─── */
/* Estructura en el DOM se renderiza SIEMPRE (tabla + lista) y el CSS
   decide cuál se ve según viewport / pointer / body.force-mobile.
   Ver spec: henrydiaz/paginas/actividad_reciente_shared/features/modulo_shared/_modulo_shared.md */
.cl-recent-list-mobile { display: none; }
.cl-recent-dm-chips {
    display: flex; gap: 6px; overflow-x: auto;
    padding: 6px 2px 10px;
    scrollbar-width: none;
}
.cl-recent-dm-chips::-webkit-scrollbar { display: none; }
.cl-recent-dm-chip {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 48px; min-height: 60px;
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    color: #8a929c; font-family: ui-monospace, "SF Mono", monospace;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.cl-recent-dm-chip:hover { background: rgba(255,255,255,0.05); }
.cl-recent-dm-chip-dow { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.5px; }
.cl-recent-dm-chip-date { font-size: 15px; font-weight: 600; color: #d9dee5; line-height: 1; margin-top: 2px; }
.cl-recent-dm-chip-count { font-size: 10px; color: #6a737d; margin-top: 3px; }
.cl-recent-dm-chip[data-empty="true"] { opacity: 0.4; }
.cl-recent-dm-chip[aria-pressed="true"] {
    background: rgba(76,214,224,0.18);
    border-color: #4cd6e0;
}
.cl-recent-dm-chip[aria-pressed="true"] .cl-recent-dm-chip-dow { color: #4cd6e0; }
.cl-recent-dm-chip[aria-pressed="true"] .cl-recent-dm-chip-date { color: #4cd6e0; }
.cl-recent-dm-chip[aria-pressed="true"] .cl-recent-dm-chip-count { color: #4cd6e0; }
.cl-recent-dm-header {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 10px;
    padding: 4px 4px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 8px;
}
.cl-recent-dm-header-day { color: #4cd6e0; font-size: 14px; font-weight: 500; text-transform: capitalize; }
.cl-recent-dm-header-total { color: #8a929c; font-family: ui-monospace, "SF Mono", monospace; font-size: 11.5px; }
.cl-recent-dm-list {
    display: flex; flex-direction: column; gap: 6px;
    padding-bottom: 12px;
}
.cl-recent-dm-item {
    display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center;
    padding: 12px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    cursor: pointer;
    min-height: 44px;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.cl-recent-dm-item:hover { background: rgba(76,214,224,0.05); border-color: rgba(76,214,224,0.25); }
.cl-recent-dm-item-node {
    width: 10px; height: 10px;
    background: #4cd6e0; opacity: 0.9;
    transform: rotate(45deg);
    border-radius: 1px;
    justify-self: center;
}
.cl-recent-dm-item-repo {
    color: #d9dee5; font-family: ui-monospace, "SF Mono", monospace;
    font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-recent-dm-item-count {
    color: #6a737d; font-family: ui-monospace, "SF Mono", monospace;
    font-size: 12px;
}
.cl-recent-dm-empty {
    color: #6a737d; font-size: 12px; font-style: italic;
    padding: 20px 12px; text-align: center;
}

/* Swap tabla ↔ lista en mobile real */
@media (max-width: 720px), (pointer: coarse) {
    .cl-recent-grid { display: none !important; }
    .cl-recent-list-mobile { display: flex !important; flex-direction: column; padding: 4px 8px 12px; }
}
/* Swap tabla ↔ lista bajo el flag ?mobile=1 (debug/Playwright desde desktop) */
body.force-mobile .cl-recent-grid { display: none !important; }
body.force-mobile .cl-recent-list-mobile { display: flex !important; flex-direction: column; padding: 4px 8px 12px; }

/* ─── Detalle del día — vista semántica empresa → subproyecto → fase ─── */
/* Ver spec: henrydiaz/paginas/actividad_reciente_shared/features/detalle_dia_por_tareas/_detalle_dia_por_tareas.md */
.cl-day-semantic {
    padding: 12px 14px 18px;
    display: grid;
    /* Proporcional al número de empresas presentes: el JS setea
       --cl-day-cols con min(N, 4). Default 1 si no se seteó. */
    grid-template-columns: repeat(var(--cl-day-cols, 1), minmax(0, 1fr));
    align-items: start;
    gap: 12px;
    /* Alto responsive con scroll interno para no crecer fuera del modal */
    max-height: calc(100vh - 260px);
    overflow-y: auto;
    outline: none;
}
/* La sección "Otros cambios sin tarea vinculada" siempre a ancho completo */
.cl-day-semantic > .cl-day-sinTask { grid-column: 1 / -1; }
/* Empresa: min-width 0 para permitir shrink dentro de la columna del grid */
.cl-day-semantic > .cl-day-empresa { min-width: 0; }
.cl-day-empresa {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 0;
}
.cl-day-empresa[open] { border-color: rgba(76,214,224,0.2); }
.cl-day-empresa-head {
    list-style: none; cursor: pointer;
    display: flex; align-items: baseline; gap: 10px;
    padding: 10px 12px;
    color: #d9dee5;
}
.cl-day-empresa-head::-webkit-details-marker { display: none; }
.cl-day-empresa-chev {
    color: #6a737d; font-size: 11px; width: 12px; text-align: center;
}
.cl-day-empresa-name {
    color: #4cd6e0; font-weight: 600; font-size: 14px;
    text-transform: uppercase; letter-spacing: 0.4px;
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-day-empresa-count {
    color: #8a929c; font-family: ui-monospace, "SF Mono", monospace;
    font-size: 11.5px;
}
.cl-day-empresa-body {
    padding: 4px 12px 12px;
    display: flex; flex-direction: column; gap: 10px;
}
.cl-day-sub {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 6px;
}
.cl-day-sub-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px;
    padding: 4px 4px 8px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cl-day-sub-head:hover { background: rgba(76,214,224,0.04); }
.cl-day-sub-path {
    color: #d9dee5; font-size: 12.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-day-sub-open { color: #4cd6e0; font-size: 12px; }
.cl-day-fase {
    padding: 0;
    border-radius: 5px;
}
.cl-day-fase-head {
    list-style: none; cursor: pointer;
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    align-items: center; gap: 8px;
    padding: 8px 6px;
    color: #d9dee5; font-size: 12.5px;
    border-radius: 5px;
    transition: background 0.12s ease;
}
.cl-day-fase-head:hover { background: rgba(255,255,255,0.03); }
.cl-day-fase-head::-webkit-details-marker { display: none; }
.cl-day-fase-chev { color: #6a737d; font-size: 10px; text-align: center; }
.cl-day-fase-title {
    color: #d9dee5; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-day-fase-title:hover { color: #4cd6e0; text-decoration: underline; }
.cl-day-fase-delta {
    color: #4cd6e0; font-family: ui-monospace, "SF Mono", monospace;
    font-size: 11.5px; white-space: nowrap;
}
.cl-day-fase-stats {
    color: #8a929c; font-family: ui-monospace, "SF Mono", monospace;
    font-size: 11px; white-space: nowrap;
}
.cl-day-fase-bar {
    grid-column: 2 / 5;
    height: 3px; border-radius: 2px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
    margin-top: 4px;
}
.cl-day-fase-bar-fill { height: 100%; background: #4cd6e0; transition: width 0.2s ease; }
.cl-day-fase-body {
    padding: 4px 8px 10px 24px;
    display: flex; flex-direction: column; gap: 6px;
    color: #8a929c; font-size: 12px;
}
.cl-day-fase-tasks {
    display: flex; flex-direction: column; gap: 4px;
    padding: 4px 0;
}
.cl-day-task {
    display: flex; align-items: baseline; gap: 8px;
    padding: 4px 6px;
    background: rgba(76,214,224,0.04);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.cl-day-task:hover { background: rgba(76,214,224,0.1); }
.cl-day-task-name {
    color: #6a737d; font-family: ui-monospace, "SF Mono", monospace;
    font-size: 10.5px; white-space: nowrap;
}
.cl-day-task-subject {
    color: #d9dee5; font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1;
}
.cl-day-fase-commits {
    display: flex; flex-direction: column; gap: 3px;
    padding: 4px 0;
    border-top: 1px dashed rgba(255,255,255,0.04);
}
.cl-day-fase-commit {
    display: flex; align-items: baseline; gap: 8px;
    padding: 3px 6px;
    font-size: 11.5px;
}
.cl-day-fase-repo {
    color: #6a737d; font-family: ui-monospace, "SF Mono", monospace;
    font-size: 10.5px; margin-left: auto;
    padding: 1px 6px;
    background: rgba(255,255,255,0.04);
    border-radius: 3px;
}
.cl-day-sinTask {
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    margin-top: 6px;
}
.cl-day-sinTask-head {
    list-style: none; cursor: pointer;
    display: flex; align-items: baseline; gap: 10px;
    padding: 10px 12px;
    color: #8a929c; font-size: 12px;
}
.cl-day-sinTask-head::-webkit-details-marker { display: none; }
.cl-day-sinTask-chev { color: #6a737d; font-size: 10px; width: 12px; text-align: center; }
.cl-day-sinTask-count {
    margin-left: auto;
    font-family: ui-monospace, "SF Mono", monospace; font-size: 11px;
}
.cl-day-sinTask-body {
    padding: 4px 14px 12px;
    display: flex; flex-direction: column; gap: 4px;
}
.cl-day-sinTask-item {
    display: flex; align-items: baseline; gap: 8px;
    padding: 4px 6px;
    font-size: 11.5px;
}
.cl-day-empty {
    color: #6a737d; font-size: 12px; font-style: italic;
    padding: 20px 12px; text-align: center;
}

/* Ajustes mobile del detalle semántico: una sola columna, apilado vertical */
@media (max-width: 720px), (pointer: coarse) {
    .cl-day-semantic {
        grid-template-columns: 1fr;
        padding: 8px 8px 16px;
    }
    .cl-day-empresa-name { font-size: 13px; }
    .cl-day-fase-head { font-size: 12px; }
    .cl-day-fase-stats { font-size: 10.5px; }
    .cl-day-fase-body { padding-left: 20px; }
}
body.force-mobile .cl-day-semantic {
    grid-template-columns: 1fr;
    padding: 8px 8px 16px;
}
body.force-mobile .cl-day-empresa-name { font-size: 13px; }
body.force-mobile .cl-day-fase-body { padding-left: 20px; }

/* Estado de foco por teclado (↑ ↓ Enter) en el detalle semántico */
.cl-day-empresa-head[data-focused="true"],
.cl-day-sub-head[data-focused="true"],
.cl-day-fase-head[data-focused="true"],
.cl-day-sinTask-head[data-focused="true"] {
    box-shadow: inset 3px 0 0 #4cd6e0;
    background: rgba(76,214,224,0.08);
}

/* ═════════════════════════════════════════════════════════════════════
 * Vista Reporte (Hitos 5-7 de vista_reporte.md)
 * Tercer tab del modal Actividad Reciente. Sub-toggle Chat/Tarea + Rango.
 * ═════════════════════════════════════════════════════════════════════ */
.cl-recent-report-toolbar {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    padding: 8px 12px; border-bottom: 1px solid #24292f;
    background: rgba(255,255,255,0.02);
}
.cl-recent-report-toggle {
    display: flex; align-items: center; gap: 6px;
}
.cl-recent-report-label {
    color: #8b949e; font-size: 12px;
}
.cl-recent-report-btn {
    background: transparent; color: #c9d1d9; border: 1px solid #30363d;
    padding: 4px 10px; border-radius: 4px; cursor: pointer;
    font-size: 12px; font-family: inherit;
}
.cl-recent-report-btn:hover { background: rgba(76,214,224,0.08); }
.cl-recent-report-btn[data-active="true"] {
    background: #4cd6e0; color: #0d1117; border-color: #4cd6e0;
}
.cl-recent-report-body {
    padding: 12px; max-height: calc(100vh - 260px); overflow-y: auto;
}
.cl-r-summary {
    color: #8b949e; font-size: 12px; margin-bottom: 12px;
}
.cl-r-summary strong { color: #c9d1d9; }

/* — Grupo Chat: tarjetas — */
.cl-r-cards {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
.cl-r-card {
    border: 1px solid #30363d; border-radius: 6px; padding: 12px;
    background: rgba(255,255,255,0.02); display: flex; flex-direction: column; gap: 10px;
}
.cl-r-card[data-focused="true"] { box-shadow: inset 3px 0 0 #4cd6e0; background: rgba(76,214,224,0.08); }
.cl-r-card-head {
    display: flex; flex-direction: column; gap: 2px;
    border-bottom: 1px solid #21262d; padding-bottom: 8px;
}
.cl-r-card-title { color: #4cd6e0; font-weight: 600; font-size: 14px; }
.cl-r-card-sub { color: #8b949e; font-size: 11px; }
.cl-r-chat-link {
    color: #4cd6e0; text-decoration: none; margin-left: 4px; font-size: 12px;
}
.cl-r-chat-link:hover { text-decoration: underline; }
.cl-r-card-metrics {
    display: grid; gap: 6px 12px; grid-template-columns: repeat(3, 1fr);
    font-size: 11px;
}
.cl-r-card-metrics > div { display: flex; flex-direction: column; }
.cl-r-metric-label { color: #6a737d; font-size: 10px; }
.cl-r-metric-value { color: #c9d1d9; font-size: 13px; font-weight: 600; }
.cl-r-card-details { font-size: 12px; }
.cl-r-card-details summary {
    cursor: pointer; color: #8b949e; font-size: 11px;
    padding: 4px 0; border-top: 1px solid #21262d;
}
.cl-r-card-details summary:hover { color: #c9d1d9; }
.cl-r-tasks, .cl-r-samples {
    list-style: none; padding: 8px 0 0 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.cl-r-tasks li { display: flex; flex-direction: column; padding: 4px 0; border-bottom: 1px solid #161b22; }
.cl-r-tasks li:last-child { border-bottom: none; }
.cl-r-tasks a { color: #c9d1d9; text-decoration: none; font-size: 12px; }
.cl-r-tasks a:hover { text-decoration: underline; color: #4cd6e0; }
.cl-r-task-fase {
    display: inline-block; font-size: 10px; color: #4cd6e0;
    background: rgba(76,214,224,0.1); padding: 1px 6px; border-radius: 3px; margin-bottom: 2px;
    align-self: flex-start;
}
.cl-r-task-bc { color: #6a737d; font-size: 10px; }
.cl-r-samples li {
    color: #adbac7; font-size: 11px; padding: 6px 8px;
    background: rgba(255,255,255,0.02); border-radius: 4px; white-space: pre-wrap;
}

/* — Grupo Tarea: filas agrupadas por empresa — */
.cl-r-empresas { display: flex; flex-direction: column; gap: 8px; }
.cl-r-empresa {
    border: 1px solid #30363d; border-radius: 6px; background: rgba(255,255,255,0.02);
}
.cl-r-empresa summary {
    cursor: pointer; padding: 8px 12px; color: #c9d1d9; font-size: 13px;
    display: flex; align-items: center; gap: 8px;
}
.cl-r-empresa summary:hover { background: rgba(76,214,224,0.06); }
.cl-r-empresa-name { font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #4cd6e0; }
.cl-r-empresa-count { color: #8b949e; font-size: 11px; }

/* Subproyecto dentro de empresa (Reporte por Tarea). */
.cl-r-subproy {
    margin: 4px 8px;
    border-left: 2px solid rgba(76,214,224,0.15);
    padding-left: 8px;
}
.cl-r-subproy summary {
    cursor: pointer; padding: 6px 8px;
    display: flex; align-items: center; gap: 6px;
    color: #adbac7; font-size: 11.5px;
    border-radius: 4px;
}
.cl-r-subproy summary:hover { background: rgba(255,255,255,0.03); }
.cl-r-subproy-name { font-weight: 500; }
.cl-r-subproy-count { color: #6a737d; font-size: 10.5px; }

.cl-r-rows { display: flex; flex-direction: column; padding: 4px 8px 8px; }
.cl-r-row {
    display: grid; gap: 8px 12px;
    grid-template-columns: 130px 1fr 200px 60px 60px;
    align-items: start; padding: 8px 4px; border-bottom: 1px solid #161b22;
    font-size: 12px;
}
.cl-r-row-time {
    color: #adbac7; font-family: var(--cl-mono, ui-monospace, monospace);
    font-size: 11px; text-align: right;
    align-self: center;
}
.cl-r-row-dur {
    color: #8b949e; font-size: 11px; text-align: right;
    align-self: center;
}
.cl-r-row:last-child { border-bottom: none; }
.cl-r-row[data-focused="true"] { background: rgba(76,214,224,0.08); box-shadow: inset 3px 0 0 #4cd6e0; }
.cl-r-row-fase {
    color: #4cd6e0; font-size: 10px;
    background: rgba(76,214,224,0.1); padding: 1px 6px; border-radius: 3px;
    align-self: flex-start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-r-row-subject { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-r-row-subject a { color: #c9d1d9; text-decoration: none; }
.cl-r-row-subject a:hover { color: #4cd6e0; text-decoration: underline; }
.cl-r-row-bc { color: #6a737d; font-size: 10px; }
.cl-r-row-chat a { color: #4cd6e0; text-decoration: none; font-size: 11px; }
.cl-r-row-chat a:hover { text-decoration: underline; }
.cl-r-row-nochat { color: #6a737d; font-style: italic; font-size: 11px; }
.cl-r-row-dur { color: #8b949e; font-size: 11px; text-align: right; }

/* Mobile: colapsar columnas */
@media (max-width: 720px), (pointer: coarse) {
    .cl-r-cards { grid-template-columns: 1fr; }
    .cl-r-card-metrics { grid-template-columns: repeat(2, 1fr); }
    .cl-r-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .cl-r-row-dur { text-align: left; }
}
body.force-mobile .cl-r-cards { grid-template-columns: 1fr; }
body.force-mobile .cl-r-card-metrics { grid-template-columns: repeat(2, 1fr); }
body.force-mobile .cl-r-row { grid-template-columns: 1fr; gap: 4px; }
body.force-mobile .cl-r-row-dur { text-align: left; }

/* Toggle Kanban / Reporte dentro del header del detalle del día
 * Spec: vista_reporte.md (rediseño 2026-09-18)
 */
.cl-day-view-toggle {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    margin-left: 12px;
}
.cl-day-view-btn {
    background: transparent;
    color: #c9d1d9;
    border: 1px solid #30363d;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
}
.cl-day-view-btn:hover { background: rgba(76,214,224,0.08); }
.cl-day-view-btn[data-active="true"] {
    background: #4cd6e0;
    color: #0d1117;
    border-color: #4cd6e0;
}
.cl-day-body-kanban[hidden], .cl-day-body-reporte[hidden] { display: none !important; }

/* Modal detalle histórico por tarea — spec vista_reporte.md */
.cl-r-row[data-task] { cursor: pointer; transition: background 0.1s; }
.cl-r-row[data-task]:hover { background: rgba(76,214,224,0.06); }
.cl-r-row[data-task]:focus { outline: 2px solid #4cd6e0; outline-offset: -2px; }
.cl-r-row-subject-text { color: #c9d1d9; }
.cl-r-row-chat-name { color: #4cd6e0; font-size: 11px; }

.cl-r-tasks li[data-task] { cursor: pointer; }
.cl-r-tasks li[data-task]:hover { background: rgba(76,214,224,0.06); }
.cl-r-tasks li[data-task]:focus { outline: 2px solid #4cd6e0; outline-offset: -2px; }
.cl-r-task-subject { color: #c9d1d9; }

.cl-task-detail-head {
    padding: 12px 16px; border-bottom: 1px solid #30363d;
    background: rgba(255,255,255,0.02);
}
.cl-task-detail-subject {
    margin: 0 0 8px 0; color: #4cd6e0; font-size: 15px; font-weight: 600;
}
.cl-task-detail-meta {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    color: #8b949e; font-size: 11px;
}
.cl-task-detail-fase {
    background: rgba(76,214,224,0.1); color: #4cd6e0;
    padding: 2px 8px; border-radius: 3px;
}

/* Chips de etiquetas (custom_etiquetas) — catálogo canónico de 7 tags.
   Ver spec vista_reporte.md sección "Etiquetas por tarea". */
.cl-task-tags {
    display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.cl-task-tags-inline { margin-top: 2px; }
.cl-task-tag {
    display: inline-flex; align-items: center;
    padding: 1px 7px; border-radius: 999px;
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.3px; line-height: 1.6;
    border: 1px solid transparent;
    background: rgba(255,255,255,0.05); color: #c9d1d9;
}
.cl-task-tag-frontend   { background: rgba(76,157,255,0.15);  color: #4c9dff; border-color: rgba(76,157,255,0.35); }
.cl-task-tag-backend    { background: rgba(76,214,138,0.15);  color: #4cd68a; border-color: rgba(76,214,138,0.35); }
.cl-task-tag-base_datos { background: rgba(180,108,244,0.15); color: #b46cf4; border-color: rgba(180,108,244,0.35); }
.cl-task-tag-infra      { background: rgba(244,162,76,0.15);  color: #f4a24c; border-color: rgba(244,162,76,0.35); }
.cl-task-tag-bugfix     { background: rgba(244,113,113,0.15); color: #f47171; border-color: rgba(244,113,113,0.35); }
.cl-task-tag-estetico   { background: rgba(244,113,197,0.15); color: #f471c5; border-color: rgba(244,113,197,0.35); }
.cl-task-tag-refactor   { background: rgba(138,143,151,0.15); color: #8a8f97; border-color: rgba(138,143,151,0.35); }
.cl-task-detail-dur, .cl-task-detail-count { color: #8b949e; }
.cl-task-source.snap { color: #3fb950; }
.cl-task-source.live { color: #d29922; }
.cl-task-source.none { color: #6a737d; font-style: italic; }
.cl-task-detail-link {
    margin-left: auto; color: #4cd6e0; text-decoration: none; font-size: 11px;
}
.cl-task-detail-link:hover { text-decoration: underline; }
.cl-task-detail-msgs {
    padding: 12px 16px; max-height: calc(100vh - 220px); overflow-y: auto;
    display: flex; flex-direction: column; gap: 12px;
}

/* Vista tipo WhatsApp del transcript (rediseño del modal detalle).
   Ver spec vista_reporte.md sección "Vista tipo WhatsApp del transcript". */
/* Vista modal detalle tipo cascada estilo /claude
 * User: burbuja accent alineada derecha (radius 16 16 4 16)
 * Assistant: sin fondo, alineado izquierda, markdown ancho completo
 * Burbujas consecutivas del mismo rol se agrupan con gap chico */
.cl-wa-thread {
    padding: 18px 22px 24px;
    max-height: calc(100vh - 220px); overflow-y: auto;
    display: flex; flex-direction: column; gap: 10px;
    background: transparent;
}
.cl-wa-row { display: flex; width: 100%; }
.cl-wa-row-user { justify-content: flex-end; }
.cl-wa-row-asst { justify-content: flex-start; }
/* Gap reducido entre burbujas del mismo grupo (misma persona hablando) */
.cl-wa-row-user.cl-wa-grp-first,
.cl-wa-row-user.cl-wa-grp-mid,
.cl-wa-row-asst.cl-wa-grp-first,
.cl-wa-row-asst.cl-wa-grp-mid {
    margin-bottom: -8px;  /* neutraliza el gap 10px del thread → gap efectivo 2px */
}
.cl-wa-bubble {
    max-width: 82%;
    padding: 9px 14px 7px;
    border-radius: 16px;
    position: relative;
    cursor: default;
    transition: background 120ms ease;
}
.cl-wa-bubble[role="button"] { cursor: pointer; }

/* USER: cyan #00ffff hardcodeado — replica el signature color de /claude
 * dark theme, que sobreescribe --cl-accent a cyan puro. Aquí no podemos
 * usar la variable porque el modal vive en /lista_proyectos donde no
 * hay override y --cl-accent cae al violeta del sistema. */
.cl-wa-bubble-user {
    background: #00ffff;
    color: #0f1115;
    max-width: 82%;
    border-radius: 16px 16px 4px 16px;
    line-height: 1.5;
    font-size: 13.5px;
    box-shadow: 0 1px 2px rgba(0, 255, 255, 0.18);
}
.cl-wa-bubble-user.cl-wa-grp-first { border-radius: 16px 16px 4px 16px; }
.cl-wa-bubble-user.cl-wa-grp-mid { border-radius: 16px 4px 4px 16px; }
.cl-wa-bubble-user.cl-wa-grp-last { border-radius: 16px 4px 4px 16px; }
.cl-wa-bubble-user[role="button"]:hover { filter: brightness(1.05); }

/* ASSISTANT: transparente, sin borde, texto ancho completo (como /claude) */
.cl-wa-bubble-asst {
    background: transparent;
    color: var(--cl-text, var(--app-text, #c9d1d9));
    max-width: 92%;
    padding: 4px 4px 4px 0;
    border-radius: 0;
    font-size: 13.5px;
    line-height: 1.62;
    box-shadow: none;
}
.cl-wa-bubble-asst.cl-wa-grp-first,
.cl-wa-bubble-asst.cl-wa-grp-mid,
.cl-wa-bubble-asst.cl-wa-grp-last,
.cl-wa-bubble-asst.cl-wa-grp-solo {
    border-radius: 0;
}
.cl-wa-text {
    font-size: 13px; line-height: 1.45;
    white-space: pre-wrap; word-break: break-word;
}
.cl-wa-text.cl-wa-md {
    white-space: normal;
}
.cl-wa-text.cl-wa-md p { margin: 0 0 8px; }
.cl-wa-text.cl-wa-md p:last-child { margin-bottom: 0; }
.cl-wa-text.cl-wa-md ul, .cl-wa-text.cl-wa-md ol {
    margin: 4px 0 8px; padding-left: 22px;
}
.cl-wa-text.cl-wa-md li { margin: 2px 0; }
.cl-wa-text.cl-wa-md code {
    background: rgba(255,255,255,0.08); color: #f4a24c;
    padding: 1px 5px; border-radius: 3px;
    font-family: var(--cl-mono, ui-monospace, monospace); font-size: 12px;
}
.cl-wa-text.cl-wa-md pre {
    background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px; padding: 8px 10px;
    margin: 6px 0; overflow-x: auto;
    font-family: var(--cl-mono, ui-monospace, monospace); font-size: 11.5px;
    line-height: 1.4; color: #c9d1d9;
}
.cl-wa-text.cl-wa-md pre code {
    background: transparent; color: inherit; padding: 0; font-size: inherit;
}
.cl-wa-text.cl-wa-md strong { color: #ffffff; font-weight: 600; }
.cl-wa-text.cl-wa-md em { color: #adbac7; }
.cl-wa-text.cl-wa-md a { color: #4cd6e0; text-decoration: none; }
.cl-wa-text.cl-wa-md a:hover { text-decoration: underline; }
.cl-wa-text.cl-wa-md h1, .cl-wa-text.cl-wa-md h2, .cl-wa-text.cl-wa-md h3, .cl-wa-text.cl-wa-md h4 {
    margin: 8px 0 4px; color: #4cd6e0; font-size: 13px; font-weight: 600;
}
.cl-wa-text.cl-wa-md blockquote {
    border-left: 3px solid rgba(76,214,224,0.35);
    margin: 4px 0; padding: 2px 10px;
    color: #adbac7; font-style: italic;
}
.cl-wa-text.cl-wa-collapsed::after {
    content: " ↓";
    color: #4cd6e0; font-size: 11px; opacity: 0.7;
}
.cl-wa-text.cl-wa-expanded::after {
    content: " ↑";
    color: #4cd6e0; font-size: 11px; opacity: 0.7;
}
.cl-wa-tools {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-top: 6px; padding-top: 6px;
    border-top: 1px dashed rgba(255,255,255,0.06);
}
.cl-wa-imgs {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 8px;
}
.cl-wa-img-thumb {
    display: block;
    padding: 0;
    width: 160px; height: 110px;
    border-radius: 6px;
    border: 1px solid rgba(76,214,224,0.35);
    background: rgba(0,0,0,0.2);
    cursor: zoom-in;
    overflow: hidden;
    transition: border-color 120ms ease, transform 80ms ease;
}
.cl-wa-img-thumb:hover { border-color: rgba(76,214,224,0.75); }
.cl-wa-img-thumb:active { transform: scale(0.97); }
.cl-wa-img-thumb-img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
}
@media (max-width: 640px) {
    .cl-wa-img-thumb { width: 130px; height: 90px; }
}

/* Lightbox: overlay full-screen, click al fondo o Esc cierra. */
.cl-wa-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    cursor: zoom-out;
    animation: cl-wa-lb-in 120ms ease;
}
@keyframes cl-wa-lb-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.cl-wa-lightbox-img {
    max-width: 90vw; max-height: 90vh;
    display: block;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    cursor: default;
}
.cl-wa-tool, .cl-wa-tool-res {
    display: inline-flex; align-items: center;
    padding: 1px 7px; border-radius: 999px;
    font-size: 10px; line-height: 1.6;
    background: rgba(255,255,255,0.05);
    color: #adbac7;
    max-width: 200px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-wa-tool { color: #4cd6e0; }
.cl-wa-ts {
    display: block;
    text-align: right;
    color: var(--cl-text-dim, #6a737d); font-size: 9.5px;
    margin-top: 3px;
    font-family: var(--cl-mono, ui-monospace, monospace);
}
/* En burbuja user (fondo cyan) el timestamp necesita mejor contraste */
.cl-wa-bubble-user .cl-wa-ts {
    color: rgba(15, 17, 21, 0.55);
}
.cl-wa-bubble-asst .cl-wa-ts {
    text-align: left;
}
.cl-wa-sep {
    display: flex; align-items: center; gap: 10px;
    margin: 18px 0 8px;
    color: #6a737d; font-size: 10.5px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.cl-wa-sep:first-child { margin-top: 4px; }
.cl-wa-sep-line { flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
.cl-wa-sep-label {
    padding: 3px 10px; border-radius: 999px;
    border: 1px solid rgba(76,214,224,0.25);
    background: rgba(76,214,224,0.08); color: #4cd6e0;
    max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 640px) {
    .cl-wa-bubble { max-width: 88%; padding: 7px 10px 5px; }
    .cl-wa-text { font-size: 12.5px; }
    .cl-wa-sep-label { max-width: 75%; font-size: 9.5px; }
}
.cl-task-msg {
    padding: 10px 12px; border-radius: 6px; border: 1px solid #21262d;
}
.cl-task-msg-user {
    background: rgba(76, 214, 224, 0.06);
    border-color: rgba(76, 214, 224, 0.25);
}
.cl-task-msg-assistant {
    background: rgba(255, 255, 255, 0.02);
}
.cl-task-msg-head {
    display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px;
}
.cl-task-msg-role {
    font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
    color: #4cd6e0; text-transform: uppercase;
}
.cl-task-msg-assistant .cl-task-msg-role { color: #adbac7; }
.cl-task-msg-ts { color: #6a737d; font-size: 10px; }
.cl-task-msg-text {
    color: #c9d1d9; font-size: 13px; white-space: pre-wrap; line-height: 1.5;
}
.cl-task-msg-tools {
    margin-top: 6px; display: flex; flex-direction: column; gap: 4px;
}
.cl-task-tool {
    background: rgba(255,255,255,0.03); padding: 4px 8px; border-radius: 3px;
    font-size: 11px; color: #8b949e; display: flex; gap: 8px; align-items: baseline;
}
.cl-task-tool-name { color: #4cd6e0; font-weight: 500; }
.cl-task-tool-arg { color: #8b949e; font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-task-tool-result {
    padding: 4px 8px 4px 20px; font-size: 11px; color: #6a737d;
    font-family: monospace; white-space: pre-wrap;
    max-height: 100px; overflow: hidden;
}

/* Modo montado: sin backdrop oscurecido, sin fixed positioning
 * Renderiza el UI del calendario dentro de un container arbitrario.
 * Ver spec modulo_shared.md API mount().
 */
.cl-spec-modal-backdrop.cl-mounted-mode {
    position: static !important;
    background: transparent !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    padding: 0 !important;
    inset: auto !important;
}
.cl-spec-modal-backdrop.cl-mounted-mode > .cl-spec-modal {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    height: 100% !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* Actividad Reciente montada como pantalla principal en /lista_proyectos */
.lp-actrec-principal {
    width: 100%; height: 100%; min-height: calc(100vh - 100px);
}

/* Vista Por Proyecto — cards agrupadas por empresa con turns del user
 * (con y sin task). Estilos alineados con .cl-r-empresa y .cl-wa-*
 * pero adaptados a lista de mensajes cortos. Ver spec vista_por_proyecto.md. */
.cl-pv-empresas { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.cl-pv-empresa { border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; overflow: hidden; }
.cl-pv-empresa > summary {
    padding: 10px 14px; cursor: pointer; user-select: none;
    background: rgba(255,255,255,0.02); color: #c9d1d9;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 600;
}
.cl-pv-empresa > summary::-webkit-details-marker { display: none; }
.cl-pv-empresa > summary::before {
    content: "▸"; color: #4cd6e0; font-size: 10px;
    transition: transform 120ms ease;
}
.cl-pv-empresa[open] > summary::before { transform: rotate(90deg); }
.cl-pv-empresa-name { text-transform: uppercase; letter-spacing: 0.04em; }
.cl-pv-empresa-count { color: #6a737d; font-weight: 400; font-size: 11.5px; }
.cl-pv-cards { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.cl-pv-proj {
    border: 1px solid rgba(76,214,224,0.15); border-radius: 6px;
    background: rgba(76,214,224,0.03);
}
.cl-pv-proj > summary {
    padding: 8px 12px; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: 12px;
    font-size: 12.5px;
}
.cl-pv-proj > summary::-webkit-details-marker { display: none; }
.cl-pv-proj > summary::before {
    content: "▸"; color: #4cd6e0; font-size: 10px;
    transition: transform 120ms ease;
}
.cl-pv-proj[open] > summary::before { transform: rotate(90deg); }
.cl-pv-proj-name { color: #4cd6e0; font-weight: 600; flex: 1; }
.cl-pv-proj-counts { color: #8b949e; font-size: 11px; }
.cl-pv-proj-filter {
    display: flex; gap: 4px; padding: 6px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cl-pv-filter-btn {
    background: transparent; border: 1px solid rgba(255,255,255,0.08);
    color: #8b949e; font-size: 10.5px; padding: 3px 9px;
    border-radius: 4px; cursor: pointer;
}
.cl-pv-filter-btn:hover { border-color: rgba(76,214,224,0.35); color: #c9d1d9; }
.cl-pv-filter-btn[data-active="true"] {
    background: rgba(76,214,224,0.12); color: #4cd6e0; border-color: rgba(76,214,224,0.35);
}
.cl-pv-turns { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.cl-pv-turn {
    padding: 6px 10px; border-radius: 6px;
    background: rgba(0,0,0,0.15);
    border-left: 3px solid rgba(76,214,224,0.35);
}
.cl-pv-turn[data-kind="plan"] { border-left-color: rgba(139, 148, 158, 0.35); }
.cl-pv-turn[data-kind="task"] { border-left-color: rgba(76, 214, 224, 0.6); }
.cl-pv-turn-head {
    display: flex; gap: 10px; align-items: center;
    font-size: 10.5px; margin-bottom: 3px;
}
.cl-pv-turn-time { color: #6a737d; font-family: var(--cl-mono, ui-monospace, monospace); }
.cl-pv-turn-chat {
    color: #8b949e; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; max-width: 200px;
}
.cl-pv-turn-tasklink {
    color: #4cd6e0; text-decoration: none; margin-left: auto;
    font-size: 10.5px; padding: 1px 6px; border-radius: 3px;
    background: rgba(76,214,224,0.08);
}
.cl-pv-turn-tasklink:hover { background: rgba(76,214,224,0.18); text-decoration: underline; }
.cl-pv-turn-plan {
    color: #6a737d; margin-left: auto; font-size: 10.5px;
    font-style: italic;
}
.cl-pv-turn-text {
    color: #c9d1d9; font-size: 12.5px; line-height: 1.4;
    white-space: pre-wrap; word-break: break-word;
}
@media (max-width: 640px) {
    .cl-pv-proj > summary { flex-wrap: wrap; }
    .cl-pv-proj-counts { font-size: 10.5px; width: 100%; }
    .cl-pv-turn-head { flex-wrap: wrap; }
    .cl-pv-turn-chat { max-width: 140px; }
}
@media (max-width: 380px) {
    .cl-pv-cards { padding: 6px 8px 10px; }
    .cl-pv-turn { padding: 5px 8px; }
}

/* ─── Mobile ≤ 640px: pantalla completa, sin marcos acumulados ───
 * Spec: actividad_reciente_shared/features/detalle_dia_por_tareas (v3).
 * Va al final del archivo para ganar a los bloques 640/380px anteriores
 * con la misma especificidad. Los contenedores estructurales pierden el
 * padding horizontal; solo la tarjeta hoja conserva padding interno. */
@media (max-width: 640px) {
    .cl-spec-modal-body { padding: 4px 0 !important; }
    .cl-recent-toolbar { padding: 6px 8px; }
    .cl-cal-wrap { padding: 4px 2px 8px; }
    .cl-spec-tl-list.cl-spec-tl-collapsed { max-height: 44px; min-height: 44px; }
    .cl-spec-tl-detail { padding: 6px 0 4px; gap: 8px; margin-top: 6px; }
    .cl-spec-tl-detail-head { padding: 8px 10px; }
    .cl-recent-report-toolbar { padding: 6px 8px; }
    .cl-recent-report-body { padding: 8px 4px; }
    .cl-r-empresa summary { padding: 8px 10px; }
    .cl-r-subproy { margin: 2px 0 4px; padding-left: 4px; }
    .cl-r-subproy summary { padding: 5px 6px; }
    .cl-r-rows { padding: 2px 0 6px; }
    .cl-r-row { padding: 8px 6px; }
    .cl-r-card { padding: 10px; }
    .cl-pv-cards { padding: 6px 4px 8px; }
    .cl-pv-proj > summary { padding: 8px 8px; }
    .cl-pv-proj-filter { padding: 6px 8px; }
    .cl-pv-turns { padding: 6px 4px 8px; }
    .cl-pv-turn { padding: 6px 8px; }
    .cl-day-semantic { padding: 6px 4px 12px; }
    .cl-day-empresa-body { padding: 4px 6px 8px; }
    .cl-day-sub { padding: 6px 6px; }
    .cl-day-fase-body { padding-left: 10px; }
}