/* ═══════════════════════════════════════════════════════════════
   Tablero de tareas (CrmTaskBoard, TaskEditModal) — cinco columnas: Pendiente, En progreso, En bloqueo, En revisión, Completado.
   Only theme tokens (light and dark): no fixed colour here.
   ═══════════════════════════════════════════════════════════════ */

/* ── Toolbar: count, filters, quick-create, «Nueva tarea» ── */
.tb-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.tb-toolbar__count { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: 600; color: var(--blue-800); }
.tb-toolbar__actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.tb-toolbar .form-control { font-size: 13px; }
.tb-toolbar__filter { width: 240px; }
.tb-toolbar__quick { width: 260px; }
.tb-toolbar__date { width: 150px; }
.tb-toolbar__select { width: auto; min-width: 130px; }

.tb-loading { padding: var(--space-8); text-align: center; color: var(--gray-500); }
.tb-loading i { font-size: 24px; display: inline-block; animation: crm-spin 1s linear infinite; }

/* ── Board and columns ── */
.tb-board { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: var(--space-3); overflow-x: auto; align-items: start; padding-bottom: var(--space-2); }
.tb-col { background: var(--gray-50); border: 2px dashed transparent; border-radius: var(--r-lg); padding: var(--space-3); min-height: 240px;
    transition: background .12s, border-color .12s; }
.tb-col--over { background: var(--blue-50); border-color: var(--blue-400); }
.tb-col__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: 11px; font-weight: 700; color: var(--gray-600);
    text-transform: uppercase; letter-spacing: .06em; }
.tb-col__count { margin-left: auto; background: var(--white); color: var(--gray-700); border: 1px solid var(--gray-100); padding: 2px 8px; border-radius: var(--r-pill);
    font-weight: 600; letter-spacing: 0; }
.tb-col__empty { padding: var(--space-4) var(--space-2); text-align: center; font-size: 12px; color: var(--gray-400); }

/* ── Card ── */
.tb-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-md); padding: var(--space-3); margin-bottom: var(--space-2);
    cursor: grab; box-shadow: var(--shadow-sm); display: grid; gap: var(--space-2); }
.tb-card:hover { border-color: var(--gray-300); }
.tb-card:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.tb-card--overdue { border-color: var(--red-border); }
.tb-card--dragging { opacity: .4; }
.tb-card__title { font-size: 13px; font-weight: 600; color: var(--blue-800); overflow-wrap: anywhere; }
.tb-card__contact { font-size: 11px; color: var(--blue-600); text-decoration: none; justify-self: start; }
.tb-card__contact:hover, .tb-card__contact:focus-visible { text-decoration: underline; }
.tb-card__meta { display: flex; align-items: center; gap: var(--space-2); font-size: 11px; color: var(--gray-500); }
.tb-card--overdue .tb-card__due { color: var(--red-600); font-weight: 600; }
.tb-card__assignee { font-size: 11px; color: var(--gray-700); display: flex; align-items: center; gap: var(--space-1); }
.tb-card__assignee--none { color: var(--gray-400); }
.tb-card__delete { margin-left: auto; border: 1px solid var(--gray-100); background: var(--white); color: var(--red-500); border-radius: var(--r-sm);
    padding: 2px 6px; font-size: 12px; cursor: pointer; line-height: 1; }
.tb-card__delete:hover, .tb-card__delete:focus-visible { background: var(--red-100); border-color: var(--red-border); }

/* ── Priority ── */
.tb-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill); font-size: 10px; font-weight: 700; border: 1px solid transparent;
    white-space: nowrap; }
