/* Celular — destinos (11/10/2026, 2ª rodada do modo celular). Só regras com html.modo-celular na frente: o PC não muda. */

/* ==========================================
   DESTINOS (aba 🎯): menos rolagem e botões de dedo (era ~5.800 px de altura com 13 botões pequenos)
   ========================================== */

/* Título e "Novo destino" na mesma linha; a explicação embaixo, inteira (o botão sozinho gastava uma linha) */
html.modo-celular #tab-destinos .dest-titulo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; margin-bottom: 10px; }
html.modo-celular #tab-destinos .dest-titulo > div { display: contents; }
html.modo-celular #tab-destinos .dest-titulo h2 { grid-column: 1; grid-row: 1; font-size: 1.25rem; }
html.modo-celular #tab-destinos .dest-titulo p { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 0.82rem; line-height: 1.4; }
html.modo-celular #tab-destinos .dest-novo { grid-column: 2; grid-row: 1; min-height: 44px; padding: 0 14px; font-size: 0.85rem; white-space: nowrap; }

/* Meses numa linha só, de arrastar para o lado (eram 3 linhas de botões de 32 px) */
html.modo-celular #tab-destinos .dest-meses-chips { flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 0 0 10px; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
html.modo-celular #tab-destinos .dest-meses-chips::-webkit-scrollbar { display: none; }
html.modo-celular #tab-destinos .dest-meses-chips .mes-chip { flex: 0 0 auto; min-height: 40px; padding: 0 14px; white-space: nowrap; }
/* A tela é redesenhada a cada toque e a linha volta ao começo: o mês marcado vem logo depois de "Todos", sempre à vista */
html.modo-celular #tab-destinos .dest-meses-chips .mes-chip:first-child { order: -2; }
html.modo-celular #tab-destinos .dest-meses-chips .mes-chip.active:not(:first-child) { order: -1; }

