/* =============================================
   Dashboard Reportes Skoll - Estilos del Plugin
   v1.0.6 - Compatibilidad total con Bridge + 
   Elementor e-con-boxed
   ============================================= */

/* -----------------------------------------------
   OVERRIDE CONTENEDORES PADRE (Bridge + Elementor)
   El JS aplica .reportes-fw a cada padre.
   Estas reglas anulan los max-width de Elementor.
   ----------------------------------------------- */
.reportes-fw {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Elementor e-con-boxed fuerza max-width:1140px 
   en .e-con-inner. Hay que aplastarlo. */
.reportes-fw.e-con-boxed,
.reportes-fw .e-con-inner,
.reportes-fw.e-con-inner {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Bridge content containers */
.reportes-fw.content,
.reportes-fw.content_inner {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* Bridge title_outer genera espacio muerto */
.reportes-fw.title_outer {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.reportes-fw .title {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* -----------------------------------------------
   CONTENEDOR PRINCIPAL DEL DASHBOARD
   ----------------------------------------------- */
#reportes-skoll-container {
    --bg-dark: #0f172a;
    --card-bg: rgba(30, 41, 59, 0.7);
    --accent-blue: #3b82f6;
    --accent-green: #10b981;
    --accent-red: #ef4444;
    font-family: 'Inter', sans-serif !important;
    color: #f8fafc !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 4rem 2rem !important;
    box-sizing: border-box !important;
    background-color: var(--bg-dark) !important;
}

/* -----------------------------------------------
   TIPOGRAFÍA - Todos los h2 en blanco
   ----------------------------------------------- */
#reportes-skoll-container h1,
#reportes-skoll-container h2,
#reportes-skoll-container .font-display {
    font-family: 'Outfit', sans-serif;
}

#reportes-skoll-container h2 {
    color: #ffffff !important;
}

/* -----------------------------------------------
   COMPONENTES VISUALES
   ----------------------------------------------- */

/* Tarjetas Glass */
#reportes-skoll-container .glass {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* KPI Cards */
#reportes-skoll-container .kpi-card {
    transition: transform 0.2s ease;
}

#reportes-skoll-container .kpi-card:hover {
    transform: translateY(-4px);
    border-color: rgba(59, 130, 246, 0.5);
}

/* Texto Gradiente */
#reportes-skoll-container .gradient-text {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Controles */
#reportes-skoll-container input[type="range"] {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    outline: none;
}

#reportes-skoll-container select option {
    background: #0f172a;
    color: white;
}

#reportes-skoll-container .shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}