/* EL PANEL EN EL MÓVIL, COMO UNA APP (3-oct-2026) — plan y marcha atrás: docs/tandas-panel-movil.md (tanda 1).
   Juan: «el backend de la app, adáptalo a vista de móvil, de una app». Se abre dentro de la app de iPhone del Dashboard.
   · Hasta 640 px: la tira de pestañas de arriba se esconde y abajo va una barra de 5 (Pedidos · Facturas · Tienda ·
     Clientes · Más), como cualquier app de iPhone. En el ordenador NO cambia nada: todo lo visible vive en el @media.
   · Dentro de la app del Dashboard (`?embed=iphone`): fuera nuestro logo (ya lo pinta su barra de arriba) y 34 px de
     suelo para la barra de inicio del iPhone, que dentro de un iframe `env(safe-area-inset-bottom)` da 0.
   · Colores del panel (claro y oscuro) y el acento del mundo (NUEVA oro, INVBIT azul…) para la pestaña encendida. */
:root{ --bm-alto:64px; --bm-suelo:env(safe-area-inset-bottom, 0px); }
:root[data-embed="iphone"]{ --bm-suelo:34px; }
.bm-barra, .bm-hoja, .bm-velo, .bm-revisar{ display:none; }

@media (max-width:640px){
  #paTabs, #paTabsMas, #paTabsMenu{ display:none !important; }
  :root[data-embed="iphone"] .pa-logo-img{ display:none !important; }
  #paPanel .pa-content{ padding-bottom:calc(var(--bm-alto) + var(--bm-suelo) + 28px) !important; }
  /* Lo que aún es más ancho que el móvil (Clientes 720 px, Precios 515, Tienda 557: medido el 3-oct) se desliza de lado
     DENTRO del contenido. Sin esto el navegador ensancha la página entera y la barra de abajo se va fuera de la vista.
     Es un apaño hasta la tanda 2, que hace caber cada pantalla. */
  #paPanel .pa-content{ overflow-x:auto; max-width:100vw; }

  :root:not(.bm-dentro) .bm-barra{ display:none !important; }
  .bm-barra{
    display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); align-items:center;
    position:fixed; left:12px; right:12px; bottom:calc(var(--bm-suelo) + 10px); height:var(--bm-alto); z-index:9000;
    background:var(--card, #fff); border:1.5px solid var(--br, #dcdcdc); border-radius:22px;
  }
  .bm-barra button{
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    min-height:56px; padding:0; border:0; background:transparent; color:var(--tx-2, #5e5e5e);
    font:600 11.5px/1.1 var(--f-app, Poppins, system-ui, sans-serif); white-space:nowrap; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .bm-barra button span.bm-txt{ max-width:100%; overflow:hidden; text-overflow:ellipsis; padding:0 2px; }
  .bm-barra .bm-ico{ width:48px; height:30px; border-radius:15px; display:grid; place-items:center; font-size:17px; transition:background-color .18s ease-out, transform .12s ease-out; }
  .bm-barra button.on{ color:var(--tx, #141414); }
  .bm-barra button.on .bm-ico{ background:var(--accent, #ffb500); color:var(--accent-ink, #1c1c1c); }
  .bm-barra button:active .bm-ico{ transform:scale(.92); }
  .bm-globo{
    position:absolute; top:3px; left:calc(50% + 9px); min-width:18px; height:18px; padding:0 5px; border-radius:9px;
    background:#c62828; color:#fff; font:700 11px/18px var(--f-app, Poppins, sans-serif); text-align:center;
  }

  /* «Más»: una hoja que sube desde abajo con el resto de pantallas, lo de las tres rayas y «Salir». */
  .bm-velo{ display:block; position:fixed; inset:0; z-index:9500; background:rgba(0,0,0,.32); opacity:0; pointer-events:none; transition:opacity .2s ease-out; }
  .bm-hoja{
    display:block; position:fixed; left:8px; right:8px; bottom:calc(var(--bm-suelo) + 8px); z-index:9600; max-height:78vh; overflow-y:auto;
    background:var(--card, #fff); border:1.5px solid var(--br, #dcdcdc); border-radius:22px; padding:10px 10px 12px;
    transform:translateY(calc(100% + 40px)); transition:transform .26s cubic-bezier(.2,.8,.2,1);
  }
  .bm-abierta .bm-velo{ opacity:1; pointer-events:auto; }
  .bm-abierta .bm-hoja{ transform:none; }
  .bm-hoja-cab{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 8px 10px; }
  .bm-hoja-cab b{ font:800 18px/1.2 var(--f-app, Poppins, sans-serif); color:var(--tx, #141414); }
  .bm-hoja-cab small{ display:block; font:500 12.5px/1.3 var(--f-app, Poppins, sans-serif); color:var(--tx-2, #5e5e5e); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:62vw; }
  .bm-cerrar{ width:44px; height:44px; border-radius:22px; border:0; background:var(--bg-2, #efefef); color:var(--tx, #141414); font-size:17px; cursor:pointer; flex:none; }
  .bm-hoja-lista{ display:flex; flex-direction:column; gap:6px; }
  .bm-hoja-lista button{
    display:flex; align-items:center; gap:14px; width:100%; min-height:52px; padding:0 14px; border:0; border-radius:14px;
    background:transparent; color:var(--tx, #141414); font:600 15.5px/1.2 var(--f-app, Poppins, sans-serif); text-align:left; cursor:pointer;
  }
  .bm-hoja-lista button i{ width:22px; text-align:center; color:var(--tx-2, #5e5e5e); font-size:16px; }
  .bm-hoja-lista button.on{ background:var(--accent, #ffb500); color:var(--accent-ink, #1c1c1c); }
  .bm-hoja-lista button.on i{ color:inherit; }
  .bm-hoja-lista .bm-sep{ height:1px; background:var(--br, #e3e3e3); margin:4px 8px; }
  .bm-hoja-lista button.bm-salir{ color:#c62828; }
  .bm-hoja-lista button.bm-salir i{ color:#c62828; }
  .bm-hoja-lista .bm-globo{ position:static; margin-left:auto; }
  @media (hover:hover){ .bm-hoja-lista button:not(.on):hover{ background:var(--bg-2, #f2f2f2); } }

  /* «Por revisar» va DENTRO de Pedidos, arriba del todo (Juan, 3-oct): una losa que lleva a la lista. */
  .bm-revisar:not([hidden]){
    display:flex; align-items:center; gap:12px; width:100%; min-height:56px; margin:0 0 14px; padding:0 16px;
    border:1.5px solid var(--br, #dcdcdc); border-radius:18px; background:var(--card, #fff); color:var(--tx, #141414);
    font:600 15px/1.2 var(--f-app, Poppins, sans-serif); text-align:left; cursor:pointer;
  }
  .bm-revisar i.fa-bell{ color:#c62828; font-size:17px; }
  .bm-revisar b{ color:#c62828; }
  .bm-revisar i.fa-chevron-right{ margin-left:auto; color:var(--tx-2, #5e5e5e); }
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){
  .bm-hoja, .bm-velo, .bm-barra .bm-ico{ transition:none; }
}