.tb-pill--low { background: var(--gray-100); color: var(--gray-600); border-color: var(--gray-200); }
.tb-pill--medium { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
.tb-pill--high { background: var(--gold-100); color: var(--gold-700); border-color: var(--gold-200); }
.tb-pill--critical { background: var(--red-100); color: var(--red-600); border-color: var(--red-border); }

/* ── Modal ── */
.tb-modal { max-width: 720px; }
.tb-modal__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.tb-modal .sup-form input[type=date], .tb-modal.ba-modal input[type=date] { padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: var(--r-md);
    background: var(--white); color: var(--gray-900); font: inherit; font-weight: 400; }
.tb-modal__meta { font-size: 12px; color: var(--gray-500); }
.tb-modal__delete { margin-right: auto; color: var(--red-600); }
.tb-confirm { max-width: 420px; }
.tb-confirm__text { font-size: 14px; color: var(--gray-700); }

@media (max-width: 720px) {
    .tb-modal__row { grid-template-columns: 1fr; }
    .tb-toolbar__filter, .tb-toolbar__quick { width: 100%; }
}

/* ── Etapas de tareas (TaskStagePage): the same tasks as a list ── */
.ts-table { width: 100%; }
.ts-table td { vertical-align: top; }
.ts-open { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.ts-open:hover, .ts-open:focus-visible { text-decoration: underline; }
.ts-description { margin-top: var(--space-1); font-size: 12px; color: var(--gray-600); max-height: 6em; overflow: hidden; }

/* ── Hours on a card, and the module / hours fields of the modal ── */
.tb-card__hours { font-size: 11px; color: var(--gray-600); display: flex; align-items: center; gap: var(--space-1); }
.tb-card__module { font-size: 10px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; }
.tb-modal__complete { color: var(--green-600); }
.tb-modal__review { color: var(--purple-500); }
/* Up to five buttons in the modal footer: they wrap instead of overflowing on a phone. */
.tb-modal .ba-modal__footer { flex-wrap: wrap; }

/* ── «¿Cuántas horas te tomó?» ── */
.tb-hours { max-width: 440px; }
.tb-hours__reference { display: flex; align-items: center; gap: var(--space-1); font-size: 12px; color: var(--gray-600); }

/* ── Figures above the board (TaskSummaryPanel) ── */
.tb-stats { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.tb-modules { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.tb-modules__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.tb-modules__title { font-size: 13px; font-weight: 700; color: var(--blue-800); display: flex; align-items: center; gap: var(--space-2); }
.tb-modules__legend { display: flex; align-items: center; gap: var(--space-2); font-size: 11px; color: var(--gray-600); }
.tb-modules__key { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-sm); }
.tb-modules__key--est, .tb-bar__fill--est { background: var(--blue-400); }
.tb-modules__key--real, .tb-bar__fill--real { background: var(--gold-500); }
.tb-modules__scroll { overflow-x: auto; }
.tb-modules__table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tb-modules__table th, .tb-modules__table td { text-align: left; padding: var(--space-2); border-top: 1px solid var(--gray-100); vertical-align: middle; }
.tb-modules__table thead th { border-top: 0; font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; }
.tb-modules__name { font-weight: 600; color: var(--gray-800); white-space: nowrap; }
.tb-modules__count { color: var(--gray-700); white-space: nowrap; }
.tb-modules__done { color: var(--gray-500); }
.tb-modules__bars { width: 60%; min-width: 200px; display: grid; gap: var(--space-1); }
.tb-bar { position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: 16px; }
.tb-bar__fill { display: block; height: 10px; border-radius: var(--r-pill); min-width: 2px; flex: 0 0 auto; }
.tb-bar__value { font-size: 11px; color: var(--gray-700); white-space: nowrap; }
.tb-modules__more { margin-top: var(--space-2); font-size: 11px; color: var(--gray-500); }

@media (max-width: 720px) {
    .tb-modules__bars { width: auto; min-width: 160px; }
}
.tb-modules__toggle { display: flex; align-items: center; gap: var(--space-2); background: none; border: 0; padding: 0; cursor: pointer; color: var(--blue-800); }
.tb-modules__toggle:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; border-radius: var(--r-sm); }
.tb-modules__totals { font-size: 12px; color: var(--gray-600); }

/* «Responsables» of the table «Horas por módulo», and the module name as a button that filters the board. */
.tb-modules__pick { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--blue-800); cursor: pointer; text-align: left; }
.tb-modules__pick:hover { text-decoration: underline; }
.tb-modules__pick:focus-visible, .tb-modules__person:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; border-radius: var(--r-sm); }
.tb-modules__people { display: flex; flex-wrap: wrap; gap: var(--space-1); min-width: 160px; }
.tb-modules__person { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; white-space: nowrap; cursor: pointer;
    background: var(--blue-50); color: var(--blue-800); border: 1px solid var(--gray-200); }
.tb-modules__person:hover { border-color: var(--blue-400); }
.tb-modules__person--none { color: var(--gray-600); font-style: italic; }