/* Askel — Componentes. Todos los valores salen de tokens.css (cargado antes). */

/* ============================================================
   2. RESET / BASE
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--bg-app);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
[x-cloak] { display: none !important; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

h1, h2, h3, h4, h5, .brand-font {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: normal;
}
h1, h2, h3 { text-wrap: balance; }
h1 { letter-spacing: var(--tracking-display); }
p, span, label, option, a { letter-spacing: var(--tracking-tight); }

/* ============================================================
   3. ANIMATIONS
   Los keyframes con solo `from` animan hacia el estilo final del elemento.
   ============================================================ */
@keyframes ht-pop-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
}
@keyframes ht-ring {
  from { opacity: 0.85; transform: scale(1); }
  to { opacity: 0; transform: scale(2.4); }
}
@keyframes ht-toast-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
}
@keyframes ht-toast-out {
  to { opacity: 0; transform: translateX(16px); }
}

/* Hasta que Alpine termina de arrancar (motion.js agrega .ht-ready) nada transiciona:
   así las clases del primer render no animan. */
html:not(.ht-ready) *,
html:not(.ht-ready) *::before,
html:not(.ht-ready) *::after {
  transition: none !important;
}

/* ============================================================
   4. GLASS PRIMITIVES
   ============================================================ */
.form-control,
.btn,
.workspace-card,
.task-row,
.tree-item,
.tree-section__toggle,
.account-menu__item,
.workspace-switcher,
.workspace-switcher-item,
.workspace-invite-btn {
  transition: var(--transition-ui);
}

.glass-panel {
  background: var(--bg-glass);
  border: var(--border-width) solid var(--border-glass);
  border-top-color: var(--border-glass-top);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

.workspace-card:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
}

/* ============================================================
   5. HEADER + NAV (restaurado del original)
   ============================================================ */
.app-header {
  position: sticky;
  top: var(--space-6);
  z-index: 50;
  max-width: 1100px;
  width: min(90%, 1100px);
  margin: var(--space-6) auto 0;
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--bg-header);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--blur-header);
  -webkit-backdrop-filter: var(--blur-header);
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.brand-mark {
  width: 2.2rem;
  height: 2.2rem;
  position: relative;

  /* 128 px sacado de logo.png (3600 px, el original para otros usos). */
  background-image: url('/assets/images/brand-mark.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  background-color: transparent;
  border: none;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.brand-font {
  font-family: var(--font-display);
  font-size: var(--fs-brand);
  letter-spacing: var(--tracking-label);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--accent);
}

.floating-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-1);
  background: var(--bg-panel);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}
.nav-pills { display: flex; align-items: center; gap: var(--space-2); }

.nav-pill:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-pill.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: var(--border-width) solid var(--border-strong);
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Account menu */
.account-menu { position: relative; }

.account-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-subtle);
  color: var(--text-primary);
  cursor: pointer;
}

.account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-round);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.account-menu__label { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-secondary); }
.account-menu__caret { color: var(--text-muted); font-size: var(--fs-xs); }

.menu-caret {
  display: inline-block;
  transition: transform var(--motion-fast) var(--motion-ease);
}
.menu-caret.is-open { transform: rotate(180deg); }

.account-menu__dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 180px;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--bg-elevated);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popover);
  z-index: 100;
}

.account-menu__item {
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.account-menu__item:hover { background: var(--bg-hover); }
.account-menu__item--danger { color: var(--danger); }

/* Hub: avatar y campana comparten una sola píldora (la campana ocupa el lugar del nombre) */
.account-cluster {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-subtle);
}
.account-cluster .account-menu__trigger {
  padding: 0 var(--space-2) 0 0;
  background: transparent;
  border-color: transparent;
}
.account-cluster .account-menu__trigger:hover { background: var(--bg-hover); }

.notifications {
  position: relative;
  display: flex;
  padding-left: var(--space-1);
  border-left: var(--border-width) solid var(--border-strong);
}

.notifications__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-lg);
  cursor: pointer;
  transition: var(--transition-ui);
}
.notifications__trigger:hover,
.notifications__trigger.is-open { background: var(--bg-hover); color: var(--text-primary); }
.notifications__trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.notifications__badge {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 1rem;
  height: 1rem;
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  border: var(--border-width-strong) solid var(--bg-surface);
  box-sizing: border-box;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.notifications__panel {
  position: absolute;
  top: calc(100% + var(--space-3));
  right: calc(var(--space-1) * -1);
  width: min(340px, calc(100vw - var(--space-8)));
  max-height: min(70vh, 460px);
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popover);
  overflow: hidden;
  z-index: 100;
}

.notifications__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.notifications__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.notifications__count {
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.notifications__empty {
  margin: 0;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.notifications__list {
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.notification {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}
.notification.is-unread { background: var(--bg-hover); }

.notification__marker {
  flex: none;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--radius-round);
  background: var(--neutral-marker);
}
.notification--invite .notification__marker { background: var(--accent); }
.notification--task_assigned .notification__marker { background: var(--success); }
.notification--today .notification__marker { background: var(--warning); }
.notification--overdue .notification__marker { background: var(--danger); }

.notification__copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}
.notification__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notification__body { font-size: var(--fs-xs); color: var(--text-secondary); }
.notification--overdue .notification__body { color: var(--danger); }

.notification__action { flex: none; }
.notification__link {
  flex: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.notification__link:hover { background: var(--accent-soft); }

/* ============================================================
   6. HUB LAYOUT (restaurado intacto)
   ============================================================ */
.hub-shell { padding-top: 0; }

.hub-layout {
  max-width: 1100px;
  margin: var(--space-4) auto 0;
  padding: 0 var(--space-4) var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

/* La columna derecha (Horizonte + Resumen) define la altura de la fila:
   Spaces y Foco no aportan tamaño propio y scrollean por dentro. */
.hub-layout > .sidebar-panel,
.hub-layout > .hub-panel:not(.progress-panel) {
  contain: size;
  display: flex;
  flex-direction: column;
}
.hub-layout .stack-list,
.hub-layout .mini-item-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* Indicador del carrusel del hub (solo visible en móvil) */
.hub-dots { display: none; }
.hub-dots__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}
.hub-dots__dot.is-active {
  width: 20px;
  background: var(--text-primary);
}

.hub-panel {
  padding: var(--space-5) var(--space-5);
  width: 100%;
  min-height: 100%;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.create-menu { position: relative; }
.more-actions-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  transition: var(--transition-ui);
}
.more-actions-trigger:hover,
.more-actions-trigger[aria-expanded="true"] {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.more-actions-trigger:disabled { opacity: .55; cursor: not-allowed; }
.more-actions-trigger .icon { width: 1.1rem; height: 1.1rem; }

.create-menu__dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 190px;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--bg-elevated);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popover);
  z-index: 100;
}

