/**
 * CSS CRÍTICO PARA FORZAR LAYOUT CORRECTO
 * Este archivo debe cargarse AL FINAL para sobrescribir todos los demás estilos
 * Plataforma SaaS Email Marketing
 */

/* FORZAR main-content - MÁXIMA ESPECIFICIDAD Y PRIORIDAD */
html body main.main-content,
body main.main-content,
html main.main-content,
main.main-content,
.main-content {
    margin-left: 200px !important;
    margin-top: 50px !important;
    width: calc(100% - 200px) !important;
    max-width: calc(100% - 200px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
    padding: 1rem !important;
    background: #f5f7fa !important;
    overflow-x: hidden !important;
    float: none !important;
    clear: both !important;
}

/* FORZAR sidebar - MÁXIMA ESPECIFICIDAD */
html body aside.sidebar,
html body #sidebar.sidebar,
body aside.sidebar,
body #sidebar.sidebar,
html aside.sidebar,
html #sidebar.sidebar,
aside.sidebar,
#sidebar.sidebar,
.sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 200px !important;
    height: 100vh !important;
    z-index: 1000 !important;
    display: block !important;
    background: #1a1d29 !important;
}

/* FORZAR header - MÁXIMA ESPECIFICIDAD */
html body header.header,
body header.header,
html header.header,
header.header,
.header {
    position: fixed !important;
    left: 200px !important;
    top: 0 !important;
    right: 0 !important;
    height: 50px !important;
    z-index: 999 !important;
    display: block !important;
    background: #fff !important;
    transition: left 0.3s ease !important;
}

/* Header cuando sidebar está colapsado */
html body:has(.sidebar.collapsed) header.header,
body:has(.sidebar.collapsed) header.header,
.sidebar.collapsed ~ header.header {
    left: 60px !important;
}

/* Asegurar que body y html no interfieran */
html body {
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

html {
    overflow-x: hidden !important;
}

/* Responsive mejorado - solo en móviles */
@media (max-width: 768px) {
    /* Sidebar siempre oculto por defecto en móvil */
    html body aside.sidebar,
    body aside.sidebar,
    aside.sidebar,
    #sidebar.sidebar,
    .sidebar {
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 1050 !important;
        width: 200px !important;
    }

    /* Sidebar visible cuando tiene clase .show */
    html body aside.sidebar.show,
    body aside.sidebar.show,
    aside.sidebar.show,
    #sidebar.sidebar.show,
    .sidebar.show {
        transform: translateX(0) !important;
        box-shadow: 2px 0 10px rgba(0,0,0,0.3) !important;
    }

    /* Overlay para móvil */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
        transition: opacity 0.3s ease;
    }

    .sidebar-overlay.show {
        display: block !important;
    }

    /* Header a ancho completo en móvil */
    html body header.header,
    body header.header,
    header.header,
    .header {
        left: 0 !important;
        right: 0 !important;
        height: 50px !important;
        padding: 0.5rem 1rem !important;
    }

    /* Main content a ancho completo */
    html body main.main-content,
    body main.main-content,
    main.main-content,
    .main-content {
        margin-left: 0 !important;
        margin-top: 50px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.75rem !important;
    }
    
    /* Tablas responsive */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
        width: 100%;
    }
    
    /* Cards más compactas */
    .card {
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    /* Botones más pequeños en grupos */
    .btn-group .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
    
    /* Ocultar algunas columnas en tablas en móvil */
    .table th:nth-child(n+5),
    .table td:nth-child(n+5) {
        display: none;
    }
    
    /* Estadísticas en grid responsive */
    .row .col-md-3 {
        margin-bottom: 1rem;
    }
    
    /* Modales más pequeños en móvil */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    /* Botón toggle visible en móvil */
    .sidebar-toggle-mobile {
        display: block !important;
    }
}

/* Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    html body main.main-content,
    body main.main-content,
    main.main-content,
    .main-content {
        padding: 1.5rem !important;
    }
    
    .card-body {
        padding: 1.25rem !important;
    }
}

/* Estilos para sidebar colapsado */
html body aside.sidebar.collapsed,
html body #sidebar.sidebar.collapsed,
body aside.sidebar.collapsed,
body #sidebar.sidebar.collapsed,
aside.sidebar.collapsed,
#sidebar.sidebar.collapsed,
.sidebar.collapsed {
    width: 60px !important;
    overflow: visible !important;
}

