/* Contenedor maestro que alinea el menú y el contenido uno al lado del otro */
.app-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Espaciador que reserva el ancho del menú en el flujo normal de la página,
   para que el contenido de la derecha no quede tapado por el menú (que está en
   position:fixed, fuera del flujo). Antes arrancaba en 15px y solo crecía al
   pasar el mouse -- ahora queda fijo en el ancho completo siempre. */
.sidebar-espaciador {
    width: 18rem;
    flex-shrink: 0;
    position: relative;
}

/* El menú visual real (fijo en pantalla para no desaparecer al bajar por la página) */
.sidebar-flotante {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 18rem;
    background-color: #0d253f;
    overflow-y: auto;
    z-index: 1050;
    border-right: 2px solid #c29b38;
    box-shadow: 4px 0 15px rgba(0,0,0,0.1);
}

/* Contenedor de los textos del menú -- ahora siempre visible, sin animación de
   aparición ligada al hover */
.sidebar-contenido {
    width: 18rem;
    padding: 2rem 1rem;
    opacity: 1;
    visibility: visible;
}

/* Área central que se adapta al espacio que le dejen */
.contenido-principal {
    flex-grow: 1; /* Toma todo el espacio sobrante */
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    width: 100%;
}