.panel-label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.section-subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Sidebar de hub */
.sidebar-panel { padding: var(--space-5); }

.stack-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ============================================================
   7. WORKSPACE CARDS (hub)
   ============================================================ */
.workspace-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4) var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-subtle);
  cursor: pointer;
}

.workspace-card__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1 1 auto;
}

.workspace-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.workspace-name {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text-primary); 
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workspace-kind {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-0-5);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.workspace-quick-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 2rem;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid transparent;
  background: transparent;
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-ui);
}
.workspace-quick-action:hover { background: var(--accent-soft); }
/* Spaces del hub: filas planas separadas por líneas finas, igual que Foco */
.hub-layout .sidebar-panel .stack-list { gap: 0; }
.hub-workspace-card {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-2);
  background: transparent;
  border: 0;
  border-top: var(--border-width) solid var(--border-subtle);
  border-radius: 0;
}
.hub-workspace-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-subtle);
}
.hub-workspace-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}
/* "+ Tarea" aparece al pasar o enfocar la fila; en pantallas táctiles queda siempre */
.hub-workspace-card .workspace-quick-action { opacity: 0; }
.hub-workspace-card:hover .workspace-quick-action,
.hub-workspace-card:focus-within .workspace-quick-action { opacity: 1; }
@media (hover: none) {
  .hub-workspace-card .workspace-quick-action { opacity: 1; }
}

.media-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border-subtle);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.media-placeholder--sm { width: 2.1rem; height: 2.1rem; border-radius: var(--radius-sm); font-size: var(--fs-2xs); }

/* ============================================================
   8. PROGRESS PANEL (hub)
   ============================================================ */
.progress-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Fila superior: próxima tarea + % completado lado a lado */
.progress-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-3);
  align-items: stretch;
}

.progress-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-4);
  min-height: 110px;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  position: relative;
  overflow: hidden;
}

.progress-stat--wide {
  grid-column: auto; /* ya no necesita ocupar todo el ancho */
}

.progress-label {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
}

.progress-stat strong {
  font-size: var(--fs-stat);
  line-height: 1.05;
  color: var(--text-primary);
  font-weight: var(--fw-bold);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}

.progress-stat small {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  margin-top: auto;
}
.progress-stat__task {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: auto;
  min-width: 0;
}
.progress-stat__task small { margin-top: 0; }
.progress-stat .progress-stat__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Chart: % completado por día. Cada día es un riel con su barra (como la maqueta de la landing):
   el porcentaje va arriba de la barra, así que no hace falta una escala aparte.
   Un día sin tareas tiene el riel punteado, distinto de un día medido en 0 %. */
.activity-chart {
  --chart-h: 140px;
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-subtle);
}

.activity-chart__plot {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2);
}

.activity-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.activity-day__value {
  height: 1rem;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.activity-day.is-today .activity-day__value { color: var(--text-primary); }

.activity-day__track {
  display: flex;
  align-items: flex-end;
  width: min(100%, 22px);
  height: var(--chart-h);
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  overflow: hidden;
}
.activity-day.is-empty .activity-day__track {
  background: transparent;
  border: var(--border-width) dashed var(--border-strong);
}

.activity-bar {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  transition: height var(--motion-medium) var(--motion-ease);
}
/* Hoy en acento pleno; los días anteriores, más apagados */
.activity-day.is-today .activity-bar { background: var(--accent); }

.activity-day__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.activity-day__label strong {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  letter-spacing: 0;
}
.activity-day.is-today .activity-day__label,
.activity-day.is-today .activity-day__label strong { color: var(--accent); }

.activity-chart__caption {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

@media (max-width: 640px) {
  .progress-overview {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   9. WORKSPACE LAYOUT CON SIDEBAR (NUEVA FUNCIÓN con estilo glass)
   ============================================================ */
.workspace-dashboard {
  min-height: 100vh;
}

.workspace-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 1100px;
  width: min(90%, 1100px);
  margin: var(--space-6) auto 0;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-header);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--blur-header);
  -webkit-backdrop-filter: var(--blur-header);
  position: relative;
  z-index: 10;
  overflow: visible;
}

.workspace-topbar__left,
.workspace-topbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Hub y workspace comparten grilla: el selector HUB/WORKSPACE queda centrado en el mismo lugar */
.app-header,
.workspace-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  view-transition-name: app-header;
}
.app-header > .app-header__brand { justify-self: start; min-width: 0; }
/* Ocupa toda la columna para que el buscador pueda achicarse antes de tocar el selector central */
.workspace-topbar__left { justify-self: stretch; min-width: 0; padding-right: var(--space-4); }
.app-header > .app-header__actions,
.workspace-topbar__right { justify-self: end; min-width: 0; }
.workspace-topbar .floating-nav { justify-self: center; }

.workspace-switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: var(--border-width) solid transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}
.workspace-switcher:hover {
  background: var(--bg-hover);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.workspace-switcher {
  color: var(--text-primary);
  max-width: 100%;
  border-color: var(--border-subtle);
}

.workspace-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 1 260px;
  min-width: 10rem;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-panel);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: var(--transition-ui);
}
.workspace-search:focus-within { border-color: var(--accent-border); }
/* El foco lo marca el contenedor; el input no suma su propio anillo */
.workspace-search input:focus-visible { box-shadow: none; }

/* Pista del atajo de teclado (N, /): solo con teclado y mouse, y se va al enfocar el campo */
.kbd-hint {
  flex-shrink: 0;
  min-width: 1.25rem;
  padding: 0 var(--space-1);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  text-align: center;
}
.workspace-search:focus-within .kbd-hint,
.quick-add:focus-within .kbd-hint { display: none; }
@media (hover: none) {
  .kbd-hint { display: none; }
}

/* Filtros y búsqueda en la misma fila */
.task-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--text-muted);
}
.workspace-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text-primary);
}
.workspace-search__icon { font-size: var(--fs-lg); }
.workspace-switcher > span:first-child {  max-width: 9.5rem;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}

.workspace-invite-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: var(--border-width) solid transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}
.workspace-invite-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-subtle);
  color: var(--accent);
}

.workspace-switcher-container {
  flex: 0 1 auto;
  min-width: 0;
  position: relative;
}

.workspace-switcher-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 200px;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--bg-elevated);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popover);
  z-index: 100;
}

