/* ======================================================== tela Motor (item 150)
     Ele pediu em 08/08/2026: no Windows o WebODM abre numa tela onde da para ver tudo o
     que a maquina esta fazendo, e no servidor nao havia esse controle. Esta e a mesma
     informacao, com o login do Sherlock e filtrada pela conta.
     A moldura e a do padrao: banner 18/22, blocos 18/22 com raio 12, 16px entre eles. */
  /* `flex-wrap` e a faixa de medidores ocupando a linha inteira: o banner deixou de ser uma
     linha so quando os quatro velocimetros entraram nele (item 178). Sem o wrap, eles
     disputariam a linha com os chips e o botao Atualizar, e a 1536 px isso espreme os
     rotulos — medido: os chips comecavam a quebrar palavra. */
  .mot-banner { background: var(--navy); border-radius: 12px; padding: 18px 22px;
                display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4);
                flex-wrap: wrap; }
  /* A FAIXA DE BAIXO DO BANNER antigo (os velocimetros e o freio lado a lado, itens 178 e 244)
     saiu com a tela Motor por voo (24/10/2026): o banner mostra o geral do servidor em barras
     (.mv-geral, abaixo) e o freio do ODM ganhou faixa propria embaixo da fila (.mv-freio). */

  /* O FREIO, dentro do banner navy — cores claras, e nao as do corpo branco. */
  .mot-freio-caixa { border-left: 1px solid rgba(255,255,255,.12); padding-left: var(--s6);
                     min-width: 300px; }
  .mf-rot { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700;
            color: #93a1b8; margin-bottom: 5px; }
  .mf-linha { font-size: 12.5px; color: #cdd8e6; line-height: 1.45; margin-bottom: 9px; }
  .mf-linha b { color: #fff; }
  .mf-alerta { color: var(--warn-claro) !important; }
  .mf-campos { display: flex; align-items: flex-end; gap: 8px; }
  .mf-campos label { display: flex; flex-direction: column; gap: 3px; margin: 0;
                     font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px;
                     font-weight: 700; color: #93a1b8; }
  .mf-campos input { width: 74px; padding: 7px 9px; border-radius: 7px;
                     border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
                     color: #fff; font-weight: 600; font-size: 13px; line-height: 1.2;
                     text-transform: none; letter-spacing: normal; }
  .mf-campos input:focus { border-color: var(--orange); outline: none;
                           box-shadow: 0 0 0 3px rgba(255,101,1,.20); }
  .mf-campos button { padding: 8px 14px; font-size: 12.5px; }
  .mf-faixa { font-size: 11px; color: #7d8ca3; margin-top: 7px; }

  .mot-ico { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,101,1,.16);
             display: flex; align-items: center; justify-content: center; flex: none; }
  .mot-ico svg { width: 26px; height: 26px; color: var(--orange); stroke-width: 1.8; }
  .mot-txt h1 { font-family: var(--brand); font-weight: 800; font-size: 20px; color: #fff; margin: 0; }
  .mot-txt p { margin: 2px 0 0; font-size: 13px; color: var(--tinta-esc-2); }
  .mot-chips { margin-left: auto; display: flex; gap: var(--s2); align-items: center; }
  .mot-chips .cfg-chip.aviso { background: rgba(255,165,36,.16); color: var(--warn-claro); }
  .mot-chips .cfg-chip.mv-espera { background: rgba(255,165,36,.16); color: var(--warn-claro); }
  .mot-banner { row-gap: 10px; }

  /* ================================================ a tela Motor POR VOO — 24/10/2026
     docs/propostas/tela-motor-por-voo-8-voos.png, aprovada por ele: o geral do servidor no
     banner com a fatia de cada voo, um cartao por voo rodando (4 por linha) e a fila com o
     "comeca". Prefixo mv- para nao colidir com nome generico de outra folha (a licao do
     .palco da cortina). A cor de cada voo chega pela variavel --c, posta no cartao. */
  .mv-geral { flex-basis: 100%; display: grid; gap: 32px; margin-top: -4px; padding-top: 12px;
              border-top: 1px solid rgba(255,255,255,.10); }
  .mv-med { min-width: 0; }
  .mv-med small { display: block; font-size: 11.5px; color: #8796ad; }
  .mv-valor { font: 800 18px var(--brand); color: #fff; margin-top: 1px; white-space: nowrap; }
  .mv-valor span { font-family: inherit; font-weight: 500; font-size: 12px; color: #a9b6c8; }
  .mv-barra { height: 10px; border-radius: 6px; background: rgba(255,255,255,.12); display: flex;
              overflow: hidden; margin-top: 8px; }
  .mv-barra i { display: block; height: 100%; }
  .mv-barra i.mv-resto { background: #8a97ab; }
  .mv-leg { font-size: 11px; color: #8796ad; margin-top: 6px; }
  .mv-leg b { color: #dfe6f0; font-weight: 600; }
  .mv-leg.mv-cheio { color: #ffb547; font-weight: 600; }

  .mv-secao { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
  .mv-secao h2 { margin: 0; font: 800 12.5px/1.4 var(--brand); letter-spacing: .6px; text-transform: uppercase;
                 color: var(--navy); border-left: 3px solid var(--orange); padding-left: 9px; }
  .mv-secao span { color: var(--ink-3); font-size: 12.5px; }
  /* Os dois blocos desta tela nao tem a caixa branca do bloco comum: os cartoes e a fila ja
     sao caixas, e caixa dentro de caixa come o respiro que ele pediu. */
  #motAgora, #motFila { background: none; border: 0; padding: 0; box-shadow: none; }

  .mv-voos { display: grid; gap: 16px; }
  .mv-voo { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--c);
            border-radius: 14px; padding: 14px 20px 10px; display: flex; flex-direction: column; min-width: 0; }
  .mv-titulo { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .mv-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
  .mv-titulo b { font: 700 15px var(--brand); color: var(--navy); white-space: nowrap; overflow: hidden;
                 text-overflow: ellipsis; }
  .mv-pasta { font-size: 13px; color: var(--ink); margin: 3px 0 0 18px; font-weight: 500;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mv-quem { font-size: 11.5px; color: var(--ink-3); margin: 1px 0 0 18px; white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; }
  .mv-meio { display: flex; align-items: center; gap: 24px; min-width: 0; }
  .mv-relogio { display: flex; align-items: center; gap: 18px; margin: 12px 0 10px; min-width: 0; }
  .mv-anel { position: relative; width: 96px; height: 96px; flex: none; }
  .mv-anel svg { transform: rotate(-90deg); display: block; }
  .mv-pct { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
            justify-content: center; }
  .mv-pct b { font: 800 24px var(--brand); line-height: 1; color: var(--navy); }
  .mv-pct small { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
  .mv-tempo { min-width: 0; }
  .mv-tempo small { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .5px;
                    font-weight: 600; }
  .mv-falta { font: 800 24px var(--brand); line-height: 1.1; color: var(--navy); white-space: nowrap; }
  .mv-fim { font-size: 13px; margin-top: 3px; color: var(--ink-2); white-space: nowrap; }
  .mv-fim b { color: var(--navy); }
  .mv-selo { display: inline-block; margin-top: 8px; font-size: 10.5px; font-weight: 600;
             border-radius: 999px; padding: 1px 9px; }
  .mv-selo.medido { background: var(--good-bg); color: var(--good); }
  .mv-selo.regua { background: var(--warn-bg); color: var(--warn); }
  /* Com UM voo o cartao vai na largura toda, e os passos aparecem em lista ao lado do relogio. */
  .mv-lista { list-style: none; margin: 0; padding: 0 0 0 24px; border-left: 1px solid var(--hair);
              display: grid; grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 4px 28px;
              font-size: 12.5px; color: var(--ink-3); }
  .mv-um .mv-recursos { flex-direction: row; gap: 32px; }
  .mv-um .mv-r { flex: 1; min-width: 0; }
  .mv-lista li::before { content: "○ "; }
  .mv-lista li.f { color: var(--ink-2); }
  .mv-lista li.f::before { content: "✓ "; color: var(--good); }
  .mv-lista li.a { color: var(--navy); font-weight: 700; }
  .mv-lista li.a::before { content: "● "; color: var(--c); }
  .mv-etapa { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-3); }
  .mv-etapa span:first-child { color: var(--navy); font-weight: 600; white-space: nowrap; overflow: hidden;
                               text-overflow: ellipsis; }
  .mv-etapa span:last-child { white-space: nowrap; }
  .mv-passos { display: flex; gap: 2px; margin-top: 6px; }
  .mv-passos i { flex: 1; height: 5px; border-radius: 2px; background: #e9edf2; }
  .mv-passos i.f { background: var(--c); opacity: .45; }
  .mv-passos i.a { background: var(--c); }
  .mv-recursos { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 12px;
                 border-top: 1px solid var(--hair); }
  .mv-lin { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px;
            color: var(--ink-3); }
  .mv-lin b { color: var(--navy); font-size: 13.5px; }
  .mv-lin b span { color: var(--ink-3); font-weight: 500; font-size: 11.5px; }
  .mv-rb { position: relative; display: block; height: 7px; border-radius: 5px; background: #edf0f4; margin-top: 5px; }
  .mv-rb i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--c); }
  .mv-rb u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--navy); }
  .mv-nota { font-size: 11px; color: var(--ink-3); margin-top: 4px; min-height: 16px; }
  .mv-av { color: var(--warn); font-weight: 600; }
  .mv-voo footer { display: flex; justify-content: space-between; align-items: center; gap: 8px;
                   margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid var(--hair);
                   font-size: 11.5px; line-height: 1.4; color: var(--ink-3); background: none; }
  .mv-acoes { display: flex; gap: 14px; flex: none; }
  /* Logs, Cancelar e Pausar sao LINKS no rodape do cartao, e nao botoes no titulo. */
  .mv-link { background: none; border: 0; padding: 0; min-height: 0; height: auto; font-family: inherit;
             font-size: 11.5px; line-height: 1.4; font-weight: 600; color: var(--info); cursor: pointer;
             box-shadow: none; }
  .mv-link:hover { text-decoration: underline; background: none; }
  .mv-link.mv-perigo { color: var(--bad); }
  .mv-link.mv-forte { color: var(--orange); }
  .mv-link:disabled { color: var(--ink-3); cursor: not-allowed; text-decoration: none; opacity: .7; }

  .mv-fila { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
  .mv-fl { display: grid; gap: 20px; align-items: center; padding: 14px 22px;
           grid-template-columns: 36px minmax(0, 1.5fr) 110px minmax(0, 1.7fr) 100px 100px 90px 228px;
           border-top: 1px solid var(--border); font-size: 12.5px; }
  .mv-fl.mv-cab { padding: 10px 22px; border-top: 0; background: var(--surface-2); font-size: 10.5px;
                  font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-3); }
  .mv-pos { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff;
            display: grid; place-items: center; font-size: 12px; font-weight: 700; }
  .mv-pos.seg { background: var(--border); color: var(--ink-3); font-size: 9.5px; }
  .mv-fl small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400; }
  .mv-proj { min-width: 0; }
  .mv-proj b { font-weight: 700; font-size: 13px; color: var(--navy); }
  .mv-proj em { font-style: normal; color: var(--ink-2); }
  .mv-vez { color: var(--ink-2); font-size: 12px; min-width: 0; }
  .mv-vez .mv-rb { height: 6px; margin: 6px 0 4px; }
  .mv-hora b { font-weight: 700; font-size: 13.5px; color: var(--navy); white-space: nowrap; }
  .mv-esp { color: var(--ink-2); }
  .mv-tam b { font-weight: 600; color: var(--navy); }
  .mv-fl.segurado { background: var(--surface-2); color: var(--ink-3); }
  .mv-fl .fila-acoes { justify-content: flex-end; }

  /* O freio do ODM, embaixo da fila: a mesma caixa navy de antes, agora numa faixa so dele. */
  .mv-freio { background: var(--navy); border-radius: 12px; padding: 14px 22px; margin-bottom: var(--s4); }
  .mv-freio .mot-freio-caixa { border-left: 0; padding-left: 0; }

  /* `margin-bottom` no bloco SOMA ao `gap` da coluna e dobra o vao — a armadilha que o
     padrao registra. Aqui nao ha gap: os dois primeiros blocos sao irmaos soltos, entao a
     margem e quem faz os 16px. */
  #motAgora, #motFila { margin-bottom: var(--s4); }

  .mot-nota { margin-left: auto; font-size: 12px; color: var(--ink-3); text-transform: none;
              letter-spacing: 0; font-weight: 500; }

  /* Cabecalho e linhas compartilham a MESMA variavel de colunas — senao saem de registro. */
  /* A COLUNA "QUEM" ENTROU EM 18/08/2026 — item 276. Os 132px cabem "José Henrique" e
     "Luis Drumond" sem cortar; nome maior corta com reticencia, que e melhor do que
     quebrar a linha e desalinhar a grade inteira. A ultima coluna continua sendo os
     tres botoes: 3x32 + 2x6 de gap = 108, e 8 de folga. */
  /* OITO COLUNAS desde o item 337: "No motor" entrou entre Estado e Tempo. O `1fr` do Projeto
     absorve a largura nova — foi de 132px em Quem para 118px, e o resto ficou igual, porque
     mexer em todas para caber uma seria mudar o registro de colunas que ja estava aprovado. */
  .mot-tab { --mcols: 1fr 118px 64px 104px 150px 78px 92px 104px; }
  .mot-tab .cab, .mot-tab .lin { display: grid; grid-template-columns: var(--mcols);
                                 gap: var(--s3); align-items: center; padding: 9px 4px; }
  .mot-tab .cab { font-size: 11px; font-weight: 700; letter-spacing: .05em;
                  text-transform: uppercase; color: var(--ink-3);
                  border-bottom: 1px solid var(--border); }
  .mot-tab .lin { border-bottom: 1px solid var(--hair); font-size: 13px; }
  .mot-tab .lin:last-child { border-bottom: 0; }
  .mot-tab .nome { font-weight: 600; color: var(--navy); overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }
  .mot-tab .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
  /* O ID DO PROJETO, embaixo do nome — item 276. Monoespacado porque a pessoa vai
     COMPARAR caractere a caractere com o que recebeu, e fonte proporcional embaralha
     zero com O e um com l. `display: block` para cair na linha de baixo dentro da
     mesma celula: coluna propria custaria 240px de grade para um dado que so se le
     quando se procura. */
  .mot-id { display: block; font: 11px/1.35 Consolas, "Cascadia Mono", monospace;
            color: var(--ink-3); font-weight: 400; font-style: normal;
            letter-spacing: -.1px; cursor: pointer; width: max-content; max-width: 100%;
            border-bottom: 1px dashed var(--border);
            overflow: hidden; text-overflow: ellipsis; }
  .mot-id:hover { color: var(--orange); border-bottom-color: var(--orange); }
  .mot-quem { font-size: 12.5px; color: var(--ink-2); overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
  .mot-quem i { font-style: normal; color: var(--ink-3); }
  .mot-selo { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px;
              white-space: nowrap; display: inline-block; font-style: normal; }
  .mot-selo.ok { background: var(--good-bg); color: var(--good); }
  .mot-selo.cancel { background: var(--warn-bg); color: var(--warn); }
  .mot-selo.falhou { background: var(--bad-bg); color: var(--bad); }
  /* A COLUNA "No motor" — item 337. Mesma anatomia do `.mot-selo` de propósito: são dois
     selos lado a lado na mesma linha, e formatos diferentes fariam a linha parecer quebrada. */
  .mot-uso { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700;
             padding: 3px 9px; border-radius: 6px; white-space: nowrap; font-style: normal; }
  .mot-uso.projeto { background: var(--good-bg); color: var(--good); }
  .mot-uso.ocupa   { background: var(--warn-bg); color: var(--warn); }
  .mot-uso.presa   { background: var(--bad-bg);  color: var(--bad); }
  .mot-uso.nunca   { background: var(--surface-2); color: var(--ink-2); }
  .mot-uso.guardada { background: var(--info-bg); color: var(--info); }
  /* A barra do botão de lote: entre o título da seção e a tabela. */
  .mot-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
               margin: 0 0 var(--s3); }
  .mot-barra .mot-nota { font-size: 12px; color: var(--ink-3); }
  /* A lista de projetos dentro da confirmação do lote. Nomear é o que permite a pessoa
     perceber que um deles não devia estar ali — "4 tarefas" não permite. */
  .dlg-lista { margin: 10px 0; padding-left: 20px; font-size: 13px; color: var(--ink-2); }
  .dlg-lista li { margin: 3px 0; }
  .dlg-lista i { color: var(--ink-3); }
  .mot-div { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--ink-3);
             background: var(--hair); padding: 1px 6px; border-radius: 5px; margin-left: 5px; }

  .mot-vazio { text-align: center; padding: 26px 18px; color: var(--ink-3); }
  .mot-vazio.pequeno { padding: 14px 18px; }
  .mot-vazio .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2);
                   border: 1px solid var(--border); display: flex; align-items: center;
                   justify-content: center; margin: 0 auto var(--s3); }
  .mot-vazio .ic svg { width: 20px; height: 20px; color: var(--ink-3); }
  .mot-vazio b { display: block; color: var(--ink-2); font-size: 14px; margin-bottom: 3px; }
  .mot-vazio p { margin: 0; font-size: 12.5px; }

  /* O nome do projeto que esta rodando, acima do painel navy. Item 150. */
  .mot-quem { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s3);
              flex-wrap: wrap; }
  .mot-quem b { font-size: 17px; font-weight: 700; color: var(--navy); }

  /* Os tres botoes de cada tarefa, e os dialogos que eles abrem. Item 150. */
  .mot-acoes { display: flex; gap: 6px; justify-content: flex-end; }
  .mot-acoes button { flex: none; }

  .det-quem { display: flex; align-items: center; gap: 9px; margin: 0 0 var(--s4);
              flex-wrap: wrap; }
  .det-quem b { font-size: 15px; color: var(--navy); }

  /* AS DUAS LISTAS CURTAS LADO A LADO, e a largura cheia para o que e largo.
     Ele pediu "melhor distribuidas" olhando a versao de 430px, onde tudo empilhava. */
  .det-duas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s5);
              align-items: start; }
  /* Abaixo de 640px de dialogo a divisao piora em vez de ajudar: duas colunas de 280px
     quebram cada rotulo em duas linhas. Volta a uma. */
  @media (max-width: 700px) { .det-duas { grid-template-columns: 1fr; } }

  .det-grade { display: flex; flex-direction: column; }
  .det-lin { display: flex; justify-content: space-between; align-items: baseline;
             gap: var(--s3); padding: 6px 0; border-bottom: 1px solid var(--hair);
             font-size: 13px; }
  .det-lin:last-child { border-bottom: 0; }
  .det-lin span { color: var(--ink-3); }
  .det-lin b { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
  .det-h { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
           color: var(--ink-3); margin: 0 0 var(--s2); }
  .det-bloco + .det-bloco, .det-duas + .det-bloco { margin-top: var(--s4); }
  .det-opc { display: flex; flex-wrap: wrap; gap: 6px; }
  .det-opc span { background: var(--surface-2); border: 1px solid var(--border);
                  border-radius: 7px; padding: 4px 9px; font-size: 12px; color: var(--ink);
                  white-space: nowrap; }
  .det-opc i { font-style: normal; color: var(--ink-3); margin-right: 6px; }
  .det-nada { font-size: 12.5px; color: var(--ink-3); margin: 0; }
  .det-erro { background: var(--bad-bg); border-radius: 9px; padding: 10px 12px;
              margin-bottom: var(--s4); }
  .det-erro b { color: var(--bad); font-size: 12px; }
  .det-erro p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-2);
                white-space: pre-wrap; word-break: break-word; }
  /* O registro do motor rola DENTRO da propria caixa. Sem isto, uma linha longa do console
     empurra o dialogo e a pagina inteira ganha rolagem horizontal. */
  .det-log { background: var(--navy); color: var(--tinta-esc-2c); border-radius: 9px; padding: 10px 12px;
             font-size: 11.5px; line-height: 1.5; max-height: 190px; overflow: auto;
             white-space: pre; margin: 0; }
  /* A barra de acoes GRUDA no fim: com o cartao rolando, "Fechar" fugia para fora da vista
     e o unico jeito de sair era o X ou o Esc. */
  .dlg-cartao.largo .dlg-acoes { position: sticky; bottom: -22px; background: var(--surface);
                                 margin: var(--s4) 0 0; padding: var(--s3) 0 0;
                                 border-top: 1px solid var(--hair); }

  .det-baixa { display: flex; flex-direction: column; gap: 6px; }
  .det-arq { display: flex; align-items: center; gap: 10px; text-decoration: none;
             background: var(--surface-2); border: 1px solid var(--border);
             border-radius: 9px; padding: 9px 12px; }
  .det-arq:hover { background: var(--surface); border-color: var(--orange); }
  .det-arq-ico { display: flex; }
  .det-arq-ico svg { width: 16px; height: 16px; color: var(--orange); }
  .det-arq-nome { flex: 1; font-size: 13px; font-weight: 600; color: var(--ink);
                  overflow: hidden; text-overflow: ellipsis; }
  .det-arq-nome i { display: block; font-style: normal; font-weight: 400; font-size: 11.5px;
                    color: var(--ink-3); }
  .det-arq-mb { font-size: 12.5px; color: var(--ink-2);
                font-variant-numeric: tabular-nums; }

  /* A LIXEIRA DE TAREFAS DO MOTOR. Item 150.
     Uma gaveta, e não um bloco: ela é passado, e passado não disputa espaço com o presente.
     Fechada mostra só a contagem; aberta usa a MESMA tabela da lista de cima. */
  .mot-lixeira { background: var(--surface); border: 1px solid var(--border);
                 border-radius: 12px; margin-top: var(--s4); }
  /* `var(--s5)` (24px), e NAO 22px: e o padding de `section.bloco`, e a tabela da lixeira
     tem de comecar na mesma coluna da tabela de cima. Escrevi 22 de cabeca e a medicao
     acusou 4px de diferenca na primeira coluna — 2px por lado, exatamente a conta. */
  .mot-lixeira > summary { display: flex; align-items: center; gap: 9px; cursor: pointer;
                           padding: 13px var(--s5); font-size: 13px; font-weight: 600;
                           color: var(--ink-2); list-style: none; user-select: none; }
  .mot-lixeira > summary::-webkit-details-marker { display: none; }
  .mot-lixeira > summary:hover { color: var(--ink); }
  .mot-lixeira > summary svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
  .mot-lixeira > summary i { font-style: normal; font-weight: 400; font-size: 12px;
                             color: var(--ink-3); }
  /* A setinha, à direita, girando ao abrir. `details` não traz nenhuma quando a lista
     nativa é removida — e gaveta sem sinal de que abre não parece clicável. */
  .mot-lixeira > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px;
                                  border-right: 2px solid var(--ink-3);
                                  border-bottom: 2px solid var(--ink-3);
                                  transform: rotate(45deg) translate(-2px, -2px);
                                  transition: transform var(--t); }
  .mot-lixeira[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .mot-lixeira[open] > summary { border-bottom: 1px solid var(--hair); }
  .mot-lixeira-corpo { padding: 4px var(--s5) 14px; }
  /* Linha de tarefa limpa: mais apagada que a lista de cima, porque é o que já saiu. */
  .mot-lixeira .lin { opacity: .72; }
  .mot-limpa-em { font-size: 11.5px; color: var(--ink-3); }