/* ==========================================================================
   📦 EXTENSIÓN DE WIDGETS INTERACTIVOS (Byte Solutions Suite)
   ========================================================================== */

/* Estructura base para el cuerpo de los widgets grandes */
.widget-body-animated {
    max-height: 1200px; /* Un techo alto seguro para que entren tablas largas */
    overflow-y: hidden; /* 🎯 CAMBIADO: Oculta el vertical para permitir el colapso elástico */
    overflow-x: auto;   /* 🎯 AGREGADO: Activa el scroll horizontal solo si la grilla no entra */
    opacity: 1;
    /* Transición elástica y suave usando aceleración por hardware */
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.4s ease,
                opacity 0.3s ease;
}

/* Estado contraído (Minimizado) disparado por el dashboard-layout.js */
.widget-body-animated.collapsed-state {
    max-height: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    opacity: 0;
    pointer-events: none; /* Evita que el usuario haga clics invisibles */
}

/* Suavizar la transición de las columnas de la grilla */
[data-widget-id] {
    transition: width 0.4s ease, flex 0.4s ease;
}

/* Estilización de la barra de scroll horizontal para que sea sutil */
.widget-body-animated::-webkit-scrollbar {
    height: 6px;
}
.widget-body-animated::-webkit-scrollbar-thumb {
    background: #7f8c8d; /* Color gris corporativo muted */
    border-radius: 4px;
}
.widget-body-animated::-webkit-scrollbar-track {
    background: transparent;
}

.widget-body-animated .w3-responsive, 
div.w3-responsive {
    overflow-x: auto !important; /* Fuerza la barra de desplazamiento horizontal */
    display: block !important;   /* Rompe la rigidez flotante de W3.CSS */
    width: 100% !important;      /* Asegura que use todo el espacio disponible del contenedor blanco */
}

/* Forzar a la tabla a no comprimir sus textos y desbordar hacia la derecha */
.widget-body-animated table {
    display: table !important;
    table-layout: auto !important;  /* 🎯 CLAVE: Rompe la rigidez estructural oculta de W3.CSS */
    min-width: 780px !important;    /* Subimos a 780px para dar espacio real a las 7 columnas */
    width: 100% !important;
}

/* Evita que los títulos y las celdas rompan los renglones hacia abajo */
.widget-body-animated th, 
.widget-body-animated td {
    white-space: nowrap !important; /* 🎯 Clave: Prohíbe que los textos se partan en dos renglones */
}

/* ==========================================================================
   🎯 OPTIMIZACIÓN DE COMPONENTES INTERACTIVOS (Versión Consolidada)
   ========================================================================== */

/* Regla universal para suavizar los cambios de tamaño en cualquier bloque */
[data-widget-id] {
    transition: width 0.4s ease, flex 0.4s ease;
}

/* 1. COMPONENTE: GRÁFICO SEMANAL */
/* Forzamos el fondo blanco institucional y los bordes sobre la tarjeta del gráfico */
[data-widget-id="chart"] {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 8px 0px;
}

/* 2. COMPONENTE: MONITOR COBRADORES (Mantenemos su estructura limpia) */
[data-widget-id="activity"] .w3-card {
    max-width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
}

[data-widget-id="activity"] table {
    display: table !important;
    width: 100% !important;
    table-layout: auto !important;
}

/* ==========================================================================
   📌 COMPONENTE: MONITOREO COBRADORES (PROGRESS & QUICKVIEW PANEL)
   ========================================================================== */

/* Barras de avance interno en celdas de la grilla */
.progress-container { 
    width: 100%; 
    background-color: #f1f1f1; 
    border-radius: 4px; 
    height: 4px; 
    margin-top: 4px; 
}
.progress-bar { 
    height: 100%; 
    background-color: #2196F3; 
    border-radius: 4px; 
    transition: width 0.3s; 
}

/* Panel Desplazable Lateral de Auditoría Rápida (QuickView) */
.quickview-panel {
    position: fixed; 
    right: -400px; 
    top: 0; 
    width: 400px; 
    height: 100%;
    background: white; 
    box-shadow: -2px 0 10px rgba(0,0,0,0.2);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Sincronizado con tus otras transiciones */
    overflow-y: auto; 
    z-index: 1100;
}
.quickview-panel.open { 
    right: 0; 
}

/* Adaptación responsiva para consolas y smartphones */
@media (max-width: 600px) { 
    .quickview-panel { 
        width: 100%; 
        right: -100%; 
    } 
    .quickview-panel.open { 
        right: 0; 
    } 
}