.workspace-switcher-item {
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.workspace-switcher-item:hover {
  background: var(--bg-hover);
}

.workspace-switcher-item.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Menú ☰ del workspace: solo existe en móvil (ver sección responsive) */
.ws-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  font-size: 1.25rem;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.ws-menu-toggle.is-open { border-color: var(--border-strong); }
.ws-menu-toggle > span { display: inline-flex; }
.ws-drawer__spaces,
.ws-drawer__actions,
.ws-drawer-scrim { display: none; }

@keyframes ws-drawer-in {
  from { opacity: 0; transform: translateY(calc(var(--space-2) * -1)); }
  to { opacity: 1; transform: none; }
}
@keyframes ws-scrim-in {
  from { opacity: 0; }
}

/* Shell: sidebar + contenido */
.workspace-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-5);
  max-width: 1100px;
  margin: var(--space-5) auto var(--space-8);
  padding: 0 var(--space-6);
  align-items: start;
}

/* Sidebar glass */
.workspace-sidebar {
  position: sticky;
  top: calc(var(--space-12) * 2);
  padding: var(--space-4) var(--space-4);
  background: var(--bg-glass);
  border: var(--border-width) solid var(--border-glass);
  border-top-color: var(--border-glass-top);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

.workspace-tree {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tree-item,
.tree-section__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  color: var(--text-secondary);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.tree-section__toggle { justify-content: space-between; margin-top: var(--space-2); }
.tree-item:hover,
.tree-section__toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.tree-item.is-active,
.tree-item--root.is-active {
  background: var(--bg-surface);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.tree-item--root { color: var(--text-primary); }
.tree-item--child { padding-left: var(--space-4); }

.tree-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.tree-children {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-left: var(--space-1);
}

.tree-item__marker {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-round);
  background: var(--accent);
  flex-shrink: 0;
}
.tree-item__marker--sm { width: 0.4rem; height: 0.4rem; }

.tree-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.tree-children--nested {
  margin-left: var(--space-5);
  padding-left: var(--space-2);
  border-left: var(--border-width) solid var(--border-subtle);
  gap: var(--space-0-5);
}
.tree-item--nested {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.tree-item--nested.is-bucket:not(.is-active) {
  color: var(--text-muted);
  font-style: italic;
}
.tree-empty {
  padding: var(--space-1) var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.tree-section__chevron {
  display: inline-block;
  transition: transform var(--motion-fast) var(--motion-ease);
}
.tree-section__chevron.is-open { transform: rotate(90deg); }

.modal-context {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.modal-context strong { color: var(--accent); }

.tree-item__marker--neutral {
  background: var(--neutral-marker);
  box-shadow: none;
}

/* Contenido */
.workspace-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.workspace-content__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-glass);
  border: var(--border-width) solid var(--border-glass);
  border-top-color: var(--border-glass-top);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  overflow: visible;
  position: relative;
  z-index: 2;
}

.workspace-content__header h1 {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
}

.workspace-eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* Actualizar (spaces de equipo): trae lo que cambiaron los demás; el ícono gira mientras carga */
.workspace-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-md);
  transition: var(--transition-ui);
}
.workspace-refresh:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.workspace-refresh:disabled { cursor: default; }
.workspace-refresh.is-loading .icon { animation: ht-spin 0.8s linear infinite; }
@keyframes ht-spin { to { transform: rotate(360deg); } }

/* "+" del sidebar: horizontes y rutas se crean donde viven, sin un menú "+ Nuevo" aparte */
.tree-section__head {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.tree-section__head .tree-section__toggle { flex: 1; margin-top: 0; }
.tree-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.tree-row > .tree-item { flex: 1; min-width: 0; }
.tree-row__menu { flex: 0 0 auto; }
.tree-row__more { width: 1.75rem; height: 1.75rem; }
.tree-item__badge {
  flex: 0 0 auto;
  padding: 0 var(--space-2);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  line-height: 1.4rem;
}
.tree-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-md);
  transition: var(--transition-ui);
}
.tree-add:hover { background: var(--bg-hover); color: var(--text-primary); }
/* En cada horizonte el "+" aparece al pasar o enfocar la fila; en pantallas táctiles queda siempre */
.tree-row .tree-add { opacity: 0; }
.tree-row:hover .tree-add,
.tree-row:focus-within .tree-add { opacity: 1; }
@media (hover: none) {
  .tree-row .tree-add { opacity: 1; }
}

/* ============================================================
   10. TASK LIST (filas glass)
   ============================================================ */
.task-tabs {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--bg-panel);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  width: fit-content;
  /* En pantallas angostas las pestañas se deslizan en vez de ensanchar la página */
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.task-tabs::-webkit-scrollbar { display: none; }
.task-tab {
  flex: none;
  white-space: nowrap;
  background: transparent;
  color: var(--text-secondary);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.task-tab:hover { color: var(--text-primary); }
.task-tab.is-active {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* Lista plana: un solo panel de vidrio, filas separadas por líneas finas (sin una tarjeta por tarea) */
.task-panel {
  position: relative;
  z-index: 1;
  background: var(--bg-glass);
  border: var(--border-width) solid var(--border-glass);
  border-top-color: var(--border-glass-top);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  overflow: hidden;
}
.task-list {
  display: flex;
  flex-direction: column;
}
.task-list .empty-state {
  background: transparent;
  border: 0;
  border-radius: 0;
}
/* Cada bloque trae su línea arriba; -1px la esconde bajo el borde del panel cuando no hay alta rápida */
.task-list { margin-top: calc(-1 * var(--border-width)); }
.task-list .empty-state { border-top: var(--border-width) solid var(--border-subtle); }

/* Bloques por fecha: el encabezado habla igual que "Foco" u "Horizontes" */
.task-group {
  display: flex;
  flex-direction: column;
}
.task-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) var(--space-2);
  border-top: var(--border-width) solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.task-group__count {
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}
/* Lo atrasado se marca con el mismo punto que la prioridad, no con un título en rojo */
.task-group--overdue .task-group__head::before {
  content: '';
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--radius-round);
  background: var(--danger);
}

/* Alta rápida: la primera fila del panel; las opciones aparecen recién al escribir.
   "Más opciones" abre el formulario completo. */
.quick-add {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  transition: var(--transition-ui);
}
.quick-add:hover,
.quick-add:focus-within,
.quick-add.is-active { background: var(--bg-hover); }
.quick-add__field {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.quick-add__icon {
  display: inline-flex;
  justify-content: center;
  width: 1.25rem;
  color: var(--text-muted);
  font-size: var(--fs-lg);
}
.quick-add:focus-within .quick-add__icon { color: var(--text-secondary); }
.quick-add__input {
  flex: 1;
  min-width: 0;
  min-height: 2rem;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text-primary);
  font-size: var(--fs-base);
}
.quick-add__input::placeholder { color: var(--text-muted); }
/* El foco lo marca todo el bloque (:focus-within), no un segundo anillo dentro */
.quick-add__input:focus-visible { box-shadow: none; }
.quick-add__options {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-left: calc(1.25rem + var(--space-4));
}
.quick-add:focus-within .quick-add__options,
.quick-add.is-active .quick-add__options { display: flex; }
/* Mismo control segmentado que Pendientes / Completadas / Todas */
.quick-add__chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--bg-panel);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.quick-add__more {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  transition: var(--transition-ui);
}
.quick-add__more:hover { color: var(--text-primary); background: var(--bg-hover); }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  border: var(--border-width) solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  transition: var(--transition-ui);
}
.chip:hover { color: var(--text-primary); }
.chip.is-active {
  background: var(--bg-surface);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.task-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  min-height: 3.5rem;
  border-top: var(--border-width) solid var(--border-subtle);
}
.task-row:hover { background: var(--bg-hover); }