/* Permitir que los submenús se desborden en sidebar colapsado */
.sidebar.collapsed .sidebar-body,
.sidebar.collapsed .sidebar-nav,
.sidebar.collapsed .nav {
    overflow: visible !important;
}

html body:has(.sidebar.collapsed) main.main-content,
body:has(.sidebar.collapsed) main.main-content,
.sidebar.collapsed ~ main.main-content {
    margin-left: 60px !important;
    width: calc(100% - 60px) !important;
    max-width: calc(100% - 60px) !important;
}

html body:has(.sidebar.collapsed) header.header,
body:has(.sidebar.collapsed) header.header,
.sidebar.collapsed ~ header.header {
    left: 60px !important;
}

/* =====================================================
   ESTILOS COMPACTOS PARA GRÁFICOS Y TABLAS
   Para que se vean bien al 100% de zoom
   ===================================================== */

/* Gráficos más pequeños */
.chart-container {
    height: 200px !important;
    max-height: 200px !important;
}

.chart-container-large {
    height: 280px !important;
    max-height: 280px !important;
}

.donut-chart-wrapper {
    height: 200px !important;
    max-height: 200px !important;
}

/* Contenedores de canvas más compactos */
.chart-container canvas,
.donut-chart-wrapper canvas {
    max-height: 100% !important;
}

/* Dashboard cards más compactas */
.dashboard-kpi .kpi-card {
    padding: 1rem !important;
}

.dashboard-kpi .kpi-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.25rem !important;
    margin-bottom: 0.75rem !important;
}

.dashboard-kpi .kpi-value {
    font-size: 1.75rem !important;
}

.dashboard-kpi .kpi-label {
    font-size: 0.7rem !important;
}

/* Chart cards más compactas */
.chart-card {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
}

.chart-header {
    margin-bottom: 1rem !important;
    padding-bottom: 0.75rem !important;
}

.chart-title {
    font-size: 1rem !important;
}

/* Tablas compactas para dashboard */
.recent-campaigns-table th {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.7rem !important;
}

.recent-campaigns-table td {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
}

/* Engagement card compacta */
.engagement-pie-wrapper {
    padding: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.pie-chart-container {
    max-width: 140px !important;
    height: 140px !important;
    min-height: 140px !important;
}

.pie-chart-container canvas {
    max-width: 140px !important;
    max-height: 140px !important;
}

.pie-center-value {
    font-size: 1.5rem !important;
}

.pie-center-label {
    font-size: 0.6rem !important;
}

/* Métricas compactas */
.engagement-metrics-grid {
    gap: 0.35rem !important;
    padding-top: 0.5rem !important;
}

.metric-box {
    padding: 0.35rem !important;
}

.metric-box-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.75rem !important;
}

.metric-box-label {
    font-size: 0.55rem !important;
}

.metric-box-value {
    font-size: 0.85rem !important;
}

/* Leyenda del pie compacta */
.pie-legend {
    gap: 0.5rem !important;
    padding: 0.75rem !important;
}

.legend-item {
    padding: 0.5rem !important;
}

.legend-label {
    font-size: 0.65rem !important;
}

.legend-value {
    font-size: 1rem !important;
}

/* Stat cards del dashboard principal */
.stat-card .card-body {
    padding: 0.5rem !important;
    gap: 0.5rem !important;
}

.stat-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.9rem !important;
}

.stat-value {
    font-size: 1.1rem !important;
}

.stat-label {
    font-size: 0.65rem !important;
}

/* Barras horizontales compactas */
.bar-container {
    height: 24px !important;
}

.bar-fill {
    font-size: 0.75rem !important;
    padding-right: 0.5rem !important;
}

.bar-label {
    font-size: 0.75rem !important;
    min-width: 100px !important;
}

/* Row spacing reducido */
.dashboard-kpi .row.mb-4 {
    margin-bottom: 0.75rem !important;
}

.dashboard-kpi .col-lg-2 {
    margin-bottom: 0.5rem !important;
}

/* Donut center info compacto */
.donut-center-value {
    font-size: 1.75rem !important;
}

.donut-center-label {
    font-size: 0.7rem !important;
}