/* ===================================================================
   desktop.css — ajustes para telas grandes.

   REGRA DE OURO (a mesma do mobile.css): todo o conteúdo deste arquivo
   vive dentro de uma @media (min-width: ...). Em celular nenhuma regra
   daqui é aplicada, então o layout mobile continua exatamente o mesmo
   de antes.

   Ordem de carga no base.html:
       style.css  →  mobile.css  →  desktop.css
   As faixas não se sobrepõem (mobile até 640px, desktop a partir de
   1024px), mas desktop.css vem por último para vencer qualquer empate
   de especificidade com o style.css.

   PROBLEMA QUE ESTE ARQUIVO RESOLVE
   O Hub inteiro vive dentro de `.wrap{max-width:720px}`. Num monitor de
   1366px isso deixa cerca de 320px de fundo azul vazio de cada lado; num
   de 1920px, cerca de 600px. O cabeçalho ocupa a tela toda e o conteúdo
   fica espremido numa coluna central. 720px é largura de tablet.

   O QUE ESTE ARQUIVO NÃO FAZ (decisão de projeto)
   A meta não é esticar tudo até 100% da tela. Campo de texto com 1900px
   de largura é pior de ler, não melhor. A meta é eliminar a faixa vazia
   e usar a largura onde há conteúdo que se beneficia dela: grades de
   cards, listas e a tabela de itens do orçamento. Formulário de leitura
   vertical continua com largura controlada, na seção final.
   =================================================================== */


/* ====================== DESKTOP (a partir de 1024px) ====================== */
@media (min-width: 1024px) {

  /* ---------- estrutura geral ----------
     720 → 1180px. Não é a tela inteira de propósito: acima de ~1400px a
     linha fica longa demais para o olho acompanhar do fim de uma linha
     ao começo da seguinte. 1180px com padding lateral maior mata a faixa
     vazia sem criar o problema oposto. */
  .wrap { max-width: 1180px; padding: 30px 32px 70px; }

  /* O cabeçalho é de ponta a ponta (fundo claro full-bleed), mas o
     conteúdo dele precisa alinhar com o `.wrap` das páginas. Sem isto a
     logo fica colada na borda enquanto o título da página começa 32px
     adentro, e o degrau salta aos olhos. */
  .topbar { padding: 14px 0; }
  .topbar .tb-logo { margin-left: max(32px, calc((100vw - 1180px) / 2 + 32px)); }
  .topbar .right  { margin-right: max(32px, calc((100vw - 1180px) / 2 + 32px)); }
  .topbar img { height: 42px; }

  /* ---------- escala tipográfica ----------
     As fontes foram calibradas para celular, a uns 40cm do rosto. Num
     monitor a uns 70cm o mesmo tamanho em px aparenta menor. Os aumentos
     são modestos de propósito: o objetivo é conforto de leitura, não um
     app "grandão". */
  .hero { margin-bottom: 28px; }
  .hero h1 { font-size: 34px; }
  .hero .desc { font-size: 14px; margin-top: 10px; }
  .voltar { font-size: 14px; margin-bottom: 18px; }
  .section-t { font-size: 13px; }
  .hint { font-size: 14px; padding: 13px 16px; }

  /* ---------- home: grade de módulos ----------
     `auto-fill` com minmax já cria colunas sozinho conforme sobra espaço;
     o que faltava era o espaço. O minmax maior evita que num monitor
     ultrawide os cards virem uma fileira de tijolinhos. */
  .apps-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
  .app-card { min-height: 170px; padding: 34px 20px; }
  .app-card .t { font-size: 20px; }

  /* ---------- painel do gestor: grade de controles ----------
     Espelha o bloco da home acima, número por número. */
  .ctrl-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
  .ctrl { min-height: 170px; padding: 34px 20px; }
  .ctrl .c-t { font-size: 20px; }

  /* ---------- painéis ----------
     Usados no painel do gestor (uma aprovação por painel) e nos blocos do
     formulário de orçamento. Mais respiro, mesma estrutura. */
  .panel { padding: 24px 26px; }
  .grid2, .grid3 { gap: 16px; }

  /* ---------- listas (orçamentos, clientes, catálogo) ----------
     Continuam em COLUNA ÚNICA de propósito. Cada linha carrega título,
     subtítulo, valor e até três ações: em duas colunas os botões quebram
     para uma segunda fileira e fica pior que a linha larga. A largura
     extra vai para o título parar de truncar. */
  .list-row { padding: 15px 18px; margin-bottom: 9px; }
  .list-row .lr-title { font-size: 16px; }
  .list-row .lr-sub { font-size: 13px; }
  /* Só o respiro entre as barras e a lista cresce no desktop. O gap entre os
     controles NÃO: ele vale o da base, porque com todos na mesma altura o
     conjunto tem de ler como um bloco só, e não como peças soltas. */
  .tbl-tools { margin-bottom: 16px; }
  .filtros { margin-bottom: 18px; }
  .mes-head { padding: 0 14px; font-size: 13px; }
  .empty-box { padding: 44px 0; }

  /* ---------- tabela de itens do orçamento ----------
     O maior ganho fora da home. As colunas de quantidade e valor são
     fixas e a descrição leva o que sobra: a 720px sobravam cerca de
     390px e o nome do serviço vivia cortado. A 1180px sobram cerca de
     760px. As colunas fixas crescem um pouco junto para o valor em reais
     não ficar espremido contra a borda do campo. */
  .item-row { grid-template-columns: 1fr 100px 150px 150px 44px; gap: 12px; padding: 12px 0; }
  .item-inp { font-size: 14px; }

  /* ---------- PÁGINAS QUE NÃO DEVEM ESTICAR ----------
     Decisão deliberada, não esquecimento.

     O cadastro de cliente é preenchimento vertical, campo a campo, de
     cima para baixo. Um <input> de 1100px força o olho a varrer a tela
     inteira para achar o cursor, e a tela não tem nenhuma grade que
     justifique a largura. Recebe a tipografia e o alinhamento de
     cabeçalho acima, mas mantém a coluna estreita e centralizada.

     O formulário de ORÇAMENTO ficou fora desta lista de propósito: ele
     tem a tabela de itens, que é justamente o conteúdo que ganha com a
     largura. */
  .wrap.wrap-form { max-width: 820px; }

}


/* ==================== DESKTOP LARGO (a partir de 1600px) ====================
   Monitores grandes e ultrawide. O container ganha mais um degrau, mas o
   texto corrido continua limitado: só as grades e listas aproveitam. */
@media (min-width: 1600px) {
  .wrap { max-width: 1360px; }
  .topbar .tb-logo { margin-left: calc((100vw - 1360px) / 2 + 32px); }
  .topbar .right  { margin-right: calc((100vw - 1360px) / 2 + 32px); }
  .wrap.wrap-form { max-width: 820px; }
}