/* Filas fantasma mientras llegan las tareas (workspace y Foco del hub) */
@keyframes ht-skeleton { 50% { opacity: 0.45; } }
.skeleton {
  display: block;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  animation: ht-skeleton 1.4s ease-in-out infinite;
}
.skeleton--circle { width: 1.25rem; height: 1.25rem; border-radius: var(--radius-round); }
.skeleton--line { height: 0.75rem; }
.task-row--skeleton:hover { background: transparent; }
/* Entre el encabezado del grupo y su primera fila no hace falta otra línea */
.task-group__head + template + .task-row { border-top-color: transparent; }

.task-row__toggle {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-round);
  border: var(--border-width-strong) solid var(--neutral-marker);
  background: transparent;
  flex-shrink: 0;
  position: relative;
  transition: var(--transition-ui);
}
.task-row__toggle:hover:not(:disabled) {
  border-color: var(--success);
  transform: scale(1.12);
}
.task-row__toggle:active:not(:disabled) { transform: scale(0.9); }
.task-row__toggle:disabled { cursor: default; }
.task-row__toggle.is-busy { opacity: 0.55; cursor: progress; }
.task-row__toggle.is-complete {
  border-color: var(--success);
  background: var(--success);
}
/* El tilde existe siempre (en escala 0): así solo se anima al cambiar de estado, no al renderizar. */
.task-row__toggle::after {
  content: '';
  position: absolute;
  left: 0.31rem;
  top: 0.125rem;
  width: 0.3rem;
  height: 0.55rem;
  border: solid var(--text-on-success);
  border-width: 0 var(--border-width-strong) var(--border-width-strong) 0;
  opacity: 0;
  transform: rotate(45deg) scale(0);
  transition:
    transform var(--motion-medium) var(--motion-spring),
    opacity var(--motion-fast) var(--motion-ease);
}
.task-row__toggle.is-complete::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
/* Anillo que se expande una vez tras completar */
.task-row__toggle::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--border-width-strong));
  border-radius: var(--radius-round);
  border: var(--border-width-strong) solid var(--success);
  opacity: 0;
  pointer-events: none;
}
.task-row__toggle.is-just-done::before {
  animation: ht-ring var(--duration-ring) var(--motion-ease) both;
}

.task-row__indicator {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--radius-round);
  flex-shrink: 0;
  background: var(--accent);
}

.task-row__main { flex: 1; min-width: 0; }

.task-row__headline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* La línea de tachado es un fondo: se dibuja de izquierda a derecha al completar. */
.task-row__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 0 1.5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition:
    background-size var(--motion-medium) var(--motion-ease),
    color var(--motion-medium) var(--motion-ease);
}
.task-row.is-done .task-row__title {
  color: var(--text-muted);
  background-size: 100% 1.5px;
}

.task-row__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.4rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  background: var(--bg-hover);
  color: var(--text-secondary);
}
.task-row__status.is-pending { background: var(--warning-soft); color: var(--warning); }
.task-row__status.is-complete { background: var(--success-soft); color: var(--success); }

.task-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.task-row__meta-item { display: inline-flex; align-items: center; gap: var(--space-2); }

