/*
 * Mobile — o sistema vira aplicativo, não uma miniatura do desktop.
 *
 * O que existia antes encolhia o layout: a barra lateral virava uma coluna de
 * ícones de 60 px e o resto ficava do jeito que estava. Numa tela de 375 px,
 * 60 px são 16% da largura gastos em navegação que ninguém está usando naquele
 * instante, e o conteúdo transbordava para fora da tela.
 *
 * Aqui a barra sai do fluxo e vira duas coisas: uma gaveta para o menu inteiro
 * e uma barra inferior com o que se usa o tempo todo. O polegar alcança a barra
 * de baixo; o topo da tela, não — e por isso as ações frequentes moram embaixo.
 *
 * ## Os cortes
 *
 *   até 860px   telefone e tablet em pé: gaveta + barra inferior
 *   861–1180px  tablet deitado: barra lateral em ícones, conteúdo largo
 *   acima       desktop, intocado
 *
 * 860 e não 768 porque o corte não é o aparelho, é a largura em que a barra
 * lateral de 220 px deixa de caber sem espremer o conteúdo.
 */

/* Só no celular. Fora dele, some — o botão de menu não faz sentido com a barra
   lateral à vista. */
.so-mobile { display: none; }

/* ═══════════════════ telefone e tablet em pé ═══════════════════ */

