/**
 * Tema Personalizado - Vibrante y Legible
 */

/* ============================================
   NAVBAR SUPERIOR - Gradiente continuo de izquierda a derecha
   ============================================ */
.main-header.navbar {
    background: linear-gradient(-90deg, #667eea 0%, #5c1af5 100%) !important;
    border-bottom: none;
    min-height: 57px;
}

.main-header .navbar-nav .nav-link {
    color: #fff !important;
    font-weight: 500;
}

.main-header .navbar-nav .nav-link:hover {
    opacity: 0.8;
}

/* ============================================
   SIDEBAR - Menú Lateral con Texto Blanco
   ============================================ */
.main-sidebar {
    background: #2c3e50 !important;
}

/* Logo/Brand con mismo gradiente continuo */
.brand-link {
    background: linear-gradient(90deg, #667eea 0%, #5c1af5 100%) !important;
    color: #fff !important;
    font-weight: bold;
    border-bottom: none;
    min-height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-link:hover {
    opacity: 0.9;
}

/* TODOS los items del menú en BLANCO */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link {
    color: #ffffff !important;
    padding-left: 0.5rem !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
}

/* Item activo con gradiente */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background: linear-gradient(135deg, #667eea 0%, #5c1af5 100%) !important;
    color: #ffffff !important;
    font-weight: bold;
}

/* SUB-ITEMS del menú también en BLANCO con indentación */
.nav-treeview > .nav-item > .nav-link {
    color: #ffffff !important;
    padding-left: calc(0.5rem + 2px) !important;
    font-size: 0.9rem !important;
}

.nav-treeview > .nav-item > .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
}

.nav-treeview > .nav-item > .nav-link.active {
    background: linear-gradient(135deg, #667eea 0%, #5c1af5 100%) !important;
    color: #ffffff !important;
}

/* Iconos de los sub-items más pequeños y con más margen */
.nav-treeview .nav-icon {
    font-size: 0.8rem;
    margin-right: 0.3rem;
}

/* Iconos del menú en blanco */
.nav-sidebar .nav-icon {
    color: #ffffff !important;
}

/* ============================================
   FOOTER - Negro sobre Blanco, Centrado
   ============================================ */
.main-footer {
    background: #ffffff !important;
    color: #000000 !important;
    border-top: 1px solid #dee2e6;
    text-align: center !important;
    padding: 1rem;
}

.main-footer strong,
.main-footer a {
    color: #000000 !important;
    font-weight: 600;
}

.main-footer a:hover {
    color: #667eea !important;
    text-decoration: none;
}

/* ============================================
   FORMULARIOS - Focus States y Efectos
   ============================================ */
.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn-search {
    transition: all 0.3s;
}

.btn-search:hover {
    transform: scale(1.05);
}

/* ============================================
   CARDS - Efectos de Hover
   ============================================ */
.info-card {
    transition: all 0.3s;
}

.info-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.timeline-card {
    transition: all 0.3s;
}

.timeline-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}