.task-row__date {
  min-width: 90px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.task-row__date.is-overdue { color: var(--danger); }
.task-row__desc {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   Conversación: feed del space e hilo por tarea
   ============================================================ */
.tree-item__icon { display: inline-flex; color: var(--text-muted); }
.tree-item__icon svg { width: 0.875rem; height: 0.875rem; }
.tree-item--feed.is-active .tree-item__icon { color: var(--accent); }

.task-row__thread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: transparent;
  border: var(--border-width) solid transparent;
  transition: var(--transition-ui);
}
.task-row__thread svg { width: 1rem; height: 1rem; }
.task-row__thread:hover { color: var(--accent); background: var(--accent-soft); }
.task-row__thread:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.workspace-feed { max-width: 760px; }

.post-channel__notice,
.post-channel__empty {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: var(--border-width) dashed var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  text-align: center;
}

.post-composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.post-composer__input { resize: vertical; min-height: 3.5rem; font-family: inherit; line-height: 1.5; }
.post-composer__footer { display: flex; align-items: center; gap: var(--space-3); }
.post-composer__hint { flex: 1; font-size: var(--fs-xs); color: var(--text-muted); }
.post-composer__count { font-size: var(--fs-xs); color: var(--text-muted); }

.post-channel__new {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  border: var(--border-width) solid var(--accent-border);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.post-channel__new:hover { background: var(--accent); color: var(--text-on-accent); }

.post-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.post {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.post__avatar { flex-shrink: 0; object-fit: cover; }
.post__main { flex: 1; min-width: 0; }
.post__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.post__author { font-size: var(--fs-sm); }
.post__time,
.post__edited { font-size: var(--fs-xs); color: var(--text-muted); }
.post__actions { display: inline-flex; gap: var(--space-1); margin-left: auto; }
.post__action {
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.post__action:hover { color: var(--text-primary); background: var(--bg-hover); }
.post__action--danger:hover { color: var(--danger); }
.post__body {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.post__edit { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.post__edit textarea { resize: vertical; font-family: inherit; }
.post__edit-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

.post-channel__older { display: block; margin: var(--space-3) auto 0; }

.modal-content--thread {
  width: min(92vw, 640px);
  max-height: 88vh;
  overflow-y: auto;
}
.thread-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.thread-modal__head .modal-title { margin: 0; overflow-wrap: anywhere; }

/* Responsable: avatar con iniciales; para owner/admin, un <select> invisible encima lo hace editable */
.task-row__assignee {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.assignee-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  border: var(--border-width) solid var(--border-subtle);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: normal;
}
.assignee-avatar.is-empty {
  background: transparent;
  color: var(--text-muted);
  border-style: dashed;
  font-size: var(--fs-md);
}
.task-row__assignee--editable { cursor: pointer; }
.task-row__assignee--editable:hover .assignee-avatar { border-color: var(--border-strong); }
.task-row__assignee--editable:focus-within .assignee-avatar { outline: var(--border-width-strong) solid var(--accent); outline-offset: var(--space-0-5); }
.task-row__assignee-select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}
.task-row__assignee-select:disabled { cursor: progress; }

/* ============================================================
   11. BADGES Y BOTONES
   ============================================================ */
/* Prioridad: punto de color + texto chico */
.priority {
  --priority-color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}
.priority__dot {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--radius-round);
  background: var(--priority-color);
  flex-shrink: 0;
}
.priority--low { --priority-color: var(--text-muted); }
.priority--medium { --priority-color: var(--warning); }
.priority--high,
.priority--urgent { --priority-color: var(--danger); }
.priority--urgent { color: var(--danger); }

/* Hábito: icono de repetición discreto y racha en acento */
.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
.task-title-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.habit-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  flex-shrink: 0;
}
.habit-mark__streak {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  color: var(--accent);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

/* Buttons */
.btn,
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  min-height: 2.25rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border: var(--border-width) solid transparent;
}
.btn--sm { padding: var(--space-1) var(--space-3); min-height: 2rem; }
.btn--block { width: 100%; margin-top: var(--space-2); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: var(--transition-ui);
}
.btn-ghost:hover:not(:disabled) { background: var(--accent-soft); }
.btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  color: var(--text-on-accent);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
}

.btn-danger {
  background: var(--danger-solid);
  color: var(--text-on-solid);
}
.btn-danger:hover:not(:disabled) { background: var(--danger-solid-hover); }

.btn:active:not(:disabled),
.btn-primary:active:not(:disabled) { transform: translateY(1px); }

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Hub: lista de pendientes */
/* Foco: mismas filas planas que la lista del workspace, separadas por líneas finas */
.mini-item-list {
  display: flex;
  flex-direction: column;
}
.mini-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-2);
  border-top: var(--border-width) solid var(--border-subtle);
  transition: var(--transition-ui);
}
.mini-item:not(.empty-mini-item):hover { background: var(--bg-hover); }
.mini-item__copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.mini-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.mini-item__due { font-weight: var(--fw-medium); color: var(--text-secondary); }
.mini-item__due.is-today { color: var(--accent); }
.mini-item__due.is-overdue { color: var(--danger); }
.mini-item__space {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-empty {
  padding: var(--space-6) var(--space-4);
  border: var(--border-width) dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.6;
  text-align: center;
}
.mini-item__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.empty-mini-item {
  justify-content: center;
  padding: var(--space-5) var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  border: var(--border-width) dashed var(--border-strong);
  border-radius: var(--radius-md);
}

/* ============================================================
   12. MODAL + FORMS
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-backdrop);
  backdrop-filter: var(--blur-overlay);
  -webkit-backdrop-filter: var(--blur-overlay);
  padding: var(--space-6);
}

.modal-content {
  width: min(92vw, 510px);
  padding: var(--space-7);
  background: var(--bg-elevated);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popover);
  animation: ht-pop-in var(--motion-medium) var(--motion-ease) both;
}

.form-group { margin-bottom: var(--space-5); }

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
}

.form-control {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  outline: none;
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 var(--space-1) var(--accent-soft);
}

.form-inline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ============================================================
   13. EMPTY STATE
   ============================================================ */
.empty-state {
  padding: var(--space-12) var(--space-8);
  text-align: center;
}
.empty-state {
  background: var(--bg-panel);
  border: var(--border-width) dashed var(--border-strong);
  border-radius: var(--radius-md);
}
.empty-state__text { color: var(--text-secondary); font-size: var(--fs-md); }

/* ============================================================
   14. RESPONSIVE
   ============================================================ */
@media (max-width: 868px) {
  /* Header en una sola fila: logo sin nombre, píldora HUB/SPACES y avatar solo */
  .app-header {
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
  }
  .app-header .brand-font { display: none; }
  .account-menu__label,
  .account-menu__caret { display: none; }
  .account-menu__trigger { padding: var(--space-1); }
  .account-cluster .account-menu__trigger { padding: 0; }
  /* Avatar + campana no entran en un tercio del ancho: los extremos toman lo justo y el selector se centra en el resto */
  .app-header:has(.account-cluster) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .app-header:has(.account-cluster) > .floating-nav { justify-self: center; }
  .nav-pill { padding: var(--space-2) var(--space-3); }

  /* Hub en móvil: los tres paneles pasan a ser un carrusel deslizable.
     Cada panel se centra y los vecinos asoman a los costados; Spaces y
     Horizonte, en las puntas, quedan pegados a su borde. */
  .hub-layout {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    align-items: start;
    margin-top: var(--space-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-4);
    scrollbar-width: none;
  }
  .hub-layout::-webkit-scrollbar { display: none; }
  .hub-layout > * { scroll-snap-align: center; }
  .hub-layout > .sidebar-panel,
  .hub-layout > .hub-panel:not(.progress-panel) { contain: none; }
  .hub-layout .stack-list,
  .hub-layout .mini-item-list { overflow-y: visible; }

  .hub-dots {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
  }
  .hub-layout > .hub-panel { min-height: 0; }

  .form-inline-grid { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .workspace-shell {
    grid-template-columns: 1fr;
  }
  /* Barra superior en una fila: ☰, píldora HUB/SPACES y avatar.
     El selector de workspace, Invitar y "+ Nuevo" pasan al menú ☰. */
  .workspace-topbar {
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
  }
  .workspace-topbar__left { padding-right: 0; }
  /* Igual que el hub: ☰ y avatar + campana toman lo justo y el selector se centra en el resto */
  .workspace-topbar:has(.account-cluster) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .workspace-topbar:has(.account-cluster) > .floating-nav { justify-self: center; }
  .workspace-topbar .workspace-switcher-container,
  .workspace-topbar .workspace-invite-btn { display: none; }
  .ws-menu-toggle { display: inline-flex; }

  /* La sidebar es el desplegable del menú ☰: flota sobre el contenido en vez de empujarlo */
  .workspace-shell { position: relative; }
  .workspace-sidebar {
    display: none;
    flex-direction: column;
    gap: var(--space-4);
  }
  .workspace-sidebar.is-open {
    display: flex;
    position: absolute;
    top: 0;
    left: var(--space-6);
    right: var(--space-6);
    z-index: 8;
    background: var(--bg-elevated);
    box-shadow: var(--shadow-popover);
    animation: ws-drawer-in var(--motion-fast) var(--motion-ease);
  }
  /* Oscurece el contenido detrás del menú; la barra superior (z-index: 10) queda por encima */
  .ws-drawer-scrim.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 7;
    background: rgb(0 0 0 / 0.45);
    animation: ws-scrim-in var(--motion-fast) var(--motion-ease);
  }
  .ws-drawer__spaces {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-bottom: var(--space-3);
    border-bottom: var(--border-width) solid var(--border-subtle);
  }
  .ws-drawer__spaces .panel-label { padding: 0 var(--space-3) var(--space-1); }
  .ws-drawer__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--border-subtle);
  }
  /* En un space personal no hay Miembros ni Invitar: sin acciones, el bloque no se muestra */
  .ws-drawer__actions:not(:has(button)) { display: none; }

  .task-row {
    flex-wrap: wrap;
  }
  .workspace-search { flex-basis: 100%; }
  .task-row__date {
    text-align: left;
    min-width: 0;
  }
  .task-row__date:empty { display: none; }
  .quick-add__options { padding-left: 0; }
}

