/* ============================================================
   DESKTOP — tudo neste arquivo vive dentro do @media abaixo.
   Duas regras invioláveis:
     1. Nenhuma linha fora do @media.
     2. Nada de desktop em base.css ou componentes.css.
   Consequencia: abaixo de 900px este arquivo nao produz declaracao nenhuma e
   o celular fica byte a byte igual.
============================================================ */

@media (min-width: 900px) {

  body { padding: 0; }

  /* Navegacao vira menu lateral: mesmos destinos, outra posicao. */
  .barra-inferior {
    position: fixed; top: 52px; bottom: 0; left: 0; right: auto;
    width: 200px;
    flex-direction: column;
    border-top: 0; border-right: 1px solid var(--borda);
  }
  .barra-inferior button {
    flex: 0 0 auto; min-height: 40px;
    text-align: left; padding: 0 var(--e4);
    font-size: var(--t-corpo);
  }
  .barra-inferior button[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--acao);
    background: var(--realce);
  }

  main { margin-left: 200px; padding: var(--e5); max-width: 1200px; }

  /* Lista: a tabela densa entra e os cartoes saem. */
  .lista-cartoes { display: none; }
  .tabela { display: table; width: 100%; border-collapse: collapse; }
  .tabela th, .tabela td {
    height: var(--linha-desk);
    padding: 0 var(--e3);
    text-align: left;
    border-bottom: 1px solid var(--borda);
    font-size: var(--t-apoio);
    white-space: nowrap;
  }
  .tabela th {
    background: var(--realce);
    font: 700 var(--t-rotulo)/var(--lh-rotulo) var(--fonte);
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--texto-apoio);
    /* `top: 0`, e nao `top: 52px` como a altura do cabecalho da pagina sugeriria.

       A .tabela-rolagem logo abaixo tem `overflow-x: auto`, e isso a torna o
       scrollport deste sticky. Como esse scrollport nunca rola na vertical, um
       `top: 52px` nao fica ocioso esperando rolagem: o navegador desloca o <th>
       52px para baixo ja no scroll zero, e ele pinta — com fundo opaco — por
       cima das duas primeiras linhas. Na ordenacao padrao "mais recentes", os
       dois leads mais novos sumiam atras do proprio cabecalho, em toda largura
       de desktop.

       Com `top: 0` o cabecalho fica alinhado ao topo do container e rola junto
       com a pagina. Perde-se o cabecalho fixo durante a rolagem — que, na
       pratica, ja nao funcionava desde que o container de rolagem passou a
       existir. */
    position: sticky; top: 0;
  }
  .tabela tbody tr:hover { background: var(--realce); cursor: pointer; }

  /* Defeito: a tabela era emitida solta dentro do main. Sete colunas nowrap nao
     cabem em 900px de janela, entao entre 900 e ~1200px quem rolava na
     horizontal era a PAGINA — cabecalho e menu lateral saindo de lugar junto,
     que e exatamente o que o spec proibe. Aqui o excesso passa a rolar dentro do
     proprio container. Efeito colateral aceito: virando area de rolagem, este
     div passa a ser o scrollport do `position: sticky` do <th> logo acima, que
     so voltaria a fixar de verdade se a tabela ganhasse altura maxima propria. */
  .tabela-rolagem { overflow-x: auto; }

  /* Filtro deixa de ser gaveta e vira painel fixo ao lado da lista.
     Defeito: este bloco redefinia position, max-height, borda e margem — tudo
     menos `display`. Como a tela emite a gaveta com o atributo `hidden` e o
     unico botao que a abria e o .btn-abre-gaveta escondido aqui embaixo, acima
     de 900px nao havia filtro nem export filtrado: a regra [hidden]{display:none}
     da folha do navegador seguia valendo e nada a desligava. O `display: block`
     abaixo a desliga (folha do autor vence a do navegador) e e o que deixa o
     painel permanentemente aberto no desktop — quem sabe disso e o CSS, nao o
     JS medindo largura de janela. */
  .gaveta-fundo { display: none; }
  .gaveta {
    display: block;
    position: static; max-height: none; border: 1px solid var(--borda);
    border-radius: var(--raio); margin-bottom: var(--e4);
  }
  .btn-abre-gaveta { display: none; }

  /* Densidade do painel de filtro no desktop.

     No celular cada opcao ocupa 44px, que e o alvo de toque. Aqui existe cursor,
     e com o painel permanentemente aberto aquele valor somava 604px de altura —
     a tabela comecava abaixo da dobra e sobrava UMA linha de lead visivel a
     1440x900. O painel de filtro nao pode custar a lista que ele filtra. */
  .opcao-filtro { min-height: 26px; margin-right: var(--e3); }
  .gaveta { padding: var(--e3) var(--e4); }
  .gaveta h2 { margin-bottom: var(--e2); font-size: var(--t-corpo); }
  .gaveta .campo { margin-bottom: var(--e2); }

  /* O filtro fica AO LADO da lista, nao acima dela.

     Empilhado ele custa altura de tabela em toda largura de tela: mesmo depois
     de comprimir as opcoes de 44px para 26px, sobravam 476px de painel e so 4
     de 6 leads cabiam na dobra a 1440x900. Um filtro que esconde a lista que
     ele filtra esta no lugar errado, nao com o tamanho errado.

     A grade abaixo poe a busca e o formulario de cadastro em toda a largura, e
     divide o meio em duas colunas: filtro estreito a esquerda, resultado a
     direita. Os seletores dependem da ordem dos filhos que a tela emite, entao
     estao ancorados nos ids reais (#gavetaFiltro, #leadResultado, #leadFormNovo)
     em vez de :nth-child, que quebraria ao acrescentar um bloco. */
  /* `:not([hidden])` nao e decoracao: sem ele esta regra quebra a navegacao.

     `#telaLeads` e seletor de ID e vence `.tela[hidden] { display: none }` do
     base.css por especificidade. Com `display: grid` incondicional, a tela de
     Leads deixava de ser escondida no desktop e aparecia por baixo de todas as
     outras — o menu marcava "Painel" e o que estava na tela era a lista.

     Regra geral que isto ensina: toda regra de `display` ancorada em ID precisa
     respeitar o `[hidden]`, porque o atributo e como este app troca de tela. */
  #telaLeads:not([hidden]) {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 0 var(--e4);
    align-items: start;
  }
  /* As LINHAS sao explicitas, nao automaticas.

     Com so `grid-column`, a auto-colocacao poe cada filho numa linha nova: o
     filtro ficava na linha 3 e o resultado na 4, ou seja lado a lado no eixo
     errado e empilhados no certo. A tabela chegou a comecar em 1136px — pior
     que antes de mexer. Fixando a linha, o filtro ocupa as duas linhas do meio
     e a lista sobe para o lado dele.

     A ordem dos filhos que a tela emite e: h1, busca, gaveta, acoes,
     resultado, formulario de cadastro. */
  #telaLeads > h1                 { grid-column: 1 / -1; grid-row: 1; }
  #telaLeads > div:first-of-type  { grid-column: 1 / -1; grid-row: 2; }  /* busca */
  #telaLeads > #gavetaFiltro      { grid-column: 1;      grid-row: 3 / span 2; }
  #telaLeads > div:has(#btnNovoLead) { grid-column: 2;   grid-row: 3; }  /* acoes */
  #telaLeads > #leadResultado     { grid-column: 2;      grid-row: 4; }
  #telaLeads > #leadFormNovo      { grid-column: 1 / -1; grid-row: 5; }

  /* Na coluna estreita as opcoes empilham; sem isso elas ficariam lado a lado
     e estourariam os 260px. */
  #gavetaFiltro .opcao-filtro { display: flex; margin-right: 0; }

  /* --- funil: as quatro colunas lado a lado -----------------------------
     Aqui cabem todas de uma vez, entao o modo de uma-coluna-por-vez do celular
     some: sem abas, sem snap, sem deslize. O quadro inteiro fica visivel e o
     que rola e a coluna, por dentro. */
  .funil-abas { display: none; }
  .funil-faixa {
    display: grid;
    /* Largura igual, com piso: `minmax(160px, 1fr)`. 160px e o que o telefone
       formatado do lead precisa para nao quebrar em duas linhas. Abaixo de
       ~1000px de janela as quatro deixam de caber ao lado do painel de filtro, e
       entao o excesso rola DENTRO da faixa (o `overflow-x` vem de
       componentes.css) — o documento nunca rola na horizontal. */
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: var(--e3);
    scroll-snap-type: none;
    min-height: 0; max-height: none;
  }
  .funil-coluna { border: 1px solid var(--borda); border-radius: var(--raio); }

  /* Cabecalho da coluna com o mesmo desenho do cabecalho da tabela: cinza claro,
     versalete, rotulo em cinza de apoio. Neste sistema cinza e a linguagem de
     rotulo e branco e a de conteudo — a coluna do quadro nao abre excecao. */
  .funil-cabecalho {
    display: flex; justify-content: space-between; align-items: center; gap: var(--e2);
    height: var(--linha-desk); padding: 0 var(--e2);
    border-bottom: 1px solid var(--borda);
    border-radius: var(--raio) var(--raio) 0 0;
    background: var(--realce);
    font: 700 var(--t-rotulo)/var(--lh-rotulo) var(--fonte);
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--texto-apoio);
  }
  /* Coluna longa rola por dentro; a pagina fica parada. O desconto e o que esta
     sempre acima do quadro: cabecalho, padding do main, titulo, busca e acoes. */
  .funil-corpo { padding: var(--e2); max-height: calc(100vh - 300px); }

  /* Aqui existe cursor: o alvo de 44px do dedo vira densidade de tela. */
  .funil-abre   { min-height: 0; }
  .funil-mover  { min-height: 26px; min-width: 0; }
  .funil-destino { min-height: 30px; font-size: var(--t-apoio); }

  /* No celular o "Mover" cabe ao lado do nome, e a coluna tem a largura da tela.
     Aqui a coluna tem ~180px: o nome mais o botao nao cabem na mesma linha, e
     com `wrap` o botao caia para baixo em UMAS colunas e ficava ao lado em
     outras, conforme o tamanho do nome. Empilhar sempre custa a mesma altura e
     da ao cartao uma forma so. */
  .funil-cartao { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .funil-mover  { align-self: flex-end; }

  /* Arrastar so existe onde ha mouse: HTML5 drag and drop nao dispara no toque.
     Por isso o retorno visual do arrasto vive inteiro neste arquivo. */
  .funil-cartao { cursor: grab; }
  .funil-cartao.funil-arrastando { opacity: .4; cursor: grabbing; }
  .funil-coluna.funil-alvo { border-color: var(--acao); }
  .funil-coluna.funil-alvo .funil-corpo { background: var(--realce); }

  /* --- no FUNIL o painel de filtro sai da lateral ------------------------

     O painel permanente e da LISTA: e la que se filtra 300 leads e se exporta.
     O quadro e para ver a forma do funil e mover gente, e ali aqueles 260px
     custam a quarta coluna: a 1000px a faixa precisa de 676px e sobravam 476,
     entao "Comprou" ficava cortada sem nada indicando que havia mais a direita.

     No funil ele volta a ser gaveta sob demanda, como no celular — o botao
     "Filtrar" reaparece e o painel abre por cima, sem tirar largura do quadro. */
  #telaLeads.com-funil:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
  #telaLeads.com-funil > * { grid-column: 1; }
  #telaLeads.com-funil > h1                { grid-row: 1; }
  #telaLeads.com-funil > div:first-of-type { grid-row: 2; }
  #telaLeads.com-funil > div:has(#btnNovoLead) { grid-row: 3; }
  #telaLeads.com-funil > #leadResultado    { grid-row: 4; }
  #telaLeads.com-funil > #leadFormNovo     { grid-row: 5; }

  /* O botao volta a existir, porque agora ha algo para ele abrir. */
  #telaLeads.com-funil .btn-abre-gaveta { display: inline-block; }

  /* Fechada por padrao. Este seletor tem que vencer o `.gaveta{display:block}`
     que o desktop usa na lista — por isso ele e ancorado no id e no estado.
     E o unico display: none que NAO leva `:not([hidden])`: ele existe
     justamente para respeitar o [hidden], nao para ignora-lo. */
  #telaLeads.com-funil #gavetaFiltro[hidden] { display: none; }

  /* Aberta, ela flutua sobre o quadro em vez de empurra-lo. */
  #telaLeads.com-funil #gavetaFiltro:not([hidden]) {
    position: fixed; right: var(--e5); bottom: var(--e5); left: auto;
    width: 320px; max-height: 70vh; overflow-y: auto;
    z-index: 21;
    box-shadow: 0 4px 24px rgba(0,0,0,.16);
  }

  /* Formulario em duas colunas: no desktop cabe, no celular nao. */
  .form-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e4); }

  /* --- a porta ganha um umbral ------------------------------------------
     No celular o formulario E a pagina. Aqui, com 1440px de largura sobrando,
     um formulario solto no branco fica boiando. O fundo levemente acinzentado
     com o cartao branco por cima cria a soleira: o lado de fora e cinza, o
     sistema e branco, e entrar e atravessar isso. Usa o token --realce, que ja
     existe para a linha sob o cursor — nenhuma cor nova entra no sistema. */
  .login-overlay { background: var(--realce); }
  .login-caixa {
    max-width: 380px;
    padding: var(--e7) var(--e6) var(--e6);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--fundo);
    margin-bottom: 6vh;
  }

  .toast { left: auto; right: var(--e5); bottom: var(--e5); max-width: 420px; }
}