/* ==================================================================
   O SISTEMA NO CELULAR
   ------------------------------------------------------------------
   Esta folha existe porque quase todo mundo da rede abre este sistema
   pelo telefone, e até aqui o telefone recebia a tela do computador
   dobrada: a lateral virava uma faixa de itens no topo que comia
   460px — mais da METADE da tela — em toda página. A pessoa abria
   "Aniversariantes" e via menu; o conteúdo começava depois de uma
   rolagem inteira. E para trocar de tela tinha que rolar de volta.

   O desenho novo separa as duas coisas que o menu fazia junto:

     • o que se usa toda hora  → barra FIXA embaixo, no alcance do
       polegar, visível de qualquer ponto da rolagem;
     • o resto                 → "Mais", que traz a MESMA lateral por
       cima, com tudo escrito por extenso, cadeado e motivo.

   Não é menu-sanduíche: sanduíche esconde a navegação inteira atrás
   de um ícone. Aqui os quatro destinos principais estão à vista o
   tempo todo — mais do que se via antes sem rolar.

   Carregada por último no <head>: herda os tokens e vence a folha de
   tela grande sem precisar de !important. Some inteira acima de 900px.
   ================================================================== */

/* No computador, nada disto existe. */
.topo-cel, .barra-cel, .veu { display: none; }
.troca-menu { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

@media (max-width: 900px) {
  :root {
    --cel-topo: 56px;
    --cel-barra: 62px;
  }

  /* ---------------- faixa de cima: onde estou ---------------- */
  .topo-cel {
    display: flex; align-items: center; gap: var(--e-3);
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    height: var(--cel-topo); padding: 0 var(--e-4);
    background: var(--navy-500); color: #fff;
  }
  .marca-cel { display: flex; align-items: center; height: 100%; flex: none; }
  .marca-cel img { height: 24px; width: auto; display: block; }
  .titulo-cel {
    flex: 1; min-width: 0; font-family: var(--fonte-titulo, inherit);
    font-weight: 700; font-size: 0.9375rem; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Inicial do nome: leva ao cadastro e, de quebra, é a prova de que a
     pessoa ESTÁ dentro — o que o menu antigo não deixava claro. */
  .eu-cel {
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    background: var(--turq-500); color: var(--navy-900);
    display: grid; place-items: center; font-weight: 700; text-decoration: none;
  }
  .entrar-cel {
    flex: none; min-height: 36px; display: inline-flex; align-items: center;
    padding: 0 var(--e-4); border-radius: var(--raio-full);
    background: var(--turq-500); color: var(--navy-900);
    font-weight: 700; font-size: var(--txt-sm); text-decoration: none;
  }

  /* ---------------- o conteúdo, entre as duas barras ---------------- */
  .app { display: block; min-height: 100vh; }
  .conteudo {
    padding: calc(var(--cel-topo) + var(--e-4)) var(--e-4)
             calc(var(--cel-barra) + env(safe-area-inset-bottom, 0px) + var(--e-8));
    max-width: none;
  }

  /* ---------------- "Mais": a lateral por cima ---------------- */
  .lateral {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
    width: min(86vw, 320px); height: 100dvh;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    padding: var(--e-4) var(--e-3) calc(var(--e-4) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-102%); visibility: hidden;
    transition: transform 0.22s ease, visibility 0.22s;
    box-shadow: 8px 0 28px rgba(11, 25, 44, 0.35);
  }
  .troca-menu:checked ~ .lateral { transform: none; visibility: visible; }

  .veu {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(11, 25, 44, 0.55);
    opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0.22s;
  }
  .troca-menu:checked ~ .veu { opacity: 1; visibility: visible; }
  /* Com o menu aberto, a página de trás não rola junto. */
  body:has(.troca-menu:checked) { overflow: hidden; }

  /* Dentro do painel os itens voltam a ser uma lista — um por linha, com o
     grupo a que pertencem, como no computador. */
  .lateral .menu { flex-direction: column; flex-wrap: nowrap; gap: 2px; flex: 1; }
  .lateral .grupo { display: block; }
  .lateral .item { white-space: normal; min-height: 46px; }
  .lateral .item.futuro { display: flex; }
  .lateral .item em { display: inline-block; }
  .lateral .marca-lateral { padding: var(--e-2) var(--e-3) var(--e-5); min-height: 0; }
  .lateral .marca-lateral img { height: 30px; }
  .lateral .lateral-pe {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    margin-top: var(--e-4); padding-top: var(--e-3); flex: none;
  }
  .lateral .quem-sou { display: flex; }

  /* ---------------- barra de baixo ---------------- */
  .barra-cel {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--superficie); border-top: 1px solid var(--borda);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .item-cel {
    flex: 1 1 0; min-width: 0; height: var(--cel-barra); position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; text-decoration: none; cursor: pointer;
    color: var(--texto-suave); font-size: 0.6875rem; font-weight: 600;
    -webkit-tap-highlight-color: transparent;
  }
  .item-cel span:last-child {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .item-cel .ic-cel { position: relative; display: block; line-height: 0; }
  .item-cel .ic { width: 23px; height: 23px; }
  .item-cel.ativo { color: var(--navy-500); }
  .item-cel.ativo .ic { stroke-width: 2.1; }
  /* O ativo ganha um traço em cima: cor sozinha não basta para quem enxerga
     pouco, e no telefone a barra é o único mapa que sobra. */
  .item-cel.ativo::before {
    content: ''; position: absolute; top: 0; width: 34px; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--turq-500);
  }
  .item-cel:active { background: var(--navy-50); }
  .item-cel .ponto {
    position: absolute; top: -5px; left: 13px;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: var(--raio-full); background: var(--perigo, #C2410C); color: #fff;
    font-size: 0.625rem; font-weight: 700; font-style: normal;
    display: grid; place-items: center; line-height: 1;
  }

  /* ---------------- o que o dedo precisa alcançar ----------------
     Medido com o sistema no ar, num telefone de 390px: botões de 34 a 38px de
     altura. O piso de 44px é o mesmo de `--alvo-toque`, que já estava nos
     tokens desde o começo — só não chegava até aqui. O `.app` na frente existe
     para empatar em especificidade com as regras de tela grande (`.aniv .acao
     .btn` e parentes) e ganhar por vir depois, sem !important. */
  .app .conteudo .btn, .app .conteudo .botao, .app .conteudo button,
  .app .conteudo input[type="submit"], .app .conteudo .aba, .app .conteudo .voltar {
    min-height: var(--alvo-toque);
  }
  .app .conteudo .btn, .app .conteudo .botao {
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Lista de nomes que é link (o mural do painel): linha de 34px, dedo de 8mm. */
  .app .conteudo .pulso-aniv .nomes a { min-height: var(--alvo-toque); }

  /* Filtro: campo e botão empilhados, cada um inteiro. Lado a lado eles ficavam
     com um terço da largura e o dedo errava o alvo. */
  .filtros { display: grid; grid-template-columns: 1fr; gap: var(--e-3); }
  .filtros .campo, .filtros .campo.estreito { width: 100%; max-width: none; }
  .filtros .campo button, .filtros button[type="submit"] { width: 100%; }

  /* Texto pequeno demais para ler em movimento. */
  .rotulo, .escopo, .ramo, .sub, .kpi .r, .dir-cargo { font-size: 0.8125rem; }

  /* ---------------- tabela de rótulo e valor ----------------
     Três colunas (rótulo, valor, ação) em 358px: a tabela estoura, o container
     rola de lado e a coluna de AÇÃO fica fora da tela — com a agravante de que
     rolagem lateral dentro de um cartão ninguém adivinha que existe. No
     telefone cada linha vira um bloco: rótulo em cima, valor embaixo, ação
     abaixo dos dois. É a mesma informação, na ordem em que se lê. */
  .ficha-campos, .ficha-campos tbody, .ficha-campos tr,
  .ficha-campos th, .ficha-campos td { display: block; width: auto; }
  .ficha-campos tr {
    padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--borda);
  }
  .ficha-campos tr:last-child { border-bottom: 0; }
  .ficha-campos th {
    position: static; background: none; border: 0; padding: 0 0 3px;
    width: auto !important;          /* o style="width:190px" da ficha do parceiro */
  }
  .ficha-campos td {
    border: 0; padding: 0; white-space: normal; font-size: var(--txt-base);
  }
  .ficha-campos td.fim { margin-top: var(--e-2); text-align: left; }
  .ficha-campos td:empty { display: none; }

  /* O aviso que aparece depois de uma ação mora no canto de baixo — onde agora
     está a barra. Sobe para cima dela e ocupa a largura toda: no telefone não
     existe "canto da tela" com espaço sobrando. */
  .faixa-ok.flutua {
    right: var(--e-4); left: var(--e-4); max-width: none;
    bottom: calc(var(--cel-barra) + env(safe-area-inset-bottom, 0px) + var(--e-3));
  }
}

/* ------------------------------------------------------------------
   AS TELAS DE FLUXO (entrar, primeiro acesso, pesquisa)
   Não têm menu — têm UMA coisa para fazer. O que atrapalhava no
   telefone era outra coisa: os dois links embaixo do formulário,
   lado a lado, com 22px de altura e colados um no outro. Errar o
   toque ali manda a pessoa para a tela errada bem no momento em que
   ela já está com dificuldade de entrar.
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .vidro-links {
    flex-direction: column; align-items: stretch; gap: 0;
    text-align: center; margin-top: 18px;
  }
  .vidro-links a {
    display: flex; align-items: center; justify-content: center;
    min-height: var(--alvo-toque); padding: 0 var(--e-2);
  }
  .vidro-links a + a { border-top: 1px solid rgba(255, 255, 255, 0.10); }
  /* Rodapé sobre foto: 12px em cinza claro não se lê no sol. */
  .login-pe { font-size: var(--txt-sm); color: rgba(255, 255, 255, 0.72); }
}

/* Telefone estreito (iPhone SE e afins): o rótulo encolhe antes de a palavra
   ser cortada no meio. */
@media (max-width: 360px) {
  .item-cel { font-size: 0.625rem; }
  .item-cel .ic { width: 22px; height: 22px; }
  .titulo-cel { font-size: 0.9375rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lateral, .veu { transition: none; }
}

/* Impresso não leva barra nenhuma. */
@media print {
  .topo-cel, .barra-cel, .veu, .lateral { display: none !important; }
  .conteudo { padding: 0 !important; }
}