/* =========================================
   ESTILOS GLOBALES - BLANCA BOUTIQUE
   ========================================= */
body {
    font-family: 'Poppins', sans-serif;
    /* Fondo con gradiente radial */
    background: radial-gradient(circle, #76B1BF 0%, #4E929D 100%);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* =========================================
   PANTALLA DE LOGIN (GLASSMORPHISM)
   ========================================= */
.login-box {
    /* Fondo azul profundo con 70% de opacidad */
    background-color: rgba(30, 41, 59, 0.7);
    /* Efecto de desenfoque del cristal */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Borde sutil blanco humo */
    border: 1px solid rgba(248, 250, 252, 0.2);
    width: 100%;
    max-width: 420px;
}

.avatar-circle {
    /* Fondo s贸lido azul profundo */
    background-color: #1E293B;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    /* Borde blanco humo */
    border: 2px solid #F8FAFC;
}

/* =========================================
   INPUTS MINIMALISTAS
   ========================================= */
.minimalist-input {
    /* Solo l铆nea inferior en blanco humo */
    border-bottom: 1px solid #F8FAFC;
    border-radius: 0;
}

.minimalist-input input::placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
}

/* Quitar el recuadro azul que pone Bootstrap al hacer clic */
.minimalist-input input:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    color: #FFFFFF !important;
}

/* =========================================
   BOTONES
   ========================================= */
.btn-login {
    /* Azul medianoche oscuro */
    background-color: #0D1B2A;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    letter-spacing: 1.5px;
}

.btn-login:hover {
    /* Efecto al pasar el mouse */
    background-color: #1a2a40;
    border: 1px solid #F8FAFC;
    color: #FFFFFF;
}

/* =========================================
   ESTILOS DEL DASHBOARD (PANEL PRINCIPAL)
   ========================================= */
.bg-dashboard {
    background-color: #F8FAFC; /* Blanco humo de fondo general */
}

.bg-sidebar {
    background-color: #1E293B; /* Azul profundo para el menú lateral */
}

.sidebar .nav-link {
    transition: all 0.3s ease;
    padding: 10px 15px;
    opacity: 0.8;
}

.sidebar .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    opacity: 1;
}

.sidebar .active-link {
    background: radial-gradient(circle, #76B1BF 0%, #4E929D 100%);
    opacity: 1;
    font-weight: 500;
}

.avatar-circle-small {
    background-color: #0D1B2A;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid #F8FAFC;
}

/* =========================================
   CORRECCIÓN MENÚ MÓVIL (OFFCANVAS)
   ========================================= */
.offcanvas, .offcanvas-md, .offcanvas-start {
    background-color: #1E293B !important;
}

    .bg-sidebar { background-color: #1E293B !important; }
    
    /* Esto asegura que en PC la barra siempre llegue al fondo */
    .sidebar { 
        min-height: 100vh; 
        display: flex; 
        flex-direction: column;
    }

    .active-link { background-color: rgba(255, 255, 255, 0.1) !important; border-left: 4px solid #4E929D; font-weight: 600; }
    .hover-card { transition: transform 0.2s ease; }
    .hover-card:hover { transform: translateY(-5px); }
    
    /* Ajustes específicos para móviles */
    @media (max-width: 767.98px) {
        .sidebar {
            position: fixed;
            width: 280px;
            height: 100vh; /* Altura completa del celular */
        }
        .offcanvas-body {
            overflow-y: auto; /* Solo permite scroll si el contenido supera la pantalla del celular */
        }
    }