/* ============================================================
   PROFILE PAGE STYLES
   ============================================================ */
.profile-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  background: var(--bg-app);
}

.profile-container {
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-6);
  gap: var(--space-8);
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.profile-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.profile-header {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  border: var(--border-width) solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.profile-header__content {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
}

.profile-avatar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.account-avatar--img,
.assignee-avatar--img {
  object-fit: cover;
  padding: 0;
}

.profile-avatar__edit {
  font-size: var(--fs-sm);
  cursor: pointer;
  opacity: 0.8;
  text-decoration: underline;
}

.profile-avatar__edit:hover { opacity: 1; }

.profile-avatar__edit.is-disabled {
  cursor: not-allowed;
  opacity: 0.4;
  text-decoration: none;
}

.account-avatar--lg {
  width: 80px;
  height: 80px;
  font-size: var(--fs-2xl);
}

.profile-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.profile-info h1 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  margin: 0;
}

.profile-email {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  margin: 0;
}

.profile-joined {
  font-size: var(--fs-md);
  color: var(--text-muted);
  margin: 0;
}

.profile-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.profile-section {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  border: var(--border-width) solid var(--border-subtle);
}

.profile-section--danger {
  border-color: var(--danger);
  opacity: 0.95;
}

.profile-section .section-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.section-header h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin: 0;
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.profile-form .form-group,
.modal-form .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: 0;
}

.profile-form .form-group label:not(.form-label),
.modal-form .form-group label:not(.form-label) {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

.form-group small {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.form-input {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--fs-base);
  transition: var(--transition-ui);
}

/* Preferencias del perfil */
.pref-status { font-size: var(--fs-xs); color: var(--success); }
.pref-unavailable { margin: 0 0 var(--space-3); color: var(--text-muted); }
.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: var(--border-width) solid var(--border-subtle);
}
/* La primera fila va después del aviso (oculto si Mongo responde): sin línea, ya está la del encabezado */
.pref-unavailable + .pref-row { border-top: none; }
.pref-row--toggle { cursor: pointer; }
.pref-row__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.pref-row__text strong { font-size: var(--fs-md); }
.pref-row__text span { font-size: var(--fs-sm); color: var(--text-secondary); }
.pref-row .task-tabs { flex-shrink: 0; }

.pref-select {
  flex-shrink: 0;
  min-width: 11rem;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: var(--transition-ui);
}
.pref-select:hover:not(:disabled) { border-color: var(--accent-border); }
.pref-select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pref-select:disabled { opacity: 0.5; cursor: not-allowed; }

.pref-switch {
  appearance: none;
  flex-shrink: 0;
  position: relative;
  width: 2.5rem;
  height: 1.5rem;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  border: var(--border-width) solid var(--border-strong);
  cursor: pointer;
  transition: var(--transition-ui);
}
.pref-switch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-round);
  background: var(--text-muted);
  transform: translateY(-50%);
  transition: left var(--transition-fast), background-color var(--transition-fast);
}
.pref-switch:checked { background: var(--accent); border-color: var(--accent); }
.pref-switch:checked::after { left: calc(100% - 1rem - 3px); background: var(--text-on-accent); }
.pref-switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pref-switch:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 640px) {
  .pref-row:not(.pref-row--toggle) { flex-direction: column; align-items: stretch; }
}

.profile-bio {
  resize: vertical;
  min-height: 5rem;
  font-family: inherit;
  line-height: 1.5;
}
.profile-bio:disabled { opacity: 0.6; cursor: not-allowed; }

.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 var(--space-1) var(--accent-soft);
}

.form-input:read-only {
  background: var(--bg-surface);
  cursor: not-allowed;
  opacity: 0.7;
}

.form-actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-subtle);
}

.security-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.security-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.security-info {
  flex: 1;
}

.security-info h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-2) 0;
}

.security-info p {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  margin: 0;
}

.account-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.action-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.action-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.action-info {
  flex: 1;
}

.action-info h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-2) 0;
  color: var(--danger);
}

.action-info p {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  margin: 0;
}

/* Alerts */
.alert {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  margin: var(--space-4) 0 0 0;
}

.alert-success {
  background: var(--success-soft);
  border: var(--border-width) solid var(--success);
  color: var(--success);
}

.alert-error {
  background: var(--danger-soft);
  border: var(--border-width) solid var(--danger);
  color: var(--danger);
}

.alert-success,
.alert-error { margin: 0 0 var(--space-4); }

/* Aviso de correo sin confirmar (hub, workspace y perfil) */
.verify-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: 1100px;
  width: min(90%, 1100px);
  margin: var(--space-4) auto 0;
  padding: var(--space-3) var(--space-4);
  background: var(--warning-soft);
  border: var(--border-width) solid var(--warning);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}
.verify-banner__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--warning);
  color: var(--bg-app);
  font-weight: var(--fw-bold);
}
.verify-banner__copy { flex: 1; min-width: 0; }
.verify-banner__title { display: block; color: var(--warning); font-weight: var(--fw-semibold); }
.verify-banner__text { margin: var(--space-1) 0 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.45; overflow-wrap: anywhere; }
.verify-banner__status { margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--success); }
.verify-banner__status.is-error { color: var(--danger); }
.verify-banner__action { flex: none; }
@media (max-width: 640px) {
  .verify-banner { flex-wrap: wrap; }
  .verify-banner__action { width: 100%; }
}

/* Modal Styles (perfil) */
.modal {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--border-subtle);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-popover);
  animation: ht-pop-in var(--motion-medium) var(--motion-ease) both;
}

.modal--small {
  max-width: 400px;
}

.modal-header {
  padding: var(--space-6);
  border-bottom: var(--border-width) solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--fs-xl);
  cursor: pointer;
  padding: 0;
  transition: color var(--motion-fast) var(--motion-ease);
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: var(--space-6);
}

.modal-body p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.6;
}

