/* Chatper · tasks.css
   Tareas (SPEC §24): pestaña «Tareas» de una sala (tasks/tasks-view.js), «Mis tareas» (tasks/my-tasks-view.js,
   con las mismas filas), diálogo de crear / editar (tasks/task-dialog.js) y contador de la pestaña del dock. Todo
   con los tokens de base.css: el tema oscuro y el color de acento salen solos. La etiqueta bajo la burbuja del
   chat está en chat.css (.msg-task); la fila «Mis tareas» de la lista de salas, en layout.css (.room-mytasks). */

/* --------------------------------------------------------------------------
   Vista
   -------------------------------------------------------------------------- */
.tasks-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--bg);
  container-type: inline-size;
  container-name: tasks;
}

.tasks-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  flex-shrink: 0;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.tasks-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem; min-width: 0; }
/* SPEC §29: «Esta sala · Mis tareas» (la misma pestaña), en su fila */
.tasks-scope { flex: 1 0 100%; width: 100%; }
.tasks-scope > button { flex: 1; }
.tasks-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }

.tasks-mine {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.tasks-mine[hidden] { display: none; }
.tasks-mine .switch { width: 2.2rem; height: 1.3rem; }
.tasks-mine .switch::before { width: 0.95rem; height: 0.95rem; }
.tasks-mine .switch:checked::before { transform: translateX(0.9rem); }

.tasks-scroll { flex: 1; min-height: 0; padding: 0.85rem 0.9rem 2rem; }
.tasks-list { display: flex; flex-direction: column; gap: 1rem; max-width: 46rem; margin: 0 auto; }
.tasks-loading { min-height: 10rem; }
.tasks-empty { padding: 2.5rem 1rem; }
.tasks-note {
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text-subtle);
  font-size: 0.875rem;
  text-align: center;
  animation: cp-soft-in var(--dur-in) var(--ease) both;
}

/* --- Filas ------------------------------------------------------------------ */
.tasks-group { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }

.task-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.6rem;
  padding: 0.55rem 0.4rem 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  outline: none;
  animation: cp-soft-in var(--dur-in) var(--ease) both;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), opacity var(--dur-slow) var(--ease);
}
.task-row:hover { border-color: var(--border-strong); }
.task-row:focus-visible { box-shadow: var(--focus-ring); }

.task-lead {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
}
.task-check-hit { margin: -0.1rem 0 0 -0.1rem; border-radius: var(--radius-sm); cursor: pointer; }
.task-check-hit:hover { background: var(--surface-2); }
.task-check { width: 1.2rem; height: 1.2rem; border-radius: 6px; }
.task-check::after { width: 0.75rem; height: 0.75rem; }

