/* -----------------------------------
   Menú lateral fijo
----------------------------------- */
#menu-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background: #ffffff;
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.2);
}

/* -----------------------------------
   Estilo compartido: Menú y contenido
----------------------------------- */
#menu, #contenido {
  font: normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
  color: #333; /* color base del texto */
  line-height: 1.5;
}

/* -----------------------------------
   Links del menú
----------------------------------- */
#menu a {
  display: block;
  margin: 10px 0;
  font-weight: bold;         /* negrita */
  text-decoration: none;     /* sin subrayado */
  color: #333;               /* color inicial */
  transition: color 0.2s;
}

#menu a:hover {
  color: #0077cc;            /* color al pasar el ratón */
}

/* -----------------------------------
   Contenido principal a la derecha
----------------------------------- */
#contenido {
  margin-left: 220px; /* espacio para el menú */
  padding: 20px;
}