/* ═══════════════════════════════════════════════════════════════════════════
   CraveAI — Panel en el celular (≤ 700 px)
   Capa aditiva: no toca nada por encima de 700 px. Se carga DESPUÉS del <style>
   del dashboard para ganar en cascada. Tokens: los mismos --bg/--surface/... del
   panel (claro y oscuro salen solos por [data-theme]).
   ═══════════════════════════════════════════════════════════════════════════ */

/* La barra inferior y la pantalla «Más» existen sólo en el celular. */
.mobile-nav,.mobile-status-tabs,.conv-volver,.mas-wrap{ display:none; }

@media (max-width:700px){

  /* ── Cascarón ─────────────────────────────────────────────────────────── */
  .app{ height:100dvh; }
  .sidebar{ display:none; }                 /* su contenido vive en «Más» y en la barra */
  .main{ min-height:0; }

  /* Barra de arriba: 56 px, título 18, sin nombre del local ni tema (van en «Más»). */
  .topbar{ height:56px; padding:0 12px 0 16px; gap:10px; }
  .tb-left{ gap:10px; min-width:0; }
  .tb-left::before{
    content:""; width:28px; height:28px; flex:none;
    background:url("assets/icon.png") center/contain no-repeat;
  }
  .tb-title{ font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .live{ padding:4px 9px; font-size:11px; }
  .live-dot{ width:7px; height:7px; }
  .tb-count{ display:none; }
  .tb-right{ gap:4px; }
  .tb-right .icon-btn[title="Cambiar tema"]{ display:none; }
  .tb-user-nombre{ display:none; }
  .tb-avatar,.tb-avatar-img{ width:34px; height:34px; }
  .notif-panel{ position:fixed; top:calc(56px + env(safe-area-inset-top)); right:8px; left:8px; width:auto; }
  .user-menu{ position:fixed; right:8px; top:calc(56px + env(safe-area-inset-top)); }

  /* ── Barra inferior ──────────────────────────────────────────────────── */
  .mobile-nav{
    display:grid; grid-template-columns:repeat(4,1fr); flex:none;
    height:calc(60px + env(safe-area-inset-bottom)); padding:0 8px env(safe-area-inset-bottom);
    background:var(--bg); border-top:1px solid var(--border);
  }
  .mobile-nav button{
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; border:none; background:transparent; color:var(--text-2);
    font-size:11px; font-weight:500; padding:0;
  }
  .mobile-nav button.active{ color:var(--text); font-weight:600; }
  .mobile-nav button.active .mobile-nav-ico{ color:var(--brand-2); }
  .mobile-nav button.active::before{
    content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:28px; height:3px; border-radius:0 0 3px 3px; background:var(--brand-grad);
  }
  .mobile-nav-ico{ position:relative; display:flex; }
  .mobile-nav .sb-badge{ position:absolute; top:-6px; right:-12px; margin:0; min-width:18px; height:18px; font-size:11px; }

  /* ── Pedidos: lista con pestañas de estado ───────────────────────────── */
  .board-wrap{ padding:0 14px 12px; }
  .board-toolbar{
    position:static; min-width:0; margin:0 -14px 0; padding:10px 14px;
    flex-wrap:nowrap; gap:8px; background:var(--bg); border-bottom:1px solid var(--border);
  }
  .orders-view-tabs{ order:0; }
  .orders-toolbar-actions{ order:0; flex:1; flex-basis:auto; justify-content:flex-end; }
  .orders-search{ width:40px; flex:none; padding:0; justify-content:center; background:var(--elevated); }
  .orders-search:focus-within{ position:fixed; left:14px; right:14px; top:calc(56px + 10px + env(safe-area-inset-top)); width:auto; z-index:20; padding:0 10px; justify-content:flex-start; }
  .orders-search input{ display:none; }
  .orders-search:focus-within input{ display:block; }
  .orders-type-filter{ display:none; }
  /* «Nuevo pedido» y «Estamos con demora» quedan en 40 px, sólo ícono. El rótulo de los
     dos es un nodo de TEXTO suelto —no un <span>—, así que la única forma de sacarlo sin
     tocar el JSX es apagarle la tipografía al botón: el <svg> lleva sus propias medidas y
     no se entera. Con los rótulos puestos, la barra no entra a 390 px y se pisan entre
     sí la lupa, «Activos/Historial» y los dos botones. */
  .board-new-order,.demora-btn{
    width:40px; height:40px; flex:none; padding:0; gap:0;
    font-size:0; justify-content:center;
  }

  .mobile-status-tabs{
    display:flex; gap:8px; padding:12px 0 4px; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .mobile-status-tabs::-webkit-scrollbar{ display:none; }
  .mobile-status-tabs button{
    flex:none; height:36px; padding:0 12px 0 10px; display:inline-flex; align-items:center; gap:8px;
    border:1px solid transparent; border-radius:999px; background:transparent;
    color:var(--text-2); font-size:13px; font-weight:600;
  }
  .mobile-status-tabs button.active{
    border-color:var(--border); background:var(--elevated); color:var(--text); font-weight:700;
    box-shadow:0 1px 3px rgba(15,23,42,.08);
  }
  .mobile-status-tabs .col-accent{ width:3px; height:14px; }
  .mobile-status-tabs .col-count{ min-width:21px; height:20px; font-size:11.5px; }
  /* Con «Programados» son cinco pestañas y la fila se desliza: suben a 44 px, el mínimo
     para acertarle con el dedo. Sólo en ese caso, para que un local que no usa la función
     no vea ningún cambio. */
  .mobile-status-tabs.con-programados button{ height:44px; }
  /* ⚠️ Y la fila no se deja achicar. Es un hijo de una columna flex con `overflow-x:auto`,
     y eso le baja el alto mínimo a cero: con la lista llena, el tablero la aplastaba y la
     pestaña activa salía cortada abajo (medido: 44 px de botón en 48 de fila con 60 de
     contenido). Con 36 px de botón el recorte caía en el relleno y no se veía. */
  .mobile-status-tabs.con-programados{ flex:none; }

  .board{ min-width:0; min-height:0; display:block; }
  .board>.col{ border:0; padding:0; background:transparent; }
  .col-head{ display:none; }                 /* la pestaña ya dice en qué columna estás */
  .col-body{ gap:10px; padding:8px 0 0; }
  .col-empty{ padding:36px 8px; font-size:13px; }

  /* Tarjeta: un toque más grande que en la tablet, botón de 48 px para el dedo. */
  .order-card{ --oc-pad:14px; gap:10px; }
  .oc-num{ font-size:13px; }
  .oc-age{ font-size:12px; }
  .oc-name{ font-size:16px; }
  .oc-customer .type-tag{ font-size:12px; }
  .oc-items{ padding:10px 11px; gap:6px; }
  .oc-item-line{ font-size:14px; }
  .oc-item-detail{ font-size:12px; margin-left:28px; }
  .oc-nota{ font-size:12.5px; white-space:normal; }
  .oc-nota span{ white-space:normal; }
  .oc-summary span{ display:inline; font-size:12px; }
  .oc-summary strong{ font-size:17px; }
  .pay-chip{ font-size:11.5px; padding:4px 9px; }
  .oc-actions .btn,.order-card.dens-compact .btn{ height:48px; font-size:15px; }
  .order-card.urgent-amber,.order-card.urgent-red{ border-left-width:3px; }
  /* El cartel del programado, a la misma escala que el resto de la tarjeta en el teléfono. */
  .oc-programado{ font-size:13px; padding:8px 10px; gap:8px; }
  .oc-programado-hora{ font-size:14px; }
  .oc-programado-txt small{ font-size:12px; }

  .history-row{ grid-template-columns:82px minmax(0,1fr) 90px 18px; padding:9px 12px; }
  .history-row>.type-tag,.history-row>.badge{ display:none; }

  /* ── Detalle del pedido: pantalla completa (ya lo era; sólo bordes seguros) ── */
  .slideover{ height:100dvh; }
  .so-head{ padding:calc(8px + env(safe-area-inset-top)) 12px 12px 8px; align-items:flex-start; }
  .so-head>div:first-child{ padding-top:6px; }
  .so-head-actions .btn{ height:38px; font-size:13px; padding:0 12px; }
  .so-scroll{ padding:0 16px 16px; }
  .so-chat{ max-height:none; }
  .so-foot{ padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .so-foot .btn{ height:52px; font-size:15px; }
  .so-foot .btn-cancel{ padding:0 16px; }

  /* ── Chats: lista O conversación, nunca las dos ─────────────────────── */
  .chats-body{ position:relative; }
  .conv-sidebar{ width:100% !important; border-right:0; }
  .conv-resizer{ display:none; }
  .chats-body[data-vista="lista"] .conv-detail{ display:none; }
  .chats-body[data-vista="chat"] .conv-sidebar{ display:none; }
  .conv-sidebar-head{ display:none; }        /* el título ya está en la barra de arriba */
  .conv-search{ margin:12px 14px 10px; height:42px; padding:0 12px; background:var(--surface); }
  .conv-search input{ font-size:14px; }
  .conv-filtros{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:0 14px 12px; }
  .conv-filtros::-webkit-scrollbar{ display:none; }
  .conv-filtro{ height:32px; padding:0 13px; font-size:13px; }
  .conv-row{ padding:13px 16px; }
  .conv-row.active{ background:transparent; border-left-color:transparent; }
  .conv-row.alert{ border-left-color:#EF4444; }
  .conv-name{ font-size:15px; }
  .conv-time{ font-size:12px; }
  .conv-row-preview{ font-size:13.5px; }
  .conv-row-menu{ display:none !important; }  /* en el celular el menú es pulsación larga (onContextMenu) */

  .conv-detail-head{ padding:6px 10px 10px 8px; gap:6px; }
  .conv-volver{ display:flex; flex:none; }
  .conv-detail-name{ font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* `display:block` no es de adorno: el panel deja esta línea en `display:flex`, y sobre
     un contenedor flex el `text-overflow` no hace nada — el teléfono se cortaba en seco,
     sin puntos suspensivos. El texto ya trae sus propios « · » de separador. */
  .conv-detail-sub{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bot-toggle{ margin-right:0; }
  .conv-messages{ padding:16px 14px; }
  .conv-bubble-wrap{ max-width:78%; }
  .bubble{ font-size:14px; }
  .conv-input-wrap{ padding:10px 12px calc(10px + env(safe-area-inset-bottom)); gap:8px; }
  .conv-alerta{ padding:10px 14px; flex-wrap:wrap; align-items:flex-start; }
  .conv-alerta-actions{ width:100%; padding-left:44px; }
  .ficha{ width:100%; inset:0; border-left:0; }

  /* ── Menú ────────────────────────────────────────────────────────────── */
  /* ⚠️ El panel YA apila esta cabecera en su propio corte de 680 px
     (`flex-direction:column`). En una columna, `flex-wrap:wrap` envuelve en COLUMNAS y
     `flex-basis:100%` mide el ALTO: con eso el buscador y los dos botones se iban fuera
     de la pantalla. Acá se fija la dirección y se apaga el envoltorio; el que envuelve
     —y sigue siendo fila— es `.menu-header-right`. */
  .menu-header{
    flex-direction:column; align-items:stretch; flex-wrap:nowrap;
    gap:10px; padding:14px 16px 12px;
  }
  .menu-header-info{ flex:none; }
  .menu-header-title{ white-space:nowrap; }
  .menu-header-right{ width:100%; flex-wrap:wrap; gap:8px; }
  .menu-search-wrap{ flex:1 1 100%; height:42px; }
  .menu-header-right>.btn{ flex:1; height:40px !important; font-size:13px !important; white-space:nowrap; justify-content:center; }
  .menu-header-right>.btn.btn-secondary{ flex:1.4; }
  .menu-category-nav{ overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; padding-left:14px; padding-right:14px; }
  .menu-category-nav::-webkit-scrollbar{ display:none; }
  .menu-configuracion{ margin:14px 14px 0; }
  .menu-foto-bar{ flex-wrap:wrap; }
  .menu-foto-bar .btn{ flex:1; height:40px !important; font-size:13px !important; }
  .menu-options-head{ flex-wrap:wrap; }
  .menu-body{ padding:14px 14px calc(14px + env(safe-area-inset-bottom)); gap:20px; }
  .menu-item{ padding:12px 14px; }
  .menu-item-nombre{ font-size:14.5px; }
  .menu-item-desc{ font-size:12.5px; max-width:none; }
  .menu-item-price{ font-size:14.5px; }
  .menu-toggle{ width:44px; height:26px; }
  .menu-toggle-dot{ width:20px; height:20px; }
  .menu-toggle.on .menu-toggle-dot{ left:21px; }
  .menu-item-actions{ display:none; }        /* editar = tocar el nombre; borrar vive en el editor */

  /* ── «Más»: lo que en escritorio es el sidebar ───────────────────────── */
  .mas-wrap{ display:flex; flex-direction:column; gap:14px; flex:1; overflow-y:auto; padding:14px 14px calc(14px + env(safe-area-inset-bottom)); }
  .mas-cuenta,.mas-grupo{
    border:1px solid var(--border); border-radius:14px; background:var(--elevated);
    box-shadow:var(--shadow-card); overflow:hidden;
  }
  .mas-cuenta{ display:flex; align-items:center; gap:12px; padding:14px; }
  .mas-cuenta .tb-avatar,.mas-cuenta .tb-avatar-img{ width:44px; height:44px; font-size:14px; }
  .mas-cuenta-txt{ flex:1; min-width:0; }
  .mas-cuenta-nombre{ font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mas-cuenta-email{ font-size:12.5px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
  .mas-plan{
    display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; flex:none;
    border:1px solid var(--brand-2); border-radius:999px; color:var(--brand-2); font-size:12px; font-weight:600;
    background:transparent;
  }
  .mas-item{
    display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:0 14px;
    border:none; border-bottom:1px solid var(--border-2); background:transparent;
    color:var(--text); font-size:14.5px; font-weight:500; text-align:left;
  }
  .mas-grupo>.mas-item:last-child{ border-bottom:0; }
  .mas-item-ico{ display:flex; color:var(--text-2); }
  .mas-item-lbl{ flex:1; min-width:0; }
  .mas-item-sub{ font-size:12px; color:var(--text-3); font-weight:500; }
  .mas-item .sb-badge{ margin:0; }
  .mas-item .sb-candado{ margin:0; }
  .mas-item .chev{ color:var(--text-3); }
  .mas-item.paused{ color:var(--brand-2); }
  .mas-wa{ display:flex; flex-direction:column; line-height:1.2; flex:1; }
  .mas-wa .sb-wa-label{ font-size:14px; }
  .mas-wa .sb-wa-state{ font-size:11.5px; }
  .mas-toggle{ width:44px; height:26px; border-radius:20px; border:none; position:relative; flex:none; background:var(--border); }
  .mas-toggle.on{ background:var(--brand-2); }
  .mas-toggle i{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:left .2s; }
  .mas-toggle.on i{ left:21px; }
  .mas-salir{
    display:flex; align-items:center; justify-content:center; gap:8px; height:48px;
    border:1px solid var(--border); border-radius:12px; background:var(--elevated);
    color:#DC2626; font-size:14px; font-weight:600;
  }
  [data-theme="dark"] .mas-salir{ color:#F87171; }

  /* ── Otras secciones (sin rediseño): que al menos no desborden ─────── */
  .alta-wrap,.plan-wrap,.bol-page{ padding-left:14px; padding-right:14px; }
  .toast-wrap,.toasts{ left:12px; right:12px; top:calc(64px + env(safe-area-inset-top)); }
  .toast{ animation:toastInMobile .3s cubic-bezier(.34,1.56,.64,1); }
  @keyframes toastInMobile{ from{ opacity:0; transform:translateY(-16px);} to{ opacity:1; transform:translateY(0);} }
}