/* ═══════════════════════════════════════════════════════════════
   NutriFlow — camada de toque (celular)

   Esta folha entra DEPOIS de temas.css e nutriflow.css e só tem
   regras dentro de @media: em telas de desktop ela não pinta um
   pixel. O alvo é o painel instalado como aplicativo num aparelho
   de 390 px — dedo, não mouse.

   O que ela resolve, na ordem da auditoria:
     1. o X das Configurações some ao rolar as abas
     2. os botões flutuantes cobrem conteúdo
     3. o rail lateral vira barra inferior de navegação
     4. faixas de aba escondidas, sem pista de rolagem
     5. o "⋮" das listas nascia com 16 px de largura
     6. calendário da semana sem indicação de rolagem
     7. alvos de toque abaixo de 44 px
     9. <select> truncado e toast no lugar errado

   Sobre a especificidade: nutriflow.css prefixa tudo com
   `:is(html:not([data-tema]),html[data-tema=padrao])`, que vale
   (0,2,1). Por isso as regras daqui usam o prefixo `html:root body`
   — (0,2,2) — e vencem por especificidade, não pela ordem de
   carregamento. Onde a folha de lá é mais específica que isso, a
   regra daqui repete o mesmo peso (é o caso de `.inp:not(.folha *)`,
   assinalado no lugar). `!important` fica reservado a dois casos em
   que a marcação traz estilo embutido (a largura mínima do
   calendário e a grade de 7 dias), assinalados na própria regra.

   A identidade é a mesma: azul-marinho #29315F, índigo #5B5FE0,
   cartão branco com borda #E8EAF3, raio 16 px, Inter. Nada aqui
   inventa cor: tudo sai dos tokens (--roxo, --superficie, --linha…),
   para que os temas premium continuem valendo.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   BASE — o único bloco fora de @media

   `.nfm-tabbar`, `.nfm-tab` e `.nfm-folha-*` são marcação que só
   existe por causa do celular (tabbarHTML e menuMaisCelular, em
   40_shell.js). Nenhuma folha anterior conhece essas classes, então
   desenhá-las aqui não muda um pixel do que já existia — e a barra
   nasce escondida: só o bloco de 760 px a acende. O que depende da
   largura (posição fixa no rodapé, folha colada embaixo) fica lá.
   ═══════════════════════════════════════════════════════════════ */
