/* Adaptação a telas menores.

   Três mudanças estruturais, não só encolhimento:
   1. até 1100px o menu lateral vira gaveta sobreposta, com botão no topo;
   2. até 760px a primeira coluna das tabelas fica fixa enquanto o resto rola
      na horizontal — sem isso não dá para saber de que item é cada número;
   3. grades de duas ou três colunas caem para uma, na ordem de leitura. */

/* ======================================= menu em gaveta (tablet e celular) === */
@media(max-width:1100px){
  #app.on{grid-template-columns:minmax(0,1fr)}

  .menu-btn{display:inline-flex}

  .side{
    position:fixed;top:0;left:0;bottom:0;height:100dvh;
    width:min(86vw,300px);transform:translateX(-100%);
    transition:transform .22s cubic-bezier(.2,.8,.2,1);
    box-shadow:var(--shadow-lg);
  }
  .side.aberta{transform:none}
  body.menu-aberto .side-backdrop{display:block}
  /* trava a rolagem do fundo enquanto a gaveta está aberta */
  body.menu-aberto{overflow:hidden}
}

/* =========================================================== conteúdo === */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:2.2rem}
  /* Empilhado, o desenho do plano de corte sozinho passa de 450 px e joga o
     botão de entrar para fora da tela. Numa coluna só ele é enfeite; o que
     importa é o texto e a ação. */
  .hero-visual{display:none}
  .band-inner{grid-template-columns:repeat(2,1fr);gap:1.4rem}
  .plan-grid{grid-template-columns:1fr}
  .kanban{grid-template-columns:1fr}
  .prec-composicao{justify-content:flex-start}
}

/* Janela baixa (notebook pequeno, navegador com muitas barras, celular
   antigo). A ordem do que encolhe é deliberada: primeiro o desenho, depois os
   espaços, depois o corpo do texto — e o botão de entrar nunca. */
@media(min-width:901px) and (max-height:720px){
  .hero-visual .sheet-svg{max-height:30vh}
  .hero-visual{padding:.9rem}
  .hv-foot{margin-top:.6rem}
}
@media(max-height:720px){
  .lp-nav{padding-top:.6rem;padding-bottom:.6rem}
  .hero h1{font-size:clamp(1.65rem,3.4vw,2.6rem)}
  .hero .lead{font-size:.95rem;margin-top:.7rem;margin-bottom:1.05rem}
  .band-stat b{font-size:clamp(1.35rem,2.2vw,1.9rem)}
  .band-stat span{font-size:.62rem}
  .lp-foot small{font-size:.68rem}
}
@media(max-width:560px) and (max-height:720px){
  .band-inner{gap:.7rem 1.2rem}
  .lp-foot-inner{gap:.6rem}
  .lp-foot .brand-logo{height:20px}
  .hero{padding-top:1rem;padding-bottom:1rem}
  .band{padding-top:.7rem;padding-bottom:.7rem}
  .lp-foot{padding-top:.7rem;padding-bottom:.7rem}
}

@media(max-width:760px){
  /* --- tabelas: primeira coluna fixa + rolagem horizontal --- */
  .table-wrap{position:relative}
  .table-wrap table{min-width:600px}
  thead th,tbody td{padding-left:.85rem;padding-right:.85rem}
  thead th:first-child,tbody td:first-child{
    position:sticky;left:0;z-index:2;
    box-shadow:1px 0 0 var(--line);
  }
  tbody td:first-child{background:#fff}
  thead th:first-child{background:var(--fundo-2);z-index:3}
  tbody tr:hover td:first-child{background:var(--fundo-2)}

  /* --- grades que viram coluna única --- */
  .cad-grid,.escolha-grid{grid-template-columns:1fr}
  .ficha{grid-template-columns:1fr}
  .ficha-total{min-width:0}
  .stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem}

  /* --- alvos de toque maiores --- */
  .icon-btn{width:40px;height:40px;flex:0 0 40px}
  .btn-sm{min-height:42px;padding:.6rem 1rem}

  .view{padding:1rem}
  .topbar{padding:.7rem 1rem}
}

@media(max-width:560px){
  .lp-nav-links a:not(.cta){display:none}

  /* no topo sobra pouco espaço: fica só a aba atual e o primeiro nome */
  .crumb span{display:none}
  .crumb b{font-size:.92rem;letter-spacing:0}
  .chip{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.4rem .7rem}

  .band-inner{grid-template-columns:1fr 1fr;gap:1.1rem}
  .view-head{flex-direction:column;align-items:flex-start}
  .stats{grid-template-columns:1fr}

  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn-primary,.hero-actions .btn-ghost{width:100%}

  /* o rodapé do modal empilha: o botão principal ocupa a largura toda */
  .modal-foot{flex-direction:column;align-items:stretch}
  .modal-foot .btn-finalizar{width:100%}
  .modal-body{max-height:none}
  .modal-bg{padding:1rem .6rem}

  .salvar-acoes{margin-left:0;width:100%}
  .salvar-acoes .btn-sm{flex:1}

  .lb-x{top:-10px;right:-10px;width:34px;height:34px}
  /* o cabeçalho do desenho não cabe em duas informações nesta largura */
  .hv-top span:last-child{display:none}
  .hv-foot{gap:1rem}
  .filtros-estoque{padding:.8rem 1rem}
  .fe-sel,.fin-sel{flex:1;min-width:140px}
}

/* linhas de item do pedido: encolhe as colunas numéricas antes de quebrar */
@media(max-width:600px){
  .mitem,.mitem-head{grid-template-columns:minmax(0,1fr) 48px 86px 80px 24px;gap:.4rem;font-size:.8rem}
  .mitem{padding:.55rem .6rem}
  .mitem-head{padding:0 .6rem .35rem}
}