/**
 * Charts - Sistema de Enlaces
 * Versión: 3.0
 * Estilos para gráficas y estadísticas
 */

/* ============================================
   CONTENEDORES DE GRÁFICAS
   ============================================ */
.chart-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Canvas responsivo - altura mínima para que Chart.js funcione */
canvas {
    max-width: 100%;
}

/* Alturas específicas para cada tipo de gráfica */
#visitsChart {
    height: 300px !important;
}

#devicesChart {
    height: 300px !important;
}

#countriesChart {
    height: 350px !important;
}

/* Responsive - Ajustar alturas en pantallas pequeñas */
@media (max-width: 768px) {
    #visitsChart {
        height: 250px !important;
    }
    
    #devicesChart {
        height: 280px !important;
    }
    
    #countriesChart {
        height: 300px !important;
    }
}

@media (max-width: 576px) {
    #visitsChart {
        height: 220px !important;
    }
    
    #devicesChart {
        height: 250px !important;
    }
    
    #countriesChart {
        height: 280px !important;
    }
}

/* ============================================
   CARDS DE ESTADÍSTICAS CON COLORES DEL TEMA
   ============================================ */
.stats-card-primary .card-header {
    background-color: var(--color-action-primary) !important;
    color: var(--text-inverse) !important;
}

.stats-card-success .card-header {
    background-color: var(--color-success) !important;
    color: var(--text-inverse) !important;
}

.stats-card-warning .card-header {
    background-color: var(--color-warning) !important;
    color: var(--text-inverse) !important;
}

.stats-card-info .card-header {
    background-color: var(--color-info) !important;
    color: var(--text-inverse) !important;
}

.stats-card-alternative .card-header {
    background-color: var(--color-alternative) !important;
    color: var(--text-inverse) !important;
}

/* ============================================
   ESTILOS DE IMPRESIÓN
   ============================================ */
@media print {
    /* Ocultar elementos no necesarios */
    .btn, 
    .sidebar, 
    .navbar,
    .page-header .col-md-6:last-child,
    .card-header small {
        display: none !important;
    }
    
    /* Ajustar cards para impresión */
    .card {
        page-break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
    
    .card-header {
        background-color: #f8f9fa !important;
        color: #333 !important;
        border-bottom: 2px solid #ddd !important;
    }
    
    /* Ajustar info-boxes */
    .info-box {
        page-break-inside: avoid;
    }
    
    /* Info-box colores para impresión */
    .info-box-icon {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    /* Ajustar gráficas */
    canvas {
        max-height: 400px !important;
    }
    
    /* Forzar fondo blanco y texto negro para impresión */
    body {
        background-color: white !important;
        color: black !important;
    }
    
    /* Ajustar tablas */
    .table {
        font-size: 0.9rem;
        color: black !important;
    }
    
    .table th {
        background-color: #f8f9fa !important;
        color: #333 !important;
        border: 1px solid #ddd !important;
    }
    
    .table td {
        padding: 0.5rem !important;
        border: 1px solid #ddd !important;
    }
    
    /* Badges en impresión */
    .badge {
        border: 1px solid #333 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}