/* Variables de colores globales */
:root {
    --primary-color: #040404;
    --primary-hover: #4d4a4d;
    --accent-color: #fdd402;
    --text-light: #333333;
    --text-dark: #000000;
    --background-light: #f8f9fa;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
}

/* Clases de utilidad para colores */
.bg-custom-primary {
    background-color: var(--primary-color) !important;
}

/* Estilos para tarjetas y elementos de documento */
.card:hover, .document-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.bg-custom-accent {
    background-color: var(--accent-color) !important;
}

.text-custom-primary {
    color: var(--primary-color) !important;
}

.text-custom-accent {
    color: var(--accent-color) !important;
}

/* Botones personalizados */
.btn-custom-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--accent-color);
}

.btn-custom-primary:hover, .btn-custom-primary:focus {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--text-dark) !important;
}

.btn-outline-custom-accent {
    color: var(--accent-color);
    border-color: var(--accent-color);
    background-color: transparent;
}

.btn-outline-custom-accent:hover, .btn-outline-custom-accent:focus {
    background-color: var(--accent-color);
    color: var(--text-dark) !important;
}

/* Navbar personalizada */
.navbar-custom {
    background-color: var(--primary-color) !important;
}

/* Estilos para imágenes */
.img-preview {
    max-height: 150px;
    object-fit: contain;
}

/* Transiciones suaves para todos los elementos interactivos */
.btn, .nav-link, a, .navbar-brand, .card, .document-item, .pagination .page-link {
    transition: all 0.3s ease;
}

.navbar-custom .nav-link {
    color: var(--accent-color) !important;
}

.navbar-custom .navbar-brand {
    color: var(--accent-color) !important;
}

.navbar-custom .nav-link:hover {
    color: var(--accent-color) !important;
    background-color: var(--primary-hover);
}

/* Eliminado el efecto hover del logo */