.task-main { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; padding-top: 0.12rem; }
.task-text {
  margin: 0;
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  transition: color var(--dur) var(--ease);
}
.task-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.65rem;
  color: var(--text-subtle);
  font-size: 0.78rem;
  line-height: 1.3;
}
.task-meta svg { width: 0.8rem; height: 0.8rem; flex-shrink: 0; }
.task-who { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; color: var(--text-muted); font-weight: 550; }
.task-who .avatar { box-shadow: none; }
.task-who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-who.is-nobody { color: var(--text-subtle); font-weight: 500; }
/* De quién viene y rechazos (§60, task-origin.js) */
.task-from { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; color: var(--text-muted); }
.task-from .avatar { box-shadow: none; }
.task-from-when { white-space: nowrap; }
.task-declined { display: inline-flex; align-items: center; gap: 0.25rem; min-width: 0; color: var(--danger-text); }
.task-declined-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-due {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 1.35rem;
  padding: 0 0.45rem;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-muted);
  font-weight: 550;
  white-space: nowrap;
}
.task-due.is-today { background: var(--accent-soft); color: var(--accent-text); font-weight: 650; }
.task-due.is-overdue { background: var(--danger-soft); color: var(--danger-text); }
.task-when { display: inline-flex; align-items: center; gap: 0.25rem; }
.task-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.15rem;
  margin: -0.1rem -0.15rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--accent-text);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
}
.task-link:hover { text-decoration: underline; }
.task-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.task-menu { --btn-h: 1.85rem; color: var(--text-subtle); opacity: 0.75; transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.task-row:hover .task-menu, .task-menu:focus-visible, .task-menu[aria-expanded="true"] { opacity: 1; color: var(--text-muted); }

/* Sala de la tarea en «Mis tareas» (SPEC §24.4): su icono y su nombre; abre su pestaña Tareas */
.task-room {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  min-width: 0;
  height: 1.35rem;
  padding: 0 0.5rem 0 0.2rem;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.task-room:hover { background: var(--surface-3); color: var(--text); }
.task-room:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.task-room .room-emoji { box-shadow: none; }
.task-room-name { min-width: 0; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hechas: tachadas y más discretas */
.task-row.is-done { background: transparent; box-shadow: none; border-style: dashed; }
.task-row.is-done .task-text,
.task-row.is-leaving .task-text { color: var(--text-subtle); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-subtle) 70%, transparent); }
.task-row.is-leaving { opacity: 0.55; }

/* Elemento resaltado (desde la etiqueta del chat o al crearlo) */
.task-row.is-highlight { animation: cp-soft-in var(--dur-in) var(--ease) both, tasks-flash 2.4s var(--ease) both; }
@keyframes tasks-flash {
  0%, 35% {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  }
}

/* --- «Mis tareas»: grupos por fecha (Vencidas, Hoy, Mañana, Más adelante, Sin fecha) ----------------------- */
.mytasks-view .tasks-mine { white-space: normal; }
.mytasks-section { display: flex; flex-direction: column; gap: 0.4rem; }
.mytasks-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0 0.25rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mytasks-head.is-overdue { color: var(--danger-text); }
.mytasks-head.is-today { color: var(--accent-text); }
.mytasks-head-count { color: var(--text-subtle); font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* --- «Hechas (N)» ------------------------------------------------------------- */
.tasks-done { display: flex; flex-direction: column; gap: 0.4rem; }
.tasks-done-toggle {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.35rem;
  padding: 0.35rem 0.55rem 0.35rem 0.35rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tasks-done-toggle:hover { background: var(--surface-2); color: var(--text); }
.tasks-done-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tasks-done-chevron { transition: transform var(--dur) var(--ease); }
.tasks-done.is-open .tasks-done-chevron { transform: rotate(90deg); }
.tasks-done-count { color: var(--text-subtle); font-weight: 550; font-variant-numeric: tabular-nums; }

/* Columna estrecha: «Solo las mías» y el botón, solo con su icono */
@container tasks (max-width: 30rem) {
  .tasks-toolbar { padding: 0.55rem 0.65rem; }
  .tasks-actions .btn { width: var(--btn-h); padding: 0; }
  .tasks-actions .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
@container tasks (max-width: 23rem) {
  .tasks-scroll { padding: 0.65rem 0.6rem 1.5rem; }
}

/* --------------------------------------------------------------------------
   Diálogo crear / editar
   -------------------------------------------------------------------------- */
.task-dlg { display: flex; flex-direction: column; gap: 1rem; }
.task-dlg .field { margin-bottom: 0; }
.task-dlg-source {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.8125rem;
}
.task-dlg-source strong { color: var(--text); font-weight: 600; }
.task-dlg-source svg { flex-shrink: 0; color: var(--accent-text); }

.task-dlg-count { color: var(--text-subtle); font-weight: 400; font-variant-numeric: tabular-nums; }
.task-dlg-text { min-height: 4.5rem; resize: none; }
.task-dlg-task-fields { display: flex; flex-direction: column; gap: 1rem; }
.task-dlg-date-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.task-dlg-date { flex: 1 1 9.5rem; width: auto; min-width: 0; }
.task-dlg-quicks { display: flex; gap: 0.2rem; }
.task-dlg-quick { --btn-h: 2.1rem; }

/* --------------------------------------------------------------------------
   Contador de la pestaña del dock (abiertas asignadas a mí; en Mis tareas, de todas las salas del espacio)
   -------------------------------------------------------------------------- */
.dock-tab-badge.badge-tasks { background: var(--accent-soft); color: var(--accent-text); }
.dock-tab-badge.badge-tasks.is-due { background: var(--accent); color: var(--accent-contrast); }

@media (prefers-reduced-motion: reduce) {
  .task-row, .task-row.is-highlight, .tasks-note { animation: none; }
  .task-row.is-highlight { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
}