/* Modo móvel (celular): a versão limpa e simples do Hub. Tudo aqui vale SÓ com html.modo-movel (public/js/boot.js:
   Android/iPhone, ou tela estreita com toque, ou ?movel=1). Sem a classe, nada deste arquivo se aplica e o desktop
   fica exatamente como era. Identidade: papel/preto, navy como bloco, amarelo só como acento, Unbounded/Hanken/Chivo. */

.nav-movel { display: none; }

/* ---------- Estrutura: sem menu lateral, navegação de baixo ---------- */
.modo-movel .app { display: block; min-height: 100dvh; }
.modo-movel .lateral, .modo-movel .veu, .modo-movel .topo__menu, .modo-movel .icone-botao.topo__menu { display: none !important; }
.modo-movel body { overflow-x: hidden; }
.modo-movel .principal { min-width: 0; max-width: 100vw; }
.modo-movel .topo { padding: 10px 14px; gap: 10px; min-height: 56px; }
.modo-movel .migalhas a, .modo-movel .migalhas .sep { display: none; }
.modo-movel .migalhas [aria-current] { font: 600 15px/1.2 var(--texto); letter-spacing: 0; color: var(--tinta); }
.modo-movel .topo__acoes .botao { min-height: 44px; padding: 0 16px; }
.modo-movel .conteudo { padding: 6px 12px calc(150px + env(safe-area-inset-bottom)); max-width: 100%; overflow-x: hidden; }
.modo-movel .vista > * { animation: none; }