.modal-form {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.modal .modal-actions {
  margin: 0 calc(-1 * var(--space-6)) calc(-1 * var(--space-6));
  padding: var(--space-5) var(--space-6);
  border-top: var(--border-width) solid var(--border-subtle);
}
.modal > .modal-actions { margin: 0; }

@media (max-width: 768px) {
  .profile-container {
    padding: var(--space-6) var(--space-4);
    gap: var(--space-6);
  }

  .profile-header {
    padding: var(--space-6);
    flex-direction: column;
    text-align: center;
  }

  .profile-header__content {
    flex-direction: column;
    gap: var(--space-6);
  }

  .profile-info {
    align-items: center;
  }

  .profile-section {
    padding: var(--space-6);
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  /* En el hub, Crear sigue a la derecha del título: su menú abre hacia adentro del panel
     y no queda cortado por el borde del carrusel */
  .hub-layout .section-header {
    flex-direction: row;
    align-items: center;
  }

  .security-item,
  .action-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .form-actions {
    flex-direction: column;
  }

  .modal-actions {
    flex-direction: column;
    justify-content: stretch;
  }

  .modal-actions .btn {
    width: 100%;
  }
}
/* Login: fondo de página, no overlay oscurecido */
.modal-overlay.login-screen {
  background: var(--bg-app);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ============================================================
   TRANSICIONES DE VISTA
   Entre páginas: la píldora HUB/WORKSPACE se desliza a su nueva posición.
   Dentro de una página, motion.js marca html[data-vt] mientras dura la transición:
   las filas viajan a su nuevo lugar y la pestaña o el ítem activo se deslizan.
   Navegadores sin soporte aplican el cambio sin animación.
   ============================================================ */
@view-transition { navigation: auto; }

.nav-pill.active { view-transition-name: nav-active; }

::view-transition-group(nav-active) {
  animation-duration: var(--duration-nav);
  animation-timing-function: var(--motion-ease);
}
::view-transition-group(app-header),
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--duration-page);
}

html[data-vt] .task-row,
html[data-vt] .mini-item { view-transition-name: var(--vt-name); }
html[data-vt] .task-tab.is-active { view-transition-name: task-tab-active; }
html[data-vt] .tree-item.is-active { view-transition-name: tree-item-active; }
/* Los elementos con nombre se pintan encima del resto: el modal que se cierra y los avisos deben quedar arriba de las filas. */
html[data-vt] .modal-overlay { view-transition-name: modal-overlay; }
html[data-vt] .toast-region { view-transition-name: toasts; }

html[data-vt]::view-transition-group(*) {
  animation-duration: var(--motion-medium);
  animation-timing-function: var(--motion-ease);
}
html[data-vt]::view-transition-group(modal-overlay),
html[data-vt]::view-transition-group(toasts) {
  z-index: 1;
}

/* ============================================================
   15. LOGIN, MODALES Y CAMPOS
   ============================================================ */
.login-card { max-width: 420px; }
.login-card__brand {
  text-align: center;
  margin-bottom: var(--space-6);
}
.login-card__title {
  font-size: var(--fs-2xl);
  color: var(--accent);
}
.login-card__tagline {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--fs-md);
}
/* El envío es la única acción de la tarjeta: alto táctil cómodo (44 px) */
.login-card .btn--block {
  min-height: 2.75rem;
  font-size: var(--fs-md);
}
.login-card__switch {
  margin-top: var(--space-6);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}
.login-card__switch-link {
  margin-left: var(--space-1);
  color: var(--accent);
  font-weight: var(--fw-semibold);
}
.login-card__forgot {
  display: block;
  margin-top: var(--space-2);
  text-align: right;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}
.login-card__forgot:hover { color: var(--accent); }
.login-card__heading {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
}
.login-card__intro {
  margin-bottom: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--fs-md);
}
.login-card__languages {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-subtle);
  font-size: var(--fs-xs);
}
.login-card__legal {
  margin: calc(-1 * var(--space-1)) 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.login-card__legal a { color: var(--text-secondary); text-decoration: underline; }
.login-card__legal a:hover { color: var(--text-primary); }
.login-card__language { color: var(--text-muted); }
.login-card__language:hover { color: var(--text-primary); }
.login-card__language.is-active { color: var(--text-primary); font-weight: var(--fw-semibold); }

.modal-content--narrow { max-width: 400px; }
.modal-title { margin-bottom: var(--space-5); }
.modal-title--tight { margin-bottom: var(--space-1); }
.modal-body-form { margin-top: var(--space-5); }

.form-control--code {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--fw-bold);
}
.inline-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.form-hint {
  display: block;
  margin-top: var(--space-2);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Campo de contraseña con botón de ojo para mostrar u ocultar lo escrito */
.password-field { position: relative; }
.password-field .form-control,
.password-field .form-input {
  width: 100%;
  padding-right: calc(var(--space-4) + 2.25rem);
}
.password-field__toggle {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  transition: var(--transition-ui);
}
.password-field__toggle:hover,
.password-field__toggle[aria-pressed="true"] { color: var(--text-primary); }
.password-field__toggle span { display: inline-flex; }

/* Requisitos de la contraseña: se tildan en vivo mientras se escribe */
.password-rules { margin-top: var(--space-3); }
.password-rules__title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.password-rules__list {
  display: grid;
  gap: var(--space-1);
  list-style: none;
}
.password-rules__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: var(--transition-ui);
}
.password-rules__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border: var(--border-width) solid var(--border-strong);
  border-radius: 50%;
  font-size: var(--fs-xs);
  color: transparent;
  flex-shrink: 0;
  transition: var(--transition-ui);
}
.password-rules__item.is-met { color: var(--text-primary); }
.password-rules__item.is-met .password-rules__mark {
  background: var(--success);
  border-color: var(--success);
  color: var(--text-on-success);
}

/* ============================================================
   15b. HORIZONTE (hub)
   ============================================================ */
