/* ============================================================
   Vista celular / app instalada (se carga DESPUÉS de app.css)
   ============================================================ */
:root{--bnav-h:60px}
.bnav{display:none}

/* Aviso "Instalar app" */
#pwa-banner{position:fixed;left:12px;right:12px;bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px) + 10px);z-index:9000;background:#fff;border:1px solid var(--line);border-left:5px solid var(--green);border-radius:14px;box-shadow:0 8px 28px rgba(10,43,110,.28);padding:10px 12px;display:flex;align-items:center;gap:10px;font-size:.85rem;max-width:520px;margin:0 auto}
#pwa-banner img{width:40px;height:40px;border-radius:10px;flex-shrink:0}
#pwa-banner .t{flex:1;line-height:1.3}
#pwa-banner .si{background:linear-gradient(135deg,var(--green),#12a98a);color:#fff;border:0;border-radius:10px;padding:9px 14px;font-weight:600}
#pwa-banner .no{background:none;border:0;color:var(--mut);font-size:1.1rem;padding:6px}
@media(min-width:769px){#pwa-banner{bottom:16px;left:16px;right:auto;margin:0}}

@media (max-width:768px){
  html{-webkit-text-size-adjust:100%}
  body{padding-bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px) + 16px);-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain}

  /* barra superior compacta (el menú pasa abajo) */
  .topbar{padding-top:env(safe-area-inset-top,0px)}
  .topbar-in{padding:8px 12px;gap:8px}
  .tnav{display:none}
  .who{margin-left:auto;font-size:.78rem}
  .brand img{height:28px}
  .wrap{padding:12px 12px 20px}

  /* menú inferior tipo app */
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -4px 18px rgba(10,43,110,.12)}
  .bnav a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:var(--bnav-h);font-size:.66rem;color:var(--mut);text-decoration:none;position:relative}
  .bnav a .ic{font-size:1.28rem;line-height:1}
  .bnav a.on{color:var(--navy2);font-weight:700}
  .bnav a.on::before{content:'';position:absolute;top:0;left:28%;right:28%;height:3px;background:var(--green);border-radius:0 0 4px 4px}
  .bnav .nbadge{position:absolute;top:5px;left:calc(50% + 6px);font-size:.62rem;padding:0 5px}

  /* tarjetas y encabezado */
  .panel{padding:14px;border-radius:14px}
  .hero{padding:16px;gap:10px 14px;border-radius:16px}
  .hero .big{font-size:1.3rem}
  .kpi{padding:12px 12px 12px 14px;grid-template-columns:54px 1fr}
  .kpi .ring{width:54px;height:54px}
  .kpi .ring::before{inset:6px}

  /* formularios cómodos con el dedo (16px evita el zoom automático de iPhone) */
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea,.form-control,.form-select,.form-control-sm,.form-select-sm{font-size:16px !important;min-height:44px}
  .form-check-input{width:1.4em;height:1.4em}
  textarea.form-control{min-height:70px}
  .btn{min-height:44px;font-size:1rem}
  .btn-sm{min-height:40px}
  .iconbtn{min-width:42px;min-height:40px;display:inline-grid;place-items:center;font-size:1.05rem}
  .pchip{padding:10px 12px}
  .pchip input[type=checkbox]{width:22px;height:22px}
  .cat-row{padding:10px}
  .cat-row .nombre{flex:1 1 100%;order:-1}
  .cat-row .qty{width:90px}
  .cat-row .plan{flex:1;width:auto}

  /* botones de la mesa siempre a mano (una sola fila, compacta) */
  .acciones-mesa{position:sticky;bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px));z-index:40;background:rgba(255,255,255,.97);backdrop-filter:blur(6px);margin:16px -14px -14px !important;padding:8px 10px;border-top:1px solid var(--line);border-radius:0 0 14px 14px;flex-wrap:wrap;gap:6px !important}
  .acciones-mesa .btn{flex:1 1 0;padding:8px 6px;font-size:.9rem;white-space:nowrap;min-width:0}
  .acciones-mesa #btnGuardar{flex:2 1 0}
  .acciones-mesa #msg{flex-basis:100%;font-size:.8rem}
  .acciones-mesa #msg:empty{display:none}
  .pg-mesa #chat-widget:not(.chat-open){bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px) + 84px) !important}

  /* pendientes / ventas de hoy */
  .pend .acc{width:100%;justify-content:flex-end}
  .vta{flex-wrap:wrap}

  /* historial: la tabla se convierte en tarjetas */
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:8px 12px;background:#fff}
  .tbl td{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:.35rem 0 !important;border:0;text-align:right}
  .tbl td .chip{white-space:normal}
  .tbl td::before{content:attr(data-label);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);text-align:left;flex-shrink:0;padding-top:2px}
  .tbl td[data-label=""]::before{display:none}
  .tbl td.sub{max-width:none !important}

  /* chat: botón flotante → pantalla completa al abrir */
  #chat-widget{width:auto !important;left:auto !important;right:12px !important;bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px) + 12px) !important;border-radius:28px !important;max-width:none !important;box-shadow:0 6px 20px rgba(0,0,0,.35) !important}
  #chat-widget>div:first-child{border-radius:28px !important;padding:12px 16px !important;font-size:1rem !important}
  #chat-widget .chat-title-txt,#chat-widget #chat-min-btn{display:none}
  #chat-widget.chat-open{inset:0 !important;width:100% !important;height:100dvh;max-height:none !important;border-radius:0 !important;border:0 !important;padding-top:env(safe-area-inset-top,0px);background:#fff}
  #chat-widget.chat-open>div:first-child{border-radius:0 !important}
  #chat-widget.chat-open .chat-title-txt,#chat-widget.chat-open #chat-min-btn{display:inline}
  #chat-widget.chat-open #chat-min-btn{font-size:1.1rem !important}
  #chat-body-content{padding:10px !important}
  #chat-mensajes-lista{padding:10px !important;font-size:15px !important}
  #chat-mensajes-lista div div{font-size:15px !important}
  #chat-canal-select{font-size:16px !important;padding:10px !important}
  #chat-text-input{font-size:16px !important}
  #chat-emoji-picker{left:12px !important;right:12px !important;width:auto !important;bottom:150px !important}
  #chat-img-input{width:100% !important}
}

@media (display-mode: standalone){
  /* ya instalada: sin selección accidental de texto en botones */
  .btn,.bnav a,.iconbtn{-webkit-user-select:none;user-select:none}
}