/* ============================================================================
   operacao.css — módulo Operação: estrutura, lista (quadro e árvore), tarefa.

   Regras do arquivo:
   - só variáveis de base.css (nenhuma cor fixa): o tema escuro troca as
     variáveis e esta tela acompanha sem regra extra;
   - tudo com prefixo `op-`: classe curta colide com ornamento de outra tela;
   - a 400px a página não rola na horizontal. Quem é largo (quadro, tabela do
     Markdown) rola dentro do próprio contêiner.
   ========================================================================== */

/* `hidden` precisa vencer os `display:flex` deste arquivo */
.op-tela [hidden], .op-menu [hidden], .op-token-novo[hidden] { display: none !important; }

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

.op-tela { min-width: 0; }

/* ------------------------------------------------------------------ trilha */
.op-trilha {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
  margin-bottom: 10px; font-size: 12.5px; color: var(--txt-suave); min-width: 0;
}
.op-trilha a { color: var(--txt-suave); overflow-wrap: anywhere; }
.op-trilha a:hover { color: var(--zera); }
.op-trilha-sep { color: var(--txt-fraco); }
.op-trilha-atual { color: var(--txt); font-weight: 600; overflow-wrap: anywhere; }

/* --------------------------------------------------------------- estrutura */
.op-estrutura { display: flex; flex-direction: column; gap: 12px; }

.op-pasta { overflow: hidden; transition: box-shadow var(--transicao); }
.op-pasta.op-destaque { box-shadow: 0 0 0 2px var(--zera), var(--sombra); }

.op-pasta-topo {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 4px; border-bottom: 1px solid var(--linha);
}
.op-pasta-alternar {
  flex: 1; min-width: 0; min-height: 44px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 10px; border: 0; border-radius: var(--raio-p);
  background: transparent; color: var(--txt); font: inherit; text-align: left; cursor: pointer;
}
.op-pasta-alternar:hover { background: var(--bg-hover); }
.op-pasta-alternar svg { flex: 0 0 auto; transition: transform var(--t-rapido); color: var(--txt-suave); }
.op-pasta-alternar[aria-expanded="true"] svg { transform: rotate(90deg); }
.op-pasta-nome { font-weight: 650; font-size: 14px; overflow-wrap: anywhere; min-width: 0; }
.op-pasta-conta { font-size: 12px; color: var(--txt-suave); }

.op-pasta-listas { display: flex; flex-direction: column; }
.op-pasta-vazia { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; }