html:root body .nfm-tabbar{display:none}
html:root body .nfm-tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:46px;padding:2px 2px 3px;border-radius:12px;
  color:var(--cinza);font:inherit;line-height:1;
  -webkit-tap-highlight-color:transparent;
}
html:root body .nfm-tab svg{width:21px;height:21px;stroke-width:1.7;flex:0 0 auto}
html:root body .nfm-tab b{
  font-size:10.5px;font-weight:600;letter-spacing:-.01em;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
html:root body .nfm-tab.on{color:var(--roxo);background:var(--roxo-cla)}
html:root body .nfm-tab.on svg{stroke-width:2.1}
html:root body .nfm-tab:active{background:var(--linha-2)}
html:root body .nfm-tab.on:active{background:var(--roxo-cla)}

html:root body .nfm-folha-lista{display:flex;flex-direction:column;gap:2px}
html:root body .nfm-folha-i{
  display:flex;align-items:center;gap:12px;
  min-height:48px;padding:0 12px;border-radius:12px;
  font-size:14px;font-weight:500;color:var(--tinta-2);text-align:left;
}
html:root body .nfm-folha-i svg{flex:0 0 auto;color:var(--cinza)}
html:root body .nfm-folha-i.on{background:var(--roxo-cla);color:var(--roxo);font-weight:600}
html:root body .nfm-folha-i.on svg{color:var(--roxo)}
html:root body .nfm-folha-i:active{background:var(--linha-2)}
html:root body .nfm-folha-sub{padding-left:34px;min-height:44px;font-size:13px}
html:root body .nfm-folha-sep{height:1px;background:var(--linha);margin:8px 12px}

/* ═══════════════════════════════════════════════════════════════
   CELULAR — até 760 px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:760px){

  html:root body{
    /* medidas da faixa inferior: barra de navegação + botões
       flutuantes. O palco reserva esse espaço no padding, de modo
       que nada de conteúdo fique embaixo dos botões (P-mob-02). */
    --nfm-tabbar:58px;
    --nfm-seguro:env(safe-area-inset-bottom, 0px);
    --nfm-fab:52px;
    --nfm-faixa:calc(var(--nfm-tabbar) + var(--nfm-seguro));
  }

  /* ── 3. rail lateral → barra inferior ────────────────────────
     O rail continua no DOM (o widget de teste e o #btConfig vivem
     nele, e ligarCasco() conta com isso), mas sai da tela. Quem
     navega é a .nfm-tabbar montada em tabbarHTML(). */
  html:root body .rail{display:none}
  html:root body .topo{left:0}
  html:root body .palco,
  html:root body .palco.limpo{
    margin-left:0;
    /* barra de navegação + a faixa dos botões flutuantes: é este
       respiro que garante que a última linha de qualquer lista possa
       ser rolada para fora de baixo dos botões */
    padding-bottom:calc(var(--nfm-faixa) + var(--nfm-fab) + 26px);
  }
  html:root body .split{margin-left:-12px;margin-right:-12px;margin-bottom:0}
  html:root body .split-e{padding-bottom:calc(var(--nfm-faixa) + var(--nfm-fab) + 26px)}

  html:root body .nfm-tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    display:grid;grid-template-columns:repeat(5,1fr);
    background:var(--superficie);
    border-top:1px solid var(--linha);
    padding:6px 4px calc(6px + var(--nfm-seguro));
    box-shadow:0 -8px 24px -18px rgba(35,42,87,.55);
  }

  /* folha do "Mais": nasce colada no rodapé, como numa aplicação */
  html:root body .veu:has(.nfm-folha){align-items:flex-end;padding:0}
  html:root body .modal.nfm-folha{
    width:100%;max-width:none;max-height:82vh;
    border-radius:20px 20px 0 0;
    padding-bottom:var(--nfm-seguro);
    animation:nfmSobeFolha .2s cubic-bezier(.2,.7,.3,1);
  }
  @keyframes nfmSobeFolha{from{transform:translateY(18px);opacity:.6}}
  html:root body .modal.nfm-folha .modal-c{padding:8px 12px 14px}

  /* ── 2. botões flutuantes ────────────────────────────────────
     Antes: um em cada canto, presos ao rodapé, cobrindo o nome e o
     status das últimas linhas de toda lista. Agora os dois moram no
     mesmo canto, acima da barra de navegação e lado a lado — nada
     do lado esquerdo, os dois a um toque, e o padding do palco
     garante que toda linha possa ser rolada para fora deles. */
  html:root body .fab,
  html:root body .fab-ia{
    bottom:calc(var(--nfm-faixa) + 12px);
    width:var(--nfm-fab);height:var(--nfm-fab);
    z-index:66;
  }
  html:root body .fab{right:14px;left:auto}
  html:root body .fab-ia{right:calc(14px + var(--nfm-fab) + 10px);left:auto}
  html:root body .fab svg{width:24px;height:24px}
  html:root body .fab-ia svg{width:22px;height:22px}

  /* ── 9. toast acima da faixa de botões ───────────────────────── */
  html:root body #toasts{
    bottom:calc(var(--nfm-faixa) + var(--nfm-fab) + 22px);
    left:12px;right:12px;transform:none;
  }
  html:root body .toast{max-width:100%}

  /* ── 7. alvos de toque ≥44 px ────────────────────────────────
     Apple HIG. Só altura e área: a forma, a cor e o tipo continuam
     os mesmos, então o painel não "engorda" — fica clicável. */
  html:root body .b{min-height:44px;padding:0 16px}
  html:root body .b-g{min-height:48px}
  html:root body .b-p{min-height:44px;padding:0 14px}
  /* "Ver todos", "Ver", "Abrir ficha": eram texto de 17 a 31 px de
     altura. A área cresce, o desenho (tipo e cor) fica igual. */
  html:root body .nf-link{min-height:44px;display:inline-flex;align-items:center}
  html:root body #palco button[data-acao="curtir"],
  html:root body #palco button[data-acao="comentar"]{
    min-height:44px;padding:0 10px;margin-left:-10px;border-radius:10px;
  }
  html:root body #palco button[data-acao="comentar"]{margin-left:0}
  /* nome do paciente como link dentro das listas (financeiro, códigos
     de acesso): 19,5 px de altura de texto viravam um alvo de agulha */
  html:root body .tab td a{min-height:40px;display:inline-flex;align-items:center}
  html:root body .b-ico,
  html:root body .b.b-ico{width:44px;height:44px;min-height:44px;padding:0;flex:0 0 44px}
  html:root body .b-ico svg{width:18px;height:18px}
  html:root body .chip{height:40px;padding:0 14px;font-size:13px}
  html:root body .chips{gap:8px}
  html:root body .fechar{width:44px;height:44px;flex:0 0 44px}
  html:root body .pill-tarefas{height:40px;min-width:40px;justify-content:center}
  html:root body .ico-topo{width:40px;height:40px;border-radius:11px}
  html:root body .nf-user{min-height:40px}
  html:root body .aba{padding:12px 14px;min-height:46px;display:inline-flex;align-items:center}
  html:root body .mr-i{min-height:44px}
  html:root body .seg button{min-height:40px;padding:0 14px}
  html:root body .ck input{width:22px;height:22px;flex:0 0 22px}
  /* links de texto do login e dos rodapés: área de toque sem mexer
     no desenho (o traço continua colado no texto) */
  html:root body .auth button.rx,
  html:root body .auth a{display:inline-flex;align-items:center;min-height:44px}
  /* o olho de "mostrar senha" dentro do campo */
  html:root body .nf-senha-olho{width:42px;height:42px;right:3px}

  /* ── 4/6. trilhos horizontais com pista de rolagem ───────────
     ligarRolagemX() (10_util.js) marca rx-e/rx-d enquanto houver
     conteúdo fora da tela; aqui isso vira uma sombra suave na borda
     e um degradê que apaga a última aba — a leitura imediata de
     "tem mais coisa para esse lado". */
  html:root body .abas,
  html:root body .mr-nav,
  html:root body .rolar-x{
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
    position:relative;
  }
  html:root body .kpi-fita{-webkit-overflow-scrolling:touch}
  /* `.rolar-x` (calendário da semana, tabelas largas) entra só na
     regra da direita: o degradê da esquerda apagaria a coluna das
     horas, que fica grudada ali de propósito. */
  html:root body .abas.rx-d,
  html:root body .rolar-x.rx-d,
  html:root body .kpi-fita.rx-d{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
  }
  html:root body .abas.rx-e,
  html:root body .kpi-fita.rx-e{
    -webkit-mask-image:linear-gradient(to right,transparent,#000 34px);
    mask-image:linear-gradient(to right,transparent,#000 34px);
  }
  html:root body .abas.rx-e.rx-d,
  html:root body .kpi-fita.rx-e.rx-d{
    -webkit-mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent);
    mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent);
  }
  /* a faixa de abas ganha respiro para o degradê não comer a
     primeira nem a última aba quando o trilho está no fim */
  html:root body .abas{scroll-padding-inline:16px;padding-right:8px}

  /* A faixa de abas do palco (ficha do paciente, agenda, modo
     autônomo) fica grudada logo abaixo da barra de topo. Sem isso,
     trocar de aba na ficha exigia rolar de volta ao começo da página
     toda vez — com 13 abas, é o gesto mais repetido da tela. */
  html:root body #palco>.abas{
    position:sticky;top:var(--nf-topo,var(--topo,56px));z-index:20;
    background:var(--fundo);
    box-shadow:0 8px 14px -12px rgba(35,42,87,.55);
  }

  /* ── fita de indicadores (topo da ficha) ─────────────────────
     Os cinco cartões de resumo empilhados ocupavam meia tela e mais
     um pouco. Viram uma fita que rola na horizontal, com encaixe por
     cartão: o resumo continua inteiro e as abas sobem para perto do
     alto da página. */
  html:root body .grade.kpi-fita{
    display:flex;grid-template-columns:none;
    overflow-x:auto;gap:10px;
    scroll-snap-type:x proximity;scroll-padding-left:2px;
    padding-bottom:2px;
  }
  html:root body .grade.kpi-fita>*{flex:0 0 63%;scroll-snap-align:start}

  /* ── 6. calendário da semana ─────────────────────────────────
     A grade traz `min-width:900px` e `repeat(7,minmax(120px,1fr))`
     no atributo style da marcação (58_agenda.js, arquivo de outro
     dono). Estilo embutido só cede a !important — os dois únicos
     desta folha. Com 100 px por dia cabem três dias e meio na tela,
     a rolagem ganha a pista de sombra acima, e depoisDePintarCelular()
     (40_shell.js) já abre a semana no dia de HOJE. */
  html:root body .card.rolar-x>div[style*="repeat(7"]{
    min-width:760px!important;
    grid-template-columns:44px repeat(7,minmax(100px,1fr))!important;
  }
  /* A coluna das horas é a 1ª de cada faixa de 8 células (o canto vazio
     e depois cada "07h", "08h"…). Com a semana aberta em HOJE ela
     saía da tela e as linhas viravam quadrados sem horário: agora
     fica grudada na borda esquerda enquanto os dias passam. */
  html:root body .card.rolar-x>div[style*="repeat(7"]>div:nth-child(8n+1){
    position:sticky;left:0;z-index:2;
    background:var(--cartao-fundo);
    box-shadow:6px 0 8px -7px rgba(35,42,87,.35);
  }

  /* ── 5. o "⋮" das linhas ─────────────────────────────────────
     No cartão responsivo cada <td> vira uma linha flex e o botão,
     sem base fixa, encolhia até a largura do ícone (16 px). A
     célula de ação passa a ser um alvo de 44 px encostado à direita,
     e o rótulo vazio some do fluxo. */
  html:root body .t-resp td.acao{
    /* `.tab .acao{width:1%}` serve à tabela do desktop; no cartão do
       celular ela prendia a célula (e o botão dentro dela) num
       cantinho à esquerda */
    width:auto;justify-content:flex-end;padding-top:6px;
    border-top:1px solid var(--linha-2);margin-top:4px;
  }
  html:root body .t-resp td.acao::before{display:none}
  html:root body .t-resp td.acao .b-ico,
  html:root body .t-resp td.acao .b{flex:0 0 auto}
  html:root body .t-resp td.acao .b-ico{width:44px;height:44px;flex:0 0 44px}
  /* linhas do cartão com respiro de toque e alinhamento estável */
  html:root body .t-resp tr{padding:12px 13px;border-radius:var(--r-l)}
  html:root body .t-resp td{padding:7px 0;align-items:flex-start;gap:14px}
  html:root body .t-resp td::before{flex:0 0 auto;padding-top:1px}
  html:root body .t-resp td>*{min-width:0}
  /* v17 (PA-09): as tabelas do editor de plano e de treino fixam a
     largura das colunas em estilo inline (width:190px, 180px...). No
     cartão do celular a célula é uma linha inteira: a largura fixa
     cortava os controles de gramatura pela metade. Célula vazia (a
     coluna "ação" das linhas de total) não ocupa altura. */
  html:root body .t-resp td{width:auto!important;max-width:none!important}
  html:root body .t-resp td.acao:empty{display:none}
  html:root body .t-resp td.num{text-align:right}

  /* ── 1. o X das Configurações ────────────────────────────────
     Abaixo de 900 px o .mr-nav vira faixa horizontal rolante e o X,
     que é o primeiro filho, ia embora junto com as abas: da 3ª aba
     em diante ficava em left negativo, fora da tela, e tocar no
     canto acionava a aba errada. Agora ele fica grudado (sticky) no
     canto esquerdo, com o fundo da própria faixa, acima das abas na
     pilha e com 44 px de alvo. O scroll-padding impede que a aba
     ativa pare embaixo dele. A regra em si mora no bloco de 900 px,
     que é onde o .mr-nav vira faixa horizontal — vale para o celular
     e para o tablet, sem duplicata. */

  /* ── modais compridos ────────────────────────────────────────
     Em 390 px o véu de 22 px e o modal centrado desperdiçavam meia
     tela. O modal ocupa a largura toda, o pé fica alcançável e o
     conteúdo rola por dentro. */
  html:root body .veu{padding:10px;align-items:flex-end}
  html:root body .modal{
    width:100%;max-height:calc(100vh - 20px);
    border-radius:var(--r-l);
  }
  html:root body .modal-h{padding:14px 14px 12px}
  html:root body .modal-c{padding:14px}
  html:root body .modal-f{padding:12px 14px calc(12px + var(--nfm-seguro));gap:8px}
  html:root body .modal-f .b{flex:1 1 auto;justify-content:center}
  html:root body .drawer-c{padding:14px}
  html:root body .drawer-f{padding:12px 14px calc(12px + var(--nfm-seguro));gap:8px}
  html:root body .drawer-f .b{flex:1 1 auto;justify-content:center}
  html:root body .drawer-h{padding:12px 14px}

  /* ── 9. <select> truncado ────────────────────────────────────
     "Fatorial — soma o gasto real do t" cortava no meio da palavra.
     Reticências e um respiro para a seta resolvem sem encolher o
     campo nem cortar a opção escolhida no meio. */
  html:root body select.inp{
    text-overflow:ellipsis;padding-right:34px;
    background-position:right 12px center;
  }
  /* Campo com 44 px de altura e 16 px de fonte — abaixo de 16 px o
     Safari do iPhone dá zoom ao focar e o formulário salta (P-107).
     O `:not(.folha *)` repete o que nutriflow.css já usa em
     `… .inp:not(.folha *){min-height:38px}`: sem ele a regra de lá
     ganharia por especificidade e o campo ficaria em 38 px. Continua
     valendo a mesma exceção — o papel timbrado (.folha) mantém os
     campos compactos do documento impresso. */
  html:root body .inp:not(.folha *),
  html:root body select.inp:not(.folha *),
  html:root body textarea.inp:not(.folha *){min-height:44px;font-size:16px}
  html:root body textarea.inp:not(.folha *){padding-top:11px;padding-bottom:11px}
  /* o campo com foco não pode ficar embaixo do teclado: o navegador
     rola até ele, e esta margem garante que sobre contexto em volta */
  html:root body .modal-c,
  html:root body .drawer-c{scroll-padding-bottom:120px}

  /* ── barra de topo: título legível ──────────────────────────
     Em 390 px cabiam sete controles na mesma faixa e o título ficava
     em "Paci…", "Eduardo…", "D…". A busca global passa a nascer
     recolhida no seu ícone (44 px, alvo cheio) e só ocupa a barra
     quando recebe o toque — enquanto se digita, título e ícones dão
     lugar ao campo, como em qualquer aplicativo. Na página inicial a
     busca já é o elemento principal da barra e continua aberta. */
  html:root body .topo{gap:6px}
  html:root body .topo-dir{gap:6px}
  /* margem automática NÃO: ela engoliria o espaço livre antes de o
     título poder crescer — é o título que empurra a busca para a
     direita */
  html:root body .topo:not(.topo-home) .nf-busca{
    flex:0 0 44px;max-width:44px;margin-left:0;
    transition:max-width .18s cubic-bezier(.4,0,.2,1),flex-basis .18s cubic-bezier(.4,0,.2,1);
  }
  html:root body .topo:not(.topo-home) .nf-busca-inp{padding:0 0 0 38px;height:40px}
  html:root body .topo:not(.topo-home) .nf-busca:focus-within{flex:1 1 auto;max-width:none}
  html:root body .topo:not(.topo-home) .nf-busca:focus-within .nf-busca-inp{padding-right:12px}
  html:root body .topo:not(.topo-home):has(.nf-busca:focus-within) .crumb,
  html:root body .topo:not(.topo-home):has(.nf-busca:focus-within) .topo-dir{display:none}
  html:root body .crumb{flex:1 1 auto;min-width:0}
  html:root body .crumb b{font-size:15.5px;font-weight:700}

  /* cabeçalho de tela: o par de botões de ação cabe lado a lado */
  html:root body .cabec{gap:10px;margin-bottom:14px}
  html:root body .cabec-t{min-width:100%}
  html:root body .cabec-a{width:100%}
  html:root body .cabec-a .b{flex:1 1 auto;justify-content:center}

  /* rodapé de paginação: contagem em cima, setas embaixo */
  html:root body .pag{flex-wrap:wrap;gap:8px;padding:12px 13px}
  /* v2.19.0-nutriflow.4 — ponto no "Mais" quando alguma tela escondida
     lá dentro tem algo esperando (hoje: mensagens não lidas). */
  html:root body .nfm-tab{position:relative}
  html:root body .nfm-ponto{position:absolute;top:6px;right:calc(50% - 16px);width:9px;height:9px;border-radius:50%;background:#E5484D;box-shadow:0 0 0 2px var(--superficie,#fff)}

}

