.op {
  height: 100vh;
    height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--grey-050);
  overflow: hidden;
}

.op .topbar,
.td-mobile-topbar {
  background: var(--navy-800);
  border-bottom: none;
}

/* Ecrã inteiro na app iOS/Android: o espaço da barra de estado e do
   indicador de início é dado pelo contentor de cada página (o padding do
   .op com env(safe-area-inset-*)), por isso o cabeçalho não soma o seu —
   layout.css põe-no dentro do .topbar, o que na app esticava o cartão
   do cabeçalho até por trás do relógio. Fora da app env() vale 0 e estes
   valores são exatamente os de layout.css. */
.op .topbar { top: env(safe-area-inset-top, 0px); height: var(--topbar-h); padding-top: 0; }
@media (max-width: 768px) {
  .op .topbar { height: auto; padding-top: var(--sp-3); }
}

.op .topbar__toggle,
.td-mobile-topbar .topbar__toggle {
  color: rgba(255, 255, 255, 0.85);
    order: 2;
  margin-left: auto;
}
.op .topbar__toggle:hover,
.td-mobile-topbar .topbar__toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.op__brand-mini {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--white);
  padding: 4px;
}

.op__brand-mini img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.op .topbar__title,
.td-mobile-topbar .topbar__title {
  color: var(--white);
  font-size: var(--fs-xl);
}

.op .topbar__subtitle,
.op__topbar-actions--desktop {
  display: none;
}

.op__content {
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 720px;
  margin: 0 auto;
}

.op__scroll {
  flex: 1;
  min-height: 0;
    overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.op__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}

.op-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-3) var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--op-stat-color, var(--navy-600));
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  text-align: center;
}

.op-stat__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 2px;
  border-radius: var(--r-full);
  background: var(--op-stat-bg, var(--navy-100));
  color: var(--op-stat-color, var(--navy-600));
}

.op-stat__value {
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.1;
  color: var(--navy-800);
}

.op-stat__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey-500);
  white-space: nowrap;
}

.op-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.op-panel .panel__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.op-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.op-panel .panel__header {
  padding: 0 0 var(--sp-1) 0;
  background: transparent;
  border-bottom: none;
}

.op-panel .panel__header .icon { display: none; }

.op-panel .panel__body { padding: 0; }

.op-panel__action { margin-left: auto; }

.op-panel .panel__header .op-panel__action .icon {
  color: var(--white);
}

.op-panel--framed {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-xs);
  border-radius: var(--r-lg);
}

.op-panel--framed .panel__header {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.op-panel--framed .panel__header .icon { display: block; }

.op-panel--framed .panel__body { padding: var(--sp-4); }

.op-panel__new {
  display: flex;
  justify-content: flex-end;
}

.op__loading {
  text-align: center;
  color: var(--text-muted);
  padding: var(--sp-6) 0;
}

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

.op-task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}

a.op-task:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}

a.op-task .icon { color: var(--grey-400); flex-shrink: 0; }

.op-task__main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }

/* Etiqueta da prioridade + indicadores (atrasada / externa) na mesma linha,
   todos com a mesma caixa: largura, tipo de letra e espaçamento iguais. */
.op-task__tags {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--sp-2);
  align-self: flex-start;
  max-width: 100%;
}

.op-task__tags .prio,
.op-task__tags .op-task__flag {
  flex: 0 1 88px;
  min-width: 0;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-task__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.op-task__flag--late { background: var(--state-late-bg); color: var(--state-late); }
.op-task__flag--ext { background: var(--navy-050); color: var(--navy-600); }

/* Lista única de tarefas (pendentes + em curso, minhas e de outros) — cartões
   maiores, clicáveis, com estado e colaborador a executar. */
button.op-task {
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
button.op-task:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}

.op-task--rich {
  align-items: stretch;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
}
.op-task--rich .op-task__main { flex: 1; gap: var(--sp-2); }
.op-task--rich .op-task__tags { flex-wrap: wrap; }
.op-task--rich .op-task__title { white-space: normal; }

.op-task__state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 88px;
  min-width: 0;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-task__state--running { background: var(--prio-low-bg); color: var(--prio-low); }
.op-task__state--paused { background: var(--prio-mid-bg); color: var(--prio-mid); }
.op-task__state--pending { background: var(--grey-100); color: var(--grey-600); }

.op-task__person {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy-700);
}
.op-task__person .icon { color: var(--grey-400); flex-shrink: 0; }

.op-task__chev {
  color: var(--grey-400);
  flex-shrink: 0;
  align-self: center;
}

.op-task__title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-task__meta { font-size: var(--fs-sm); color: var(--text-muted); }

.op-task__side {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.op-task__delete { color: var(--state-late); }
.op-task__delete:hover { background: var(--state-late-bg); }

.topbar__toggle[data-tip]::after {
  left: auto;
  right: 0;
  top: calc(100% + 8px);
  bottom: auto;
  transform: none;
}

@media (min-width: 641px) {
  .op .topbar__toggle[data-tip]::after {
    left: 0;
    right: auto;
  }
}

@media (min-width: 641px) {
    body:has(.op) {
    height: auto;
    overflow-y: auto;
  }

  .op {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .op .topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }

  .op .topbar__toggle {
    color: var(--grey-500);
    order: 0;
    margin-left: 0;
  }
  .op .topbar__toggle:hover { background: var(--grey-100); }

  .op__brand-mini { display: none; }

  .op .topbar__title { color: var(--navy-800); }

  .op .topbar__subtitle { display: block; }
  .op__topbar-actions--desktop { display: flex; }

  .op-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--sh-xs);
    border-radius: var(--r-lg);
  }

  .op-panel .panel__header {
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }

  .op-panel .panel__header .icon { display: block; }

  .op-panel .panel__body { padding: var(--sp-4); }

  .op__content {
    max-width: 1100px;
    padding: var(--sp-6) var(--sp-8);
    overflow: visible;
  }

  .op__scroll {
    flex: none;
    overflow: visible;
  }

  .op__stats {
    justify-content: center;
    grid-template-columns: repeat(3, minmax(0, 220px));
  }

  .op-stat {
    flex-direction: row;
    text-align: left;
    padding: var(--sp-4);
    gap: var(--sp-3);
  }

  .op-stat__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .op-stat__value { font-size: var(--fs-2xl); }
  .op-stat__label { font-size: var(--fs-xs); }

  .op__task-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    align-items: start;
  }

    .op__task-list .empty {
    grid-column: 1 / -1;
  }
}