/* ==========================================================================
   mobile.css — Portal Fresh Food · camada mobile (lote 1)
   --------------------------------------------------------------------------
   REGRA ÚNICA: todo o conteúdo deste arquivo vive dentro de
   @media (max-width: 768px). Uma regra que só existe dentro do media query
   não pode alcançar o desktop — a garantia é estrutural, não confiança.

   Carregar DEPOIS do app.css, em public/index.html:
     <link rel="stylesheet" href="/css/app.css">
     <link rel="stylesheet" href="/css/mobile.css?v=20260826a">
   O ?v= é obrigatório: o sw.js faz cache e serve versão velha sem ele.

   Escopo do lote 1: Home, Login, Avaliações, Indicadores, Reembolso de KM,
   Admin, Utilitários. Premiações fica para o lote 2.

   NÃO ENTRA AQUI:
   - Barra de abas inferior (exige markup novo → lote 2).
   - Unificação de paleta. --xe-* (Custo de MO) e .rk-* (Reembolso) usam
     cores próprias fora do :root; misturar refactor de cor com responsivo
     é o caminho mais curto para quebrar o desktop.
   - Tabelas geradas por JS que precisam de data-label (ver seção 9).
   ========================================================================== */

@media (max-width: 768px) {

  /* ── 0. Alvos de toque ────────────────────────────────────────────────
     app.css:3112 já põe min-height:40px em alguns controles. 44px é o
     mínimo confortável; a lista abaixo estende para o que ficou de fora. */
  .btn-primary, .btn-secondary, .btn-full, .btn-back,
  .aval-input, .aval-pg, .aval-trat-btn, .aval-tema-btn, .aval-estado-chip,
  .ind-subpill, .ind-more-btn, .ind-voltar, .ind-capa-btn, .ind-btn-rel,
  .rk-input, .rk-act, .rk-scard, .rk-link,
  .ut-input, .ss-trigger, .auto-tab,
  .med-input, .med-visao-btn,
  .vlk-mini, .vlk-toggle-btn, .vlk-sub-btn {
    min-height: 44px;
  }
  .aval-reclass select, .rk-act, .vlk-mini { padding-block: 10px; }

  /* checkbox e radio nativos são pequenos demais para o dedo */
  .rk-chk, .rk-check input, .ut-exame input, .aval-chip input,
  .med-toggle input { width: 18px; height: 18px; }

  /* ── 1. Home / topbar ─────────────────────────────────────────────────
     app.css:1606-1617 já trata padding e esconde o nome do usuário em
     ≤560px. Aqui só compactamos o card da grade. */
  .portal-main { padding: 18px 14px 28px; }
  .portal-title { font-size: 19px; }
  .portal-subtitle { margin-bottom: 16px; font-size: 13px; }

  .portal-grid { grid-template-columns: 1fr; gap: 8px; }
  .portal-card {
    flex-direction: row;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
  }
  .portal-card-icon { width: 38px; height: 38px; border-radius: 9px; flex: none; }
  .portal-card-icon svg { width: 20px; height: 20px; }
  .portal-card-emoji { font-size: 24px; }
  .portal-card-titulo { font-size: 14.5px; }
  /* descrição curta: 2 linhas no máximo, o resto some */
  .portal-card-desc {
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ── 2. Login ─────────────────────────────────────────────────────────
     .login-wrap já é max-width:400px e tem padding próprio em ≤480px.
     Só sobem os alvos. O gradiente 135° fica — é a exceção que o DS autoriza. */
  .login-form input { min-height: 48px; font-size: 15px; }
  .login-form .btn-primary.btn-full { min-height: 52px; font-size: 15px; }
  .brand-logo--login { height: 44px; }

  /* ── 3. Faixas de navegação roláveis (padrão reusável) ────────────────
     app.css:465-470 faz as nav-links da solução quebrarem em várias linhas.
     Uma linha rolável come menos altura e mantém a ordem legível. */
  .sol-sidebar .nav-links,
  .aval-tabs,
  .dob-tabs,
  .ind-subnav,
  .vlk-sub {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .sol-sidebar .nav-links::-webkit-scrollbar,
  .aval-tabs::-webkit-scrollbar,
  .dob-tabs::-webkit-scrollbar,
  .ind-subnav::-webkit-scrollbar,
  .vlk-sub::-webkit-scrollbar { display: none; height: 0; }

  .sol-sidebar .nav-link,
  .aval-tab, .dob-tab, .ind-subpill { flex: none; white-space: nowrap; }

  /* pills de filtro: mesma ideia, uma linha em vez de três */
  .aval-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .aval-pills::-webkit-scrollbar { display: none; height: 0; }
  .aval-pill { flex: none; white-space: nowrap; }

  /* ── 4. Avaliações ────────────────────────────────────────────────────
     Baseline: métricas 2 col em ≤880px e 1 col em ≤400px (app.css:2804,3109).
     Entre 400 e 768 ficavam 2 col; a nota média merece linha própria. */
  .aval-metrics { grid-template-columns: 1fr 1fr; gap: 9px; }
  .aval-metric:first-child { grid-column: 1 / -1; }
  .aval-metric:first-child .aval-metric-val { font-size: 36px; }
  .aval-metric { padding: 13px 14px; }

  /* filtros em largura cheia — já parcialmente em app.css:3093-3097 */
  .aval-filtros, .aval-rank-tools, .aval-head-actions { width: 100%; }
  .aval-filtros > *, .aval-rank-tools > * { flex: 1 1 100%; min-width: 0; }
  #aval-busca, #aval-loja-filtro, #aval-rank-busca { flex: 1 1 100%; }

  /* rodapé do card de comentário: empilha em vez de disputar a linha */
  .aval-card-foot { flex-direction: column; align-items: stretch; gap: 9px; }
  .aval-foot-acoes { width: 100%; flex-direction: column; align-items: stretch; }
  .aval-trat-btn { width: 100%; justify-content: center; }
  .aval-reclass { display: flex; align-items: center; gap: 8px; }
  .aval-reclass select { flex: 1; min-height: 44px; }

  /* ranking de lojas: a tabela vira lista de linhas */
  .aval-tabela--rank { display: block; }
  .aval-tabela--rank thead { display: none; }
  .aval-tabela--rank tbody, .aval-tabela--rank tr { display: block; width: 100%; }
  .aval-tabela--rank tr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--cinza-borda);
  }
  .aval-tabela--rank td { display: block; border: 0; padding: 0; }
  .aval-tabela--rank td:first-child { flex: none; width: 30px; }
  .aval-tabela--rank td:nth-child(2) { flex: 1; min-width: 0; }
  .aval-rank-loja { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ── 5. Indicadores ──────────────────────────────────────────────────
     .ind-kpis já colapsa em 2 col com o herói em linha cheia (app.css:3818).
     Só reduzimos o valor nos cards menores. */
  .ind-kpi .ind-k-val { font-size: 26px; }
  .ind-kpi.hero .ind-k-val { font-size: 36px; }
  .ind-card { padding: 15px 16px; }

  /* capa verde: texto e controles em coluna */
  .ind-capa { flex-direction: column; align-items: stretch; gap: 12px; padding: 15px 16px; }
  .ind-capa-ctrl { width: 100%; }
  .ind-capa-comp { width: 100%; }
  .ind-capa-comp input, .ind-capa-comp select { flex: 1; min-height: 44px; width: 100%; }

  /* absenteísmo por motivo: rótulo e valor em cima, trilho em linha própria.
     Substitui o grid 96px/1fr/92px de app.css:3786, que corta o rótulo. */
  .ind-abr {
    grid-template-columns: 1fr auto;
    grid-template-areas: "lbl val" "track track";
    gap: 5px 10px;
  }
  .ind-abr-lbl { grid-area: lbl; font-size: 13px; }
  .ind-abr-val { grid-area: val; font-size: 13px; }
  .ind-abr-track { grid-area: track; }

  /* ranking: a coluna de valor não precisa de 92px sem o subtítulo */
  .ind-rank-row { grid-template-columns: 104px 1fr 62px; gap: 8px; }
  .ind-rank-val small { display: none; }

  /* dobras: valor e tendência na mesma linha — metade da altura */
  .dob-kpi { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .dob-tend { margin-top: 0; }
  .dob-flag { align-items: flex-start; }
  .dob-sticky { position: static; box-shadow: none; padding-top: 0; }

  /* Custo de mão de obra (.xe-wrap): mantém a paleta própria, só encolhe */
  .xe-wrap { padding: 16px 14px; border-radius: 12px; }
  .xe-top { flex-direction: column; align-items: stretch; gap: 12px; }
  .xe-filters { flex-direction: column; align-items: stretch; }
  .xe-filters .xe-fl, .xe-filters .xe-fl select { width: 100%; max-width: none; }
  .xe-v { font-size: 22px; }
  .cmo-bars { height: 160px; padding: 18px 12px 0; }

  /* ── 6. Reembolso de KM ──────────────────────────────────────────────
     .rk-grid é o único CSS mobile-first do portal (2 col por padrão).
     Rota, data e finalidade pedem linha inteira. */
  .rk-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .rk-field { grid-column: 1 / -1; }
  .rk-field.rk-sm { grid-column: span 1; }

  .rk-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .rk-head .btn-primary { width: 100%; }
  .rk-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rk-scard { padding: 13px 15px; }
  .rk-scard-n { font-size: 24px; }

  .rk-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .rk-filtros { width: 100%; }
  .rk-filtros .rk-input { flex: 1 1 46%; min-width: 0; width: auto; }
  .rk-toolbar-acoes > * { flex: 1; }

  /* barra de lote no rodapé: alcance do polegar em vez do topo da tela */
  .rk-bulk { position: fixed; top: auto; bottom: 12px; left: 12px; right: 12px; z-index: 60; }
  .rk-bulk-inner { flex-wrap: wrap; gap: 10px; }
  .rk-bulk-inner .btn-primary { flex: 1; }
  .rk-bulk-clear { flex-basis: 100%; margin-left: 0; text-align: left; }
  /* espaço para a barra não cobrir a última linha da lista */
  #rk-lista { padding-bottom: 96px; }

  .rk-form-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .rk-form-foot > div { width: 100%; }
  .rk-form-foot > div > * { flex: 1; }
  .rk-modal { padding: 18px 16px; border-radius: 14px; }
  .rk-modal-ov { padding: 20px 12px; }
  .rk-modal-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .rk-modal-foot > div { width: 100%; }
  .rk-modal-foot > div > * { flex: 1; }

  /* ── 7. Utilitários ──────────────────────────────────────────────────
     .ut-cols já vira 1 coluna em ≤960px, mas a coluna de preview tem
     min-height:520px + iframe de 660px: no celular é rolagem vazia.
     Some da tela; o PDF passa a abrir em tela cheia (ver handoff, item 3). */
  .ut-preview { display: none; }
  .ut-grid { grid-template-columns: 1fr; }
  .ut-card { padding: 16px; border-radius: 12px; }
  .ut-busca-wrap { max-width: none; }

  /* tipo de exame: 6 radios minúsculos → alvos de 44px */
  .ut-exames { gap: 7px; }
  .ut-exame {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--cinza-borda);
    border-radius: 8px;
    background: var(--branco);
    font-size: 13px;
  }
  .ut-exame:has(input:checked) {
    background: var(--verde);
    border-color: var(--verde);
    color: #fff;
  }
  .ut-exame input { position: absolute; opacity: 0; pointer-events: none; }

  /* ações fixas: o formulário é longo e a ação principal não deve exigir
     rolar até o fim */
  .ut-acoes {
    position: sticky;
    bottom: 0;
    z-index: 40;
    margin: 20px -16px -16px;
    padding: 12px 16px;
    background: var(--branco);
    border-top: 1px solid var(--cinza-borda);
    gap: 8px;
  }
  .ut-acoes .btn-primary { flex: 1; }
  .ut-msg { flex-basis: 100%; }

  /* ── 8. Modais em geral ──────────────────────────────────────────────*/
  .aval-modal { width: 94vw; max-width: 94vw; max-height: 88vh; overflow-y: auto; }
  .aval-modal-foot { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .aval-modal-row { grid-template-columns: 1fr; }

  /* ── 9. Tabelas que CONTINUAM rolando ────────────────────────────────
     Virar tabela em card exige data-label no <td>, que é markup gerado por
     JS — fica para o lote 2. Até lá, rolagem horizontal com a primeira
     coluna fixa é honesto e não perde informação.
     ANTES DE MUDAR: ler o bloco .rtable em app.css (~1288-1490). O portal
     já tem esse padrão; reusar em vez de inventar outro. */
  /* rk-table e ut-log-table agora viram CARD (.rtable, ver lote 2) — saíram daqui.
     Estas continuam rolando: heatmap (matriz), aval, custos e validação. */
  .ind-heat-wrap, .aval-tabela-wrap, .xe-tscroll, .vlk-tabwrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   LOTE 2 — comportamentos que exigem markup/JS novo.
   Estes seletores miram elementos NOVOS (barra de abas, folha "Mais") que não
   existem no desktop, então o base-hide abaixo não altera nenhum estilo atual.
   ========================================================================== */

/* elementos mobile-only ficam escondidos por padrão (inclusive no desktop) */
.mobile-tabbar { display: none; }
.mobile-mais { display: none; }

@media (max-width: 768px) {

  /* ── Barra de abas inferior ─────────────────────────────────────────── */
  .mobile-tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    background: var(--branco, #fff);
    border-top: 1px solid var(--cinza-borda, #dde1e7);
    padding: 8px 4px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 12px rgba(20, 40, 30, .06);
  }
  /* na home e no login a barra não aparece — a lista de soluções já é o menu */
  body[data-view="portal"] .mobile-tabbar,
  body[data-view="login"] .mobile-tabbar,
  body[data-view="definir-senha"] .mobile-tabbar { display: none; }

  .mtab {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 4px 0; background: none; border: none; cursor: pointer;
    text-decoration: none; font: inherit;
    color: var(--cinza-texto, #6b7280);
  }
  .mtab span { font-size: 10px; font-weight: 600; }
  /* item ativo = verde, casado com a tela atual (svg usa currentColor) */
  body[data-view="avaliacoes"]  .mtab[data-view="avaliacoes"],
  body[data-view="indicadores"] .mtab[data-view="indicadores"],
  body[data-view="premiacoes"]  .mtab[data-view="premiacoes"] { color: var(--verde, #1a7a4a); }

  /* espaço p/ a barra não cobrir o conteúdo (menos na home/login) */
  body:not([data-view="portal"]):not([data-view="login"]):not([data-view="definir-senha"]) {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Folha "Mais" (bottom sheet com todas as soluções) ──────────────── */
  .mobile-mais {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(15, 22, 18, .45);
    align-items: flex-end; justify-content: center;
  }
  .mmais-panel {
    width: 100%; max-height: 80vh; overflow-y: auto;
    background: var(--branco, #fff);
    border-radius: 16px 16px 0 0;
    padding: 8px 12px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .mmais-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 6px 8px; font-size: 15px; color: var(--texto, #1f2937);
  }
  .mmais-x { background: none; border: none; font-size: 15px; cursor: pointer; color: var(--cinza-texto, #6b7280); padding: 6px 9px; border-radius: 6px; }
  .mmais-list { display: flex; flex-direction: column; }
  .mmais-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 52px; padding: 10px 8px;
    background: none; border: none; border-top: 1px solid var(--cinza-bg, #f1f3f0);
    font: inherit; font-size: 14.5px; color: var(--texto, #1f2937); text-align: left; cursor: pointer;
  }
  .mmais-item:active { background: var(--cinza-bg, #f1f3f0); }
  .mmais-ic { flex: none; width: 26px; height: 26px; color: var(--verde, #1a7a4a); display: inline-flex; align-items: center; justify-content: center; }
  .mmais-ic svg { width: 22px; height: 22px; }
  .mmais-vazio { padding: 20px; text-align: center; color: var(--cinza-texto, #6b7280); font-size: 13px; }

  /* ── 3.1 · Novo deslocamento em tela cheia (Reembolso) ──────────────── */
  #rk-form-desloc:not(.hidden) {
    position: fixed; inset: 0; z-index: 300;
    margin: 0; border-radius: 0; border: none;
    overflow-y: auto;
    background: var(--branco, #fff);
    padding: 16px 16px 96px;
  }

  /* ── 3.2 · PDF em tela cheia (Utilitários) ──────────────────────────── */
  .ut-pdf-full {
    position: fixed; inset: 0; z-index: 1300;
    display: flex; flex-direction: column;
    background: var(--branco, #fff);
  }
  .ut-pdf-full-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--cinza-borda, #e5e7eb);
  }
  .ut-pdf-full-bar b { font-size: 14px; color: var(--texto, #1f2937); }
  .ut-pdf-full iframe { flex: 1; width: 100%; border: none; }
  .ut-pdf-full-acoes { display: flex; gap: 8px; }

  /* ── Reembolso: tabela vira card (usa o padrão .rtable do app.css) ──────
     A coluna vazia de condutor some; o cabeçalho de grupo vira faixa compacta.
     A caixa de MARCAR (seleção em lote) VOLTA a aparecer no card (antes sumia). */
  table.rtable td.rk-hide-m { display: none; }

  /* "Marcar" como 1ª linha do card — só quando o item é selecionável
     (td.rk-chkcol vazio = não dá pra marcar → some). Checkbox grande p/ o dedo. */
  table.rtable tr.rk-row td.rk-chkcol:empty { display: none; }
  table.rtable tr.rk-row td.rk-chkcol {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 0; border-bottom: 1px solid var(--cinza-borda);
  }
  table.rtable tr.rk-row td.rk-chkcol::before {
    content: "Marcar"; flex: 0 0 auto;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    color: var(--cinza-texto); text-align: left;
  }
  table.rtable tr.rk-row.rk-sel td.rk-chkcol::before { content: "Marcado ✓"; color: var(--verde, #1a7a4a); }
  table.rtable tr.rk-row td.rk-chkcol input { width: 24px; height: 24px; margin: 0; accent-color: var(--verde, #1a7a4a); }
  /* card selecionado ganha destaque */
  table.rtable tr.rk-row.rk-sel { border-color: var(--verde, #1a7a4a); box-shadow: 0 0 0 1px var(--verde, #1a7a4a) inset; }

  /* checkbox do GRUPO fica escondido no mobile (na faixa do cabeçalho ficaria solto);
     a marcação é por item, e "Marcar todos os aprovados como pago" cobre o caso em massa */
  table.rtable tr.rk-grp td.rk-chkcol { display: none; }
  table.rtable tr.rk-grp {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
    background: var(--cinza-bg, #f1f3f0);
    border: 1px solid var(--cinza-borda);
    border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; box-shadow: none;
  }
  table.rtable tr.rk-grp td {
    display: inline; width: auto; border: none; padding: 0; text-align: left;
  }
  table.rtable tr.rk-grp td::before { content: none; }
  table.rtable tr.rk-grp td[colspan="2"] { flex: 1 1 100%; font-size: 14px; }
  table.rtable tr.rk-row td.rk-acoes { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
}