/* ═══════════════════════════════════════════════════════════════
   TABLET E CELULAR — até 900 px
   É onde .mr-nav (Configurações) e .wz-nav (anamnese) já viram
   faixas horizontais; a correção do X precisa valer na mesma faixa.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:900px){

  /* ── 1. o X do modal de Configurações ────────────────────────── */
  html:root body .modal .modal-rail .mr-nav{
    padding:8px 10px 8px 0;gap:4px;align-items:center;
    scroll-padding-left:56px;scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
  }
  html:root body .modal .modal-rail .mr-nav .fechar{
    position:sticky;left:0;z-index:3;
    margin:0 4px 0 0;align-self:stretch;
    width:46px;flex:0 0 46px;height:auto;min-height:46px;
    background:var(--fundo-4);color:var(--tinta-2);
    border-radius:var(--r-l) 0 0 0;
    /* a sombra à direita separa o X das abas que passam por baixo */
    box-shadow:7px 0 9px -7px rgba(35,42,87,.3);
  }
  html:root body .modal .modal-rail .mr-nav .fechar:active{background:var(--linha-2)}
  html:root body .modal .modal-rail .mr-i{padding:0 12px;white-space:nowrap}
  /* a faixa de abas do trilho ganha a mesma pista de rolagem das
     demais; o degradê começa depois do X, que fica sempre nítido */
  html:root body .modal .modal-rail .mr-nav.rx-d{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent);
  }
  html:root body .modal .modal-rail .mr-c{
    padding:16px 14px;max-height:none;
  }
  html:root body .modal.m-g .modal-rail{min-height:0}
}

/* v29 (A8-19): "Remover a tag" (ícone de 11 px) com área de toque de 25 px
   sem mudar o desenho: um pseudo-elemento transparente em volta do botão */
[data-rmtagp]{position:relative}
[data-rmtagp]::after{content:"";position:absolute;inset:-7px}
/* v29 (A8-24): com zoom de 200 % (1366×900 vira 683×450 px CSS) o topo
   fixo e a barra inferior tomavam até 37 % da altura, e um campo focado
   perto da base ficava atrás da barra (WCAG 2.4.11). Em tela baixa: a
   barra inferior sai enquanto um campo tem o foco, e a rolagem até o
   foco reserva a altura das barras. Nada muda em tela de altura normal. */
@media (max-height:520px){
  html:root{scroll-padding-top:72px;scroll-padding-bottom:72px}
  html:root body :is(.modal-c,.drawer-c,.mr-c){scroll-padding-top:56px;scroll-padding-bottom:72px}
}
@media (max-width:760px) and (max-height:520px){
  html:root body:has(:is(input:not([type=checkbox]):not([type=radio]),textarea,select):focus) .nfm-tabbar{display:none}
}