/**
 * BLOQUE 1/1
 * Archivo: style.css
 * Descripción: Archivo COMPLETO. Incluye estilos de tarjetas, scrollbars personalizados y las animaciones necesarias para modales y listas.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body { 
    font-family: 'Inter', sans-serif; 
    background-color: #f8fafc; 
    color: #0f172a; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- TARJETAS DE MÉTRICAS E INTERACTIVIDAD --- */
.metric-card { 
    background: white;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
    border: 1px solid #f1f5f9; 
}

.metric-card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
    border-color: #cbd5e1;
    z-index: 10; 
}

/* --- ANIMACIONES --- */
.animate-fade-in { 
    animation: fadeIn 0.6s ease-out forwards; 
    opacity: 0;
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(15px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.animate-bounce-in {
    animation: bounceIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
    transform: scale(0.95);
}

@keyframes bounceIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- SCROLLBAR PERSONALIZADO (Para listas y modales) --- */
/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar { 
    width: 8px; 
    height: 8px; 
}
::-webkit-scrollbar-track { 
    background: #f1f5f9; 
}
::-webkit-scrollbar-thumb { 
    background: #cbd5e1; 
    border-radius: 4px; 
    border: 2px solid #f1f5f9; /* Crea un margen visual */
}
::-webkit-scrollbar-thumb:hover { 
    background: #94a3b8; 
}

/* Clase utilitaria para scrollbars más finos en áreas pequeñas */
.custom-scrollbar::-webkit-scrollbar { 
    width: 6px; 
}
.custom-scrollbar::-webkit-scrollbar-track { 
    background: transparent; 
}
.custom-scrollbar::-webkit-scrollbar-thumb { 
    background-color: #e2e8f0; 
    border-radius: 20px; 
    border: 2px solid transparent; 
    background-clip: content-box; 
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover { 
    background-color: #cbd5e1; 
}

/* --- UTILIDADES VISUALES --- */
.text-shadow-sm { 
    text-shadow: 0 1px 2px rgba(0,0,0,0.1); 
}

/* Estilos de impresión o ocultos */
@media print {
    .no-print { display: none !important; }
}