.op-lista {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 40px; min-height: 48px;
  border-bottom: 1px solid var(--linha);
  transition: background var(--t-rapido);
}
.op-lista:last-child { border-bottom: 0; }
.op-lista:hover { background: var(--bg-hover); }
.op-lista.op-arquivada .op-lista-nome { color: var(--txt-suave); }
.op-lista-principal { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.op-lista-nome { font-weight: 600; color: var(--txt); overflow-wrap: anywhere; min-width: 0; }
.op-lista-nome:hover { color: var(--zera); }
.op-lista-selos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.op-lista-empresa { font-size: 12px; color: var(--txt-suave); overflow-wrap: anywhere; }
.op-lista-conta { font-size: 12px; color: var(--txt-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.op-lista-conta strong { color: var(--txt); font-size: 13px; }

.op-menu-botao { flex: 0 0 auto; }
.op-reticencias { font-size: 18px; line-height: 1; letter-spacing: 0.02em; }

/* -------------------------------------------------------------- menu ⋯ */
.op-menu {
  position: fixed; z-index: 8500;
  min-width: 210px; max-width: calc(100vw - 16px);
  padding: 4px; border: 1px solid var(--linha); border-radius: var(--raio-p);
  background: var(--bg-elevado); box-shadow: var(--sombra-forte);
  animation: op-menu-abre 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes op-menu-abre { from { opacity: 0; transform: translateY(-4px); } }
.op-menu-item {
  width: 100%; min-height: 36px; display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border: 0; border-radius: 6px; background: transparent;
  color: var(--txt); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.op-menu-item svg { color: var(--txt-suave); flex: 0 0 auto; }
.op-menu-item:hover, .op-menu-item:focus-visible { background: var(--bg-ativo); outline: none; }
.op-menu-perigo { color: var(--erro-forte); }
.op-menu-perigo svg { color: var(--erro); }

/* ------------------------------------------------------------- formulários */
.op-check { min-height: 36px; font-size: 13px; }
.op-form .op-check { display: flex; }

.op-token-form {
  display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: 10px; align-items: end;
}
.op-token-form .campo { margin-bottom: 0; }
.op-token-novo {
  margin-top: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--alerta); border-radius: var(--raio-p);
  background: var(--alerta-bg); color: var(--alerta-forte);
}
.op-token-copiar { display: flex; gap: 8px; }
.op-token-valor { flex: 1; min-width: 0; color: var(--txt); }
.op-tokens { display: flex; flex-direction: column; }
.op-token {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--linha); min-width: 0;
}
.op-token:last-child { border-bottom: 0; }
.op-token .peq { overflow-wrap: anywhere; }

/* ------------------------------------------------------------ tela de lista */
.op-titulo-linha { flex-wrap: wrap; }
.op-titulo-linha h1 { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.op-lista-empresa-link { display: inline-block; margin-top: 2px; }
.op-resumo-lista { margin-top: 2px; }
.op-alternar-visao { display: inline-flex; gap: 4px; }

.op-aviso-info {
  margin-bottom: 12px; padding: 9px 12px; border-radius: var(--raio-p);
  background: var(--info-bg); color: var(--info-forte); font-size: 12.5px;
  border: 1px solid var(--linha);
}
.op-aviso { margin-bottom: 12px; }

.op-barra {
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.op-busca { flex: 1 1 220px; max-width: 340px; min-width: 0; }

.op-area { min-width: 0; }

/* ------------------------------------------------------------------ árvore */
.op-arvore {
  --op-recuo: 12px;
  background: var(--bg-elevado); border: 1px solid var(--linha);
  border-radius: var(--raio); overflow: hidden;
}
.op-linha {
  --op-nivel: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px;
  min-height: 44px; padding: 4px 8px 4px calc(6px + var(--op-nivel) * var(--op-recuo));
  border-bottom: 1px solid var(--linha); min-width: 0;
  transition: background var(--t-rapido), opacity var(--t-rapido);
}
.op-linha:last-child { border-bottom: 0; }
.op-linha:hover { background: var(--bg-hover); }
.op-linha.op-salvando { opacity: 0.6; }
.op-linha.op-contexto .op-linha-titulo { color: var(--txt-fraco); }
.op-linha.op-encerrada .op-linha-titulo { color: var(--txt-suave); text-decoration: line-through; text-decoration-color: var(--linha-forte); }

.op-linha-principal {
  flex: 1 1 240px; min-width: 0;
  display: flex; align-items: center; gap: 6px;
}
.op-alternar, .op-alternar-vazio { flex: 0 0 32px; width: 32px; height: 32px; }
.op-alternar {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--txt-suave); cursor: pointer;
}
.op-alternar:hover { background: var(--bg-ativo); color: var(--txt); }
.op-alternar svg { transition: transform var(--t-rapido); }
.op-alternar[aria-expanded="true"] svg { transform: rotate(90deg); }

.op-linha-titulo {
  min-width: 0; color: var(--txt); font-size: 13.5px; font-weight: 500;
  overflow-wrap: anywhere; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.op-linha-titulo:hover { color: var(--zera); }
.op-linha-filhas {
  flex: 0 0 auto; padding: 0 6px; border-radius: 999px; font-size: 11px; line-height: 18px;
  background: var(--bg-afundado); color: var(--txt-suave); font-variant-numeric: tabular-nums;
}
.op-linha-desc { flex: 0 0 auto; color: var(--txt-fraco); display: inline-flex; }

.op-linha-meta {
  flex: 0 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.op-add-sub { opacity: 0.55; }
.op-linha:hover .op-add-sub, .op-add-sub:focus-visible { opacity: 1; }

.op-linha-nova { background: var(--bg-ativo); }
.op-nova-sub { min-width: 0; flex: 1; }
.op-dica-teclas { white-space: nowrap; }

/* ------------------------------------------------------- átomos de tarefa */
select.op-status {
  width: auto; max-width: 190px; min-height: 30px; padding: 3px 26px 3px 8px;
  font-size: 12px; background-position: right 8px center;
  border-left: 4px solid var(--op-cor-status, var(--linha-forte));
}
.op-detalhe-lateral select.op-status { width: 100%; max-width: none; min-height: 36px; }

.op-prio { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.op-prio-urgente { color: var(--erro); }
.op-prio-alta { color: var(--alerta); }
.op-prio-normal { color: var(--info); }
.op-prio-baixa { color: var(--txt-fraco); }

.op-prazo {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 12px; color: var(--txt-suave); font-variant-numeric: tabular-nums;
}
.op-prazo.op-atrasada { color: var(--erro-forte); font-weight: 600; }

.op-avatares { display: inline-flex; align-items: center; }
.op-avatar { width: 22px; height: 22px; font-size: 9px; border: 2px solid var(--bg-elevado); }
.op-avatares .op-avatar + .op-avatar { margin-left: -6px; }
.op-avatar-externo {
  background: var(--bg-afundado); color: var(--txt-suave);
  border: 1px dashed var(--linha-forte);
}
.op-avatar-mais { background: var(--bg-afundado); color: var(--txt-suave); }

.op-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.op-etiqueta {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px;
  background: var(--bg-afundado);
  background: color-mix(in srgb, var(--op-cor-etiqueta, var(--txt-fraco)) 14%, var(--bg-elevado));
  color: var(--txt);
}
.op-etiqueta-ponto {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--op-cor-etiqueta, var(--txt-fraco));
}
.op-etiqueta-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-etiqueta-mais { color: var(--txt-suave); }

.op-chip-x {
  display: inline-grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px;
  margin-right: -4px; border: 0; border-radius: 50%; background: transparent;
  color: var(--txt-suave); cursor: pointer;
}
.op-chip-x:hover { background: var(--bg-hover); color: var(--erro-forte); }

/* ------------------------------------------------------------------ quadro */
.op-quadro { min-width: 0; }
.op-quadro .kanban { min-height: 320px; }
.op-quadro .kanban-coluna { max-height: calc(100vh - var(--topo-altura) - 250px); min-height: 220px; }

.op-cartao { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.op-cartao.op-encerrada .op-cartao-titulo { color: var(--txt-suave); text-decoration: line-through; text-decoration-color: var(--linha-forte); }
.op-cartao-mae {
  font-size: 11px; color: var(--txt-fraco);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.op-cartao-titulo { font-size: 13px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.op-cartao-rodape { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.op-cartao-filhas { font-size: 11.5px; color: var(--txt-suave); white-space: nowrap; }

/* ----------------------------------------------------------------- tarefa */
.op-tarefa-topo {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.op-titulo-tarefa {
  width: 100%; min-height: 0; resize: none; overflow: hidden;
  padding: 4px 8px; margin-left: -8px;
  border: 1px solid transparent; border-radius: var(--raio-p);
  background: transparent; color: var(--txt);
  font-size: 22px; font-weight: 650; line-height: 1.3; letter-spacing: -0.018em;
}
.op-titulo-tarefa:hover:not(:disabled) { border-color: var(--linha); }
.op-titulo-tarefa:focus { background: var(--bg-elevado); }
.op-titulo-tarefa:disabled { background: transparent; color: var(--txt); cursor: default; }
.op-btn-excluir:hover:not(:disabled) { color: var(--erro-forte); border-color: var(--erro); }

.op-detalhe {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start;
}
.op-detalhe-principal { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.op-detalhe-lateral { min-width: 0; position: sticky; top: 12px; }

.op-campo {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: start;
  padding: 7px 0; border-bottom: 1px solid var(--linha);
}
.op-campo:last-of-type { border-bottom: 0; }
.op-campo-rotulo { font-size: 12px; font-weight: 600; color: var(--txt-suave); padding-top: 8px; }
.op-campo-valor { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.op-linha-add { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.op-linha-add > input, .op-linha-add > select { flex: 1 1 120px; min-width: 0; }
.op-campo-data { display: flex; flex-direction: column; gap: 4px; }
.op-campo-data input[type="date"] { flex: 1 1 130px; }
.op-campo-data input[type="time"] { flex: 0 1 100px; }
.op-bandeira-campo { display: inline-flex; flex: 0 0 auto; }
.op-campo .dica { font-size: 11.5px; color: var(--txt-fraco); line-height: 1.4; }
.op-campo .op-aviso-campo { color: var(--alerta-forte); }

.op-multi { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.op-multi.op-salvando { opacity: 0.6; }
.op-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 26px; }
.op-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 2px 8px 2px 2px; border-radius: 999px; font-size: 12.5px;
  background: var(--bg-afundado); border: 1px solid var(--linha);
}
.op-chip > span:not(.avatar) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.op-chip .op-avatar { border-width: 0; }

.op-autoria { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }

/* confirmação discreta de "gravou" no próprio campo */
@keyframes op-salvou {
  0% { box-shadow: 0 0 0 0 var(--ok-bg); border-color: var(--ok); }
  100% { box-shadow: 0 0 0 6px transparent; }
}
.op-salvou { animation: op-salvou 900ms ease-out; }

/* descrição */
.op-cartao-descricao .cartao-topo { flex-wrap: wrap; }
.op-descricao-edicao { min-height: 220px; font-family: var(--fonte-mono); font-size: 12.5px; }
.op-descricao-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-top: 8px;
}

/* descrição: clicar no texto entra na edição */
.op-markdown-editavel {
  cursor: text; margin: -6px -8px; padding: 6px 8px; border-radius: var(--raio-p);
  transition: background var(--t-rapido);
}
.op-markdown-editavel:hover { background: var(--bg-hover); }
.op-descricao-vazia {
  width: 100%; min-height: 64px; display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border: 1px dashed var(--linha-forte); border-radius: var(--raio-p);
  background: transparent; color: var(--txt-suave); font: inherit; font-size: 13px; text-align: left; cursor: text;
}
.op-descricao-vazia:hover, .op-descricao-vazia:focus-visible { border-color: var(--zera); color: var(--txt); background: var(--bg-hover); }

/* imagem anexada no meio do texto */
.op-markdown .op-md-anexo { display: inline-block; max-width: 100%; margin: 4px 0; text-decoration: none; cursor: zoom-in; }
.op-md-img {
  display: block; max-width: 100%; max-height: 420px; height: auto;
  border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--bg-afundado);
}

.op-markdown { font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; min-width: 0; }
.op-markdown > :first-child { margin-top: 0; }
.op-markdown > :last-child { margin-bottom: 0; }
.op-markdown p { margin: 0 0 10px; }
.op-markdown .op-md-titulo { margin: 16px 0 8px; }
.op-markdown h1 { font-size: 19px; }
.op-markdown h2 { font-size: 17px; }
.op-markdown h3 { font-size: 15px; }
.op-markdown h4, .op-markdown h5, .op-markdown h6 { font-size: 13.5px; }
.op-markdown ul, .op-markdown ol { margin: 0 0 10px; padding-left: 22px; }
.op-markdown li { margin: 2px 0; }
.op-markdown li > ul, .op-markdown li > ol { margin: 2px 0 0; }
.op-markdown li.op-md-tarefa { list-style: none; margin-left: -20px; }
.op-markdown li.op-md-tarefa > input { width: 14px; height: 14px; min-height: 0; margin: 0 4px 0 0; vertical-align: -2px; accent-color: var(--zera); }
.op-markdown a { color: var(--zera); text-decoration: underline; text-underline-offset: 2px; }
.op-markdown .op-md-imagem::before { content: "Imagem: "; color: var(--txt-suave); text-decoration: none; }
.op-markdown code {
  font-family: var(--fonte-mono); font-size: 12px;
  padding: 1px 5px; border-radius: 4px; background: var(--bg-afundado);
}
.op-markdown pre {
  margin: 0 0 10px; padding: 10px 12px; overflow-x: auto;
  border-radius: var(--raio-p); background: var(--bg-afundado); border: 1px solid var(--linha);
}
.op-markdown pre code { padding: 0; background: transparent; white-space: pre; overflow-wrap: normal; }
.op-markdown blockquote {
  margin: 0 0 10px; padding: 2px 0 2px 12px;
  border-left: 3px solid var(--linha-forte); color: var(--txt-suave);
}
.op-markdown hr { border: 0; border-top: 1px solid var(--linha); margin: 14px 0; }
.op-md-tabela { overflow-x: auto; margin: 0 0 10px; max-width: 100%; }
.op-md-tabela table { border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
.op-md-tabela th, .op-md-tabela td {
  padding: 6px 10px; border: 1px solid var(--linha); text-align: left; overflow-wrap: normal;
}
.op-md-tabela th { background: var(--bg-afundado); font-weight: 650; }
.op-md-tabela .op-md-centro { text-align: center; }
.op-md-tabela .op-md-direita { text-align: right; }

/* anexos */
.op-cartao-anexos h3 { display: inline-flex; align-items: center; gap: 4px; }
.op-anexos-conta { color: var(--txt-suave); font-weight: 500; font-size: 13px; }
.op-anexos-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px;
}
.op-anexo {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--bg-elevado);
  overflow: hidden; transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.op-anexo:hover { border-color: var(--linha-forte); box-shadow: var(--sombra); }
.op-anexo-previa {
  display: flex; align-items: center; justify-content: center; height: 108px;
  background: var(--bg-afundado); color: var(--txt-suave); text-decoration: none; overflow: hidden;
}
a.op-anexo-previa { cursor: pointer; }
.op-anexo-previa img { width: 100%; height: 100%; object-fit: cover; }
.op-anexo-icone { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.op-anexo-info { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px 8px; min-width: 0; }
.op-anexo-nome { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-anexo-meta { font-size: 11px; color: var(--txt-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-anexo-acoes {
  position: absolute; top: 6px; right: 6px; display: flex; gap: 4px;
  opacity: 0; transition: opacity var(--t-rapido);
}
.op-anexo:hover .op-anexo-acoes, .op-anexo:focus-within .op-anexo-acoes { opacity: 1; }
.op-anexo-acoes .btn { background: var(--bg-elevado); box-shadow: var(--sombra); }
.op-anexo-remover:hover { color: var(--erro-forte); }
.op-anexo-enviando { opacity: 0.85; }
.op-anexo-barra { display: block; height: 4px; margin-top: 5px; border-radius: 999px; background: var(--bg-afundado); overflow: hidden; }
.op-anexo-barra-cheia { display: block; width: 0; height: 100%; background: var(--zera); transition: width 150ms linear; }
.op-anexos-grade:not([hidden]) + .op-anexo-soltar { margin-top: 10px; }
.op-anexo-soltar {
  width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px;
  padding: 8px 12px; border: 1px dashed var(--linha-forte); border-radius: var(--raio-p);
  background: transparent; color: var(--txt-suave); font: inherit; font-size: 12.5px; text-align: center; cursor: pointer;
}
.op-anexo-soltar:hover, .op-anexo-soltar:focus-visible { border-color: var(--zera); color: var(--zera); background: var(--bg-hover); }
.op-anexo-soltar-limite { color: var(--txt-fraco); font-size: 11.5px; }
.op-cartao-anexos .estado-erro, .op-cartao-anexos .estado { margin-bottom: 10px; }

/* arrastando arquivo sobre a tarefa: a página inteira vira alvo */
.op-soltar-aviso {
  position: fixed; inset: 0; z-index: 7500; display: none; pointer-events: none;
  align-items: center; justify-content: center; padding: 24px;
  background: color-mix(in srgb, var(--zera) 12%, transparent);
  border: 3px dashed var(--zera);
}
.op-tarefa.op-soltando .op-soltar-aviso { display: flex; }
.op-soltar-caixa {
  display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 420px;
  padding: 18px 24px; border-radius: var(--raio); background: var(--bg-elevado); box-shadow: var(--sombra-forte);
  color: var(--txt); text-align: center; overflow-wrap: anywhere;
}
.op-soltar-caixa svg { color: var(--zera); }
.op-soltar-caixa span { font-size: 12.5px; color: var(--txt-suave); }

/* visualizador de imagem */
.modal.op-visualizador { max-width: min(1180px, 96vw); }
.op-visualizador .modal-corpo { padding: 12px; }
.op-visual { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.op-visual-palco { display: flex; align-items: center; gap: 8px; min-width: 0; }
.op-visual-quadro {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg-afundado); border-radius: var(--raio-p); min-height: 200px;
}
.op-visual-img { display: block; max-width: 100%; max-height: 68vh; object-fit: contain; }
.op-visual-nav { flex: 0 0 auto; }
.op-visual-legenda { font-size: 13px; overflow-wrap: anywhere; text-align: center; }

/* checklists */
.op-checklist-bloco + .op-checklist-bloco { margin-top: 14px; }
.op-checklist-bloco h4 { margin: 0 0 6px; }
.op-checklist { list-style: none; margin: 0; padding: 0; }
.op-checklist .op-checklist { padding-left: 20px; }
.op-checklist li { padding: 3px 0; font-size: 13px; overflow-wrap: anywhere; }
.op-check-marca { display: inline-block; width: 18px; color: var(--txt-suave); }
.op-check-feito > span:not(.op-check-marca):not(.op-sr) { color: var(--txt-suave); text-decoration: line-through; }

/* subtarefas e histórico */
.op-subtarefas { display: flex; flex-direction: column; }
.op-subtarefa {
  display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--linha); min-width: 0;
}
.op-subtarefa .op-linha-titulo { flex: 1 1 200px; }
.op-subtarefa.op-encerrada .op-linha-titulo { color: var(--txt-suave); text-decoration: line-through; }
.op-subtarefa-meta { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.op-sub-nova {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--txt-fraco);
}

/* ações da linha (excluir): aparecem ao passar o mouse ou ao focar pelo teclado.
   Numa lista de 900 tarefas, 900 lixeiras sempre visíveis viram ruído. */
.op-linha-excluir { opacity: 0; transition: opacity var(--t-rapido), color var(--t-rapido); }
.op-linha:hover .op-linha-excluir, .op-subtarefa:hover .op-linha-excluir,
.op-linha:focus-within .op-linha-excluir, .op-subtarefa:focus-within .op-linha-excluir,
.op-linha-excluir:focus-visible { opacity: 1; }
.op-linha-excluir:hover { color: var(--erro-forte); }
.op-subtarefa .op-linha-excluir { margin-left: auto; }

.op-linha-anexos {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px;
  font-size: 11px; color: var(--txt-suave); font-variant-numeric: tabular-nums;
}
.op-cartao-rodape .op-linha-anexos { font-size: 11.5px; }

.op-hist-mudancas { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; color: var(--txt-suave); }
.op-hist-mudancas li { overflow-wrap: anywhere; }
.op-hist-campo { font-weight: 600; }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 1100px) {
  .op-detalhe { grid-template-columns: minmax(0, 1fr) 290px; }
}

@media (max-width: 900px) {
  .op-detalhe { grid-template-columns: minmax(0, 1fr); }
  /* no celular os campos (status, prazo) vêm antes da descrição: é o que se
     muda com mais frequência */
  .op-detalhe-lateral { order: -1; position: static; }
}

@media (max-width: 640px) {
  /* título da lista e da tarefa ganham a linha inteira: dividida com os botões,
     "Barra Bakery" quebrava em duas linhas numa coluna de 120px */
  .op-tela .tela-topo > .crescer, .op-tarefa-topo > .crescer { flex-basis: 100%; }
  .op-arvore { --op-recuo: 8px; }
  .op-lista { padding-left: 14px; }
  .op-linha-principal { flex-basis: 100%; }
  .op-linha-meta { padding-left: 38px; }
  .op-busca { max-width: none; flex-basis: 100%; }
  .op-token-form { grid-template-columns: minmax(0, 1fr); }
  .op-titulo-tarefa { font-size: 19px; }
  .op-campo { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .op-campo-rotulo { padding-top: 0; }
  .op-dica-teclas { display: none; }
  select.op-status { max-width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .op-menu, .op-salvou { animation: none !important; }
  .op-alternar svg, .op-pasta-alternar svg { transition: none; }
}

/* Toque (celular/tablet): alvo mínimo de 36px, regra do CONTRATO §7. No mouse
   os controles continuam compactos; o dedo erra o "x" de 18px e remove o
   responsável ou a etiqueta errada. */
@media (pointer: coarse) {
  .op-chip-x { width: 36px; height: 36px; }
  .op-alternar { width: 36px; height: 36px; }
  select.op-status { min-height: 36px; }
}

/* Sem mouse não existe "passar por cima": as ações da linha e do anexo ficam
   sempre à vista, senão no celular não haveria como excluir nem baixar. */
@media (hover: none) {
  .op-linha-excluir { opacity: 0.7; }
  .op-anexo-acoes { opacity: 1; }
}

@media (max-width: 640px) {
  .op-anexos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-visual-palco { gap: 4px; }
}