.modo-movel .nav-movel {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding-bottom: env(safe-area-inset-bottom); background: var(--fundo); border-top: 1px solid var(--linha);
}
.modo-movel .nav-movel a {
  flex: 1; min-width: 0; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--tinta-2); text-decoration: none; font: 600 12px/1.1 var(--texto); position: relative; -webkit-tap-highlight-color: transparent;
}
.modo-movel .nav-movel a .ico { width: 24px; height: 24px; }
.modo-movel .nav-movel a[aria-current="page"] { color: var(--tinta); }
.modo-movel .nav-movel a[aria-current="page"]::before { content: ''; position: absolute; top: -1px; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--amarelo, #FFD434); }

/* Barra de voz (fica em todas as telas) e avisos acima da navegação de baixo */
html.modo-movel .eb-barra, html.modo-movel[data-escritorio="dentro"] .eb-barra { bottom: calc(68px + env(safe-area-inset-bottom)); max-width: calc(100vw - 16px); }
.modo-movel .toasts { bottom: calc(76px + env(safe-area-inset-bottom)); }
.modo-movel #lateral-presenca, .modo-movel .mt-mini { display: none !important; }

/* ---------- Tarefas: só o essencial ---------- */
.modo-movel .tt-topo { margin-bottom: 12px; gap: 10px; }
.modo-movel .tt-topo h1 { font-size: 20px; }
.modo-movel .tt-barra { width: 100%; }
.modo-movel .tt-barra input[type=search], .modo-movel .tt-busca { width: 100%; min-height: 44px; font-size: 16px; }
/* Minhas tarefas: uma lista só (sem arrastar, recolher, remover ou redimensionar widgets) */
.modo-movel .pn { display: block; }
.modo-movel .pn-w { max-height: none; margin-bottom: 12px; }
.modo-movel .pn-w__pega, .modo-movel .pn-w__acoes, .modo-movel .pn-w__alca { display: none !important; }
.modo-movel .pn-w__topo { cursor: default; touch-action: auto; }
.modo-movel .pn-abas button { min-height: 40px; padding: 0 14px; }
.modo-movel .mt-linha { min-height: 48px; padding-top: 8px; padding-bottom: 8px; }
.modo-movel .mt-linha .st-bola { width: 24px; height: 24px; flex: none; }
.modo-movel .mt-linha .st-bola:not([data-status="a-fazer"])::after { inset: 3px; }
.modo-movel .mt-linha__onde { display: none; }
/* Todas as tarefas: lista simples, filtro por cliente e por pessoa */
.modo-movel .tt-container { display: block; }
.modo-movel .tt-sidebar, .modo-movel .tt-abas, .modo-movel #salvar-visao, .modo-movel #status-filter, .modo-movel #prioridade-filter,
.modo-movel #status-filter + .sel, .modo-movel #prioridade-filter + .sel { display: none !important; }
.modo-movel .tt-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.modo-movel .tt-filtros > input[type=search] { grid-column: 1 / -1; }
.modo-movel .tt-filtros select, .modo-movel .tt-filtros input:not([type=checkbox]), .modo-movel .tt-filtros .sel { width: 100%; min-height: 44px; font-size: 16px; }
.modo-movel .tt-filtros label.mudo { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 44px; }
.modo-movel .tt-filtros input[type=checkbox] { width: 22px; height: 22px; }
/* Lista: bolinha de status | nome (quebra linha) | data. Sem seleção em massa, responsável e prioridade na linha. */
.modo-movel .tl-cab, .modo-movel .tl-massa, .modo-movel .tl-sel, .modo-movel .tl-checkbox, .modo-movel .tl-resp, .modo-movel .tl-pri { display: none !important; }
.modo-movel .tl-corpo { padding-left: 0; }
.modo-movel .tl-linha { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; min-height: 52px; padding: 4px 0; }
.modo-movel .tl-linha .st-bola { width: 24px; height: 24px; }
.modo-movel .tl-linha .st-bola:not([data-status="a-fazer"])::after { inset: 3px; }
.modo-movel .tl-nome { flex-wrap: wrap; gap: 4px 8px; padding: 6px 0; }
.modo-movel .tl-titulo { white-space: normal; overflow-wrap: anywhere; flex: 1 1 100%; }
.modo-movel .tl-tags { display: none; }
.modo-movel .tl-cel.tl-data { min-height: 44px; padding: 0 6px; font-size: 12.5px; white-space: nowrap; }
.modo-movel .tl-nova { min-height: 44px; }
.modo-movel .tl-nova input { font-size: 16px; }
.modo-movel .tl-menu { max-width: calc(100vw - 16px); }
.modo-movel .tl-menu button { min-height: 44px; }

/* ---------- Tarefa aberta: uma coluna, só o essencial (status, responsáveis, datas, descrição, comentários) ---------- */
.modo-movel .tj-fundo { padding: 0; }
.modo-movel .tj { width: 100%; max-width: 100%; height: 100%; max-height: none; min-width: 0; border-radius: 0; border: 0; }
.modo-movel .tj-alca { display: none; }
.modo-movel .tj__corpo { display: block; overflow-y: auto; overflow-x: hidden; grid-template-columns: 1fr; border-radius: 0; -webkit-overflow-scrolling: touch; }
.modo-movel .tj__esq { display: flex; overflow: visible; padding: 14px 14px 8px; gap: 14px; }
.modo-movel .tj__dir { border-left: 0; border-top: 1px solid var(--linha); padding-top: 12px; min-height: 0; }
.modo-movel .tj__atividade { overflow: visible; max-height: none; padding-bottom: 8px; }
.modo-movel .tj__topo { padding: 8px 8px 8px 14px; gap: 6px; min-height: 56px; }
.modo-movel .tj__topo .icone-botao { width: 44px; height: 44px; }
.modo-movel .tj__link-publico, .modo-movel .tj__excluir, .modo-movel .tj__meta, .modo-movel .tj__origem, .modo-movel .tj__sync,
.modo-movel .tj__subs, .modo-movel .tj__deps, .modo-movel .tj__check, .modo-movel .tj__anexos-sec, .modo-movel .tj__tempo-section,
.modo-movel .tj__desc-barra, .modo-movel .tj__desc-expandir, .modo-movel .tj__clipe, .modo-movel .tj__campos-pers { display: none !important; }
.modo-movel .tj__titulo { font-size: 20px; line-height: 1.25; }
.modo-movel .tj__campos { grid-template-columns: 92px minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.modo-movel .tj__valor, .modo-movel .tj__concluir { min-height: 44px; }
.modo-movel .tj__datas { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.modo-movel .tj__datas .sep { display: none; }
.modo-movel .tj__datas input { width: 100%; min-height: 44px; font-size: 16px; }
.modo-movel .tj__sel, .modo-movel .tj__campos .sel { min-height: 44px; font-size: 16px; }
.modo-movel .tj__comentar { position: sticky; bottom: 0; z-index: 3; background: var(--superficie); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
.modo-movel .tj__comentar textarea, .modo-movel .tj__coment-vista { font-size: 16px; min-height: 44px; }
.modo-movel .tj__comentar .botao { min-height: 44px; }
.modo-movel .tj-coment-acoes { opacity: 1; }

/* ---------- Escritório: mapa plano e simples ---------- */
.modo-movel .conteudo.conteudo--esc-movel { padding: 0; max-width: 100%; }
.em { position: relative; display: flex; flex-direction: column; width: 100%; background: var(--fundo); }
.em-topo { flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--linha); background: var(--fundo); }
.em-sala { flex: none; align-self: center; font: 600 13px/1.2 var(--texto); color: var(--tinta); max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-pessoas { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-height: 84px; overflow: hidden; }
.em-vazio { font: 500 12px var(--dados); color: var(--tinta-3); align-self: center; }
.em-pessoa { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px 0 4px; border-radius: 999px; border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta); font: 600 12px/1 var(--texto); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.em-pessoa i { font-style: normal; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cor, #A6B1C9); color: var(--tinta-av, #030C31); font-size: 12px; font-weight: 700; }
.em-pessoa--eu { border-color: var(--amarelo, #FFD434); box-shadow: inset 0 0 0 1px var(--amarelo, #FFD434); }
.em-pessoa--ausente { opacity: .55; }
.em-mapa { flex: 1; min-height: 0; width: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.em-botoes { position: absolute; right: 10px; bottom: calc(140px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; z-index: 5; }
.em-botoes button { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta); font: 600 22px/1 var(--texto); cursor: pointer; box-shadow: var(--sombra); -webkit-tap-highlight-color: transparent; }
.em-botoes .ico { width: 22px; height: 22px; }
.em-aviso { position: absolute; left: 12px; right: 12px; top: 64px; z-index: 5; padding: 10px 14px; border-radius: 12px; background: var(--navy, #030C31); color: #F1EFE8; font: 500 13px/1.3 var(--texto); }
.em-aviso[hidden] { display: none; }

/* Com a tarefa aberta (tela cheia), a barra de voz e a navegação de baixo saem da frente do campo de comentário */
html.modo-movel:has(.tj-fundo) .eb-barra, html.modo-movel:has(.tj-fundo) .nav-movel, html.modo-movel:has(.modal-fundo) .eb-barra { display: none; }
.modo-movel .tt-container .tt-topo h1 { display: none; } /* o título já está no topo; fica só o resumo */