/* ════════════════════════════════════════════════════════════════════
   BRAPZ_RESPONSIVE.CSS — Guarda mobile global · v1.0
   Brapz Gestão · Big Massas

   COMO É SEGURA: quase tudo usa :where(), que tem especificidade ZERO.
   Tradução: se a página já definiu o comportamento dela (ex.: painel,
   que tem os próprios breakpoints), a regra da página SEMPRE vence.
   Esta camada só age onde a página não disse nada — exatamente as
   telas que quebravam no celular.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1) NADA estoura a tela na horizontal ── */
@media screen and (max-width: 760px){
    :where(html, body){ overflow-x: clip; }           /* clip não quebra sticky (hidden quebraria) */
    :where(img, svg, video, canvas){ max-width: 100%; height: auto; }
    :where(pre, code){ white-space: pre-wrap; word-break: break-word; }
}

/* ── 2) TABELA LARGA rola dentro dela mesma, não arrasta a página ──
   Era a causa nº 1 de tela "desconfigurada": tabela de 900px numa
   tela de 390px empurrava o layout inteiro. Agora ela vira um
   carrossel horizontal com inércia do iOS. */
@media screen and (max-width: 760px){
    :where(table){
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── 3) iPHONE NÃO DÁ MAIS ZOOM SOZINHO no formulário ──
   Safari amplia a tela quando o input tem fonte < 16px. Garantimos
   o mínimo de 16px SÓ no celular; no desktop fica como a página quis. */
@media screen and (max-width: 760px){
    :where(input, select, textarea){ font-size: max(16px, 1em); }
}

/* ── 4) GRIDS de 3-4 colunas colapsam com elegância ──
   Só vale pra página que NÃO definiu breakpoint próprio (:where = 0). */
@media screen and (max-width: 700px){
    :where(.grid-3, .grid-4, .topgrid, .kpi-row, .cards-3, .stats){
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media screen and (max-width: 430px){
    :where(.grid-3, .grid-4, .grid-2, .topgrid, .cards-3, .form-grid){
        grid-template-columns: minmax(0, 1fr);
    }
    :where(.kpi-row, .stats){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 5) DEDO tem alvo digno (Apple manda 44px) ── */
@media screen and (max-width: 760px) and (pointer: coarse){
    :where(button, .btn, a.btn, input[type=submit], .btn-primary, .btn-additem){
        min-height: 44px;
    }
    :where(td, th){ padding-top: max(8px, 0.4em); padding-bottom: max(8px, 0.4em); }
}

/* ── 6) MODAIS e popups cabem na tela ── */
@media screen and (max-width: 760px){
    :where(.modal, .modal-content, .popup, .dialog){
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }
}

/* ── 7) Respiro lateral mínimo onde a página não definiu ── */
@media screen and (max-width: 480px){
    :where(body){ padding-left: max(10px, env(safe-area-inset-left));
                  padding-right: max(10px, env(safe-area-inset-right)); }
}

/* ════════════════════════════════════════════════════════════════════
   v1.1 — Tokens canônicos da marca + colapso de linhas-grid · jun/2026
   Tudo aditivo. :root sem !important: páginas que redefinem :root inline
   DEPOIS sempre vencem (nada muda onde já há estilo; só preenche o que
   faltava). Carregado pelo _pwa_head — não toca quem não inclui a camada.
   ════════════════════════════════════════════════════════════════════ */

/* ── 8) Tokens oficiais (use var(--brand*) em telas novas) ── */
:root{
    --brand:        #F29715;   /* laranja oficial          */
    --brand-light:  #F4B037;   /* ouro oficial (acento)    */
    --brand-glow:   #FFB544;   /* brilho/realce            */
    --brand-deep:   #c97808;   /* sombra quente            */
    --brand-ink:    #08090c;   /* preto da marca           */
}

/* ── 9) Linhas-grid nomeadas colapsam no celular SÓ onde a página não
   disse nada com mais força (zero-specificity, sem !important). ── */
@media screen and (max-width: 480px){
    :where(.ing-row, .ped-row, .prod-row, .row-grid, .prev-item, .ing-item){
        grid-template-columns: minmax(0, 1fr);
    }
}