/* =====================================================================
   Portal RDA · F13 · Mobile / app via navegador
   Carregar DEPOIS de portal.css e julinho-portal.css:
   <link rel="stylesheet" href="/assets/css/portal-mobile-f13.css?v=...">
   Tudo aqui vale só até 760 px (mesmo corte do bloco "F6 · Celular").
   Numeração = tabela de achados do LEIA-ME-F13.md
   ===================================================================== */

/* ---------- vale em qualquer largura ---------- */
/* 10 · Alturas de tela: 100dvh desconta a barra do Safari/Chrome */
.mo .mbox,.sheet,.cd,.pd-panel,#jvp-painel,.jvp-painel{max-height:100vh;max-height:100dvh}

@media (max-width:760px){

  /* 3 · Topo: nada estoura à direita --------------------------------- */
  .topbar{padding:0 max(10px,env(safe-area-inset-right,0)) 0 max(6px,env(safe-area-inset-left,0));gap:4px;overflow:visible}
  .tb-left{flex:1 1 auto;min-width:0;gap:4px}
  .tb-title{font-size:15px;min-width:0}
  .tb-right{flex:0 0 auto;gap:4px;max-width:62%}
  #tb-altcash{font-family:inherit !important;font-size:12px !important;font-weight:700 !important;
    padding:0 8px !important;height:36px;gap:4px !important;white-space:nowrap;line-height:1}
  .btn-cart,#btn-cart{padding:0 10px !important;height:36px;min-width:44px;position:relative;flex:0 0 auto}
  #btn-cart .cbadge{top:-5px;right:-5px}

  /* 1 · Detalhe do produto em coluna única --------------------------- */
  .pd-panel{width:100% !important;max-width:100vw;left:0;right:0;overflow-x:hidden}
  .pd-header,.pd-body{max-width:100%;overflow-x:hidden}
  .pd-top{flex-direction:column;gap:14px;margin-bottom:16px}
  .pd-img-main{width:100%;height:auto;aspect-ratio:1/1;max-height:260px;font-size:72px}
  .pd-img-main img{width:100%;height:100%;object-fit:contain}
  .pd-info{width:100%;min-width:0;flex:none}
  .pd-name{font-size:17px;line-height:1.25}
  .pd-add-row{flex-wrap:wrap;gap:8px}
  .pd-add-row .btn,.pd-add-row button{min-height:44px}

  /* 2 · Itens do pedido (modal PED-…): cada item vira um bloco -------- */
  /* (a tabela era table-layout:fixed com 3 colunas de 128 px = 384 px;
      no card de 331 px sobrava 0 px para o nome do produto) */
  .pdet-items-card table,.pdet-items-card tbody{display:block;width:100%;table-layout:auto}
  .pdet-items-card col.pdet-col-num,.pdet-items-card col.pdet-col-prod{width:auto}
  .pdet-items-card thead{display:none}
  .pdet-items-card tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:10px 12px;border-bottom:1px solid var(--g200,#e5e7eb);background:#fff}
  .pdet-items-card tbody td{display:block;padding:0 !important;border:0 !important;background:transparent !important;font-size:12.5px}
  .pdet-items-card tbody td.prod{flex:1 1 100%;padding-bottom:4px !important;min-width:0;word-break:normal;overflow-wrap:anywhere;font-weight:600;color:var(--g700,#374151)}
  .pdet-items-card tbody td.num{white-space:nowrap}
  .pdet-items-card tbody td.num:nth-child(3)::before{content:"× "}   /* qtd × preço */
  .pdet-items-card tbody td.num:last-child{margin-left:auto;font-weight:800;color:var(--g800,#1f2937)}
  .pdet-items-card tfoot,.pdet-items-card tfoot tr,.pdet-items-card tfoot td{display:block}
  .pdet-items-card tfoot tr{display:flex;justify-content:space-between;gap:10px;padding:10px 12px}
  .pdet-items-card tfoot td{border:0 !important;padding:0 !important;text-align:left !important}
  .mb{padding:16px 14px}
  .pdet-meta{gap:8px}
  .pdet-total-card{margin-top:12px}

  /* 4 · 5 · 6 · Tabelas largas viram cards (classe aplicada pelo JS) -- */
  /* (.tw table tem min-width:520px no CSS atual — por isso o !important) */
  table.tbl-cards,table.tbl-cards tbody,table.tbl-cards tr{min-width:0 !important;width:100% !important;max-width:100%}
  table.tbl-cards{display:block;border-collapse:separate}
  table.tbl-cards thead{display:none}
  table.tbl-cards tbody{display:flex;flex-direction:column;gap:10px;padding:10px 0}
  table.tbl-cards tr{display:block;background:#fff;border:1px solid var(--g200,#e5e7eb);border-radius:10px;padding:10px 12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
  table.tbl-cards td{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0 !important;border:0 !important;font-size:13px;line-height:1.3;text-align:left !important;white-space:normal !important;background:transparent !important}
  table.tbl-cards td::before{content:attr(data-label);flex:0 0 42%;max-width:42%;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--g500,#6b7280)}
  table.tbl-cards td[data-label=""]::before,table.tbl-cards td.tbl-cards-acoes::before{display:none}
  table.tbl-cards td.tbl-cards-titulo{font-size:14px;font-weight:700;color:var(--g800,#1f2937);border-bottom:1px solid var(--g100,#f3f4f6) !important;padding-bottom:8px !important;margin-bottom:4px}
  table.tbl-cards td.tbl-cards-titulo::before{display:none}
  table.tbl-cards td.tbl-cards-valor{font-size:15px;font-weight:800;color:var(--g800,#1f2937)}
  table.tbl-cards td.tbl-cards-acoes{display:flex;flex-direction:column;gap:6px;padding-top:10px !important}
  table.tbl-cards td.tbl-cards-acoes .btn,table.tbl-cards td.tbl-cards-acoes button,table.tbl-cards td.tbl-cards-acoes a.btn{width:100%;min-height:44px;font-size:14px;justify-content:center}
  table.tbl-cards td:empty{display:none}
  /* o contêiner com rolagem lateral (.tw) deixa de rolar */
  .tbl-cards-wrap{overflow:visible !important;overflow-x:visible !important}

  /* 7 · Botão "Avise-me quando chegar" no card ----------------------- */
  .btn-avise{white-space:normal;line-height:1.15;padding:8px 6px;min-height:44px;font-size:12.5px}
  .pc .btn,.pc button{min-height:44px}
  .pc-name{font-size:14px}

  /* 8 · Sem zoom automático do iOS ao focar um campo ----------------- */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px !important}
  .f-sel{height:44px}

  /* 9 · Barra inferior e áreas seguras (notch / home indicator) ------- */
  .m-nav{padding-bottom:env(safe-area-inset-bottom,0);height:auto;min-height:56px}
  .m-nav>*{min-height:56px;padding:6px 2px}
  .m-nav span{font-size:10px;white-space:nowrap;letter-spacing:-.2px}
  .main{padding-bottom:calc(72px + env(safe-area-inset-bottom,0))}
  .barra-carrinho{bottom:calc(56px + env(safe-area-inset-bottom,0))}
  .sheet-rodape,.cd-f{padding-bottom:calc(12px + env(safe-area-inset-bottom,0))}

  /* 11 · Alvos de toque e legibilidade -------------------------------- */
  .btn-xs{min-height:40px;padding:8px 12px;font-size:13px}
  .btn-sc{min-height:40px}
  th{font-size:11px}
  .so-mobile input[type=checkbox],.sheet input[type=checkbox]{width:22px;height:22px}
  .sheet label,.sheet .f-chk{min-height:44px;display:flex;align-items:center}
  .chip-f3{min-height:40px}
  .m-acoes .btn,.m-acoes button{min-height:44px}

  /* 12 · Modal do pedido: respiro entre Frete e Total ----------------- */
  .pdet-top{gap:12px}
  .pdet-top>.pdet-meta,.pdet-top>.pdet-total-card{flex:0 0 auto}   /* em coluna, o flex-basis de 320px virava altura e abria o vazio */

}

/* 13 · Quando instalado na tela de início (standalone) --------------- */
@media (display-mode: standalone){
  body{overscroll-behavior-y:none}
  .topbar{padding-top:env(safe-area-inset-top,0);height:calc(56px + env(safe-area-inset-top,0))}
}