/* movil.css — el superadmin en el celular (2026-09-30).
 *
 * QUÉ SE ROMPÍA
 * -------------
 * El panel era sólo de escritorio: barra lateral FIJA de 260 px y el contenido corrido
 * 260 px a la derecha. En un teléfono de 390 px el contenido quedaba en 130 px y la página
 * entera medía ~930 px de ancho: había que hacer zoom y arrastrar para todo. Y como el
 * ancho real nunca bajaba de ~900 px, ninguna media query de "celular" llegaba a activarse
 * (ver el comentario de search.js). Pedido del dueño: «adaptá el superadmin para celular»,
 * sobre todo para cargar el ticket de un gasto con la foto en el momento.
 *
 * CÓMO QUEDA (≤ 900 px)
 * ---------------------
 *   · La barra lateral pasa a ser un cajón: se abre con el botón ☰ de la barra superior y
 *     se cierra al elegir una pantalla, tocando afuera o con Escape (public/movil.js).
 *   · La barra superior se ordena en dos renglones: ☰ + título + tema + avatar, y abajo el
 *     buscador a lo ancho.
 *   · Las tablas se desplazan de costado DENTRO de su caja: la página nunca se ensancha.
 *   · Los modales ocupan la pantalla; las grillas de formularios pasan a una columna.
 *
 * Todo vive acá y en movil.js: para volver atrás alcanza con sacar las dos líneas que los
 * cargan en index.html. En escritorio (> 900 px) este archivo no cambia nada, salvo el
 * botón ☰, que está oculto.
 */

.mkw-menu-btn { display: none; }
.mkw-menu-fondo { display: none; }

@media (max-width: 900px) {
    /* ── Cajón lateral ─────────────────────────────────────────────────────── */
    .sidebar {
        width: 272px;
        max-width: 84vw;
        transform: translateX(-100%);
        transition: transform .22s ease;
        z-index: 3000;
        box-shadow: none;
    }
    body.mkw-menu-abierto .sidebar {
        transform: none;
        box-shadow: 0 0 40px rgb(0 0 0 / .45);
    }
    body.mkw-menu-abierto .mkw-menu-fondo {
        display: block;
        position: fixed;
        inset: 0;
        background: rgb(0 0 0 / .45);
        z-index: 2999;
    }
    body.mkw-menu-abierto { overflow: hidden; }
    .nav-item { padding: 13px 20px; }

    /* ── Contenido a todo el ancho ─────────────────────────────────────────── */
    .app { display: block; }
    .main-content { margin-left: 0; min-width: 0; width: 100%; }
    .content { padding: 14px 12px 40px; min-width: 0; }
    .view, .view.active { min-width: 0; max-width: 100%; }

    /* ── Barra superior en dos renglones ───────────────────────────────────── */
    .topbar {
        padding: 8px 12px;
        gap: 8px 10px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .topbar-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
    .topbar-left h1 {
        font-size: 17px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    .mkw-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: var(--surface);
        color: var(--text-primary);
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
    }
    /* Los hijos de topbar-right pasan a ser renglones/celdas de la topbar. */
    .topbar-right { display: contents; }
    .prefs-controls { margin-right: 0; order: 2; }
    .prefs-fontsize, .prefs-sep { display: none; }
    .user-profile { order: 3; }
    .user-info { display: none; }
    .user-avatar { width: 36px; height: 36px; font-size: 14px; }
    .mkw-search-wrap, .global-search-wrap {
        order: 10;
        flex: 1 0 100%;
        width: 100% !important;
        max-width: none !important;
    }
    #global-search { font-size: 16px; } /* < 16 px hace zoom solo en iPhone */

    /* ── Encabezados de pantalla y botoneras ───────────────────────────────── */
    .view-header {
        flex-wrap: wrap;
        gap: 10px;
        align-items: flex-start;
    }
    .view-header > * { min-width: 0; }
    .view-actions, .header-actions, .filters, .filter-bar, .billing-filters {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ── Tablas: desplazamiento horizontal dentro de su caja ───────────────── */
    .content table:not(.mkw-cj-tabla) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-container, .data-list, .mkw-cj-tabla-wrap { max-width: 100%; overflow-x: auto; }

    /* ── Tarjetas y grillas ────────────────────────────────────────────────── */
    .stats-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
    .stat-card { padding: 14px; min-width: 0; }
    .data-card, .card { min-width: 0; max-width: 100%; }
    .data-card-header { flex-wrap: wrap; gap: 8px; }
    /* Botonera de cada bot (Editar, Logs, Soporte, Detener…): baja de renglón en vez de
       quedar escondida a la derecha de la tarjeta. */
    .data-card-actions { flex-wrap: wrap; gap: 6px; max-width: 100%; }
    .stat-content { min-width: 0; }
    .stat-content h3 { font-size: 20px; white-space: nowrap; }

    /* «Clientes y bots» (cuentas.js): los contadores en un renglón propio y el selector
       de modo abajo, en vez de una columna angosta al lado. */
    .mkw-cu-tiles { flex: 1 1 100% !important; }

    /* ── Modales a pantalla completa ───────────────────────────────────────── */
    .modal { padding: 0; align-items: flex-start; }
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh;
        max-height: none;
        border-radius: 0;
        margin: 0 !important;
    }
    .modal-header { padding: 14px 16px; position: sticky; top: 0; background: var(--surface); z-index: 2; }
    .modal-content > div[style*="padding: 24px"], .modal-body { padding: 16px !important; }

    /* ── Formularios ───────────────────────────────────────────────────────── */
    .form-group input, .form-group select, .form-group textarea, .form-input { font-size: 16px; }
    .form-row { grid-template-columns: 1fr; gap: 0; }

    /* Pestañas del Panel: se desplazan de costado en vez de ensanchar la página. */
    .metrics-tabs { overflow-x: auto; scrollbar-width: none; }
    .metrics-tab { flex: 0 0 auto; white-space: nowrap; }

    /* Encabezado de la ficha del cliente: volver + nombre + estado + botones. */
    #view-customer-detail > div:first-child { flex-wrap: wrap; gap: 8px 10px !important; }
    #detail-customer-name { flex: 1 1 100% !important; order: -1; font-size: 20px; line-height: 1.25; }
}

@media (max-width: 640px) {
    /* Grillas de dos o más columnas escritas inline en el HTML: una sola columna. */
    .content [style*="grid-template-columns"], .modal [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    .content { padding: 12px 10px 40px; }
    /* Renglones flex escritos inline (buscador + filtro, botoneras): que bajen de renglón. */
    .content div[style*="display: flex"], .content div[style*="display:flex"] { flex-wrap: wrap; }
    .btn { min-height: 38px; }
    /* Tarjetas de totales: sin el ícono, para que el monto entre entero en su renglón. */
    .stat-card .stat-icon { display: none; }
    .stat-content h3 { font-size: 17px; }
}