/* Bootstrap 5 Custom Variables - Personalización para Complejo Esgueva */

:root {
    /* Colores principales - Manteniendo identidad visual CORPORATIVA (VERDE) */
    --bs-primary: #2d5016; /* Verde oscuro corporativo */
    --bs-primary-rgb: 45, 80, 22;
    --bs-secondary: #4a7c2a; /* Verde medio corporativo */
    --bs-secondary-rgb: 74, 124, 42;
    
    /* Colores Navideños (BLANCO/AZUL) - Para elementos navideños */
    --navidad-white: #ffffff;
    --navidad-blue-light: #e3f2fd;
    --navidad-blue-medium: #bbdefb;
    --navidad-blue: #2196F3;
    --navidad-blue-dark: #1565C0;
    
    /* Colores de estado */
    --bs-success: #28a745;
    --bs-info: #17a2b8;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    
    /* Tipografía */
    --bs-font-family-sans-serif: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --bs-font-size-base: 1rem;
    --bs-font-weight-normal: 400;
    --bs-font-weight-semibold: 600;
    --bs-font-weight-bold: 700;
    
    /* Espaciado */
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 0.75rem;
    
    /* Sombras */
    --bs-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    
    /* Transiciones */
    --bs-transition: all 0.3s ease;
}

/* Personalización de componentes Bootstrap */

/* Botones */
.btn-primary {
    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-secondary) 100%);
    border: none;
    font-weight: 600;
    transition: var(--bs-transition);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #3a6820 0%, #5a9a35 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(45, 80, 22, 0.4);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-outline-primary {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.btn-outline-primary:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Cards */
.card {
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: var(--bs-transition);
}

.card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Formularios */
.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(45, 80, 22, 0.25);
}

.form-label {
    font-weight: 600;
    color: #555;
}

/* Navbar */
.navbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-weight: 700;
    color: var(--bs-primary) !important;
}

/* Nav Tabs */
.nav-tabs .nav-link {
    color: #666;
    border: none;
    border-bottom: 3px solid transparent;
    transition: var(--bs-transition);
}

.nav-tabs .nav-link:hover {
    border-bottom-color: var(--bs-primary);
    color: var(--bs-primary);
}

.nav-tabs .nav-link.active {
    color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
    background-color: transparent;
    font-weight: 600;
}

/* Badges */
.badge {
    font-weight: 600;
    padding: 0.35em 0.65em;
}

/* Alerts */
.alert {
    border: none;
    border-left: 4px solid;
}

.alert-success {
    border-left-color: var(--bs-success);
}

.alert-danger {
    border-left-color: var(--bs-danger);
}

.alert-warning {
    border-left-color: var(--bs-warning);
}

.alert-info {
    border-left-color: var(--bs-info);
}

/* Tablas */
.table thead {
    background-color: #f8f9fa;
}

.table-hover tbody tr:hover {
    background-color: #f8f9fa;
}

/* Sidebar Admin */
.offcanvas {
    border-right: 1px solid #dee2e6;
}

.offcanvas-header {
    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-secondary) 100%);
    color: white;
}

/* Utilidades personalizadas */
.text-primary-custom {
    color: var(--bs-primary) !important;
}

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

.bg-gradient-primary {
    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-secondary) 100%) !important;
}

/* Espaciado consistente */
.spacing-xs { margin: 0.25rem; }
.spacing-sm { margin: 0.5rem; }
.spacing-md { margin: 1rem; }
.spacing-lg { margin: 1.5rem; }
.spacing-xl { margin: 2rem; }