/* Project Management is intentionally isolated from the general assistant surface. */
.application-card--project-management {
  --app-accent: #6d36d4;
  --app-soft: #f5f0ff;
  --app-ink: #5d28bd;
}

.application-card--project-management .application-card-icon i {
  font-size: 24px;
}

.application-card-chip--project-management {
  border-color: #c4b5fd;
  background: #ede9fe;
  color: #5b21b6;
  box-shadow: 0 6px 14px rgba(91, 33, 182, 0.14);
}

.application-card--project-management .application-card-copy h4 {
  overflow: visible;
  padding-bottom: 2px;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

@media (max-width: 720px) {
  .applications-board .application-card--project-management .application-card-copy h4 {
    font-size: clamp(13px, 4vw, 16px);
    line-height: 1.16;
    letter-spacing: 0;
  }
}

.workspace-slot[data-section="applications"][data-slot="side"]
  .application-card--project-management .application-card-copy h4 {
  font-size: 20px;
  line-height: 1.2;
}

.applications-workspace.is-project-management-open {
  grid-template-rows: minmax(0, 1fr);
  padding: 0 !important;
  overflow: hidden !important;
  background: #f8f6fb;
  animation: none !important;
  transform: none !important;
}

/* Project Management carries its own isolated assistant, so the general
   outside assistant yields its dock without changing the user's saved layout. */
.app-shell.project-management-central-lock {
  --assistant-side-size: 0px;
  --inbox-side-size: 0px;
  --swap-rail-size: 0px;
  grid-template-columns: var(--sidebar-size) minmax(0, 1fr) 0 0;
}

.app-shell.project-management-central-lock.sidebar-collapsed {
  grid-template-columns: var(--sidebar-collapsed-size) minmax(0, 1fr) 0 0;
}

.app-shell.project-management-central-lock .workspace-slot[data-slot="side"],
.app-shell.project-management-central-lock .panel-swap-button,
.app-shell.project-management-central-lock .side-panel-collapse-button,
.app-shell.project-management-central-lock .assistant-float-toggle {
  display: none !important;
}

.applications-workspace.is-project-management-open > .applications-hero,
.applications-workspace.is-project-management-open > .applications-board {
  display: none !important;
}

.project-management-panel {
  --pm-purple: #6d36d4;
  --pm-purple-dark: #4d1ca7;
  --pm-purple-soft: #f4efff;
  --pm-purple-border: #d9c9fb;
  --pm-navy: #101a46;
  --pm-text: #24305f;
  --pm-muted: #697399;
  --pm-line: #d9d1e8;
  --pm-line-strong: #c9bddf;
  --pm-bg: #f8f6fb;
  --pm-panel: #ffffff;
  --pm-purple-wash: rgba(231, 219, 250, 0.045);
  --pm-surface-glass: rgba(252, 250, 255, 0.86);
  --pm-ai-bg: #f4efff;
  --pm-ai-panel: #fbf9ff;
  --pm-green: #159447;
  --pm-amber: #e88918;
  --pm-red: #d53b35;
  --pm-motion-fast: 140ms;
  --pm-motion-base: 220ms;
  --pm-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pm-layer-toolbar: 70;
  --pm-layer-toolbar-popover: 82;
  /* Flowmind flotante va por ENCIMA del encabezado. Iba por debajo, así que al
     subirlo se metía detrás de él: el encabezado se quedaba con su asa y ya no
     había de dónde agarrarlo para bajarlo. Quedaba atrapado ahí arriba. */
  --pm-layer-ai-floating: 172;
  --pm-layer-ai-dragging: 173;
  --pm-layer-period-picker: 160;
  /* La pantalla completa del flujo va encima de todo lo del panel, encabezado
     incluido: se abre justo para que no quede nada alrededor. */
  --pm-layer-flow-scene: 200;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  overflow: hidden;
  color: var(--pm-navy);
  background:
    radial-gradient(circle at 14% 0%, rgba(109, 54, 212, 0.055), transparent 34%),
    linear-gradient(135deg, var(--pm-purple-wash), rgba(250, 248, 253, 0.86)),
    var(--pm-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight: 560;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.project-management-panel[hidden] {
  display: none !important;
}

.project-management-panel:not([hidden]) .pm-shell {
  animation: pm-panel-enter 300ms var(--pm-motion-ease);
}

@keyframes pm-panel-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

@keyframes pm-item-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pm-status-enter {
  from { opacity: 0; transform: translate(-50%, -7px) scale(0.98); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes pm-spinner-spin {
  to { transform: rotate(1turn); }
}

@keyframes pm-drop-pulse {
  to { box-shadow: inset 0 0 0 2px rgba(109, 54, 212, 0.13), 0 8px 22px rgba(72, 40, 135, 0.08); }
}

@keyframes pm-dialog-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes pm-view-aladdin-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.965); clip-path: inset(8% 7% 8% 7% round 22px); filter: blur(7px); }
  62% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.008); clip-path: inset(0 round 12px); filter: blur(0); }
  to { opacity: 1; transform: none; clip-path: inset(0 round 8px); filter: none; }
}

@keyframes pm-dialog-exit {
  to { opacity: 0; transform: translateY(10px) scale(0.985); }
}

.project-management-panel *,
.project-management-panel *::before,
.project-management-panel *::after {
  box-sizing: border-box;
}

.pm-mobile-only,
.pm-mobile-header-controls,
.pm-mobile-stage-tabs,
.pm-mobile-task-rail,
.pm-mobile-scrim,
.pm-mobile-flowmind-button {
  display: none;
}

.pm-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  background:
    radial-gradient(circle at 1px 1px, rgba(117, 82, 188, 0.16) 1px, transparent 1.15px) 0 0 / 18px 18px,
    radial-gradient(circle at 84% 16%, rgba(141, 98, 220, 0.055), transparent 30%),
    linear-gradient(135deg, var(--pm-purple-wash), rgba(250, 248, 253, 0.72)),
    var(--pm-bg);
}

.pm-header {
  position: relative;
  z-index: var(--pm-layer-period-picker);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(360px, 620px) max-content minmax(286px, 1fr) max-content auto;
  grid-template-areas: "title navigation period summary close";
  align-items: center;
  gap: 20px;
  min-height: 124px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--pm-line);
  background: rgba(251, 250, 254, 0.98);
  box-shadow: 0 1px 0 rgba(92, 55, 153, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.pm-title-group {
  grid-area: title;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.pm-app-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid #7c45df;
  border-radius: 8px;
  color: var(--pm-purple);
  font-size: 24px;
}

.pm-title-group > div {
  min-width: 0;
}

.pm-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--pm-purple);
  font-size: 12px;
  font-weight: 800;
}

.pm-title-line {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 14px;
  row-gap: 7px;
  overflow: visible;
}

.pm-title-line h2 {
  flex: 1 1 300px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow: visible;
  color: var(--pm-navy);
  font-size: clamp(21px, calc(2.1vw - 5px), 29px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-overflow: clip;
  white-space: nowrap;
}

.pm-title-group p {
  margin: 7px 0 0;
  color: #4d5981;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.pm-metrics {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-header-summary {
  grid-area: summary;
  display: grid;
  justify-items: end;
  gap: 8px;
  transform: translateX(-56px);
}

.pm-metric {
  min-width: 104px;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 9px;
  padding: 8px 12px;
}

.pm-metric--active {
  background: #edf9f7;
}

.pm-metric--blocked {
  min-width: 116px;
  background: #fff0f1;
}

.pm-metric--validation {
  min-width: 114px;
  background: #fff7e9;
}

.pm-metric > i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
}

.pm-metric--active > i {
  color: #10bdb2;
}

.pm-metric--blocked > i {
  color: #ff4747;
}

.pm-metric--validation > i {
  color: #f2a11d;
}

.pm-metric span {
  display: grid;
  gap: 2px;
}

.pm-metric strong {
  color: #0b1339;
  font-size: 16px;
  font-weight: 850;
  line-height: 1;
}

.pm-metric small {
  color: #101942;
  font-size: 10px;
  font-weight: 760;
  line-height: 1.2;
  white-space: nowrap;
}

.pm-header-actions,
.pm-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.pm-header-actions .pm-button,
.pm-toolbar-actions .pm-button {
  min-height: 36px;
  gap: 7px;
  padding-inline: 13px;
  font-size: 12px;
}

.pm-header-close {
  grid-area: close;
  align-self: center;
  justify-self: end;
  transform: translateX(-28px);
}

.pm-header-project-navigation {
  grid-area: navigation;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.pm-header-period {
  grid-area: period;
  min-width: 0;
  display: flex;
  justify-content: center;
  padding-left: clamp(8px, 1.25vw, 24px);
}

.pm-header-period .pm-period-control {
  flex: 0 0 auto;
}

.pm-header-project-navigation .pm-project-control {
  width: clamp(210px, 14vw, 250px);
}

.pm-header-project-navigation .pm-view-tabs {
  height: 44px;
  align-self: center;
  gap: 8px;
}

.pm-header-project-navigation .pm-view-tabs button {
  min-width: 82px;
  gap: 7px;
  padding-inline: 8px;
  font-size: 12px;
}

@media (min-width: 1481px) {
  .pm-header-project-navigation {
    transform: translateX(-10vw);
  }

  .pm-header-period {
    margin-left: -8vw;
  }

  .pm-workspace {
    overflow: visible;
  }

  .pm-task-sidebar {
    z-index: 1;
    margin-top: -72px;
  }

}

.pm-button,
.pm-icon-button,
.pm-view-tabs button,
.pm-ai-suggestions button,
.pm-period-control {
  font: inherit;
}

.pm-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--pm-motion-fast) var(--pm-motion-ease), box-shadow var(--pm-motion-base) ease, border-color var(--pm-motion-fast) ease, background var(--pm-motion-fast) ease, color var(--pm-motion-fast) ease;
}

.pm-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.pm-button:active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
}

.pm-button:focus-visible,
.pm-icon-button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(109, 54, 212, 0.14);
}

.pm-button:disabled {
  cursor: progress;
  opacity: 0.64;
}

.pm-button--primary {
  border-color: var(--pm-purple);
  background: var(--pm-purple);
  color: #fff;
  box-shadow: 0 8px 18px rgba(109, 54, 212, 0.16);
}

.pm-button--primary:hover:not(:disabled) {
  background: #5f2bc3;
}

.pm-button--secondary {
  border-color: #d4dbee;
  background: #fff;
  color: var(--pm-purple);
}

.pm-app-mark--flowmind {
  overflow: hidden;
  padding: 3px;
  background: radial-gradient(circle at 50% 32%, rgba(138, 92, 235, 0.16), rgba(255, 255, 255, 0.98) 72%);
}

.pm-app-mark--flowmind img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.pm-button--secondary:hover:not(:disabled) {
  border-color: var(--pm-purple-border);
  background: #fbf9ff;
}

.pm-button--danger {
  border-color: #f2c4c2;
  background: #fff7f7;
  color: #b4232d;
}

.pm-icon-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #d7deed;
  border-radius: 7px;
  background: #fff;
  color: #4d5981;
  cursor: pointer;
  transition: transform var(--pm-motion-fast) var(--pm-motion-ease), border-color var(--pm-motion-fast) ease, background var(--pm-motion-fast) ease, color var(--pm-motion-fast) ease, box-shadow var(--pm-motion-base) ease;
}

.pm-icon-button:hover {
  border-color: var(--pm-purple-border);
  background: #fbf9ff;
  color: var(--pm-purple);
  transform: translateY(-1px);
}

.pm-icon-button:active {
  transform: translateY(1px) scale(0.96);
}

.pm-close-button {
  width: 34px;
  height: 34px;
  margin: 0;
}

.pm-toolbar {
  position: relative;
  z-index: var(--pm-layer-toolbar);
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: clamp(20px, 2vw, 36px);
  padding: 10px 28px;
  border-bottom: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.pm-toolbar-leading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 24px;
}

.pm-project-picker-cluster {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-task-sidebar-restore {
  width: 35px;
  min-width: 35px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #d6dced;
  border-radius: 7px;
  background: #fff;
  color: var(--pm-purple);
  cursor: pointer;
}

.pm-project-edit-button {
  width: 35px;
  min-width: 35px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #d6dced;
  border-radius: 7px;
  background: #fff;
  color: var(--pm-purple);
  cursor: pointer;
  transition: border-color var(--pm-motion-fast) ease, background var(--pm-motion-fast) ease, transform var(--pm-motion-fast) var(--pm-motion-ease);
}

.pm-project-edit-button:hover:not(:disabled),
.pm-project-edit-button:focus-visible {
  border-color: #ae8bea;
  background: #f7f2ff;
  outline: 0;
  transform: translateY(-1px);
}

.pm-project-edit-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.pm-task-sidebar-restore[hidden] {
  display: none !important;
}

.pm-task-sidebar-restore:hover,
.pm-task-sidebar-restore:focus-visible {
  border-color: #ae8bea;
  background: #f7f2ff;
  outline: 0;
}

.pm-toolbar-filters {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-left: clamp(160px, 20vw, 360px);
}

.pm-toolbar-actions {
  justify-self: end;
  white-space: nowrap;
}

.pm-toolbar-actions--inline {
  flex: 0 0 auto;
  margin-left: 2px;
}

.pm-toolbar-menu {
  position: relative;
  flex: 0 0 auto;
}

.pm-toolbar-menu-trigger {
  height: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #d6dced;
  border-radius: 7px;
  background: #fff;
  color: #14204e;
  padding: 0 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--pm-motion-fast) ease, box-shadow var(--pm-motion-base) ease, background var(--pm-motion-fast) ease, color var(--pm-motion-fast) ease;
}

.pm-group-menu .pm-toolbar-menu-trigger {
  width: 208px;
  justify-content: flex-start;
}

.pm-group-menu .pm-toolbar-menu-trigger span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.pm-customize-trigger {
  width: 128px;
}

.pm-toolbar-menu-trigger > i:first-child {
  color: var(--pm-purple);
}

.pm-toolbar-menu-trigger:hover,
.pm-toolbar-menu-trigger:focus-visible,
.pm-toolbar-menu-trigger[aria-expanded="true"] {
  border-color: #ae8bea;
  background: #f8f4ff;
  color: var(--pm-purple-dark);
  box-shadow: 0 0 0 3px rgba(109, 54, 212, 0.08);
  outline: 0;
}

.pm-toolbar-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: var(--pm-layer-toolbar-popover);
  width: 286px;
  overflow: hidden;
  border: 1px solid #d8c9f6;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  color: #14204e;
  box-shadow: 0 18px 46px rgba(49, 27, 94, 0.18);
  transform: translateX(-50%);
  animation: pm-toolbar-menu-in var(--pm-motion-base) var(--pm-motion-ease) both;
}

.pm-toolbar-popover[hidden] {
  display: none;
}

.pm-toolbar-popover > header {
  display: grid;
  gap: 3px;
  border-bottom: 1px solid #ebe5f5;
  padding: 13px 14px 11px;
  background: #faf8ff;
}

.pm-toolbar-popover > header strong {
  font-size: 13px;
  font-weight: 800;
}

.pm-toolbar-popover > header small {
  color: #667095;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
}

.pm-group-options,
.pm-field-visibility-list {
  display: grid;
  gap: 2px;
  padding: 7px;
}

.pm-group-options button,
.pm-field-visibility-list button {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #26315c;
  padding: 7px 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.pm-group-options button:hover,
.pm-group-options button:focus-visible,
.pm-field-visibility-list button:hover,
.pm-field-visibility-list button:focus-visible {
  background: #f4effd;
  color: var(--pm-purple-dark);
  outline: 0;
}

.pm-group-options button > i:first-child,
.pm-field-visibility-list button > i:first-child {
  color: #8b84a0;
  text-align: center;
}

.pm-group-options button > i:last-child,
.pm-field-visibility-list button > i:last-child {
  color: #a09aaf;
  opacity: 0.5;
  text-align: center;
}

.pm-group-options button:not(.is-active) > i:last-child {
  visibility: hidden;
}

.pm-group-options button.is-active,
.pm-field-visibility-list button.is-active {
  background: #eee7fb;
  color: #4f20a9;
  font-weight: 760;
}

.pm-group-options button.is-active > i:last-child,
.pm-field-visibility-list button.is-active > i:last-child {
  color: var(--pm-purple);
  opacity: 1;
}

.pm-customize-popover {
  right: 0;
  left: auto;
  width: 318px;
  transform: none;
}

.pm-field-visibility-list {
  max-height: min(430px, calc(100vh - 250px));
  overflow-y: auto;
  scrollbar-width: thin;
}

@keyframes pm-toolbar-menu-in {
  from { opacity: 0; transform: translate(-50%, -6px) scale(0.98); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.pm-customize-popover {
  animation-name: pm-toolbar-customize-in;
}

@keyframes pm-toolbar-customize-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.pm-toolbar-spacer {
  flex: 1 1 auto;
}

.pm-select-control,
.pm-search-control {
  height: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d6dced;
  border-radius: 7px;
  background: #fff;
  color: #14204e;
  padding: 0 12px;
  transition: border-color var(--pm-motion-fast) ease, box-shadow var(--pm-motion-base) ease, background var(--pm-motion-fast) ease;
}

.pm-select-control:focus-within,
.pm-search-control:focus-within {
  border-color: #ae8bea;
  box-shadow: 0 0 0 3px rgba(109, 54, 212, 0.08);
}

.pm-select-control i,
.pm-search-control i {
  color: var(--pm-purple);
  font-size: 15px;
}

.pm-select-control select,
.pm-search-control input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #14204e;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
}

.pm-select-control > .flowmo-select-menu,
.pm-period-control > .flowmo-select-menu {
  min-width: 0;
  flex: 1 1 auto;
}

.pm-select-control .flowmo-select-trigger,
.pm-period-control .flowmo-select-trigger {
  min-height: 42px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: #14204e;
  font-size: 12px;
  font-weight: 700;
}

.pm-select-control .flowmo-select-trigger:hover,
.pm-select-control .flowmo-select-trigger:focus-visible,
.pm-select-control .flowmo-select-menu[data-open="true"] .flowmo-select-trigger,
.pm-period-control .flowmo-select-trigger:hover,
.pm-period-control .flowmo-select-trigger:focus-visible,
.pm-period-control .flowmo-select-menu[data-open="true"] .flowmo-select-trigger {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--pm-purple-dark);
  outline: none;
}

.pm-project-control {
  width: clamp(225px, calc(18vw - 35px), 265px);
}

.pm-assignee-control {
  width: 184px;
}

.pm-search-control {
  width: 210px;
}

.pm-view-tabs {
  height: 52px;
  display: flex;
  align-self: flex-end;
  gap: 16px;
}

.pm-view-tabs button {
  position: relative;
  min-width: 104px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  background: transparent;
  color: #25305d;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--pm-motion-fast) ease, background var(--pm-motion-fast) ease;
}

.pm-view-tabs button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--pm-purple);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--pm-motion-base) var(--pm-motion-ease);
}

.pm-view-tabs button.is-active {
  color: var(--pm-purple);
}

.pm-view-tabs button.is-active::after {
  transform: scaleX(1);
}

.pm-period-control {
  position: relative;
  width: max-content;
  min-width: 286px;
  height: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #d6dced;
  border-radius: 7px;
  background: #fff;
  color: #202b58;
  padding: 0;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--pm-motion-fast) ease, box-shadow var(--pm-motion-base) ease, color var(--pm-motion-fast) ease;
}

.pm-period-trigger {
  min-width: 166px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 6px 0 0 6px;
  background: transparent;
  color: inherit;
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.pm-period-trigger > span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-period-trigger > i:first-child,
.pm-period-control > i {
  color: var(--pm-purple);
  font-size: 15px;
}

.pm-period-trigger > i:last-child {
  color: #687293;
  font-size: 11px;
  transition: transform var(--pm-motion-fast) ease;
}

.pm-period-trigger[aria-expanded="true"] > i:last-child {
  transform: rotate(180deg);
}

.pm-period-control:focus-within {
  border-color: #ae8bea;
  box-shadow: 0 0 0 3px rgba(109, 54, 212, 0.08);
  color: var(--pm-purple);
}

.pm-period-control [data-pm-period-range] {
  min-width: 108px;
  border-left: 1px solid #e0e5f1;
  padding: 0 12px;
  color: #4f5a7f;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pm-period-popover {
  position: fixed;
  z-index: var(--pm-layer-period-picker);
  top: var(--pm-period-popover-top, 0);
  left: var(--pm-period-popover-left, 0);
  width: min(320px, calc(100vw - 24px));
  display: grid;
  gap: 10px;
  box-sizing: border-box;
  border: 1px solid #d8cff0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  padding: 12px;
  color: #17224f;
  box-shadow: 0 20px 44px rgba(45, 28, 93, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  isolation: isolate;
  pointer-events: auto;
  animation: pm-period-picker-in var(--pm-motion-base) var(--pm-motion-ease) both;
}

.pm-period-popover[hidden] {
  display: none;
}

.pm-period-popover.is-upward {
  transform-origin: right bottom;
}

.pm-period-popover > header {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 8px;
}

.pm-period-popover > header strong {
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  text-transform: capitalize;
}

.pm-period-popover > header button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #e0d8f1;
  border-radius: 7px;
  background: #fbf9ff;
  color: var(--pm-purple);
  padding: 0;
  cursor: pointer;
}

.pm-period-popover > header button:hover,
.pm-period-popover > header button:focus-visible {
  border-color: #b99be9;
  background: #f3edff;
  outline: 0;
}

.pm-period-popover > p {
  margin: 0;
  color: #687293;
  font-size: 11px;
  font-weight: 600;
}

.pm-period-weekdays,
.pm-period-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.pm-period-weekdays span {
  color: #7c85a3;
  font-size: 10px;
  font-weight: 750;
  line-height: 24px;
  text-align: center;
}

.pm-period-calendar-day,
.pm-period-calendar-empty {
  min-height: 32px;
}

.pm-period-calendar-day {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #26315e;
  padding: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--pm-motion-fast) ease, background var(--pm-motion-fast) ease, transform var(--pm-motion-fast) var(--pm-motion-ease);
}

.pm-period-calendar-day:hover,
.pm-period-calendar-day:focus-visible {
  background: #f1eaff;
  color: var(--pm-purple-dark);
  outline: 0;
  transform: scale(1.04);
}

.pm-period-calendar-day.is-week-selected {
  border-radius: 4px;
  background: #f0e8ff;
  color: #5626b4;
}

.pm-period-calendar-day.is-today {
  box-shadow: inset 0 0 0 1px #b99be9;
}

.pm-period-calendar-day.is-selected {
  background: var(--pm-purple);
  color: #fff;
  box-shadow: 0 4px 10px rgba(109, 54, 212, 0.22);
}

.pm-period-popover > footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: 6px;
  border-top: 1px solid #eee9f7;
  padding-top: 10px;
}