@media (max-width: 860px) {

  /* ── o esqueleto ── */

  #app {
    /* `minmax(0, 1fr)` e não `1fr`: item de grade tem `min-width: auto`, o que
       o deixa crescer até caber o conteúdo mais largo — e uma tabela ou um
       botão comprido empurravam a página inteira para fora da tela. Foi
       exatamente o que aconteceu na primeira verificação: `.pagina` media
       453 px numa tela de 375. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--topo) 1fr;
    grid-template-areas: "topo" "conteudo";
    /* dvh e não vh: no celular a barra do navegador some e volta, e `vh` mede
       a tela sem ela — o rodapé ficava escondido metade do tempo. */
    height: 100dvh;
  }

  /* A marca sai da grade e entra no topo, ao lado do botão de menu. */
  #app > .marca { display: none; }

  #app > .topo {
    padding: 0 var(--e-3);
    gap: var(--e-2);
  }
  .so-mobile { display: inline-flex; }

  /* ── a gaveta ── */

  #app > nav.lateral {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(280px, 82vw);
    z-index: 70;
    transform: translateX(-102%);
    transition: transform var(--medio);
    box-shadow: var(--sombra-3);
    padding-top: var(--e-4);
    /* Espaço para o dedo não esbarrar na barra inferior ao rolar o menu. */
    padding-bottom: calc(var(--barra-baixo) + var(--e-6));
  }
  #app.gaveta-aberta > nav.lateral { transform: translateX(0); }

  /* O véu fecha a gaveta e escurece o resto — sem ele, tocar fora não faz nada
     e a pessoa procura um botão de fechar que não precisa existir. */
  .gaveta-veu {
    position: fixed; inset: 0; z-index: 69;
    background: #000000AA;
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity var(--medio);
  }
  #app.gaveta-aberta .gaveta-veu { opacity: 1; pointer-events: auto; }

  /* Na gaveta o menu volta a ter texto: é uma lista, não uma tira de ícones. */
  .marca__txt,
  .nav-item span:not(.nav-item__icone):not(.nav-item__selo),
  .nav-grupo { display: revert; }
  .nav-item {
    justify-content: flex-start;
    padding: 11px var(--e-3);
    min-height: 44px;
  }
  .nav-item__selo { position: static; margin-left: auto; }

  /* ── a barra de baixo ── */

  .barra-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: var(--superficie);
    border-top: 1px solid var(--linha);
    /* A faixa do gesto de home do iPhone come a parte de baixo; sem isto o
       último item fica embaixo dela e o toque não chega. */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .barra-mobile__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 6px 2px;
    color: var(--txt-3);
    font-size: 10px; font-weight: 650;
    position: relative;
    transition: color var(--rapido);
  }
  .barra-mobile__item.is-ativo { color: var(--acento); }
  .barra-mobile__icone { font-size: 17px; line-height: 1; }

  .barra-mobile__selo {
    position: absolute; top: 4px; left: 50%; margin-left: 6px;
    min-width: 15px; height: 15px; padding: 0 4px;
    border-radius: var(--r-full);
    background: var(--acento); color: #fff;
    font-size: 9px; font-weight: 800; line-height: 15px;
    border: 2px solid var(--superficie);
  }

  #app > main {
    /* Mesma razão do `minmax` acima, agora no próprio item. */
    min-width: 0;
    /* O conteúdo termina acima da barra, não atrás dela. */
    padding-bottom: calc(var(--barra-baixo) + env(safe-area-inset-bottom, 0px));
  }

  /* ── conteúdo ── */

  .pagina, .pagina--largo {
    padding: var(--e-4) var(--e-3) var(--e-8);
    max-width: none;
    min-width: 0;
  }
  /* O mesmo remédio, um nível abaixo: qualquer filho de grade ou flex que
     tenha conteúdo largo empurra o pai se não puder encolher. */
  .pagina > *, .grade > *, .linha-flex > * { min-width: 0; }
  /* Texto longo sem espaço — um e-mail, uma URL — quebra em vez de esticar. */
  .pagina, .cartao, .tabela td { overflow-wrap: anywhere; }
  .pagina__cabeca { flex-direction: column; align-items: stretch; gap: var(--e-3); }
  .pagina__titulo { font-size: var(--t-xl); }
  .pagina__cabeca .btn { width: 100%; justify-content: center; }
  .pagina__cabeca .linha-flex .btn { width: auto; flex: 1; }

  /* Toda grade vira uma coluna. Duas colunas de 170 px não são duas colunas:
     são duas colunas ilegíveis. */
  .grade, .grade--2, .grade--3, .grade--4, .grade--kpi, .grade-form, .grade-form--2 {
    grid-template-columns: 1fr !important;
  }
  /* KPI é a exceção: dois cabem, e ver quatro números de uma vez é o ponto. */
  .grade--kpi { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kpi { padding: var(--e-3); }
  .kpi__val { font-size: var(--t-lg); }

  /* ── toque ── */

  .btn { min-height: 40px; padding: 0 var(--e-4); }
  .btn--sm { min-height: 36px; }
  .btn--icone { min-width: 40px; }
  .chip { min-height: 34px; }
  .aba { padding: 11px var(--e-3); }

  /* 16px no campo é o que impede o iOS de dar zoom ao focar — e o zoom
     desalinha a página inteira, que é pior que o campo parecer grande. */
  .entrada, .selecao, input, textarea, select { font-size: 16px; min-height: 42px; }
  .campo__rot { font-size: var(--t-xs); }

  /* ── filtros recolhidos ── */

  /* A busca sai do bloco recolhível e fica sempre à vista: é o filtro que se
     usa em nove de cada dez vezes, e escondê-la atrás de um toque seria
     esconder a função principal da tela. */
  .ld-barra .cartao > .linha-flex:first-child { margin-bottom: 0; }
  .ld-barra > .cartao > *:not(:first-child) { display: none; }
  .ld-barra.is-aberta > .cartao > * { display: flex; }
  .ld-barra.is-aberta > .cartao > .linha-flex:first-child { margin-bottom: var(--e-3); }

  /* ── tabelas ── */

  /* Rolagem horizontal com inércia, e a dica de que há mais à direita. */
  .tabela-rolagem {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .tabela th, .tabela td { padding: 9px var(--e-2); font-size: var(--t-sm); }
  .tabela th { white-space: nowrap; }

  /* Colunas que o celular esconde. O dado não some do sistema — some da tira
     horizontal, e reaparece inteiro ao abrir a ficha. */
  .col--secundaria { display: none; }
  /* Sem a rolagem lateral, a primeira coluna pode ocupar o que sobrou. */
  .tabela td:first-child, .tabela th:first-child { min-width: 0 !important; }
  .tabela td:first-child .forte { max-width: none !important; white-space: normal; }

  /* ── modais viram folhas que sobem ── */

  .modal, .modal--largo {
    top: auto; bottom: 0; left: 0;
    transform: none;
    width: 100%; max-width: none;
    max-height: 92dvh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    animation: subirFolha var(--medio);
  }
  @keyframes subirFolha { from { transform: translateY(14px); opacity: .6; } }

  .gaveta {
    width: 100%; max-width: none;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    top: auto; bottom: 0; height: auto; max-height: 92dvh;
  }

  .painel__corpo { max-height: 62dvh; }
  .painel__pe { flex-wrap: wrap; }
  .painel__pe .btn { flex: 1; min-width: 120px; justify-content: center; }

  /* ── barra do topo enxuta ── */

  /* A meta do mês é informação de acompanhamento, não de ação. Numa tela de
     375 px ela roubava metade do topo do lugar dos botões — e ela já aparece
     inteira no Painel, que é a primeira coisa que se abre. */
  .topo__meta { display: none; }
  .topo .btn--icone { min-width: 38px; }
  #btn-usuario span:not(.txt-3) { display: none; }
  #btn-desfazer { display: none; }

  /* ── kanban ── */

  .kanban { gap: var(--e-3); padding-bottom: var(--e-4); }
  .coluna-k { min-width: 78vw; scroll-snap-align: start; }
  .kanban { scroll-snap-type: x proximity; }

  /* ── feed ── */

  .feed-layout { grid-template-columns: minmax(0, 1fr); }
  .feed { max-width: none; }
  .feed-lateral { position: static !important; }
  .compositor { padding: var(--e-4); }
  .post__cabeca { padding: var(--e-4) var(--e-4) var(--e-2); }
  .post__corpo, .post__acoes, .post__coment { padding-left: var(--e-4); padding-right: var(--e-4); }
  /* No celular a foto pode ocupar quase a tela: é o conteúdo, não um enfeite. */
  .post__foto img, .post__foto video { max-height: 76vh; }
  .post__acoes .btn { min-height: 38px; }

  /* ── barras horizontais ── */

  .barra-h { grid-template-columns: minmax(72px, 96px) 1fr auto; gap: var(--e-2); font-size: var(--t-xs); }
  .barra-h__val { min-width: 54px; }
}

/* ═══════════════════ telefone deitado ═══════════════════ */

/*
 * Pouca altura e muita largura. A barra de baixo continua, mais baixa, e o
 * conteúdo volta a usar duas colunas onde faz sentido — deitar o telefone é um
 * pedido de "quero ver mais de uma vez".
 */
@media (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
  .barra-mobile__item { min-height: 44px; font-size: 9px; padding: 4px 2px; }
  .barra-mobile__icone { font-size: 15px; }
  :root { --barra-baixo: 46px; }

  .grade--kpi { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .grade--2, .grade--3, .grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grade-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .modal, .modal--largo, .gaveta { max-height: 96dvh; }
  .painel__corpo { max-height: 52dvh; }

  .pagina, .pagina--largo { padding: var(--e-3) var(--e-4) var(--e-6); }
  .coluna-k { min-width: 40vw; }
}

/* ═══════════════════ tablet deitado ═══════════════════ */

@media (min-width: 861px) and (max-width: 1180px) {
  /* A barra lateral em ícones cabe e é melhor que a gaveta: com 900 px de
     largura, 60 px de navegação sempre visível custam pouco e poupam um toque. */
  :root { --lateral: 62px; }
  .marca__txt,
  .nav-item span:not(.nav-item__icone):not(.nav-item__selo),
  .nav-grupo { display: none; }
  .nav-item { justify-content: center; padding: 10px 0; }
  .nav-item__selo { position: absolute; top: 2px; right: 4px; margin: 0; }

  .barra-mobile { display: none; }
  .grade--kpi { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .pagina { padding: var(--e-4); }
}

/* Acima de 1180 a barra inferior não existe. */
@media (min-width: 861px) {
  .barra-mobile, .gaveta-veu { display: none; }
}