/* Estilos Generales */
body {
    overflow-x: hidden; /* Previene el scroll horizontal */
}

/* Estructura principal */
#wrapper {
    display: flex;
}

/* Sidebar */
.sidebar-container {
    background: #000a27;
    min-height: 100vh;
    width: 250px;
    transition: margin .25s ease-out;
}

.sidebar-container .sidebar-heading {
    color: #fff;
    font-weight: bold;
}

.sidebar-container .list-group-item {
    background: #000a27;
    color: #adb5bd;
    border: none;
    padding: 1rem 1.25rem;
}

/* Estilo para el enlace activo o al pasar el mouse */
.sidebar-container .list-group-item:hover,
.sidebar-container .list-group-item.active {
    background: #ff6a00; /* Naranja característico */
    color: #fff;
}

/* Contenido Principal */
#page-content-wrapper {
    flex: 1; /* Ocupa el espacio restante */
    width: calc(100% - 250px);
}

/* Estilos para cuando la sidebar está oculta */
#wrapper.toggled .sidebar-container {
    margin-left: -250px; /* Oculta la sidebar hacia la izquierda */
}

#wrapper.toggled #page-content-wrapper {
    width: 100%;
}

/* Responsividad para móviles */
@media (max-width: 768px) {
    .sidebar-container {
        margin-left: -250px;
    }
    #page-content-wrapper {
        width: 100%;
    }
    #wrapper.toggled .sidebar-container {
        margin-left: 0;
    }
}

/* --- Estilos para la página de Login --- */

.login-body {
    background-color: #f0f2f5; /* Un gris suave para el fondo */
    height: 100vh;
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
}

.login-body .card {
    border-radius: 1rem;
}

.login-body .card-header {
    background-color: transparent;
    border-bottom: 0;
}

/* --- Estilos para la página de Dashboard --- */

.kpi-card {
    border: none;
    border-radius: 0.5rem;
    transition: transform 0.2s;
}

.kpi-card:hover {
    transform: translateY(-5px); /* Efecto sutil al pasar el mouse */
}

.card.shadow {
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
}

.card-header {
    font-weight: bold;
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
}

/* --- Estilos para la página de Soporte --- */
.contact-item {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Espacio entre el icono y el texto */
}

.contact-item i {
    color: #ff6a00; /* Naranja característico para los iconos */
}

/* --- Mejora de Diseño del Dashboard --- */

/* Clase para el degradado naranja */
.kpi-card.bg-elanda-gradient {
    background: linear-gradient(45deg, #FF8C00, #FF4500); /* Naranja oscuro a naranja rojizo */
    border: none;
}

/* Sugerencias para un look más limpio y minimalista */
.kpi-card h5 {
    font-size: 0.9rem;
    text-transform: uppercase;
    opacity: 0.8;
}

.card {
    border-radius: 0.75rem; /* Bordes un poco más redondeados */
    border: 1px solid #e3e6f0; /* Un borde muy sutil en lugar de sombras pesadas */
    box-shadow: none; /* Quitamos la sombra para un look más plano y limpio */
}

.card-header {
    background-color: transparent; /* Hacemos el encabezado transparente */
    font-weight: 600; /* Un poco más de grosor en la fuente */
    border-bottom: 1px solid #e3e6f0;
    padding: 1rem 1.25rem;
}

.bg-success, .bg-primary {
    background-color: #000a27 !important;
}

/* --- Estilo para el Logo en la Sidebar --- */
.sidebar-logo {
    max-width: 150px; /* Ajusta este valor al tamaño que prefieras */
    height: auto;     /* Mantiene la proporción de la imagen */
    transition: opacity 0.2s ease-in-out;
}

.sidebar-logo:hover {
    opacity: 0.9; /* Efecto sutil al pasar el mouse */
}

a.sidebar-heading.text-center.py-3.text-decoration-none {
    margin: 0 auto;
    display: block;
}

button#sidebarToggle {
    background: #000a27 !important;
}

a.btn.btn-primary.w-100 {
    background: #000a27 !important;
    outline: none !important;
    border: none !important;
}

.login-body {
    background-color: #000a27;
}

.login-body  .sidebar-logo {
    max-width: 220px;

}

.card.text-center.h-100.bg-elanda-card {
    background: #000A27;
    color: #FFF;
}

.bg-elanda-card .btn,.bg-elanda-card .btn:active {
    background: #FF6A00;
    color: #FFF;
    border: none;
    outline: none;
    font-size: 18px;
    font-weight: 400;
}