/* ============================================================
   EVENTIA — Responsive / Mobile CSS
   Se aplica en pantallas ≤ 768px
   ============================================================ */

@media (max-width: 768px) {

    /* ── Variables móvil ── */
    :root {
        --topbar-height: 56px;
    }

    /* ── App Shell: sidebar oculto por defecto ── */
    .app-shell {
        flex-direction: column;
        overflow: visible;
        height: auto;
        min-height: 100vh;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: -290px;
        width: 280px;
        height: 100vh;
        z-index: 500;
        transition: left 0.28s ease;
        box-shadow: none;
        overflow-y: auto;
    }

    .sidebar.open {
        left: 0;
        box-shadow: 4px 0 30px rgba(0,0,0,0.35);
    }

    /* Overlay oscuro detrás del sidebar */
    #sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 499;
    }
    #sidebar-overlay.visible { display: block; }

    /* ── Workspace ocupa toda la pantalla ── */
    .workspace {
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    /* ── Topbar móvil ── */
    .topbar {
        position: sticky;
        top: 0;
        z-index: 100;
        padding: 0 1rem;
        height: var(--topbar-height);
        gap: .5rem;
    }

    /* Botón hamburguesa */
    #btn-hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        font-size: 1.4rem;
        cursor: pointer;
        color: var(--text-primary);
        padding: 4px 6px;
        border-radius: 8px;
        flex-shrink: 0;
    }
    #btn-hamburger:hover { background: var(--bg-app); }

    /* Search bar: ocultar en móvil (ocupa demasiado) */
    .search-bar { display: none; }

    /* User info: solo avatar en móvil */
    .user-info { display: none; }

    /* ── Content area ── */
    .content-area {
        padding: 1rem;
        flex: 1;
        overflow-y: auto;
    }

    /* ── Header actions: stack vertical ── */
    .header-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
        margin-bottom: 1.25rem;
    }
    .header-actions > div,
    .header-actions > button {
        width: 100%;
    }
    .header-actions .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* ── Títulos ── */
    h1 { font-size: 1.25rem; }
    h2 { font-size: 1.1rem; }

    /* ── Stats grids: 2 columnas en móvil ── */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    /* Grids de 3-4 columnas → 2 columnas */
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: 1fr 1fr !important;
    }
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(3"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* ── Tablas: scroll horizontal ── */
    .table-container,
    .data-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        min-width: 600px;
    }

    /* Surface panels con menos padding */
    .surface-panel {
        padding: 1rem;
    }

    /* ── Formularios: colapsar a 1 columna ── */
    .form-row,
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Grid-column spans: resetear en móvil */
    [style*="grid-column: 1/-1"],
    [style*="grid-column:1/-1"] {
        grid-column: 1 / -1 !important;
    }

    /* ── Modales: pantalla completa en móvil ── */
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        border-radius: 20px 20px 0 0 !important;
        margin: auto 0 0 0;
        padding: 1.5rem !important;
    }
    .modal {
        align-items: flex-end !important;
    }

    /* ── Panels deslizantes (detail panels): full width en móvil ── */
    #provider-detail-panel,
    #rfq-detail-panel,
    #cust-detail-panel,
    #lead-detail-panel,
    #contract-detail-panel {
        width: 100% !important;
        max-width: 100% !important;
        right: -100vw !important;
        left: 0 !important;
        border-radius: 0 !important;
        padding: 1.25rem !important;
        z-index: 600 !important;
    }
    /* Cuando right = 0, el panel está abierto */
    #provider-detail-panel[style*="right: 0"],
    #rfq-detail-panel[style*="right: 0"],
    #cust-detail-panel[style*="right: 0"],
    #lead-detail-panel[style*="right: 0"],
    #contract-detail-panel[style*="right: 0"] {
        right: 0 !important;
    }

    /* ── Buttons: tamaño touch-friendly ── */
    .btn {
        min-height: 40px;
        font-size: .88rem;
    }
    .btn-sm {
        min-height: 32px;
        font-size: .78rem;
    }

    /* ── Filter bars ── */
    .filter-bar {
        flex-direction: column;
        gap: .6rem;
    }
    .filter-bar .form-input,
    .filter-bar .form-select {
        max-width: 100%;
        width: 100%;
    }

    /* ── Tabs: scroll horizontal si son muchos ── */
    [style*="display:flex"][style*="border-bottom"],
    [style*="display: flex"][style*="border-bottom"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        padding-bottom: 2px;
    }

    /* ── Cards de proveedores: 1 columna ── */
    #providers-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Topbar actions: reducir gap ── */
    .topbar-actions {
        gap: .5rem;
    }

    /* ── Ocultar columnas secundarias de tablas en móvil ── */
    .hide-mobile { display: none !important; }

    /* ── Botón de guardar: fijo abajo en formularios largos ── */
    .mobile-sticky-save {
        position: sticky;
        bottom: 0;
        background: white;
        padding: .75rem 0 .25rem;
        margin-top: 1rem;
        border-top: 1px solid var(--border-color);
    }

    /* ── Login card: sin bordes redondeados extremos en móvil ── */
    .login-card {
        border-radius: 0 !important;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        padding: 2rem 1.5rem !important;
    }
}

/* ── Social Hub Omni-Inbox (solo móvil) ── */
@media (max-width: 768px) {
    .omni-shell {
        grid-template-columns: 1fr !important;
        height: calc(100vh - var(--topbar-height)) !important;
        overflow: hidden;
    }

    /* Por defecto: mostrar solo el inbox */
    .omni-shell .omni-sidebar {
        display: flex !important;
        width: 100% !important;
        height: 100% !important;
        border-right: none !important;
    }
    .omni-shell .omni-chat {
        display: none !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 200 !important;
        top: 0 !important;
    }
    /* Contexto: oculto por defecto, se abre como sheet desde abajo */
    #omni-ctx {
        display: none !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 75vh !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -4px 30px rgba(0,0,0,.15) !important;
        z-index: 700 !important;
        overflow-y: auto !important;
        border-left: none !important;
        padding: 1.25rem !important;
        background: white !important;
    }
    #omni-ctx.mobile-open {
        display: flex !important;
    }
    #omni-ctx-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 699;
    }
    #omni-ctx-overlay.visible { display: block; }

    /* Botón de info en el chat header */
    #btn-omni-ctx-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        font-size: 1.3rem;
        cursor: pointer;
        padding: 4px 8px;
        color: #6366f1;
        flex-shrink: 0;
    }

    /* Cuando hay conversación activa: mostrar chat full screen */
    .omni-shell.omni-chat-open .omni-sidebar {
        display: none !important;
    }
    .omni-shell.omni-chat-open .omni-chat {
        display: flex !important;
    }

    /* Botón volver en el chat header */
    #btn-omni-back {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        font-size: 1.4rem;
        cursor: pointer;
        color: #6366f1;
        padding: 4px 8px 4px 0;
        flex-shrink: 0;
    }
}

/* ── Pantallas muy pequeñas (≤ 380px) ── */
@media (max-width: 380px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(3"] {
        grid-template-columns: 1fr !important;
    }
    h1 { font-size: 1.1rem; }
    .content-area { padding: .75rem; }
}