/* ===== FitControl mobile (<=760px) ===== */
/* Tudo aqui é mobile-only. Acima de 760px nada deve ter efeito. */
@media (max-width: 760px) {
  /* As regras das próximas tasks entram aqui dentro. */
  /* Placeholder de fronteira — garante que o arquivo é válido desde já. */
  :root { --mobile-ativo: 1; }

  /* hambúrguer só aparece no mobile */
  .mob-burger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: none; background: transparent; color: var(--text); cursor: pointer; border-radius: 8px; flex-shrink: 0; }
  .mob-burger:active { background: var(--bg-hover); }

  /* sidebar vira gaveta off-canvas */
  .sidebar.sb-new { position: fixed; top: 0; left: 0; height: 100vh; width: 344px; max-width: 86vw; z-index: 200; transform: translateX(-100%); transition: transform .28s cubic-bezier(.25,1.1,.4,1); box-shadow: 0 0 40px rgba(0,0,0,.4); }
  body.nav-aberta .sidebar.sb-new { transform: translateX(0); }
  .sidebar.sb-new .sb-detail { display: flex; }
  /* o layout não reserva mais a coluna da sidebar no mobile */
  .layout { grid-template-columns: 1fr !important; }

  /* backdrop */
  .mob-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 150; border: 0; }
  .mob-backdrop[hidden] { display: none; }

  /* Contenção global: nada deve criar scroll horizontal / cortar */
  html, body { max-width: 100%; overflow-x: hidden; }
  #appPrincipal, .main-content, .layout { max-width: 100%; min-width: 0; }
  /* quebra só de texto livre longo (título/SKU do card, comentários, notificações) — NÃO em contadores/progresso/headers */
  .kc-titulo, .kc-sku, .lcard-titulo, .coment-texto, .sino-item-tit, .sino-item-cor { overflow-wrap: anywhere; }
  /* respiro de conteúdo menor nas laterais; rodapé folgado (limpa o FAB e a área segura) */
  .main-content { padding: 12px 12px calc(96px + env(safe-area-inset-bottom, 0px)) !important; }

  /* Topbar enxuta e "encaixada": controles iguais e alinhados */
  .topbar { padding: 9px 12px; gap: 6px; }
  .tb-crumb { display: none; }
  .brand-text { display: none; }                 /* mantém o logo, esconde "FitControl" */
  .tb-search-txt, .tb-search-kbd { display: none; }
  #btnMais { display: none; }
  .topbar-actions { gap: 4px; min-width: 0; align-items: center; }
  /* botões da direita: todos 36px, centralizados, mesmo formato */
  .tb-search-trigger, .tb-sino, .tb-tema-mob {
    width: 36px; height: 36px; min-width: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; flex: 0 0 auto;
  }
  .tb-tema-mob { border: none; background: transparent; color: var(--text-soft); cursor: pointer; }
  .tb-tema-mob:active { background: var(--bg-hover); }
  #ltTheme { display: none; }                    /* toggle animado some no mobile */
  /* "+" vira um círculo verde de 36px que cria a tarefa */
  .tb-split { display: inline-flex; flex: 0 0 auto; }
  .tb-split-arrow { display: none; }             /* chevron some; o "+" cria direto */
  .tb-split-main {
    width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%;
    font-size: 0 !important; display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-green); color: #08130A; border: none;
  }
  .tb-split-main::before { content: "+"; font-size: 22px; font-weight: 700; line-height: 1; }
  /* alvos de toque confortáveis (listas/botões largos) */
  .sidebar-item, .btn-secondary { min-height: 44px; }
  /* inputs com 16px: evita o zoom automático do iOS ao focar */
  input, select, textarea { font-size: 16px; }

  /* Abas de view: deslizam na horizontal com fade na borda direita */
  .view-tabs { gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
            mask-image: linear-gradient(90deg, #000 86%, transparent); }
  .view-tabs::-webkit-scrollbar { display: none; }
  .view-tab { flex: 0 0 auto; }

  /* Modal/painel de detalhe em TELA CHEIA (classe real: .modal) */
  .modal-overlay { padding: 0; align-items: stretch; justify-content: stretch; }
  .modal-overlay .modal { width: 100%; max-width: 100%; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; }
  .modal-overlay .modal .modal-header { position: sticky; top: 0; z-index: 3; }
  /* o painel de detalhe ocupa a tela toda (sem "fora" pra fechar) -> reexibe o cabeçalho com o × */
  .modo-detalhe .modal-header { display: flex !important; }
  .modo-detalhe .modal-header .modal-close { width: 42px; height: 42px; font-size: 26px; opacity: 1; }
  /* o form do modal já é 1 coluna no mobile; garante que não estoure */
  .modal .form-grid, .modal-task .form-grid { grid-template-columns: 1fr !important; }

  /* Kanban deslizável (uma coluna por vez) */
  .kanban-board { scroll-snap-type: x mandatory; }
  .kanban-coluna { flex: 0 0 85vw !important; min-width: 0 !important; scroll-snap-align: start; }
  .kanban-toolbar { flex-wrap: wrap; }
  .rev-acoes button { min-height: 44px; }

  /* Tabelas largas: scroll horizontal contido (não cortam a página) */
  .tabela-wrap, .rel-tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .tabela, table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* Lista agrupada (Tabela/Kanban no mobile) */
  .mob-lista { display: flex; flex-direction: column; gap: 10px; }
  .mob-grupo { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-card); }
  .mob-grupo-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--bg-soft); border: none; cursor: pointer; font-family: inherit; }
  .mob-grupo-caret { color: var(--text-muted); transition: transform .18s; }
  .mob-grupo:not(.colapsada) .mob-grupo-caret { transform: rotate(90deg); }
  .mob-grupo-nome { font-weight: 800; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mob-grupo-count { margin-left: auto; font-size: 12px; font-weight: 700; background: var(--bg-card); color: var(--text-soft); border-radius: 100px; padding: 2px 9px; }
  .mob-grupo.colapsada .mob-grupo-cards { display: none; }
  .mob-grupo-cards { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
  .mob-grupo-cards .kanban-card { width: 100%; min-width: 0; max-width: 100%; }
  .mob-card-wrap { display: flex; flex-direction: column; gap: 4px; }
  .mob-status-chip { align-self: flex-start; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; background: var(--bg-soft); color: var(--text-soft); border: 1px solid var(--border); }

  /* Agenda (Calendário no mobile) — cabeçalho de dia + cards com acento/status/avatar */
  .mob-agenda { display: flex; flex-direction: column; gap: 16px; }
  .mob-agenda-dia-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 9px; }
  .mob-agenda-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong, #3a3a40); flex: 0 0 auto; }
  .mob-agenda-dia.hoje .mob-agenda-dot { background: var(--c-green, #7BC242); }
  .mob-agenda-dia-rot { font-size: 14px; font-weight: 600; color: var(--text); }
  .mob-agenda-dia-sub { font-size: 12.5px; color: var(--text-muted); }
  .mob-agenda-dia-count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-soft); background: var(--bg-soft); border-radius: 999px; padding: 2px 9px; }
  .mob-agenda-item { display: flex; align-items: stretch; gap: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 7px; margin-bottom: 6px; cursor: pointer; overflow: hidden; }
  .mob-agenda-item:active { background: var(--bg-hover); }
  .mob-agenda-bar { width: 3px; flex: 0 0 auto; background: var(--text-muted); }
  .mob-agenda-item.prio-alta .mob-agenda-bar { background: #e24b4a; }
  .mob-agenda-item.prio-media .mob-agenda-bar { background: var(--amber, #d99a17); }
  .mob-agenda-item.prio-baixa .mob-agenda-bar { background: var(--c-green, #7BC242); }
  .mob-agenda-main { flex: 1; min-width: 0; padding: 10px 12px; }
  .mob-agenda-l1 { display: flex; align-items: center; gap: 7px; }
  .mob-agenda-num { font-weight: 600; color: var(--text-soft); font-size: 12px; flex: 0 0 auto; }
  .mob-agenda-tit { font-weight: 600; color: var(--text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mob-agenda-l2 { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
  .mob-agenda-chip { font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 2px 8px; background: var(--bg-soft); color: var(--text-soft); white-space: nowrap; }
  .mob-agenda-chip.st-pendente { background: rgba(55,138,221,.14); color: #8aa6c8; }
  .mob-agenda-chip.st-emandamento { background: rgba(98,184,58,.14); color: #8fc46a; }
  .mob-agenda-chip.st-revisao { background: rgba(234,179,8,.14); color: #c9a93a; }
  .mob-agenda-chip.st-concluido { background: rgba(120,120,128,.16); color: var(--text-muted); }
  .mob-agenda-meta { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mob-agenda-resp { display: flex; align-items: center; gap: 6px; padding: 0 11px 0 4px; flex: 0 0 auto; }
  .mob-agenda-av { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 10px; font-weight: 600; flex: 0 0 auto; }
  .mob-agenda-resp span { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

  /* Gantt: timeline rola na horizontal sem vazar a página */
  .gantt-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* badges dos ícones da rail: menores e no canto, sem cobrir o ícone */
  .sb-icon-badge { top: -2px; right: -2px; min-width: 15px; height: 15px; font-size: 9px; line-height: 15px; padding: 0 3px; }

  /* ===== Início + lista de tarefas: nada pode vazar a tela ===== */
  /* grids do Início em 1 coluna, itens encolhíveis */
  .ini-kpis, .ini-graficos, .ini-listas { grid-template-columns: 1fr !important; }
  .ini-kpis > *, .ini-graficos > *, .ini-listas > * { min-width: 0; max-width: 100%; }
  .ini-graficos canvas, .ini-graficos svg, .ini-donut, .main-content canvas { max-width: 100% !important; height: auto; }
  /* "carga por pessoa" e barras de toolbar: rolam contido, sem esticar a página */
  .cards-row, #painelPorResponsavel { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lista-toolbar { flex-wrap: wrap; }

  /* lista de tarefas: 1 card por linha, conteúdo empilhado (sem grade de 4 colunas) */
  .lista-cards { grid-template-columns: 1fr !important; }
  .lista-cards .lcard { min-width: 0; max-width: 100%; }
  .lista-cards.modo-lista .lcard { display: flex !important; flex-direction: column !important; align-items: stretch !important; grid-template-columns: none !important; }
  .lcard-topo, .lcard-meta, .lcard-rod, .rev-acoes, .env-acoes { flex-wrap: wrap; min-width: 0; }
  .lcard-titulo, .lcard-meta { min-width: 0 !important; flex: 0 1 auto !important; }
  .rev-selo { white-space: normal; }
  .rev-acoes .rev-btn, .env-acoes .env-rev-btn { flex: 1 1 auto; min-height: 40px; }

  /* Central de Ajuda: tela cheia, lista -> artigo -> voltar */
  .ajuda-overlay { padding: 0; }
  .ajuda-box { width: 100%; height: 100%; height: 100dvh; border-radius: 0; }
  .ajuda-side { flex: 1 1 auto; border-right: none; }
  .ajuda-main { display: none; }
  body.ajuda-ver-artigo .ajuda-side { display: none; }
  body.ajuda-ver-artigo .ajuda-main { display: block; }
  .ajuda-voltar { display: inline-flex; }
}

/* hambúrguer escondido acima de 760px */
@media (min-width: 761px) { .mob-burger, .tb-tema-mob { display: none; } }