/* Estilo general para la estructura principal */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f3f4f6;
}

/* Contenedor principal del layout */
.main-layout {
    display: flex; /* Utiliza flexbox para organizar el sidebar y el contenido principal */
    height: 100vh; /* Asegura que el layout ocupe toda la altura de la ventana */
    flex-direction: column; /* Coloca el navbar arriba y el contenido abajo */
}

/* Navbar fijo */
.navbar-fixed {
    position: fixed; /* Fija el navbar en la parte superior */
    top: 0;
    left: 0;
    width: calc(100% - 250px); /* El navbar ocupa todo el ancho menos el ancho del sidebar */
    background-color: #1976D2; /* Color de fondo del navbar */
    z-index: 1000; /* Asegura que el navbar esté encima del sidebar */

    color: white;
}

/* Sidebar fijo */
.sidebar {
    position: fixed; /* Fija el sidebar en el lado izquierdo */
    top: 0;
    left: 0;
    width: 250px; /* Ancho fijo del sidebar */
    height: 100vh; /* Ocupa toda la altura de la ventana */
    background-color: #e3f2fd; /* Fondo azul claro */
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

/* Contenido principal */
.main-content {
    margin-left: 250px; /* Alinea el contenido a la derecha del sidebar */
    padding: 20px; /* Espaciado interno para el contenido */
    background-color: #f9f9f9; /* Fondo claro para contraste */
    height: calc(100vh - 64px); /* Ajusta la altura del contenido para que ocupe todo el espacio restante debajo del navbar */
    overflow-y: auto; /* Habilita scroll si el contenido es muy grande */
    box-sizing: border-box;
}

/* Estilo adicional para el formulario de login */
.login-container {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    margin-top: 50px; /* Añade espacio superior */
}

.login-container img {
    display: block;
    margin: 0 auto 20px;
    width: 120px; /* Tamaño del logo */
}

.login-container input {
    margin-bottom: 20px;
}

.login-container button {
    width: 100%;
}

.error-message {
    color: red;
    text-align: center;
    margin-top: 10px;
}


/* Efecto hover sutil */
.sidebar-item {
    position: relative; /* Necesario para que el hover abarque todo el item */
}

.sidebar a {
    font-size: 18px;
    color: rgba(99, 99, 99, 0.09);
    display: block;
    text-decoration: none;
    padding-left: 20px;
    transition: padding-left 0.2s ease, background-color 0.3s ease;
    padding: 10px 0; /* Espaciado interno */
}

/* Estilo del hover */
.sidebar-item:hover a {
    background-color: #4f4f4f39; /* Fondo más claro en hover */
    color: #263238; /* Cambiar el color del texto */
    padding-left: 30px; /* Desplazamiento sutil hacia la izquierda */
}

/* Para los iconos */
.sidebar .material-icons {
    color: white; /* Color de los iconos */
    font-size: 24px;
    transition: color 0.3s ease; /* Transición suave para los iconos */
}

/* Cambio de color del icono en hover */
.sidebar-item:hover .material-icons {
    color: #ce0000; /* Cambia el color del icono */
}