.pm-period-popover > footer button {
  min-height: 32px;
  border: 1px solid #e0d8f1;
  border-radius: 7px;
  background: #fbf9ff;
  color: #4e2da6;
  padding: 0 7px;
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.pm-period-popover > footer button:hover,
.pm-period-popover > footer button:focus-visible,
.pm-period-popover > footer button.is-active {
  border-color: #b99be9;
  background: #f0e8ff;
  outline: 0;
}

@keyframes pm-period-picker-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.pm-workspace {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 338px;
  gap: 16px;
  overflow: hidden;
  padding: 16px 18px 70px;
  background: transparent;
}

.pm-workspace.is-ai-overlay {
  grid-template-columns: 220px minmax(0, 1fr);
}

/* MindSheets benefits from the full central canvas; the other views retain
   their existing lower breathing room. */
.pm-workspace.is-mindsheets-view {
  padding-bottom: 18px;
}

.pm-workspace.is-task-sidebar-collapsed {
  grid-template-columns: minmax(0, 1fr) 338px;
}

.pm-workspace.is-task-sidebar-collapsed.is-ai-overlay {
  grid-template-columns: minmax(0, 1fr);
}

.pm-task-sidebar {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(140px, 1fr) auto;
  align-content: start;
  overflow: hidden;
  border: 1px solid #dce2f0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  color: #1d2856;
  box-shadow: 0 12px 28px rgba(63, 38, 115, 0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color var(--pm-motion-fast) ease, box-shadow var(--pm-motion-base) ease;
}

.pm-task-sidebar[hidden] {
  display: none !important;
}

.pm-project-view-drawer {
  position: absolute;
  inset-block-start: var(--pm-project-view-top, 16px);
  inset-inline-start: var(--pm-project-view-left, 250px);
  z-index: 90;
  width: min(224px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid #d8c9f6;
  border-radius: 10px;
  background: rgba(255, 253, 255, 0.9);
  padding: 12px;
  color: #1b2755;
  box-shadow: 0 18px 40px rgba(63, 38, 115, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: pm-toolbar-menu-in var(--pm-motion-base) var(--pm-motion-ease) both;
}

.pm-project-view-drawer[hidden] {
  display: none !important;
}

.pm-project-view-drawer > header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--pm-purple);
  font-size: 11px;
  font-weight: 800;
}

.pm-project-view-drawer > header > span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.pm-project-view-drawer > header button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #dfd4f3;
  border-radius: 7px;
  background: #fff;
  color: #637099;
  cursor: pointer;
}

.pm-project-view-drawer > header button:hover,
.pm-project-view-drawer > header button:focus-visible {
  border-color: #b99be9;
  color: var(--pm-purple);
  outline: 0;
}

.pm-project-view-drawer > strong {
  overflow: hidden;
  color: #162152;
  font-size: 13px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-project-view-drawer > p {
  margin: -3px 0 2px;
  color: #687293;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}

.pm-project-view-options {
  display: grid;
  gap: 7px;
}

.pm-project-view-options button {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr) 13px;
  align-items: center;
  gap: 7px;
  border: 1px solid #e1d8f2;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  padding: 8px;
  color: #1b2755;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--pm-motion-fast) ease, background var(--pm-motion-fast) ease, box-shadow var(--pm-motion-fast) ease, transform var(--pm-motion-fast) var(--pm-motion-ease);
}

.pm-project-view-options button > i:first-child {
  color: var(--pm-purple);
  font-size: 15px;
}

.pm-project-view-options button > i:last-child {
  color: #7a86a9;
  font-size: 11px;
}

.pm-project-view-options button > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.pm-project-view-options strong,
.pm-project-view-options small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-project-view-options strong {
  font-size: 11px;
  font-weight: 800;
}

.pm-project-view-options small {
  color: #75809f;
  font-size: 9px;
  font-weight: 600;
}

.pm-project-view-options button:hover,
.pm-project-view-options button:focus-visible {
  border-color: #b99be9;
  background: #f8f4ff;
  box-shadow: 0 8px 18px rgba(83, 43, 160, 0.1);
  outline: 0;
  transform: translateX(2px);
}

.pm-task-sidebar button {
  font: inherit;
}

.pm-task-sidebar-header {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #e4e8f2;
  padding: 0 12px;
}

.pm-task-sidebar-header > span,
.pm-task-groups header > span,
.pm-project-list-section header > span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.pm-task-sidebar-header strong {
  font-size: 14px;
  font-weight: 800;
}

.pm-task-sidebar-header i,
.pm-task-groups header i,
.pm-project-list-section header i {
  color: var(--pm-purple);
}

.pm-task-sidebar-header button,
.pm-task-groups header button,
.pm-project-list-section header button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #687293;
  cursor: pointer;
}

.pm-task-sidebar-header button:hover,
.pm-task-groups header button:hover,
.pm-project-list-section header button:hover {
  background: var(--pm-purple-soft);
  color: var(--pm-purple);
}

.pm-task-sidebar-nav {
  display: grid;
  gap: 2px;
  padding: 10px 8px;
}

.pm-task-sidebar-nav button,
.pm-task-quick-access [data-pm-quick-list] button,
.pm-task-group-item,
.pm-task-new-group {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #374166;
  padding: 0 9px;
  text-align: left;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  transition: transform var(--pm-motion-fast) var(--pm-motion-ease), background var(--pm-motion-fast) ease, color var(--pm-motion-fast) ease;
}

.pm-task-sidebar-nav button:hover,
.pm-task-quick-access [data-pm-quick-list] button:hover,
.pm-task-group-item:hover,
.pm-task-new-group:hover {
  background: #f5f2fb;
  color: var(--pm-purple-dark);
  transform: translateX(2px);
}

.pm-task-sidebar-nav button.is-active,
.pm-task-quick-access [data-pm-quick-list] button.is-active,
.pm-task-group-item.is-active {
  background: #eee7fb;
  color: var(--pm-purple-dark);
  font-weight: 760;
}

.pm-task-sidebar-nav button > i {
  width: 16px;
  color: #697394;
  text-align: center;
}

.pm-task-sidebar button.is-active > i {
  color: var(--pm-purple);
}

.pm-task-sidebar-nav strong,
.pm-task-quick-access [data-pm-quick-list] strong,
.pm-task-group-item > strong {
  color: inherit;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.pm-task-quick-access,
.pm-task-groups,
.pm-project-list-section {
  margin: 0 10px;
  border-top: 1px solid #e3e7f0;
  padding: 8px 0;
}

.pm-task-section-toggle {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  border: 0;
  background: transparent;
  color: #27325c;
  padding: 0 4px;
  text-align: left;
  font-size: 11px;
  cursor: pointer;
}

.pm-task-section-toggle > span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.pm-task-section-toggle > .bi-caret-down-fill {
  color: #737c99;
  font-size: 9px;
  transition: transform 160ms ease;
}

.pm-task-section-toggle[aria-expanded="false"] > .bi-caret-down-fill {
  transform: rotate(-90deg);
}

.pm-task-quick-access [data-pm-quick-list] {
  display: grid;
  gap: 1px;
}

.pm-task-quick-access [data-pm-quick-list][hidden] {
  display: none !important;
}

.pm-task-quick-access [data-pm-quick-list] button {
  grid-template-columns: minmax(0, 1fr) auto;
  padding-left: 25px;
}

.pm-task-groups {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.pm-project-list-section {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.pm-project-list-section header {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 4px;
}

.pm-project-list-section header strong {
  font-size: 11px;
  font-weight: 780;
}

.pm-project-list {
  width: 100%;
  max-width: 100%;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 0;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

/* --- El área pliega la lista de proyectos ---------------------------------- */
.pm-sidebar-area + .pm-sidebar-area {
  margin-top: 2px;
}

.pm-sidebar-area-toggle {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #5a6488;
  padding: 4px 8px;
  text-align: left;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pm-sidebar-area-toggle:hover {
  background: var(--pm-purple-soft);
  color: var(--pm-purple-dark);
}

.pm-sidebar-area-toggle > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-sidebar-area-toggle > strong {
  color: #8f97b4;
  font-size: 10.5px;
  font-weight: 700;
}

/* La flecha gira: es la única señal de que ahí dentro hay algo. */
.pm-sidebar-area-toggle > i {
  color: #9aa2bd;
  font-size: 9px;
  transition: transform 150ms ease;
}

.pm-sidebar-area.is-open .pm-sidebar-area-toggle > i {
  transform: rotate(90deg);
}

.pm-sidebar-area-projects {
  display: grid;
  gap: 2px;
  padding-left: 6px;
}

/* La línea que separa lo terminado. No es un título: es el punto donde la lista
   deja de ser trabajo y pasa a ser archivo. */
.pm-sidebar-done-rule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 8px 2px 4px;
  color: #98a0ba;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pm-sidebar-done-rule::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, rgba(47, 158, 100, 0.34), rgba(154, 162, 189, 0.16));
}

.pm-sidebar-done-rule > span {
  order: -1;
}

.pm-sidebar-done-rule > b {
  color: #7d8499;
  font-size: 10px;
  font-weight: 700;
}

/* Arrastrar para reordenar: el que se lleva se atenúa y el destino enseña por
   qué borde va a entrar. */
.pm-sidebar-project-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  cursor: grab;
}

.pm-sidebar-project-row.is-dragging,
.pm-table-row.is-dragging {
  opacity: 0.42;
}

.pm-sidebar-project-row.is-drop-before,
.pm-table-row.is-drop-before {
  box-shadow: inset 0 2px 0 0 var(--pm-purple);
}

.pm-sidebar-project-row.is-drop-after,
.pm-table-row.is-drop-after {
  box-shadow: inset 0 -2px 0 0 var(--pm-purple);
}

/* --- Subir y bajar sin arrastrar ------------------------------------------- */
/* En escritorio sobran: ahí se arrastra, y con el foco puesto están Alt+flechas.
   Aparecen donde el arrastre nativo no existe, que es el dedo. */
.pm-move-project {
  display: none;
  grid-auto-flow: column;
  gap: 2px;
  padding-left: 4px;
}

.pm-move-project button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--pm-purple-border);
  border-radius: 9px;
  background: #fff;
  color: var(--pm-purple-dark);
  cursor: pointer;
  font-size: 11px;
  box-shadow: 0 1px 2px rgba(28, 20, 60, 0.06);
}

.pm-move-project button:active {
  background: var(--pm-purple-soft);
  transform: scale(0.94);
}

.pm-table-name .pm-move-project {
  vertical-align: middle;
  margin-left: 8px;
}

@media (pointer: coarse) {
  .pm-move-project {
    display: inline-grid;
  }

  /* El panel agranda todos sus botones a 44px para el dedo. Estas dos van en
     pareja dentro de una fila estrecha: a 44 cada una tiraban el nombre a otro
     renglón y doblaban el alto de la fila. */
  .pm-move-project button {
    min-width: 34px;
    min-height: 34px;
    width: 34px;
    height: 34px;
  }

  /* El nombre y sus flechas comparten renglón; si no cabe, se recorta el
     nombre, que es lo que se puede recortar. */
  .pm-table-name {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* El que se estira es el nombre, no el punto de salud: por posición, el
     "segundo hijo" acababa siendo el punto, que se deformaba en un óvalo
     mientras el nombre se quedaba sin sitio. Se dice por lo que es. */
  .pm-table-name > span:not(.pm-table-dot):not(.pm-move-project) {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pm-table-name > .pm-table-dot {
    flex: none;
  }

  .pm-table-name .pm-move-project {
    flex: none;
    margin-left: auto;
  }

  /* Con el dedo no hay arrastre nativo que valga: el cursor de agarre miente. */
  .pm-sidebar-project-row,
  .pm-table-row[draggable="true"] {
    cursor: default;
  }
}

.pm-sidebar-project {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #303b67;
  padding: 6px 8px;
  text-align: left;
  cursor: pointer;
  transition: background var(--pm-motion-fast) ease, border-color var(--pm-motion-fast) ease, transform var(--pm-motion-fast) var(--pm-motion-ease);
}

.pm-sidebar-project:hover {
  border-color: #ddd1f3;
  background: #f8f5fd;
  transform: translateX(2px);
}

.pm-sidebar-project.is-active {
  border-color: #ccb7f2;
  background: #eee7fb;
  color: #4f248d;
}

.pm-sidebar-project-mark {
  width: 5px;
  height: 30px;
  border-radius: 999px;
  background: var(--pm-project-color, var(--pm-purple));
}

.pm-sidebar-project > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.pm-sidebar-project strong,
.pm-sidebar-project small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-sidebar-project strong {
  font-size: 10.5px;
  font-weight: 780;
}

.pm-sidebar-project small {
  color: #78819d;
  font-size: 9px;
}

.pm-sidebar-project em {
  min-width: 22px;
  border-radius: 999px;
  background: rgba(109, 54, 212, 0.1);
  color: #6432bd;
  padding: 3px 6px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.pm-task-groups--secondary {
  display: block;
  min-height: auto;
  overflow: visible;
  padding-bottom: 9px;
}

.pm-task-groups--secondary summary {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #566082;
  font-size: 10px;
  cursor: pointer;
  list-style: none;
}

.pm-task-groups--secondary summary::-webkit-details-marker {
  display: none;
}

.pm-task-groups--secondary summary::after {
  content: "+";
  margin-left: auto;
  color: var(--pm-purple);
  font-size: 15px;
}

.pm-task-groups--secondary[open] summary::after {
  content: "−";
}

.pm-task-groups--secondary .pm-task-group-list {
  max-height: 150px;
}

.pm-task-groups header {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 4px;
}

.pm-task-groups header .pm-task-section-toggle {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
}

.pm-task-groups header .pm-task-section-toggle strong {
  font-size: 11px;
  font-weight: 760;
}

.pm-task-groups-content {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.pm-task-groups-content[hidden] {
  display: none !important;
}

.pm-task-group-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 3px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.pm-task-group-empty {
  margin: 8px 6px;
  color: #78819e;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

.pm-task-group-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px 24px;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.pm-task-group-row:has(.pm-task-group-item + .pm-task-group-add-task:last-child) {
  grid-template-columns: minmax(0, 1fr) 24px;
}

.pm-task-group-item {
  position: relative;
  min-height: 30px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding-inline: 7px;
}

.pm-task-group-dot {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--pm-purple);
}

.pm-task-group-row[data-color="blue"] .pm-task-group-dot { background: #3977d7; }
.pm-task-group-row[data-color="teal"] .pm-task-group-dot { background: #159a91; }
.pm-task-group-row[data-color="amber"] .pm-task-group-dot { background: #d98a15; }
.pm-task-group-row[data-color="rose"] .pm-task-group-dot { background: #d85573; }
.pm-task-group-row[data-color="slate"] .pm-task-group-dot { background: #6d7895; }

.pm-task-group-item > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-task-group-edit,
.pm-task-group-add-task {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #7b84a0;
  cursor: pointer;
}

.pm-task-group-edit:hover,
.pm-task-group-add-task:hover {
  background: #fff;
  color: var(--pm-purple);
}

.pm-task-group-add-task {
  color: var(--pm-purple);
}

.pm-task-new-group {
  grid-template-columns: auto minmax(0, 1fr);
  margin-top: 5px;
  color: #687291;
}

.pm-task-new-group:disabled,
.pm-task-groups header [data-pm-new-group]:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.pm-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.pm-status {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 8;
  max-width: calc(100% - 40px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #d9dfee;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #4f5b82;
  padding: 8px 13px;
  box-shadow: 0 8px 24px rgba(17, 26, 70, 0.09);
  font-size: 11px;
  font-weight: 700;
  transform: translateX(-50%);
  animation: pm-status-enter var(--pm-motion-base) var(--pm-motion-ease);
}

.pm-status[hidden] {
  display: none;
}

.pm-status--error {
  border-color: #f2c4c2;
  background: #fff7f7;
  color: #b4232d;
}

.pm-status--success {
  border-color: #bfe6cb;
  background: #f1fbf5;
  color: #12703a;
}

.project-management-panel .ai-spinner {
  width: 17px;
  height: 17px;
  background: conic-gradient(from 30deg, transparent 0 18%, #a988e7 18% 48%, var(--pm-purple) 48% 100%);
  box-shadow: none;
  animation: pm-spinner-spin 720ms linear infinite;
}

.project-management-panel .ai-spinner::after {
  inset: 3px;
  background: #fff;
  box-shadow: none;
}

.pm-button--primary .ai-spinner,
.pm-ai-send .ai-spinner {
  background: conic-gradient(from 30deg, transparent 0 18%, rgba(255, 255, 255, 0.5) 18% 48%, #fff 48% 100%);
}

.pm-button--primary .ai-spinner::after,
.pm-ai-send .ai-spinner::after {
  background: var(--pm-purple);
}

.pm-main.is-loading .pm-kanban,
.pm-main.is-loading .pm-gantt,
.pm-main.is-loading .pm-cells {
  pointer-events: none;
  opacity: 0.48;
  filter: saturate(0.72);
  transform: scale(0.997);
  transition: opacity var(--pm-motion-base) ease, filter var(--pm-motion-base) ease, transform var(--pm-motion-base) var(--pm-motion-ease);
}

.pm-kanban {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(235px, 1fr));
  gap: 10px;
  overflow: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.pm-empty-board {
  width: 100%;
  min-width: 0;
  min-height: 280px;
  grid-column: 1 / -1;
  align-self: start;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  border: 1px dashed #cfc4eb;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(247, 242, 255, 0.84) 100%);
  color: #17214e;
  padding: 34px;
  text-align: center;
}

.pm-kanban.is-empty,
.pm-gantt.is-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.pm-gantt.is-empty {
  border: 0;
  background: var(--pm-gantt-surface);
}

.pm-empty-board-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--pm-purple-soft);
  color: var(--pm-purple);
  font-size: 22px;
}

.pm-empty-board strong {
  display: block;
  font-size: 17px;
  font-weight: 820;
  overflow-wrap: anywhere;
}

.pm-empty-board p {
  max-width: 440px;
  margin: 7px 0 0;
  color: #657095;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.pm-column {
  min-width: 235px;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--pm-line);
  border-radius: 8px;
  background: rgba(252, 250, 255, 0.64);
  box-shadow: 0 12px 28px rgba(63, 38, 115, 0.075);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  overflow: hidden;
}

.pm-main.is-view-transitioning > .pm-kanban:not([hidden]),
.pm-main.is-view-transitioning > .pm-gantt:not([hidden]),
.pm-main.is-view-transitioning > .pm-cells:not([hidden]) {
  animation: pm-view-aladdin-in 500ms var(--pm-motion-ease) both;
  transform-origin: 16% 12%;
}

.pm-column.is-drop-target {
  border-color: #a57be7;
  background: #faf7ff;
  box-shadow: inset 0 0 0 2px rgba(109, 54, 212, 0.08);
  animation: pm-drop-pulse 760ms ease-in-out infinite alternate;
}

.pm-column-header {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #e7eaf3;
  padding: 0 10px 0 13px;
}

.pm-column-header h3 {
  margin: 0;
  color: #111b48;
  font-size: 15px;
  font-weight: 790;
}

.pm-column-header span {
  color: #70799b;
  font-size: 13px;
  font-weight: 650;
}

.pm-column-header button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  margin-left: auto;
  border: 1px solid #d9dfee;
  border-radius: 6px;
  background: #fff;
  color: #1c2859;
  cursor: pointer;
}

.pm-column-header button:hover {
  border-color: var(--pm-purple-border);
  color: var(--pm-purple);
}

.pm-column-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
}

.pm-card-group {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.pm-card-group + .pm-card-group {
  margin-top: 5px;
}

.pm-card-group > header {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 4px;
  color: #5e5480;
}

.pm-card-group > header::before {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--pm-purple);
  content: "";
}

.pm-card-group > header strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 780;
}

.pm-card-group > header span {
  color: #8b84a0;
  font-size: 10px;
  font-weight: 700;
}

.pm-card-group > div {
  display: grid;
  gap: 8px;
}

.pm-task-card {
  position: relative;
  display: grid;
  min-height: 190px;
  gap: 8px;
  border: 1px solid #dce2ef;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  color: #14204e;
  box-shadow: 0 4px 14px rgba(17, 26, 70, 0.035);
  cursor: grab;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  animation: pm-item-enter var(--pm-motion-base) var(--pm-motion-ease) backwards;
}

.pm-column-list .pm-task-card:nth-child(2) { animation-delay: 24ms; }
.pm-column-list .pm-task-card:nth-child(3) { animation-delay: 48ms; }
.pm-column-list .pm-task-card:nth-child(4) { animation-delay: 72ms; }

.pm-task-card:hover,
.pm-task-card:focus-visible {
  border-color: #baa0e9;
  box-shadow: 0 10px 24px rgba(63, 38, 115, 0.09);
  outline: 0;
  transform: translateY(-1px);
}

.pm-task-card.is-dragging {
  opacity: 0.54;
}

.pm-task-card.is-blocked::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 8px 0 0 8px;
  background: var(--pm-red);
}

.pm-task-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

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

.pm-task-copy h4 {
  margin: 0;
  color: #111b48;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: normal;
}

.pm-task-copy p {
  margin: 4px 0 0;
  color: #4c5880;
  display: -webkit-box;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pm-task-menu {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #26315c;
  cursor: pointer;
}

.pm-task-menu:hover {
  background: #f4f1fa;
  color: var(--pm-purple);
}

.pm-task-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #435077;
  font-size: 12px;
  font-weight: 650;
}

.pm-avatar {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--pm-purple);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.pm-task-assignee {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-task-date {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
  margin-left: auto;
  white-space: nowrap;
}

.pm-task-date.is-overdue {
  color: #bf2c2c;
}

.pm-task-details {
  display: grid;
  gap: 6px;
  border-top: 1px solid #edf0f7;
  padding-top: 9px;
}

.pm-task-details > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 16px 62px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: #576287;
}

.pm-task-details > span > i {
  color: #7550c6;
  font-size: 11px;
  text-align: center;
}

.pm-task-details small,
.pm-task-details strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1.35;
}

.pm-task-details small {
  color: #7a819d;
  font-weight: 650;
}

.pm-task-details strong {
  color: #2c3766;
  font-weight: 720;
}

.pm-priority {
  width: fit-content;
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  border: 1px solid;
  border-radius: 6px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 750;
}

.pm-priority--low {
  border-color: #bae6c7;
  background: #eefbf2;
  color: #16803d;
}

.pm-priority--medium {
  border-color: #f4d1a4;
  background: #fff7eb;
  color: #d16d08;
}

.pm-priority--high {
  border-color: #f5b5b4;
  background: #fff0f0;
  color: #d42a28;
}

.pm-priority--critical {
  border-color: #d8b4fe;
  background: #f6efff;
  color: #7627bd;
}

.pm-task-footer {
  display: grid;
  grid-template-columns: auto minmax(54px, 1fr) auto;
  align-items: center;
  gap: 7px;
  color: #566188;
  font-size: 10px;
  font-weight: 620;
}

.pm-subtasks {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-subtasks i {
  color: var(--pm-purple);
}

.pm-progress-track {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7ee;
}

.pm-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--pm-purple);
}

.pm-task-card[data-status="done"] .pm-progress-track span {
  background: var(--pm-green);
}

.pm-task-progress {
  color: #15204e;
  font-size: 13px;
  font-weight: 750;
}

.pm-empty-column {
  min-height: 100px;
  display: grid;
  place-items: center;
  border: 1px dashed #d6dced;
  border-radius: 8px;
  color: #7b84a4;
  padding: 14px;
  text-align: center;
  font-size: 10px;
}

.pm-empty-column > i,
.pm-empty-column > strong {
  display: none;
}

.pm-gantt {
  --pm-gantt-surface: linear-gradient(135deg, rgba(124, 58, 237, 0.045), rgba(255, 255, 255, 0.9) 42%, rgba(45, 212, 191, 0.025));
  height: 100%;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--pm-line);
  border-radius: 8px;
  background: var(--pm-gantt-surface);
}

.pm-gantt[hidden] {
  display: none !important;
}

.pm-gantt-grid {
  /* La línea de tiempo mide lo que midan sus días: así lo que cae más adelante
     existe de verdad y se alcanza desplazándose, en vez de aplastarse contra el
     borde derecho como si venciera hoy. */
  display: grid;
  grid-template-columns: var(--pm-gantt-aside, 250px) calc(var(--pm-gantt-day, 38px) * var(--pm-gantt-days, 30));
  width: max-content;
  min-width: 100%;
}

/* En el móvil la columna de tareas se queda con casi toda la pantalla y no deja
   ver la línea de tiempo, que es justo a lo que se viene. */
@media (max-width: 720px) {
  .pm-gantt-grid {
    --pm-gantt-aside: 148px;
  }
}

.pm-gantt.is-panning {
  cursor: grabbing;
  user-select: none;
}

.pm-gantt-corner,
.pm-gantt-timeline-header {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 58px;
  border-bottom: 1px solid var(--pm-line);
  background: #fbfcff;
}

.pm-gantt-corner {
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--pm-line);
  padding: 0 16px;
  color: #1a2656;
  font-size: 12px;
  font-weight: 780;
}

/* Cabecera en dos pisos: el mes arriba, cada día abajo con su número. */
.pm-gantt-timeline-header {
  display: grid;
  grid-template-rows: 24px minmax(0, 1fr);
}

.pm-gantt-months,
.pm-gantt-days {
  display: grid;
  grid-template-columns: repeat(var(--pm-gantt-days, 30), var(--pm-gantt-day, 38px));
}

.pm-gantt-months span {
  display: flex;
  align-items: center;
  overflow: hidden;
  border-right: 1px solid var(--pm-line);
  border-bottom: 1px solid #edf0f6;
  padding: 0 9px;
  color: #1a2656;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: capitalize;
  white-space: nowrap;
}

.pm-gantt-days span {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1px;
  border-right: 1px solid #edf0f6;
  color: #667092;
  font-size: 10px;
  font-weight: 700;
}

.pm-gantt-days em {
  color: #9aa2bd;
  font-size: 8.5px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

.pm-gantt-days b {
  font-size: 11px;
  font-weight: 780;
}

/* El fin de semana se distingue sin leer: el trabajo no cae ahí. */
.pm-gantt-days span[data-finde="true"] {
  background: #f5f6fb;
  color: #a6adc6;
}

.pm-gantt-days span[data-hoy="true"] {
  background: #efe7fd;
  color: var(--pm-purple-dark);
}

.pm-gantt-days span[data-hoy="true"] b {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--pm-purple);
  color: #fff;
}

/* Una tarea sin fechas no tiene sitio en la línea de tiempo: se dice, en vez de
   inventarle una barra donde el ojo lee un vencimiento. */
.pm-gantt-undated {
  position: sticky;
  left: calc(var(--pm-gantt-aside, 250px) + 12px);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 100%;
  color: #a6adc6;
  font-size: 10px;
  font-style: italic;
  font-weight: 650;
}

/* La línea de hoy cruza el cronograma entero: sin ella no se sabe si una barra
   va tarde o todavía no ha empezado. */
.pm-gantt-today {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 2px;
  margin-left: -1px;
  background: rgba(124, 58, 237, 0.42);
  pointer-events: none;
}

.pm-gantt-task {
  position: sticky;
  left: 0;
  z-index: 2;
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 4px;
  border-right: 1px solid var(--pm-line);
  border-bottom: 1px solid #edf0f6;
  background: #fff;
  padding: 8px 16px;
}

.pm-gantt-task strong {
  overflow: hidden;
  color: #1b2755;
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-gantt-task small {
  color: #7982a1;
  font-size: 9px;
}

.pm-gantt-group-label,
.pm-gantt-group-track {
  min-height: 34px;
  border-bottom: 1px solid #e5ddf2;
  background: rgba(239, 233, 251, 0.66);
}

.pm-gantt-group-label {
  position: sticky;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  border-right: 1px solid #ded4ef;
  padding: 0 16px;
  color: #4f347f;
}

.pm-gantt-group-label strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 780;
}

.pm-gantt-group-label span {
  color: #81759a;
  font-size: 9px;
  font-weight: 700;
}

.pm-gantt-track {
  position: relative;
  min-height: 58px;
  border-bottom: 1px solid #edf0f6;
  background-color: rgba(255, 255, 255, 0.68);
  cursor: grab;
}

/* Una raya por día, y una más marcada cada siete: la semana se lee sola. */
.pm-gantt-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, #e2e6f2 1px, transparent 1px),
    linear-gradient(90deg, #f1f3f9 1px, transparent 1px);
  background-size:
    calc(var(--pm-gantt-day, 38px) * 7) 100%,
    var(--pm-gantt-day, 38px) 100%;
  pointer-events: none;
}

.pm-gantt-bar {
  position: absolute;
  top: 18px;
  height: 22px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: #7d49db;
  color: #fff;
  padding: 0 9px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(109, 54, 212, 0.18);
}

.pm-gantt-bar > em {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
}

/* Una tarea de uno o dos días no tiene sitio para su nombre dentro: el rótulo
   sale al lado en vez de quedar recortado a tres letras. */
.pm-gantt-bar[data-narrow="true"] {
  overflow: visible;
  padding: 0;
}

.pm-gantt-bar[data-narrow="true"] > em {
  position: absolute;
  left: calc(100% + 7px);
  max-width: 220px;
  color: #33406b;
  font-size: 9.5px;
  font-weight: 720;
  white-space: nowrap;
}

.pm-gantt-bar[data-status="done"] {
  background: var(--pm-green);
}

.pm-gantt-bar[data-blocked="true"] {
  background: var(--pm-red);
}

.pm-cells {
  position: relative;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #d9dced;
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 245, 253, 0.92));
  box-shadow: 0 14px 34px rgba(47, 33, 92, 0.06);
}

.pm-cells[hidden] {
  display: none !important;
}

.pm-cells-toolbar {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #e2e5f0;
  background: rgba(255, 255, 255, 0.76);
  padding: 12px 14px;
}

.pm-cells-toolbar > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.pm-cells-kicker {
  color: #7a42d5;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pm-cells-toolbar strong {
  color: #17234f;
  font-size: 13px;
  font-weight: 820;
}

.pm-cells-toolbar small {
  overflow: hidden;
  color: #6d7694;
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-cells-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.pm-cells-toolbar-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.pm-cells-actions > button,
.pm-cells-zoom button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #d6caec;
  border-radius: 7px;
  background: #fff;
  color: #56309b;
  padding: 0 10px;
  font: inherit;
  font-size: 10px;
  font-weight: 760;
  cursor: pointer;
  transition: transform var(--pm-motion-fast) var(--pm-motion-ease), border-color var(--pm-motion-fast) ease, box-shadow var(--pm-motion-fast) ease;
}

.pm-cells-actions > button:hover,
.pm-cells-zoom button:hover {
  border-color: #a985e6;
  box-shadow: 0 5px 14px rgba(91, 48, 158, 0.1);
  transform: translateY(-1px);
}

.pm-cells-zoom {
  display: grid;
  grid-template-columns: 32px 48px 32px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #d6caec;
  border-radius: 7px;
  background: #fff;
}

.pm-cells-zoom button {
  min-height: 32px;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.pm-cells-zoom output {
  color: #3f2c72;
  font-size: 9.5px;
  font-weight: 800;
  text-align: center;
}

.pm-cells-help {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #e6e8f1;
  background: rgba(245, 241, 252, 0.72);
  color: #626b8b;
  padding: 8px 14px;
  font-size: 9.5px;
  line-height: 1.45;
}

.pm-cells-help i {
  color: #7b43d5;
}

.pm-mindsheets-tools {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  border: 1px solid rgba(216, 207, 240, 0.96);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  padding: 5px;
  box-shadow: 0 12px 30px rgba(48, 27, 94, 0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@media (max-width: 1320px) {
  .pm-cells-toolbar {
    align-items: flex-start;
  }

  .pm-cells-toolbar-controls {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

.pm-mindsheets-tools button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #4d587e;
  padding: 0;
  font-size: 15px;
  cursor: pointer;
  transition: background var(--pm-motion-fast) ease, color var(--pm-motion-fast) ease, transform var(--pm-motion-fast) var(--pm-motion-ease);
}

.pm-mindsheets-tools button:hover,
.pm-mindsheets-tools button:focus-visible {
  background: #f0e8ff;
  color: var(--pm-purple-dark);
  outline: 0;
  transform: translateY(-1px);
}

.pm-mindsheets-tools button[aria-pressed="true"] {
  background: #eee5ff;
  color: var(--pm-purple-dark);
  box-shadow: inset 0 0 0 1px rgba(109, 54, 212, 0.1);
}

.pm-cells-scroll {
  position: relative;
  align-self: stretch;
  block-size: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  background-color: rgba(250, 249, 253, 0.76);
  background-image: radial-gradient(circle at 1px 1px, rgba(109, 54, 212, 0.08) 1px, transparent 0);
  background-size: 18px 18px;
  scrollbar-width: thin;
  scrollbar-color: #b8a9d4 transparent;
  overscroll-behavior: contain;
}

.pm-cells.is-pan-mode .pm-cells-scroll {
  cursor: grab;
}

.pm-cells.is-pan-mode .pm-cells-scroll.is-panning {
  cursor: grabbing;
}

.pm-cells.is-pan-mode .pm-cells-board {
  pointer-events: none;
}

.pm-cells-board {
  --pm-cells-zoom: 1;
  position: relative;
  z-index: 1;
  min-width: 100%;
  min-height: 100%;
  zoom: var(--pm-cells-zoom);
  transform-origin: top left;
}

.pm-mindzone-tables {
  min-width: 100%;
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: 14px;
  padding: 14px;
}

.pm-mindzone-table {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d9dced;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 20px rgba(48, 32, 89, 0.055);
}

.pm-mindzone-table.is-nested {
  width: 100%;
  box-shadow: none;
}

.pm-mindzone-table-header {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #e2e5f0;
  background: linear-gradient(90deg, rgba(249, 247, 253, 0.98), rgba(255, 255, 255, 0.94));
  padding: 8px 10px;
}

.pm-mindzone-table-header > div:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.pm-mindzone-table-header > div:first-child > i {
  color: var(--pm-purple);
  font-size: 13px;
}

.pm-mindzone-table-header strong {
  min-width: 0;
  outline: 0;
  color: #202d58;
  font-size: 11px;
  font-weight: 820;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pm-mindzone-table-header strong:focus {
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(109, 54, 212, 0.16);
}

.pm-mindzone-table-header small {
  flex: 0 0 auto;
  color: #7a829e;
  font-size: 9px;
  font-weight: 700;
}

.pm-mindzone-table-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.pm-mindzone-table-actions button {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid #dfd5f1;
  border-radius: 5px;
  background: #fff;
  color: #6032a8;
  padding: 0 7px;
  font: inherit;
  font-size: 8.5px;
  font-weight: 760;
  cursor: pointer;
}

.pm-mindzone-table-actions button:hover,
.pm-mindzone-table-actions button:focus-visible {
  border-color: #ad88e4;
  background: #f5efff;
  outline: 0;
}

.pm-mindzone-table-actions .pm-mindzone-delete-table {
  width: 27px;
  min-width: 27px;
  padding: 0;
  border-color: rgba(220, 38, 38, 0.34);
  color: #dc2626;
}

.pm-mindzone-table-actions .pm-mindzone-delete-table i {
  font-size: 13px;
  font-weight: 400;
}

.pm-mindzone-table-actions .pm-mindzone-delete-table:hover,
.pm-mindzone-table-actions .pm-mindzone-delete-table:focus-visible {
  border-color: #dc2626;
  background: #fff3f3;
  color: #b91c1c;
}

.pm-mindzone-table-scroll {
  min-width: 0;
  overflow: visible;
  overflow-y: visible;
}

.pm-mindzone-table-scroll .pm-cells-grid {
  width: 100%;
  min-width: 0;
  padding: 0;
}

.pm-mindzone-table-scroll .pm-cells-corner {
  border-top: 0;
  border-top-left-radius: 0;
}

.pm-mindzone-table-scroll .pm-cell-column-header {
  border-top: 0;
}

.pm-mindzone-subtable-slot {
  min-width: 0;
  border-right: 1px solid #d8ddec;
  border-bottom: 1px solid #d8ddec;
  background: rgba(245, 241, 252, 0.72);
  padding: 10px;
}

.pm-mindzone-subtables {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.pm-cells-board.is-zooming {
  animation: pm-cells-zoom-pulse 240ms var(--pm-motion-ease);
}

@keyframes pm-cells-zoom-pulse {
  0% { opacity: 0.78; transform: scale(0.985); }
  100% { opacity: 1; transform: scale(1); }
}

.pm-cells-grid {
  position: relative;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-auto-rows: minmax(58px, auto);
  align-items: stretch;
  padding: 12px;
}

.pm-cells-corner,
.pm-cell-column-header {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 44px;
  border-top: 1px solid #d8ddec;
  border-right: 1px solid #d8ddec;
  border-bottom: 1px solid #d8ddec;
  background: rgba(244, 241, 250, 0.98);
}

.pm-cells-corner {
  left: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  border-left: 1px solid #d8ddec;
  border-top-left-radius: 7px;
  color: #81799a;
  font-size: 9px;
  font-weight: 800;
}

.pm-cell-column-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 5px;
  padding: 6px 24px 6px 10px;
}

.pm-cell-column-resizer {
  position: absolute;
  top: 0;
  right: -10px;
  bottom: 0;
  width: 20px;
  z-index: 3;
  cursor: col-resize;
  touch-action: none;
}

.pm-cell-column-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  border-radius: 2px;
  background: var(--pm-purple);
  opacity: 0;
  transform: translateX(-50%) scaleY(0.72);
  transition: opacity var(--pm-motion-fast) ease, transform var(--pm-motion-fast) var(--pm-motion-ease);
}

.pm-cell-column-header:hover .pm-cell-column-resizer::after,
.pm-cell-column-resizer:hover::after,
.pm-cell-column-resizer.is-resizing::after {
  opacity: 0.82;
  transform: translateX(-50%) scaleY(1);
}

.pm-is-resizing-column,
.pm-is-resizing-column * {
  cursor: col-resize !important;
  user-select: none !important;
}

.pm-cell-column-header:last-child {
  border-top-right-radius: 7px;
}

.pm-cell-column-header > span {
  min-width: 0;
  outline: 0;
  color: #26315d;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pm-cell-column-header > span:focus {
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(109, 54, 212, 0.16);
}

.pm-cell-column-header > button,
.pm-cell-column-menu-button,
.pm-grid-cell-menu-button,
.pm-cell-row-handle button {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #747d9b;
  cursor: pointer;
}

.pm-cell-column-header > button:hover,
.pm-cell-column-menu-button:hover,
.pm-grid-cell-menu-button:hover,
.pm-cell-row-handle button:hover {
  background: #eee7fb;
  color: var(--pm-purple);
}

.pm-cell-menu-disclosure {
  min-width: 0;
}

.pm-cell-menu-disclosure > summary {
  list-style: none;
}

.pm-cell-menu-disclosure > summary::-webkit-details-marker {
  display: none;
}

.pm-cell-menu-disclosure:not([open]) > .pm-cell-menu {
  display: none !important;
}

.pm-cell-menu-disclosure[open] {
  position: relative;
  z-index: 40;
}

.pm-column-menu-disclosure {
  position: relative;
}

.pm-cell-row-handle {
  position: sticky;
  left: 0;
  z-index: 3;
  min-height: 58px;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  border-right: 1px solid #d8ddec;
  border-bottom: 1px solid #d8ddec;
  border-left: 1px solid #d8ddec;
  background: rgba(248, 247, 251, 0.98);
  color: #8a92a9;
  font-size: 9px;
  font-weight: 800;
}

.pm-cell-row-handle button {
  width: 22px;
  height: 22px;
  opacity: 0;
  transition: opacity var(--pm-motion-fast) ease;
}

.pm-cell-row-handle:hover button,
.pm-cell-row-handle:focus-within button {
  opacity: 1;
}

.pm-grid-cell {
  position: relative;
  min-width: 0;
  min-height: 58px;
  display: grid;
  align-content: start;
  border-right: 1px solid #d8ddec;
  border-bottom: 1px solid #d8ddec;
  background: rgba(255, 255, 255, 0.96);
  color: #28345f;
  padding: 10px 32px 10px 11px;
  text-align: left;
  transition: background var(--pm-motion-fast) ease, box-shadow var(--pm-motion-fast) ease, min-height var(--pm-motion-base) var(--pm-motion-ease);
}

.pm-grid-cell[data-align="center"] { text-align: center; }
.pm-grid-cell[data-align="right"] { text-align: right; }
.pm-grid-cell[data-tone="purple"] { background: #f4effd; }
.pm-grid-cell[data-tone="teal"] { background: #eaf8f6; }
.pm-grid-cell[data-tone="amber"] { background: #fff7e7; }
.pm-grid-cell[data-tone="rose"] { background: #fff0f3; }
.pm-grid-cell[data-tone="slate"] { background: #f0f3f8; }

.pm-grid-cell:hover,
.pm-grid-cell:focus-within {
  z-index: 4;
  box-shadow: inset 0 0 0 1px rgba(109, 54, 212, 0.38), 0 5px 16px rgba(46, 30, 88, 0.08);
}

.pm-grid-cell-menu-button {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  opacity: 0.72;
  transition: opacity var(--pm-motion-fast) ease, background-color var(--pm-motion-fast) ease;
}

.pm-grid-cell-menu-disclosure {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 4;
}

.pm-grid-cell-menu-disclosure .pm-grid-cell-menu-button {
  position: static;
}

.pm-grid-cell-menu-disclosure > .pm-cell-menu {
  top: 29px;
  right: 0;
}

.pm-grid-cell:hover .pm-grid-cell-menu-button,
.pm-grid-cell:focus-within .pm-grid-cell-menu-button,
.pm-grid-cell-menu-button:focus {
  opacity: 1;
}

.pm-grid-cell-editor {
  width: 100%;
  min-height: 36px;
  outline: 0;
  font-size: 10.5px;
  font-weight: 620;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

[contenteditable][data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: #9aa1b7;
  pointer-events: none;
}

.pm-grid-cell.is-collapsed {
  min-height: 42px;
  align-content: center;
  padding-top: 6px;
  padding-bottom: 6px;
}

.pm-grid-cell.is-collapsed .pm-grid-cell-editor {
  min-height: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-cell-menu {
  position: absolute;
  top: 34px;
  right: 7px;
  z-index: 30;
  width: 210px;
  display: grid;
  gap: 3px;
  border: 1px solid #d4c6ed;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.99);
  padding: 8px;
  text-align: left;
  box-shadow: 0 16px 36px rgba(38, 24, 76, 0.18);
  animation: pm-toolbar-popover-in 150ms var(--pm-motion-ease);
}

.pm-cell-menu[hidden] {
  display: none !important;
}

.pm-cell-menu.is-portaled {
  z-index: 140;
}

.pm-column-menu {
  top: 38px;
  right: 5px;
}

@media (max-height: 800px) {
  .pm-cells {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .pm-cells-help {
    display: none;
  }

  .pm-column-menu-disclosure > .pm-column-menu,
  .pm-grid-cell-menu-disclosure > .pm-cell-menu {
    top: auto;
    right: 0;
    bottom: 31px;
  }
}

.pm-cell-menu > strong,
.pm-cell-menu-label {
  color: #4e3a78;
  padding: 4px 6px;
  font-size: 9px;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pm-cell-menu > button {
  min-height: 31px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #354064;
  padding: 5px 7px;
  text-align: left;
  font: inherit;
  font-size: 9.5px;
  font-weight: 680;
  cursor: pointer;
}

.pm-cell-menu > button:hover {
  background: #f1ecfa;
  color: #5b2fa4;
}

.pm-cell-menu > button.is-danger {
  color: #b12b40;
}

.pm-cell-tone-options,
.pm-cell-align-options {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px 6px;
}

.pm-cell-tone,
.pm-cell-align-options button {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid #dde1eb;
  border-radius: 6px;
  background: #fff;
  color: #66708f;
  padding: 0;
  cursor: pointer;
}

.pm-cell-tone span {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(42, 35, 65, 0.1);
  border-radius: 4px;
  background: #fff;
}

.pm-cell-tone span[data-tone="purple"] { background: #eadffd; }
.pm-cell-tone span[data-tone="teal"] { background: #d8f3ef; }
.pm-cell-tone span[data-tone="amber"] { background: #ffedc2; }
.pm-cell-tone span[data-tone="rose"] { background: #ffdce5; }
.pm-cell-tone span[data-tone="slate"] { background: #dfe5ef; }

.pm-cell-tone.is-active,
.pm-cell-align-options button.is-active {
  border-color: #8f5add;
  box-shadow: 0 0 0 2px rgba(109, 54, 212, 0.12);
}

.pm-cell-subtasks {
  display: grid;
  gap: 6px;
  margin-top: 9px;
  border-top: 1px dashed rgba(109, 54, 212, 0.22);
  padding-top: 8px;
  text-align: left;
}

.pm-cell-subtasks-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #675089;
  font-size: 8.5px;
}

.pm-cell-subtask {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 20px;
  align-items: start;
  gap: 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.7);
  padding: 5px;
}

.pm-cell-subtask input {
  margin: 2px 0 0;
  accent-color: var(--pm-purple);
}

.pm-cell-subtask span {
  min-height: 18px;
  outline: 0;
  cursor: text;
  color: #475174;
  font-size: 9px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pm-cell-subtask span:focus {
  border-radius: 4px;
  background: rgba(109, 54, 212, 0.08);
  box-shadow: 0 0 0 2px rgba(109, 54, 212, 0.16);
}

.pm-cell-subtask:has(input:checked) span {
  color: #8c93aa;
  text-decoration: line-through;
}

.pm-cell-subtask button,
.pm-cell-add-subtask {
  border: 0;
  background: transparent;
  color: #7d86a2;
  cursor: pointer;
}

.pm-cell-add-subtask {
  min-height: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 5px;
  color: #6735bb;
  padding: 0 5px;
  font: inherit;
  font-size: 9px;
  font-weight: 750;
}

.pm-cell-add-subtask:hover {
  background: rgba(109, 54, 212, 0.08);
}

.pm-cells-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  border: 1px dashed #cdbbe9;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #757e9a;
  text-align: center;
}

.pm-cells-empty i {
  color: #7542ce;
  font-size: 25px;
}

.pm-cells-empty strong {
  color: #27325d;
  font-size: 12px;
}

.pm-cells-empty span {
  font-size: 9.5px;
}

.pm-ai-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  overflow: hidden;
  border: 1px solid #d8c9f6;
  border-radius: 8px;
  background: rgba(249, 245, 255, 0.78);
  box-shadow: 0 14px 32px rgba(72, 40, 135, 0.1);
  transition: border-color var(--pm-motion-fast) ease, box-shadow var(--pm-motion-base) ease, transform var(--pm-motion-base) var(--pm-motion-ease), opacity var(--pm-motion-fast) ease;
}

.pm-ai-panel.is-floating {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: var(--pm-layer-ai-floating);
  width: min(390px, calc(100vw - 44px));
  min-width: 310px;
  max-width: min(620px, calc(100vw - 24px));
  height: min(720px, calc(100vh - 44px));
  min-height: 420px;
  max-height: calc(100vh - 24px);
  resize: both;
  isolation: isolate;
  pointer-events: auto;
  box-shadow: 0 26px 70px rgba(35, 18, 75, 0.24);
}

.pm-ai-panel.is-floating .pm-ai-header,
.pm-ai-panel.is-minimized .pm-ai-header {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

/* Con el flujo a pantalla completa, Flowmind va por encima del dibujo: es lo
   único que se deja asomar ahí, y recogido ocupa una pastilla. */
.pm-ai-panel.is-sobre-la-escena.is-floating,
.pm-ai-panel.is-sobre-la-escena.is-minimized {
  z-index: calc(var(--pm-layer-flow-scene) + 2);
}

/* Y ahí no se ofrece acoplarlo: no hay costado al que acoplarlo. El botón
   mandaba el panel a su hueco del área de trabajo, detrás de la escena, y con
   él se iba el propio botón de traerlo de vuelta. Queda el de recoger. */
.pm-ai-panel.is-sobre-la-escena [data-pm-ai-float] {
  display: none;
}

.pm-ai-panel.is-dragging {
  z-index: var(--pm-layer-ai-dragging);
  will-change: left, top;
  transition: none;
  box-shadow: 0 30px 82px rgba(35, 18, 75, 0.3);
}

.pm-ai-panel.is-dragging .pm-ai-header {
  cursor: grabbing;
}

.pm-ai-panel.is-minimized {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: var(--pm-layer-ai-floating);
  width: 224px;
  min-width: 224px;
  max-width: 224px;
  height: 58px;
  min-height: 58px;
  max-height: 58px;
  resize: none;
  isolation: isolate;
  pointer-events: auto;
  box-shadow: 0 18px 44px rgba(35, 18, 75, 0.22);
}

.pm-ai-panel.is-minimized .pm-ai-body {
  display: none;
}

.pm-ai-panel.is-minimized .pm-ai-header {
  min-height: 56px;
  gap: 8px;
  border-bottom: 0;
  padding: 10px 12px;
}

.pm-ai-panel.is-minimized .pm-ai-title {
  flex: 1 1 auto;
}

.pm-ai-panel.is-minimized .pm-flowmind-wordmark {
  width: 96px;
  height: 23px;
  flex: 0 0 auto;
}

/* Minimizado es una pastilla de 224px: con el logo y cuatro botones el
   contenido pedía 240 y los últimos se veían cortados. Solo queda lo que tiene
   sentido ahí: quién es, y volver a abrirlo. Chat nuevo e historial no pintan
   nada mientras la conversación no se ve. */
.pm-ai-panel.is-minimized .pm-ai-drag-indicator,
.pm-ai-panel.is-minimized .pm-ai-scope-slot,
.pm-ai-panel.is-minimized [data-pm-ai-float],
.pm-ai-panel.is-minimized [data-pm-ai-new-chat],
.pm-ai-panel.is-minimized [data-pm-ai-history-toggle] {
  display: none;
}

/* Minimizado es una pastilla de 58px: la cabecera tiene que caber en una fila
   o el contenido se desborda y se ve cortado. */
.pm-ai-panel.is-minimized .pm-ai-header {
  flex-wrap: nowrap;
}

.pm-ai-header {
  min-height: 52px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid #e6ddf6;
  background: var(--pm-ai-bg);
  /* Menos margen a la izquierda: el logo estaba muy metido hacia el centro. */
  padding: 9px 12px;
}

.pm-ai-title {
  /* Sin crecer: así el título y los botones comparten fila cuando el panel da
     de sí (flotante, pantallas anchas) y solo bajan cuando de verdad no caben. */
  flex: 0 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.pm-flowmind-title-identity {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  /* Menos hueco entre el mono y el logo: el texto quedaba muy hacia el centro. */
  gap: 6px;
}

.pm-flowmind-title-avatar,
.pm-flowmind-chat-avatar {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(109, 54, 212, 0.24);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 25%, rgba(138, 92, 235, 0.2), rgba(255, 255, 255, 0.96) 68%);
  box-shadow: 0 4px 10px rgba(82, 44, 161, 0.11);
}

.pm-flowmind-title-avatar {
  width: 27px;
  height: 27px;
}

.pm-flowmind-title-avatar img,
.pm-flowmind-chat-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.pm-flowmind-wordmark {
  width: 86px;
  height: 21px;
  display: block;
  object-fit: cover;
  object-position: center;
}

.pm-ai-drag-indicator {
  display: none;
  color: #8b6bc8;
  font-size: 15px;
}

.pm-ai-panel.is-floating .pm-ai-drag-indicator {
  display: inline-block;
}

.pm-ai-window-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* .pm-mobile-only pierde contra .pm-ai-window-actions button, que es mas
   especifica: por eso el boton de cerrar salia tambien en escritorio, donde no
   pinta nada (el panel se minimiza, no se cierra). */
.pm-ai-window-actions .pm-mobile-only {
  display: none;
}

.pm-ai-window-actions button {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid #d7c8f4;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
  color: #5f2fc0;
  cursor: pointer;
  transition: transform var(--pm-motion-fast) var(--pm-motion-ease), border-color var(--pm-motion-fast) ease, background var(--pm-motion-fast) ease, color var(--pm-motion-fast) ease, box-shadow var(--pm-motion-base) ease;
}

.pm-ai-window-actions button:hover,
.pm-ai-window-actions button:focus-visible,
.pm-ai-window-actions button[aria-pressed="true"] {
  border-color: #a989e5;
  background: #fff;
  color: #4d1ca7;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(109, 54, 212, 0.09);
  transform: translateY(-1px);
}

.pm-ai-body {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: start;
  overflow: hidden;
}

/* Filas explícitas: el historial se oculta con display:none y, sin esto, el
   chat caería en su fila `auto` y el botón de riesgos se estiraría al 1fr. */
.pm-ai-history {
  grid-row: 1;
}

.pm-ai-chat {
  grid-row: 2;
}

.pm-ai-suggestions {
  max-height: 310px;
  display: grid;
  gap: 9px;
  padding: 14px 14px 12px;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: top center;
  visibility: visible;
  transition:
    max-height 320ms var(--pm-motion-ease),
    padding 280ms var(--pm-motion-ease),
    opacity 180ms ease,
    transform 280ms var(--pm-motion-ease),
    visibility 0s linear;
}

.pm-ai-suggestions.is-collapsed {
  max-height: 0;
  gap: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
  visibility: hidden;
  pointer-events: none;
  transition:
    max-height 320ms var(--pm-motion-ease),
    padding 280ms var(--pm-motion-ease),
    opacity 160ms ease,
    transform 280ms var(--pm-motion-ease),
    visibility 0s linear 320ms;
}

.pm-ai-suggestions h3 {
  margin: 0 0 2px;
  color: var(--pm-purple);
  font-size: 13px;
  font-weight: 750;
}

.pm-ai-suggestions button {
  min-height: 104px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 11px;
  border: 1px solid #dddff0;
  border-radius: 7px;
  background: #fff;
  color: #16204d;
  padding: 14px 12px;
  text-align: left;
  cursor: pointer;
  transition: transform var(--pm-motion-fast) var(--pm-motion-ease), border-color var(--pm-motion-fast) ease, box-shadow var(--pm-motion-base) ease, background var(--pm-motion-fast) ease;
}

.pm-ai-suggestions button:hover {
  border-color: #bea5eb;
  box-shadow: 0 7px 16px rgba(67, 38, 121, 0.07);
  transform: translateY(-1px);
}

.pm-ai-suggestions button:active:not(:disabled) {
  transform: translateY(1px) scale(0.99);
}

.pm-ai-suggestions button.is-selected {
  border-color: #a985e8;
  background: #f6f0ff;
  box-shadow: 0 0 0 3px rgba(109, 54, 212, 0.08), 0 8px 18px rgba(67, 38, 121, 0.08);
  transform: translateY(-1px) scale(0.995);
}

.pm-ai-suggestions button.is-selected > i:last-child {
  color: var(--pm-purple);
  transform: translateX(3px);
  transition: transform var(--pm-motion-base) var(--pm-motion-ease), color var(--pm-motion-fast) ease;
}

.pm-ai-suggestions button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  box-shadow: none;
}

.pm-ai-suggestions button > i:first-child {
  color: var(--pm-purple);
  font-size: 18px;
}

.pm-ai-suggestions button > i:last-child {
  align-self: center;
  color: #1c2859;
}

.pm-ai-suggestions button span {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.pm-ai-suggestions strong {
  font-size: 12px;
  font-weight: 780;
  line-height: 1.35;
}

.pm-ai-suggestions small {
  color: #596486;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.55;
}

.pm-ai-chat {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 9px;
  overflow: hidden;
  padding: 0 14px 12px;
}

.pm-ai-messages {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.pm-ai-welcome,
.pm-ai-message {
  border: 1px solid #e2dcf0;
  border-radius: 7px;
  background: #fff;
  color: #4d587e;
  padding: 9px 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.55;
}

.pm-ai-message {
  animation: pm-item-enter var(--pm-motion-base) var(--pm-motion-ease);
}

.pm-ai-message--user {
  margin-left: 28px;
  border-color: #d3bdf7;
  background: #f5efff;
  color: #3f2478;
}

.pm-ai-message--assistant {
  margin-right: 16px;
  border: 0;
  padding: 0;
  background: transparent;
}

.pm-ai-message > .pm-ai-message-author {
  display: block;
  margin-bottom: 3px;
  color: #202b58;
  font-size: 11px;
}

.pm-ai-message-author {
  min-height: 22px;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

.pm-ai-message-content strong {
  color: inherit;
  font-weight: 780;
}

.pm-ai-response-card {
  display: grid;
  gap: 7px;
  border: 1px solid #ddd1f4;
  border-radius: 9px;
  padding: 9px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 244, 255, 0.96));
  color: #263157;
  box-shadow: 0 7px 16px rgba(76, 43, 140, 0.06);
}

.pm-ai-response-section {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.pm-ai-response-section + .pm-ai-response-section {
  border-top: 1px solid #e7dff4;
  padding-top: 7px;
}

.pm-ai-response-section-heading {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5025a8;
  font-size: 10.5px;
  font-weight: 820;
  letter-spacing: 0.01em;
}

.pm-ai-response-section-heading > i {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 5px;
  background: #efe7ff;
  color: #6633cb;
  font-size: 12px;
}

.pm-ai-response-section-body {
  min-width: 0;
  color: #3d486c;
  font-size: 12px;
  font-weight: 620;
  line-height: 1.48;
  overflow-wrap: anywhere;
}

.pm-ai-response-section-body p {
  margin: 0;
}

.pm-ai-response-section-body p + p {
  margin-top: 5px;
}

.pm-ai-response-section-body ul,
.pm-ai-response-section-body ol {
  display: grid;
  gap: 3px;
  margin: 1px 0 0;
  padding-left: 17px;
}

.pm-ai-response-section-body li::marker {
  color: #6a38c8;
}

.pm-ai-response-section--next {
  border: 1px solid #d6c4f6;
  border-radius: 7px;
  padding: 7px;
  background: rgba(243, 236, 255, 0.72);
}

.pm-ai-response-section--next.is-interactive {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms var(--pm-motion-ease), border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.pm-ai-response-section--next.is-interactive:hover,
.pm-ai-response-section--next.is-interactive:focus-visible {
  border-color: #8d62dd;
  background: #f1e9ff;
  box-shadow: 0 5px 12px rgba(91, 48, 171, 0.12);
  outline: none;
  transform: translateY(-1px);
}

.pm-ai-response-section--next.is-interactive.is-disabled,
.pm-ai-response-section--next.is-interactive[aria-disabled="true"] {
  cursor: wait;
  opacity: 0.62;
  transform: none;
}

.pm-ai-next-step-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  color: #6331c5;
  font-size: 10px;
  font-weight: 780;
}

.pm-ai-response-section--next + .pm-ai-response-section {
  border-top: 0;
  padding-top: 0;
}

.pm-ai-response-section--decision,
.pm-ai-response-section--risk {
  border: 1px solid #f2c987;
  border-radius: 7px;
  padding: 7px;
  background: rgba(255, 247, 231, 0.86);
}

.pm-ai-response-section--decision + .pm-ai-response-section,
.pm-ai-response-section--risk + .pm-ai-response-section {
  border-top: 0;
  padding-top: 0;
}

.pm-ai-response-section--decision .pm-ai-response-section-heading,
.pm-ai-response-section--risk .pm-ai-response-section-heading {
  color: #ae5d00;
}

.pm-ai-response-section--decision .pm-ai-response-section-heading > i,
.pm-ai-response-section--risk .pm-ai-response-section-heading > i {
  background: #fff1d8;
  color: #dc7800;
}

.pm-ai-response-section--plan .pm-ai-response-section-heading {
  color: #166e75;
}

.pm-ai-response-section--plan .pm-ai-response-section-heading > i {
  background: #e3f7f5;
  color: #149b97;
}

.pm-flowmind-chat-avatar {
  width: 22px;
  height: 22px;
  border-color: rgba(109, 54, 212, 0.2);
  box-shadow: 0 2px 6px rgba(82, 44, 161, 0.1);
}

.pm-ai-chat-brand {
  min-height: 26px;
  display: flex;
  justify-content: flex-end;
  padding: 0 2px 2px;
}

.pm-ai-chat-brand .pm-flowmind-chat-avatar {
  width: 26px;
  height: 26px;
}

.pm-ai-message.is-pending {
  border-style: dashed;
  opacity: 0.82;
}

.pm-ai-thinking {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-right: 10px;
  border: 1px solid #cdb9f1;
  border-radius: 8px;
  background: #f8f4ff;
  color: #33205f;
  padding: 10px;
  box-shadow: 0 8px 18px rgba(67, 38, 121, 0.07);
  animation: pm-thinking-enter 260ms var(--pm-motion-ease), pm-thinking-breathe 2.4s ease-in-out 260ms infinite;
}

.pm-ai-thinking-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #c7acef;
  border-radius: 7px;
  background: #fff;
  color: var(--pm-purple);
  font-size: 15px;
  animation: pm-thinking-icon 1.8s ease-in-out infinite;
}

.pm-ai-thinking-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.pm-ai-thinking-copy strong {
  color: #2d195a;
  font-size: 11px;
  font-weight: 780;
  line-height: 1.35;
}

.pm-ai-thinking-copy small {
  color: #695b87;
  font-size: 10px;
  font-weight: 620;
  line-height: 1.45;
}

.pm-ai-thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding-right: 1px;
}

.pm-ai-thinking-dots i {
  width: 4px;
  height: 4px;
  display: block;
  border-radius: 50%;
  background: var(--pm-purple);
  opacity: 0.28;
  animation: pm-thinking-dot 1.2s ease-in-out infinite;
}

.pm-ai-thinking-dots i:nth-child(2) {
  animation-delay: 140ms;
}

.pm-ai-thinking-dots i:nth-child(3) {
  animation-delay: 280ms;
}

@keyframes pm-thinking-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pm-thinking-breathe {
  0%, 100% { border-color: #cdb9f1; box-shadow: 0 8px 18px rgba(67, 38, 121, 0.07); }
  50% { border-color: #a984e4; box-shadow: 0 10px 22px rgba(67, 38, 121, 0.12); }
}

@keyframes pm-thinking-icon {
  0%, 100% { transform: scale(1); color: #6d36d4; }
  50% { transform: scale(1.06); color: #4f1faf; }
}

@keyframes pm-thinking-dot {
  0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.pm-ai-pending-proposal {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid #cdb8f2;
  border-radius: 7px;
  background: #f7f2ff;
  color: #31205f;
  padding: 9px 10px;
}

.pm-ai-pending-proposal[hidden] {
  display: none;
}

.pm-ai-pending-proposal > i {
  color: var(--pm-purple);
  font-size: 17px;
}

.pm-ai-pending-proposal > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.pm-ai-pending-proposal small {
  color: #7655b5;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pm-ai-pending-proposal strong,
.pm-ai-pending-proposal span span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-ai-pending-proposal strong {
  font-size: 11px;
}

.pm-ai-pending-proposal span span {
  color: #6b5c8d;
  font-size: 9px;
}

.pm-ai-pending-proposal button {
  min-height: 30px;
  border: 1px solid var(--pm-purple);
  border-radius: 6px;
  background: #fff;
  color: var(--pm-purple);
  padding: 0 9px;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.pm-ai-pending-proposal button:hover,
.pm-ai-pending-proposal button:focus-visible {
  background: var(--pm-purple);
  color: #fff;
  outline: 0;
}

.pm-ai-chat form {
  display: grid;
  gap: 7px;
}

.pm-ai-chat form > label {
  color: #18234f;
  font-size: 12px;
  font-weight: 750;
}

.pm-ai-composer {
  border: 1px solid #d7dced;
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
  transition: border-color var(--pm-motion-fast) ease, box-shadow var(--pm-motion-base) ease, background var(--pm-motion-fast) ease;
}

.pm-ai-composer:focus-within {
  border-color: #aa86e8;
  box-shadow: 0 0 0 3px rgba(109, 54, 212, 0.08);
}

.pm-ai-composer textarea {
  width: 100%;
  min-height: 54px;
  display: block;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #1b2754;
  padding: 10px 11px 4px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.pm-ai-composer > div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 3px 8px 8px;
}

.pm-ai-composer button {
  width: 32px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #ded5f0;
  border-radius: 6px;
  background: #fff;
  color: #4d2a92;
  cursor: pointer;
  transition: transform var(--pm-motion-fast) var(--pm-motion-ease), border-color var(--pm-motion-fast) ease, background var(--pm-motion-fast) ease, color var(--pm-motion-fast) ease;
}

.pm-ai-composer button:active:not(:disabled) {
  transform: scale(0.94);
}

.pm-ai-composer .pm-ai-send {
  border-color: var(--pm-purple);
  background: var(--pm-purple);
  color: #fff;
}

.pm-ai-composer:has(textarea:disabled) {
  background: #f7f8fc;
}

.pm-ai-composer textarea:disabled {
  color: #8a92ad;
  cursor: not-allowed;
}

.pm-ai-composer button:disabled {
  border-color: #e1e4ed;
  background: #f2f3f7;
  color: #a0a6b8;
  cursor: not-allowed;
}

.pm-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 36px));
  border: 0;
  border-radius: 9px;
  background: #fff;
  color: var(--pm-navy);
  padding: 0;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

.pm-dialog[open] {
  animation: pm-dialog-enter 260ms var(--pm-motion-ease);
}

.pm-activity-dialog.is-closing {
  pointer-events: none;
  animation: pm-dialog-exit 180ms var(--pm-motion-ease) forwards;
}

.app-shell.project-management-central-lock .pm-dialog {
  left: var(--sidebar-collapsed-size);
}

.pm-dialog::backdrop {
  background: rgba(22, 29, 61, 0.42);
  backdrop-filter: blur(3px);
}

.pm-dialog > form {
  min-height: 0;
  max-height: min(860px, calc(100vh - 36px));
  max-height: min(860px, calc(100dvh - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.pm-task-dialog > form {
  height: min(860px, calc(100vh - 36px));
  height: min(860px, calc(100dvh - 36px));
}

.pm-activity-dialog > div {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(180px, 1fr) auto;
  overflow: hidden;
}

.pm-activity-list {
  min-height: 180px;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow-y: auto;
  padding: 20px 28px;
}

.pm-activity-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  border-bottom: 1px solid #e7eaf2;
  padding: 0 0 12px;
}

.pm-activity-item > i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--pm-purple-soft);
  color: var(--pm-purple);
}

.pm-activity-item div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.pm-activity-item strong {
  color: #26315e;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.pm-activity-item small {
  color: #737d9c;
  font-size: 9px;
}

.pm-activity-empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  color: #737d9b;
  text-align: center;
  font-size: 11px;
}

.pm-dialog header {
  min-height: 92px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #eaedf4;
  padding: 22px 28px 18px;
}

.pm-dialog header > div {
  min-width: 0;
}

.pm-dialog-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--pm-purple);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pm-dialog h2 {
  margin: 0;
  color: #111b48;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.pm-dialog header p {
  margin: 7px 0 0;
  color: #657092;
  font-size: 10px;
  line-height: 1.45;
}

.pm-dialog footer {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #eaedf4;
  padding: 14px 28px;
}

.pm-form-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 22px 28px;
}

.pm-field {
  display: grid;
  align-content: start;
  gap: 7px;
  color: #1d2856;
  font-size: 10px;
  font-weight: 750;
}

.pm-field > span {
  color: #7881a0;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.45;
}

.pm-field--full {
  grid-column: 1 / -1;
}

.pm-field input,
.pm-field select,
.pm-field textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid #d6dced;
  border-radius: 7px;
  outline: 0;
  background: #fff;
  color: #17224f;
  padding: 9px 11px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
}

.pm-field textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
}

.pm-field input:focus,
.pm-field select:focus,
.pm-field textarea:focus {
  border-color: #a57be7;
  box-shadow: 0 0 0 3px rgba(109, 54, 212, 0.08);
}

.pm-date-field {
  position: relative;
}

.pm-date-trigger {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid #d6dced;
  border-radius: 7px;
  background: #fff;
  color: #17224f;
  padding: 9px 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--pm-motion-fast) ease, box-shadow var(--pm-motion-base) ease, background var(--pm-motion-fast) ease, color var(--pm-motion-fast) ease;
}

.pm-date-trigger > i:first-child {
  color: var(--pm-purple);
  font-size: 15px;
}

.pm-date-trigger > i:last-child {
  color: #687293;
  font-size: 11px;
  transition: transform var(--pm-motion-fast) ease;
}

.pm-date-trigger[aria-expanded="true"],
.pm-date-trigger:hover,
.pm-date-trigger:focus-visible {
  border-color: #a57be7;
  background: #fcfaff;
  box-shadow: 0 0 0 3px rgba(109, 54, 212, 0.08);
  color: var(--pm-purple-dark);
  outline: 0;
}

.pm-date-trigger[aria-expanded="true"] > i:last-child {
  transform: rotate(180deg);
}

.pm-date-popover {
  position: fixed;
  z-index: 80;
  top: var(--pm-date-popover-top, 0);
  left: var(--pm-date-popover-left, 0);
  width: min(308px, calc(100vw - 24px));
  max-height: min(390px, calc(100dvh - 24px));
  display: grid;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  border: 1px solid #d8cff0;
  border-radius: 10px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 18px 38px rgba(45, 28, 93, 0.16);
}

.pm-date-popover[hidden] {
  display: none;
}

.pm-date-popover.is-upward {
  transform-origin: center bottom;
}

.pm-dialog .pm-date-popover > header,
.pm-dialog .pm-date-popover > footer {
  display: flex;
  width: 100%;
  min-height: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  flex: 0 0 30px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pm-date-popover header strong {
  color: #17224f;
  font-size: 13px;
  font-weight: 800;
  text-transform: capitalize;
}

.pm-date-popover header button,
.pm-date-popover footer button {
  min-width: 30px;
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #e0d8f1;
  border-radius: 7px;
  background: #fbf9ff;
  color: var(--pm-purple);
  padding: 0 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--pm-motion-fast) ease, border-color var(--pm-motion-fast) ease, transform var(--pm-motion-fast) var(--pm-motion-ease);
}

.pm-date-popover header button:hover,
.pm-date-popover header button:focus-visible,
.pm-date-popover footer button:hover,
.pm-date-popover footer button:focus-visible {
  border-color: #b99be9;
  background: #f3edff;
  outline: 0;
  transform: translateY(-1px);
}

.pm-dialog .pm-date-popover > footer {
  min-height: 40px;
  height: 40px;
  padding-top: 9px;
  box-sizing: border-box;
  flex-basis: 40px;
  border-top: 1px solid #eee9f7;
}

.pm-date-popover footer button:last-child {
  border-color: #c4abef;
  background: var(--pm-purple);
  color: #fff;
}

.pm-date-weekdays,
.pm-date-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.pm-date-weekdays span {
  color: #7c85a3;
  font-size: 10px;
  font-weight: 750;
  line-height: 24px;
  text-align: center;
}

.pm-date-day,
.pm-date-empty {
  min-height: 31px;
}

.pm-date-day {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #26315e;
  padding: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--pm-motion-fast) ease, background var(--pm-motion-fast) ease, transform var(--pm-motion-fast) var(--pm-motion-ease);
}

.pm-date-day:hover,
.pm-date-day:focus-visible {
  background: #f1eaff;
  color: var(--pm-purple-dark);
  outline: 0;
  transform: scale(1.04);
}

.pm-date-day.is-today {
  box-shadow: inset 0 0 0 1px #b99be9;
  color: var(--pm-purple);
}

.pm-date-day.is-selected {
  background: var(--pm-purple);
  color: #fff;
  box-shadow: 0 4px 10px rgba(109, 54, 212, 0.22);
}

.pm-avatar-stack {
  display: flex;
  flex: 0 0 auto;
  padding-left: 4px;
}

.pm-avatar-stack .pm-avatar {
  margin-left: -4px;
  border: 2px solid #fff;
}

.pm-avatar-stack .pm-avatar:nth-child(2) {
  background: #4d65c6;
}

.pm-avatar-stack .pm-avatar:nth-child(3) {
  background: #168b85;
}

.pm-avatar-more {
  background: #e9e1f8 !important;
  color: var(--pm-purple-dark) !important;
  font-size: 9px;
}

.pm-people-picker {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.pm-people-trigger {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #d6dced;
  border-radius: 7px;
  background: #fff;
  color: #17224f;
  padding: 8px 11px;
  text-align: left;
  font: inherit;
  font-size: 11px;
  font-weight: 680;
  cursor: pointer;
}

.pm-people-trigger:hover,
.pm-people-trigger:focus-visible,
.pm-people-picker.is-open .pm-people-trigger {
  border-color: #a57be7;
  box-shadow: 0 0 0 3px rgba(109, 54, 212, 0.08);
  outline: 0;
}

.pm-people-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-people-trigger i {
  color: var(--pm-purple);
  transition: transform var(--pm-motion-fast) var(--pm-motion-ease);
}

.pm-people-picker.is-open .pm-people-trigger i {
  transform: rotate(180deg);
}

.pm-people-popover {
  position: relative;
  z-index: 6;
  min-width: 0;
  display: grid;
  gap: 7px;
  border: 1px solid #d8cff0;
  border-radius: 8px;
  background: #fcfbff;
  padding: 8px;
  box-shadow: 0 12px 28px rgba(40, 23, 82, 0.10);
}

.pm-people-popover[hidden] {
  display: none !important;
}

.pm-people-popover > label {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dce1ee;
  border-radius: 7px;
  background: #fff;
  color: #6d36d4;
  padding: 0 10px;
}

.pm-people-popover > label input {
  min-height: 36px;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.pm-people-options {
  max-height: 190px;
  display: grid;
  gap: 3px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.pm-people-option {
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #25305c;
  padding: 5px 8px;
  text-align: left;
  cursor: pointer;
}

.pm-people-option:hover,
.pm-people-option:focus-visible {
  background: #f2edfb;
  outline: 0;
}

.pm-people-option[aria-selected="true"] {
  background: #ebe3fa;
  color: var(--pm-purple-dark);
}

.pm-people-option-avatar,
.pm-people-chip-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pm-purple);
  color: #fff;
  font-weight: 800;
}

.pm-people-option-avatar {
  width: 26px;
  height: 26px;
  font-size: 9px;
}

.pm-people-option > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.pm-people-option strong,
.pm-people-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-people-option strong {
  font-size: 10px;
}

.pm-people-option small {
  color: #77809d;
  font-size: 8px;
  font-weight: 600;
}

.pm-people-option > i {
  color: var(--pm-purple);
  opacity: 0;
}

.pm-people-option[aria-selected="true"] > i {
  opacity: 1;
}

.pm-people-empty {
  margin: 0;
  color: #78819e;
  padding: 14px 8px;
  text-align: center;
  font-size: 10px;
}

.pm-people-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pm-people-chip {
  min-width: 0;
  min-height: 30px;
  display: inline-grid;
  grid-template-columns: 22px minmax(0, auto) 20px;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  border: 1px solid #ddd2f2;
  border-radius: 999px;
  background: #f7f3ff;
  color: #4d2a92;
  padding: 3px 4px 3px 5px;
  font-size: 9px;
  font-weight: 720;
}

.pm-people-chip-avatar {
  width: 22px;
  height: 22px;
  font-size: 8px;
}

.pm-people-chip > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-people-chip button {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6f5a9f;
  padding: 0;
  cursor: pointer;
}

.pm-people-chip button:hover,
.pm-people-chip button:focus-visible {
  background: #e7dcfa;
  color: var(--pm-purple-dark);
  outline: 0;
}

.pm-check {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #303b67;
  font-size: 10px;
  font-weight: 650;
}

.pm-check input {
  accent-color: var(--pm-purple);
}

.pm-task-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pm-task-checks .pm-check {
  min-width: 0;
  min-height: 44px;
  border: 1px solid #dfe3ee;
  border-radius: 8px;
  background: #fbfcff;
  padding: 10px 12px;
}

.pm-task-checks .pm-check:has(input:checked) {
  border-color: #b99ae9;
  background: #f7f2ff;
}

.pm-task-checks .pm-check span {
  min-width: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.pm-task-checks .pm-check input {
  flex: 0 0 auto;
}

.pm-context-dialog {
  inset-block-start: 0;
  inset-block-end: auto;
  width: min(600px, calc(100vw - 32px));
  height: min(836px, calc(100vh - 156px));
  margin-block: 12.3vh 0;
}

.pm-context-dialog > form {
  height: 100%;
  max-height: min(860px, calc(100vh - 36px));
  overflow-y: auto;
}

.pm-context-project {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 28px 0;
  border: 1px solid #d4c4f5;
  border-radius: 7px;
  background: #fbf9ff;
  color: #1f2a58;
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.pm-context-project i {
  flex: 0 0 auto;
  color: var(--pm-purple);
}

.pm-context-project [data-pm-context-project] {
  min-width: 0;
}

.pm-dropzone {
  min-height: 205px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  margin: 16px 28px 0;
  border: 1.5px dashed #9568df;
  border-radius: 8px;
  background: #fbf9ff;
  color: #1b2655;
  padding: 24px;
  text-align: center;
  cursor: pointer;
}

.pm-dropzone.is-dragover {
  border-color: #5a25ba;
  background: #f4ecff;
}

.pm-dropzone > i {
  color: var(--pm-purple);
  font-size: 42px;
}

.pm-dropzone strong {
  font-size: 14px;
  font-weight: 800;
}

.pm-dropzone span {
  color: #647092;
  font-size: 10px;
}

.pm-selected-files {
  display: grid;
  gap: 7px;
  margin: 12px 28px 0;
}

.pm-selected-files[hidden] {
  display: none;
}

.pm-selected-file {
  min-height: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid #e0e4ee;
  border-radius: 6px;
  background: #fff;
  color: #303b65;
  padding: 6px 9px;
  font-size: 9px;
}

.pm-selected-file--stored label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--pm-purple);
  cursor: pointer;
}

.pm-selected-file--stored label input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--pm-purple);
}

.pm-selected-file--stored a {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: #45517b;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-selected-file--stored a:hover {
  color: var(--pm-purple);
  text-decoration: underline;
}

.pm-selected-file i {
  color: var(--pm-purple);
}

.pm-selected-file button {
  border: 0;
  background: transparent;
  color: #9a3150;
  cursor: pointer;
}

.pm-context-source-actions {
  display: flex;
  gap: 10px;
  margin: 12px 28px 0;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8eaf2;
}

.pm-context-dialog .pm-field {
  margin: 16px 28px 0;
}

.pm-context-dialog .pm-form-grid {
  overflow: visible;
  padding-top: 16px;
  padding-bottom: 12px;
}

.pm-context-dialog .pm-form-grid .pm-field {
  margin: 0;
}

.pm-context-message {
  min-height: 18px;
  margin: 0 28px 10px;
  color: #667092;
  font-size: 9px;
}

.pm-context-message.is-error {
  color: #b4232d;
}

.pm-context-message.is-success {
  color: #12703a;
}

.pm-context-trust {
  margin-right: auto;
  color: #737c9b;
  font-size: 9px;
}

.pm-context-trust i {
  color: var(--pm-purple);
}

.pm-proposal-content {
  min-height: 160px;
  display: grid;
  align-content: start;
  gap: 16px;
  overflow-y: auto;
  padding: 20px 28px;
}

.pm-proposal-dialog .pm-dialog-kicker {
  font-size: 11px;
  line-height: 1.35;
}

.pm-proposal-dialog h2 {
  font-size: 22px;
  line-height: 1.25;
}

.pm-proposal-dialog header p {
  font-size: 12px;
  line-height: 1.5;
}

.pm-proposal-summary {
  border: 1px solid #ded2f3;
  border-radius: 7px;
  background: #faf7ff;
  color: #3e4971;
  padding: 14px 15px;
  font-size: 13px;
  font-weight: 560;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.pm-proposal-section {
  display: grid;
  gap: 8px;
}

.pm-proposal-section h3 {
  margin: 0;
  color: #1c2755;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.pm-proposal-item {
  display: grid;
  gap: 5px;
  border: 1px solid #e2e6ef;
  border-radius: 6px;
  background: #fff;
  padding: 12px 13px;
  color: #596385;
  font-size: 12px;
  font-weight: 540;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.pm-proposal-item strong {
  color: #202b58;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.pm-proposal-item small {
  color: #767f9d;
  font-size: 11px;
  line-height: 1.45;
}

/* Align the project workspace with the readable application type scale. */
.project-management-panel,
.project-management-panel button,
.project-management-panel input,
.project-management-panel textarea,
.project-management-panel select {
  font-family: inherit;
  font-style: normal;
}

.project-management-panel {
  font-size: 13px;
  font-weight: 600;
}

.pm-gantt-task small,
.pm-activity-item small,
.pm-field > span,
.pm-people-option small,
.pm-context-helper,
.pm-context-trust,
.pm-proposal-dialog header p {
  font-size: 11px;
  font-weight: 600;
}

.pm-ai-suggestions strong,
.pm-ai-message-author,
.pm-ai-thinking-copy strong,
.pm-ai-pending-proposal strong {
  font-size: 13px;
  font-weight: 750;
}

.pm-people-chip,
.pm-people-chip > span:nth-child(2),
.pm-avatar-more,
.pm-task-group-empty,
.pm-dialog-kicker {
  font-size: 11px;
}

@media (max-width: 1480px) {
  .pm-header {
    grid-template-columns: minmax(310px, 1fr) auto;
    grid-template-areas:
      "title close"
      "navigation navigation"
      "period period"
      "summary summary";
    gap: 18px;
  }

  .pm-header-project-navigation {
    justify-content: flex-start;
  }

  .pm-header-period {
    justify-content: flex-start;
    padding-left: 0;
  }

  .pm-header-summary {
    justify-items: start;
    transform: none;
  }

  .pm-header-close {
    transform: none;
  }

  .pm-header {
    min-height: 244px;
  }

  .pm-metric {
    padding: 8px 12px;
    margin-right: 0;
  }
}

@media (max-width: 1700px) {
  .pm-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .pm-toolbar-filters {
    margin-left: 0;
  }

  .pm-toolbar-actions {
    justify-self: end;
  }
}

@media (max-width: 1360px) {
  .pm-toolbar {
    min-height: 132px;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 10px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .pm-toolbar-filters {
    justify-content: flex-start;
    flex-wrap: nowrap;
    margin-left: 0;
  }

  .pm-search-control,
  .pm-period-control {
    width: auto;
  }

  .pm-toolbar-actions--inline .pm-button {
    padding-inline: 10px;
  }
}

@media (max-width: 1180px) {
  .pm-workspace {
    grid-template-columns: 205px minmax(0, 1fr) 300px;
  }

  .pm-workspace.is-ai-overlay {
    grid-template-columns: 205px minmax(0, 1fr);
  }

  .pm-workspace.is-task-sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .pm-workspace.is-task-sidebar-collapsed.is-ai-overlay {
    grid-template-columns: minmax(0, 1fr);
  }

  .pm-title-group p {
    display: none;
  }

}

@media (max-width: 920px) {
  .applications-workspace.is-project-management-open {
    overflow: auto !important;
  }

  .project-management-panel {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  .pm-shell {
    height: auto;
    min-height: 100%;
  }

  .pm-project-view-drawer {
    inset-inline: 12px;
    width: auto;
  }

  .pm-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "navigation"
      "summary"
      "close";
    min-height: 0;
    padding: 18px;
  }

  .pm-header-actions,
  .pm-metrics,
  .pm-header-summary {
    justify-content: flex-start;
  }

  .pm-header-summary {
    justify-items: start;
  }

  .pm-header-actions {
    flex-wrap: wrap;
  }

  .pm-metric {
    min-width: 0;
    flex: 0 1 auto;
    padding: 10px 14px;
    margin-right: 0;
  }

  .pm-metric > i {
    width: 24px;
    height: 24px;
    font-size: 20px;
  }

  .pm-toolbar {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 16px 18px;
  }

  .pm-header-project-navigation {
    width: 100%;
    flex-wrap: wrap;
    gap: 12px;
  }

  .pm-header-project-navigation .pm-project-control {
    width: calc(100% - 35px);
  }

  .pm-header-project-navigation .pm-project-picker-cluster {
    width: 100%;
  }

  .pm-header-project-navigation .pm-view-tabs {
    width: auto;
    align-self: center;
  }

  .pm-toolbar-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 12px;
  }

  .pm-search-control,
  .pm-assignee-control,
  .pm-toolbar-menu,
  .pm-toolbar-menu-trigger {
    display: flex;
    width: 100%;
  }

  .pm-period-control {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .pm-period-control > .flowmo-select-menu {
    max-width: 180px;
  }

  .pm-period-control [data-pm-period-range] {
    flex: 1 1 auto;
  }

  .pm-toolbar-spacer {
    display: none;
  }

  .pm-toolbar-popover,
  .pm-customize-popover {
    right: 0;
    left: auto;
    max-width: calc(100vw - 24px);
    transform: none;
    animation-name: pm-toolbar-customize-in;
  }

  .pm-project-edit-button,
  .pm-close-button,
  .pm-task-sidebar-header button,
  .pm-task-groups header button,
  .pm-column-header button,
  .pm-task-menu,
  .pm-ai-window-actions button {
    width: 44px;
    height: 44px;
  }

  .pm-task-sidebar-nav button,
  .pm-task-quick-access [data-pm-quick-list] button,
  .pm-task-group-item,
  .pm-task-new-group {
    min-height: 44px;
  }

  .pm-task-group-edit,
  .pm-task-group-add-task {
    width: 40px;
    height: 40px;
  }

  .pm-ai-composer button {
    width: 44px;
    height: 44px;
  }

  .pm-workspace {
    grid-template-columns: 1fr;
    overflow: visible;
    padding: 12px;
  }

  .pm-main {
    order: 1;
  }

  .pm-task-sidebar {
    order: 2;
  }

  .pm-ai-panel {
    order: 3;
  }

  .pm-task-sidebar {
    min-height: 360px;
  }

  .pm-main {
    min-height: 620px;
  }

  .pm-kanban {
    grid-template-columns: repeat(4, minmax(245px, 1fr));
  }

  .pm-ai-panel {
    min-height: 560px;
  }
}

@media (max-width: 820px) {
  .app-shell.project-management-central-lock,
  .app-shell.project-management-central-lock.sidebar-collapsed,
  .app-shell.project-management-central-lock.view-inbox,
  .app-shell.project-management-central-lock.view-inbox.sidebar-collapsed {
    width: 100vw;
    min-height: 100vh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "project-management";
  }

  .app-shell.project-management-central-lock > .sidebar {
    display: none !important;
  }

  .app-shell.project-management-central-lock > .assistant-panel.workspace-slot[data-section="applications"],
  .app-shell.project-management-central-lock > .discovery-panel.workspace-slot[data-section="applications"] {
    display: grid !important;
    grid-area: project-management;
    min-height: 100vh;
  }

  .app-shell.project-management-central-lock > .assistant-panel.workspace-slot:not([data-section="applications"]),
  .app-shell.project-management-central-lock > .discovery-panel.workspace-slot:not([data-section="applications"]) {
    display: none !important;
  }
}

@media (max-width: 620px) {
  .pm-ai-panel.is-floating {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
    min-width: 0;
    max-width: calc(100vw - 24px);
    height: min(720px, calc(100vh - 24px));
    min-height: 360px;
    max-height: calc(100vh - 24px);
    resize: none;
  }

  .pm-ai-panel.is-minimized {
    right: 12px;
    bottom: 12px;
    width: 210px;
    min-width: 210px;
    max-width: 210px;
  }

  .pm-title-group {
    align-items: flex-start;
  }

  .pm-header {
    gap: 12px;
    padding: 14px;
  }

  .pm-title-line h2 {
    white-space: normal;
  }

  .pm-app-mark {
    width: 40px;
    height: 40px;
  }

  .pm-header-actions .pm-button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  .pm-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) 44px;
    gap: 8px;
  }

  .pm-close-button {
    width: 44px;
    height: 44px;
    margin-left: 0;
  }

  .pm-metrics {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .pm-metric {
    min-width: 0;
    min-height: 58px;
    gap: 7px;
    margin: 0;
    padding: 8px;
  }

  .pm-metric--blocked,
  .pm-metric--validation {
    min-width: 0;
  }

  .pm-metric > i {
    width: 22px;
    height: 22px;
    font-size: 18px;
  }

  .pm-metric strong {
    font-size: 16px;
  }

  .pm-metric small {
    font-size: 10px;
    white-space: normal;
  }

  .pm-project-control {
    width: calc(100% - 35px);
  }

  .pm-search-control,
  .pm-assignee-control {
    width: 100%;
  }

  .pm-toolbar-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .pm-toolbar-popover,
  .pm-customize-popover {
    right: auto;
    left: 0;
    width: min(318px, calc(100vw - 36px));
    transform: none;
  }

  .pm-toolbar-popover {
    animation-name: pm-toolbar-customize-in;
  }

  .pm-header-project-navigation .pm-view-tabs {
    width: 100%;
    justify-content: stretch;
  }

  .pm-header-project-navigation .pm-view-tabs button {
    min-width: 0;
    flex: 1 1 30%;
  }

  .pm-toolbar-actions {
    justify-self: start;
    flex-wrap: wrap;
  }

  .pm-cells-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .pm-cells-toolbar small {
    white-space: normal;
  }

  .pm-cells-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .pm-cells-toolbar-controls {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .pm-mindsheets-tools {
    margin-left: auto;
    order: 2;
  }

  .pm-cells-actions {
    order: 1;
  }

  .pm-cells-actions > button {
    flex: 1 1 110px;
  }

  .pm-cells-zoom {
    margin-left: auto;
  }

  .pm-mindzone-tables {
    grid-template-columns: minmax(0, 1fr);
    padding: 9px;
  }

  .pm-mindzone-table-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .pm-mindzone-table-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .pm-period-control {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .pm-period-control > .flowmo-select-menu {
    max-width: 150px;
  }

  .pm-workspace {
    gap: 12px;
    padding: 10px;
  }

  .pm-main {
    height: min(68dvh, 620px);
    min-height: min(68dvh, 620px);
  }

  .pm-kanban {
    grid-template-columns: repeat(4, minmax(280px, 320px));
    scroll-snap-type: x proximity;
  }

  .pm-column {
    min-width: 280px;
    scroll-snap-align: start;
  }

  .pm-form-grid {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .pm-field--full {
    grid-column: 1;
  }

  .pm-task-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pm-dialog header,
  .pm-dialog footer {
    padding-right: 14px;
    padding-left: 14px;
  }

  .pm-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .pm-dialog > form,
  .pm-task-dialog > form {
    max-height: calc(100dvh - 16px);
  }

  .pm-dialog footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .pm-dialog footer .pm-button {
    width: 100%;
    min-height: 44px;
  }

  .pm-context-project,
  .pm-dropzone,
  .pm-selected-files,
  .pm-context-source-actions,
  .pm-context-dialog .pm-field,
  .pm-context-message {
    margin-right: 18px;
    margin-left: 18px;
  }

  .pm-context-source-actions {
    flex-wrap: wrap;
  }

  .pm-context-dialog .pm-form-grid {
    padding-right: 18px;
    padding-left: 18px;
  }

  .app-shell.project-management-central-lock .pm-dialog {
    left: 0;
  }

  .pm-context-dialog {
    inset-block-end: 0;
    height: auto;
    max-height: calc(100dvh - 16px);
    margin: auto;
  }
}

@media (max-width: 720px) {
  html[data-flowmo-mobile-navigation="enabled"] .app-shell.project-management-central-lock,
  html[data-flowmo-mobile-navigation="enabled"] .app-shell.project-management-central-lock.sidebar-collapsed,
  html[data-flowmo-mobile-navigation="enabled"] .app-shell.project-management-central-lock.view-inbox,
  html[data-flowmo-mobile-navigation="enabled"] .app-shell.project-management-central-lock.view-inbox.sidebar-collapsed,
  .app-shell.project-management-central-lock,
  .app-shell.project-management-central-lock.sidebar-collapsed,
  .app-shell.project-management-central-lock.view-inbox,
  .app-shell.project-management-central-lock.view-inbox.sidebar-collapsed {
    width: 100vw !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: "project-management" !important;
  }

  html[data-flowmo-mobile-navigation="enabled"] .app-shell.project-management-central-lock > .assistant-panel.workspace-slot[data-section="applications"],
  html[data-flowmo-mobile-navigation="enabled"] .app-shell.project-management-central-lock > .discovery-panel.workspace-slot[data-section="applications"],
  .app-shell.project-management-central-lock > .assistant-panel.workspace-slot[data-section="applications"],
  .app-shell.project-management-central-lock > .discovery-panel.workspace-slot[data-section="applications"] {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-area: project-management !important;
  }
}

@media (max-width: 420px) {
  .pm-title-group {
    gap: 10px;
  }

  .pm-title-line h2 {
    font-size: 21px;
  }

  .pm-app-mark {
    width: 38px;
    height: 38px;
  }

  .pm-header-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
  }

  .pm-header-actions .pm-button {
    padding: 0 9px;
    font-size: 11px;
  }

  .pm-period-control {
    gap: 7px;
    padding-right: 9px;
    padding-left: 9px;
  }

  .pm-period-control [data-pm-period-range] {
    min-width: 0;
    padding-left: 8px;
    font-size: 10px;
  }

  .pm-toolbar-popover,
  .pm-customize-popover {
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
  }

  .pm-task-checks {
    grid-template-columns: minmax(0, 1fr);
  }

  .pm-form-grid {
    gap: 12px;
    padding: 14px;
  }

  .pm-date-popover {
    width: calc(100vw - 16px);
  }
}

@media (max-width: 720px) {
  .project-management-panel {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .project-management-panel .pm-mobile-only {
    display: initial;
  }

  .project-management-panel .pm-desktop-only,
  .project-management-panel .pm-header-actions,
  .project-management-panel .pm-toolbar {
    display: none !important;
  }

  .project-management-panel .pm-shell {
    height: 100dvh;
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
    background: #fbfaff;
  }

  .project-management-panel .pm-header {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas:
      "title close"
      "navigation navigation"
      "period period"
      "summary summary";
    gap: 12px;
    padding: max(12px, env(safe-area-inset-top)) 12px 12px;
    background: rgba(255, 255, 255, 0.97);
  }

  .project-management-panel .pm-header-project-navigation {
    grid-area: navigation;
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .project-management-panel .pm-header-project-navigation .pm-project-picker-cluster,
  .project-management-panel .pm-header-project-navigation .pm-project-control {
    width: 100%;
    min-width: 0;
  }

  .project-management-panel .pm-header-period {
    grid-area: period;
    width: 100%;
    min-width: 0;
    justify-content: stretch;
    padding-left: 0;
  }

  .project-management-panel .pm-header-period .pm-period-control {
    width: 100%;
    min-width: 0;
  }

  .project-management-panel .pm-header-summary {
    grid-area: summary;
    width: 100%;
    min-width: 0;
  }

  .project-management-panel .pm-header-close {
    grid-area: close;
    align-self: start;
    justify-self: end;
    transform: none;
  }

  .project-management-panel .pm-title-group {
    grid-area: title;
    min-width: 0;
    align-items: center;
    gap: 11px;
  }

  .project-management-panel .pm-title-group p {
    display: none;
  }

  .project-management-panel .pm-eyebrow {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    line-height: 1;
  }

  .project-management-panel .pm-app-mark {
    width: 44px;
    height: 44px;
    border: 2px solid #7c45df;
    border-radius: 8px;
    background: radial-gradient(circle at 50% 32%, rgba(138, 92, 235, 0.16), rgba(255, 255, 255, 0.98) 72%);
    box-shadow: none;
  }

  .project-management-panel .pm-app-mark img {
    display: block;
  }

  .project-management-panel .pm-app-mark > i {
    display: none;
  }

  /* "Project Management" no cabía y se cortaba a media letra: ni entero ni con
     puntos suspensivos, solo partido. Se achica hasta que cabe, y si aun así
     no cabe —otro nombre más largo— termina en puntos, que es lo que se lee
     como "hay más" en vez de como un fallo. */
  .project-management-panel .pm-title-line h2 {
    flex-basis: 0;
    overflow: hidden;
    font-size: clamp(17px, 5.4vw, 24px);
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pm-mobile-header-controls {
    grid-area: controls;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
  }

  .pm-mobile-header-back,
  .pm-mobile-header-menu {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid #d9ddec;
    border-radius: 8px;
    background: #fff;
    color: #28345e;
    font-size: 20px;
    touch-action: manipulation;
  }

  .pm-mobile-header-back:active,
  .pm-mobile-header-menu:active {
    background: #f3effd;
    color: var(--pm-purple);
  }

  .pm-mobile-project-control {
    position: relative;
    width: auto;
    min-width: 0;
    max-width: 260px;
    flex: 1 1 auto;
    height: 40px;
    display: flex;
    align-items: center;
    border: 1px solid #d9ddec;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
  }

  .pm-mobile-project-control select {
    width: 100%;
    height: 100%;
    appearance: none;
    border: 0;
    outline: 0;
    background: transparent;
    color: #131d49;
    padding: 0 30px 0 11px;
    font: inherit;
    font-size: 12px;
    font-weight: 780;
    text-overflow: ellipsis;
  }

  .pm-mobile-project-control > i {
    position: absolute;
    right: 10px;
    color: #5b668c;
    pointer-events: none;
  }

  .pm-mobile-header-menu {
    margin-left: auto;
  }

  .project-management-panel .pm-metrics {
    grid-area: metrics;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    border-top: 1px solid #e5e8f1;
    padding-top: 12px;
  }

  .project-management-panel .pm-metric,
  .project-management-panel .pm-metric--blocked,
  .project-management-panel .pm-metric--validation {
    min-width: 0;
    min-height: 40px;
    display: flex;
    justify-content: center;
    gap: 7px;
    border-radius: 0;
    background: transparent;
    padding: 4px 0;
  }

  .project-management-panel .pm-metric + .pm-metric {
    border-left: 0;
  }

  .project-management-panel .pm-metric > i {
    width: 20px;
    height: 20px;
    font-size: 18px;
  }

  .project-management-panel .pm-metric span {
    display: flex;
    align-items: baseline;
    gap: 4px;
  }

  .project-management-panel .pm-metric strong {
    font-size: 15px;
  }

  .project-management-panel .pm-metric small {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pm-mobile-stage-tabs {
    position: relative;
    z-index: 30;
    min-width: 0;
    display: grid;
    grid-template-columns: 58px repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid #dedfee;
    background: #fff;
    padding: 0;
  }

  .pm-mobile-task-menu-anchor {
    position: relative;
    min-width: 0;
    min-height: 60px;
    display: grid;
    align-items: stretch;
    overflow: visible;
  }

  .pm-mobile-stage-tabs > button {
    position: relative;
    min-width: 0;
    height: 60px;
    display: grid;
    place-content: center;
    gap: 3px;
    border: 0;
    background: transparent;
    color: #17214b;
    padding: 6px 3px;
    font: inherit;
    font-size: 10px;
    font-weight: 760;
  }

  .pm-mobile-stage-tabs > button strong {
    color: #667092;
    font-size: 12px;
    font-weight: 720;
  }

  .pm-mobile-stage-tabs > button::after {
    position: absolute;
    right: 8px;
    bottom: 0;
    left: 8px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
    content: "";
  }

  .pm-mobile-stage-tabs > button.is-active,
  .pm-mobile-stage-tabs > button.is-active strong {
    color: var(--pm-purple);
  }

  .pm-mobile-stage-tabs > button.is-active::after {
    background: var(--pm-purple);
  }

  .project-management-panel .pm-workspace,
  .project-management-panel .pm-workspace.is-ai-overlay,
  .project-management-panel .pm-workspace.is-task-sidebar-collapsed,
  .project-management-panel .pm-workspace.is-task-sidebar-collapsed.is-ai-overlay {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    padding: 0;
    background: #fbfaff;
  }

  .pm-mobile-task-menu-trigger {
    min-height: 60px;
    display: grid;
    place-items: center;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #596485;
    padding: 6px;
    cursor: pointer;
    font: inherit;
    font-size: 10px;
    font-weight: 690;
    touch-action: manipulation;
  }

  .pm-mobile-task-menu-trigger > i:first-child {
    font-size: 20px;
  }

  .pm-mobile-task-menu-trigger > span,
  .pm-mobile-task-menu-trigger > i:last-child {
    display: none;
  }

  .pm-mobile-task-menu-trigger > i:last-child {
    color: #8a6ace;
    font-size: 10px;
    transition: transform var(--pm-motion-fast) var(--pm-motion-ease);
  }

  .pm-mobile-task-menu-trigger[aria-expanded="true"] {
    border: 1px solid #d9cafa;
    border-radius: 8px;
    background: #f3effd;
    color: var(--pm-purple);
  }

  .pm-mobile-task-menu-trigger[aria-expanded="true"] > i:last-child {
    transform: rotate(180deg);
  }

  .pm-mobile-task-menu {
    position: absolute;
    z-index: 120;
    top: calc(100% + 12px);
    left: 12px;
    width: min(280px, calc(100vw - 24px));
    display: grid;
    gap: 12px;
    border: 1px solid #ded4f4;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 34px rgba(45, 26, 102, 0.18);
    padding: 12px;
    /* Con los formatos de vista dentro ya no cabe en pantallas cortas: se le
       pone tope y scroll propio para que la última entrada siga alcanzable. */
    max-height: min(66vh, calc(100vh - 190px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  @supports (height: 100dvh) {
    .pm-mobile-task-menu {
      max-height: min(66dvh, calc(100dvh - 190px));
    }
  }

  .pm-mobile-task-menu[hidden] {
    display: none;
  }

  .pm-mobile-task-menu button {
    min-height: 44px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #3f4c73;
    padding: 8px 10px;
    text-align: left;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
  }

  .pm-mobile-task-menu button i {
    color: #7652cc;
    font-size: 16px;
  }

  .pm-mobile-task-menu button strong {
    color: #747e9d;
    font-size: 10px;
  }

  .pm-mobile-task-menu button.is-active,
  .pm-mobile-task-menu button[aria-pressed="true"] {
    border-color: #d9cafa;
    background: #f3effd;
    color: var(--pm-purple);
  }

  .project-management-panel .pm-main {
    grid-column: 1;
    order: initial;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding: 12px 10px 10px;
  }

  .project-management-panel .pm-kanban {
    width: 100%;
    /* Se le reserva su franja a la burbuja de Flowmind: sin esto flota encima
       de la última tarjeta y, con pocas tareas, no hay scroll que la libere. */
    height: calc(100% - 62px);
    display: block;
    overflow: hidden;
    padding: 0;
  }

  .project-management-panel .pm-column {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    display: none;
    border-radius: 8px;
    background: #fff;
  }

  .project-management-panel[data-pm-mobile-stage="backlog"] .pm-column[data-pm-column="backlog"],
  .project-management-panel[data-pm-mobile-stage="in_progress"] .pm-column[data-pm-column="in_progress"],
  .project-management-panel[data-pm-mobile-stage="validation"] .pm-column[data-pm-column="validation"],
  .project-management-panel[data-pm-mobile-stage="done"] .pm-column[data-pm-column="done"] {
    display: grid;
  }

  .project-management-panel .pm-column-header {
    min-height: 56px;
    padding: 0 10px 0 13px;
  }

  .project-management-panel .pm-column-header h3 {
    font-size: 17px;
  }

  .project-management-panel .pm-column-header span {
    display: none;
  }

  .project-management-panel .pm-column-header button {
    width: 42px;
    height: 42px;
    border-color: #d8dcee;
    color: var(--pm-purple);
  }

  .project-management-panel .pm-column-list {
    min-height: 0;
    overflow-y: auto;
    /* Hueco al final para que la burbuja de Flowmind no se quede encima de la
       última tarjeta: se puede seguir bajando hasta dejarla libre. */
    padding: 9px 9px 78px;
  }

  .project-management-panel .pm-empty-column {
    min-height: min(54dvh, 430px);
    place-content: center;
    justify-items: center;
    gap: 9px;
    color: #667194;
    padding: 24px;
    font-size: 12px;
    line-height: 1.55;
  }

  .project-management-panel .pm-empty-column > i {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    border-radius: 50%;
    background: #f1ecfc;
    color: var(--pm-purple);
    font-size: 27px;
  }

  .project-management-panel .pm-empty-column > strong {
    display: block;
    color: #141f4a;
    font-size: 15px;
  }

  .project-management-panel .pm-empty-column > span {
    max-width: 230px;
  }

  .project-management-panel .pm-task-card {
    min-height: 0;
    padding: 13px;
  }

  .pm-mobile-scrim {
    position: fixed;
    inset: 0;
    /* Justo debajo de los cajones (170) y encima del resto, para que tocar
       fuera cierre sin que la cabecera se cuele por delante. */
    z-index: 169;
    display: block;
    border: 0;
    background: rgba(12, 18, 43, 0.62);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .pm-mobile-scrim[hidden] {
    display: none !important;
  }

  .project-management-panel .pm-task-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    /* Mismo nivel que el cajón de Flowmind: ambos van sobre la cabecera. */
    z-index: 170;
    width: min(88vw, 420px);
    height: 100dvh;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto auto auto auto auto auto;
    order: initial;
    overflow-y: auto;
    border: 0;
    border-radius: 0 16px 16px 0;
    background: #fff;
    box-shadow: 22px 0 55px rgba(12, 18, 43, 0.2);
    transform: translateX(-105%);
    transition: transform 240ms var(--pm-motion-ease);
  }

  .project-management-panel .pm-workspace.is-mobile-task-drawer-open .pm-task-sidebar {
    transform: translateX(0);
  }

  .project-management-panel .pm-task-sidebar-header {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 64px;
    background: #fff;
    padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  }

  .project-management-panel .pm-task-sidebar-header > span:first-child {
    color: #131d47;
    font-size: 18px;
  }

  .project-management-panel .pm-task-sidebar-header > span:first-child i {
    font-size: 23px;
  }

  .project-management-panel .pm-task-sidebar-header strong {
    font-size: 18px;
  }

  .pm-task-sidebar-actions {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .project-management-panel .pm-task-sidebar-actions button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid #dce0ed;
    border-radius: 8px;
    color: #374166;
  }

  .pm-mobile-task-search {
    position: relative;
    margin: 12px 16px 4px;
  }

  .pm-mobile-task-search i {
    position: absolute;
    top: 50%;
    left: 13px;
    color: #687291;
    transform: translateY(-50%);
  }

  .pm-mobile-task-search input {
    width: 100%;
    height: 44px;
    border: 1px solid #dce0ed;
    border-radius: 8px;
    outline: 0;
    padding: 0 12px 0 39px;
    color: #17214e;
    font: inherit;
    font-size: 12px;
  }

  .project-management-panel .pm-task-sidebar-nav {
    display: none;
  }

  .project-management-panel .pm-task-sidebar-nav button {
    min-height: 68px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 3px;
    border-radius: 0;
    padding: 7px 3px;
    text-align: center;
  }

  .project-management-panel .pm-task-sidebar-nav button i {
    font-size: 22px;
  }

  .project-management-panel .pm-task-sidebar-nav button strong {
    font-size: 10px;
  }

  .project-management-panel .pm-task-sidebar-nav button.is-active {
    border-bottom: 3px solid var(--pm-purple);
    background: transparent;
  }

  .pm-mobile-projects,
  .pm-mobile-recent {
    display: grid;
    gap: 7px;
    padding: 14px 16px 4px;
  }

  .pm-mobile-projects h3,
  .pm-mobile-recent .pm-task-section-toggle {
    margin: 0;
    border-bottom: 1px solid #e3e6ef;
    padding: 0 4px 10px;
    color: #121d49;
    font-size: 14px;
  }

  .pm-mobile-projects > div,
  .pm-mobile-recent [data-pm-mobile-recent-content] {
    display: grid;
    gap: 5px;
  }

  .pm-mobile-recent [data-pm-mobile-recent-content][hidden] {
    display: none !important;
  }

  .pm-mobile-projects button,
  .pm-mobile-recent [data-pm-mobile-recent-tasks] > button {
    width: 100%;
    min-height: 55px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #263158;
    padding: 8px 10px;
    text-align: left;
  }

  .pm-mobile-projects button.is-active {
    border-color: #d9cafa;
    background: #f5f1fd;
    color: #20134e;
  }

  .pm-mobile-projects button > i,
  .pm-mobile-recent [data-pm-mobile-recent-tasks] > button > i {
    color: #657093;
    font-size: 20px;
  }

  .pm-mobile-projects button > span,
  .pm-mobile-recent [data-pm-mobile-recent-tasks] > button > span {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .pm-mobile-projects button strong,
  .pm-mobile-recent [data-pm-mobile-recent-tasks] > button strong,
  .pm-mobile-projects button small,
  .pm-mobile-recent [data-pm-mobile-recent-tasks] > button small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pm-mobile-projects button strong,
  .pm-mobile-recent [data-pm-mobile-recent-tasks] > button strong {
    font-size: 12px;
  }

  .pm-mobile-projects button small,
  .pm-mobile-recent [data-pm-mobile-recent-tasks] > button small {
    color: #6c7696;
    font-size: 10px;
  }

  .pm-mobile-projects button b {
    color: #626d8d;
    font-size: 11px;
  }

  .pm-mobile-recent-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #8b78be;
  }

  .pm-mobile-recent-dot[data-priority="critical"],
  .pm-mobile-recent-dot[data-priority="high"] {
    background: #ff625b;
  }

  .project-management-panel .pm-task-quick-access,
  .project-management-panel .pm-task-groups {
    margin: 4px 16px 0;
  }

  .project-management-panel .pm-task-new-group {
    min-height: 44px;
    border: 1px solid #dedfed;
    margin: 8px 0 14px;
    justify-content: center;
  }

  .project-management-panel .pm-ai-panel,
  .project-management-panel .pm-ai-panel.is-floating,
  .project-management-panel .pm-ai-panel.is-minimized {
    position: fixed;
    inset: 0 0 0 auto;
    /* Por encima de la cabecera del panel (160) o esta taparia los botones del
       propio cajon: en movil Flowmind es una hoja a pantalla completa. */
    z-index: 170;
    width: min(92vw, 440px);
    min-width: 0;
    max-width: none;
    height: 100dvh;
    min-height: 0;
    max-height: none;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    order: initial;
    overflow: hidden;
    border: 0;
    border-radius: 16px 0 0 16px;
    background: #fff;
    box-shadow: -22px 0 55px rgba(12, 18, 43, 0.2);
    resize: none;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(calc(105% + var(--pm-mobile-ai-swipe-offset, 0px)));
    transition: transform 240ms var(--pm-motion-ease);
  }

  .project-management-panel .pm-workspace.is-mobile-ai-drawer-open .pm-ai-panel,
  .project-management-panel .pm-workspace.is-mobile-ai-drawer-open .pm-ai-panel.is-floating,
  .project-management-panel .pm-workspace.is-mobile-ai-drawer-open .pm-ai-panel.is-minimized {
    transform: translateX(var(--pm-mobile-ai-swipe-offset, 0px));
  }

  /* Con el flujo a pantalla completa, el cajón y su velo van por encima de él:
     si no, el cajón se abre detrás del dibujo y desde fuera es como si el botón
     no hiciera nada. El velo también sube, o tocar fuera no cerraría. */
  .project-management-panel .pm-ai-panel.is-sobre-la-escena,
  .project-management-panel .pm-ai-panel.is-sobre-la-escena.is-floating,
  .project-management-panel .pm-ai-panel.is-sobre-la-escena.is-minimized {
    z-index: calc(var(--pm-layer-flow-scene) + 2);
  }

  .project-management-panel .pm-workspace.is-mobile-ai-drawer-open .pm-mobile-scrim {
    z-index: calc(var(--pm-layer-flow-scene) + 1);
  }

  .project-management-panel .pm-ai-panel.is-mobile-swiping {
    transition: none;
  }

  .project-management-panel .pm-ai-panel.is-minimized .pm-ai-body {
    display: grid;
  }

  .project-management-panel .pm-ai-header,
  .project-management-panel .pm-ai-panel.is-minimized .pm-ai-header {
    min-height: 68px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    cursor: default;
    touch-action: pan-y;
    background: #fff;
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  }

  .project-management-panel .pm-ai-scope-slot {
    flex: 1 0 100%;
    min-width: 0;
  }

  .project-management-panel .pm-ai-drag-indicator,
  .project-management-panel .pm-ai-window-actions [data-pm-ai-float],
  .project-management-panel .pm-ai-window-actions [data-pm-ai-minimize] {
    display: none !important;
  }

  .project-management-panel .pm-ai-window-actions [data-pm-mobile-drawer-close] {
    display: grid;
    width: 42px;
    height: 42px;
  }

  .project-management-panel .pm-ai-body {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .pm-mobile-ai-context {
    min-height: 54px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border: 1px solid #ddd8ec;
    border-radius: 9px;
    background: #fbfaff;
    padding: 9px 12px;
    color: #2c365e;
  }

  .pm-mobile-ai-context > i {
    font-size: 20px;
  }

  .pm-mobile-ai-context > span {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .pm-mobile-ai-context strong,
  .pm-mobile-ai-context small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pm-mobile-ai-context strong {
    font-size: 13px;
  }

  .pm-mobile-ai-context small {
    color: #6a7495;
    font-size: 10px;
  }

  .project-management-panel   .project-management-panel .pm-ai-suggestions {
    padding: 12px 16px;
  }

  .project-management-panel .pm-ai-suggestions button {
    min-height: 78px;
  }

  .project-management-panel .pm-ai-chat {
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto auto;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .project-management-panel .pm-ai-messages {
    overscroll-behavior: contain;
  }

  .project-management-panel .pm-ai-chat [data-pm-ai-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pm-mobile-flowmind-button {
    position: absolute;
    right: 14px;
    bottom: 16px;
    z-index: 12;
    display: grid;
    justify-items: center;
    gap: 3px;
    border: 0;
    background: transparent;
    color: #20294f;
    padding: 0;
  }

  .pm-mobile-flowmind-button > span {
    position: relative;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 2px solid var(--pm-purple);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(61, 29, 126, 0.18);
  }

  .pm-mobile-flowmind-button > span {
    transition: transform var(--pm-motion-fast) var(--pm-motion-ease), box-shadow var(--pm-motion-fast) linear;
  }

  .pm-mobile-flowmind-button:active > span {
    transform: scale(0.93);
    box-shadow: 0 6px 14px rgba(61, 29, 126, 0.22);
  }

  /* El punto solo aparece cuando de verdad hay algo que atender. Encendido
     siempre, enseña a ignorarlo. */
  .pm-mobile-flowmind-button.has-alert > span::after {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 11px;
    height: 11px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #ef4f45;
    content: "";
    animation: pm-fab-alert 1.8s var(--pm-motion-ease) infinite;
  }

  /* Con el cajón abierto la burbuja sobra. */
  .pm-workspace.is-mobile-ai-drawer-open .pm-mobile-flowmind-button {
    opacity: 0;
    pointer-events: none;
  }

  @keyframes pm-fab-alert {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 79, 69, 0.55); }
    60% { box-shadow: 0 0 0 6px rgba(239, 79, 69, 0); }
  }

  .pm-mobile-flowmind-button img {
    width: 34px;
    height: 34px;
    object-fit: contain;
  }


  body:has(.app-shell.project-management-central-lock) #mobileWebNavigation,
  html[data-flowmo-mobile-navigation="enabled"] .app-shell.project-management-central-lock ~ #mobileWebNavigation,
  html[data-flowmo-mobile-navigation="enabled"] .app-shell.project-management-central-lock [data-mobile-nav-launcher] {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .project-management-panel .pm-title-line h2 {
    font-size: 13px;
  }

  .pm-mobile-project-control {
    width: 98px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-management-panel *,
  .project-management-panel *::before,
  .project-management-panel *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Historial de chats de Flowmind ------------------------------------- */

/* Ocupa la fila que dejaron libre las acciones sugeridas, así el panel de IA no
   necesita overflow visible ni capas flotantes que se recorten. */
.pm-ai-history {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  max-height: 260px;
  margin: 0 10px 8px 0;
  padding: 10px;
  border: 1px solid var(--pm-purple-border);
  border-radius: 10px;
  background: var(--pm-panel);
  box-shadow: 0 8px 20px rgba(45, 22, 92, 0.08);
  animation: pm-history-enter 180ms var(--pm-motion-ease);
}

.pm-ai-history[hidden] {
  display: none;
}

.pm-ai-history > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--pm-navy);
  font-size: 12px;
}

.pm-ai-history > header button {
  border: 0;
  background: transparent;
  color: var(--pm-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 5px;
}

.pm-ai-history > header button:hover {
  color: var(--pm-purple);
}

.pm-ai-history-list {
  display: grid;
  gap: 3px;
  overflow-y: auto;
  min-height: 0;
}

.pm-ai-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-radius: 7px;
}

.pm-ai-history-item:hover {
  background: var(--pm-purple-soft);
}

.pm-ai-history-item.is-active {
  background: var(--pm-purple-soft);
  box-shadow: inset 2px 0 0 var(--pm-purple);
}

.pm-ai-history-item > button:first-child {
  min-width: 0;
  display: grid;
  gap: 1px;
  padding: 7px 8px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.pm-ai-history-item strong {
  font-size: 12.5px;
  color: var(--pm-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-ai-history-item small {
  font-size: 11px;
  color: var(--pm-muted);
}

.pm-ai-history-delete {
  border: 0;
  background: transparent;
  color: var(--pm-muted);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity var(--pm-motion-fast) linear, color var(--pm-motion-fast) linear;
}

.pm-ai-history-item:hover .pm-ai-history-delete,
.pm-ai-history-delete:focus-visible {
  opacity: 1;
}

.pm-ai-history-delete:hover {
  color: var(--pm-red);
}

.pm-ai-history-empty {
  padding: 12px 8px;
  margin: 0;
  color: var(--pm-muted);
  font-size: 12px;
  text-align: center;
}

@keyframes pm-history-enter {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Acciones que Flowmind aplico --------------------------------------- */

.pm-ai-actions {
  list-style: none;
  display: grid;
  gap: 3px;
  margin: 7px 0 0;
  padding: 7px;
  border: 1px solid var(--pm-purple-border);
  border-radius: 8px;
  background: var(--pm-ai-panel);
}

.pm-ai-action-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 7px;
  padding: 4px 3px;
  font-size: 12.5px;
  color: var(--pm-text);
  /* Entran escalonadas para que se lea como una secuencia de trabajo. */
  animation: pm-action-enter 320ms var(--pm-motion-ease) backwards;
  animation-delay: calc(var(--pm-action-index, 0) * 110ms);
}

.pm-ai-action-row > i:first-child {
  color: var(--pm-purple);
  font-size: 13px;
}

.pm-ai-action-row span {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.pm-ai-action-row small {
  color: var(--pm-muted);
  font-size: 11px;
}

.pm-ai-action-check {
  color: var(--pm-green);
  font-size: 13px;
  animation: pm-action-check 260ms var(--pm-motion-ease) backwards;
  animation-delay: calc(var(--pm-action-index, 0) * 110ms + 200ms);
}

.pm-ai-action-row.is-failed > i:first-child,
.pm-ai-action-row.is-failed .pm-ai-action-check {
  color: var(--pm-red);
}

@keyframes pm-action-enter {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pm-action-check {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  60% {
    opacity: 1;
    transform: scale(1.25);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Destello en la tarjeta que se acaba de tocar. */
.is-pm-flash {
  animation: pm-card-flash 1.5s var(--pm-motion-ease);
}

@keyframes pm-card-flash {
  0% {
    box-shadow: 0 0 0 0 rgba(109, 54, 212, 0.5);
  }
  35% {
    box-shadow: 0 0 0 5px rgba(109, 54, 212, 0.16);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(109, 54, 212, 0);
  }
}

/* --- Decisiones de un toque --------------------------------------------- */

.pm-ai-choices {
  margin-top: 8px;
}

.pm-ai-choices-prompt {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pm-navy);
}

.pm-ai-choices-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pm-ai-choice {
  flex: 1 1 128px;
  display: grid;
  gap: 1px;
  padding: 8px 10px;
  border: 1px solid var(--pm-purple-border);
  border-radius: 8px;
  background: var(--pm-panel);
  text-align: left;
  cursor: pointer;
  transition: transform var(--pm-motion-fast) var(--pm-motion-ease), border-color var(--pm-motion-fast) linear, background var(--pm-motion-fast) linear;
}

.pm-ai-choice:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--pm-purple);
  background: var(--pm-purple-soft);
}

.pm-ai-choice:disabled {
  opacity: 0.55;
  cursor: default;
}

.pm-ai-choice strong {
  font-size: 12.5px;
  color: var(--pm-navy);
}

.pm-ai-choice small {
  font-size: 11px;
  color: var(--pm-muted);
}

/* --- Deshacer y confirmaciones ------------------------------------------ */

.pm-ai-undo,
.pm-ai-undone {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 7px 0 0;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11.5px;
}

.pm-ai-undo {
  border: 1px solid var(--pm-line);
  background: var(--pm-panel);
  color: var(--pm-muted);
  cursor: pointer;
  transition: border-color var(--pm-motion-fast) linear, color var(--pm-motion-fast) linear;
}

.pm-ai-undo:hover:not(:disabled) {
  border-color: var(--pm-purple);
  color: var(--pm-purple);
}

.pm-ai-undo:disabled {
  opacity: 0.5;
  cursor: default;
}

.pm-ai-undone {
  border: 1px dashed var(--pm-line);
  color: var(--pm-muted);
}

.pm-ai-confirmations {
  display: grid;
  gap: 6px;
  margin: 8px 10px 0 0;
}

.pm-ai-confirmation-card {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  padding: 10px;
  border: 1px solid #f0c9a4;
  border-radius: 8px;
  background: #fff8f0;
  color: #7a4310;
  font-size: 12.5px;
  animation: pm-action-enter 240ms var(--pm-motion-ease);
}

.pm-ai-confirmation-card > i {
  color: var(--pm-amber);
}

.pm-ai-confirmation-card > div {
  grid-column: 2;
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.pm-ai-confirm-yes,
.pm-ai-confirm-no {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  cursor: pointer;
  border: 1px solid transparent;
}

.pm-ai-confirm-yes {
  background: var(--pm-red);
  color: #fff;
}

.pm-ai-confirm-yes:hover {
  filter: brightness(0.94);
}

.pm-ai-confirm-no {
  background: var(--pm-panel);
  border-color: var(--pm-line);
  color: var(--pm-muted);
}

.pm-ai-confirm-no:hover {
  border-color: var(--pm-line-strong);
}

.pm-ai-chat-hint {
  margin: 8px 0 0;
  color: var(--pm-muted);
  font-size: 12px;
  text-align: center;
}

.pm-project-list-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 4px 0;
  color: var(--pm-muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.pm-project-list-hint > i {
  color: var(--pm-purple);
  margin-top: 1px;
}

/* --- Miembros del proyecto ---------------------------------------------- */

.pm-members-body {
  display: grid;
  gap: 12px;
  padding: 4px 0;
}

.pm-members-invite {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.pm-members-invite label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.pm-members-invite span {
  font-size: 11.5px;
  color: var(--pm-muted);
}

.pm-members-invite select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--pm-line);
  border-radius: 8px;
  background: var(--pm-panel);
  color: var(--pm-navy);
  font-size: 13px;
}

.pm-members-list {
  display: grid;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
}

.pm-member-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 8px;
}

.pm-member-row:hover {
  background: var(--pm-purple-soft);
}

.pm-member-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pm-purple);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.pm-member-identity {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.pm-member-identity strong {
  font-size: 13px;
  color: var(--pm-navy);
}

.pm-member-identity small {
  font-size: 11.5px;
  color: var(--pm-muted);
}

.pm-member-remove {
  border: 0;
  background: transparent;
  color: var(--pm-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
}

.pm-member-remove:hover {
  color: var(--pm-red);
  background: #fdeceb;
}

.pm-members-empty {
  margin: 0;
  padding: 14px;
  text-align: center;
  color: var(--pm-muted);
  font-size: 12.5px;
}

.pm-members-visibility {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--pm-line);
  border-radius: 8px;
  cursor: pointer;
}

.pm-members-visibility span {
  display: grid;
  gap: 2px;
}

.pm-members-visibility strong {
  font-size: 12.5px;
  color: var(--pm-navy);
}

.pm-members-visibility small {
  font-size: 11.5px;
  color: var(--pm-muted);
}

/* --- Bitacora con autor -------------------------------------------------- */

.pm-activity-avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pm-purple-soft);
  color: var(--pm-purple-dark);
  font-size: 10.5px;
  font-weight: 600;
}

.pm-activity-item.is-flowmind .pm-activity-avatar {
  background: var(--pm-purple);
  color: #fff;
}

@media (max-width: 720px) {
  .pm-members-invite {
    grid-template-columns: minmax(0, 1fr);
  }

  .pm-ai-history {
    margin-right: 0;
    max-height: 220px;
  }
}

/* --- Dictado por voz ------------------------------------------------------ */

.pm-ai-composer [data-pm-dictate] {
  position: relative;
  transition: color var(--pm-motion-fast) linear, background var(--pm-motion-fast) linear;
}

.pm-ai-composer [data-pm-dictate].is-recording {
  color: var(--pm-red);
}

/* Halo latiendo: confirma de un vistazo que el micrófono está abierto. */
.pm-ai-composer [data-pm-dictate].is-recording::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px solid var(--pm-red);
  animation: pm-mic-pulse 1.6s var(--pm-motion-ease) infinite;
  pointer-events: none;
}

.pm-ai-composer [data-pm-dictate].is-busy {
  color: var(--pm-purple);
  animation: pm-mic-busy 1s linear infinite;
}

@keyframes pm-mic-pulse {
  0% { opacity: 0.9; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.45); }
  100% { opacity: 0; transform: scale(1.45); }
}

@keyframes pm-mic-busy {
  0% { opacity: 1; }
  50% { opacity: 0.45; }
  100% { opacity: 1; }
}

.pm-dictation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--pm-purple-border);
  border-radius: 999px;
  background: var(--pm-panel);
  box-shadow: 0 6px 16px rgba(67, 38, 121, 0.08);
  animation: pm-dictation-enter 240ms var(--pm-motion-ease);
}

.pm-dictation[hidden] {
  display: none;
}

@keyframes pm-dictation-enter {
  from { opacity: 0; transform: translateY(6px) scaleY(0.86); }
  to { opacity: 1; transform: translateY(0) scaleY(1); }
}

.pm-dictation-wave {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 26px;
}

.pm-dictation-wave > i {
  width: 3px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--pm-purple), var(--pm-purple-dark));
  transform: scaleY(0.18);
  transform-origin: center;
  /* La altura la fija el volumen real desde JS; la transición solo la suaviza. */
  transition: transform 90ms linear;
}

.pm-dictation[data-status="transcribing"] .pm-dictation-wave > i {
  transform: scaleY(0.4);
  animation: pm-dictation-thinking 1.1s var(--pm-motion-ease) infinite;
}

.pm-dictation[data-status="transcribing"] .pm-dictation-wave > i:nth-child(2n) {
  animation-delay: 140ms;
}

.pm-dictation[data-status="transcribing"] .pm-dictation-wave > i:nth-child(3n) {
  animation-delay: 280ms;
}

@keyframes pm-dictation-thinking {
  0%, 100% { transform: scaleY(0.25); opacity: 0.5; }
  50% { transform: scaleY(0.8); opacity: 1; }
}

.pm-dictation-time {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--pm-muted);
  min-width: 34px;
  text-align: right;
}

.pm-dictation[data-status="transcribing"] .pm-dictation-time {
  color: var(--pm-purple);
}

.pm-dictation-stop,
.pm-dictation-cancel {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 13px;
  transition: transform var(--pm-motion-fast) var(--pm-motion-ease), filter var(--pm-motion-fast) linear;
}

.pm-dictation-stop {
  background: var(--pm-purple);
  color: #fff;
}

.pm-dictation-stop:hover {
  transform: scale(1.08);
}

.pm-dictation-cancel {
  background: transparent;
  border-color: var(--pm-line);
  color: var(--pm-muted);
}

.pm-dictation-cancel:hover {
  border-color: var(--pm-red);
  color: var(--pm-red);
}

.pm-dictation[data-status="transcribing"] .pm-dictation-stop,
.pm-dictation[data-status="transcribing"] .pm-dictation-cancel {
  opacity: 0.45;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .pm-dictation-wave > i {
    transition: none;
  }
}

/* --- Pasos en vivo de Flowmind -------------------------------------------- */

.pm-ai-steps {
  grid-column: 1 / -1;
  list-style: none;
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid rgba(125, 86, 199, 0.22);
}

.pm-ai-step {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #4a3a72;
  animation: pm-action-enter 260ms var(--pm-motion-ease) backwards;
  animation-delay: calc(var(--pm-action-index, 0) * 60ms);
}

.pm-ai-step-mark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--pm-purple);
  position: relative;
}

/* En curso: el aro late para separar lo que se hace de lo ya hecho. */
.pm-ai-step.is-running .pm-ai-step-mark {
  border-color: var(--pm-purple);
  animation: pm-step-pulse 1.1s var(--pm-motion-ease) infinite;
}

.pm-ai-step.is-done .pm-ai-step-mark {
  background: var(--pm-green);
  border-color: var(--pm-green);
}

.pm-ai-step.is-done .pm-ai-step-mark::after {
  content: "";
  position: absolute;
  inset: 1px 2px 2px 1px;
  border-bottom: 1.5px solid #fff;
  border-right: 1.5px solid #fff;
  transform: rotate(40deg) scale(0.82);
}

.pm-ai-step.is-failed .pm-ai-step-mark {
  background: var(--pm-red);
  border-color: var(--pm-red);
}

.pm-ai-step.is-waiting .pm-ai-step-mark {
  background: var(--pm-amber);
  border-color: var(--pm-amber);
}

.pm-ai-step.is-done > span:last-child {
  color: #3a2c5c;
}

@keyframes pm-step-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(109, 54, 212, 0.45); }
  50% { box-shadow: 0 0 0 4px rgba(109, 54, 212, 0); }
}

/* --- Estado vacío del tablero --------------------------------------------- */

.pm-empty-board-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 10px 0 0;
  padding: 9px 11px;
  border: 1px solid var(--pm-purple-border);
  border-radius: 8px;
  background: var(--pm-purple-soft);
  color: var(--pm-text);
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
}

.pm-empty-board-note > i {
  color: var(--pm-purple);
  margin-top: 2px;
}

.pm-empty-board-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* --- Alcance del chat: sobre qué proyectos trabaja Flowmind --------------- */

/* El encabezado es flex, no grid: con grid-column el selector se quedaba de
   tercera columna y los tres juntos no cabían en el panel acoplado, así que el
   encabezado desbordaba y recortaba los botones. Va en su propia línea. */
.pm-ai-scope-slot {
  flex: 1 0 100%;
  min-width: 0;
  padding: 0 10px 8px 0;
}

.pm-ai-scope {
  min-width: 0;
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  /* Antes eran 74px de alto por el rótulo apilado encima del select. */
  padding: 2px 8px;
  border: 1px solid var(--pm-purple-border);
  border-radius: 9px;
  background: var(--pm-purple-soft);
  cursor: pointer;
}

.pm-ai-scope > i {
  color: var(--pm-purple);
  font-size: 12px;
}

/* El select del panel se sustituye por el componente global, que trae 44px de
   alto minimo pensados para formularios. Aqui es una etiqueta de una linea, no
   un campo: se le baja el listón solo dentro del panel. */
.pm-ai-scope .flowmo-select-trigger {
  min-height: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  padding: 0 4px 0 0;
  font-size: 12px;
  font-weight: 650;
}

.pm-ai-scope .flowmo-select-chevron {
  font-size: 9px;
}

.pm-ai-scope-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.pm-ai-scope-copy > small {
  color: var(--pm-muted);
  font-size: 10.5px;
  line-height: 1.2;
}

.pm-ai-scope select {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--pm-navy);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  padding: 0;
  cursor: pointer;
  /* Recorta el nombre largo en vez de ensanchar el panel. */
  text-overflow: ellipsis;
}

.pm-ai-scope select:focus-visible {
  outline: 2px solid var(--pm-purple);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Vista general: Bosque y Tabla ---------------------------------------- */

.pm-hub {
  /* Referencia del desplegable anclado a la hoja o la fila. */
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  overflow: hidden;
  animation: pm-panel-enter 320ms var(--pm-motion-ease);
}

.pm-hub[hidden] {
  display: none;
}

/* Los mandos de la vista general viven en la cabecera de la aplicación: abajo
   se comían una franja entera para repetir un título que ya está arriba, y en
   esta pantalla el alto es lo que hace falta. */
.pm-header-hub {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pm-header-hub > small {
  color: var(--pm-muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.pm-header-hub .pm-hub-new-project {
  white-space: nowrap;
}

/* Elegir cómo se ven las tarjetas del diagrama: en resumen o con todo dentro.
   Va aquí porque es una forma de mirar, como Bosque o Tabla. */
.pm-hub-cards {
  display: inline-flex;
  border: 1px solid rgba(120, 100, 70, 0.26);
  border-radius: 999px;
  background: #fff;
  padding: 2px;
  gap: 2px;
}

.pm-hub-cards[hidden] {
  display: none;
}

.pm-hub-cards > button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #57492f;
  padding: 4px 11px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
}

.pm-hub-cards > button.is-active {
  background: var(--pm-purple);
  color: #fff;
}

/* --- La tarjeta completa --------------------------------------------------- */
/* Lo que hay dentro del paso, en el propio diagrama: en resumen hay que abrir
   cada uno para saber qué se decidió. A cambio, tarjetas grandes. */
.pm-flow-card-full {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--nivel, #8a7a5c) 22%, transparent);
}

.pm-flow-card-detail {
  margin: 0;
  color: #443b28;
  font-size: 11.5px;
  line-height: 1.45;
  /* Cuatro líneas y a otra cosa: una nota larga estiraría su rama y descuadraría
     el diagrama entero. Al entrar a escribir crece. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Y se escribe aquí mismo: bajar a la ficha para cambiar una palabra era un
   viaje por cada palabra. */
textarea.pm-flow-card-detail {
  display: block;
  width: 100%;
  height: 46px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  padding: 3px 5px;
  font-family: inherit;
  resize: vertical;
}

textarea.pm-flow-card-detail:hover {
  border-color: rgba(120, 100, 70, 0.28);
  background: #fffdf7;
}

textarea.pm-flow-card-detail:focus {
  height: 92px;
  border-color: var(--pm-purple-border);
  background: #fff;
  outline: none;
}

textarea.pm-flow-card-detail::placeholder {
  color: #a2947a;
  font-style: italic;
}

/* El título también se escribe en la tarjeta. */
.pm-flow-card-title.is-edit {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.pm-flow-card-title.is-edit > input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  padding: 2px 4px;
  color: inherit;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
}

.pm-flow-card-title.is-edit > input:hover {
  border-color: rgba(120, 100, 70, 0.28);
  background: #fffdf7;
}

.pm-flow-card-title.is-edit > input:focus {
  border-color: var(--pm-purple-border);
  background: #fff;
  outline: none;
}

.pm-flow-card[data-state="done"] .pm-flow-card-title.is-edit > input {
  color: #4c6b57;
  text-decoration: line-through rgba(35, 118, 75, 0.4);
}

.pm-flow-card-detail.is-empty {
  color: #a2947a;
  font-style: italic;
}

.pm-flow-card-author {
  color: #a2947a;
  font-size: 9.5px;
  font-weight: 600;
}

.pm-flow-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pm-flow-card-actions .pm-flow-state,
.pm-flow-card-actions .pm-flow-flag {
  padding: 3px 7px;
  font-size: 9.5px;
}

.pm-flow-card-actions .pm-flow-split,
.pm-flow-card-actions .pm-flow-remove {
  width: 22px;
  height: 22px;
  font-size: 10px;
}

/* Con ratón se arrastra, así que las flechas sobran y ensucian la fila: en su
   sitio van unos puntitos que dicen "de aquí se agarra". Con el dedo no hay
   arrastre —ese gesto mueve el plano—, y ahí las flechas siguen siendo la
   única manera de ordenar: vuelven más abajo, en el bloque táctil. */
.pm-flow-card-actions .pm-flow-move-step {
  display: none;
}

.pm-flow-grip {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  color: rgba(120, 100, 70, 0.6);
  cursor: grab;
  font-size: 12px;
  touch-action: none;
}

.pm-flow-grip:hover {
  background: rgba(120, 100, 70, 0.1);
  color: #6f6045;
}

.pm-flow-card.is-dragging .pm-flow-grip {
  cursor: grabbing;
}

/* Bajar un paso a tarea: lo mismo contado dos veces, el flujo dice qué falta y
   la tarea de quién es. */
.pm-flow-to-task {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(120, 100, 70, 0.24);
  border-radius: 7px;
  background: #fff;
  color: #6f6045;
  cursor: pointer;
  font-size: 10px;
}

.pm-flow-to-task:hover {
  border-color: var(--pm-purple-border, rgba(109, 54, 212, 0.45));
  background: rgba(109, 54, 212, 0.08);
  color: var(--pm-purple-dark, #4a1fa8);
}

/* Los responsables se eligen tocando la cara: son pocos —los del proyecto— y
   una lista desplegable para cuatro nombres es más trabajo que ayuda. */
.pm-flow-task-people {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.pm-flow-task-persona {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #dedfed;
  border-radius: 999px;
  background: #fff;
  padding: 5px 12px 5px 5px;
  color: #2d3358;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 650;
}

.pm-flow-task-persona > em {
  color: #8a8fb0;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

.pm-flow-task-persona.is-active {
  border-color: var(--pm-purple, #6d36d4);
  background: rgba(109, 54, 212, 0.1);
  color: var(--pm-purple-dark, #40209b);
}

.pm-flow-task-avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(109, 54, 212, 0.14);
  color: var(--pm-purple-dark, #40209b);
  font-size: 10px;
  font-weight: 800;
}

.pm-flow-task-persona.is-active .pm-flow-task-avatar {
  background: var(--pm-purple, #6d36d4);
  color: #fff;
}

.pm-flow-task-vacio {
  margin: 6px 0 0;
  color: #8a8fb0;
  font-size: 12px;
}

/* Quitar un paso no se deshace. El primer toque abre la pregunta donde estaba
   la equis, sin ventana ni nada que tape, y el segundo quita. */
.pm-flow-remove-sure {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(196, 78, 78, 0.45);
  border-radius: 999px;
  background: rgba(255, 245, 245, 0.95);
  padding: 1px;
}

.pm-flow-remove-yes {
  border: 0;
  border-radius: 999px;
  background: #c44e4e;
  padding: 3px 9px;
  color: #fff;
  cursor: pointer;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.pm-flow-remove-yes > b {
  opacity: 0.75;
  font-weight: 800;
}

.pm-flow-remove-no {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8a5a5a;
  cursor: pointer;
  font-size: 9px;
}

.pm-flow-remove-no:hover {
  background: rgba(196, 78, 78, 0.14);
}

.pm-flow-card-actions .pm-flow-move-step button {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  font-size: 8px;
}

/* Con todo dentro, la tarjeta necesita más ancho para que el título no se
   parta en dos y las banderas quepan en su línea. */
.pm-flow-diagram[data-cards="full"] .pm-flow-card {
  width: 296px;
  align-items: start;
}

@media (max-width: 980px) {
  /* Se esconde el rótulo "Color", no el selector: al mejorarlo se convierte en
     otro <span> hijo de la misma etiqueta, y este "> span" se lo llevaba por
     delante. Quedaba solo el <select> de verdad, que va posicionado a la fuerza
     y se salía de la pantalla; el mando no se veía y la cabecera se desbordaba. */
  .pm-header-hub > small,
  .pm-header-hub .pm-hub-color > span:not(.flowmo-select-menu) {
    display: none;
  }
}

@media (max-width: 720px) {
  /* Todo el encabezado en un solo renglón: cuatro mandos de dos toques cada
     uno ocupaban tres filas y media pantalla antes de ver un proyecto. Los
     rótulos se van —los iconos ya distinguen, y el nombre queda en el título
     de cada botón—, y si algún día no cupieran, bajan de renglón en vez de
     aplastarse, que es como el selector de color acabó midiendo un píxel. */
  .pm-header-hub {
    order: 5;
    /* De lado a lado: la columna del título dejaba 307px y por 28 se caía el
       botón de crear a un segundo renglón. Debajo del título no hay nada más
       que estorbe. */
    grid-column: 1 / -1;
    width: 100%;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-start;
  }

  .pm-header-hub .pm-hub-modes,
  .pm-header-hub .pm-hub-cards {
    flex: none;
  }

  .pm-hub-cards > button > span {
    display: none;
  }

  /* Mismo motivo que en el flujo: 44px por botón no caben cuatro veces en una
     fila de teléfono. Siguen siendo cómodos de tocar, pero justos. */
  .pm-header-hub .pm-hub-cards > button,
  .pm-header-hub .pm-hub-modes button {
    min-width: 40px;
    padding: 8px 10px;
  }

  .pm-header-hub .pm-hub-color {
    flex: none;
    min-width: 0;
  }

  .pm-header-hub .pm-hub-color .flowmo-select-menu,
  .pm-header-hub .pm-hub-color .flowmo-select-trigger {
    min-width: 82px;
    max-width: 104px;
  }

  /* El de crear se va al extremo, que es donde se busca. */
  .pm-header-hub .pm-hub-new-project {
    margin-left: auto;
  }
}

/* Por debajo de 400px la fila no da de sí: se aprieta un poco más antes que
   partirla, que es lo que de verdad se ve mal. */
@media (max-width: 400px) {
  .pm-header-hub .pm-hub-cards > button,
  .pm-header-hub .pm-hub-modes button {
    min-width: 36px;
    padding: 8px 7px;
  }

  .pm-header-hub .pm-hub-color .flowmo-select-menu,
  .pm-header-hub .pm-hub-color .flowmo-select-trigger {
    min-width: 64px;
    max-width: 82px;
  }
}

.pm-hub-heading {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.pm-hub-kicker {
  color: var(--pm-purple);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pm-hub-heading > strong {
  color: var(--pm-navy);
  font-size: 19px;
  line-height: 1.2;
}

.pm-hub-heading > small {
  color: var(--pm-muted);
  font-size: 12.5px;
}

.pm-hub-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.pm-hub-modes {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--pm-line);
  border-radius: 999px;
  background: var(--pm-panel);
}

.pm-hub-modes button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--pm-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  transition: background var(--pm-motion-fast) linear, color var(--pm-motion-fast) linear;
}

.pm-hub-modes button.is-active {
  background: var(--pm-purple);
  color: #fff;
  box-shadow: 0 6px 14px rgba(78, 35, 171, 0.22);
}

.pm-hub-color {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--pm-muted);
  font-size: 11.5px;
}

.pm-hub-color select {
  padding: 7px 10px;
  border: 1px solid var(--pm-line);
  border-radius: 8px;
  background: var(--pm-panel);
  color: var(--pm-navy);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.pm-hub-stage {
  min-height: 0;
  display: grid;
  place-items: center;
  align-content: stretch;
  overflow: hidden;
  border: 1px solid var(--pm-purple-border);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 45%, rgba(240, 232, 255, 0.9), rgba(250, 248, 255, 0.5) 60%),
    var(--pm-panel);
}

/* El bosque se centra; la tabla se estira: centrada dejaba media pantalla
   vacía debajo, que es justo lo que hace falta aquí. */
.pm-hub-stage[data-mode="table"] {
  place-items: stretch;
}

.pm-hub-stage[data-mode="forest"] {
  background:
    linear-gradient(180deg, rgba(233, 244, 255, 0.85), rgba(247, 252, 245, 0.95) 62%, rgba(238, 246, 233, 1)),
    var(--pm-panel);
}

.pm-hub-stage > svg {
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: block;
}

.pm-hub-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  min-height: 18px;
}

.pm-hub-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pm-muted);
  font-size: 11.5px;
}

.pm-hub-legend-item > i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.pm-hub-legend-note {
  color: var(--pm-muted);
  font-size: 11.5px;
}

.pm-hub-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 40px 20px;
  text-align: center;
}

.pm-hub-empty > span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pm-purple-soft);
  color: var(--pm-purple);
  font-size: 24px;
}

.pm-hub-empty > strong {
  color: var(--pm-navy);
  font-size: 16px;
}

.pm-hub-empty > p {
  margin: 0 0 6px;
  color: var(--pm-muted);
  font-size: 13px;
}

/* --- Diálogo de formatos --------------------------------------------------- */

.pm-hub-dialog-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.pm-hub-stat {
  display: grid;
  gap: 1px;
  padding: 10px 8px;
  border: 1px solid var(--pm-line);
  border-radius: 10px;
  text-align: center;
}

.pm-hub-stat > strong {
  color: var(--pm-navy);
  font-size: 17px;
}

.pm-hub-stat > small {
  color: var(--pm-muted);
  font-size: 11px;
}

.pm-hub-stat.is-alert {
  border-color: #f0c0bb;
  background: #fdf1f0;
}

.pm-hub-stat.is-alert > strong {
  color: var(--pm-red);
}

/* En la vista general no hay un proyecto abierto: la lista lateral sobra.
   En movil el sidebar es un cajon, asi que solo se oculta en escritorio. */
@media (min-width: 721px) {
  .pm-workspace.is-hub-view .pm-task-sidebar {
    display: none;
  }
}

/* Las etapas del Kanban hablan de UN proyecto: en el panorama no pintan nada y
   se llevan alto util del telefono. */
.project-management-panel:has(.pm-workspace.is-hub-view) .pm-mobile-stage-tabs {
  display: none;
}

@media (max-width: 720px) {
  .pm-hub-header {
    align-items: stretch;
  }

  .pm-hub-controls {
    justify-content: space-between;
  }

  .pm-hub-modes button span {
    display: none;
  }

  .pm-hub-modes button {
    padding: 9px 15px;
  }

  .pm-hub-dialog-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* En pantalla estrecha el texto del SVG se queda diminuto: se agranda. */
  .pm-orbit-name { font-size: 20px; }
  .pm-orbit-meta { font-size: 17px; }
  .pm-orbit-initial { font-size: 24px; }
  .pm-orbit-ring-label { font-size: 19px; }
  .pm-leaf-name { font-size: 19px; }
  .pm-leaf-meta { font-size: 16px; }
  .pm-branch-label { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .pm-orbit-ring,
  .pm-orbit-node-inner,
  .pm-leaf-sway,
  .pm-orbit-halo,
  .pm-orbit-core-glow {
    animation: none !important;
  }

  .pm-branch {
    stroke-dashoffset: 0;
  }

  .pm-leaf-enter {
    opacity: 1;
    animation: none;
  }
}

/* --- La vista general reclama el ancho ------------------------------------ */
/* Al ocultar la lista lateral, `main` caía en la columna de 220px y el gráfico
   quedaba diminuto. En esta vista la rejilla pasa a ser contenido + Flowmind. */
/* Solo en escritorio: en móvil el área de trabajo ya es de una sola columna, y
   esta regla —al ir después en el archivo— la pisaba y dejaba el gráfico en
   unos 50 px de ancho. */
@media (min-width: 721px) {
  .pm-workspace.is-hub-view {
    grid-template-columns: minmax(0, 1fr) 338px;
  }

  /* Con Flowmind minimizado o flotando, su columna sobra: el hueco es para la
     tabla, que es lo que se está mirando. */
  .pm-workspace.is-hub-view.is-ai-overlay {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Periodo, métricas y filtros describen UN proyecto: en el panorama estorban.
   La cabecera además se encoge: si solo se ocultan sus hijos, sus 124px de alto
   mínimo dejan un hueco enorme sobre el gráfico. */
.project-management-panel:has(.pm-workspace.is-hub-view) .pm-header-period,
.project-management-panel:has(.pm-workspace.is-hub-view) .pm-header-summary,
.project-management-panel:has(.pm-workspace.is-hub-view) .pm-toolbar-filters,
.project-management-panel:has(.pm-workspace.is-hub-view) .pm-header-project-navigation {
  display: none;
}

/* Todo en una sola fila: el título a la izquierda, los mandos a su derecha y el
   cerrar al final. El título ocupaba 256px de los 1300 disponibles y los mandos
   se iban solos a un segundo renglón, así que la cabecera medía 137px de alto
   antes de enseñar un proyecto. */
.project-management-panel:has(.pm-workspace.is-hub-view) .pm-header {
  grid-template-columns: max-content minmax(0, 1fr) auto;
  grid-template-areas: "title hub close";
  align-items: center;
  min-height: 0;
  padding: 12px 24px;
}

.project-management-panel:has(.pm-workspace.is-hub-view) .pm-header-hub {
  grid-area: hub;
  justify-content: flex-end;
}

/* Y abajo, la lámina llega hasta el final. Había 70px reservados por si la
   pastilla de Flowmind tapaba algo, pero Flowmind flota —no ocupa sitio— y se
   mueve donde uno quiera; lo único que se queda al margen es la leyenda de
   colores, que es lo que hay que poder leer siempre. */
.pm-workspace.is-hub-view {
  padding-bottom: 18px;
}

/* El cerrar iba corrido 28px hacia dentro, cosa que no molestaba cuando los
   mandos vivían en otra fila. En una sola, el botón de crear se le metía
   debajo: aquí se queda en su sitio. */
.project-management-panel:has(.pm-workspace.is-hub-view) .pm-header-close {
  transform: none;
}

/* Por debajo de 1240px el título y los cuatro mandos ya no caben en un
   renglón: se pisaban unos a otros. Ahí vuelven a repartirse en dos, que es
   feo pero legible; pisarse no es ninguna de las dos cosas. */
@media (max-width: 1240px) {
  .project-management-panel:has(.pm-workspace.is-hub-view) .pm-header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title close";
  }

  .project-management-panel:has(.pm-workspace.is-hub-view) .pm-header-hub {
    grid-area: auto;
    justify-content: flex-start;
  }

  .project-management-panel:has(.pm-workspace.is-hub-view) .pm-header-close {
    transform: translateX(-28px);
  }
}

/* Con la barra del tablero fuera, la vista general se quedaba sin ninguna forma
   de crear un proyecto: el lateral está oculto y sus botones también. */
/* Vive en la fila del título, no entre los controles: ahí a la derecha había
   hueco muerto, y así los controles se quedan con su fila entera. En escritorio
   el `order` lo manda al final para que quede pegado a la derecha del todo. */
.pm-hub-new-project {
  flex: none;
  align-self: center;
  order: 3;
  white-space: nowrap;
}

.pm-hub-controls {
  margin-left: auto;
}

/* En el teléfono se queda en el icono, arriba a la derecha junto al título:
   entero se comía ancho de la fila de controles y empujaba el dibujo. */
@media (max-width: 720px) {
  .pm-hub-controls {
    margin-left: 0;
  }

  .pm-hub-new-project {
    order: 0;
    align-self: flex-start;
    width: 38px;
    height: 38px;
    margin-left: auto;
    padding: 0;
    justify-content: center;
  }

  .pm-hub-new-project span {
    display: none;
  }
}

/* En la vista general la barra del tablero se queda sin un solo control visible
   (filtros, agrupar, responsables: todo es de un proyecto concreto) y aun así
   se llevaba 82px encima del dibujo. Se retira y esa altura pasa a la lámina,
   que así arranca a la altura del panel de Flowmind. */
.project-management-panel:has(.pm-workspace.is-hub-view) .pm-toolbar {
  display: none;
}

.project-management-panel:has(.pm-workspace.is-hub-view) .pm-shell {
  grid-template-rows: auto minmax(0, 1fr);
}

/* El gráfico se ajusta al hueco disponible en vez de imponer su tamaño: sin
   esto el SVG cuadrado estiraba la vista y se salía por abajo. */
.pm-workspace.is-hub-view .pm-main {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.pm-hub {
  height: 100%;
}

/* Chip bajo el nombre de la hoja: sin el, el texto se leia sobre la rama. */
.pm-leaf-chip {
  fill: rgba(255, 255, 255, 0.88);
  stroke: rgba(80, 110, 70, 0.14);
  stroke-width: 1;
}

/* Tramo grueso del arranque de la rama, para que se afine hacia la punta. */
.pm-branch--base {
  stroke-width: 13;
  stroke-dasharray: none;
  animation: none;
}

@media (max-width: 720px) {
  /* Con las pestañas de etapa ocultas quedan 3 hijos en el shell, y la plantilla
     de 4 filas dejaba el área de trabajo en una fila `auto`: de ahí el hueco
     blanco bajo el gráfico. Se declara la plantilla que corresponde. */
  .project-management-panel:has(.pm-workspace.is-hub-view) .pm-shell {
    grid-template-rows: auto minmax(0, 1fr);
  }

  /* En el teléfono el gráfico manda: se le da el alto disponible. */
  .pm-workspace.is-hub-view .pm-hub-stage {
    align-self: stretch;
  }
}

/* --- Tabla: el mismo papel, en registro ----------------------------------- */
/* Las reglas se trazan con --pm-rule (0 → 1) desde GSAP: el equivalente en HTML
   al DrawSVG de la lámina. Se usa un ::after con scaleX en vez de border para
   poder animar el trazo de izquierda a derecha. */

.pm-hub-stage[data-mode="table"] {
  border-color: #d9cdb2;
  background: radial-gradient(circle at 50% 30%, #fdfaf1 0%, #f8f1e0 62%, #efe4cb 100%);
  box-shadow: inset 0 0 60px rgba(120, 96, 58, 0.08);
  place-items: stretch;
  padding: 18px;
}

/* Los mandos generales: valen para todo lo que hay debajo, así que van fuera
   de los flujos. Arriba de la tabla mandan sobre todos los proyectos; en la
   cabecera de un área, sobre los suyos. */
.pm-flow-controls {
  position: relative;
  z-index: 1;
  align-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid rgba(120, 100, 70, 0.18);
  border-radius: 12px;
  background: rgba(255, 253, 246, 0.86);
}

/* En la cabecera de un área va apretado y a la derecha: la fila ya lleva el
   nombre, la cuenta y las flechas de mover. */
.pm-table-area-row .pm-flow-controls {
  margin: 0 0 0 auto;
  border: 0;
  background: transparent;
  padding: 0;
  gap: 8px;
}

/* Una sola línea: el nombre del área a la izquierda y sus mandos a la derecha.
   Estirando la celda se rompía el ancho de las columnas de la tabla. */
.pm-table-area-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* El nombre del área ocupaba el ancho entero y empujaba sus mandos a la línea
   de abajo: aquí solo ocupa lo suyo y la raya la pone la propia línea. */
.pm-table-area-line > .pm-table-area-toggle {
  width: auto;
  flex: 1 1 auto;
  border-bottom: 0;
  min-width: 0;
}

.pm-table-area-row th {
  border-bottom: 1px solid rgba(75, 63, 48, 0.22);
}

.pm-table-area-row .pm-flow-controls {
  margin-left: auto;
}

.pm-flow-openall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(120, 100, 70, 0.26);
  border-radius: 999px;
  background: #fff;
  color: #57492f;
  padding: 4px 11px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
}

.pm-flow-openall:hover {
  border-color: var(--pm-purple-border);
  background: var(--pm-purple-soft);
  color: var(--pm-purple-dark);
}

.pm-flow-openall > b {
  color: #9a8b6e;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}



.pm-table-plate {
  position: relative;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  padding: 14px 16px;
}

.pm-table-frame {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(75, 63, 48, 0.7);
  border-radius: 14px;
  pointer-events: none;
}

.pm-table-frame::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 0.9px solid rgba(75, 63, 48, 0.3);
  border-radius: 9px;
}

.pm-table-scroll {
  min-height: 0;
  overflow: auto;
}

.pm-table {
  width: 100%;
  border-collapse: collapse;
  color: #3d3423;
  font-size: 13px;
}

.pm-table-caption {
  caption-side: top;
  padding: 2px 2px 12px;
  color: #57492f;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 16px;
  text-align: left;
}

.pm-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0 10px 9px;
  background: linear-gradient(180deg, #fbf6e9 82%, rgba(251, 246, 233, 0));
  color: #7c6c50;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 13.5px;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}

/* La regla de cada fila: un trazo que crece de izquierda a derecha. */
.pm-table thead tr,
.pm-table-row {
  position: relative;
}

.pm-table thead tr::after,
.pm-table-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(75, 63, 48, 0.28);
  transform: scaleX(var(--pm-rule, 1));
  transform-origin: left center;
}

.pm-table thead tr::after {
  height: 1.4px;
  background: rgba(75, 63, 48, 0.55);
}

.pm-table-row {
  cursor: pointer;
  transition: background 160ms linear;
}

/* El registro se pliega por área: veinte filas de golpe no son una vista
   general. La cabecera de cada área es la que se toca para abrirla. */
.pm-table-area-row th {
  padding: 4px 0 2px;
}

.pm-table-area-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid rgba(75, 63, 48, 0.22);
  background: transparent;
  color: #57492f;
  padding: 7px 8px;
  text-align: left;
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13.5px;
}

.pm-table-area-toggle:hover,
.pm-table-area-toggle:focus-visible {
  background: rgba(180, 150, 96, 0.14);
  outline: none;
}

.pm-table-area-toggle > i {
  color: #8a7a5c;
  font-size: 10px;
  transition: transform 150ms ease;
}

.pm-table-area-toggle[aria-expanded="true"] > i {
  transform: rotate(90deg);
}

.pm-table-area-toggle > strong {
  font-weight: 700;
}

.pm-table-area-toggle > span {
  color: #8a7a5c;
  font-size: 11.5px;
  font-style: italic;
}

/* En el registro, la misma línea: debajo va lo que ya está entregado. */
.pm-table-done-rule td {
  padding: 10px 8px 4px;
}

.pm-table-done-rule td > span {
  color: #8a7a5c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11.5px;
  font-style: italic;
}

.pm-table-done-rule td > b {
  margin-left: 7px;
  color: #a0906f;
  font-size: 11px;
  font-weight: 700;
}

.pm-table-done-rule td::after {
  content: "";
  display: block;
  margin-top: 5px;
  height: 1px;
  background: linear-gradient(90deg, rgba(120, 150, 110, 0.45), rgba(75, 63, 48, 0.08));
}

.pm-table-row[data-pm-drag-project] {
  cursor: grab;
}

/* Mientras se ordena, el texto no se selecciona: arrastrar una fila no puede
   dejar media tabla en azul. */
.is-sorting,
.is-sorting * {
  user-select: none;
}

/* --- Mover un área entera -------------------------------------------------- */
.pm-move-area {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 2px;
  margin-left: 6px;
  opacity: 0;
  transition: opacity 140ms linear;
}

/* En escritorio aparecen al acercarse; en táctil siempre, que ahí no se
   arrastra. */
.pm-table-area-row:hover .pm-move-area,
.pm-table-area-row:focus-within .pm-move-area,
.pm-sidebar-area-head:hover .pm-move-area,
.pm-sidebar-area-head:focus-within .pm-move-area {
  opacity: 1;
}

/* El asa: la cabecera del área es un botón de lado a lado, así que el arrastre
   necesita su propio sitio donde agarrarla. */
.pm-area-grip {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: #a2947a;
  cursor: grab;
  font-size: 11px;
}

.pm-area-grip:hover {
  background: rgba(180, 150, 96, 0.16);
  color: #57492f;
}

.pm-sidebar-area-head .pm-area-grip {
  color: #9aa2bd;
}

.pm-sidebar-area-head .pm-area-grip:hover {
  background: var(--pm-purple-soft);
  color: var(--pm-purple-dark);
}

.pm-move-area button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border: 1px solid rgba(120, 100, 70, 0.24);
  border-radius: 6px;
  background: #fff;
  color: #8a7a5c;
  cursor: pointer;
  font-size: 9px;
}

.pm-move-area button:hover {
  background: rgba(180, 150, 96, 0.16);
  color: #57492f;
}

.pm-sidebar-area-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  cursor: grab;
}

.pm-sidebar-area-head .pm-move-area button {
  border-color: var(--pm-purple-border);
  color: var(--pm-purple-dark);
}

.pm-sidebar-area.is-dragging,
.pm-table-area-group.is-dragging {
  opacity: 0.5;
}

.pm-sidebar-area.is-drop-before > .pm-sidebar-area-head,
.pm-table-area-group.is-drop-before .pm-table-area-row > th {
  box-shadow: inset 0 3px 0 0 var(--pm-purple);
}

.pm-sidebar-area.is-drop-after,
.pm-table-area-group.is-drop-after {
  box-shadow: inset 0 -3px 0 0 var(--pm-purple);
}

@media (pointer: coarse) {
  .pm-move-area {
    opacity: 1;
  }

  .pm-move-area button {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
  }

  .pm-sidebar-area-head {
    cursor: default;
  }
}

/* --- El flujo del proyecto, dentro de la tabla ----------------------------- */
/* Esta tabla no cuenta tareas: cuenta en qué paso va cada proyecto. */
.pm-table-flow-toggle {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  vertical-align: middle;
  margin-right: 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #8a7a5c;
  cursor: pointer;
  font-size: 10px;
  transition: transform 150ms ease, background 150ms linear;
}

.pm-table-flow-toggle:hover {
  background: rgba(180, 150, 96, 0.18);
}

.pm-table-flow-toggle[aria-expanded="true"] {
  transform: rotate(90deg);
}

.pm-table-step,
.pm-table-next {
  cursor: pointer;
}

.pm-table-step:hover,
.pm-table-next:hover {
  background: rgba(180, 150, 96, 0.1);
}

.pm-table-step b {
  display: block;
  color: #3d3423;
  font-size: 12.5px;
  font-weight: 700;
}

.pm-table-step small {
  color: #90805f;
  font-size: 10.5px;
  font-weight: 600;
}

.pm-table-step em,
.pm-table-next {
  color: #a09070;
  font-size: 12px;
  font-style: italic;
}

.pm-table-flow-row > td {
  position: sticky;
  left: 0;
  padding: 0 8px 14px;
  background: rgba(255, 253, 246, 0.72);
}

/* El ancho lo pone la pantalla, no la tabla: la celda del flujo es tan ancha
   como la tabla entera —que se desplaza de lado— y las columnas se salían por
   la derecha en vez de desplazarse dentro de su propia caja. */
.pm-table-flow-row .pm-flow {
  width: var(--pm-flow-ancho, 100%);
  max-width: var(--pm-flow-ancho, 100%);
}

.pm-flow {
  --pm-nivel-1: #b4552d;
  --pm-nivel-2: #0f9b8e;
  --pm-nivel-3: #c07a12;
  --pm-nivel-4: #c2557f;
  --pm-nivel-5: #3b74d6;
  --pm-nivel-6: #5b6b7d;
  border: 1px solid rgba(120, 100, 70, 0.22);
  border-radius: 12px;
  background: #fffdf7;
  padding: 12px 14px;
}

.pm-flow-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.pm-flow-toolbar > strong {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #57492f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13.5px;
  font-style: italic;
  font-weight: 400;
}

.pm-flow-count {
  color: #9a8b6e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Los tres grupos de mandos van envueltos para poder tratarlos como una sola
   tira en el teléfono. En pantalla grande el envoltorio se desaparece y sus
   hijos siguen colocándose en la cabecera igual que siempre. */
.pm-flow-mandos {
  display: contents;
}

/* Abrir y cerrar por niveles. Rama por rama es un clic por rama; aquí se dice
   "hasta el 3" y el diagrama entero queda parejo de una vez. Cada botón lleva
   el color de su nivel, así que la fila hace también de leyenda. */
.pm-flow-levels {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
}

.pm-flow-levels > em {
  color: #9a8b6e;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-right: 2px;
  text-transform: uppercase;
}

.pm-flow-level {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--nivel, #8a7a5c) 32%, transparent);
  border-radius: 7px;
  background: #fff;
  color: var(--nivel, #8a7a5c);
  padding: 0 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pm-flow-level:hover {
  border-color: color-mix(in srgb, var(--nivel, #8a7a5c) 60%, transparent);
  background: color-mix(in srgb, var(--nivel, #8a7a5c) 10%, #fff);
}

.pm-flow-level.is-active {
  border-color: var(--nivel, #8a7a5c);
  background: var(--nivel, #8a7a5c);
  color: #fff;
}

.pm-flow-level[data-nivel="1"] { --nivel: var(--pm-nivel-1); }
.pm-flow-level[data-nivel="2"] { --nivel: var(--pm-nivel-2); }
.pm-flow-level[data-nivel="3"] { --nivel: var(--pm-nivel-3); }
.pm-flow-level[data-nivel="4"] { --nivel: var(--pm-nivel-4); }
.pm-flow-level[data-nivel="5"] { --nivel: var(--pm-nivel-5); }
.pm-flow-level[data-nivel="6"] { --nivel: var(--pm-nivel-6); }

/* El botón que le dice al chat de qué proyecto hablamos. */
.pm-flow-ask {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  border: 1px solid var(--pm-purple-border);
  border-radius: 999px;
  background: #fff;
  color: var(--pm-purple-dark);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
}

.pm-flow-ask:hover {
  background: var(--pm-purple-soft);
}

/* En el móvil la tabla se desplaza de lado, y el flujo colgaba de ese ancho:
   había que arrastrar la tabla para leer un párrafo. Se ancla a la izquierda y
   se queda del ancho de la pantalla. */
@media (max-width: 720px) {
  .pm-flow-toolbar {
    flex-wrap: wrap;
  }

  .pm-flow-levels {
    order: 3;
    margin-left: 0;
  }

  .pm-flow-filter {
    order: 4;
  }

  .pm-flow-ask {
    order: 2;
  }

}

/* --- El flujo como diagrama ------------------------------------------------ */
/* Cada paso lleva su rama pegada a la derecha y los hermanos se apilan en
   vertical colgando de la misma espina. Es lo que una lista sangrada deja de
   contar en cuanto el padre se va de la pantalla: qué cuelga de qué. */
.pm-flow-diagram {
  cursor: grab;
  overflow: auto;
  /* El pellizco de dos dedos lo atiende el diagrama, no el navegador: si lo
     atienden los dos, se acercan el dibujo y la página a la vez y se ve como
     dos acercamientos peleándose. Deslizar un dedo sigue siendo del navegador,
     que lo hace mejor que nosotros. */
  touch-action: pan-x pan-y;
  max-height: 62vh;
  border: 1px solid rgba(120, 100, 70, 0.16);
  border-radius: 12px;
  background:
    radial-gradient(circle at 1px 1px, rgba(120, 100, 70, 0.12) 1px, transparent 0) 0 0 / 18px 18px,
    #fffefb;
  padding: 12px 16px 12px 4px;
}

/* --- El flujo a pantalla completa ----------------------------------------- */
/* Dentro de la tabla el diagrama vive en una celda estrecha, con la lista
   encima y el chat al lado. Aquí no hay nada más que el dibujo: es como se
   mira un plano, y es donde el acercamiento sirve de verdad. */
.pm-flow-scene {
  position: fixed;
  inset: 0;
  z-index: var(--pm-layer-flow-scene);
  display: grid;
  padding: 18px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 253, 247, 0.98), rgba(247, 243, 233, 0.98)),
    rgba(36, 28, 16, 0.4);
  backdrop-filter: blur(2px);
}

/* La entrada se anima SOLO al entrar. Estaba en la regla de siempre, y como
   cada clic rehace el escenario, la escena volvía a nacer y volvía a hacer su
   fundido: la pantalla parpadeaba con cada cosa que tocabas. */
.pm-flow-scene.is-entrando {
  animation: pm-escena-entra 260ms ease-out both;
}

.pm-flow-scene > .pm-flow {
  display: flex;
  flex-direction: column;
  /* Sin esto el hijo de una rejilla se mide por su contenido, y el dibujo mide
     lo que mide: la escena se salía de la pantalla por la derecha. */
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(120, 100, 70, 0.2);
  border-radius: 16px;
  background: #fffefb;
  box-shadow: 0 30px 70px rgba(48, 36, 16, 0.16);
  padding: 14px 16px;
}

/* El dibujo se lleva todo lo que sobra: es a lo que se vino. */
.pm-flow-scene .pm-flow-diagram {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-height: none;
}

.pm-flow-scene .pm-flow-sheet,
.pm-flow-scene .pm-flow-add {
  flex: none;
}

/* El nombre del proyecto es también la puerta a los demás: se está mirando un
   flujo y lo siguiente que se quiere es mirar otro, sin salir y volver a
   entrar. */
.pm-escena-proyecto {
  position: relative;
}

.pm-escena-proyecto-boton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  padding: 3px 8px 3px 4px;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.pm-escena-proyecto-boton > strong {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 600;
}

.pm-escena-proyecto-boton > .bi-chevron-down {
  opacity: 0.5;
  font-size: 9px;
}

.pm-escena-proyecto-boton:hover,
.pm-escena-proyecto.is-open .pm-escena-proyecto-boton {
  border-color: rgba(120, 100, 70, 0.28);
  background: rgba(255, 255, 255, 0.9);
}

.pm-escena-lista {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 3;
  width: min(340px, 84vw);
  max-height: min(420px, 60vh);
  overflow-y: auto;
  border: 1px solid rgba(120, 100, 70, 0.24);
  border-radius: 14px;
  background: #fffefb;
  box-shadow: 0 24px 54px rgba(48, 36, 16, 0.18);
  padding: 6px;
}

.pm-escena-area {
  margin: 8px 8px 4px;
  color: #8a7a5c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-style: italic;
}

.pm-escena-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 7px 9px;
  color: #3d3423;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.pm-escena-item:hover {
  background: rgba(120, 100, 70, 0.1);
}

.pm-escena-item.is-active {
  background: rgba(120, 100, 70, 0.16);
  font-weight: 750;
}

.pm-escena-punto {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pm-dot, #8a7a5c);
}

.pm-escena-nombre {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-escena-item > small {
  flex: none;
  color: #8a7a5c;
  font-size: 10.5px;
}

/* Y desde el flujo se salta a las tareas del mismo proyecto: el flujo dice qué
   falta, las tareas quién lo tiene. */
.pm-escena-tareas {
  position: relative;
  margin-left: 6px;
}

.pm-escena-tareas-boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(120, 100, 70, 0.26);
  border-radius: 999px;
  background: #fff;
  padding: 5px 11px;
  color: #6f6045;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
}

.pm-escena-tareas-boton > .bi-chevron-down {
  opacity: 0.55;
  font-size: 8px;
}

.pm-escena-tareas-boton:hover,
.pm-escena-tareas.is-open .pm-escena-tareas-boton {
  border-color: var(--pm-purple-border, rgba(109, 54, 212, 0.45));
  color: var(--pm-purple-dark, #4a1fa8);
}

.pm-escena-tareas-lista {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 3;
  width: 250px;
  border: 1px solid rgba(120, 100, 70, 0.24);
  border-radius: 14px;
  background: #fffefb;
  box-shadow: 0 24px 54px rgba(48, 36, 16, 0.18);
  padding: 6px;
}

.pm-escena-tareas-lista > button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 8px 10px;
  color: #3d3423;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.pm-escena-tareas-lista > button:hover {
  background: rgba(109, 54, 212, 0.1);
  color: var(--pm-purple-dark, #40209b);
}

.pm-escena-tareas-lista > button > i {
  flex: none;
  font-size: 14px;
  opacity: 0.75;
}

.pm-escena-tareas-lista > button span {
  display: grid;
  gap: 1px;
}

.pm-escena-tareas-lista > button strong {
  font-size: 12.5px;
  font-weight: 750;
}

.pm-escena-tareas-lista > button small {
  color: #8a7a5c;
  font-size: 10.5px;
}

/* La salida va en la esquina, que es donde la mano la busca, y fuera de la
   fila de mandos: metida dentro se colaba entre los niveles y las banderas. */
.pm-flow-scene > .pm-flow {
  position: relative;
}

.pm-flow-scene .pm-flow-toolbar {
  padding-right: 38px;
}

.pm-flow-scene .pm-flow-escena-salir {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

.pm-flow-escena-abrir,
.pm-flow-escena-salir {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(120, 100, 70, 0.26);
  border-radius: 9px;
  background: #fff;
  color: #6f6045;
  cursor: pointer;
  font-size: 12px;
}

.pm-flow-escena-abrir:hover,
.pm-flow-escena-salir:hover {
  border-color: rgba(120, 100, 70, 0.5);
  color: #3f3524;
}

@keyframes pm-escena-entra {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Al entrar se traza: primero el fondo, después cada rama con su tarjeta, en
   el orden en que se leen. Ver cómo se construye dice de un vistazo qué cuelga
   de qué; una foto quieta no cuenta eso. */
.pm-flow-scene.is-trazando .pm-flow-diagram {
  animation: pm-escena-fondo 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pm-flow-scene.is-trazando .pm-flow-branch > .pm-flow-card {
  animation: pm-escena-tarjeta 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--pm-entra, 0ms);
}

/* La espina y el brazo se dibujan solos, como si los trazara una mano. */
.pm-flow-scene.is-trazando .pm-flow-kids > .pm-flow-branch::before {
  animation: pm-escena-brazo 300ms ease-out both;
  animation-delay: var(--pm-entra, 0ms);
}

.pm-flow-scene.is-trazando .pm-flow-kids > .pm-flow-branch::after {
  animation: pm-escena-espina 340ms ease-out both;
  animation-delay: var(--pm-entra, 0ms);
}

@keyframes pm-escena-fondo {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes pm-escena-tarjeta {
  from { opacity: 0; transform: translate3d(-14px, 6px, 0) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes pm-escena-brazo {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes pm-escena-espina {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* Quien pida menos movimiento lo ve aparecer, no construirse. */
@media (prefers-reduced-motion: reduce) {
  .pm-flow-scene,
  .pm-flow-scene.is-trazando .pm-flow-diagram,
  .pm-flow-scene.is-trazando .pm-flow-branch > .pm-flow-card,
  .pm-flow-scene.is-trazando .pm-flow-kids > .pm-flow-branch::before,
  .pm-flow-scene.is-trazando .pm-flow-kids > .pm-flow-branch::after {
    animation: none;
  }
}

/* El borde se desvanece justo por donde sigue habiendo dibujo. Una tarjeta
   cortada en seco parece un fallo; difuminada dice "sigue por aquí". La marca
   la pone el guion, así que cuando ya no queda nada que ver, no hay niebla. */
.pm-flow-diagram.hay-mas-derecha {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), rgba(0, 0, 0, 0.2));
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), rgba(0, 0, 0, 0.2));
}

.pm-flow-diagram.hay-mas-abajo {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), rgba(0, 0, 0, 0.2));
  mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), rgba(0, 0, 0, 0.2));
}

.pm-flow-diagram.hay-mas-derecha.hay-mas-abajo {
  -webkit-mask-image:
    linear-gradient(to right, #000 calc(100% - 34px), rgba(0, 0, 0, 0.2)),
    linear-gradient(to bottom, #000 calc(100% - 34px), rgba(0, 0, 0, 0.2));
  mask-image:
    linear-gradient(to right, #000 calc(100% - 34px), rgba(0, 0, 0, 0.2)),
    linear-gradient(to bottom, #000 calc(100% - 34px), rgba(0, 0, 0, 0.2));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Mientras se pellizca no se selecciona texto ni se animan las tarjetas: cada
   repinte de esos durante el gesto es un parpadeo. La niebla de los bordes se
   apaga quitándole las marcas desde el guion, no tapándola desde aquí. */
.pm-flow-diagram.is-pinching {
  user-select: none;
}

.pm-flow-diagram.is-pinching .pm-flow-card {
  transition: none;
}

.pm-flow-diagram.is-panning {
  cursor: grabbing;
  user-select: none;
}

.pm-flow-tree,
.pm-flow-kids {
  /* La altura del brazo: donde está el centro de una tarjeta dentro de su
     rama. Se calcula, no se centra, porque una rama de treinta hermanos
     mandaría a su padre quince tarjetas hacia abajo y dejaría de leerse como
     que cuelgan de él. */
  --pm-brazo: 28px;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm-flow-tree {
  align-items: flex-start;
  width: max-content;
  /* Se achica con transform y no con zoom: zoom no lo entienden todos los
     navegadores y ahí el mando de acercar no hacía nada. El lienzo de debajo
     se queda con el tamaño ya escalado para que el diagrama sepa cuánto tiene
     que dejar desplazar. */
  transform-origin: 0 0;
}

.pm-flow-lienzo {
  position: relative;
}

/* Cada rama es [tarjeta][lo que cuelga], y la tarjeta se centra contra su
   rama: así la línea que sale de ella apunta al medio de sus hijos. */
.pm-flow-branch {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 4px 0;
}

.pm-flow-branch[data-depth="1"] { --nivel: var(--pm-nivel-1); }
.pm-flow-branch[data-depth="2"] { --nivel: var(--pm-nivel-2); }
.pm-flow-branch[data-depth="3"] { --nivel: var(--pm-nivel-3); }
.pm-flow-branch[data-depth="4"] { --nivel: var(--pm-nivel-4); }
.pm-flow-branch[data-depth="5"] { --nivel: var(--pm-nivel-5); }
.pm-flow-branch[data-depth="6"] { --nivel: var(--pm-nivel-6); }

.pm-flow-kids {
  padding-left: 30px;
}

/* La espina de la rama y el brazo que llega a cada hijo. El brazo sale a media
   altura de la tarjeta; la espina va del primer hermano al último, sin pasarse,
   para que un hijo suelto no arrastre una raya al vacío. */
.pm-flow-kids > .pm-flow-branch::before {
  content: "";
  position: absolute;
  left: -30px;
  top: var(--pm-brazo);
  width: 30px;
  border-top: 2px solid color-mix(in srgb, var(--nivel, #8a7a5c) 45%, transparent);
}

.pm-flow-kids > .pm-flow-branch::after {
  content: "";
  position: absolute;
  left: -30px;
  top: 0;
  bottom: 0;
  border-left: 2px solid color-mix(in srgb, var(--nivel, #8a7a5c) 45%, transparent);
}

.pm-flow-kids > .pm-flow-branch:first-child::after {
  top: var(--pm-brazo);
}

.pm-flow-kids > .pm-flow-branch:last-child::after {
  bottom: calc(100% - var(--pm-brazo));
}

.pm-flow-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 244px;
  border: 1px solid color-mix(in srgb, var(--nivel, #8a7a5c) 32%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--nivel, #8a7a5c) 7%, #fff);
  padding: 7px 8px;
  cursor: pointer;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.pm-flow-card:hover {
  border-color: color-mix(in srgb, var(--nivel, #8a7a5c) 65%, transparent);
}

/* El paso que acaba de escribir la IA: entra dibujándose y se queda un momento
   encendido. Aparecer de golpe se lee como que no pasó nada, y buscarlo
   después en un sitio que no esperabas se lee como un error. */
.pm-flow-card.is-fresh {
  animation: pm-paso-nuevo 1400ms var(--pm-motion-ease);
}

@keyframes pm-paso-nuevo {
  0% { transform: scale(0.86) translateX(-14px); opacity: 0; box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4); }
  35% { transform: scale(1.04) translateX(0); opacity: 1; box-shadow: 0 0 0 8px rgba(124, 58, 237, 0.18); }
  60% { transform: scale(1); box-shadow: 0 0 0 10px rgba(124, 58, 237, 0.1); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}

/* Y su rama se dibuja con él, en vez de aparecer ya trazada. */
.pm-flow-branch:has(> .pm-flow-card.is-fresh)::before,
.pm-flow-branch:has(> .pm-flow-card.is-fresh)::after {
  animation: pm-rama-nueva 900ms var(--pm-motion-ease);
}

@keyframes pm-rama-nueva {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pm-flow-card.is-fresh {
    animation: none;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.22);
  }
}

/* La elegida es la que se está escribiendo abajo: tiene que verse cuál. */
.pm-flow-card.is-open {
  border-color: color-mix(in srgb, var(--nivel, #8a7a5c) 90%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nivel, #8a7a5c) 17%, transparent);
}

/* El paso en curso es la respuesta a "¿en qué vamos?": se ve antes que nada. */
.pm-flow-card[data-state="current"] {
  border-color: var(--pm-purple);
  background: var(--pm-purple-soft);
}

.pm-flow-card[data-state="done"] {
  background: rgba(47, 158, 100, 0.08);
  border-color: rgba(47, 158, 100, 0.34);
}

.pm-flow-branch.is-dragging > .pm-flow-card {
  opacity: 0.45;
}

.pm-flow-branch.is-drop-before > .pm-flow-card {
  box-shadow: inset 0 3px 0 0 var(--pm-purple);
}

.pm-flow-branch.is-drop-after > .pm-flow-card {
  box-shadow: inset 0 -3px 0 0 var(--pm-purple);
}

.pm-flow-card-body {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.pm-flow-card-title {
  overflow: hidden;
  color: #3d3423;
  font-size: 12.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-flow-card[data-state="done"] .pm-flow-card-title {
  color: #4c6b57;
  text-decoration: line-through rgba(35, 118, 75, 0.4);
}

.pm-flow-card-foot {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pm-flow-card-foot > em {
  color: #a2947a;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pm-flow-card[data-state="current"] .pm-flow-card-foot > em {
  color: var(--pm-purple-dark);
}

.pm-flow-card[data-state="done"] .pm-flow-card-foot > em {
  color: #23764b;
}

.pm-flow-card-count {
  color: #57492f;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* La flecha de plegar: dice que ahí dentro hay más, y lo abre y lo cierra. */
button.pm-flow-card-in {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid color-mix(in srgb, var(--nivel, #8a7a5c) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--nivel, #8a7a5c) 14%, #fff);
  color: color-mix(in srgb, var(--nivel, #8a7a5c) 92%, #000);
  padding: 2px 6px 2px 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: background 0.16s ease, border-color 0.16s ease;
}

button.pm-flow-card-in > i {
  font-size: 9px;
  transition: transform 0.16s ease;
}

button.pm-flow-card-in:hover {
  border-color: var(--nivel, #8a7a5c);
  background: color-mix(in srgb, var(--nivel, #8a7a5c) 24%, #fff);
}

/* Plegado se pinta entero: es cuando de verdad hay algo escondido. Abierto se
   apaga, que ya se ve lo que hay al lado. */
button.pm-flow-card-in[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--nivel, #8a7a5c) 26%, transparent);
  background: transparent;
}

button.pm-flow-card-in[aria-expanded="true"] > i {
  transform: rotate(90deg);
}

.pm-flow-card-in.is-leaf {
  display: block;
  width: 14px;
}

/* La bandera de lo que corre prisa, delante del título: se ve en el diagrama
   sin abrir nada. */
.pm-flow-card-flag {
  margin-right: 3px;
  font-size: 10px;
}

.pm-flow-card[data-priority="green"] .pm-flow-card-flag { color: #2f9e64; }
.pm-flow-card[data-priority="yellow"] .pm-flow-card-flag { color: #c9a227; }
.pm-flow-card[data-priority="red"] .pm-flow-card-flag { color: #d4381f; }
.pm-flow-card[data-priority="top"] .pm-flow-card-flag {
  color: #e0a21a;
  animation: pm-estrella 2.4s ease-in-out infinite;
}

@keyframes pm-estrella {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(224, 162, 26, 0)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 5px rgba(224, 162, 26, 0.9)); transform: scale(1.18); }
}

/* La tarjeta de lo primero de todo se distingue de un vistazo: el borde en oro
   y un halo que respira. Es lo único que tiene que encontrarte a ti. */
.pm-flow-card[data-priority="top"] {
  border-color: rgba(224, 162, 26, 0.75);
  animation: pm-estrella-halo 2.4s ease-in-out infinite;
}

@keyframes pm-estrella-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 162, 26, 0.28); }
  50% { box-shadow: 0 0 0 5px rgba(224, 162, 26, 0.1); }
}

/* Quien pide menos movimiento no lo tiene: el oro sigue diciendo lo mismo. */
@media (prefers-reduced-motion: reduce) {
  .pm-flow-card[data-priority="top"],
  .pm-flow-card[data-priority="top"] .pm-flow-card-flag {
    animation: none;
  }

  .pm-flow-card[data-priority="top"] {
    box-shadow: 0 0 0 3px rgba(224, 162, 26, 0.18);
  }
}

/* La roja tiñe además el borde: es la que hay que ver de lejos. */
.pm-flow-card[data-priority="red"] {
  border-color: rgba(212, 56, 31, 0.55);
}

.pm-flow-flags {
  display: inline-flex;
  gap: 3px;
  flex: none;
}

.pm-flow-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(120, 100, 70, 0.24);
  border-radius: 999px;
  background: #fff;
  color: #8a7a5c;
  padding: 4px 9px;
  cursor: pointer;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
}

.pm-flow-flag > span {
  display: none;
}

/* Solo la prioridad puesta dice su nombre; la otra es un icono hasta que se
   pasa por encima, igual que los botones de estado. */
.pm-flow-flag.is-active > span,
.pm-flow-flag:hover > span {
  display: inline;
}

.pm-flow-flag[data-prio="green"] { color: #2f9e64; }
.pm-flow-flag[data-prio="yellow"] { color: #c9a227; }
.pm-flow-flag[data-prio="red"] { color: #d4381f; }
.pm-flow-flag[data-prio="top"] { color: #e0a21a; }

.pm-flow-flag[data-prio="green"].is-active {
  border-color: rgba(47, 158, 100, 0.6);
  background: rgba(47, 158, 100, 0.14);
  color: #1f7a49;
}

.pm-flow-flag[data-prio="yellow"].is-active {
  border-color: rgba(201, 162, 39, 0.6);
  background: rgba(201, 162, 39, 0.16);
  color: #8a6d12;
}

.pm-flow-flag[data-prio="red"].is-active {
  border-color: rgba(212, 56, 31, 0.55);
  background: rgba(212, 56, 31, 0.12);
  color: #a82c17;
}

.pm-flow-flag[data-prio="top"].is-active {
  border-color: rgba(224, 162, 26, 0.7);
  background: rgba(224, 162, 26, 0.16);
  color: #8a6207;
}

/* Acercar y alejar, como en un plano: en el móvil un diagrama entero no cabe
   ni de lejos, y de cerca solo se ve una tarjeta suelta sin saber de dónde
   cuelga. El número del medio dice cuánto se ve y, pulsado, lo encaja entero. */
.pm-flow-zoom {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(120, 100, 70, 0.26);
  border-radius: 999px;
  background: #fff;
  padding: 1px;
}

.pm-flow-zoom > button {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #57492f;
  padding: 0 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pm-flow-zoom > button:hover {
  background: rgba(120, 100, 70, 0.12);
}

.pm-flow-zoom > .pm-flow-zoom-fit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px !important;
  color: #8a7a5c !important;
  gap: 4px;
}

/* El icono dice lo que hace el botón: recoger el dibujo hasta que se vea entero.
   Solo el número parecía un rótulo, y no que se pudiera pulsar. */
.pm-flow-zoom-fit > i {
  font-size: 9px;
  opacity: 0.75;
}

/* El filtro de banderas: la misma lente para todos los flujos abiertos. */
.pm-flow-filter {
  display: flex;
  align-items: center;
  gap: 3px;
}

.pm-flow-filter > em {
  color: #9a8b6e;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-right: 2px;
  text-transform: uppercase;
}

.pm-flow-filter-flag,
.pm-flow-filter-clear {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(120, 100, 70, 0.24);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  font-size: 10px;
}

.pm-flow-filter-flag[data-prio="green"] { color: #2f9e64; }
.pm-flow-filter-flag[data-prio="yellow"] { color: #c9a227; }
.pm-flow-filter-flag[data-prio="red"] { color: #d4381f; }
.pm-flow-filter-flag[data-prio="top"] { color: #e0a21a; }

.pm-flow-filter-flag:hover,
.pm-flow-filter-clear:hover {
  border-color: rgba(120, 100, 70, 0.5);
}

/* La bandera encendida se ve encendida: sin esto no se sabe si estás mirando
   el flujo entero o un trozo, que es peor que no tener filtro. */
.pm-flow-filter-flag.is-active {
  border-color: currentColor;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent);
}

.pm-flow-filter-clear {
  color: #8a7a5c;
}

/* La ficha del elegido, a lo ancho y debajo: en una tarjeta del diagrama no
   cabe escribir lo que se decidió, y es la mitad de para qué existe el flujo. */
.pm-flow-sheet {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  border: 1px solid rgba(120, 100, 70, 0.2);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
}

.pm-flow-sheet.is-empty {
  color: #a2947a;
  font-size: 12px;
  font-style: italic;
  text-align: center;
}

.pm-flow-sheet[data-state="current"] {
  border-color: var(--pm-purple-border);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.09);
}

.pm-flow-sheet-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pm-flow-sheet .pm-flow-title {
  flex: 1 1 200px;
}

/* Meter un sub-paso se hace desde la ficha del padre: es donde ya estás
   mirando cuando decides que eso se parte. */
.pm-flow-sheet-add {
  display: flex;
  gap: 8px;
  margin-top: 3px;
}

.pm-flow-sheet-add input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid rgba(120, 100, 70, 0.26);
  border-radius: 9px;
  background: #fffdf7;
  padding: 6px 9px;
  color: #3d3423;
  font-family: inherit;
  font-size: 12px;
}

.pm-flow-sheet-add input:focus {
  border-color: var(--pm-purple-border);
  outline: none;
}

/* En el móvil el diagrama se arrastra de lado, y las tarjetas se estrechan
   para que quepan dos niveles a la vez. */
@media (max-width: 720px) {
  .pm-flow-card {
    width: 200px;
  }

  .pm-flow-kids {
    padding-left: 22px;
  }

  .pm-flow-kids > .pm-flow-branch::before {
    left: -22px;
    width: 22px;
  }

  .pm-flow-kids > .pm-flow-branch::after {
    left: -22px;
  }
}

/* Partir un paso: el gesto que baja de nivel. */
.pm-flow-split {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(120, 100, 70, 0.24);
  border-radius: 8px;
  background: #fff;
  color: #8a7a5c;
  cursor: pointer;
  font-size: 12px;
  flex: none;
}

.pm-flow-split:hover {
  border-color: var(--pm-purple-border);
  background: var(--pm-purple-soft);
  color: var(--pm-purple-dark);
}

/* Con el dedo no se arrastra: ahí están las flechas. */
.pm-flow-move-step {
  display: none;
  grid-auto-flow: column;
  gap: 2px;
  flex: none;
}

.pm-flow-move-step button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  border: 1px solid rgba(120, 100, 70, 0.24);
  border-radius: 8px;
  background: #fff;
  color: #8a7a5c;
  cursor: pointer;
  font-size: 9px;
}

@media (pointer: coarse) {
  /* Sin ratón no hay arrastre —ese gesto mueve el plano— así que aquí vuelven
     las flechas, que son la única forma de ordenar, y los puntitos sobran. */
  .pm-flow-card-actions .pm-flow-move-step {
    display: inline-grid;
  }

  .pm-flow-grip {
    display: none;
  }

  .pm-flow-card {
    padding: 10px 9px;
  }

  .pm-flow-card .pm-flow-marker {
    cursor: default;
  }
}

/* El número es el asa: por ahí se agarra la tarjeta para moverla dentro de su
   columna. El resto de la tarjeta es el botón que entra en ella. */
.pm-flow-card .pm-flow-marker {
  cursor: grab;
}

.pm-flow-rollup {
  display: inline-flex;
  align-items: baseline;
  border: 1px solid rgba(120, 100, 70, 0.2);
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.9);
  padding: 3px 10px;
  flex: none;
}

.pm-flow-rollup > b {
  color: #57492f;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pm-flow-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pm-flow-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pm-flow-title {
  flex: 1 1 220px;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  padding: 4px 6px;
  color: #3d3423;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
}

input.pm-flow-title:hover,
input.pm-flow-title:focus {
  border-color: rgba(120, 100, 70, 0.3);
  background: #fff;
  outline: none;
}

.pm-flow-states {
  display: inline-flex;
  gap: 3px;
  flex: none;
}

.pm-flow-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(120, 100, 70, 0.24);
  border-radius: 999px;
  background: #fff;
  color: #8a7a5c;
  padding: 4px 9px;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 700;
}

.pm-flow-state > span {
  display: none;
}

.pm-flow-state.is-active {
  border-color: var(--pm-purple);
  background: var(--pm-purple-soft);
  color: var(--pm-purple-dark);
}

/* Solo el estado activo dice su nombre: los otros dos son iconos hasta que se
   pasa por encima, para que la fila no sea una hilera de etiquetas. */
.pm-flow-state.is-active > span,
.pm-flow-state:hover > span {
  display: inline;
}

.pm-flow-state:disabled {
  opacity: 0.45;
  cursor: default;
}

.pm-flow-remove {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #a89878;
  cursor: pointer;
  font-size: 10px;
}

.pm-flow-remove:hover {
  background: #fdeceb;
  color: #b42d1c;
}

.pm-flow-detail {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  padding: 6px 8px;
  color: #443b28;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  resize: vertical;
}

/* Vacío se ve que es un hueco donde escribir, no un renglón muerto. */
textarea.pm-flow-detail::placeholder {
  color: #a2947a;
  font-style: italic;
}

textarea.pm-flow-detail:hover,
textarea.pm-flow-detail:focus {
  border-color: rgba(120, 100, 70, 0.3);
  background: #fff;
  outline: none;
}

/* Un detalle vacío ocupa una línea. Con cuatro niveles abiertos, dos líneas en
   blanco por paso convertían el desglose en una alfombra y había que hacer
   scroll para ver tres pasos. Al entrar a escribir, crece. */
textarea.pm-flow-detail:placeholder-shown {
  height: 27px;
  min-height: 0;
  padding-top: 3px;
  padding-bottom: 3px;
}

textarea.pm-flow-detail:placeholder-shown:focus {
  height: 58px;
}

.pm-flow-detail.is-read {
  margin: 0;
  white-space: pre-wrap;
}

.pm-flow-author {
  color: #a2947a;
  font-size: 10px;
  font-weight: 600;
}

/* La ficha es donde se escribe: se despega del diagrama con papel propio. */
.pm-flow-sheet .pm-flow-title {
  font-size: 14px;
}

.pm-flow-sheet .pm-flow-detail {
  border-color: rgba(120, 100, 70, 0.18);
  background: #fffdf7;
}

.pm-flow-add {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(120, 100, 70, 0.22);
}

.pm-flow-add input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid rgba(120, 100, 70, 0.26);
  border-radius: 8px;
  background: #fff;
  padding: 7px 10px;
  color: #3d3423;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
}

.pm-flow-add button {
  flex: none;
  gap: 6px;
}

.pm-flow-empty,
.pm-flow-readonly {
  margin: 0;
  padding: 10px 4px;
  color: #a09070;
  font-size: 12px;
  font-style: italic;
  list-style: none;
}

@media (max-width: 720px) {
  .pm-flow-head {
    gap: 6px;
  }

  .pm-flow-title {
    flex: 1 1 100%;
  }
}

/* Cuántos piden atención ahí dentro, para saber si merece abrirse. */
.pm-table-area-toggle > em {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(196, 63, 46, 0.14);
  color: #a83521;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.pm-table-row td {
  padding: 11px 10px;
  vertical-align: middle;
}

.pm-table-row:hover,
.pm-table-row:focus-visible {
  background: rgba(180, 150, 96, 0.12);
  outline: none;
}

.pm-table-row.is-alert .pm-table-name > span:last-child {
  font-weight: 700;
}

.pm-table-name > span:last-child {
  vertical-align: middle;
}

.pm-table-name {
  min-width: 0;
  font-weight: 650;
}

.pm-table-dot {
  display: inline-block;
  vertical-align: middle;
  margin-right: 9px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  /* --pm-paint trae la paleta ya resuelta: un color plano o el degradado. */
  background: var(--pm-paint, var(--pm-dot, #8a7a5c));
  box-shadow: 0 0 0 1px rgba(75, 63, 48, 0.35);
}

.pm-table-area,
.pm-table-due {
  color: #7c6c50;
  white-space: nowrap;
}

.pm-table-progress {
  white-space: nowrap;
}

.pm-table-bar {
  display: inline-block;
  vertical-align: middle;
  margin-right: 9px;
  width: 88px;
  height: 7px;
  border-radius: 999px;
  background: rgba(75, 63, 48, 0.14);
  overflow: hidden;
}

.pm-table-bar > i {
  display: block;
  width: var(--pm-fill, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--pm-paint, var(--pm-dot, #8a7a5c));
  opacity: 0.85;
  transform-origin: left center;
}

.pm-table-progress > b {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.pm-table-chip {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--pm-dot, #8a7a5c);
  border-radius: 999px;
  color: #4a3f2c;
  background: color-mix(in srgb, var(--pm-dot, #8a7a5c) 16%, transparent);
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
}

.pm-table-open {
  color: #7c6c50;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pm-table-open em {
  color: #b4452f;
  font-style: normal;
}

@media (max-width: 720px) {
  .pm-hub-stage[data-mode="table"] {
    padding: 10px;
  }

  .pm-table-plate {
    padding: 10px;
  }

  .pm-table {
    font-size: 14px;
  }

  /* En el teléfono manda el nombre y en qué paso va: eso es lo que se viene a
     mirar. Lo que sigue, el estado y la entrega se leen abriendo el flujo, que
     es donde están de verdad; apretados aquí solo servían para que la tabla no
     cupiera. (Esta regla escondía las columnas 2, 4 y 6 de cuando la tabla
     tenía otras: dejaba fuera justo el paso actual.) */
  .pm-table th:nth-child(n+3),
  .pm-table td:nth-child(n+3) {
    display: none;
  }

  /* El punto no debe saltar de línea y dejar el nombre huérfano. */
  .pm-table-dot {
    margin-right: 7px;
  }

  .pm-table-row td {
    padding: 12px 6px;
  }

  .pm-table-bar {
    width: 54px;
  }
}

/* --- Bosque: lámina botánica a tinta -------------------------------------- */
/* El movimiento lo lleva GSAP; aquí vive solo el aspecto del papel y la tinta. */

.pm-hub-stage[data-mode="forest"] {
  border-color: #d9cdb2;
  background: radial-gradient(circle at 50% 42%, #fdfaf1 0%, #f8f1e0 62%, #efe4cb 100%);
  box-shadow: inset 0 0 60px rgba(120, 96, 58, 0.08);
}

.sketch-speckle {
  fill: #4b3f30;
}

.sketch-frame {
  fill: none;
  stroke: #4b3f30;
  stroke-width: 1.6;
  opacity: 0.72;
}

.sketch-frame--inner {
  stroke-width: 0.9;
  opacity: 0.38;
}

.sketch-ground,
.sketch-grass,
.sketch-trunk,
.sketch-branch,
.sketch-twig,
.sketch-flourish {
  fill: none;
  stroke: #4b3f30;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sketch-ground {
  stroke-width: 1.4;
  opacity: 0.55;
}

.sketch-grass {
  stroke-width: 1.3;
  opacity: 0.6;
}

.sketch-trunk {
  stroke-width: 2.6;
}

.sketch-trunk--fine {
  stroke-width: 1.2;
  opacity: 0.55;
}

.sketch-branch {
  stroke-width: 2.2;
}

.sketch-twig {
  stroke-width: 1.4;
  opacity: 0.8;
}

.sketch-flourish {
  stroke-width: 1;
  opacity: 0.45;
}

/* Etiqueta de área en serif itálica: rótulo de lámina de herbario. */
.sketch-area-label {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 17px;
  fill: #57492f;
  letter-spacing: 0.02em;
}

.leaf-pop {
  cursor: pointer;
}

.leaf-pop:focus-visible {
  outline: none;
}

.leaf-stem {
  fill: none;
  stroke: #4b3f30;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.leaf-outline {
  fill: none;
  stroke: #4b3f30;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.leaf-vein {
  fill: none;
  stroke: #4b3f30;
  stroke-width: 0.9;
  opacity: 0.5;
  stroke-linecap: round;
}

/* Marchita: el pigmento pierde vida, la tinta se queda. */
.leaf-pop.is-wilted {
  filter: saturate(0.62);
}

.leaf-pop.is-golden .leaf-fill {
  filter: drop-shadow(0 0 10px rgba(224, 179, 77, 0.7));
}

.leaf-label {
  pointer-events: none;
}

/* El hilo de la hoja a su nombre: es lo que dice de quién es el rótulo sin
   tener que encerrarlo en una caja. */
.leaf-tie {
  fill: none;
  stroke: rgba(75, 63, 48, 0.34);
  stroke-width: 1;
  stroke-linecap: round;
}

/* El nombre va escrito a mano, como la anotación de una lámina de herbario, y
   no en una tarjeta blanca: doce tarjetas tapaban el dibujo, doce anotaciones
   no. Para que se lea sobre lo que sea, el texto lleva su propio halo de papel
   en vez de un fondo: es un contorno del color de la lámina pintado DEBAJO de
   la letra, así que aclara lo justo y no dibuja ningún rectángulo. */
.leaf-name {
  fill: #3d3423;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.01em;
  paint-order: stroke fill;
  stroke: #fffdf6;
  stroke-width: 3.6px;
  stroke-linejoin: round;
}

.leaf-meta {
  fill: #7c6c50;
  font-size: 11px;
  paint-order: stroke fill;
  stroke: #fffdf6;
  stroke-width: 3.2px;
  stroke-linejoin: round;
  /* El detalle solo al posarse: el nombre es lo que hay que ver siempre; el
     avance y la fecha ya están en la tabla y en la ficha. */
  opacity: 0;
  transition: opacity 200ms var(--pm-motion-ease);
}

.leaf:hover .leaf-meta,
.leaf:focus-within .leaf-meta {
  opacity: 1;
}

.fallen-leaf .fallen-outline {
  fill: none;
  stroke: #4b3f30;
  stroke-width: 1.2;
  opacity: 0.6;
}

/* En pantalla estrecha el texto del SVG queda diminuto: se agranda. */
@media (max-width: 720px) {
  .leaf-name { font-size: 18px; stroke-width: 4.4px; }
  .leaf-meta { font-size: 15px; }
  .sketch-area-label { font-size: 22px; }
}

/* --- Brisa de pétalos y detalle del tronco -------------------------------- */

.petal {
  pointer-events: none;
}

.sketch-bark {
  fill: none;
  stroke: #4b3f30;
  stroke-width: 1;
  opacity: 0.32;
  stroke-linecap: round;
}

.sketch-knot {
  fill: none;
  stroke: #4b3f30;
  stroke-width: 1.1;
  opacity: 0.55;
  stroke-linecap: round;
}

.sketch-leader {
  fill: none;
  stroke: #4b3f30;
  stroke-width: 1.6;
  opacity: 0.9;
  stroke-linecap: round;
}

.sketch-subbranch {
  fill: none;
  stroke: #4b3f30;
  stroke-width: 1.7;
  opacity: 0.92;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Con muchos proyectos el nombre ya no se esconde: eso era el precio de la
   tarjeta blanca. Solo se apaga un poco para que la lámina respire, y la hoja
   sobre la que estás lo devuelve entero. */
.pm-hub-stage[data-dense="1"] .leaf-name {
  opacity: 0.82;
  transition: opacity 240ms var(--pm-motion-ease);
}

.pm-hub-stage[data-dense="1"] .leaf:hover .leaf-name,
.pm-hub-stage[data-dense="1"] .leaf:focus-within .leaf-name {
  opacity: 1;
}

/* --- Adjuntos del chat como chips ----------------------------------------- */

.pm-ai-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 10px 0 0;
}

.pm-ai-attachments[hidden] {
  display: none;
}

.pm-ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--pm-purple-border);
  border-radius: 999px;
  background: var(--pm-purple-soft);
  color: var(--pm-navy);
  font-size: 11.5px;
  font-weight: 600;
  animation: pm-action-enter 240ms var(--pm-motion-ease);
}

.pm-ai-chip > i {
  color: var(--pm-purple);
  font-size: 12px;
}

.pm-ai-chip > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-ai-chip.is-loading {
  color: var(--pm-muted);
  padding-right: 12px;
}

.pm-ai-chip button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pm-muted);
  cursor: pointer;
  font-size: 9px;
  transition: background var(--pm-motion-fast) linear, color var(--pm-motion-fast) linear;
}

.pm-ai-chip button:hover {
  background: rgba(109, 54, 212, 0.16);
  color: var(--pm-purple-dark);
}

/* --- Desplegable del árbol y la tabla ------------------------------------- */
/* Sustituye al diálogo: se ancla a la hoja o la fila que se tocó, así el árbol
   se sigue viendo detrás y elegir formato cuesta un solo toque. */
.pm-hub-menu {
  position: absolute;
  z-index: 60;
  width: min(248px, calc(100% - 24px));
  display: grid;
  gap: 10px;
  border: 1px solid var(--pm-purple-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 44px rgba(45, 26, 102, 0.22);
  padding: 12px;
  animation: pm-action-enter 200ms var(--pm-motion-ease);
  backdrop-filter: blur(6px);
}

.pm-hub-menu[hidden] {
  display: none;
}

.pm-hub-menu-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.pm-hub-menu-titles {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}

/* Editar cabe junto al nombre en vez de gastar una fila del menú. */
.pm-hub-menu-edit {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--pm-muted);
  cursor: pointer;
  font-size: 12px;
  transition: background var(--pm-motion-fast) linear, color var(--pm-motion-fast) linear, border-color var(--pm-motion-fast) linear;
}

.pm-hub-menu-edit:hover,
.pm-hub-menu-edit:focus-visible {
  border-color: var(--pm-purple-border);
  background: var(--pm-purple-soft);
  color: var(--pm-purple-dark);
}

.pm-hub-menu-head strong {
  overflow: hidden;
  color: var(--pm-navy);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-hub-menu-head small {
  color: var(--pm-muted);
  font-size: 11.5px;
}

.pm-hub-menu-views,
.pm-hub-menu-actions {
  display: grid;
  gap: 4px;
}

.pm-hub-menu-actions {
  border-top: 1px solid var(--pm-purple-border);
  padding-top: 8px;
}

.pm-hub-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  padding: 8px 10px;
  color: var(--pm-navy);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 650;
  text-align: left;
  transition: background var(--pm-motion-fast) linear, border-color var(--pm-motion-fast) linear;
}

.pm-hub-menu button > i {
  color: var(--pm-purple);
  font-size: 14px;
}

.pm-hub-menu button:hover,
.pm-hub-menu button:focus-visible {
  border-color: var(--pm-purple-border);
  background: var(--pm-purple-soft);
}

.pm-hub-menu [data-pm-hub-complete] > i {
  color: #b3541e;
}

.pm-hub-menu [data-pm-hub-complete].is-reopen > i {
  color: var(--pm-purple);
}

/* Vista general junto a "Nuevo proyecto": desde dentro de un proyecto no había
   forma de volver al árbol sin buscarla en otro sitio. */
.pm-project-list-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Terminado: verde tenue y una palomita. Nada de bloques de color, que en una
   lista larga saturan. */
.pm-sidebar-project.is-done {
  background: rgba(47, 158, 100, 0.07);
}

.pm-sidebar-project.is-done strong {
  color: #2b6b4c;
}

/* La marca lateral conserva el color elegido del proyecto: el fondo verde y la
   palomita ya dicen que está terminado, y así no se pierde su color. */

.pm-sidebar-project-done {
  color: #2f9e64;
  font-size: 13px;
}

/* --- Etapas del tablero ---------------------------------------------------- */
.pm-stages-dialog {
  max-width: 560px;
}

.pm-stages {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pm-stage-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 132px 30px 30px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--pm-purple-border);
  border-left: 4px solid var(--pm-purple);
  border-radius: 10px;
  background: #fff;
  padding: 7px 9px;
}

/* El color del borde dice el tipo de un vistazo. */
.pm-stage-row[data-kind="done"] {
  border-left-color: #2f9e64;
}

.pm-stage-row[data-kind="blocked"] {
  border-left-color: #d1341f;
}

.pm-stage-grip {
  color: var(--pm-muted);
  font-size: 13px;
}

.pm-stage-row input,
.pm-stage-row select {
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  padding: 4px 6px;
  color: var(--pm-navy);
  font-size: 12.5px;
  font-weight: 650;
}

.pm-stage-row input:hover,
.pm-stage-row input:focus,
.pm-stage-row select:hover,
.pm-stage-row select:focus {
  border-color: var(--pm-purple-border);
  background: var(--pm-purple-soft);
  outline: none;
}

.pm-stage-row button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--pm-muted);
  cursor: pointer;
  font-size: 11px;
}

.pm-stage-row button:hover:not(:disabled) {
  background: var(--pm-purple-soft);
  color: var(--pm-purple-dark);
}

.pm-stage-row button:disabled {
  opacity: 0.3;
  cursor: default;
}

.pm-stage-add {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.pm-stage-add input {
  flex: 1 1 auto;
  min-width: 0;
}

.pm-stage-add button {
  flex: none;
  gap: 6px;
}

.pm-stages-note {
  display: flex;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--pm-muted);
  font-size: 12px;
  line-height: 1.45;
}

.pm-stages-note > i {
  flex: none;
  margin-top: 2px;
}

/* --- Campos de la ficha de tarea ------------------------------------------ */
.pm-task-fields {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  max-height: min(46vh, 380px);
  overflow-y: auto;
}

.pm-task-field-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 92px 30px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--pm-purple-border);
  border-radius: 10px;
  background: #fff;
  padding: 7px 9px;
}

/* Apagado se ve apagado, pero sigue ahí para volver a encenderlo. */
.pm-task-field-row.is-off {
  background: var(--pm-surface-soft, #f7f7fb);
  opacity: 0.62;
}

.pm-task-field-switch {
  display: grid;
  place-items: center;
}

.pm-task-field-switch input {
  width: 15px;
  height: 15px;
  accent-color: var(--pm-purple);
  cursor: pointer;
}

.pm-task-field-name {
  color: var(--pm-navy);
  font-size: 12.5px;
  font-weight: 700;
}

.pm-task-field-row input[type="text"] {
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  padding: 4px 6px;
  color: var(--pm-navy);
  font-size: 12.5px;
  font-weight: 650;
}

.pm-task-field-row input[type="text"]:hover,
.pm-task-field-row input[type="text"]:focus {
  border-color: var(--pm-purple-border);
  background: var(--pm-purple-soft);
  outline: none;
}

.pm-task-field-type {
  color: var(--pm-muted);
  font-size: 11.5px;
  font-weight: 650;
  text-align: right;
}

.pm-task-field-row button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--pm-muted);
  cursor: pointer;
  font-size: 11px;
}

.pm-task-field-row button:hover {
  background: #fdeceb;
  color: #b42d1c;
}

/* Las opciones de una lista caen bajo su fila, a todo el ancho. */
.pm-task-field-row .pm-task-field-options {
  grid-column: 2 / -1;
  border: 1px dashed var(--pm-purple-border);
  border-radius: 7px;
  background: transparent;
  padding: 4px 7px;
  color: var(--pm-navy);
  font-size: 11.5px;
  font-weight: 600;
}

/* Los campos propios entran en la rejilla de la ficha como uno más. */
.pm-custom-fields {
  display: contents;
}

.pm-custom-fields[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .pm-task-field-row {
    grid-template-columns: 24px minmax(0, 1fr) 28px;
  }

  .pm-task-field-type {
    display: none;
  }

  /* El formulario es una rejilla: el ancho mínimo de la fila de añadir se lo
     imponía a todas las demás y el diálogo entero se salía por la izquierda.
     Aquí el nombre va en su renglón y debajo el tipo con el botón. */
  [data-pm-task-fields-dialog] .pm-stage-add {
    flex-wrap: wrap;
  }

  [data-pm-task-fields-dialog] .pm-stage-add input {
    flex: 1 1 100%;
  }

  [data-pm-task-fields-dialog] .pm-stage-add select {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* --- Subtareas: lista de comprobación y nada más --------------------------- */
.pm-subtasks-field > span em {
  color: var(--pm-muted);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
}

.pm-subtasks {
  display: grid;
  gap: 3px;
  margin-bottom: 8px;
}

.pm-subtask {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--pm-purple-border);
  border-radius: 9px;
  background: #fff;
  padding: 7px 9px;
  cursor: pointer;
}

.pm-subtask input {
  width: 16px;
  height: 16px;
  accent-color: #2f9e64;
  cursor: pointer;
}

.pm-subtask > span {
  min-width: 0;
  color: var(--pm-navy);
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.pm-subtask.is-done > span {
  color: var(--pm-muted);
  text-decoration: line-through;
}

.pm-subtask button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--pm-muted);
  cursor: pointer;
  font-size: 10px;
}

.pm-subtask button:hover {
  background: rgba(109, 54, 212, 0.14);
  color: var(--pm-purple-dark);
}

.pm-subtasks-empty {
  margin: 0 0 8px;
  color: var(--pm-muted);
  font-size: 12px;
}

.pm-subtask-add {
  display: flex;
  gap: 8px;
}

.pm-subtask-add input {
  flex: 1 1 auto;
  min-width: 0;
}

.pm-subtask-add button {
  flex: none;
  gap: 6px;
}

/* --- Archivos del proyecto ------------------------------------------------ */
/* Material general: se sube y ya está en el proyecto, sin pasar por una
   propuesta ni colgar de ninguna tarea. */
.pm-project-files {
  display: grid;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pm-project-files-count {
  margin: 0 0 2px;
  color: var(--pm-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pm-project-files-empty {
  margin: 0;
  border: 1px dashed var(--pm-purple-border);
  border-radius: 10px;
  padding: 14px;
  color: var(--pm-muted);
  font-size: 12.5px;
  text-align: center;
}

.pm-project-file {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--pm-purple-border);
  border-radius: 10px;
  background: #fff;
  padding: 8px 10px;
}

.pm-project-file > i {
  color: var(--pm-purple);
  font-size: 15px;
}

.pm-project-file div {
  min-width: 0;
}

.pm-project-file a,
.pm-project-file strong {
  display: block;
  overflow: hidden;
  color: var(--pm-navy);
  font-size: 12.5px;
  font-weight: 650;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-project-file a:hover {
  color: var(--pm-purple-dark);
  text-decoration: underline;
}

.pm-project-file small {
  display: block;
  color: var(--pm-muted);
  font-size: 11px;
}

.pm-project-file button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pm-muted);
  cursor: pointer;
  font-size: 12px;
}

.pm-project-file button:hover {
  background: #fdf1ef;
  color: #c0301c;
}

/* --- Color del proyecto --------------------------------------------------- */
/* Solo el círculo relleno: sin etiquetas ni nombres, para que la fila ocupe lo
   mínimo dentro de la ficha. */
.pm-color-field {
  gap: 8px;
}

.pm-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.pm-color-swatch {
  position: relative;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pm-paint, #6d36d4);
  box-shadow: 0 0 0 1px rgba(45, 26, 102, 0.14);
  cursor: pointer;
  transition: transform var(--pm-motion-fast) ease, box-shadow var(--pm-motion-fast) ease;
}

.pm-color-swatch:hover {
  transform: scale(1.14);
}

/* El elegido lleva un anillo por fuera, que no tapa el color. */
.pm-color-swatch.is-active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pm-purple);
  transform: scale(1.08);
}

.pm-color-swatch:focus-visible {
  outline: 2px solid var(--pm-purple);
  outline-offset: 3px;
}

/* --- Eliminar para siempre ------------------------------------------------ */
/* El diálogo avisa antes de un borrado sin vuelta atrás, y su botón pide un
   segundo toque: el primero arma, el segundo borra. */
.pm-danger-dialog {
  max-width: 460px;
}

.pm-danger-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pm-danger-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fdeceb;
  color: #d1341f;
  font-size: 19px;
}

.pm-danger-body {
  display: grid;
  gap: 12px;
  padding: 4px 0 8px;
}

.pm-danger-lead {
  margin: 0;
  color: var(--pm-navy);
  font-size: 13.5px;
  line-height: 1.5;
}

.pm-danger-lead strong {
  color: #c0301c;
}

.pm-danger-list {
  display: grid;
  gap: 4px;
  margin: 0;
  border: 1px solid #f4d4cf;
  border-radius: 10px;
  background: #fdf6f5;
  padding: 10px 14px 10px 28px;
  color: #7a3226;
  font-size: 12.5px;
}

.pm-danger-note {
  display: flex;
  gap: 8px;
  margin: 0;
  color: var(--pm-muted);
  font-size: 12px;
  line-height: 1.45;
}

.pm-danger-note > i {
  flex: none;
  margin-top: 2px;
}

.pm-button--danger {
  border: 1px solid #d1341f;
  background: #d1341f;
  color: #fff;
}

.pm-button--danger:hover {
  background: #b82a17;
}

/* Armado: el segundo toque es el que borra, y se nota. */
.pm-button--danger[data-confirming="true"] {
  animation: pm-danger-arm 1.4s ease-in-out infinite;
}

@keyframes pm-danger-arm {
  0%, 100% { box-shadow: 0 0 0 0 rgba(209, 52, 31, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(209, 52, 31, 0); }
}

.pm-project-delete {
  margin-right: auto;
  color: #c0301c;
}

.pm-project-delete:hover {
  border-color: #f0bdb5;
  background: #fdf1ef;
}

.pm-hub-menu-danger {
  color: #c0301c !important;
}

.pm-hub-menu-danger > i {
  color: #c0301c !important;
}

.pm-hub-menu-danger[hidden] {
  display: none;
}

/* --- Plantitas: el historial del árbol ------------------------------------ */
.sprout {
  cursor: pointer;
}

.sprout-stem,
.sprout-outline {
  fill: none;
  stroke: #4a3a26;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.72;
}

.sprout-label {
  fill: #6b5a3e;
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 11px;
  font-style: italic;
  opacity: 0.75;
  pointer-events: none;
}

.sprout:hover .sprout-label,
.sprout:focus-visible .sprout-label {
  opacity: 1;
}

/* El corte: la tijera entra, cierra sobre el pecíolo y deja el tajo marcado. */
.cut-snip {
  fill: none;
  stroke: #b3541e;
  stroke-width: 2.6;
  stroke-linecap: round;
}

.cut-blade {
  fill: none;
  stroke: #4a3a26;
  stroke-width: 2.6;
  stroke-linecap: round;
}

.cut-ring {
  fill: none;
  stroke: #4a3a26;
  stroke-width: 2;
}

.cut-sprout .sprout-stem,
.cut-sprout .sprout-outline {
  opacity: 0.85;
}

/* --- Historial del proyecto ----------------------------------------------- */
.pm-history-drawer {
  position: absolute;
  z-index: 95;
  top: 12px;
  left: 12px;
  bottom: 12px;
  width: min(340px, calc(100% - 24px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  border: 1px solid var(--pm-purple-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 44px rgba(45, 26, 102, 0.2);
  padding: 14px;
  animation: pm-action-enter 240ms var(--pm-motion-ease);
}

.pm-history-drawer[hidden] {
  display: none;
}

.pm-history-drawer > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.pm-history-kicker {
  display: block;
  color: var(--pm-purple);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pm-history-drawer > header strong {
  color: var(--pm-navy);
  font-size: 15px;
}

.pm-history-drawer > header button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--pm-purple-border);
  border-radius: 8px;
  background: #fff;
  color: var(--pm-muted);
  cursor: pointer;
}

.pm-history-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pm-history-item {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 2px 8px 0;
}

/* Línea de tiempo: el punto y el hilo que los une. */
.pm-history-dot {
  position: relative;
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border: 2px solid var(--pm-purple);
  border-radius: 50%;
  background: #fff;
}

.pm-history-item:not(:last-child) .pm-history-dot::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 50%;
  width: 1px;
  height: calc(100% + 14px);
  transform: translateX(-50%);
  background: var(--pm-purple-border);
}

.pm-history-item[data-type="project_completed"] .pm-history-dot {
  border-color: #2f9e64;
  background: #2f9e64;
}

.pm-history-item strong {
  display: block;
  color: var(--pm-navy);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
}

.pm-history-item small {
  color: var(--pm-muted);
  font-size: 11px;
}

.pm-history-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 4px;
  color: var(--pm-muted);
  font-size: 12.5px;
}

/* --- Completar una tarea de un toque -------------------------------------- */
.pm-task-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.pm-task-complete {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #9aa3bd;
  cursor: pointer;
  font-size: 15px;
  transition: color var(--pm-motion-fast) linear, transform var(--pm-motion-fast) ease;
}

.pm-task-complete:hover {
  color: #2f9e64;
  transform: scale(1.12);
}

.pm-task-complete.is-done {
  color: #2f9e64;
}

.pm-task-card.is-completing {
  border-color: #9ad9b6;
  background: #f4fcf7;
}

/* Aviso de qué manda a Lark, junto a la casilla de seguimiento. */
.pm-task-notify-note {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--pm-purple-border);
  border-radius: 10px;
  background: var(--pm-purple-soft);
  color: var(--pm-navy);
  font-size: 12px;
  line-height: 1.45;
}

.pm-task-notify-note > i {
  flex: none;
  margin-top: 1px;
  color: var(--pm-purple);
}

/* Referencias: archivos que cuelgan de una tarea concreta. */
.pm-task-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.pm-task-ref-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 23px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--pm-purple-soft);
  color: var(--pm-purple-dark);
  font-size: 11px;
  font-weight: 700;
}

.pm-task-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.pm-task-ref {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--pm-purple-border);
  border-radius: 999px;
  background: var(--pm-purple-soft);
  font-size: 11.5px;
  font-weight: 600;
}

.pm-task-ref > i {
  color: var(--pm-purple);
  font-size: 12px;
}

.pm-task-ref a,
.pm-task-ref > span {
  min-width: 0;
  overflow: hidden;
  color: var(--pm-navy);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-task-ref a:hover {
  color: var(--pm-purple-dark);
  text-decoration: underline;
}

.pm-task-ref button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pm-muted);
  cursor: pointer;
  font-size: 9px;
}

.pm-task-ref button:hover {
  background: rgba(109, 54, 212, 0.16);
  color: var(--pm-purple-dark);
}

.pm-task-refs-empty {
  margin: 0 0 8px;
  color: var(--pm-muted);
  font-size: 12px;
}

.pm-task-refs-add {
  justify-self: start;
}

/* Chincheta del chip: el <select> se estira invisible sobre el icono para que
   el área de toque sea la del icono entero, cómoda también en el móvil. */
.pm-ai-chip-anchor {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--pm-muted);
  cursor: pointer;
  transition: background var(--pm-motion-fast) linear, color var(--pm-motion-fast) linear;
}

.pm-ai-chip-anchor:hover,
.pm-ai-chip-anchor:focus-within {
  background: rgba(109, 54, 212, 0.16);
  color: var(--pm-purple-dark);
}

.pm-ai-chip-anchor > i {
  font-size: 11px;
  pointer-events: none;
}

.pm-ai-chip-anchor select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.pm-ai-chip.is-anchored {
  border-color: var(--pm-purple);
  background: rgba(109, 54, 212, 0.14);
}

.pm-ai-chip.is-anchored .pm-ai-chip-anchor {
  color: var(--pm-purple-dark);
}

/* Título de sección dentro del menú de tareas móvil. */
.pm-mobile-task-menu-label {
  display: block;
  margin: 8px 0 2px;
  padding: 8px 12px 0;
  border-top: 1px solid var(--pm-line);
  color: var(--pm-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* --- La tabla y su diagrama en el móvil ------------------------------------ */
/* Aquí el ancho es lo escaso: cada cosa que ocupa una línea entera empuja el
   diagrama fuera de la pantalla. Se aprieta todo lo que no es el dibujo. */
@media (max-width: 720px) {
  .pm-table-plate {
    padding: 8px 8px 10px;
  }

  .pm-table-caption {
    font-size: 13px;
  }

  /* Con dos columnas, el reparto se fija: si no, el nombre largo de un proyecto
     estira la tabla y hay que deslizarla de lado para leer en qué paso va. */
  .pm-table {
    table-layout: fixed;
  }

  /* El reparto se declara en la cabecera: con table-layout fijo, el ancho de
     cada columna lo fija la primera fila, y la primera fila es el <thead>. */
  .pm-table th:nth-child(1) {
    width: 68%;
  }

  .pm-table th:nth-child(2) {
    width: 32%;
  }

  .pm-table-name,
  .pm-table-step,
  .pm-table-next {
    padding: 8px 6px;
  }

  /* El punto de salud es un círculo, y en una fila flex se estiraba a óvalo. */
  .pm-table-dot {
    flex: none;
  }

  /* El nombre se recorta con puntos suspensivos en vez de partirse en tres
     renglones: la fila mide lo mismo tenga el proyecto el nombre que tenga. */
  .pm-table-name > span:not(.pm-table-dot):not(.pm-move-project),
  .pm-table-step b,
  .pm-table-step small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* La manija de arrastrar no sirve sin ratón —para eso están las flechas— y
     en la fila del área ocupa el sitio del botón que sí se usa. */
  .pm-area-grip {
    display: none;
  }

  .pm-table-area-row .pm-flow-openall {
    padding: 4px 9px;
    font-size: 11px;
  }

  /* Las flechas de mover se comían un tercio del ancho de la fila y dejaban el
     nombre en "Expansió…". Se quedan —sin ratón no hay otra forma de ordenar—
     pero una encima de otra: así gastan el alto de la fila, que sobra, en vez
     del ancho, que no. */
  .pm-table-name .pm-move-project {
    grid-auto-flow: row;
    gap: 2px;
    padding-left: 0;
    margin-left: 6px;
  }

  .pm-move-project button,
  .pm-move-area button {
    width: 26px;
    height: 22px;
    min-width: 26px;
    min-height: 22px;
    border-radius: 7px;
    font-size: 9px;
    box-shadow: none;
  }

  .pm-move-area button {
    height: 28px;
    min-height: 28px;
  }

  /* Y las filas no necesitan tanto aire: con doce proyectos, cada píxel de
     alto es scroll antes de llegar al flujo. */
  .pm-table-row > td {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .pm-table-name > span {
    font-size: 12.5px;
  }

  .pm-table-step b {
    font-size: 12px;
  }

  /* Iconos pequeños: la tira lleva nivel, acercamiento y banderas, y cuanto
     menos haya que deslizarla, mejor. */
  .pm-flow-level {
    min-width: 21px;
    height: 21px;
    padding: 0 3px;
  }

  .pm-flow-filter-flag,
  .pm-flow-filter-clear {
    width: 21px;
    height: 21px;
  }

  .pm-flow-zoom > button {
    min-width: 22px;
    height: 21px;
    padding: 0 4px;
  }

  .pm-flow-zoom-fit {
    min-width: 38px !important;
  }

  /* Y en la cabecera del área, el botón entero en una línea. */
  .pm-table-area-row .pm-flow-openall {
    padding: 3px 8px;
    font-size: 10px;
    white-space: nowrap;
  }

  /* La cabecera del flujo, en dos líneas en vez de cinco: el título arriba y
     todos los mandos abajo en una tira que se desliza de lado cuando no caben.
     Apilados ocupaban más alto que el propio dibujo. */
  .pm-flow-toolbar {
    gap: 6px;
    margin-bottom: 6px;
  }

  /* Bajan de renglón antes que cortarse. Deslizarlos de lado escondía media
     bandera en el borde, y media bandera no se lee como "hay más": se lee como
     que está roto.

     Repartidos en dos filas: los niveles con el acercamiento —que es lo que se
     toca a la vez— y debajo las banderas con el botón del chat. Con seis
     niveles llegaron a ocupar cinco renglones y doscientos y pico píxeles
     encima de un dibujo que mide seiscientos. */
  .pm-flow-mandos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    order: 3;
    width: 100%;
  }

  /* Dos filas: arriba los niveles con el acercamiento —lo que se toca a la
     vez—, abajo las banderas con el chat. Y si algún día no cupieran, se parten
     por donde toque; lo que no hacen es cortarse. */
  .pm-flow-levels {
    flex-wrap: wrap;
    gap: 3px;
  }

  /* El armazón le pone 44px de mínimo a todo botón del área de aplicaciones,
     que para el dedo está bien pero aquí son diez botones en 289px: salían en
     cinco renglones y el nivel 6 se quedaba cortado por el borde. Estos son
     mandos secundarios y se aprietan; los de la tarjeta siguen grandes. */
  .pm-flow-mandos .pm-flow-level {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    padding: 0;
  }

  .pm-flow-mandos .pm-flow-filter-flag,
  .pm-flow-mandos .pm-flow-filter-clear {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
  }

  .pm-flow-toolbar .pm-flow-escena-abrir,
  .pm-flow-toolbar .pm-flow-escena-salir {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }

  .pm-flow-mandos .pm-flow-zoom > button {
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    padding: 0 4px;
  }

  .pm-flow-mandos .pm-flow-zoom > .pm-flow-zoom-fit {
    min-width: 52px !important;
  }

  .pm-flow-mandos .pm-flow-ask {
    order: 4;
    min-width: 34px;
    min-height: 34px;
    margin-left: auto;
    padding: 7px 10px;
  }

  .pm-flow-levels,
  .pm-flow-filter,
  .pm-flow-zoom {
    flex: none;
    margin-left: 0;
  }

  .pm-flow-toolbar > strong {
    font-size: 12px;
  }

  .pm-flow-count {
    font-size: 10px;
  }

  .pm-flow-levels > em,
  .pm-flow-filter > em {
    display: none;
  }

  .pm-flow-levels,
  .pm-flow-filter,
  .pm-flow-zoom {
    order: 3;
    margin-left: 0;
  }

  /* El botón del chat, solo su icono: el texto se comía una línea entera. */
  .pm-flow-ask {
    margin-left: auto;
    padding: 6px 9px;
  }

  .pm-flow-ask > span,
  .pm-flow-ask {
    font-size: 0;
  }

  .pm-flow-ask > i {
    font-size: 13px;
  }

  /* Y el dibujo se queda con el alto: es lo que se vino a mirar. */
  .pm-flow-diagram {
    max-height: 66vh;
    padding: 10px 12px 10px 4px;
  }

  .pm-flow-card {
    width: 232px;
  }

  .pm-flow-diagram[data-cards="full"] .pm-flow-card {
    width: 246px;
  }

  .pm-flow-card-actions {
    gap: 4px;
  }

  /* Los botones de la tarjeta viven dentro de un dibujo achicado: a 60% un
     botón de 22px se queda en 13 de pantalla y no hay dedo que le acierte.
     Se agrandan aquí para que al alejar sigan siendo tocables. */
  .pm-flow-card-actions .pm-flow-split,
  .pm-flow-card-actions .pm-flow-remove,
  .pm-flow-card-actions .pm-flow-move-step button {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    font-size: 12px;
  }

  .pm-flow-card-actions .pm-flow-state,
  .pm-flow-card-actions .pm-flow-flag {
    padding: 6px 9px;
    font-size: 11px;
  }

  /* A pantalla completa en un teléfono el marco sobra: cada píxel de margen es
     un píxel menos de dibujo. */
  .pm-flow-scene {
    padding: 6px;
  }

  .pm-flow-scene > .pm-flow {
    border-radius: 12px;
    padding: 8px 9px;
  }

  .pm-flow-scene .pm-flow-add {
    display: none;
  }
}