/* Estilos generales para el cuerpo */
body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex; /* Usamos flexbox para el layout del sidebar y contenido */
    flex-direction: row; /* Asegura que los elementos se dispongan en fila (horizontal) */
    min-height: 100vh; /* Para que ocupe toda la altura de la ventana */
    background-color: #121212; /* Fondo gris oscuro profesional */
    color: #E0E0E0; /* Color de texto suave para alta legibilidad */
}

/* Estilos del Sidebar */
.sidebar {
    width: 60px; /* Ancho inicial (colapsado) */
    background-color: #1A1A1A; /* Un gris más claro para el fondo del menú */
    background: linear-gradient(to bottom, #1A1A1A, #333333); /* Degradado */
    color: white;
    transition: width 0.3s ease; /* Transición suave para el despliegue */
    overflow-x: hidden; /* Oculta el contenido que excede el ancho */
    flex-shrink: 0; /* Evita que el sidebar se encoja */
    padding-top: 20px; /* Espacio superior */
    box-shadow: 2px 0 5px rgba(0,0,0,0.2); /* Sombra para darle profundidad */
    position: fixed; /* Para que el menú se quede fijo */
    height: 100vh; /* Para que ocupe toda la altura de la pantalla */
    z-index: 1000; /* Para asegurar que esté encima */
}

.sidebar.expanded {
    width: 250px; /* Ancho expandido */
}

.toggle-btn {
    background-color: #333333; /* Un tono un poco más claro que el fondo del sidebar */
    color: #E0E0E0;
    border: none;
    padding: 10px 15px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 20px;
    transition: background-color 0.3s ease;
}

.toggle-btn:hover {
    background-color: #424242; /* Color de acento al pasar el mouse */
}

.sidebar-menu {
    list-style: none; /* Eliminar viñetas de lista */
    padding: 0;
    margin: 0;
}

.sidebar-menu li {
    position: relative; /* Para el despliegue del submenú */
}

.sidebar-menu a {
    display: flex; /* Para alinear ícono y texto */
    align-items: center;
    padding: 10px 15px;
    text-decoration: none;
    color: #E0E0E0; /* Color del texto por defecto */
    white-space: nowrap; /* Evita que el texto se rompa */
    transition: background-color 0.3s ease, padding-left 0.3s ease, border-color 0.3s ease;
    border: 1px solid #424242;
    border-radius: 5px;
    margin: 5px 10px;
}

.sidebar-menu a:hover {
    background-color: #424242; /* Fondo de acento al pasar el mouse */
    color: #FFFFFF;
    border-color: #424242;
}

/* --- Colores específicos para cada icono --- */
.sidebar-menu .fa-house {
    color: #BDBDBD; /* Gris claro para Inicio */
}
.sidebar-menu .fa-cash-register {
    color: #60935D; /* Verde para Ventas */
}
.sidebar-menu .fa-cart-shopping {
    color: #FFD700; /* Ámbar para Compras */
}
.sidebar-menu .fa-chart-pie {
    color: #00BCD4; /* Cian para Informes */
}
.sidebar-menu .fa-gear {
    color: #9C27B0; /* Púrpura para Configuración */
}
.sidebar-menu .fa-circle-info {
    color: #8D6E63; /* Marrón para Ayuda */
}

/* Asegura que el icono cambie de color cuando el enlace se hovers */
.sidebar-menu a:hover .icon {
    color: #FFFFFF;
}

.sidebar-menu .icon {
    font-size: 1.2em;
    margin-right: 10px;
    min-width: 20px;
    text-align: center;
    transition: color 0.3s ease;
}

.sidebar-menu .text {
    opacity: 0;
    transition: opacity 0.3s ease;
    max-width: 0;
    overflow: hidden;
}

.sidebar.expanded .sidebar-menu .text {
    opacity: 1;
    max-width: 200px;
}

/* Estilos para submenús */
.sidebar-menu .collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.sidebar-menu .collapse.show {
    /* max-height se ajusta con JS para la animación */
}

.sidebar-menu .collapse li a {
    display: flex;
    align-items: center;
    padding-left: 35px;
    background-color: #333333; /* Un tono más oscuro para los submenús */
    font-size: 0.95em;
    color: #E0E0E0;
    border: 1px solid #424242;
    border-radius: 3px;
    margin: 3px 15px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Asegura que el icono del submenú cambie de color cuando el enlace se hovers */
.sidebar-menu .collapse li a:hover .icon {
    color: #FFFFFF;
}

.sidebar-menu .collapse li a:hover {
    background-color: #424242; /* Un tono más claro al pasar el mouse */
    color: #FFFFFF;
    border-color: #424242;
}

/* Estilos del Contenido Principal */
.content {
    flex-grow: 1; /* El contenido ocupará el espacio restante */
    padding: 20px;
    transition: margin-left 0.3s ease; /* Para ajustar el contenido */
    margin-left: 60px; /* Ancho inicial del sidebar */
}

.sidebar.expanded + .content {
    margin-left: 250px; /* Ancho expandido del sidebar */
}

.titulo-principal-destacado {
    border: 2px solid #333333; /* Cambiado el color del borde */
    background-color: #242424; /* Un gris más claro que el fondo para que resalte */
    color: #E0E0E0;
    padding: 15px; /* Ajusta el espacio dentro del recuadro */
    border-radius: 5px; /* Ajusta el radio para bordes redondeados */
    text-shadow: 2px 2px 4px #000000; /* Ajusta la sombra para el efecto 3D */
}