/* ==========================================================================
   CELULAR: barra de abajo, menú "Más" y Chats con embudos/etapas (js/base/movil-nav.js)
   ========================================================================== */
#mv-barra, #mv-crm, #mv-todos { display: none; }

@media (max-width: 767px) {
    /* La barra reemplaza las pestañas de arriba y las sub-pestañas de Ventas */
    html.mv-on .app-tabs,
    html.mv-on .sales-sub-nav { display: none !important; }
    html.mv-on .app-main { padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important; }

    html.mv-on #mv-barra {
        display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
        background: #fff; border-top: 1px solid #e5e7eb; box-shadow: 0 -4px 16px rgba(15,23,42,.06);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    html.chat-movil-abierto #mv-barra { display: none !important; }
    #mv-barra button {
        position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
        background: none; border: 0; padding: 5px 0 3px; font: 600 10.5px/1.1 inherit; color: #64748b; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    #mv-barra button svg { width: 23px; height: 23px; }
    #mv-barra button.on { color: #d81b60; }
    #mv-barra button.on::before { content: ''; position: absolute; top: -6px; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: #d81b60; }
    #mv-barra .n {
        position: absolute; top: 0; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
        background: #ef4444; color: #fff; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; border: 2px solid #fff;
    }

    /* Menú "Más" (hoja que sube desde abajo) */
    #mv-mas { position: fixed; inset: 0; z-index: 950; background: rgba(15,23,42,0); transition: background .2s; display: flex; align-items: flex-end; }
    #mv-mas.abierto { background: rgba(15,23,42,.38); }
    #mv-mas .mv-hoja {
        width: 100%; background: #fff; border-radius: 20px 20px 0 0; padding: 8px 16px calc(84px + env(safe-area-inset-bottom));
        transform: translateY(100%); transition: transform .22s ease; max-height: 85vh; overflow-y: auto; color: #0f172a;
    }
    #mv-mas.abierto .mv-hoja { transform: none; }
    #mv-mas .asa { width: 40px; height: 4px; border-radius: 2px; background: #cbd5e1; margin: 2px auto 12px; }
    #mv-mas .quien { display: flex; flex-direction: column; margin-bottom: 14px; }
    #mv-mas .quien b { font-size: 16px; }
    #mv-mas .quien span { font-size: 12px; color: #64748b; }
    #mv-mas .mv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
    #mv-mas .mv-grid button {
        display: flex; flex-direction: column; align-items: center; gap: 7px; background: #f8fafc; border: 1px solid #eef0f3;
        border-radius: 14px; padding: 13px 4px 11px; font: 600 12px/1.2 inherit; color: #0f172a; cursor: pointer;
    }
    #mv-mas .mv-grid i { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
    #mv-mas .mv-grid svg { width: 21px; height: 21px; }
    #mv-mas .mv-fila {
        width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left;
        background: none; border: 0; border-top: 1px solid #f1f5f9; padding: 14px 2px; font: 600 14px/1.3 inherit; color: #0f172a; cursor: pointer;
    }
    #mv-mas .mv-fila small { display: block; font-size: 12px; font-weight: 500; color: #64748b; }
    #mv-mas .mv-fila.salir { color: #dc2626; }
    #mv-mas .mv-fila.salir svg { width: 20px; height: 20px; }
    #mv-mas .sw { width: 44px; height: 26px; border-radius: 13px; background: #cbd5e1; position: relative; flex: none; transition: background .2s; }
    #mv-mas .sw::after { content: ''; 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; }
    #mv-mas .sw.si { background: #10b981; }
    #mv-mas .sw.si::after { left: 21px; }

    /* ── Chats ── */
    html.mv-on #tab-crm > .tab-header,
    html.mv-on #tab-crm .kanban-header-bar,
    html.mv-on #tab-crm .crm-funnel-switcher-bar { display: none !important; }
    html.mv-on #mv-crm { display: block; position: sticky; top: 0; z-index: 30; background: var(--bg-color, #f7f7f5); margin: -4px -2px 6px; padding: 4px 2px 0; }
    #mv-crm .mv-fbus { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
    #mv-crm .mv-bus { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 0 12px; height: 42px; color: #94a3b8; }
    #mv-crm .mv-bus svg { width: 18px; height: 18px; flex: none; }
    #mv-crm .mv-bus input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; color: #0f172a; }
    #mv-crm select { max-width: 112px; height: 42px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; font-size: 13px; font-weight: 700; padding: 0 6px; color: #334155; }
    #mv-crm .mv-nueva { flex: none; width: 42px; height: 42px; border-radius: 12px; border: 0; background: #d81b60; color: #fff; display: flex; align-items: center; justify-content: center; }
    #mv-crm .mv-nueva svg { width: 22px; height: 22px; }
    #mv-crm .mv-emb { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; margin: 0 -2px; }
    #mv-crm .mv-emb::-webkit-scrollbar { display: none; }
    #mv-crm .mv-emb button {
        flex: none; position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e2e8f0; background: #fff;
        border-radius: 999px; padding: 7px 13px; font: 700 13px/1 inherit; color: #334155; cursor: pointer;
    }
    #mv-crm .mv-emb button b { font-size: 11px; font-weight: 800; color: #64748b; background: #f1f5f9; border-radius: 9px; padding: 2px 6px; }
    #mv-crm .mv-emb button.on { background: #0f172a; border-color: #0f172a; color: #fff; }
    #mv-crm .mv-emb button.on b { background: rgba(255,255,255,.18); color: #fff; }
    #mv-crm .mv-emb .pt { position: absolute; top: 2px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; border: 2px solid #fff; }
    #mv-crm .mv-etapa { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #eef0f3; border-radius: 14px; padding: 8px; margin-bottom: 10px; }
    #mv-crm .mv-etapa .c { flex: 1; min-width: 0; text-align: center; }
    #mv-crm .mv-etapa .c b { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #mv-crm .mv-etapa .c b .column-dot { margin: 0; flex: none; }
    #mv-crm .mv-etapa .c small { display: block; font-size: 11.5px; color: #64748b; margin-top: 2px; }
    #mv-crm .mv-etapa .pts { display: flex; justify-content: center; gap: 5px; margin-top: 6px; }
    #mv-crm .mv-etapa .pts i { width: 6px; height: 6px; border-radius: 3px; background: #e2e8f0; transition: width .2s; }
    #mv-crm .mv-etapa .pts i.on { width: 16px; background: #d81b60; }
    #mv-crm .mv-etapa .fl { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; color: #0f172a; display: flex; align-items: center; justify-content: center; }
    #mv-crm .mv-etapa .fl svg { width: 22px; height: 22px; }
    #mv-crm .mv-etapa .fl:disabled { opacity: .3; }

    /* Una sola etapa a lo ancho (o la lista "Todos") */
    html.mv-on #tab-crm .kanban-board { display: block !important; overflow: visible !important; min-height: 0 !important; margin-top: 0 !important; padding-bottom: 0 !important; }
    html.mv-on #tab-crm .kanban-column { display: none !important; }
    html.mv-on #tab-crm .kanban-column.mv-col { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; background: transparent !important; border: 0 !important; padding: 0 !important; }
    html.mv-on #tab-crm .kanban-column.mv-col .column-header { display: none !important; }
    html.mv-on #tab-crm .kanban-board.mv-ver-todos .kanban-column { display: none !important; }
    html.mv-on #tab-crm .kanban-board.mv-ver-todos #mv-todos { display: flex; flex-direction: column; gap: 8px; }
    html.mv-on #tab-crm .kanban-cards { overflow: visible !important; max-height: none !important; }
    #mv-todos .mv-et { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: #64748b; margin-bottom: 4px; }
    #mv-todos .mv-et .column-dot { margin: 0; width: 8px; height: 8px; }
    #mv-todos .mv-vacio { color: #94a3b8; text-align: center; padding: 30px 0; font-size: 13px; }
}
@media (max-width: 767px) {
    html.mv-on #tab-crm .kanban-column.mv-col .kanban-cards { margin-top: 0 !important; padding-top: 0 !important; gap: 8px; }
    html.mv-on #tab-crm { padding-top: 0 !important; gap: 0 !important; }
}
@media (max-width: 767px) {
    html.mv-on .cal2-fab { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
}