/* Totais por grupo: os 4 quadros mais baixos; letra mínima de 12 px */
html.modo-celular #tab-destinos .dest-grupos { gap: 8px; margin-bottom: 12px; }
html.modo-celular #tab-destinos .dest-grupo { gap: 3px; padding: 9px 11px; }
html.modo-celular #tab-destinos .dest-grupo-rot { font-size: 0.78rem; }
html.modo-celular #tab-destinos .dest-grupo strong { font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.modo-celular #tab-destinos .dest-grupo small { font-size: 0.75rem; }
/* Celular deitado: os 4 grupos numa linha só (ficava 3 + 1 sobrando) */
@media (min-width: 560px) { html.modo-celular #tab-destinos .dest-grupos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Para cadastrar: nome e "Cadastrar" na mesma linha; detalhes e "Recebe pelo destino…" embaixo, na largura toda */
html.modo-celular #tab-destinos .dest-pendentes { margin-bottom: 12px; padding: 12px; }
html.modo-celular #tab-destinos .dest-pendentes h3 { margin-bottom: 0; }
html.modo-celular #tab-destinos .dest-ajuda { margin: 4px 0 8px; font-size: 0.8rem; line-height: 1.4; }
html.modo-celular #tab-destinos .dest-sem-lista { gap: 8px; }
html.modo-celular #tab-destinos .dest-sem-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 10px 11px; }
html.modo-celular #tab-destinos .dest-sem-info,
html.modo-celular #tab-destinos .dest-sem-acoes { display: contents; }
html.modo-celular #tab-destinos .dest-sem-info > *,
html.modo-celular #tab-destinos .dest-sem-acoes > * { grid-column: 1 / -1; }
html.modo-celular #tab-destinos .dest-sem-info > :first-child { grid-column: 1; grid-row: 1; font-size: 0.95rem; line-height: 1.3; }
html.modo-celular #tab-destinos .dest-sem-info > code:first-child { font-size: 0.88rem; }
html.modo-celular #tab-destinos .dest-sem-info span { line-height: 1.4; }
html.modo-celular #tab-destinos .dest-sem-info small { font-size: 0.75rem; }
html.modo-celular #tab-destinos .dest-sem-acoes > .btn-card-action { grid-column: 2; grid-row: 1; min-height: 40px; padding: 0 14px; font-size: 0.82rem; }
html.modo-celular #tab-destinos .dest-sem-acoes > .dest-juntar { width: 100%; min-height: 44px; margin-top: 4px; }

/* Cartões dos destinos: mais justos (eram 440 a 560 px cada um) */
html.modo-celular #tab-destinos .dest-grid { gap: 10px; }
html.modo-celular #tab-destinos .dest-card { gap: 6px; padding: 12px 13px; }
html.modo-celular #tab-destinos .dest-topo { gap: 10px; }
/* O ícone é só enfeite: menor */
html.modo-celular #tab-destinos .dest-emoji { width: 2.1rem; height: 2.1rem; font-size: 1.2rem; border-radius: 10px; }
/* Nome comprido quebra a linha em vez de sumir em "SALÁRIO DO VEL…" */
html.modo-celular #tab-destinos .dest-nomes h3 { font-size: 1.02rem; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
html.modo-celular #tab-destinos .dest-nomes span { display: block; font-size: 0.75rem; line-height: 1.3; }
/* "Editar" tinha 16 px de altura: agora é um botão de dedo */
html.modo-celular #tab-destinos .dest-topo .btn-micro-action { flex: none; min-height: 40px; min-width: 44px; padding: 0 12px; border-radius: var(--radius-full); border: 1px solid var(--border-color); background: var(--bg-glass); font-size: 0.8rem; }
html.modo-celular #tab-destinos .dest-total { gap: 2px 8px; }
html.modo-celular #tab-destinos .dest-total strong { font-size: 1.25rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
/* "Na planilha" e "Quem recebe" na mesma linha das etiquetas (o rótulo ocupava uma linha sozinho) */
html.modo-celular #tab-destinos .dest-linha { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px; }
html.modo-celular #tab-destinos .dest-linha > .dest-chips { display: contents; }
html.modo-celular #tab-destinos .dest-rot { font-size: 0.75rem; margin-right: 2px; }
html.modo-celular #tab-destinos .dest-gerentes { gap: 3px; }
html.modo-celular #tab-destinos .dest-meses { padding-top: 6px; }
/* A dica do raio-x sem a linha tracejada: só uma linha curta no pé do cartão */
html.modo-celular #tab-destinos .dest-abrir { padding-top: 0; border-top: 0; text-align: right; }
/* No toque, o cartão não "pula" (o efeito de passar o mouse ficava preso); só acende a borda */
html.modo-celular #tab-destinos .dest-clicavel:hover { transform: none; box-shadow: var(--shadow-card); }
html.modo-celular #tab-destinos .dest-clicavel:active { border-color: var(--border-highlight); }

/* Tema claro: o verde claro do "Toque para ver o raio-x" sumia no branco */
html.modo-celular body.theme-light #tab-destinos .dest-abrir { color: #047857; }

/* ==========================================
   FECHAMENTO (aba 📤): cartões compactos (era ~4.900 px de altura, com muito espaço vazio)
   ========================================== */
html.modo-celular #tab-exportar .panel-title-area { margin-bottom: 12px; }
html.modo-celular #tab-exportar .panel-title-area h2 { font-size: 1.2rem; line-height: 1.25; }
html.modo-celular #tab-exportar .panel-title-area p { font-size: 0.82rem; line-height: 1.4; }

/* Números do mês: um por linha, mais juntos; o mês fica separado por uma linha fina */
html.modo-celular #tab-exportar .export-resumo-bar { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 14px; margin-bottom: 12px; }
html.modo-celular #tab-exportar .erb-item { flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; min-height: 24px; }
html.modo-celular #tab-exportar .erb-label { font-size: 0.75rem; }
html.modo-celular #tab-exportar .erb-val { font-size: 1.05rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.modo-celular #tab-exportar .erb-mes { padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid var(--border-color); }
html.modo-celular #tab-exportar .erb-mes .erb-label { white-space: nowrap; }
html.modo-celular #tab-exportar .erb-select { flex: 0 1 auto; min-height: 44px; min-width: 0; }
/* Celular deitado: os números em duas colunas (uma só ficaria com o valor longe do nome) */
@media (min-width: 560px) {
  html.modo-celular #tab-exportar .export-resumo-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  html.modo-celular #tab-exportar .erb-mes { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Cada cartão: ícone pequeno ao lado do título (o ícone de 40 px numa linha só, mais 28 px de borda, deixavam muito vazio) */
html.modo-celular #tab-exportar .export-cards-grid { gap: 10px; margin-top: 0; }
html.modo-celular #tab-exportar .export-card { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; align-content: start; gap: 8px 10px; padding: 14px; }
html.modo-celular #tab-exportar .export-card > * { grid-column: 1 / -1; min-width: 0; }
html.modo-celular #tab-exportar .export-card > .export-card-icon { grid-column: 1; font-size: 1.5rem; line-height: 1; text-align: center; }
html.modo-celular #tab-exportar .export-card > h3 { grid-column: 2; margin: 0; font-size: 1.02rem; line-height: 1.3; }
html.modo-celular #tab-exportar .export-card p { margin: 0; font-size: 0.84rem; line-height: 1.45; }
html.modo-celular #tab-exportar .projeto-status { margin: -2px 0 0; }
/* No toque, o cartão não "pula" (o efeito de passar o mouse ficava preso) */
html.modo-celular #tab-exportar .export-card:hover { transform: none; }

/* Botões com 44 px; dois (ou quatro) lado a lado em vez de um embaixo do outro */
html.modo-celular #tab-exportar .btn-export-action { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 10px; font-size: 0.86rem; line-height: 1.2; }
html.modo-celular #tab-exportar .export-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* "Salvar em outro arquivo" era um link de 19 px de altura */
html.modo-celular #tab-exportar .btn-link-projeto { justify-self: center; min-height: 40px; margin: -4px 0 -6px; padding: 0 12px; font-size: 0.8rem; }

/* Tema claro: verde e amarelo fortes sumiam no branco (o "Limpar tudo" ganhou a classe .btn-export-perigo no style.css) */
html.modo-celular body.theme-light #tab-exportar .erb-val-green { color: #047857; }
html.modo-celular body.theme-light #tab-exportar .erb-val-gold { color: #b45309; }

/* ==========================================
   JANELAS DOS DESTINOS (raio-x e formulário, abertas a partir da aba 🎯): botões de dedo e letra de 12 px
   ========================================== */
html.modo-celular #modalDestinoDetalhe .btn-close-modal,
html.modo-celular #modalDestino .btn-close-modal { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
html.modo-celular #modalDestinoDetalhe .bm-acoes .btn-card-action,
html.modo-celular #modalDestino .bm-acoes .btn-card-action { min-height: 44px; font-size: 0.85rem; }

/* Raio-x: rótulos e legendas com 12 px; a linha do tempo rola de lado, então as barras podem ser mais largas */
html.modo-celular #modalDestinoDetalhe .raio-emoji { width: 2.6rem; height: 2.6rem; font-size: 1.5rem; border-radius: 12px; }
html.modo-celular #modalDestinoDetalhe .raio-num span,
html.modo-celular #modalDestinoDetalhe .raio-fmt b,
html.modo-celular #modalDestinoDetalhe .raio-fmt small,
html.modo-celular #modalDestinoDetalhe .raio-tempo-legenda,
html.modo-celular #modalDestinoDetalhe .raio-ger-val small,
html.modo-celular #modalDestinoDetalhe .raio-linha small { font-size: 0.75rem; }
html.modo-celular #modalDestinoDetalhe .raio-barra { flex: 1 0 20px; }
html.modo-celular #modalDestinoDetalhe .raio-barra small { font-size: 0.75rem; }
html.modo-celular #modalDestinoDetalhe .raio-hora b { font-size: 0.75rem; }
html.modo-celular #modalDestinoDetalhe .raio-export-acoes .btn-card-action { min-height: 44px; }
html.modo-celular #modalDestinoDetalhe .raio-ger { min-height: 44px; row-gap: 4px; }
html.modo-celular #modalDestinoDetalhe .raio-linha { min-height: 48px; }

/* Formulário: campos de 44 px; a linha inteira da caixinha é o alvo do dedo; a lista de descrições não rola dentro da janela */
html.modo-celular #modalDestino .dest-form label,
html.modo-celular #modalDestino .dest-form legend,
html.modo-celular #modalDestino .dest-form label small { font-size: 0.75rem; }
html.modo-celular #modalDestino .dest-form select,
html.modo-celular #modalDestino .dest-form input[type="text"] { min-height: 44px; }
html.modo-celular #modalDestino .dest-form .dest-check { min-height: 40px; font-size: 0.86rem; }
html.modo-celular #modalDestino .dest-form .dest-check input { width: 22px; height: 22px; }
html.modo-celular #modalDestino .dest-outras { max-height: none; overflow: visible; }
/* Quem recebe: o nome inteiro numa linha (cortava "Jessica de Brito Nascime…"); banco e ✕ embaixo */
html.modo-celular #modalDestino .dest-rec-linha { grid-template-columns: minmax(0, 1fr) 44px; }
html.modo-celular #modalDestino .dest-rec-linha .destRecNome { grid-column: 1 / -1; }
html.modo-celular #modalDestino .dest-rec-linha .btn-micro-action { width: 44px; height: 44px; font-size: 1rem; }
html.modo-celular #modalDestino .dest-rec-linha + .dest-rec-linha { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-color); }
html.modo-celular #modalDestino .dest-form fieldset > .btn-micro-action { align-self: flex-start; min-height: 40px; padding: 0 8px; font-size: 0.85rem; }