/* ============================================================================
   📦 PROYECTO: BYTECOBRADOR SAAS - EXTENSIÓN DE MUTABILIDAD RESPONSIVA
   🛡️ PROTOCOLO: SELLO DE HIERRO (Aislamiento de Vistas de Calle)
   Archivo: operator-panel/css/responsive-layout.css
   ============================================================================ */

/* 🌓 1. GRID COMPACTA DE METRICAS (AFECTA EXCLUSIVAMENTE AL DASHBOARD) */
@media (max-width: 992px) {
    /* La grilla 2x2 se activa únicamente dentro del contenedor de inicio */
    #dashboard .w3-row-padding, 
    #dashboard .w3-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Cuadro compacto de 2x2 */
        gap: 12px !important;
        padding: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Libera el flujo de los bloques hijos dentro de la grid del inicio */
    #dashboard .w3-quarter, 
    #dashboard .w3-third, 
    #dashboard .w3-half, 
    #dashboard [class*="w3-col"] {
        width: 100% !important;
        margin-bottom: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    /* Compactación del colchón interno de las tarjetas de KPI */
    #dashboard .w3-quarter .w3-container, 
    #dashboard [class*="w3-col"] .w3-container {
        padding: 12px !important;
    }

    /* Ajuste tipográfico micro para que los textos entren limpios en el celular */
    #dashboard .w3-quarter h5, 
    #dashboard .w3-quarter p {
        font-size: 0.88em !important;
    }
}

/* 📱 2. BLINDAJE TÁCTIL PARA FORMULARIOS Y PORTAL DE VENDEDORES (CELULARES) */
@media (max-width: 850px) {
    
    /* Las filas de los formularios de solicitudes pasan a hileras verticales fluidas */
    .saas-filter-bar,
    .saas-form-row-premium {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding-bottom: 4px !important;
        margin-bottom: 14px !important;
        width: 100% !important;
    }

    /* Los agrupadores de inputs internos se estiran al 100% de la pantalla vertical */
    .saas-filter-bar > div,
    .saas-filter-bar .saas-control-wrapper,
    .saas-form-row-premium > div {
        flex-direction: column !important;
        width: 100% !important;
        justify-content: flex-start !important;
        max-width: none !important;
        gap: 6px !important;
    }

    /* Subimos las cajas a 44px de altura táctil premium */
    .saas-input-premium,
    .saas-select-premium,
    input[type="text"].saas-input-form-premium,
    input[type="search"].saas-input-form-premium,
    input[type="number"].saas-input-form-premium,
    select.saas-select-form-premium {
        width: 100% !important;
        max-width: none !important;
        height: 44px !important; 
        line-height: 42px !important;    
        padding-top: 0 !important;          
        padding-bottom: 0 !important;       
        box-sizing: border-box !important;
    }

    /* Botones transformados en barras completas para oprimir con el pulgar */
    .saas-btn-premium,
    .saas-btn-premium-modal,
    .saas-form-row-premium button,
    #tab-solicitudes-venta button {
        width: 100% !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Saneamiento de Telefonía Flexbox */
    .phone-flex-row {
        flex-direction: row !important; 
        gap: 8px !important;
        width: 100% !important;
    }
    
    select.saas-select-form-premium.prefix-select-fixed {
        width: 95px !important;
    }

    /* 📊 3. CONTENCIÓN Y SCROLL DE TABLAS EN DISPOSITIVOS MÓVILES */
    /* Fuerza un scroll horizontal sutil en el monitor de cobradores y la grilla de solicitudes */
    [data-widget-id="activity"] .w3-card,
    #tab-solicitudes-venta div.w3-responsive,
    #tab-solicitudes-venta .w3-responsive {
        overflow-x: auto !important;
        display: block !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Sostiene un ancho mínimo para que las columnas no colapsen en pantallas chicas */
    [data-widget-id="activity"] table,
    #tab-solicitudes-venta table {
        min-width: 720px !important;
        width: 100% !important;
        table-layout: auto !important;
    }
}