.horizon {
  padding-bottom: var(--space-5);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.select-compact {
  max-width: 60%;
  padding: var(--space-1) var(--space-2);
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  cursor: pointer;
  transition: var(--transition-ui);
}
.select-compact:hover { border-color: var(--border-strong); color: var(--text-primary); }

.horizon-card {
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.horizon-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.horizon-card__marker {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--radius-round);
  flex-shrink: 0;
}
.horizon-card__copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.horizon-card__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.horizon-card__meta {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.horizon-card__percent {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.horizon-card__ratio {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.progress-track {
  height: var(--progress-height);
  margin-top: var(--space-4);
  background: var(--bg-hover);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-track__fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width var(--motion-medium) var(--motion-ease);
}

.horizon-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-5);
  text-align: center;
  border: var(--border-width) dashed var(--border-strong);
  border-radius: var(--radius-md);
}
.horizon-empty__title {
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}
.horizon-empty__hint {
  margin-bottom: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* ============================================================
   16. TOASTS
   ============================================================ */
.toast-region {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  width: min(calc(100vw - var(--space-8)), 360px);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: var(--border-width) solid var(--border-strong);
  border-left: var(--border-width-strong) solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  pointer-events: auto;
  animation: ht-toast-in var(--motion-medium) var(--motion-ease) both;
}
.toast--error { border-left-color: var(--danger); }
.toast--success { border-left-color: var(--success); }
.toast.is-leaving { animation: ht-toast-out var(--motion-fast) var(--motion-ease-in) both; }

.toast__mensaje { flex: 1; min-width: 0; }

.toast__cerrar {
  flex-shrink: 0;
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
  transition: color var(--motion-fast) var(--motion-ease);
}
.toast__cerrar:hover { color: var(--text-primary); }

/* ============================================================
   17. MOVIMIENTO REDUCIDO
   Duraciones mínimas en lugar de `none`: animationend sigue llegando
   (los toasts lo necesitan para cerrarse). El !important también pisa
   los estilos inline que agrega x-transition.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  :is(.btn-primary, .btn-secondary, .btn-danger,
      .nav-pill, .task-tab, .chip, .workspace-quick-action):active:not(:disabled) {
    transform: none;
  }
}

/* Preferencia "reducir animaciones siempre" (perfil), aunque el sistema no lo pida.
   Mismas reglas que el bloque anterior; la transición entre páginas (@view-transition)
   no se puede condicionar a un atributo y sigue la preferencia del sistema. */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: 1ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}
html[data-motion="reduced"]::view-transition-group(*),
html[data-motion="reduced"]::view-transition-old(*),
html[data-motion="reduced"]::view-transition-new(*) {
  animation: none !important;
}
html[data-motion="reduced"] :is(.btn-primary, .btn-secondary, .btn-danger,
    .nav-pill, .task-tab, .chip, .workspace-quick-action):active:not(:disabled) {
  transform: none;
}

/* Miembros del space y sus roles */
.member-list__hint { margin: 0 0 var(--space-4); color: var(--text-secondary); }
.member-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 50vh;
  overflow-y: auto;
}
.member-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.member-row__identity { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.member-row__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.member-row__name,
.member-row__email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-row__email { font-size: var(--fs-xs); color: var(--text-muted); }
.member-row__role { width: auto; flex-shrink: 0; padding-block: var(--space-1); font-size: var(--fs-sm); }
.member-row__badge {
  flex-shrink: 0;
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border-subtle);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.member-row__badge--owner,
.member-row__badge--admin { background: var(--accent-soft); color: var(--accent); }

/* ============================================================
   DETALLE DE TAREA (includes/task-detail.php)
   Panel a la derecha en la compu; en el teléfono ocupa toda la pantalla.
   ============================================================ */
/* El título de cada fila abre el detalle; el área de texto entera responde al toque. */
.task-open {
  min-width: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  font-family: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}
.task-row__main,
.mini-item__copy { position: relative; }
.task-open::after {
  content: '';
  position: absolute;
  inset: 0;
}
.task-open:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
.task-open:focus-visible { outline: none; }
.task-open:focus-visible::after { border-radius: var(--radius-sm); box-shadow: var(--focus-ring); }

.task-detail-overlay {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}
.task-detail {
  width: min(100%, 28rem);
  height: 100%;
  background: var(--bg-elevated);
  border-left: var(--border-width) solid var(--border-subtle);
  box-shadow: var(--shadow-popover);
  animation: task-detail-in var(--motion-medium) var(--motion-ease) both;
}
@keyframes task-detail-in {
  from { opacity: 0; transform: translateX(var(--space-6)); }
}
.task-detail__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.task-detail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: max(var(--space-4), env(safe-area-inset-top, 0px)) var(--space-4) 0 var(--space-6);
}
.task-detail__place {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.task-detail__place > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-detail__marker {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--radius-round);
}
.task-detail__close {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.task-detail__close:hover { background: var(--bg-hover); color: var(--text-primary); }
.task-detail__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.task-detail__close .icon { width: 1.25rem; height: 1.25rem; }

.task-detail__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6) var(--space-6);
}
.task-detail__body .form-group { margin-bottom: 0; }
.task-detail__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.task-detail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.task-detail__status,
.task-detail__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 1.5rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.task-detail__status.is-done { background: var(--success-soft); color: var(--success); }
.task-detail__status.is-overdue {
  background: var(--danger-soft);
  /* Como en la pastilla "Urgente": el rojo solo sobre su fondo suave no llega a 4.5:1. */
  color: color-mix(in srgb, var(--danger) 65%, var(--text-primary));
}
.task-detail__description {
  color: var(--text-primary);
  font-size: var(--fs-md);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.task-detail__description.is-empty { color: var(--text-muted); }

.task-detail__facts { border-top: var(--border-width) solid var(--border-subtle); }
.task-detail__fact {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding: var(--space-2) 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.task-detail__fact dt { color: var(--text-muted); font-size: var(--fs-sm); }
.task-detail__fact dd {
  margin: 0;
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}
.task-detail__fact dd.is-overdue { color: var(--danger); }
.task-detail__fact .priority { font-size: var(--fs-md); }
.task-detail__streak {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.task-detail__streak .icon { color: var(--accent); }
.task-detail__select { padding-block: var(--space-2); }

.task-detail__actions {
  padding: var(--space-4) var(--space-6) max(var(--space-4), env(safe-area-inset-bottom, 0px));
  border-top: var(--border-width) solid var(--border-subtle);
}
.task-detail__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.task-detail__buttons .icon { width: 1rem; height: 1rem; }
.task-detail__delete { margin-left: auto; color: var(--danger); }
.task-detail__delete:hover:not(:disabled) { background: var(--danger-soft); }
.task-detail__confirm p {
  margin-bottom: var(--space-3);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.task-detail__confirm .task-detail__buttons { justify-content: flex-end; }

@media (max-width: 640px) {
  .task-detail {
    width: 100%;
    border-left: 0;
    animation-name: task-detail-up;
  }
  .task-detail__head { padding-left: var(--space-5); }
  .task-detail__body { padding-inline: var(--space-5); }
  .task-detail__actions { padding-inline: var(--space-5); }
  .task-detail__fact { grid-template-columns: 6.5rem minmax(0, 1fr); }
  /* En el teléfono la acción principal ocupa todo el ancho, al alcance del pulgar. */
  .task-detail__buttons > .btn-primary { flex: 1 1 100%; }
}
@keyframes task-detail-up {
  from { opacity: 0; transform: translateY(var(--space-8)); }
}